@opentiny/vue-docs 3.18.4 → 3.18.7

package/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'

package/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: ''

package/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'
           }
         }

package/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': '当分组的展开和收起时会触发该事件',

package/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': '只读状态下，文本超出是否悬浮提示',

package/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',

package/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'

package/demos/pc/app/modal/footer-slot-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <tiny-button @click="visible = !visible" :reset-time="0">自定义底部</tiny-button>
-    <tiny-modal v-model="visible" show-footer>
+    <tiny-modal v-model="visible" footer-dragable show-footer>
       <template #footer>
         <tiny-button>自定义底部信息</tiny-button>
       </template>

package/demos/pc/app/modal/footer-slot.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <tiny-button @click="visible = !visible" :reset-time="0">自定义底部</tiny-button>
-    <tiny-modal v-model="visible" show-footer>
+    <tiny-modal v-model="visible" footer-dragable show-footer>
       <template #footer>
         <tiny-button>自定义底部信息</tiny-button>
       </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.18.4",
+  "version": "3.18.7",
   "license": "MIT",
   "dependencies": {
     "@opentiny/vue-repl": "^1.1.2",
@@ -16,17 +16,17 @@
     "vue": "^3.4.31",
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
+    "@opentiny/vue-design-aurora": "~3.18.0",
     "@opentiny/vue": "~3.18.0",
+    "@opentiny/vue-icon-saas": "~3.18.0",
     "@opentiny/vue-design-saas": "~3.18.0",
     "@opentiny/vue-common": "~3.18.0",
     "@opentiny/vue-directive": "~3.18.0",
     "@opentiny/vue-icon": "~3.18.0",
-    "@opentiny/vue-design-aurora": "~3.18.0",
-    "@opentiny/vue-icon-saas": "~3.18.0",
+    "@opentiny/vue-theme": "~3.18.4",
     "@opentiny/vue-design-smb": "~3.18.0",
-    "@opentiny/vue-theme-mobile": "~3.18.0",
-    "@opentiny/vue-theme": "~3.18.1",
     "@opentiny/vue-theme-saas": "~3.18.0",
+    "@opentiny/vue-theme-mobile": "~3.18.0",
     "@opentiny/vue-vite-import": "~1.2.0"
   },
   "devDependencies": {

package/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
     }
   }
 })

package/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,
@@ -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'
@@ -557,7 +601,10 @@ export default defineComponent({
           }
 
           // F5刷新加载时，跳到当前示例
-          scrollByHash(hash)
+          // 应当在所有demo渲染完毕后在滚动，否则滚动完位置后，demo渲染会使滚动位置错位
+          return allDemoMounted().then(() => {
+            scrollByHash(hash)
+          })
         })
         .finally(() => {
           // 获取组件贡献者
@@ -600,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列时
@@ -645,11 +694,12 @@ export default defineComponent({
           router.push(data.link)
         } else if (apiModeState.demoMode === 'default' && data.link.startsWith('#')) {
           // 多示例模式，自动会切到相应的位置。只需要记录singleDemo就好了
+          e.preventDefault()
           const hash = data.link.slice(1)
           state.currDemoId = hash
           state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
-
-          e.preventDefault()
+          router.push(data.link)
+          scrollByHash(hash)
         }
       }
     }
@@ -661,6 +711,8 @@ export default defineComponent({
           state.currJson = {}
         } else {
           loadPage()
+          // 切换组件时tabs激活页变成demos
+          state.activeTab = 'demos'
           // 每次切换组件都需要让锚点组件重新刷新
           anchorRefreshKey.value++
         }
@@ -717,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;
@@ -730,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;
     }
   }
@@ -752,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 {
@@ -760,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;
@@ -787,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%);
       }
@@ -806,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;
@@ -831,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;
   }
 }
 
@@ -849,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);
@@ -892,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 {
@@ -923,7 +989,6 @@ export default defineComponent({
   }
 
   :deep(.tiny-anchor-link) {
-    margin-bottom: 10px;
     font-size: 12px;
 
     a {
@@ -939,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;
   }
@@ -948,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;
@@ -966,7 +1031,7 @@ export default defineComponent({
   }
 
   .cmp-contributor-tip {
-    font-size: var(--ti-common-font-size-1);
+    font-size: 14px;
     color: #191919;
   }
 }