diff --git a/packages/toolkits/docs/template/ng/src/router.js b/packages/toolkits/docs/template/ng/src/router.js
index 77cc5826..559a6eb5 100644
--- a/packages/toolkits/docs/template/ng/src/router.js
+++ b/packages/toolkits/docs/template/ng/src/router.js
@@ -27,6 +27,12 @@ let routes = [
     name: 'components',
     children: [{ path: '', component: Components }],
   },
+  //单组件示例
+  {
+    path: import.meta.env.VITE_CONTEXT + 'demoPage/:cmpId/:demoId',
+    component: DemoPage,
+    name: 'demoPage',
+  },
   // 未匹配到目标地址时，进行路由重定向
   {
     path: '/:pathMatch(.*)*',
diff --git a/packages/toolkits/docs/template/ng/src/views/components/components.vue b/packages/toolkits/docs/template/ng/src/views/components/components.vue
index 961aeb80..5428536f 100644
--- a/packages/toolkits/docs/template/ng/src/views/components/components.vue
+++ b/packages/toolkits/docs/template/ng/src/views/components/components.vue
@@ -1,348 +1,61 @@
 <template>
   <div>
-    <div class="f-r pt48 pl48 pr48">
-      <div class="fi-1 w0 rel cmp-container">
-        <!-- 一个组件的文档:  描述md + demos + apis -->
-        <n-space vertical>
-          <n-spin :show="cmpTopMdShow">
-            <div class="markdown-body" v-html="cmpTopMd"></div>
-          </n-spin>
-        </n-space>
-
-        <template v-if="currJson?.demos?.length > 0">
-          <n-space vertical>
-            <n-spin :show="currJsonShow">
-              <h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
-              <n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
-                <template v-if="currJson.column === '2'">
-                  <div class="one-demo-col2">
-                    <div>
-                      <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
-                    </div>
-                    <div>
-                      <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
-                </template>
-              </n-layout>
-            </n-spin>
-          </n-space>
-        </template>
-        <template v-if="currJson.apis?.length > 0">
-          <div ref="apiDiv">
-            <h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
-            <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-            <div class="mt20" v-for="(oneGroup, idx) in currJson.apis" :key="oneGroup.name">
-              <div class="f-r f-pos-start fw-bold">
-                <div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
-                <div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
-              </div>
-              <div v-for="(oneApiArr, key) in oneGroup" :key="key">
-                <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
-                  <div class="f18 py28">{{ key }}</div>
-                  <n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
-                </template>
-              </div>
-            </div>
-          </div>
-        </template>
-        <!-- types表格 -->
-        <template v-if="currJson.types">
-          <n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
-        </template>
-        <h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
-        <div class="markdown-body" v-html="cmpFAQMd"></div>
-        <div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
-      </div>
-      <!-- 目录列表 -->
-      <div class="catalog w128 sticky top32" v-if="cmpId !== 'types'">
-        <n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
-          <n-anchor-link v-for="(demo, index) in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
-          <n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
-          <n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
-          <!-- 接口特殊的导航 -->
-          <template v-if="cmpId === 'interfaces'">
-            <n-anchor-link v-for="(api, index) in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
-          </template>
-        </n-anchor>
-      </div>
+    <div class="f-r pt48 pl48 pr48 doc-container">
+      <template v-if="useTab">
+        <!-- 描述 包含基本描述 示例和规范页 -->
+        <components-detail-tab></components-detail-tab>
+      </template>
+      <template v-else>
+        <!-- 描述  包含基本描述及示例 -->
+        <components-detail></components-detail>
+      </template>
     </div>
     <div id="footer"></div>
   </div>
 </template>
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-import demo from '@demo';
-import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
+import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+import componentsDetail from './componentsDetail.vue';
+import componentsDetailTab from './componentsDetailTab.vue';
+import { fetchDemoFile } from '@/tools';
 import { router } from '@/router.js';
-import { faqMdConfig } from './cmpConfig';
+import { watch } from 'fs';
 
 const state = reactive({
-  langKey: $t2('zh-CN', 'en-US'),
-  cmpId: '',
-  currJson: { column: 1, demos: [], apis: [] },
-  currJsonShow: true,
-  cmpTopMd: null,
-  cmpTopMdShow: true,
-  cmpFAQMd: null,
-  evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
-  oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
-  apiDiv: null,
+  useTab: import.meta.env.VITE_USE_TAB || false, // 是否开启规范tab页，此变量需在.env生命，如不使用则删除对应.env变量
 });
 
-const getTypesTableOptFn = typesArr => {
-  return {
-    columns: [
-      {
-        key: 'name',
-        title: $t('name'),
-        width: '20%',
-        render: row => <div v-html={row.name}></div>,
-      },
-      {
-        key: 'value',
-        title: $t('typeValue'),
-        width: '40%',
-        render: row => <div v-html={row.value}></div>,
-      },
-      {
-        key: 'desc',
-        title: $t('desc'),
-        width: '40%',
-        render: row => <div v-html={row.desc[state.langKey]}> </div>,
-      },
-    ],
-    data: typesArr,
-  };
-};
-
-const getApiTableOptFn = oneApiArr => {
-  return {
-    columns: [
-      {
-        key: 'name',
-        title: $t('name'),
-        width: '20%',
-        render: row => {
-          return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
-        },
-      },
-      {
-        key: 'type',
-        title: $t('propType'),
-        width: '25%',
-        render: row => <div class="route-anchor" v-html={row.type}></div>,
-      },
-      {
-        key: 'defaultValue',
-        title: $t('defValue'),
-        width: '20%',
-        render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
-      },
-      {
-        key: 'desc',
-        title: $t('desc'),
-        width: '35%',
-        render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
-      },
-    ],
-    data: oneApiArr,
-  };
-};
-
-const loadPage = () => {
-  const lang = $t2('cn', 'en');
-
-  state.cmpTopMdShow = state.currJsonShow = true;
-  state.cmpId = router.currentRoute.value.params.cmpId;
-
-  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
-    .then(data => {
-      state.cmpTopMd = marked(DOMPurify.sanitize(data));
-      state.cmpTopMdShow = false;
-    })
-    .catch(error => {
-      state.cmpTopMdShow = false;
-    });
-
-  if (faqMdConfig[state.cmpId]) {
-    fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
-      .then(data => {
-        state.cmpFAQMd = marked(DOMPurify.sanitize(data));
-      })
-      .catch(error => {});
-  } else {
-    state.cmpFAQMd = null;
-  }
-
-  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
-    .then(data => {
-      const json = eval('(' + data.slice(15) + ')');
-
-      state.currJson = {
-        ...json,
-        demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
-        column: json.column || '1', // columns可能为空
-      };
-      state.currJsonShow = false;
-
-      // 兼容#hashName和/#hashName两种模式
-      setTimeout(() => {
-        let hash = router.currentRoute.value.hash?.slice(1);
-
-        if (!hash) return;
-
-        if (hash.indexOf('/') > -1) {
-          hash = hash.slice(1);
-        }
-
-        const scrollTarget = document.querySelector(`#${hash}`);
-
-        if (scrollTarget) {
-          scrollTarget.scrollIntoView();
-        }
-      }, 0);
-    })
-    .catch(error => {
-      state.currJsonShow = false;
-    });
-};
-
-const handleApiAnchor = ev => {
-  if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
-    ev.preventDefault();
-    const href = ev.target.getAttribute('href');
-    const hash = $split(href, '#', -1);
-    router.push(href);
-    setTimeout(() => {
-      const scrollTarget = document.querySelector('#' + hash);
-      if (scrollTarget) {
-        scrollTarget.scrollIntoView();
-      }
-    }, 16);
-  }
-};
-
-const fn = {
-  copyText: text => {
-    navigator.clipboard.writeText(text);
-  },
-  getApiTableOpt: oneApiArr => {
-    return getApiTableOptFn(oneApiArr);
-  },
-  getTypesTableOpt: typesArr => {
-    return getTypesTableOptFn(typesArr);
-  },
+const loadCmp = cmpI => {
+  fetchDemoFile(`@demos/app/${cmpId}/webdoc/${cmpId}.js`).then(data => {
+    const json = eval(`(${data.slice(15)})`);
+    if (json['standard']) {
+      state.useTab = true;
+    } else {
+      state.useTab = false;
+    }
+  });
 };
 
 export default defineComponent({
   name: 'CmpPage_vue',
-  components: { demo },
+  components: { componentsDetail, componentsDetailTab },
   setup() {
-    const scope = effectScope();
-    scope.run(() => {
-      watch(
-        () => router.currentRoute.value.params.cmpId,
-        cmpId => {
-          if (!cmpId) {
-            state.currJson = {};
-          } else {
-            state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
-            loadPage();
-          }
-        }
-      );
-    });
-
+    loadCmp(router.currentRoute.value.params.cmpId);
+    watch(
+      () => router.currentRoute.value.params.cmpId,
+      cmpId => {
+        if (cmpId) loadCmp(cmpId);
+      }
+    );
     onMounted(() => {
-      loadPage();
       const common = new window.TDCommon(['#footer'], {});
       common.renderFooter();
-      nextTick(() => {
-        state.apiDiv?.addEventListener('click', handleApiAnchor);
-      });
-    });
-    onUnmounted(() => {
-      scope.stop();
-      state.apiDiv?.removeEventListener('click', handleApiAnchor);
     });
+
     return {
       ...toRefs(state),
-      ...fn,
     };
   },
 });
 </script>
-<style lang="less">
-.types-table a,
-.api-table a {
-  text-decoration: none;
-  color: #5e7ce0;
-  cursor: pointer;
-}
-
-.n-data-table-td {
-  vertical-align: middle !important;
-}
-
-.catalog {
-  height: calc(100vh - 150px);
-  overflow: hidden;
-}
-
-.catalog:hover {
-  overflow-y: auto;
-}
-
-.catalog::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5;
-}
-
-.catalog::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #c1c1c1;
-}
-
-.n-anchor .n-anchor-link .n-anchor-link__title {
-  font-size: 12px;
-}
-
-.one-demo-col2 {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
-  align-items: flex-start;
-
-  > div {
-    display: grid;
-    gap: 16px;
-    grid-template-columns: 100%;
-  }
-}
-
-.cmp-container {
-  padding-right: 24px;
-}
-
-@media (max-width: 1279px) {
-  .catalog {
-    display: none;
-  }
-
-  .cmp-container {
-    padding-right: 0;
-  }
-}
-
-@media (max-width: 767px) {
-  .one-demo-col2 {
-    grid-template-columns: 100%;
-  }
-}
-</style>
+<style lang="less"></style>
diff --git a/packages/toolkits/docs/template/ng/src/views/components/componentsDetail.vue b/packages/toolkits/docs/template/ng/src/views/components/componentsDetail.vue
new file mode 100644
index 00000000..757abf2d
--- /dev/null
+++ b/packages/toolkits/docs/template/ng/src/views/components/componentsDetail.vue
@@ -0,0 +1,344 @@
+<template>
+  <div>
+    <!-- 一个组件的文档:  描述md + demos + apis -->
+    <div class="fi-1 w0 rel cmp-container">
+      <n-space vertical>
+        <n-spin :show="cmpTopMdShow">
+          <div class="markdown-body" v-html="cmpTopMd"></div>
+        </n-spin>
+      </n-space>
+
+      <template v-if="currJson?.demos?.length > 0">
+        <n-space vertical>
+          <n-spin :show="currJsonShow">
+            <h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
+            <n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
+              <template v-if="currJson.column === '2'">
+                <div class="one-demo-col2">
+                  <div>
+                    <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
+                  </div>
+                  <div>
+                    <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
+              </template>
+            </n-layout>
+          </n-spin>
+        </n-space>
+      </template>
+      <template v-if="currJson.apis?.length > 0">
+        <div ref="apiDiv">
+          <h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
+          <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
+          <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+            <div class="f-r f-pos-start fw-bold">
+              <div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
+              <div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
+            </div>
+            <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+              <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+                <div class="f18 py28">{{ key }}</div>
+                <n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+      <!-- types表格 -->
+      <template v-if="currJson.types">
+        <n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
+      </template>
+      <h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
+      <div class="markdown-body" v-html="cmpFAQMd"></div>
+      <div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
+    </div>
+    <!-- 目录列表 -->
+    <div class="catalog w128 sticky top32" v-if="cmpId !== 'types'">
+      <n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
+        <n-anchor-link v-for="(demo, index) in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
+        <n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
+        <n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
+        <!-- 接口特殊的导航 -->
+        <template v-if="cmpId === 'interfaces'">
+          <n-anchor-link v-for="api in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
+        </template>
+      </n-anchor>
+    </div>
+  </div>
+</template>
+<script lang="jsx">
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import demo from '@demo';
+import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
+import { router } from '@/router.js';
+import { faqMdConfig } from './cmpConfig';
+
+const state = reactive({
+  langKey: $t2('zh-CN', 'en-US'),
+  cmpId: '',
+  currJson: { column: 1, demos: [], apis: [] },
+  currJsonShow: true,
+  cmpTopMd: null,
+  cmpTopMdShow: true,
+  cmpFAQMd: null,
+  evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
+  oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
+  apiDiv: null,
+});
+
+const getTypesTableOptFn = typesArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => <div v-html={row.name}></div>,
+      },
+      {
+        key: 'value',
+        title: $t('typeValue'),
+        width: '40%',
+        render: row => <div v-html={row.value}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '40%',
+        render: row => <div v-html={row.desc[state.langKey]}> </div>,
+      },
+    ],
+    data: typesArr,
+  };
+};
+
+const getApiTableOptFn = oneApiArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => {
+          return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
+        },
+      },
+      {
+        key: 'type',
+        title: $t('propType'),
+        width: '25%',
+        render: row => <div class="route-anchor" v-html={row.type}></div>,
+      },
+      {
+        key: 'defaultValue',
+        title: $t('defValue'),
+        width: '20%',
+        render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '35%',
+        render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
+      },
+    ],
+    data: oneApiArr,
+  };
+};
+
+const loadPage = () => {
+  const lang = $t2('cn', 'en');
+
+  state.cmpTopMdShow = state.currJsonShow = true;
+  state.cmpId = router.currentRoute.value.params.cmpId;
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
+    .then(data => {
+      state.cmpTopMd = marked(DOMPurify.sanitize(data));
+      state.cmpTopMdShow = false;
+    })
+    .catch(error => {
+      state.cmpTopMdShow = false;
+    });
+
+  if (faqMdConfig[state.cmpId]) {
+    fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
+      .then(data => {
+        state.cmpFAQMd = marked(DOMPurify.sanitize(data));
+      })
+      .catch(error => {});
+  } else {
+    state.cmpFAQMd = null;
+  }
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
+    .then(data => {
+      const json = eval('(' + data.slice(15) + ')');
+
+      state.currJson = {
+        ...json,
+        demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
+        column: json.column || '1', // columns可能为空
+        title: json.title || state.cmpId,
+      };
+      state.currJsonShow = false;
+
+      // 兼容#hashName和/#hashName两种模式
+      setTimeout(() => {
+        let hash = router.currentRoute.value.hash?.slice(1);
+
+        if (!hash) return;
+
+        if (hash.indexOf('/') > -1) {
+          hash = hash.slice(1);
+        }
+
+        const scrollTarget = document.querySelector(`#${hash}`);
+
+        if (scrollTarget) {
+          scrollTarget.scrollIntoView();
+        }
+      }, 0);
+    })
+    .catch(error => {
+      state.currJsonShow = false;
+    });
+};
+
+const handleApiAnchor = ev => {
+  if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
+    ev.preventDefault();
+    const href = ev.target.getAttribute('href');
+    const hash = $split(href, '#', -1);
+    router.push(href);
+    setTimeout(() => {
+      const scrollTarget = document.querySelector('#' + hash);
+      if (scrollTarget) {
+        scrollTarget.scrollIntoView();
+      }
+    });
+  }
+};
+
+const fn = {
+  copyText: text => {
+    navigator.clipboard.writeText(text);
+  },
+  getApiTableOpt: oneApiArr => {
+    return getApiTableOptFn(oneApiArr);
+  },
+  getTypesTableOpt: typesArr => {
+    return getTypesTableOptFn(typesArr);
+  },
+};
+
+export default defineComponent({
+  name: 'CmpDetail',
+  components: { demo },
+  setup() {
+    const scope = effectScope();
+    scope.run(() => {
+      watch(
+        () => router.currentRoute.value.params.cmpId,
+        cmpId => {
+          if (!cmpId) {
+            state.currJson = {};
+          } else {
+            state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
+            loadPage();
+          }
+        }
+      );
+    });
+
+    onMounted(() => {
+      loadPage();
+      nextTick(() => {
+        state.apiDiv?.addEventListener('click', handleApiAnchor);
+      });
+    });
+    onUnmounted(() => {
+      scope.stop();
+      state.apiDiv?.removeEventListener('click', handleApiAnchor);
+    });
+    return {
+      ...toRefs(state),
+      ...fn,
+    };
+  },
+});
+</script>
+<style lang="less">
+.types-table a,
+.api-table a {
+  text-decoration: none;
+  color: #5e7ce0;
+  cursor: pointer;
+}
+
+.n-data-table-td {
+  vertical-align: middle !important;
+}
+
+.catalog {
+  height: calc(100vh - 150px);
+  overflow: hidden;
+}
+
+.catalog:hover {
+  overflow-y: auto;
+}
+
+.catalog::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5;
+}
+
+.catalog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #c1c1c1;
+}
+
+.n-anchor .n-anchor-link .n-anchor-link__title {
+  font-size: 12px;
+}
+
+.one-demo-col2 {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
+  align-items: flex-start;
+
+  > div {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 100%;
+  }
+}
+
+.cmp-container {
+  padding-right: 24px;
+}
+
+@media (max-width: 1279px) {
+  .catalog {
+    display: none;
+  }
+
+  .cmp-container {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .one-demo-col2 {
+    grid-template-columns: 100%;
+  }
+}
+</style>
diff --git a/packages/toolkits/docs/template/ng/src/views/components/componentsDetailTab.vue b/packages/toolkits/docs/template/ng/src/views/components/componentsDetailTab.vue
new file mode 100644
index 00000000..6cb8a8b6
--- /dev/null
+++ b/packages/toolkits/docs/template/ng/src/views/components/componentsDetailTab.vue
@@ -0,0 +1,403 @@
+<template>
+  <div>
+    <div class="fi-1 w0 rel cmp-container" id="cmp-container">
+      <n-tabs default-value="MarkDown" ref="tabInstRef" v-model:value="currTab" type="card" size="large" tab-style="{width:100%}">
+        <n-tab-pane name="MarkDown" :tab="tabTitle">
+          <!-- 一个组件的文档:  描述md + demos + apis -->
+          <n-space vertical>
+            <n-spin :show="cmpTopMdShow">
+              <div class="markdown-body" v-html="cmpTopMd"></div>
+            </n-spin>
+          </n-space>
+          <template v-if="currJson?.demos?.length > 0">
+            <n-space vertical>
+              <n-spin :show="currJsonShow">
+                <h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
+                <n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
+                  <template v-if="currJson.column === '2'">
+                    <div class="one-demo-col2">
+                      <div>
+                        <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
+                      </div>
+                      <div>
+                        <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
+                  </template>
+                </n-layout>
+              </n-spin>
+            </n-space>
+          </template>
+          <template v-if="currJson.apis?.length > 0">
+            <div ref="apiDiv">
+              <h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
+              <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
+              <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                <div class="f-r f-pos-start fw-bold">
+                  <div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
+                  <div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
+                </div>
+                <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+                  <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+                    <div class="f18 py28">{{ key }}</div>
+                    <n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
+                  </template>
+                </div>
+              </div>
+            </div>
+          </template>
+          <!-- types表格 -->
+          <template v-if="currJson.types">
+            <n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
+          </template>
+          <h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
+          <div class="markdown-body" v-html="cmpFAQMd"></div>
+          <div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
+        </n-tab-pane>
+        <n-tab-pane name="standard" display-directive="show:lazy" tab="规范示例">
+          <n-space vertical>
+            <div class="standard-md markdown-body mt24" v-if="standardMd" v-html="standardMd"></div>
+            <div class="standard-link" v-else>
+              点击查看规范说明：
+              <a :href="standard ? standard[langKey].link : ''" target="_blank">{{ standard ? standard[langKey].link : '' }}</a>
+            </div>
+          </n-space>
+        </n-tab-pane>
+      </n-tabs>
+    </div>
+    <!-- 目录列表 -->
+    <div class="catalog w128 sticky top32" v-if="cmpId !== 'types'">
+      <n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
+        <n-anchor-link v-for="demo in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
+        <n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
+        <n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
+        <!-- 接口特殊的导航 -->
+        <template v-if="cmpId === 'interfaces'">
+          <n-anchor-link v-for="api in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
+        </template>
+      </n-anchor>
+    </div>
+  </div>
+</template>
+<script lang="jsx">
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import demo from '@demo';
+import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
+import { router } from '@/router.js';
+import { faqMdConfig } from './cmpConfig';
+import { builtinModules } from 'module';
+
+const state = reactive({
+  langKey: $t2('zh-CN', 'en-US'),
+  cmpId: '',
+  currJson: { column: 1, demos: [], apis: [] },
+  currJsonShow: true,
+  cmpTopMd: null,
+  cmpTopMdShow: true,
+  cmpFAQMd: null,
+  evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
+  oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
+  apiDiv: null,
+  tabTitle: null,
+  currTab: 'MarkDown',
+  standard: {},
+  standardMd: null,
+});
+
+const getTypesTableOptFn = typesArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => <div v-html={row.name}></div>,
+      },
+      {
+        key: 'value',
+        title: $t('typeValue'),
+        width: '40%',
+        render: row => <div v-html={row.value}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '40%',
+        render: row => <div v-html={row.desc[state.langKey]}> </div>,
+      },
+    ],
+    data: typesArr,
+  };
+};
+
+const getApiTableOptFn = oneApiArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => {
+          return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
+        },
+      },
+      {
+        key: 'type',
+        title: $t('propType'),
+        width: '25%',
+        render: row => <div class="route-anchor" v-html={row.type}></div>,
+      },
+      {
+        key: 'defaultValue',
+        title: $t('defValue'),
+        width: '20%',
+        render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '35%',
+        render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
+      },
+    ],
+    data: oneApiArr,
+  };
+};
+
+const loadPage = () => {
+  const lang = $t2('cn', 'en');
+
+  state.cmpTopMdShow = state.currJsonShow = true;
+  state.cmpId = router.currentRoute.value.params.cmpId;
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
+    .then(data => {
+      state.cmpTopMd = marked(DOMPurify.sanitize(data));
+      state.cmpTopMdShow = false;
+      state.tabTitle = getTitleFromMd(data) || state.cmpId;
+    })
+    .catch(error => {
+      state.cmpTopMdShow = false;
+    });
+
+  if (faqMdConfig[state.cmpId]) {
+    fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
+      .then(data => {
+        state.cmpFAQMd = marked(DOMPurify.sanitize(data));
+      })
+      .catch(error => {
+        return;
+      });
+  } else {
+    state.cmpFAQMd = null;
+  }
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
+    .then(data => {
+      const json = eval('(' + data.slice(15) + ')');
+
+      state.currJson = {
+        ...json,
+        demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
+        column: json.column || '1', // columns可能为空
+        title: json.title || state.cmpId,
+      };
+      if (json.standard) {
+        state.standard = $clone(json['standard'] || []);
+        if (state.standard[state.langKey].file) {
+          fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.standard[state.langKey].file}`)
+            .then(data => {
+              state.standardMd = marked(DOMPurify.sanitize(data));
+            })
+            .catch(error => {
+              return;
+            });
+        } else {
+          state.standardMd = null;
+        }
+      } else {
+        state.standard = null;
+        state.standardMd = null;
+      }
+      state.currJsonShow = false;
+
+      // 兼容#hashName和/#hashName两种模式
+      setTimeout(() => {
+        let hash = router.currentRoute.value.hash?.slice(1);
+
+        if (!hash) return;
+
+        if (hash.indexOf('/') > -1) {
+          hash = hash.slice(1);
+        }
+
+        const scrollTarget = document.querySelector(`#${hash}`);
+
+        if (scrollTarget) {
+          scrollTarget.scrollIntoView();
+        }
+      }, 0);
+    })
+    .catch(error => {
+      state.currJsonShow = false;
+    });
+};
+const getTitleFromMd = markdown => {
+  const titleRegex = /^#\s+(.*)/m;
+  const match = titleRegex.exec(markdown);
+  if (match && match[1]) {
+    return match[1];
+  } else {
+    return null;
+  }
+};
+const handleApiAnchor = ev => {
+  if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
+    ev.preventDefault();
+    const href = ev.target.getAttribute('href');
+    const hash = $split(href, '#', -1);
+    router.push(href);
+    setTimeout(() => {
+      const scrollTarget = document.querySelector('#' + hash);
+      if (scrollTarget) {
+        scrollTarget.scrollIntoView();
+      }
+    });
+  }
+};
+
+const fn = {
+  copyText: text => {
+    navigator.clipboard.writeText(text);
+  },
+  getApiTableOpt: oneApiArr => {
+    return getApiTableOptFn(oneApiArr);
+  },
+  getTypesTableOpt: typesArr => {
+    return getTypesTableOptFn(typesArr);
+  },
+};
+
+export default defineComponent({
+  name: 'CmpDetailTab',
+  components: { demo },
+  setup() {
+    const scope = effectScope();
+    scope.run(() => {
+      watch(
+        () => router.currentRoute.value.params.cmpId,
+        cmpId => {
+          state.currTab = 'MarkDown';
+          if (!cmpId) {
+            state.currJson = {};
+          } else {
+            state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
+            loadPage();
+          }
+        }
+      );
+      watch(
+        () => router.currentRoute.value.hash,
+        hash => {
+          if (hash) {
+            state.currTab = 'MarkDown';
+          }
+        }
+      );
+    });
+
+    onMounted(() => {
+      loadPage();
+      nextTick(() => {
+        state.apiDiv?.addEventListener('click', handleApiAnchor);
+      });
+    });
+    onUnmounted(() => {
+      scope.stop();
+      state.apiDiv?.removeEventListener('click', handleApiAnchor);
+    });
+    return {
+      ...toRefs(state),
+      ...fn,
+    };
+  },
+});
+</script>
+<style lang="less">
+.doc-container {
+  min-height: 600px;
+}
+.types-table a,
+.api-table a {
+  text-decoration: none;
+  color: #5e7ce0;
+  cursor: pointer;
+}
+
+.n-data-table-td {
+  vertical-align: middle !important;
+}
+
+.catalog {
+  height: calc(100vh - 150px);
+  overflow: hidden;
+}
+
+.catalog:hover {
+  overflow-y: auto;
+}
+
+.catalog::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5;
+}
+
+.catalog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #c1c1c1;
+}
+
+.n-anchor .n-anchor-link .n-anchor-link__title {
+  font-size: 12px;
+}
+
+.one-demo-col2 {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
+  align-items: flex-start;
+
+  > div {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 100%;
+  }
+}
+.n-tabs .ntabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
+  color: #5073e5;
+}
+.cmp-container {
+  padding-right: 24px;
+}
+
+@media (max-width: 1279px) {
+  .catalog {
+    display: none;
+  }
+
+  .cmp-container {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .one-demo-col2 {
+    grid-template-columns: 100%;
+  }
+}
+</style>
diff --git a/packages/toolkits/docs/template/ng/src/views/components/demo.vue b/packages/toolkits/docs/template/ng/src/views/components/demo.vue
index b4f29047..3a5b4699 100644
--- a/packages/toolkits/docs/template/ng/src/views/components/demo.vue
+++ b/packages/toolkits/docs/template/ng/src/views/components/demo.vue
@@ -19,13 +19,14 @@
           </n-tooltip>
         </div>
       </div>
-      <component :is="getDescMd(demo)" class="mb16 f14" />
+      <div v-if="descMd" v-html="descMd" class="markdown-body"></div>
+      <component v-else :is="getDescMd(demo)" class="mb16 f14" />
       <div v-if="demoConfig.isMobile" class="phone-container">
         <div class="mobile-view-container">
-          <div v-html="`<${demo.tag} />`"></div>
+          <component :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
         </div>
       </div>
-      <div v-else v-html="`<${demo.tag} />`"></div>
+      <component v-else :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
     </div>
     <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
     <div v-if="demo.isOpen" class="px24 py20 b-t-lightless">
@@ -42,10 +43,10 @@
   </div>
 </template>
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs } from 'vue';
+import { defineComponent, reactive, computed, toRefs, onMounted } from 'vue';
 import { $t, $t2 } from '@/i18n';
 import { $split, appData, fetchDemosFile } from '@/tools';
-import { languageMap, themeOverrides } from './cmpConfig';
+import { languageMap, themeOverrides, vueComponents } from './cmpConfig';
 import { router } from '@/router.js';
 import demoConfig from '@demos/config.js';
 
@@ -82,6 +83,7 @@ export default defineComponent({
       copyTip: $t('copyCode'),
       copyIcon: 'i-ti-copy',
       themeOverrides: themeOverrides,
+      descMd: null,
     });
     const fn = {
       getDescMd(demo) {
@@ -99,15 +101,11 @@ export default defineComponent({
         }
       },
       async copyCode(demo) {
-        if (demo.isOpen) {
-          const idx = parseInt(state.tabValue.slice(3));
-
-          navigator.clipboard.writeText(demo.files[idx].code);
-        } else {
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        if (!demo.files) {
           const code = await this.getDemoCode(demo);
-
-          navigator.clipboard.writeText(code);
         }
+        navigator.clipboard.writeText(demo.files[idx].code);
         state.copyTip = $t('copyCodeOk');
         state.copyIcon = 'i-ti-check';
       },
@@ -129,21 +127,20 @@ export default defineComponent({
             .catch(error => {});
         }
       },
-      getDemoCode(demo) {
+      async getDemoCode(demo) {
+        await getDemoCodeFn(demo);
         // 获取code代码文本
-        getDemoCodeFn(demo);
-
-        const path = `@demos/app/${state.cmpId}/${demo.files[0].fileName}`;
-
-        return fetchDemosFile(path)
-          .then(code => {
-            demo.files[0].code = code;
-            return code;
-          })
-          .catch(error => {});
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        const path = `@demos/app/${state.cmpId}/${demo.files[idx].fileName}`;
+        const code = await fetchDemosFile(path);
+        state.demo.files[idx].code = code;
+        return code;
       },
     };
-    return { ...toRefs(state), ...fn, appData, demoConfig };
+    onMounted(() => {
+      getDemoCodeFn(props.demo);
+    });
+    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig };
   },
 });
 </script>
diff --git a/packages/toolkits/docs/template/ng/src/views/components/demoPage.vue b/packages/toolkits/docs/template/ng/src/views/components/demoPage.vue
new file mode 100644
index 00000000..e9d8ec30
--- /dev/null
+++ b/packages/toolkits/docs/template/ng/src/views/components/demoPage.vue
@@ -0,0 +1,207 @@
+<template>
+  <router-view>
+    <div class="container">
+      <div v-if="demo" :id="demo.demoId" class="b-a br-sm">
+        <!-- DEMO 的标题 + 说明desc+  示例wcTag -->
+        <div class="icon-content">
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <i :class="copyIcon" class="h:c-success w16 h16 cur-hand" @click="copyCode(demo)" @mouseout="resetTip()" />
+            </template>
+            {{ copyTip }}
+          </n-tooltip>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <i :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'" class="ml8 h:c-success w16 h16 cur-hand" @click="toggleDemoCode(demo)" />
+            </template>
+            {{ demo.isOpen ? $t('hideCode') : $t('showCode') }}
+          </n-tooltip>
+        </div>
+        <div v-if="demoConfig.isMobile" class="phone-container">
+          <div class="mobile-view-container">
+            <component :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
+          </div>
+        </div>
+        <component v-else :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
+        <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
+        <div v-if="demo.isOpen" class="px24 py20 b-t-lightless">
+          <n-config-provider :theme-overrides="themeOverrides">
+            <n-tabs v-model:value="tabValue" type="line" size="large" justify-content="space-evenly" @update:value="handleUpdateValue(demo)">
+              <n-tab-pane v-for="(file, idx) in demo.files" :key="file.fileName" :name="'tab' + idx" :tab="file.fileName">
+                <n-layout :native-scrollbar="true" :content-style="`overflow-x:auto; padding: 20px 5px; background-color:#f5f6f8;`">
+                  <n-code :code="file.code" :language="file.language" />
+                </n-layout>
+              </n-tab-pane>
+            </n-tabs>
+          </n-config-provider>
+        </div>
+      </div>
+    </div>
+  </router-view>
+</template>
+<script lang="jsx">
+import { defineComponent, reactive, computed, toRefs, onMounted } from 'vue';
+import { $t, $t2 } from '@/i18n';
+import { $split, appData, fetchDemosFile } from '@/tools';
+import { languageMap, themeOverrides, vueComponents } from './cmpConfig';
+import { router } from '@/router.js';
+import demoConfig from '@demos/config.js';
+
+const getDemoCodeFn = demo => {
+  // 获取code代码文本
+  if (!demo.files) {
+    const cmpId = router.currentRoute.value.params.cmpId;
+    demo.files = demo.codeFiles.map(fileName => {
+      const ext = $split(fileName, '.', -1);
+      const language = languageMap[ext] || '';
+      return { fileName, language, files: [] };
+    });
+  }
+};
+
+export default defineComponent({
+  name: 'DemoPage',
+  props: ['demo'],
+  setup(props) {
+    const state = reactive({
+      tabValue: 'tab0',
+      cmpId: router.currentRoute.value.params.cmpId,
+      langKey: $t2('zh-CN', 'en-US'),
+      currDemoId: computed(() => {
+        let hash = router.currentRoute.value.hash?.slice(1);
+
+        // 兼容/#hashName这种模式
+        if (hash.indexOf('/') > -1) {
+          hash = hash.slice(1);
+        }
+        return hash;
+      }),
+      copyTip: $t('copyCode'),
+      copyIcon: 'i-ti-copy',
+      themeOverrides: themeOverrides,
+      descMd: null,
+    });
+    const fn = {
+      getDescMd(demo) {
+        // desc字段可能是md,也可能是html。 返回md组件或者html组件
+        const desc = demo.desc[state.langKey].trim();
+        return <div class="demo-desc" v-html={desc}></div>;
+      },
+      toggleDemoCode(demo) {
+        // 第一次打开时，要请求一下相应的codeFiles .存储到files属性下
+        if (!demo.files) {
+          this.getDemoCode(demo);
+          demo.isOpen = true;
+        } else {
+          demo.isOpen = !demo.isOpen;
+        }
+      },
+      async copyCode(demo) {
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        if (!demo.files) {
+          const code = await this.getDemoCode(demo);
+        }
+        navigator.clipboard.writeText(demo.files[idx].code);
+        state.copyTip = $t('copyCodeOk');
+        state.copyIcon = 'i-ti-check';
+      },
+      resetTip() {
+        setTimeout(() => {
+          state.copyTip = $t('copyCode');
+          state.copyIcon = 'i-ti-copy';
+        }, 300);
+      },
+      handleUpdateValue(demo) {
+        const idx = parseInt(state.tabValue.slice(3));
+
+        if (!demo.files[idx].code) {
+          const path = `@demos/app/${state.cmpId}/${demo.files[idx].fileName}`;
+          fetchDemosFile(path)
+            .then(code => {
+              demo.files[idx].code = code;
+            })
+            .catch(error => {});
+        }
+      },
+      async getDemoCode(demo) {
+        await getDemoCodeFn(demo);
+        // 获取code代码文本
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        const path = `@demos/app/${state.cmpId}/${demo.files[idx].fileName}`;
+        const code = await fetchDemosFile(path);
+        state.demo.files[idx].code = code;
+        return code;
+      },
+    };
+    onMounted(() => {
+      getDemoCodeFn(props.demo);
+    });
+    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig };
+  },
+});
+</script>
+<style lang="less">
+.demo-desc {
+  line-height: 1.5;
+  code {
+    background: #f1f2f3;
+    padding: 2px 4px;
+    border-radius: 2px;
+    margin: 2px 4px;
+    display: inline-block;
+  }
+
+  a {
+    text-decoration: none;
+    color: #5e7ce0;
+    cursor: pointer;
+  }
+}
+
+.theme-dark {
+  .demo-desc {
+    code {
+      background: #333333;
+    }
+  }
+}
+
+.b-a-success {
+  animation: border-trans 3s;
+}
+@keyframes border-trans {
+  0% {
+    border: 1px solid #5073e5;
+    background: none;
+  }
+  50% {
+    background: rgba(255, 95, 85, 0.1);
+    border: 1px solid rgba(255, 95, 88, 0.6);
+  }
+  100% {
+    border: 1px solid #5073e5;
+    background: none;
+  }
+}
+.phone-container {
+  margin: auto;
+  width: 395px;
+  height: 773px;
+  padding: 20px;
+  border: 0;
+  position: relative;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYsAAAMFCAYAAACFxdoKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg3MTZDNTAwMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg3MTZDNTAxMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODcxNkM0RkUxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxNkM0RkYxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YMDcrAAAcl0lEQVR42uzd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)
+    no-repeat center top;
+  background-size: contain;
+
+  .mobile-view-container {
+    width: 360px;
+    height: 613px;
+    position: absolute;
+    left: 11px;
+    top: 79px;
+    transform: translateX(0);
+    overflow: hidden;
+  }
+}
+</style>
diff --git a/packages/toolkits/docs/template/vue/src/router.js b/packages/toolkits/docs/template/vue/src/router.js
index 1830ef2c..5eef2f0a 100644
--- a/packages/toolkits/docs/template/vue/src/router.js
+++ b/packages/toolkits/docs/template/vue/src/router.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/views/layout/layout.vue';
 
 const Components = () => import('@/views/components/components.vue');
+const DemoPage = () => import('@/views/components/demoPage.vue');
 const Docs = () => import('@/views/docs/docs.vue');
 const Overview = () => import('@/views/overview.vue');
 
@@ -27,6 +28,12 @@ let routes = [
     name: 'components',
     children: [{ path: '', component: Components }],
   },
+  //单组件示例
+  {
+    path: import.meta.env.VITE_CONTEXT + 'demoPage/:cmpId/:demoId',
+    component: DemoPage,
+    name: 'demoPage',
+  },
   // 未匹配到目标地址时，进行路由重定向
   {
     path: '/:pathMatch(.*)*',
diff --git a/packages/toolkits/docs/template/vue/src/views/components/components.vue b/packages/toolkits/docs/template/vue/src/views/components/components.vue
index 961aeb80..5428536f 100644
--- a/packages/toolkits/docs/template/vue/src/views/components/components.vue
+++ b/packages/toolkits/docs/template/vue/src/views/components/components.vue
@@ -1,348 +1,61 @@
 <template>
   <div>
-    <div class="f-r pt48 pl48 pr48">
-      <div class="fi-1 w0 rel cmp-container">
-        <!-- 一个组件的文档:  描述md + demos + apis -->
-        <n-space vertical>
-          <n-spin :show="cmpTopMdShow">
-            <div class="markdown-body" v-html="cmpTopMd"></div>
-          </n-spin>
-        </n-space>
-
-        <template v-if="currJson?.demos?.length > 0">
-          <n-space vertical>
-            <n-spin :show="currJsonShow">
-              <h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
-              <n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
-                <template v-if="currJson.column === '2'">
-                  <div class="one-demo-col2">
-                    <div>
-                      <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
-                    </div>
-                    <div>
-                      <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
-                </template>
-              </n-layout>
-            </n-spin>
-          </n-space>
-        </template>
-        <template v-if="currJson.apis?.length > 0">
-          <div ref="apiDiv">
-            <h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
-            <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-            <div class="mt20" v-for="(oneGroup, idx) in currJson.apis" :key="oneGroup.name">
-              <div class="f-r f-pos-start fw-bold">
-                <div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
-                <div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
-              </div>
-              <div v-for="(oneApiArr, key) in oneGroup" :key="key">
-                <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
-                  <div class="f18 py28">{{ key }}</div>
-                  <n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
-                </template>
-              </div>
-            </div>
-          </div>
-        </template>
-        <!-- types表格 -->
-        <template v-if="currJson.types">
-          <n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
-        </template>
-        <h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
-        <div class="markdown-body" v-html="cmpFAQMd"></div>
-        <div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
-      </div>
-      <!-- 目录列表 -->
-      <div class="catalog w128 sticky top32" v-if="cmpId !== 'types'">
-        <n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
-          <n-anchor-link v-for="(demo, index) in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
-          <n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
-          <n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
-          <!-- 接口特殊的导航 -->
-          <template v-if="cmpId === 'interfaces'">
-            <n-anchor-link v-for="(api, index) in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
-          </template>
-        </n-anchor>
-      </div>
+    <div class="f-r pt48 pl48 pr48 doc-container">
+      <template v-if="useTab">
+        <!-- 描述 包含基本描述 示例和规范页 -->
+        <components-detail-tab></components-detail-tab>
+      </template>
+      <template v-else>
+        <!-- 描述  包含基本描述及示例 -->
+        <components-detail></components-detail>
+      </template>
     </div>
     <div id="footer"></div>
   </div>
 </template>
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-import demo from '@demo';
-import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
+import { defineComponent, reactive, toRefs, onMounted } from 'vue';
+import componentsDetail from './componentsDetail.vue';
+import componentsDetailTab from './componentsDetailTab.vue';
+import { fetchDemoFile } from '@/tools';
 import { router } from '@/router.js';
-import { faqMdConfig } from './cmpConfig';
+import { watch } from 'fs';
 
 const state = reactive({
-  langKey: $t2('zh-CN', 'en-US'),
-  cmpId: '',
-  currJson: { column: 1, demos: [], apis: [] },
-  currJsonShow: true,
-  cmpTopMd: null,
-  cmpTopMdShow: true,
-  cmpFAQMd: null,
-  evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
-  oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
-  apiDiv: null,
+  useTab: import.meta.env.VITE_USE_TAB || false, // 是否开启规范tab页，此变量需在.env生命，如不使用则删除对应.env变量
 });
 
-const getTypesTableOptFn = typesArr => {
-  return {
-    columns: [
-      {
-        key: 'name',
-        title: $t('name'),
-        width: '20%',
-        render: row => <div v-html={row.name}></div>,
-      },
-      {
-        key: 'value',
-        title: $t('typeValue'),
-        width: '40%',
-        render: row => <div v-html={row.value}></div>,
-      },
-      {
-        key: 'desc',
-        title: $t('desc'),
-        width: '40%',
-        render: row => <div v-html={row.desc[state.langKey]}> </div>,
-      },
-    ],
-    data: typesArr,
-  };
-};
-
-const getApiTableOptFn = oneApiArr => {
-  return {
-    columns: [
-      {
-        key: 'name',
-        title: $t('name'),
-        width: '20%',
-        render: row => {
-          return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
-        },
-      },
-      {
-        key: 'type',
-        title: $t('propType'),
-        width: '25%',
-        render: row => <div class="route-anchor" v-html={row.type}></div>,
-      },
-      {
-        key: 'defaultValue',
-        title: $t('defValue'),
-        width: '20%',
-        render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
-      },
-      {
-        key: 'desc',
-        title: $t('desc'),
-        width: '35%',
-        render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
-      },
-    ],
-    data: oneApiArr,
-  };
-};
-
-const loadPage = () => {
-  const lang = $t2('cn', 'en');
-
-  state.cmpTopMdShow = state.currJsonShow = true;
-  state.cmpId = router.currentRoute.value.params.cmpId;
-
-  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
-    .then(data => {
-      state.cmpTopMd = marked(DOMPurify.sanitize(data));
-      state.cmpTopMdShow = false;
-    })
-    .catch(error => {
-      state.cmpTopMdShow = false;
-    });
-
-  if (faqMdConfig[state.cmpId]) {
-    fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
-      .then(data => {
-        state.cmpFAQMd = marked(DOMPurify.sanitize(data));
-      })
-      .catch(error => {});
-  } else {
-    state.cmpFAQMd = null;
-  }
-
-  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
-    .then(data => {
-      const json = eval('(' + data.slice(15) + ')');
-
-      state.currJson = {
-        ...json,
-        demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
-        column: json.column || '1', // columns可能为空
-      };
-      state.currJsonShow = false;
-
-      // 兼容#hashName和/#hashName两种模式
-      setTimeout(() => {
-        let hash = router.currentRoute.value.hash?.slice(1);
-
-        if (!hash) return;
-
-        if (hash.indexOf('/') > -1) {
-          hash = hash.slice(1);
-        }
-
-        const scrollTarget = document.querySelector(`#${hash}`);
-
-        if (scrollTarget) {
-          scrollTarget.scrollIntoView();
-        }
-      }, 0);
-    })
-    .catch(error => {
-      state.currJsonShow = false;
-    });
-};
-
-const handleApiAnchor = ev => {
-  if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
-    ev.preventDefault();
-    const href = ev.target.getAttribute('href');
-    const hash = $split(href, '#', -1);
-    router.push(href);
-    setTimeout(() => {
-      const scrollTarget = document.querySelector('#' + hash);
-      if (scrollTarget) {
-        scrollTarget.scrollIntoView();
-      }
-    }, 16);
-  }
-};
-
-const fn = {
-  copyText: text => {
-    navigator.clipboard.writeText(text);
-  },
-  getApiTableOpt: oneApiArr => {
-    return getApiTableOptFn(oneApiArr);
-  },
-  getTypesTableOpt: typesArr => {
-    return getTypesTableOptFn(typesArr);
-  },
+const loadCmp = cmpI => {
+  fetchDemoFile(`@demos/app/${cmpId}/webdoc/${cmpId}.js`).then(data => {
+    const json = eval(`(${data.slice(15)})`);
+    if (json['standard']) {
+      state.useTab = true;
+    } else {
+      state.useTab = false;
+    }
+  });
 };
 
 export default defineComponent({
   name: 'CmpPage_vue',
-  components: { demo },
+  components: { componentsDetail, componentsDetailTab },
   setup() {
-    const scope = effectScope();
-    scope.run(() => {
-      watch(
-        () => router.currentRoute.value.params.cmpId,
-        cmpId => {
-          if (!cmpId) {
-            state.currJson = {};
-          } else {
-            state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
-            loadPage();
-          }
-        }
-      );
-    });
-
+    loadCmp(router.currentRoute.value.params.cmpId);
+    watch(
+      () => router.currentRoute.value.params.cmpId,
+      cmpId => {
+        if (cmpId) loadCmp(cmpId);
+      }
+    );
     onMounted(() => {
-      loadPage();
       const common = new window.TDCommon(['#footer'], {});
       common.renderFooter();
-      nextTick(() => {
-        state.apiDiv?.addEventListener('click', handleApiAnchor);
-      });
-    });
-    onUnmounted(() => {
-      scope.stop();
-      state.apiDiv?.removeEventListener('click', handleApiAnchor);
     });
+
     return {
       ...toRefs(state),
-      ...fn,
     };
   },
 });
 </script>
-<style lang="less">
-.types-table a,
-.api-table a {
-  text-decoration: none;
-  color: #5e7ce0;
-  cursor: pointer;
-}
-
-.n-data-table-td {
-  vertical-align: middle !important;
-}
-
-.catalog {
-  height: calc(100vh - 150px);
-  overflow: hidden;
-}
-
-.catalog:hover {
-  overflow-y: auto;
-}
-
-.catalog::-webkit-scrollbar {
-  width: 10px;
-  background-color: #f5f5f5;
-}
-
-.catalog::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background-color: #c1c1c1;
-}
-
-.n-anchor .n-anchor-link .n-anchor-link__title {
-  font-size: 12px;
-}
-
-.one-demo-col2 {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
-  align-items: flex-start;
-
-  > div {
-    display: grid;
-    gap: 16px;
-    grid-template-columns: 100%;
-  }
-}
-
-.cmp-container {
-  padding-right: 24px;
-}
-
-@media (max-width: 1279px) {
-  .catalog {
-    display: none;
-  }
-
-  .cmp-container {
-    padding-right: 0;
-  }
-}
-
-@media (max-width: 767px) {
-  .one-demo-col2 {
-    grid-template-columns: 100%;
-  }
-}
-</style>
+<style lang="less"></style>
diff --git a/packages/toolkits/docs/template/vue/src/views/components/componentsDetail.vue b/packages/toolkits/docs/template/vue/src/views/components/componentsDetail.vue
new file mode 100644
index 00000000..757abf2d
--- /dev/null
+++ b/packages/toolkits/docs/template/vue/src/views/components/componentsDetail.vue
@@ -0,0 +1,344 @@
+<template>
+  <div>
+    <!-- 一个组件的文档:  描述md + demos + apis -->
+    <div class="fi-1 w0 rel cmp-container">
+      <n-space vertical>
+        <n-spin :show="cmpTopMdShow">
+          <div class="markdown-body" v-html="cmpTopMd"></div>
+        </n-spin>
+      </n-space>
+
+      <template v-if="currJson?.demos?.length > 0">
+        <n-space vertical>
+          <n-spin :show="currJsonShow">
+            <h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
+            <n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
+              <template v-if="currJson.column === '2'">
+                <div class="one-demo-col2">
+                  <div>
+                    <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
+                  </div>
+                  <div>
+                    <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
+              </template>
+            </n-layout>
+          </n-spin>
+        </n-space>
+      </template>
+      <template v-if="currJson.apis?.length > 0">
+        <div ref="apiDiv">
+          <h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
+          <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
+          <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+            <div class="f-r f-pos-start fw-bold">
+              <div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
+              <div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
+            </div>
+            <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+              <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+                <div class="f18 py28">{{ key }}</div>
+                <n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+      <!-- types表格 -->
+      <template v-if="currJson.types">
+        <n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
+      </template>
+      <h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
+      <div class="markdown-body" v-html="cmpFAQMd"></div>
+      <div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
+    </div>
+    <!-- 目录列表 -->
+    <div class="catalog w128 sticky top32" v-if="cmpId !== 'types'">
+      <n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
+        <n-anchor-link v-for="(demo, index) in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
+        <n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
+        <n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
+        <!-- 接口特殊的导航 -->
+        <template v-if="cmpId === 'interfaces'">
+          <n-anchor-link v-for="api in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
+        </template>
+      </n-anchor>
+    </div>
+  </div>
+</template>
+<script lang="jsx">
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import demo from '@demo';
+import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
+import { router } from '@/router.js';
+import { faqMdConfig } from './cmpConfig';
+
+const state = reactive({
+  langKey: $t2('zh-CN', 'en-US'),
+  cmpId: '',
+  currJson: { column: 1, demos: [], apis: [] },
+  currJsonShow: true,
+  cmpTopMd: null,
+  cmpTopMdShow: true,
+  cmpFAQMd: null,
+  evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
+  oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
+  apiDiv: null,
+});
+
+const getTypesTableOptFn = typesArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => <div v-html={row.name}></div>,
+      },
+      {
+        key: 'value',
+        title: $t('typeValue'),
+        width: '40%',
+        render: row => <div v-html={row.value}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '40%',
+        render: row => <div v-html={row.desc[state.langKey]}> </div>,
+      },
+    ],
+    data: typesArr,
+  };
+};
+
+const getApiTableOptFn = oneApiArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => {
+          return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
+        },
+      },
+      {
+        key: 'type',
+        title: $t('propType'),
+        width: '25%',
+        render: row => <div class="route-anchor" v-html={row.type}></div>,
+      },
+      {
+        key: 'defaultValue',
+        title: $t('defValue'),
+        width: '20%',
+        render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '35%',
+        render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
+      },
+    ],
+    data: oneApiArr,
+  };
+};
+
+const loadPage = () => {
+  const lang = $t2('cn', 'en');
+
+  state.cmpTopMdShow = state.currJsonShow = true;
+  state.cmpId = router.currentRoute.value.params.cmpId;
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
+    .then(data => {
+      state.cmpTopMd = marked(DOMPurify.sanitize(data));
+      state.cmpTopMdShow = false;
+    })
+    .catch(error => {
+      state.cmpTopMdShow = false;
+    });
+
+  if (faqMdConfig[state.cmpId]) {
+    fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
+      .then(data => {
+        state.cmpFAQMd = marked(DOMPurify.sanitize(data));
+      })
+      .catch(error => {});
+  } else {
+    state.cmpFAQMd = null;
+  }
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
+    .then(data => {
+      const json = eval('(' + data.slice(15) + ')');
+
+      state.currJson = {
+        ...json,
+        demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
+        column: json.column || '1', // columns可能为空
+        title: json.title || state.cmpId,
+      };
+      state.currJsonShow = false;
+
+      // 兼容#hashName和/#hashName两种模式
+      setTimeout(() => {
+        let hash = router.currentRoute.value.hash?.slice(1);
+
+        if (!hash) return;
+
+        if (hash.indexOf('/') > -1) {
+          hash = hash.slice(1);
+        }
+
+        const scrollTarget = document.querySelector(`#${hash}`);
+
+        if (scrollTarget) {
+          scrollTarget.scrollIntoView();
+        }
+      }, 0);
+    })
+    .catch(error => {
+      state.currJsonShow = false;
+    });
+};
+
+const handleApiAnchor = ev => {
+  if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
+    ev.preventDefault();
+    const href = ev.target.getAttribute('href');
+    const hash = $split(href, '#', -1);
+    router.push(href);
+    setTimeout(() => {
+      const scrollTarget = document.querySelector('#' + hash);
+      if (scrollTarget) {
+        scrollTarget.scrollIntoView();
+      }
+    });
+  }
+};
+
+const fn = {
+  copyText: text => {
+    navigator.clipboard.writeText(text);
+  },
+  getApiTableOpt: oneApiArr => {
+    return getApiTableOptFn(oneApiArr);
+  },
+  getTypesTableOpt: typesArr => {
+    return getTypesTableOptFn(typesArr);
+  },
+};
+
+export default defineComponent({
+  name: 'CmpDetail',
+  components: { demo },
+  setup() {
+    const scope = effectScope();
+    scope.run(() => {
+      watch(
+        () => router.currentRoute.value.params.cmpId,
+        cmpId => {
+          if (!cmpId) {
+            state.currJson = {};
+          } else {
+            state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
+            loadPage();
+          }
+        }
+      );
+    });
+
+    onMounted(() => {
+      loadPage();
+      nextTick(() => {
+        state.apiDiv?.addEventListener('click', handleApiAnchor);
+      });
+    });
+    onUnmounted(() => {
+      scope.stop();
+      state.apiDiv?.removeEventListener('click', handleApiAnchor);
+    });
+    return {
+      ...toRefs(state),
+      ...fn,
+    };
+  },
+});
+</script>
+<style lang="less">
+.types-table a,
+.api-table a {
+  text-decoration: none;
+  color: #5e7ce0;
+  cursor: pointer;
+}
+
+.n-data-table-td {
+  vertical-align: middle !important;
+}
+
+.catalog {
+  height: calc(100vh - 150px);
+  overflow: hidden;
+}
+
+.catalog:hover {
+  overflow-y: auto;
+}
+
+.catalog::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5;
+}
+
+.catalog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #c1c1c1;
+}
+
+.n-anchor .n-anchor-link .n-anchor-link__title {
+  font-size: 12px;
+}
+
+.one-demo-col2 {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
+  align-items: flex-start;
+
+  > div {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 100%;
+  }
+}
+
+.cmp-container {
+  padding-right: 24px;
+}
+
+@media (max-width: 1279px) {
+  .catalog {
+    display: none;
+  }
+
+  .cmp-container {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .one-demo-col2 {
+    grid-template-columns: 100%;
+  }
+}
+</style>
diff --git a/packages/toolkits/docs/template/vue/src/views/components/componentsDetailTab.vue b/packages/toolkits/docs/template/vue/src/views/components/componentsDetailTab.vue
new file mode 100644
index 00000000..6cb8a8b6
--- /dev/null
+++ b/packages/toolkits/docs/template/vue/src/views/components/componentsDetailTab.vue
@@ -0,0 +1,403 @@
+<template>
+  <div>
+    <div class="fi-1 w0 rel cmp-container" id="cmp-container">
+      <n-tabs default-value="MarkDown" ref="tabInstRef" v-model:value="currTab" type="card" size="large" tab-style="{width:100%}">
+        <n-tab-pane name="MarkDown" :tab="tabTitle">
+          <!-- 一个组件的文档:  描述md + demos + apis -->
+          <n-space vertical>
+            <n-spin :show="cmpTopMdShow">
+              <div class="markdown-body" v-html="cmpTopMd"></div>
+            </n-spin>
+          </n-space>
+          <template v-if="currJson?.demos?.length > 0">
+            <n-space vertical>
+              <n-spin :show="currJsonShow">
+                <h2 class="f30 fw-normal !mb20">{{ $t('yan-shi') }}</h2>
+                <n-layout class="f-c f-wrap ofx-auto" :native-scrollbar="true">
+                  <template v-if="currJson.column === '2'">
+                    <div class="one-demo-col2">
+                      <div>
+                        <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
+                      </div>
+                      <div>
+                        <demo v-for="demo in oddDemo" :key="demo.name" :demo="demo" />
+                      </div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <demo v-for="demo in currJson.demos" :key="demo.name" :demo="demo" class="mb16" />
+                  </template>
+                </n-layout>
+              </n-spin>
+            </n-space>
+          </template>
+          <template v-if="currJson.apis?.length > 0">
+            <div ref="apiDiv">
+              <h2 id="API" v-if="cmpId !== 'interfaces'" class="f30 fw-normal mt28">API</h2>
+              <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
+              <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                <div class="f-r f-pos-start fw-bold">
+                  <div :id="oneGroup.name" class="f18">{{ oneGroup.name }}</div>
+                  <div class="ml12 b-a-primary c-primary px8 py4">{{ oneGroup.type }}</div>
+                </div>
+                <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+                  <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+                    <div class="f18 py28">{{ key }}</div>
+                    <n-data-table class="api-table" v-bind="getApiTableOpt(oneApiArr)" />
+                  </template>
+                </div>
+              </div>
+            </div>
+          </template>
+          <!-- types表格 -->
+          <template v-if="currJson.types">
+            <n-data-table class="types-table mt20" v-bind="getTypesTableOpt(currJson.types)" />
+          </template>
+          <h2 id="FAQ" v-if="cmpFAQMd" class="f30 fw-normal mt28 mb20">FAQ</h2>
+          <div class="markdown-body" v-html="cmpFAQMd"></div>
+          <div v-if="currJson.owner" class="abs right24 top24" @click="copyText(currJson.owner)">{{ $t('doc-owner') }} : {{ currJson.owner }}</div>
+        </n-tab-pane>
+        <n-tab-pane name="standard" display-directive="show:lazy" tab="规范示例">
+          <n-space vertical>
+            <div class="standard-md markdown-body mt24" v-if="standardMd" v-html="standardMd"></div>
+            <div class="standard-link" v-else>
+              点击查看规范说明：
+              <a :href="standard ? standard[langKey].link : ''" target="_blank">{{ standard ? standard[langKey].link : '' }}</a>
+            </div>
+          </n-space>
+        </n-tab-pane>
+      </n-tabs>
+    </div>
+    <!-- 目录列表 -->
+    <div class="catalog w128 sticky top32" v-if="cmpId !== 'types'">
+      <n-anchor :show-rail="true" offset-target="#doc-layout" :ignore-gap="true" :show-background="true">
+        <n-anchor-link v-for="demo in currJson.demos || []" :key="demo.demoId" :title="demo.name[langKey]" :href="'#' + demo.demoId" />
+        <n-anchor-link v-if="cmpId !== 'interfaces'" title="API" href="#API" />
+        <n-anchor-link v-if="cmpFAQMd" title="FAQ" href="#FAQ" />
+        <!-- 接口特殊的导航 -->
+        <template v-if="cmpId === 'interfaces'">
+          <n-anchor-link v-for="api in currJson.apis || []" :key="api.name" :title="api.name" :href="'#' + api.name" />
+        </template>
+      </n-anchor>
+    </div>
+  </div>
+</template>
+<script lang="jsx">
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted, effectScope, nextTick, h } from 'vue';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import demo from '@demo';
+import { $t, $t2, $clone, $split, fetchDemosFile } from '@/tools';
+import { router } from '@/router.js';
+import { faqMdConfig } from './cmpConfig';
+import { builtinModules } from 'module';
+
+const state = reactive({
+  langKey: $t2('zh-CN', 'en-US'),
+  cmpId: '',
+  currJson: { column: 1, demos: [], apis: [] },
+  currJsonShow: true,
+  cmpTopMd: null,
+  cmpTopMdShow: true,
+  cmpFAQMd: null,
+  evenDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 0) || []),
+  oddDemo: computed(() => state.currJson.demos?.filter((d, i) => i % 2 === 1) || []),
+  apiDiv: null,
+  tabTitle: null,
+  currTab: 'MarkDown',
+  standard: {},
+  standardMd: null,
+});
+
+const getTypesTableOptFn = typesArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => <div v-html={row.name}></div>,
+      },
+      {
+        key: 'value',
+        title: $t('typeValue'),
+        width: '40%',
+        render: row => <div v-html={row.value}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '40%',
+        render: row => <div v-html={row.desc[state.langKey]}> </div>,
+      },
+    ],
+    data: typesArr,
+  };
+};
+
+const getApiTableOptFn = oneApiArr => {
+  return {
+    columns: [
+      {
+        key: 'name',
+        title: $t('name'),
+        width: '20%',
+        render: row => {
+          return row.demoId ? <a href={'#' + row.demoId}> {row.name} </a> : <span> {row.name} </span>;
+        },
+      },
+      {
+        key: 'type',
+        title: $t('propType'),
+        width: '25%',
+        render: row => <div class="route-anchor" v-html={row.type}></div>,
+      },
+      {
+        key: 'defaultValue',
+        title: $t('defValue'),
+        width: '20%',
+        render: row => <div class="route-anchor" v-html={row.defaultValue}></div>,
+      },
+      {
+        key: 'desc',
+        title: $t('desc'),
+        width: '35%',
+        render: row => <div class="route-anchor" v-html={row.desc[state.langKey]}></div>,
+      },
+    ],
+    data: oneApiArr,
+  };
+};
+
+const loadPage = () => {
+  const lang = $t2('cn', 'en');
+
+  state.cmpTopMdShow = state.currJsonShow = true;
+  state.cmpId = router.currentRoute.value.params.cmpId;
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.${lang}.md`)
+    .then(data => {
+      state.cmpTopMd = marked(DOMPurify.sanitize(data));
+      state.cmpTopMdShow = false;
+      state.tabTitle = getTitleFromMd(data) || state.cmpId;
+    })
+    .catch(error => {
+      state.cmpTopMdShow = false;
+    });
+
+  if (faqMdConfig[state.cmpId]) {
+    fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.faq.${lang}.md`)
+      .then(data => {
+        state.cmpFAQMd = marked(DOMPurify.sanitize(data));
+      })
+      .catch(error => {
+        return;
+      });
+  } else {
+    state.cmpFAQMd = null;
+  }
+
+  fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.cmpId}.js`)
+    .then(data => {
+      const json = eval('(' + data.slice(15) + ')');
+
+      state.currJson = {
+        ...json,
+        demos: $clone(json['demos'] || []), // 克隆一下,避免保存上次的isOpen
+        column: json.column || '1', // columns可能为空
+        title: json.title || state.cmpId,
+      };
+      if (json.standard) {
+        state.standard = $clone(json['standard'] || []);
+        if (state.standard[state.langKey].file) {
+          fetchDemosFile(`@demos/app/${state.cmpId}/webdoc/${state.standard[state.langKey].file}`)
+            .then(data => {
+              state.standardMd = marked(DOMPurify.sanitize(data));
+            })
+            .catch(error => {
+              return;
+            });
+        } else {
+          state.standardMd = null;
+        }
+      } else {
+        state.standard = null;
+        state.standardMd = null;
+      }
+      state.currJsonShow = false;
+
+      // 兼容#hashName和/#hashName两种模式
+      setTimeout(() => {
+        let hash = router.currentRoute.value.hash?.slice(1);
+
+        if (!hash) return;
+
+        if (hash.indexOf('/') > -1) {
+          hash = hash.slice(1);
+        }
+
+        const scrollTarget = document.querySelector(`#${hash}`);
+
+        if (scrollTarget) {
+          scrollTarget.scrollIntoView();
+        }
+      }, 0);
+    })
+    .catch(error => {
+      state.currJsonShow = false;
+    });
+};
+const getTitleFromMd = markdown => {
+  const titleRegex = /^#\s+(.*)/m;
+  const match = titleRegex.exec(markdown);
+  if (match && match[1]) {
+    return match[1];
+  } else {
+    return null;
+  }
+};
+const handleApiAnchor = ev => {
+  if (ev.target.tagName === 'A' && ev.target.closest('.route-anchor')) {
+    ev.preventDefault();
+    const href = ev.target.getAttribute('href');
+    const hash = $split(href, '#', -1);
+    router.push(href);
+    setTimeout(() => {
+      const scrollTarget = document.querySelector('#' + hash);
+      if (scrollTarget) {
+        scrollTarget.scrollIntoView();
+      }
+    });
+  }
+};
+
+const fn = {
+  copyText: text => {
+    navigator.clipboard.writeText(text);
+  },
+  getApiTableOpt: oneApiArr => {
+    return getApiTableOptFn(oneApiArr);
+  },
+  getTypesTableOpt: typesArr => {
+    return getTypesTableOptFn(typesArr);
+  },
+};
+
+export default defineComponent({
+  name: 'CmpDetailTab',
+  components: { demo },
+  setup() {
+    const scope = effectScope();
+    scope.run(() => {
+      watch(
+        () => router.currentRoute.value.params.cmpId,
+        cmpId => {
+          state.currTab = 'MarkDown';
+          if (!cmpId) {
+            state.currJson = {};
+          } else {
+            state.cmpFAQMdShow = state.cmpTopMdShow = state.currJsonShow = true;
+            loadPage();
+          }
+        }
+      );
+      watch(
+        () => router.currentRoute.value.hash,
+        hash => {
+          if (hash) {
+            state.currTab = 'MarkDown';
+          }
+        }
+      );
+    });
+
+    onMounted(() => {
+      loadPage();
+      nextTick(() => {
+        state.apiDiv?.addEventListener('click', handleApiAnchor);
+      });
+    });
+    onUnmounted(() => {
+      scope.stop();
+      state.apiDiv?.removeEventListener('click', handleApiAnchor);
+    });
+    return {
+      ...toRefs(state),
+      ...fn,
+    };
+  },
+});
+</script>
+<style lang="less">
+.doc-container {
+  min-height: 600px;
+}
+.types-table a,
+.api-table a {
+  text-decoration: none;
+  color: #5e7ce0;
+  cursor: pointer;
+}
+
+.n-data-table-td {
+  vertical-align: middle !important;
+}
+
+.catalog {
+  height: calc(100vh - 150px);
+  overflow: hidden;
+}
+
+.catalog:hover {
+  overflow-y: auto;
+}
+
+.catalog::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5;
+}
+
+.catalog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #c1c1c1;
+}
+
+.n-anchor .n-anchor-link .n-anchor-link__title {
+  font-size: 12px;
+}
+
+.one-demo-col2 {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
+  align-items: flex-start;
+
+  > div {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 100%;
+  }
+}
+.n-tabs .ntabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
+  color: #5073e5;
+}
+.cmp-container {
+  padding-right: 24px;
+}
+
+@media (max-width: 1279px) {
+  .catalog {
+    display: none;
+  }
+
+  .cmp-container {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .one-demo-col2 {
+    grid-template-columns: 100%;
+  }
+}
+</style>
diff --git a/packages/toolkits/docs/template/vue/src/views/components/demo.vue b/packages/toolkits/docs/template/vue/src/views/components/demo.vue
index d95c1f49..3a5b4699 100644
--- a/packages/toolkits/docs/template/vue/src/views/components/demo.vue
+++ b/packages/toolkits/docs/template/vue/src/views/components/demo.vue
@@ -19,7 +19,8 @@
           </n-tooltip>
         </div>
       </div>
-      <component :is="getDescMd(demo)" class="mb16 f14" />
+      <div v-if="descMd" v-html="descMd" class="markdown-body"></div>
+      <component v-else :is="getDescMd(demo)" class="mb16 f14" />
       <div v-if="demoConfig.isMobile" class="phone-container">
         <div class="mobile-view-container">
           <component :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
@@ -42,7 +43,7 @@
   </div>
 </template>
 <script lang="jsx">
-import { defineComponent, reactive, computed, toRefs } from 'vue';
+import { defineComponent, reactive, computed, toRefs, onMounted } from 'vue';
 import { $t, $t2 } from '@/i18n';
 import { $split, appData, fetchDemosFile } from '@/tools';
 import { languageMap, themeOverrides, vueComponents } from './cmpConfig';
@@ -82,6 +83,7 @@ export default defineComponent({
       copyTip: $t('copyCode'),
       copyIcon: 'i-ti-copy',
       themeOverrides: themeOverrides,
+      descMd: null,
     });
     const fn = {
       getDescMd(demo) {
@@ -99,15 +101,11 @@ export default defineComponent({
         }
       },
       async copyCode(demo) {
-        if (demo.isOpen) {
-          const idx = parseInt(state.tabValue.slice(3));
-
-          navigator.clipboard.writeText(demo.files[idx].code);
-        } else {
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        if (!demo.files) {
           const code = await this.getDemoCode(demo);
-
-          navigator.clipboard.writeText(code);
         }
+        navigator.clipboard.writeText(demo.files[idx].code);
         state.copyTip = $t('copyCodeOk');
         state.copyIcon = 'i-ti-check';
       },
@@ -129,20 +127,19 @@ export default defineComponent({
             .catch(error => {});
         }
       },
-      getDemoCode(demo) {
+      async getDemoCode(demo) {
+        await getDemoCodeFn(demo);
         // 获取code代码文本
-        getDemoCodeFn(demo);
-
-        const path = `@demos/app/${state.cmpId}/${demo.files[0].fileName}`;
-
-        return fetchDemosFile(path)
-          .then(code => {
-            demo.files[0].code = code;
-            return code;
-          })
-          .catch(error => {});
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        const path = `@demos/app/${state.cmpId}/${demo.files[idx].fileName}`;
+        const code = await fetchDemosFile(path);
+        state.demo.files[idx].code = code;
+        return code;
       },
     };
+    onMounted(() => {
+      getDemoCodeFn(props.demo);
+    });
     return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig };
   },
 });
diff --git a/packages/toolkits/docs/template/vue/src/views/components/demoPage.vue b/packages/toolkits/docs/template/vue/src/views/components/demoPage.vue
new file mode 100644
index 00000000..e9d8ec30
--- /dev/null
+++ b/packages/toolkits/docs/template/vue/src/views/components/demoPage.vue
@@ -0,0 +1,207 @@
+<template>
+  <router-view>
+    <div class="container">
+      <div v-if="demo" :id="demo.demoId" class="b-a br-sm">
+        <!-- DEMO 的标题 + 说明desc+  示例wcTag -->
+        <div class="icon-content">
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <i :class="copyIcon" class="h:c-success w16 h16 cur-hand" @click="copyCode(demo)" @mouseout="resetTip()" />
+            </template>
+            {{ copyTip }}
+          </n-tooltip>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <i :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'" class="ml8 h:c-success w16 h16 cur-hand" @click="toggleDemoCode(demo)" />
+            </template>
+            {{ demo.isOpen ? $t('hideCode') : $t('showCode') }}
+          </n-tooltip>
+        </div>
+        <div v-if="demoConfig.isMobile" class="phone-container">
+          <div class="mobile-view-container">
+            <component :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
+          </div>
+        </div>
+        <component v-else :is="vueComponents[`${cmpId}/${demo.codeFiles[0]}`]" />
+        <!-- demo 打开后的示例代码  细滚动时，width:fit-content; -->
+        <div v-if="demo.isOpen" class="px24 py20 b-t-lightless">
+          <n-config-provider :theme-overrides="themeOverrides">
+            <n-tabs v-model:value="tabValue" type="line" size="large" justify-content="space-evenly" @update:value="handleUpdateValue(demo)">
+              <n-tab-pane v-for="(file, idx) in demo.files" :key="file.fileName" :name="'tab' + idx" :tab="file.fileName">
+                <n-layout :native-scrollbar="true" :content-style="`overflow-x:auto; padding: 20px 5px; background-color:#f5f6f8;`">
+                  <n-code :code="file.code" :language="file.language" />
+                </n-layout>
+              </n-tab-pane>
+            </n-tabs>
+          </n-config-provider>
+        </div>
+      </div>
+    </div>
+  </router-view>
+</template>
+<script lang="jsx">
+import { defineComponent, reactive, computed, toRefs, onMounted } from 'vue';
+import { $t, $t2 } from '@/i18n';
+import { $split, appData, fetchDemosFile } from '@/tools';
+import { languageMap, themeOverrides, vueComponents } from './cmpConfig';
+import { router } from '@/router.js';
+import demoConfig from '@demos/config.js';
+
+const getDemoCodeFn = demo => {
+  // 获取code代码文本
+  if (!demo.files) {
+    const cmpId = router.currentRoute.value.params.cmpId;
+    demo.files = demo.codeFiles.map(fileName => {
+      const ext = $split(fileName, '.', -1);
+      const language = languageMap[ext] || '';
+      return { fileName, language, files: [] };
+    });
+  }
+};
+
+export default defineComponent({
+  name: 'DemoPage',
+  props: ['demo'],
+  setup(props) {
+    const state = reactive({
+      tabValue: 'tab0',
+      cmpId: router.currentRoute.value.params.cmpId,
+      langKey: $t2('zh-CN', 'en-US'),
+      currDemoId: computed(() => {
+        let hash = router.currentRoute.value.hash?.slice(1);
+
+        // 兼容/#hashName这种模式
+        if (hash.indexOf('/') > -1) {
+          hash = hash.slice(1);
+        }
+        return hash;
+      }),
+      copyTip: $t('copyCode'),
+      copyIcon: 'i-ti-copy',
+      themeOverrides: themeOverrides,
+      descMd: null,
+    });
+    const fn = {
+      getDescMd(demo) {
+        // desc字段可能是md,也可能是html。 返回md组件或者html组件
+        const desc = demo.desc[state.langKey].trim();
+        return <div class="demo-desc" v-html={desc}></div>;
+      },
+      toggleDemoCode(demo) {
+        // 第一次打开时，要请求一下相应的codeFiles .存储到files属性下
+        if (!demo.files) {
+          this.getDemoCode(demo);
+          demo.isOpen = true;
+        } else {
+          demo.isOpen = !demo.isOpen;
+        }
+      },
+      async copyCode(demo) {
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        if (!demo.files) {
+          const code = await this.getDemoCode(demo);
+        }
+        navigator.clipboard.writeText(demo.files[idx].code);
+        state.copyTip = $t('copyCodeOk');
+        state.copyIcon = 'i-ti-check';
+      },
+      resetTip() {
+        setTimeout(() => {
+          state.copyTip = $t('copyCode');
+          state.copyIcon = 'i-ti-copy';
+        }, 300);
+      },
+      handleUpdateValue(demo) {
+        const idx = parseInt(state.tabValue.slice(3));
+
+        if (!demo.files[idx].code) {
+          const path = `@demos/app/${state.cmpId}/${demo.files[idx].fileName}`;
+          fetchDemosFile(path)
+            .then(code => {
+              demo.files[idx].code = code;
+            })
+            .catch(error => {});
+        }
+      },
+      async getDemoCode(demo) {
+        await getDemoCodeFn(demo);
+        // 获取code代码文本
+        const idx = demo.isOpen ? parseInt(state.tabValue.slice(3)) : 0;
+        const path = `@demos/app/${state.cmpId}/${demo.files[idx].fileName}`;
+        const code = await fetchDemosFile(path);
+        state.demo.files[idx].code = code;
+        return code;
+      },
+    };
+    onMounted(() => {
+      getDemoCodeFn(props.demo);
+    });
+    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig };
+  },
+});
+</script>
+<style lang="less">
+.demo-desc {
+  line-height: 1.5;
+  code {
+    background: #f1f2f3;
+    padding: 2px 4px;
+    border-radius: 2px;
+    margin: 2px 4px;
+    display: inline-block;
+  }
+
+  a {
+    text-decoration: none;
+    color: #5e7ce0;
+    cursor: pointer;
+  }
+}
+
+.theme-dark {
+  .demo-desc {
+    code {
+      background: #333333;
+    }
+  }
+}
+
+.b-a-success {
+  animation: border-trans 3s;
+}
+@keyframes border-trans {
+  0% {
+    border: 1px solid #5073e5;
+    background: none;
+  }
+  50% {
+    background: rgba(255, 95, 85, 0.1);
+    border: 1px solid rgba(255, 95, 88, 0.6);
+  }
+  100% {
+    border: 1px solid #5073e5;
+    background: none;
+  }
+}
+.phone-container {
+  margin: auto;
+  width: 395px;
+  height: 773px;
+  padding: 20px;
+  border: 0;
+  position: relative;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYsAAAMFCAYAAACFxdoKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg3MTZDNTAwMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg3MTZDNTAxMTI1MzExRUE5Mzk1OTFBNjdDQ0JBNUQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODcxNkM0RkUxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxNkM0RkYxMjUzMTFFQTkzOTU5MUE2N0NDQkE1RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7YMDcrAAAcl0lEQVR42uzde4ysd1nA8ZnZmd3TU+jpKbWU0qYVgaKCRS4aISBGU6EFIQGEGA2RiEQLJBIjmBBIjAmKt2ijEDD4h2hEJVDKRRCDUKjBmtJqFRou0vQGtZz2eK47V59nzvuu0z17ztmZfWd2zsznk7yZmd2Z3dnZmd93fu878079wIEDte1oNBqPON3v94eHg8Fg43v5tXq9Pjydx/N7o6fzeC759fJ7YSWO74nD8+L0s+J8r4rjV8VyaSx7Y2n2er1Gt9utNZvN4bILBrE8PMHlzi8OH64B01Q+1uqz/sUxZg1ifBqsrKx0Yjka49nB+PKDsdwZY9o3Yrk5xrBb4/BwfK0b5+nGeQY5Jo6OncMrf2JMHB5uNZ7m8fJ7efqCCy6Y2d/Z3KV/7P5YHh9/7OXxh78gDl8UN8IVcSPujeMn/bPj68NlF9WL67yTvxdYQDF21VutVgxl9bU4uRaH+Xi/IpZnnng+PegUTxhvieXWWG6O5Wux3BNL+2z5O2cdiyfH8pS48V4ZN/A1EYB92YKsZJR3o64njdT1unskMLdOMUbVi2UtxrrHxvLiHPdWV1cPHzp06GCMdzfE6Y/G978ey3diOTrXf+OUV0NlbXP10pMyEJ1O59Xnnnvu45rNZmt9fX142fJnlMcBFnQGMjzMtSTtdjtPd2IsPBhPlG/rdrufjHHyi7HcFmdZX7bVUDkVuzaW18Qf+MxYzo8/sJ4ziDIsAgEsi/IJdo6BRQRacfzCOP6TMdt4bnz/rjj92Th9U5wtl3sWfmYR5bwqSvmW+NI1Uc595WXyvGUsrFoCqG3MFopxMTd83x/Lh2O8/Eyc/lh8v7uIM4uLIwa/EH/E6yIYT8yZxOZZhEgAnPzEuwhBPQ4viZOvj7H06jj8nlhuiOWBRZpZPD2Wt8XXXxJLzKpWN2YRAGxzUB7ZThGHR+Pwg7G8N751S5zunc0zi0viSr88Dq+LP+TKfB9ERkIoAMZXrq4v1sLke81+MZYnx9ffFYe5TePQ2TizeHpc8XfE8RdneKxiApjajOOuCMbH4vA9cfKOHINnObNoTHi5fIfcM2L5k5WVlZfFbEIoAKYoxtrLY8ZxXSxvr51Y7T/TdypPEot61O2nIg7vj0Y8r3xDHQDTk7s8yvdoNBqNV8a4+7740k/PdGYz5mqoRoTimjh8Z1zpp2YoTvWuawCmo3h16ZfjSfvvx+E/1U68A3xi+/efeY9E48ws8rzXxpV8n1AA7J58IdHa2toPx1j8OzEm/+ws3uC8rVjkS3/jyuRLYt8bV/JioQDYPTn+djq5f8LaZTEm/0ocvqJ24j0ZuxuLXq/3I+12+/qo2MVZMKEA2D3l/vSKsfj7Ixhvi8MX5B5wdzMWV8XM4l0RistszAaYrxnGcCBvNPIzgN6Y4ZhpLMqXwUa5LovlN+P083IrvB3/AcyPHKvLj3eIMfrZcfir8eXHzHRmEVfi3IhD7ufpZeW0B4C5nWHsiWD8XIzVP5+fPlr1e99OGYvcoB2/7NeazeaafwXA/Cq3X+Sn9OUG71wbVM48phqL+MU/Gr/kzVGpC70zG+DsCEaxTfnKWHKD99OmPbPIQPxSrv/KN+LZoA1w1gXjeTGOvzYOL55aLOKX/VhE4uqcUeTbywE469SLzxbKPW5U8rlFm2NxQUTiJXF4mfdSAJzVs4zHxPLSOPp9lcciApEvkX1hflqT1U8AZ69if37PieW5tcn3ML5lLPbHD/+Z6MTjvUwWYCFcmK9srZ3Y6F1NLOIHPv+cc865utlsNmyrADj7tVqtfLNeObuoJBbnx4zipb1e7xKrnwAWQ7GLpoviMPcY/oPlPqU2L9uKRa7XiuWSc88991l5ut1u17y3AmAxYpG7M4/ZxVNiXL+8GO9PWrYVi+Kdfz8e9bnctgqAxVIEIXdf/tTcjVNOBjYv243F+fkxfZ1O57zcVmFWsXsm/ScCnEoxrj8mxvmXxcTgOeXnEY0u29GMH5IfnnFF/sBi3yJu3RkHIoI9KP5pJ934OYUszuPGAsZWjh0xjlwRY8wlk47x+c6+J8QPe3Q5cDHb/2MGotfr5TI4VeHz/5K7iBcNYAdaMbt41KQXbsYA9fxY9hmEdiUUw49GLGZ09a1iXXx04nCGkS+DEwxgwhlGvufiqgjGhXHywbFjEc9YMxYtA9Bs/285k+h2u/W83U83oyu/ly9pzuMzWi211Q837YSzVD4hzQ3dMXY8LsaOR00Ui/gBl3pvxcz/cWUoxhqAc7tSRiJnGFOe8QxGY5RxKl5eN6tgLMozF4FlLuQYv7a2lo/l1aNHj+7Z7stlHxGLGIDOcVPOVtzmjUlfTFC+Yi2DUfXs4sR29uGbeOqjG9vj9w3i9w2m+WHwI9dhGNNF+D/n7WU7IHPxrCXuh7lKOx5fuTunp8Rj7KtjxyIWsZjtrCKfttcnHUVGXz1V9UiUA/VWM548nXe0CEa/MclTkjFnNfG7GovyAF1dXfXCEebJRbE8NZbPxfLQWE9+Ymm5/WYnB8JxVz9tMbuo51LlIJQRO92qsSIYjf709l2fq+YWJhRlfItnc+74zMsTmNy10+Mmmim7+SgC1NjqfR5bzDwaVQ9+Gb383fmzF+12Lfa948NhmBeNYhlMckHY9rPfaT1LXuRn3xFDjzPm5qGeKxImisVOV4mwGJrNZj83ZJ9pBrCystK3Dn6iByjsqnxFVIz3+XaJJ8Rj+MKx9w1VDgLM37P4U4l/9iCXKp+Nx88bbnQ/08+MqNSncXvkdvNi3/sLM7CW74uBeRp34rH26LhvnjNuLJreETxbOSDuZKNnObDm7j8q/r/V4+cOdz+y+Y2C5eliIJ/KM4tyYM1nP4vw4Vvl7ZVxNXtnXmKR40beL+NxNvZ2NE97ZqwY5PNVPxMNIDmgZyymMQCV+5/Kl6+W77fI3xUD3vA9FtN91exGlOpTftPhzGJR/J/c6Zmr8SeflB0/fnzsNUpisQt1LwfgfKnqmANQPlOtTevNcTlQ58/P61juXqS4ruX7O6b+DLl8w+GC/K/NKFgYYrE7zzpzUM6nnDkdPON2giIw+S7q2rTfRV1cl3oxXd24yrN8huzZOMwfL+nbxWYUH3fYLwfI0UFyZB/0uTG7Vuxuw60GmFksYzCKZ++D8g1xI69YGB7PGUi+UknYAbFY5loU2wmKUAzK18PmPphy1xoN0wlALNgcjtEdPgkFMC8MRgCIBQBiAYBYACAWAIgFAGIBgFgAgFgAIBYAiAUAYgGAWAAgFgCIBQBiAQBiAYBYACAWAIgFAGIBgFgAIBYAiAUAiAUAYgGAWAAgFgDMp+Z2zjQYDGorKyu1vXv3Dk+vr6/XWq3W8GvtdrtWr9eHpzudTq3f79fW1tZqvV5veHp1dXX4/bxMs9kcLnmZlN/rdrvD8+Zl8rL5vfIyeTx/R5WXyeP595SXaTQaw+u2+TJbmeTnlOcrz1vebnnevEx5u+X387zl7ZZ/2+bbevNlNt/WVV1mUf+nO7lMLnnd/B/n8/+YP3/0cJn+r3nd8m87fvz48HK7GouNM8cVyiuZVzgPc8k/dDhFicP8el7x8niePw/Tdi5TRmmcy5Tn28ll8mubL7PlNOwUP6e8/FY/Z/Tnbee8eZ68E4x+bTuXGb2tN1+mqv/P2f4/nfT/l+cpBx7/x/n8P262TP/X8gl9np5mLOoHDhwYbHdmcd555w2vLADzI2ckR48eHc40TjeO59qhiNAXDh8+/PoYy/+r/N6+fftsswBg58QCALEAQCwAEAsAxAIAsQBALAAQCwAQCwDEAgCxAEAsABALAMQCALEAQCwAQCwAEAsAxAIAsQBALAAQCwDEAgCxAACxAEAsABALAMQCALEAQCwAEAsAxAIAxAIAsQBALAAQCwDEAgCxAEAsABALABALAMQCALEAQCwAEAsAxAIAsQAAsQBALAAQCwDEAgCxAEAsABALAMQCAMQCALEAQCwAEAsAxAIAsQBALAAQCwAQCwDEAgCxAEAsABALAMQCALEAQCwAQCwAEAsAxAIAsQBALAAQCwDEAoAF0Ynl2GAwGOtCTbcbwHLo9/u5PDZC8ew4OWg0GvfG8Y6ZBQBD9Xq91u12a+vr61dGIK6PaLy71+u9Or6118wCgA0Rh1qEYiWicVEsL4yZxTP27NmT66M+YGYBwMbsIldFZTTyeLgoTr9hO5cVC4AllRu52+32k8UCgDMGQywAqIRYACAWAIgFAGIBgFgAIBYAiAUAYgEAYgGAWAAgFgCIBQBiAYBYACAWAIgFAIgFAGIBgFgAIBYAiAUAYgGAWAAgFgAgFgCIBQBiAYBYACAWAIgFAGIBgFgAgFgAIBYAiAUAYgGAWAAgFgCIBQBiAQBiAYBYACAWAIgFAGIBgFgAIBYAIBYAiAUAYgGAWAAgFgCIBQBiAYBYAIBYACAWAIgFAGIBgFgAIBYAiAUAYgEAYgGAWAAgFgCIBQBiAYBYACAWAIgFAIgFAGIBgFgAIBYAiAUAYgGAWAAgFgAgFgCIBQBiAYBYACAWAIgFAGIBAGIBsNwG2zlT0+0EsGR1GAxqKysrtVardTyOf1AsAHhEJJrNZkZi0O1276vX6x+KL/+BWACwIeJQazQaByMan4qZxT/2+/1PxpfvFQsANmYVa2trGYs7jx079scRjtvjy0e2e3mxAFgSEYpcDXU8QvFgLEfytFgAsGUzyrE/V0uNcyEAEAsAxAIAsQBALAAQCwDEAgCxAACxAEAsABALAMQCALEAQCwAEAsAxAIAxAIAsQBALAAQCwDEAgCxAEAsABALABALAMQCgKo13QQAy2kwGIgFAFvqxrKeoRgnFlZDASzRTCKWfXH08n6/v3ecy4oFwBKo1+u1TqdTO378+NMiFH8U0XhzfPlp+a3tXN5qKIAl0ev1huN+xOKHut3uD6yurj43IvKW+Nq/m1kAsDG7iFAMZxgxs2jG4U/E4Zu2c1mxAFgioxu1Ixxr7Xb7WrEA4EzxWBMLACohFgCIBQBiAYBYACAWAIgFAGIBgFgAgFgAIBYAiAUAYgGAWAAgFgCIBQBiAQBiAYBYACAWAIgFAGIBgFgAIBYAiAUAiAUAYgGAWAAgFgCIBQBzZjAYbOt8TTcVwPIFol6v1xqN4XzhkFgAcKpI1Fqt1pE4/TdiAcCGDMXKysrweLfbfShO3xhH3yMWAGzMKprNZgbjWL/f/0LMKj4YX/5ULPeIBQD/P+BHLGK5rdPpvDXicVt8qb/dy3o1FMCSyNVQsXRiObSystIf57JmFgDLJScJreGRRmOsCwGAWAAgFgCIBQBiAYBYACAWAIgFAIgFAGIBgFgAIBYAiAUAYgGAWAAgFgAgFgCIBQBiAYBYACAWAIgFAGIBgFgAwCM13QQAy2ffvn1mFgBUSywAEAsAxAIAsQBALAAQCwDEAgCxAACxAEAsABALAMQCALEAQCwAEAsAxAIAxAIAsQBALAAQCwDEAgCxAEAsABALABALAMQCALEAQCwAEAsAxAIAsQBALABALAAQCwDEAgCxAEAsABALAMQCALEAALEAQCwAEAsAxAIAsQBALAAQCwAQCwDEAgCxAEAsABALAMQCALEAQCwAQCwAEAsAxAIAsQBALAAQCwDEAgCxAACxAEAsABALAMQCALEAQCwAEAsAxAIAxAIAsQBALAAQCwDEAgCxAEAsABALABALAMQCALEAQCwAEAsAxAIAsQAAsQBALAAQCwDEAgCxAEAsABALAMQCAMQCALEAQCwAEAsAxAIAsQBALAAQCwAQCwDEAgCxAEAsABALAMQCALEAQCwAQCwAEAsAxAIAsQBALAAQCwDEAgCxAACxAEAsABALAMQCALEAQCwAEAsAxAIAxAIAsQBALAAQCwDEAgCxAEAsAEAsABALAMQCALEAQCwAEAsAxAIAsQAAsQBALAAQCwDEAgCxAEAsABALAMQCAMQCALEAQCwAEAsAxAIAsQBALAAQCwAQCwDEAgCxAEAsABALAMQCALEAQCwAQCwAEAsAxAIAsQBALAAQCwDEAgDEAgCxAEAsABALAMQCALEAQCwAEAsAEAsAxAIAsQBALAAQCwDEAgCxAEAsAEAsABALAMQCALEAQCwAEAsAxAIAsQAAsQBALAAQCwDEAgCxAEAsABALAMQCAMQCALEAQCwAEAsAxAIAsQBALAAQCwAQCwDEAgCxAEAsABALAMQCALEAALEAQCwAEAsAxAIAsQBALAAQCwDEAgDEAgCxAEAsABALAMQCALEAQCwAEAsAEAsAxAIAsQBALAAQCwDEAgCxAEAsAEAsABALAMQCALEAQCwAEAsAxAIAsQAAsQBALAAQCwDEAgCxAEAsABALABALAMQCALEAQCwAEAsAxAIAsQBALABALAAQCwDEAgCxAEAsABALAMQCALEAALEAQCwAEAsAxAIAsQBALAAQCwDEAgDEAgCxAEAsABALAMQCALEAQCwAEAsAEAsAxAIAsQBALAAQCwDEAgCxAEAsAEAsABALAMQCALEAQCwAEAsAxAIAxAIAsQBALAAQCwDEAgCxAEAsABALABALAMQCALEAQCwAEAsAxAIAsQBALABALAAQCwDEAgCxAEAsABALAMQCALEAALEAQCwAEAsAxAIAsQDg7NXc7hkHg0Gt3W4v8201mOAy9R1cFhj/sbZ8f3i9Phyf+/3+7seivDJHjhwZHoqFWIBYzFcwcpmLmcWsrtAca+zSZQHO6gEQALEAALEAQCwAEAsAxAIAsQBALAAQCwDEAgDEAgCxAEAsABALAMQCALEAQCwAEAsAOFnTTcA86ff7g263uzCf3ZsfQ9xqtfxjEQuYdBAdhF6vl4Goj8RiuCzsA67ZrK2srCz034hYQCWKSNTjoFbEYjQiaaH+3pgpPeJ0/s2NRmO4gFjAKWYTGYdOp5PHh2FYtDhs9XePhiMjubq6OsgZRh7Ps7h3IBZQTChyW0Qxm6hvHkSXKZi5lMEsZhgDwUAs4EQoyg3XBsXacNtMPYMR4Ri0Wq3hLCNvm2KmAWLB8oUiZhIZCivot7pxBoN6sWpquE7OdgzmlXsmU59RdDod97MzzDLa7XZj84ZwEAsWXrFevm5Gsf3bK1dBWQ2FWLBcU4oTvJlgvNtsuNEbxIKlGfdsp5hMbvRut9tmGIgFy/Ms2YA3+W0HYsHCy3col++lYLJYFG9adGMgFizyWDecVYjFDoOblvGNi4gFSyDXuZcDHZMrd41idoFYsJCzioyFWUV1swuxQCxYvFLYqF2pcl9aVkVR5ROQfPPnJPepZt4ZcxcDHuQwX5rN5nAXIB6bVCEDUcxW65NMFBrlM0Jg7h7cGQsPTiqLRer3+4dizD82dizcGWE+5Zsac5cpVkNRhdyzcdyXujG7+GbE4sGJZhYALMcEoxj3x34GIhYwx6sNyh0MQkX6xTJRLOy5DOZztUHfamKqFE88Ho7l/kkum7E45iaE+dPr9Rres0LFHojljlgeGjsWzWbzmA1oVCG3xMb9KZ8RezZcgbwtPTapaEZRa7VatbW1tXvjPvXVST6RMV9tcY+bkgqDYYCrSPHqFTcElTwu19fXc2lHKI5P8jMaMdX9fFy4404J8/VM0IZtqnzikfenbrd7fxwenuS+FZ1oZCwOigVVPYnJKW4sRrodWF1d9UooKp1ZxGPywTi8Pd9jMVEsYvlm/IBD5bMZ2Cmx2PkD2yoopqDT7/cPTzprzVdb3B1Tk28V5XFzUtXsou5lnxPHYuDJG1U++SjuT9+Kx+V9k25XzEf0w1Gbv2u1Wv+br75wB6Wi2UXd/Wl8+UqyfNUKVKV4HH43xvmPxOPy5mLmP1Es8oKfizvpXaa9VB2MXJ3CmRW7Ih+Ue5p1i1CV/IyZWP4njt4R97MjE6+GKn7QfUeOHPm3/Lm5Yc2zQaqa/uazZGPftsJaK1bdWRdMpfer/PyKXq/31RjX7yrG++Ey9s8qDvMt4DfEs8D7PBNkCsHoC8ZpH9CDeJLWt/qJacQixvQH4vDj8Rj8z3J7xUTbLEYe1J8/duzYp6NC/VzHBRXeYRuCcdrbx4yCqeh0OjmruDmOfnHH99OR4w/F1OSjMcO414OaaQQjnoTYMd7JM4qB2TxTlO+tuDEO76wyFnnnvSkq9A8RDHdgKhf3qUYMjvVc5bLs78PI2XveFsWswp2DyhXbJcpZRX+nP2/z1PdAdCIrdLf3XDClZ9PD1S6tViujMVi2aBSRsJNApi7uX9+N5YY4+o1KHrtb/IJ/iSJ9Ol8RZdsFVSteaVcvNrwNXy1VDp4LHIhc3bTxd5azdq86ZJoPtbif/WWM55+I491K7sdbfC33G/LnvV7vqvhFz847dhx30zOVaJR7DshlUZ9pj+66ww4CmfJsYvhYijH7prifvT++9O3KnvSc4hd+KX7RH8YM4/q4o1/oX8AMwrGws4v8ACOBYBahKPYumxuzfzuW/6h0hnyaX3xjxOIJ3W737VGqNf8KZhUNYLIZRTyGHoox+93xpZuq3mtx4zQP3CPxy3Kd10fKKwPA3Dre6/X+OsbqD8RyvOonX43TPcOLX3h3LO+M0/mSWsEAmMNZRYox+paYXfxZHP3uNH7Pdl4fmx+W8RtxRe4uX8ECwHyEohiXb4+T18fylWn9rm29mSKuyL+urq6+MYLxbZ97ATAfirH4K51OJzdo/3O/35/ahr9tvfwkZhb5jtsbIxT9brf73mazeXF+fZI9FwKwc8VanruLDdp/P/UwjXHeLEPuufB1McO4Y9IP0ABgZ3K7ckTiyzEWvzXG5L+dxfbkcV/YnjuC+3hc0U5cyd+Nsl1lhgEwc/n5Q+/Yv3//J2b1CyeZGuQneX0mgvHaKNtNNnoDzEbucjw/BjvG3dfFyU/N8ndPuh4p9/9xayxvihnGRyIaXW+oApie/KS7ZrP5p/Hk/Lfi5G3FODwz9QMHDmyvKpu2T5SrnuIPuCRmGi+Po9fFea7MdWf2JQWww8G5eOVp8TGouZvxd0UoPhtfP5RjbD5Bv+CCC+Z+ZjHqvrjy18fy6rjyH4pJRjv/EKumACaLxMj4eTSWv4jl12PJ7cWHdmstTpV7brst6veGWL6U69PiD3pi/t35R2cZraYCOM0z95FXmMaY2Y3lv2Pc/L342g0RkAd2ewytYjXU6B9YVvGqmGG8Jb50TbPZ3FdeJs9brqKy6xCA2iN2z58fOxzj6P2xfDjGy8/E6Y/F97vlE+7yvOXpWa6Gmso+oeOPuD3+oOvi8NqIw2siHs+MP/L89fX1/IS04RQrt+qbbQDLJse9kd2JDwORO/6LANwVT7Jzm0TuMTY/j+Keebre0/wAgYdi+atYclfnT4povDKWV+zZs+fSmG2slhtoyhtPOIBFn0GkjES73c7ZQSfGwoMxFt4WT54/GYH4Yiz5Kqf1ebz+U1kNVW7BLws6cnpfHP/eOOsvx9dfETdazqFW8nsZj/J8AIuknEnEGNdfXV09fOjQoYMx1t0QsfhofPvrcfw7cXh0ZHXUluPpbq6GmnUsyqnX/lgeHxe5PL7/gvjei+I8V8T39sY0rL7VtG30RgeYJ+VYt/nLxdKJMe7h+P4tcfzWGOdujvN/Lb52T4x77dHxVCxOjsXojbsSx/fE4Xlx+llxvlfF8dyNyKWx7I2lGbOORkRk+LGbu/TRm/kPf3iCy51fHD7s4QRTVT7WZv5sMvf0mu9LjrGtE8vRGM8OxpcfjOXOGNO+EcvNMYbdGoeH42vdOE++iTk3ZD9i7Jz3WPyfAAMAmxj+h7FTWDsAAAAASUVORK5CYII=)
+    no-repeat center top;
+  background-size: contain;
+
+  .mobile-view-container {
+    width: 360px;
+    height: 613px;
+    position: absolute;
+    left: 11px;
+    top: 79px;
+    transform: translateX(0);
+    overflow: hidden;
+  }
+}
+</style>