From def10d726091a6cc7301cdca7eee9d612a287458 Mon Sep 17 00:00:00 2001
From: chenxi <2465950588@qq.com>
Date: Tue, 29 Oct 2024 23:45:40 -0700
Subject: [PATCH] =?UTF-8?q?fix(docs):=20=E4=BF=AE=E5=A4=8Dopentiny/vue-doc?=
 =?UTF-8?q?s=E5=8C=853.18=E7=89=88=E6=9C=AC=E6=97=A0=E6=B3=95=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8meta=E6=A0=87=E8=AE=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/sites/demos/apis/button-group.js     |   4 +-
 examples/sites/demos/apis/dialog-select.js    |   4 +-
 examples/sites/demos/apis/dropdown.js         |   2 +-
 examples/sites/demos/apis/grid.js             |   8 +-
 examples/sites/demos/apis/input.js            |   4 +-
 examples/sites/demos/apis/pager.js            |   4 +-
 examples/sites/demos/apis/pop-upload.js       |   4 +-
 examples/sites/package.json                   |   4 +-
 .../sites/src/views/components/VersionTip.vue | 108 +++++------
 .../sites/src/views/components/components.vue | 175 ++++++++++++------
 10 files changed, 189 insertions(+), 128 deletions(-)

diff --git a/examples/sites/demos/apis/button-group.js b/examples/sites/demos/apis/button-group.js
index 502f094497..ba5e629fbe 100644
--- a/examples/sites/demos/apis/button-group.js
+++ b/examples/sites/demos/apis/button-group.js
@@ -181,8 +181,8 @@ export default {
             'zh-CN': '自定义数据为空时展示内容',
             'en-US': 'customize content when data is empty'
           },
-          metaData: {
-            new: '3.17.0'
+          meta: {
+            stable: '3.17.0'
           },
           mode: ['pc'],
           pcDemo: 'slot-empty'
diff --git a/examples/sites/demos/apis/dialog-select.js b/examples/sites/demos/apis/dialog-select.js
index c59d30a0d2..31e874fa9e 100644
--- a/examples/sites/demos/apis/dialog-select.js
+++ b/examples/sites/demos/apis/dialog-select.js
@@ -442,8 +442,8 @@ export default {
             'zh-CN': '自定义弹窗底部按钮',
             'en-US': 'Custom Pop Up Bottom buttons'
           },
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           mode: ['pc'],
           pcDemo: ''
diff --git a/examples/sites/demos/apis/dropdown.js b/examples/sites/demos/apis/dropdown.js
index f649b4125f..72effb22ca 100644
--- a/examples/sites/demos/apis/dropdown.js
+++ b/examples/sites/demos/apis/dropdown.js
@@ -241,7 +241,7 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'lazy-show-popper',
           mfDemo: '',
-          metaData: {
+          meta: {
             experimental: '3.18.0'
           }
         }
diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js
index d0c60e8825..073d888f5c 100644
--- a/examples/sites/demos/apis/grid.js
+++ b/examples/sites/demos/apis/grid.js
@@ -147,8 +147,8 @@ export default {
           name: 'custom-column-names',
           type: 'string[]',
           defaultValue: "['TinyGridColumn']",
-          metaData: {
-            new: '3.17.0'
+          meta: {
+            stable: '3.17.0'
           },
           desc: {
             'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
@@ -1467,8 +1467,8 @@ export default {
           name: 'toggle-group-change',
           type: '(row: IRow) => void',
           defaultValue: '',
-          metaData: {
-            new: '3.17.0'
+          meta: {
+            stable: '3.17.0'
           },
           desc: {
             'zh-CN': '当分组的展开和收起时会触发该事件',
diff --git a/examples/sites/demos/apis/input.js b/examples/sites/demos/apis/input.js
index 1c64313ca6..ac6066102c 100644
--- a/examples/sites/demos/apis/input.js
+++ b/examples/sites/demos/apis/input.js
@@ -400,8 +400,8 @@ export default {
           name: 'show-tooltip',
           type: 'boolean',
           defaultValue: 'true',
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           desc: {
             'zh-CN': '只读状态下，文本超出是否悬浮提示',
diff --git a/examples/sites/demos/apis/pager.js b/examples/sites/demos/apis/pager.js
index 042340919a..3a5ea070b8 100644
--- a/examples/sites/demos/apis/pager.js
+++ b/examples/sites/demos/apis/pager.js
@@ -247,8 +247,8 @@ export default {
           name: 'total-fixed-left',
           type: 'boolean',
           defaultValue: 'false',
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           desc: {
             'zh-CN': '总条目数是否固定在左侧，Aurora、SMB主题默认值为 true',
diff --git a/examples/sites/demos/apis/pop-upload.js b/examples/sites/demos/apis/pop-upload.js
index e15c89ebe2..b3c4539e2f 100644
--- a/examples/sites/demos/apis/pop-upload.js
+++ b/examples/sites/demos/apis/pop-upload.js
@@ -297,8 +297,8 @@ export default {
             'zh-CN': '自定义上传提示内容',
             'en-US': 'Customize upload prompt content'
           },
-          metaData: {
-            new: '3.18.0'
+          meta: {
+            stable: '3.18.0'
           },
           mode: ['pc'],
           pcDemo: 'upload-tip'
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 7d06c8049e..9dfcdbdb14 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.18.5",
+  "version": "3.18.6",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -86,4 +86,4 @@
     "vite-svg-loader": "^3.6.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}
\ No newline at end of file
diff --git a/examples/sites/src/views/components/VersionTip.vue b/examples/sites/src/views/components/VersionTip.vue
index f49d005796..087ffbd631 100644
--- a/examples/sites/src/views/components/VersionTip.vue
+++ b/examples/sites/src/views/components/VersionTip.vue
@@ -1,7 +1,7 @@
 <template>
   <span v-if="currentStageComputed" class="version-tip">
     <div v-if="renderType === 'alert'">
-      <tiny-alert :type="alertTypeComputed" :closable="false">
+      <tiny-alert :type="alertTypeComputed" v-if="!isStableComputed" :closable="false">
         <template #description>
           <span>{{ tipComputed }}</span>
         </template>
@@ -15,7 +15,7 @@
         :content="tipComputed"
         :disabled="!tipComputed"
       >
-        <tiny-tag size="mini" effect="dark" :type="tagTypeComputed">{{ currentStageComputed }}</tiny-tag>
+        <tiny-tag size="small" effect="dark" :type="tagTypeComputed">{{ tagContentComputed }}</tiny-tag>
       </tiny-tooltip>
     </span>
   </span>
@@ -28,11 +28,14 @@ import { Tag as TinyTag, Alert as TinyAlert, Tooltip as TinyTooltip } from '@ope
 import { getWord } from '../../i18n/index'
 
 enum STAGE {
+  // 实验性阶段（api属性不具备此阶段）
   experimental = 'experimental',
+  // 稳定阶段
   stable = 'stable',
+  // 弃用阶段
   deprecated = 'deprecated',
-  removed = 'removed',
-  new = 'new'
+  // 将要被移除阶段
+  toBeRemoved = 'toBeRemoved'
 }
 
 interface IStageVersionMetaData {
@@ -43,7 +46,7 @@ interface IVersionMetaData {
   [STAGE.experimental]?: IStageVersionMetaData | string
   [STAGE.stable]?: IStageVersionMetaData | string
   [STAGE.deprecated]?: IStageVersionMetaData | string
-  [STAGE.removed]?: IStageVersionMetaData | string
+  [STAGE.toBeRemoved]?: IStageVersionMetaData | string
 }
 
 interface Ii18nString {
@@ -51,38 +54,38 @@ interface Ii18nString {
   'en-US': string
 }
 
+// 生命周期的顺序 实验 --> 稳定 --> 弃用 --> 移除
+const lifeCycleOrder = [STAGE.experimental, STAGE.stable, STAGE.deprecated, STAGE.toBeRemoved]
+
 const alertTypeMap = {
-  [STAGE.removed]: 'error',
+  [STAGE.toBeRemoved]: 'error',
   [STAGE.deprecated]: 'error',
   [STAGE.experimental]: 'warning',
-  [STAGE.stable]: 'info'
+  [STAGE.stable]: 'success'
 }
 
 const tagTypeMap = {
-  [STAGE.removed]: 'danger',
+  [STAGE.toBeRemoved]: 'danger',
   [STAGE.deprecated]: 'danger',
   [STAGE.experimental]: 'warning',
-  [STAGE.stable]: 'info',
-  [STAGE.new]: 'primary'
+  [STAGE.stable]: 'success'
 }
 
 const cnDesMap = {
   [STAGE.experimental]: '处于测试阶段',
   [STAGE.stable]: '自 v{version} 起稳定提供',
   [STAGE.deprecated]: '从 v{version} 开始被废弃',
-  [STAGE.removed]: '于 v{version} 移除',
-  [STAGE.new]: '于 v{version} 新增'
+  [STAGE.toBeRemoved]: '于 v{version} 移除'
 }
 
 const enDesMap = {
   [STAGE.experimental]: 'in beta',
   [STAGE.stable]: 'stable since v{version}',
   [STAGE.deprecated]: 'deprecated since v{version}',
-  [STAGE.removed]: 'removed in v{version}',
-  [STAGE.new]: 'add in v{version}'
+  [STAGE.toBeRemoved]: 'toBeRemoved in v{version}'
 }
 
-// 默认的，只需要显示deprecated，experimental状态时的提示，除非声明了briefStage
+// 默认的，只需要显示deprecated，experimental状态时的提示
 export default defineComponent({
   components: {
     TinyTag,
@@ -90,7 +93,7 @@ export default defineComponent({
     TinyTooltip
   },
   props: {
-    metaData: {
+    meta: {
       type: Object as PropType<IVersionMetaData>,
       default: () => ({})
     },
@@ -102,76 +105,73 @@ export default defineComponent({
       type: String as PropType<'component' | 'api'>,
       default: 'component'
     },
-    stages: {
-      type: Array as PropType<STAGE[]>,
-      default: () => [STAGE.experimental, STAGE.deprecated, STAGE.removed, STAGE.new]
-    },
     alertType: {
       type: String
     },
     tagType: {
       type: String
     },
-    briefStage: {
-      type: Object as PropType<STAGE>
-    },
     tip: {
       type: Object as PropType<Ii18nString>
     },
     extendTip: {
       type: Object as PropType<Ii18nString>
+    },
+    isFromMenu: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
-    const isInStage = (stage: STAGE) => Boolean(props.metaData[stage]) && props.stages.includes(stage)
-
     const getVersion = (stage: STAGE) => {
-      if (!props.metaData[stage]) return ''
+      if (!props.meta[stage]) return ''
 
-      if (typeof props.metaData[stage] === 'string') {
-        return props.metaData[stage] as string
+      if (typeof props.meta[stage] === 'string') {
+        return props.meta[stage] as string
       } else {
-        return (props.metaData[stage] as IStageVersionMetaData).version
+        return (props.meta[stage] as IStageVersionMetaData).version
       }
     }
 
-    const currentStageComputed = computed(() => {
-      if (props.briefStage) {
-        return props.briefStage
-      }
+    const currentStageComputed = computed(() =>
+      lifeCycleOrder
+        .slice(0, -1)
+        .toReversed()
+        .find((stage) => Boolean(props.meta[stage]))
+    )
 
-      return [STAGE.removed, STAGE.deprecated, STAGE.stable, STAGE.experimental, STAGE.new].find(isInStage)
-    })
+    // 是否为稳定阶段
+    const isStableComputed = computed(() => currentStageComputed.value === STAGE.stable)
 
     const generateDes = (desMap: typeof cnDesMap) => {
-      // 当前stable之后，不显示experimental的描述
-      const isFilterExperimental = [STAGE.removed, STAGE.deprecated, STAGE.stable].includes(
-        currentStageComputed.value as STAGE
-      )
-      // 当前deprecated之后，不显示stable的描述
-      const isFilterStable = [STAGE.removed, STAGE.deprecated].includes(currentStageComputed.value as STAGE)
+      const currentStage = currentStageComputed.value
+      const deprecatedList = lifeCycleOrder.slice(2)
 
       const goingStages = Object.entries(desMap).filter(([stage]) => {
-        let isPicked = isInStage(stage as STAGE)
-
-        if (stage === STAGE.experimental) {
-          isPicked = isPicked && !isFilterExperimental
+        if (deprecatedList.includes(currentStage)) {
+          return deprecatedList.includes(stage)
+        } else {
+          return stage === currentStage
         }
-
-        if (stage === STAGE.stable) {
-          isPicked = isPicked && !isFilterStable
-        }
-
-        return isPicked
       })
 
       return goingStages.map(([stage, des]) => des.replace('{version}', getVersion(stage as STAGE))).join('，')
     }
 
+    const tagContentComputed = computed(() => {
+      const result = isStableComputed.value ? props.meta[currentStageComputed.value] : currentStageComputed.value
+      // 菜单上需要显示Beta标识，防止占用过多文字空间
+      if (props.isFromMenu && result === STAGE.experimental) {
+        return 'Beta'
+      } else {
+        return result
+      }
+    })
+
     const tipComputed = computed(() => {
       if (props.tip) return getWord(props.tip['zh-CN'], props.tip['en-US']) as string
 
-      if (!props.metaData) return ''
+      if (!props.meta) return ''
 
       const vertionDesZnCn = generateDes(cnDesMap)
       const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${
@@ -202,7 +202,9 @@ export default defineComponent({
       tipComputed,
       currentStageComputed,
       alertTypeComputed,
-      tagTypeComputed
+      tagTypeComputed,
+      tagContentComputed,
+      isStableComputed
     }
   }
 })
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index df0214ba7a..926d0b1b2b 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -1,19 +1,19 @@
 <template>
-  <div v-if="templateModeState.isSaas" class="ti-pt20 ti-pl48 ti-mb-36">
-    <span class="cmp-mode-title">文档类型： </span>
-    <tiny-button-group :data="optionsList" v-model="templateModeState.mode"></tiny-button-group>
-  </div>
   <!-- 一个组件的文档:  描述md + demos + apis -->
-  <header class="flex-horizontal docs-header">
+  <header :class="['flex-horizontal', 'docs-header', cmpId === 'loading' && 'docs-header-highlight']">
     <div class="docs-title-wrap">
       <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
       <version-tip
-        v-if="currJson.metaData || currJson.versionTipOption"
-        :meta-data="currJson.metaData"
+        v-if="currJson.meta || currJson.versionTipOption"
+        :meta="currJson.meta"
         v-bind="currJson.versionTipOption"
       >
       </version-tip>
     </div>
+    <div v-if="templateModeState.isSaas" class="ti-pt20 ti-pl48 ti-mb-36">
+      <span class="cmp-mode-title">文档类型： </span>
+      <tiny-button-group :data="optionsList" v-model="templateModeState.mode"></tiny-button-group>
+    </div>
     <span class="docs-header-spacer"></span>
   </header>
   <div class="docs-content">
@@ -54,8 +54,8 @@
                             <span v-else>{{ row.name }}</span>
                           </span>
                           <version-tip
-                            v-if="row.metaData || row.versionTipOption"
-                            :meta-data="row.metaData"
+                            v-if="row.meta || row.versionTipOption"
+                            :meta="row.meta"
                             v-bind="row.versionTipOption"
                             render-type="tag"
                             tip-subject="api"
@@ -84,14 +84,24 @@
                         :title="i18nByKey('defValue')"
                         :width="columnWidth[key][2]"
                       ></tiny-grid-column>
-                      <tiny-grid-column field="desc" :title="i18nByKey('desc')"></tiny-grid-column>
+                      <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                        <template #default="data">
+                          <span v-html="data.row.desc"></span>
+                        </template>
+                      </tiny-grid-column>
                     </tiny-grid>
                   </template>
                 </div>
               </div>
             </div>
           </div>
-          <tiny-tabs v-else v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
+          <tiny-tabs
+            v-else
+            v-model="activeTab"
+            ref="demoTabs"
+            :class="['docs-content-tabs', cmpId === 'loading' && 'docs-content-tabs-highlight']"
+            @click="onTabsClick"
+          >
             <tiny-tab-item :title="i18nByKey('demos')" name="demos">
               <!-- demos列表 -->
               <template v-if="currJson?.demos?.length">
@@ -103,6 +113,7 @@
                       :demo="demo"
                       :curr-demo-id="currDemoId"
                       class="mb32"
+                      @mounted="demoMounted"
                     />
                   </div>
                   <div v-else>
@@ -126,7 +137,7 @@
                 </template>
               </div>
             </tiny-tab-item>
-            <tiny-tab-item v-if="showApiTab && !isRunningTest" title="API" name="api">
+            <tiny-tab-item v-if="showApiTab && !isRunningTest && currJson.apis?.length" title="API" name="api">
               <!-- api文档 -->
               <div id="API" class="all-api-container">
                 <div class="ti-f-c ti-f-wrap api-list">
@@ -154,7 +165,11 @@
                         >
                           <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
                             <template #default="{ row }">
-                              <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
+                              <async-highlight
+                                v-if="row.code"
+                                :code="row.code.trim()"
+                                :types="chartCode ? 'html' : 'ts'"
+                              ></async-highlight>
                               <div v-if="row.depTypes">
                                 <async-highlight
                                   v-for="(k, i) in row.depTypes"
@@ -172,8 +187,8 @@
                                 <span v-else>{{ row.name }}</span>
                               </span>
                               <version-tip
-                                v-if="row.metaData || row.versionTipOption"
-                                :meta-data="row.metaData"
+                                v-if="row.meta || row.versionTipOption"
+                                :meta="row.meta"
                                 v-bind="row.versionTipOption"
                                 render-type="tag"
                                 tip-subject="api"
@@ -197,12 +212,16 @@
                             </template>
                           </tiny-grid-column>
                           <tiny-grid-column
-                            v-if="key === 'props'"
+                            v-if="key === 'props' || key === 'options'"
                             field="defaultValue"
                             :title="i18nByKey('defValue')"
                             :width="columnWidth[key][2]"
                           ></tiny-grid-column>
-                          <tiny-grid-column field="desc" :title="i18nByKey('desc')"></tiny-grid-column>
+                          <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                            <template #default="data">
+                              <span v-html="data.row.desc"></span>
+                            </template>
+                          </tiny-grid-column>
                         </tiny-grid>
                       </template>
                     </div>
@@ -240,6 +259,7 @@
 
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref, onUnmounted, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
 import { Anchor, ButtonGroup, Grid, GridColumn, Tabs, TabItem, Tooltip } from '@opentiny/vue'
@@ -271,6 +291,8 @@ export default defineComponent({
     const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
     const anchorRefreshKey = ref(0)
     const apiTableRef = ref()
+    const route = useRoute()
+
     const state = reactive({
       webDocPath: computed(() => ''),
       langKey: getWord('zh-CN', 'en-US'),
@@ -302,12 +324,13 @@ export default defineComponent({
       currAnchorLinks: computed(() => (state.activeTab === 'demos' ? state.demoAnchorLinks : state.apiAnchorLinks)),
       // 单demo显示时
       singleDemo: null,
-      activeTab: 'demos',
+      activeTab: route.hash === '#api' ? 'api' : 'demos',
       tableData: {},
       currApiTypes: [],
       showApiTab: computed(() => state.currApiTypes.length),
       columnWidth: {
         props: ['15%', '20%', '15%'],
+        options: ['15%', '20%', '15%'],
         events: ['15%', '25%', 0],
         methods: ['15%', '20%', 0],
         slots: ['15%', 0, 0],
@@ -321,12 +344,33 @@ export default defineComponent({
         activeMethod: (row) => row.typeAnchorName,
         showIcon: true // 配置是否显示展开图标
       },
-      contributors: [] // 贡献者
+      contributors: [], // 贡献者
+      chartCode: false
     })
 
     const { apiModeState } = useApiMode()
     const { templateModeState, staticPath, optionsList } = useTemplateMode()
 
+    let finishNum = 0
+    let isAllMounted = false
+    let demoMountedResolve
+    const demoMounted = () => {
+      finishNum++
+      if (finishNum === state.currJson.demos.length) {
+        isAllMounted = true
+        demoMountedResolve(true)
+      }
+    }
+
+    const allDemoMounted = async () => {
+      if (isAllMounted) {
+        return isAllMounted
+      }
+      return new Promise((resolve) => {
+        demoMountedResolve = resolve
+      })
+    }
+
     const getApiAnchorLinks = () => {
       if (!state.currJson.apis?.length) {
         return []
@@ -368,14 +412,14 @@ export default defineComponent({
         for (const apiType of Object.keys(apiGroup)) {
           if (Array.isArray(apiGroup[apiType]) && apiGroup[apiType].length) {
             const apiArr = apiGroup[apiType].map((i) => {
-              const { name, type, defaultValue, desc, demoId, typeAnchorName, linkTo, metaData, versionTipOption } = i
+              const { name, type, defaultValue, desc, demoId, typeAnchorName, linkTo, meta, versionTipOption } = i
               const item = {
                 name,
                 type,
                 defaultValue: defaultValue || '--',
                 desc: desc[state.langKey],
                 demoId,
-                metaData,
+                meta,
                 versionTipOption,
                 typeAnchorName: '',
                 linkTo
@@ -439,10 +483,7 @@ export default defineComponent({
           try {
             //  用户打开官网有时候会带一些特殊字符的hash，try catch一下防止js报错
             scrollTarget = document.querySelector(`#${hash}`)
-          } catch (err) {
-            // eslint-disable-next-line no-console
-            console.log('querySelector has special character:', err)
-          }
+          } catch (err) {}
           if (scrollTarget && !isRunningTest) {
             document.getElementById('doc-layout').scrollTo({
               top: scrollTarget.offsetTop,
@@ -451,7 +492,7 @@ export default defineComponent({
             })
           }
         }
-      }, 0)
+      }, 600)
     }
 
     // 在singleDemo情况时，才需要滚动示例区域到顶
@@ -481,6 +522,9 @@ export default defineComponent({
           `@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`
         )
       ]
+
+      state.chartCode = getWebdocPath(state.cmpId) === 'chart'
+
       // 兼容ts文档
       if (['interfaces', 'types', 'classes'].includes(state.cmpId)) {
         state.activeTab = 'apis'
@@ -558,11 +602,9 @@ export default defineComponent({
 
           // F5刷新加载时，跳到当前示例
           // 应当在所有demo渲染完毕后在滚动，否则滚动完位置后，demo渲染会使滚动位置错位
-          setTimeout(() => {
-            nextTick(() => {
-              scrollByHash(hash)
-            })
-          }, 0)
+          return allDemoMounted().then(() => {
+            scrollByHash(hash)
+          })
         })
         .finally(() => {
           // 获取组件贡献者
@@ -605,10 +647,12 @@ export default defineComponent({
     }
 
     const fn = {
+      demoMounted,
       copyText: (text) => {
         navigator.clipboard.writeText(text)
       },
-      onTabsClick: () => {
+      onTabsClick: (data) => {
+        router.push(`#${data.name}`)
         scrollToLayoutTop()
       },
       // 点击 api区域的 name列时
@@ -667,6 +711,8 @@ export default defineComponent({
           state.currJson = {}
         } else {
           loadPage()
+          // 切换组件时tabs激活页变成demos
+          state.activeTab = 'demos'
           // 每次切换组件都需要让锚点组件重新刷新
           anchorRefreshKey.value++
         }
@@ -723,9 +769,13 @@ export default defineComponent({
   position: sticky;
   top: 0;
   z-index: var(--docs-header-zindex);
-  padding: var(--ti-common-space-4x) var(--ti-common-space-10x);
+  padding: 16px 40px;
   background-color: #fff;
-  box-shadow: var(--ti-common-space-3x) 0 var(--ti-common-space-5x) var(--ti-common-space-6) rgba(0, 0, 0, 0.06);
+  box-shadow: 12px 0 20px 6px rgba(0, 0, 0, 0.06);
+
+  &.docs-header-highlight {
+    z-index: var(--docs-header-zindex-highlight);
+  }
 
   .docs-title-wrap {
     flex: 1;
@@ -736,13 +786,13 @@ export default defineComponent({
 
   .markdown-top-body {
     z-index: var(--docs-markdown-top-body-zindex);
-    font-size: var(--ti-common-font-size-1);
+    font-size: 14px;
     transition: all ease-in-out 0.3s;
 
     :deep(h1) {
       margin: 0;
       padding: 0;
-      font-size: var(--ti-common-font-size-5);
+      font-size: 24px;
       line-height: 40px;
     }
   }
@@ -758,7 +808,7 @@ export default defineComponent({
 }
 
 .docs-content {
-  margin: var(--ti-common-space-4x) 0 120px;
+  margin: 16px 0 120px;
   transition: all ease-in-out 0.3s;
 
   .docs-tabs-wrap {
@@ -766,14 +816,18 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     min-width: 680px;
-    padding: 0 var(--ti-common-space-10x);
+    padding: 0 40px;
   }
 
   .docs-content-tabs {
-    --ti-tabs-heigh: 48px;
-    --ti-tabs-item-font-size: var(--ti-common-font-size-3);
-    --ti-tabs-header-font-active-text-color: #2f5bea;
-    --ti-tabs-item-active-border-color: #2f5bea;
+    --tv-Tabs-heigh: 48px;
+    --tv-Tabs-item-font-size: 18px;
+    --tv-Tabs-header-font-active-text-color: #2f5bea;
+    --tv-Tabs-item-active-border-color: #2f5bea;
+
+    &.docs-content-tabs-highlight :deep(.tiny-tabs__header) {
+      z-index: var(--docs-layout-sider-zindex-highlight);
+    }
 
     flex: 1;
     transition: all ease-in-out 0.3s;
@@ -793,7 +847,7 @@ export default defineComponent({
         left: 0;
         display: block;
         width: 100%;
-        height: var(--ti-common-size-4x);
+        height: 16px;
         background: linear-gradient(to bottom, #fff, transparent);
         transform: translateY(100%);
       }
@@ -812,9 +866,6 @@ export default defineComponent({
 }
 
 .api-table {
-  --ti-grid-font-size: var(--ti-common-font-size-1);
-  --ti-grid-default-header-column-height: var(--ti-common-size-10x);
-
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
@@ -837,11 +888,20 @@ export default defineComponent({
   }
 
   :deep(.api-table-expand-col) {
-    padding-left: var(--ti-common-space-4x);
+    padding-left: 16px;
   }
 
   :deep(.tiny-grid-body__expanded-cell) {
-    background-color: var(--ti-common-color-bg-gray);
+    background-color: #fafafa;
+  }
+
+  :deep(code) {
+    color: #476582;
+    padding: 4px 8px;
+    margin: 0 4px;
+    font-size: 0.85em;
+    background-color: rgba(27, 31, 35, 0.05);
+    border-radius: 3px;
   }
 }
 
@@ -855,7 +915,7 @@ export default defineComponent({
   flex: none;
   width: 200px;
   height: calc(100vh - 280px);
-  padding-top: var(--ti-common-space-4x);
+  padding-top: 16px;
 
   .tiny-anchor__dot {
     max-height: calc(100vh - 300px);
@@ -898,19 +958,19 @@ export default defineComponent({
 .all-demos-container,
 .all-api-container {
   flex: 1;
-  padding-top: var(--ti-common-space-8x);
+  padding-top: 32px;
   scroll-behavior: smooth;
 }
 
 .all-api-container {
-  padding-top: var(--ti-common-space-3x);
+  padding-top: 12px;
 }
 
 .flex-horizontal {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  column-gap: var(--ti-common-space-4x);
+  column-gap: 16px;
 }
 
 .cmp-container {
@@ -929,7 +989,6 @@ export default defineComponent({
   }
 
   :deep(.tiny-anchor-link) {
-    margin-bottom: 10px;
     font-size: 12px;
 
     a {
@@ -945,8 +1004,8 @@ export default defineComponent({
   margin-top: 48px;
 
   .cmp-contributor-title {
-    margin-bottom: var(--ti-common-size-8x);
-    font-size: var(--ti-common-font-size-4);
+    margin-bottom: 32px;
+    font-size: 20px;
     font-weight: Semibold;
     color: #191919;
   }
@@ -954,8 +1013,8 @@ export default defineComponent({
   .cmp-contributor-item {
     width: 42px;
     height: 42px;
-    margin-right: var(--ti-common-space-3x);
-    margin-bottom: var(--ti-common-space-5x);
+    margin-right: 12px;
+    margin-bottom: 20px;
     display: inline-block;
     border-radius: 50%;
     overflow: hidden;
@@ -972,7 +1031,7 @@ export default defineComponent({
   }
 
   .cmp-contributor-tip {
-    font-size: var(--ti-common-font-size-1);
+    font-size: 14px;
     color: #191919;
   }
 }