From c0b10e43740f8ca7bd3ac9f726595abc16601fe0 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Thu, 11 Mar 2021 19:49:46 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat(vant-cli):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9C=A8=20vant-cli=20=E7=9A=84=20desktop=20=E9=A1=B5=E4=B8=AD?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=BB=84=E4=BB=B6=E5=BA=93=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-cli/site/desktop/main.js        |  3 +-
 .../src/compiler/gen-site-desktop-shared.ts   | 38 ++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/vant-cli/site/desktop/main.js b/packages/vant-cli/site/desktop/main.js
index 0e6974d07..73c1719f2 100644
--- a/packages/vant-cli/site/desktop/main.js
+++ b/packages/vant-cli/site/desktop/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
+import { packageEntry } from 'site-desktop-shared';
 import App from './App';
 import { router } from './router';
 
-window.app = createApp(App).use(router).mount('#app');
+window.app = createApp(App).use(router).use(packageEntry).mount('#app');
diff --git a/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts b/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts
index 0ce42825a..0daab5355 100644
--- a/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts
+++ b/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts
@@ -47,9 +47,9 @@ function resolveDocuments(components: string[]): DocumentItem[] {
 
   if (locales) {
     const langs = Object.keys(locales);
-    langs.forEach(lang => {
+    langs.forEach((lang) => {
       const fileName = lang === defaultLang ? 'README.md' : `README.${lang}.md`;
-      components.forEach(component => {
+      components.forEach((component) => {
         docs.push({
           name: formatName(component, lang),
           path: join(SRC_DIR, component, fileName),
@@ -57,7 +57,7 @@ function resolveDocuments(components: string[]): DocumentItem[] {
       });
     });
   } else {
-    components.forEach(component => {
+    components.forEach((component) => {
       docs.push({
         name: formatName(component),
         path: join(SRC_DIR, component, 'README.md'),
@@ -65,26 +65,28 @@ function resolveDocuments(components: string[]): DocumentItem[] {
     });
   }
 
-  const staticDocs = glob.sync(normalizePath(join(DOCS_DIR, '**/*.md'))).map(path => {
-    const pairs = parse(path).name.split('.');
-    return {
-      name: formatName(pairs[0], pairs[1] || defaultLang),
-      path,
-    };
-  });
+  const staticDocs = glob
+    .sync(normalizePath(join(DOCS_DIR, '**/*.md')))
+    .map((path) => {
+      const pairs = parse(path).name.split('.');
+      return {
+        name: formatName(pairs[0], pairs[1] || defaultLang),
+        path,
+      };
+    });
 
-  return [...staticDocs, ...docs.filter(item => existsSync(item.path))];
+  return [...staticDocs, ...docs.filter((item) => existsSync(item.path))];
 }
 
 function genImportDocuments(items: DocumentItem[]) {
   return items
-    .map(item => `import ${item.name} from '${normalizePath(item.path)}';`)
+    .map((item) => `import ${item.name} from '${normalizePath(item.path)}';`)
     .join('\n');
 }
 
 function genExportDocuments(items: DocumentItem[]) {
   return `export const documents = {
-  ${items.map(item => item.name).join(',\n  ')}
+  ${items.map((item) => item.name).join(',\n  ')}
 };`;
 }
 
@@ -100,13 +102,23 @@ function genExportVersion() {
   return `export const packageVersion = '${getPackageJson().version}';`;
 }
 
+function genInstall() {
+  return `import './package-style';`;
+}
+
+function genExportPackageEntry() {
+  return `export { default as packageEntry } from './package-entry';`;
+}
+
 export function genSiteDesktopShared() {
   const dirs = readdirSync(SRC_DIR);
   const documents = resolveDocuments(dirs);
 
   const code = `${genImportConfig()}
+${genInstall()}
 ${genImportDocuments(documents)}
 
+${genExportPackageEntry()}
 ${genExportConfig()}
 ${genExportDocuments(documents)}
 ${genExportVersion()}

From a913f5bd36f3b4118048c269a808d9c4e984fb8e Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Fri, 12 Mar 2021 10:40:41 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat(vant-markdown-loader):=20=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=20README,=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E=E7=9A=84=E6=96=B9=E5=BC=8F=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=20demo=20=E5=B9=B6=E7=9B=B4=E6=8E=A5=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vant-markdown-loader/src/extract-demo.js  | 24 +++++++++++
 packages/vant-markdown-loader/src/index.js    | 42 +++++++++++++++----
 .../src/side-effect-tags.js                   | 14 +++++++
 3 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 packages/vant-markdown-loader/src/extract-demo.js
 create mode 100644 packages/vant-markdown-loader/src/side-effect-tags.js

diff --git a/packages/vant-markdown-loader/src/extract-demo.js b/packages/vant-markdown-loader/src/extract-demo.js
new file mode 100644
index 000000000..58eaf4ef1
--- /dev/null
+++ b/packages/vant-markdown-loader/src/extract-demo.js
@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = function extraDemo(content) {
+  const demoLinks = [];
+
+  /*
+   * 提取 README 中的 demo 文件路径，例如下面的内容，就会提取为 ['./demo-link/index.vue']
+   * ```demo
+   * ./demo-link/index.vue
+   * ```
+   */
+  content = content.replace(
+    /<pre><code class="language-demo">([\s\S]*?)<\/code><\/pre>/g,
+    function (_, link) {
+      link = link.trim(); // 去换行符
+      demoLinks.push(link);
+      const demoFileName = path.basename(link, '.vue'); // 获取文件名
+      const tag = demoFileName.replace(/\B([A-Z])/g, '-$1').toLowerCase(); // 驼峰转连字符
+      return `<${tag} />`;
+    }
+  );
+
+  return [content, demoLinks];
+};
diff --git a/packages/vant-markdown-loader/src/index.js b/packages/vant-markdown-loader/src/index.js
index 824d70658..3b4f31a61 100644
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const loaderUtils = require('loader-utils');
 const MarkdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
@@ -5,18 +6,42 @@ const frontMatter = require('front-matter');
 const highlight = require('./highlight');
 const linkOpen = require('./link-open');
 const cardWrapper = require('./card-wrapper');
+const extractDemo = require('./extract-demo');
+const sideEffectTags = require('./side-effect-tags');
 const { slugify } = require('transliteration');
 
+function camelize(str) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
+}
+
 function wrapper(content) {
+  const markdownDir = path.dirname(this.resourcePath);
+  let demoLinks;
+  let styles;
+  [content, demoLinks] = extractDemo(content);
+  [content, styles] = sideEffectTags(content);
   content = cardWrapper(content);
-  content = escape(content);
-
   return `
-import { h } from 'vue';
+<template>
+  <section>
+    ${content}
+  </section>
+</template>
 
-const content = unescape(\`${content}\`);
+<script>
+${demoLinks
+  .map((link) => {
+    const absPath = path.join(markdownDir, link); // 获取 demo 文件的完整路径
+    const demoFileName = path.basename(link, '.vue');
+    return `import ${camelize(demoFileName)} from '${absPath}';`;
+  })
+  .join('\n')}
 
 export default {
+  components: {
+    ${demoLinks.map((link) => camelize(path.basename(link, '.vue'))).join(',')}
+  },
+
   mounted() {
     const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));
 
@@ -35,11 +60,10 @@ export default {
       }
     }
   },
-
-  render() {
-    return h('section', { innerHTML: content });
-  }
 };
+</script>
+
+${styles.join('\n')}
 `;
 }
 
@@ -72,5 +96,5 @@ module.exports = function (source) {
     linkOpen(parser);
   }
 
-  return options.wrapper(parser.render(source), fm);
+  return options.wrapper.call(this, parser.render(source), fm);
 };
diff --git a/packages/vant-markdown-loader/src/side-effect-tags.js b/packages/vant-markdown-loader/src/side-effect-tags.js
new file mode 100644
index 000000000..a7f99fd5b
--- /dev/null
+++ b/packages/vant-markdown-loader/src/side-effect-tags.js
@@ -0,0 +1,14 @@
+module.exports = function sideEffectTags(content) {
+  const styles = [];
+
+  // 从模版中移除 script 标签
+  content = content.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/g, '');
+
+  // 从模版中移除 style 标签，并收集到 styles 数组中，以转移为 .vue 文件 的 style 标签
+  content = content.replace(/<style[\s\S]*?>([\s\S]*?)<\/style>/g, (_, css) => {
+    styles.push(`<style scoped>${css}</style>`);
+    return '';
+  });
+
+  return [content, styles];
+};

From f1d72cb016acb8c080b4159be4aa75afa5d4b950 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Fri, 12 Mar 2021 10:42:58 +0800
Subject: [PATCH 3/9] =?UTF-8?q?feat(vant-cli):=20=E4=B8=BA=20README=20?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A2=9E=E5=8A=A0=20vue-loader=20=E4=BB=A5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=A2=84=E8=A7=88=20demo=20=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-cli/src/config/webpack.base.ts | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/vant-cli/src/config/webpack.base.ts b/packages/vant-cli/src/config/webpack.base.ts
index a6a73c26c..2cde4d6ec 100644
--- a/packages/vant-cli/src/config/webpack.base.ts
+++ b/packages/vant-cli/src/config/webpack.base.ts
@@ -24,6 +24,15 @@ const CSS_LOADERS = [
   },
 ];
 
+const VUE_LOADER = {
+  loader: 'vue-loader',
+  options: {
+    compilerOptions: {
+      preserveWhitespace: false,
+    },
+  },
+};
+
 const plugins = [
   new webpack.DefinePlugin({
     __VUE_OPTIONS_API__: 'true',
@@ -74,16 +83,7 @@ export const baseConfig: WebpackConfig = {
     rules: [
       {
         test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              compilerOptions: {
-                preserveWhitespace: false,
-              },
-            },
-          },
-        ],
+        use: [VUE_LOADER],
       },
       {
         test: /\.(js|ts|jsx|tsx)$/,
@@ -115,7 +115,7 @@ export const baseConfig: WebpackConfig = {
       },
       {
         test: /\.md$/,
-        use: ['@vant/markdown-loader'],
+        use: [VUE_LOADER, '@vant/markdown-loader'],
       },
     ],
   },

From c2ac641ec1f20080dc8e71033f2dddd205ae91d9 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Fri, 12 Mar 2021 17:58:53 +0800
Subject: [PATCH 4/9] =?UTF-8?q?feat(vant-cli):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=94=A8=E4=BA=8E=20demo=20=E7=BB=84=E4=BB=B6=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=20playground=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-cli/package.json                |   1 +
 .../desktop/components/DemoPlayground.vue     | 208 ++++++++++++++++++
 packages/vant-cli/site/desktop/main.js        |   7 +-
 packages/vant-cli/yarn.lock                   |   5 +
 4 files changed, 220 insertions(+), 1 deletion(-)
 create mode 100644 packages/vant-cli/site/desktop/components/DemoPlayground.vue

diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json
index 36419c29b..ce771563e 100644
--- a/packages/vant-cli/package.json
+++ b/packages/vant-cli/package.json
@@ -65,6 +65,7 @@
     "commander": "^6.2.1",
     "consola": "^2.15.0",
     "conventional-changelog": "^3.1.24",
+    "copy-text-to-clipboard": "^3.0.1",
     "css-loader": "^4.0.0",
     "eslint": "^7.17.0",
     "fast-glob": "^3.2.4",
diff --git a/packages/vant-cli/site/desktop/components/DemoPlayground.vue b/packages/vant-cli/site/desktop/components/DemoPlayground.vue
new file mode 100644
index 000000000..8174a8416
--- /dev/null
+++ b/packages/vant-cli/site/desktop/components/DemoPlayground.vue
@@ -0,0 +1,208 @@
+<template>
+  <div :class="{ 'demo-playground': !inline, transform }">
+    <slot v-if="inline" />
+    <template v-else>
+      <div class="demo-playground--previewer" :class="{ compact }">
+        <slot />
+      </div>
+      <div class="demo-playground--code">
+        <div class="demo-playground--code--actions">
+          <span></span>
+          <button
+            title="Copy source code"
+            class="action-icon"
+            role="copy"
+            :data-status="copyStatus"
+            @click="copySourceCode"
+          />
+          <button
+            title="Toggle source code panel"
+            class="action-icon"
+            role="source"
+            @click="toogleSource"
+          />
+        </div>
+        <div
+          v-show="showSource"
+          v-html="unescape(codeSnippet)"
+          class="demo-playground--code--content"
+        ></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import copy from 'copy-text-to-clipboard';
+
+export default {
+  name: 'DemoPlayground',
+  props: {
+    originCode: String, // 源文件内容
+    codeSnippet: String, //  源文件转 html 后的内容
+    transform: Boolean, // 防止 position fixed 内容飞出预览区域
+    compact: Boolean, // 紧凑模式
+    inline: Boolean, // 不需要容器
+  },
+  data() {
+    return {
+      showSource: false,
+      copyStatus: 'ready',
+    };
+  },
+  methods: {
+    unescape,
+    toogleSource() {
+      this.showSource = !this.showSource;
+    },
+    copySourceCode() {
+      copy(unescape(this.originCode));
+      this.copyStatus = 'copied';
+      setTimeout(() => {
+        this.copyStatus = 'ready';
+      }, 2000);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.demo-playground {
+  background-color: #fff;
+  border: 1px solid #ebedf1;
+  border-radius: 1px;
+  margin: 24px 0;
+  &.transform {
+    transform: translate(0, 0);
+  }
+  &--previewer {
+    padding: 40px 24px;
+    border-bottom: 1px solid #ebedf1;
+    &.compact {
+      padding: 0;
+    }
+  }
+  &--code {
+    &--actions {
+      display: flex;
+      height: 40px;
+      padding: 0 1em;
+      align-items: center;
+      > a:not(:last-child),
+      > button:not(:last-child) {
+        margin-right: 8px;
+      }
+
+      > a {
+        display: flex;
+      }
+
+      button {
+        position: relative;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        border: 0;
+        box-sizing: border-box;
+        cursor: pointer;
+        opacity: 0.6;
+        outline: none;
+        transition: opacity 0.2s, background 0.2s;
+
+        // expand click area
+        &::after {
+          content: '';
+          position: absolute;
+          top: -8px;
+          left: -8px;
+          right: -8px;
+          bottom: -8px;
+        }
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        &:active {
+          opacity: 0.9;
+        }
+
+        &:disabled {
+          opacity: 0.2;
+          cursor: not-allowed;
+        }
+
+        &[role='codesandbox'] {
+          background-position: -18px 0;
+        }
+
+        &[role='codepen'] {
+          background-position: -36px 0;
+        }
+
+        &[role='source'] {
+          background-position: -72px 0;
+        }
+
+        &[role='change-jsx'] {
+          background-position: -90px 0;
+        }
+
+        &[role='change-tsx'] {
+          background-position: -108px 0;
+        }
+
+        &[role='open-demo'] {
+          background-position: -126px 0;
+        }
+
+        &[role='motions'] {
+          background-position: -162px 0;
+        }
+
+        &[role='sketch-component'] {
+          background-position: -182px 0;
+        }
+
+        &[role='sketch-group'] {
+          background-position: -200px 0;
+        }
+
+        &[role='copy'][data-status='ready'] {
+          background-position: -54px 0;
+        }
+
+        &[role='copy'][data-status='copied'] {
+          pointer-events: none;
+          background-position: -54px -16px;
+        }
+
+        &[role='refresh'] {
+          background-position-x: -144px;
+        }
+      }
+
+      // split action buttons by a blank node
+      > span {
+        flex: 1;
+        display: inline-block;
+      }
+    }
+    &--content {
+      border-top: 1px dashed #ebedf1;
+      :deep(pre) {
+        margin: 0;
+      }
+      :deep(.language-html) {
+        border-radius: 0;
+      }
+    }
+  }
+}
+
+.action-icon {
+  background: url('data:image/png;base64,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')
+    no-repeat 0 0/230px auto;
+}
+</style>
diff --git a/packages/vant-cli/site/desktop/main.js b/packages/vant-cli/site/desktop/main.js
index 73c1719f2..3f4c4d7b0 100644
--- a/packages/vant-cli/site/desktop/main.js
+++ b/packages/vant-cli/site/desktop/main.js
@@ -1,6 +1,11 @@
 import { createApp } from 'vue';
 import { packageEntry } from 'site-desktop-shared';
 import App from './App';
+import DemoPlayground from './components/DemoPlayground';
 import { router } from './router';
 
-window.app = createApp(App).use(router).use(packageEntry).mount('#app');
+window.app = createApp(App)
+  .use(router)
+  .use(packageEntry)
+  .component(DemoPlayground.name, DemoPlayground)
+  .mount('#app');
diff --git a/packages/vant-cli/yarn.lock b/packages/vant-cli/yarn.lock
index 4fa41985d..811854aeb 100644
--- a/packages/vant-cli/yarn.lock
+++ b/packages/vant-cli/yarn.lock
@@ -3415,6 +3415,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-text-to-clipboard@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npm.taobao.org/copy-text-to-clipboard/download/copy-text-to-clipboard-3.0.1.tgz?cache=0&sync_timestamp=1613626493019&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcopy-text-to-clipboard%2Fdownload%2Fcopy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
+  integrity sha1-jL+PkOCkfxLkokdDc2Jl0Ve85pw=
+
 core-js-compat@^3.8.0:
   version "3.8.2"
   resolved "https://registry.npm.taobao.org/core-js-compat/download/core-js-compat-3.8.2.tgz?cache=0&sync_timestamp=1609682123020&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js-compat%2Fdownload%2Fcore-js-compat-3.8.2.tgz#3717f51f6c3d2ebba8cbf27619b57160029d1d4c"

From 336727556ecff432e14d5046332b75fe3c2a8048 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Fri, 12 Mar 2021 18:01:24 +0800
Subject: [PATCH 5/9] =?UTF-8?q?feat(vant-markdown-loader):=20rEADME=20?=
 =?UTF-8?q?=E4=B8=AD=E5=BC=95=E5=85=A5=20demo=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=97=B6=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=20playground=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vant-markdown-loader/src/extract-demo.js  | 35 ++++++++++++-------
 packages/vant-markdown-loader/src/index.js    | 20 ++---------
 .../vant-markdown-loader/src/md-parser.js     | 14 ++++++++
 3 files changed, 40 insertions(+), 29 deletions(-)
 create mode 100644 packages/vant-markdown-loader/src/md-parser.js

diff --git a/packages/vant-markdown-loader/src/extract-demo.js b/packages/vant-markdown-loader/src/extract-demo.js
index 58eaf4ef1..b142fce78 100644
--- a/packages/vant-markdown-loader/src/extract-demo.js
+++ b/packages/vant-markdown-loader/src/extract-demo.js
@@ -1,22 +1,33 @@
 const path = require('path');
+const fs = require('fs');
+const parser = require('./md-parser');
+
+function hyphenate(str) {
+  return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
+}
 
 module.exports = function extraDemo(content) {
+  const markdownDir = path.dirname(this.resourcePath);
   const demoLinks = [];
 
-  /*
-   * 提取 README 中的 demo 文件路径，例如下面的内容，就会提取为 ['./demo-link/index.vue']
-   * ```demo
-   * ./demo-link/index.vue
-   * ```
-   */
   content = content.replace(
-    /<pre><code class="language-demo">([\s\S]*?)<\/code><\/pre>/g,
-    function (_, link) {
+    /<demo-code([\s\S]*?)>([\s\S]*?)<\/demo-code>/g,
+    function (_, attrs, link) {
       link = link.trim(); // 去换行符
-      demoLinks.push(link);
-      const demoFileName = path.basename(link, '.vue'); // 获取文件名
-      const tag = demoFileName.replace(/\B([A-Z])/g, '-$1').toLowerCase(); // 驼峰转连字符
-      return `<${tag} />`;
+      const tag = hyphenate(path.basename(link, '.vue'));
+      const fullLink = path.join(markdownDir, link);
+      demoLinks.indexOf(fullLink) === -1 && demoLinks.push(fullLink);
+      const demoContent = fs.readFileSync(fullLink, { encoding: 'utf8' });
+      const demoParseredContent = parser.render(
+        '```html\n' + demoContent + '\n```'
+      );
+      return `
+        <demo-playground${attrs}
+        origin-code="${escape(demoContent)}"
+        code-snippet="${escape(demoParseredContent)}">
+          <${tag} />
+        </demo-playground>
+      `;
     }
   );
 
diff --git a/packages/vant-markdown-loader/src/index.js b/packages/vant-markdown-loader/src/index.js
index 3b4f31a61..849b166bc 100644
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@@ -1,24 +1,20 @@
 const path = require('path');
 const loaderUtils = require('loader-utils');
-const MarkdownIt = require('markdown-it');
-const markdownItAnchor = require('markdown-it-anchor');
 const frontMatter = require('front-matter');
-const highlight = require('./highlight');
+const parser = require('./md-parser');
 const linkOpen = require('./link-open');
 const cardWrapper = require('./card-wrapper');
 const extractDemo = require('./extract-demo');
 const sideEffectTags = require('./side-effect-tags');
-const { slugify } = require('transliteration');
 
 function camelize(str) {
   return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
 }
 
 function wrapper(content) {
-  const markdownDir = path.dirname(this.resourcePath);
   let demoLinks;
   let styles;
-  [content, demoLinks] = extractDemo(content);
+  [content, demoLinks] = extractDemo.call(this, content);
   [content, styles] = sideEffectTags(content);
   content = cardWrapper(content);
   return `
@@ -31,9 +27,7 @@ function wrapper(content) {
 <script>
 ${demoLinks
   .map((link) => {
-    const absPath = path.join(markdownDir, link); // 获取 demo 文件的完整路径
-    const demoFileName = path.basename(link, '.vue');
-    return `import ${camelize(demoFileName)} from '${absPath}';`;
+    return `import ${camelize(path.basename(link, '.vue'))} from '${link}';`;
   })
   .join('\n')}
 
@@ -67,14 +61,6 @@ ${styles.join('\n')}
 `;
 }
 
-const parser = new MarkdownIt({
-  html: true,
-  highlight,
-}).use(markdownItAnchor, {
-  level: 2,
-  slugify,
-});
-
 module.exports = function (source) {
   let options = loaderUtils.getOptions(this) || {};
   this.cacheable && this.cacheable();
diff --git a/packages/vant-markdown-loader/src/md-parser.js b/packages/vant-markdown-loader/src/md-parser.js
new file mode 100644
index 000000000..3940d886f
--- /dev/null
+++ b/packages/vant-markdown-loader/src/md-parser.js
@@ -0,0 +1,14 @@
+const MarkdownIt = require('markdown-it');
+const markdownItAnchor = require('markdown-it-anchor');
+const highlight = require('./highlight');
+const { slugify } = require('transliteration');
+
+const parser = new MarkdownIt({
+  html: true,
+  highlight,
+}).use(markdownItAnchor, {
+  level: 2,
+  slugify,
+});
+
+module.exports = parser;

From 3a900cdb7ba557669dc74e3e3e72437deb9ec0c5 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Mon, 15 Mar 2021 00:24:13 +0800
Subject: [PATCH 6/9] =?UTF-8?q?feat(vant-cli):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=20vant.config.js=20=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA=E9=A1=B5=E9=9D=A2=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E7=9A=84=E6=89=8B=E6=9C=BA=E6=A8=A1=E6=8B=9F=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-cli/site/desktop/App.vue              | 12 ++++++++----
 packages/vant-cli/site/desktop/components/index.vue |  5 +++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue
index 64a1b6bd2..88f1850b1 100644
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/packages/vant-cli/site/desktop/App.vue
@@ -6,6 +6,7 @@
       :config="config"
       :versions="versions"
       :simulator="simulator"
+      :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
     >
       <router-view />
@@ -28,6 +29,7 @@ export default {
 
     return {
       simulator: `${path}mobile.html${location.hash}`,
+      hasSimulator: true,
     };
   },
 
@@ -63,18 +65,18 @@ export default {
   watch: {
     // eslint-disable-next-line
     '$route.path'() {
-      this.setTitle();
+      this.setTitleAndToogleSimulator();
     },
 
     lang(val) {
       setLang(val);
-      this.setTitle();
+      this.setTitleAndToogleSimulator();
     },
 
     config: {
       handler(val) {
         if (val) {
-          this.setTitle();
+          this.setTitleAndToogleSimulator();
         }
       },
       immediate: true,
@@ -82,7 +84,7 @@ export default {
   },
 
   methods: {
-    setTitle() {
+    setTitleAndToogleSimulator() {
       let { title } = this.config;
 
       const navItems = this.config.nav.reduce(
@@ -101,6 +103,8 @@ export default {
       }
 
       document.title = title;
+
+      this.hasSimulator = !(current && current.hideSimulator);
     },
   },
 };
diff --git a/packages/vant-cli/site/desktop/components/index.vue b/packages/vant-cli/site/desktop/components/index.vue
index 4be02f785..1160c1351 100644
--- a/packages/vant-cli/site/desktop/components/index.vue
+++ b/packages/vant-cli/site/desktop/components/index.vue
@@ -8,12 +8,12 @@
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
-    <doc-container :has-simulator="!!simulator">
+    <doc-container :has-simulator="hasSimulator">
       <doc-content>
         <slot />
       </doc-content>
     </doc-container>
-    <doc-simulator v-if="simulator" :src="simulator" />
+    <doc-simulator v-if="hasSimulator" :src="simulator" />
   </div>
 </template>
 
@@ -39,6 +39,7 @@ export default {
     lang: String,
     versions: Array,
     simulator: String,
+    hasSimulator: Boolean,
     langConfigs: Array,
     config: {
       type: Object,

From 7ec1da7dc39dca90ab617af4f5471ca4ff14ba04 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Mon, 15 Mar 2021 01:25:31 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat(vant-cli):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E6=80=A7=E5=9C=A8=E5=85=A8=E9=83=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=9A=90=E8=97=8F=E6=89=8B=E6=9C=BA=E6=A8=A1=E6=8B=9F?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-cli/site/desktop/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vant-cli/site/desktop/App.vue b/packages/vant-cli/site/desktop/App.vue
index 88f1850b1..e18e94467 100644
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/packages/vant-cli/site/desktop/App.vue
@@ -104,7 +104,7 @@ export default {
 
       document.title = title;
 
-      this.hasSimulator = !(current && current.hideSimulator);
+      this.hasSimulator = !(config.site.hideSimulator || this.config.hideSimulator || (current && current.hideSimulator));
     },
   },
 };

From bb4c178d4d146a8a7312e8309a0513f19a0aac24 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Mon, 15 Mar 2021 01:26:32 +0800
Subject: [PATCH 8/9] =?UTF-8?q?docs(vant-cli):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=85=B3=E4=BA=8E=E6=A1=8C=E9=9D=A2=E7=BB=84=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-cli/README.md       |  4 +-
 packages/vant-cli/docs/config.md  | 13 +++++
 packages/vant-cli/docs/desktop.md | 83 +++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 packages/vant-cli/docs/desktop.md

diff --git a/packages/vant-cli/README.md b/packages/vant-cli/README.md
index 7532fcdb2..5f16e2bd5 100644
--- a/packages/vant-cli/README.md
+++ b/packages/vant-cli/README.md
@@ -68,8 +68,6 @@ yarn add @vant/cli --dev
 - [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md)
 - [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)
 - [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
+- [桌面端组件](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/desktop.md)
 - [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
 
-## 关于桌面端组件
-
-目前 Vant Cli 仅支持移动端组件的预览，桌面端组件暂不支持预览（欢迎 PR）。
diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md
index 73a79c32f..6900ec0a2 100644
--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@@ -12,6 +12,7 @@
     - [site.versions](#siteversions)
     - [site.baiduAnalytics](#sitebaiduanalytics)
     - [site.searchConfig](#sitesearchconfig)
+    - [site.hideSimulator](#sitehidesimulator)
   - [Webpack](#webpack)
   - [Babel](#babel)
     - [默认配置](#-1)
@@ -165,6 +166,8 @@ module.exports = {
             path: 'home',
             // 导航项文案
             title: '介绍',
+            // 是否隐藏当前页右侧的手机模拟器（默认不隐藏）
+            hideSimulator: true,
           },
         ],
       },
@@ -222,6 +225,16 @@ module.exports = {
 
 配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
 
+- [site.hideSimulator](#sitehidesimulator)
+
+### site.hideSimulator
+
+- Type: `boolean`
+- Default: `false`
+
+是否隐藏所有页面右侧的手机模拟器，默认不隐藏
+
+
 ### site.htmlPluginOptions
 
 - Type: `object`
diff --git a/packages/vant-cli/docs/desktop.md b/packages/vant-cli/docs/desktop.md
new file mode 100644
index 000000000..d4a27ca10
--- /dev/null
+++ b/packages/vant-cli/docs/desktop.md
@@ -0,0 +1,83 @@
+## 关于桌面端组件
+
+Vant Cli 也支持预览桌面端组件，你可以在组件的 `demo` 目录下新建一个 `.vue` 文件，并在组件的 `README` 中按如下格式声明要预览的组件：
+
+```html
+<demo-code>./demo/MyDemo.vue</demo-code>
+```
+
+`demo-code` 标签中间的文本为 `README` 到 `demo` 文件的相对路径。
+
+```
+button
+├─ demo             # 组件示例
+│   └─ MyDemo.vue   # 要预览的 demo 文件
+├─ index.js         # 组件入口
+├─ index.less       # 组件样式
+└─ README.md        # 组件文档
+```
+
+![image](https://user-images.githubusercontent.com/5093611/111076378-0e981a00-8527-11eb-8e3f-31f0be7e4021.png)
+
+`demo-code` 标签支持以下属性：
+
+| 名称      | 类型    | 描述                                    |
+| --------- | ------- | --------------------------------------- |
+| compact   | boolean | 紧凑模式                                |
+| transform | boolean | 防止预览区内 fixed 定位的元素飞出预览区 |
+| inline    | boolean | 只显示组件本身，不显示预览区边框和代码  |
+
+
+### `compact`
+
+```html
+<demo-code compact>./demo/MyDemo.vue</demo-code>
+```
+![image](https://user-images.githubusercontent.com/5093611/111076728-77cc5d00-8528-11eb-85f1-e7217344ab14.png)
+
+### `transform`
+
+```html
+<demo-code transform>./demo/MyDemo.vue</demo-code>
+```
+![image](https://user-images.githubusercontent.com/5093611/111076799-d5f94000-8528-11eb-973f-c9d69f91d2a7.png)
+
+### `inline`
+
+```html
+<demo-code inline>./demo/MyDemo.vue</demo-code>
+```
+![image](https://user-images.githubusercontent.com/5093611/111076845-15c02780-8529-11eb-9cfb-76c9b25dc2a2.png)
+
+### 去除手机模拟器
+
+对于 PC 端的组件，如果不需要右侧的手机模拟器，可以在 `vant.config.js` 文件中设置 `site.hideSimulator` 为 `true`，这样在所有页面都会隐藏手机模拟器，也可以只针对具体页面设置。
+
+```js
+module.exports = {
+  site: {
+    defaultLang: 'zh-CN',
+    hideSimulator: true, // 所有页面都不显示
+    locales: {
+      'zh-CN': {
+        title: 'Vant',
+        description: '轻量、可靠的移动端 Vue 组件库',
+        hideSimulator: true, // 中文下所有页面都不显示
+        nav: [
+          {
+            title: '基础组件',
+            items: [
+              {
+                path: 'button',
+                title: 'Button 按钮',
+                hideSimulator: true, // 只针对某个页面不显示
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+};
+
+```
\ No newline at end of file

From 507c99aa6b09b59a7ceec488a70924e7942a2b32 Mon Sep 17 00:00:00 2001
From: HaoChuan9421 <hc199421@gmail.com>
Date: Mon, 15 Mar 2021 01:36:18 +0800
Subject: [PATCH 9/9] =?UTF-8?q?perf(vant-cli):=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=20v-once?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant-markdown-loader/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vant-markdown-loader/src/index.js b/packages/vant-markdown-loader/src/index.js
index 849b166bc..401c72207 100644
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@@ -19,7 +19,7 @@ function wrapper(content) {
   content = cardWrapper(content);
   return `
 <template>
-  <section>
+  <section v-once>
     ${content}
   </section>
 </template>