@opentiny/vue-docs 3.19.4 → 3.19.6

package/demos/pc/app/form/form-validate-field.vue

@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

package/demos/pc/app/form/form-validation-composition-api.vue

@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,18 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

package/demos/pc/app/form/form-validation.spec.ts

@@ -27,7 +27,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   const requiredTip = page.getByRole('tooltip', { name: '必填' })
 
   // 对长度有要求的检验
-  const firstInput = formItem.first().locator('input')
+  const firstInput = formItem.nth(2).locator('input')
   await firstInput.click()
   await firstInput.blur()
   await expect(requiredTip.first()).toBeVisible()
@@ -48,7 +48,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
 
   // url输入框
-  const urlInput = formItem.nth(2).locator('input')
+  const urlInput = formItem.nth(4).locator('input')
   const validUrl = 'https://test.com'
   urlInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
@@ -56,7 +56,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
 
   // email输入框
-  const emailInput = formItem.nth(4).locator('input')
+  const emailInput = formItem.nth(5).locator('input')
   const validEmail = '111@test.com'
   emailInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()

package/demos/pc/app/form/form-validation.vue

@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,19 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
+
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

package/demos/pc/app/form/size-composition-api.vue

@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">

package/demos/pc/app/form/size.vue

@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">

package/demos/pc/app/form/validate-debounce-composition-api.vue

@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

package/demos/pc/app/form/validate-debounce.vue

@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>

package/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue

@@ -86,7 +86,7 @@ function getPopEditorOp() {
         {
           field: 'id',
           title: 'ID',
-          width: 40
+          width: 60
         },
         {
           field: 'name',

package/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue

@@ -89,7 +89,7 @@ export default {
             {
               field: 'id',
               title: 'ID',
-              width: 40
+              width: 60
             },
             {
               field: 'name',

package/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />

package/demos/pc/app/grid/empty/empty-data-tip.vue

@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />

package/demos/pc/app/grid/operation-column/selection-config-composition-api.vue

@@ -5,7 +5,6 @@
       ref="gridRef"
       :select-config="selectConfig"
       highlight-current-row
-      border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>

package/demos/pc/app/grid/webdoc/grid-editor.js

@@ -10,7 +10,7 @@ export default {
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">特别说明：</p>
-          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
+          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非TinyVue组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,
         'en-US':
@@ -44,7 +44,7 @@ export default {
     {
       'demoId': 'editor-popeditor-in-grid-remote-search',
       'name': {
-        'zh-CN': 'Popeditor 弹窗编辑',
+        'zh-CN': '弹窗编辑',
         'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
       },
       'desc': {

package/demos/pc/app/hrapprover/basic-usage-composition-api.vue

@@ -2,6 +2,7 @@
   <div class="demo-hrapprover-class">
     <tiny-hrapprover
       v-model="value"
+      title="选择权签人"
       :approval-person="person"
       @update:approvalPerson="person = $event"
     ></tiny-hrapprover>

package/demos/pc/app/hrapprover/basic-usage.vue

@@ -2,6 +2,7 @@
   <div class="demo-hrapprover-class">
     <tiny-hrapprover
       v-model="value"
+      title="选择权签人"
       :approval-person="person"
       @update:approvalPerson="person = $event"
     ></tiny-hrapprover>

package/demos/pc/app/hrapprover/category-type-composition-api.vue

@@ -4,6 +4,7 @@
       v-model="value"
       :approval-person="person"
       @update:approvalPerson="person = $event"
+      title="选择权签人"
       category="0506"
     ></tiny-hrapprover>
   </div>

package/demos/pc/app/hrapprover/category-type.vue

@@ -3,6 +3,7 @@
     <tiny-hrapprover
       v-model="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       category="0506"
     ></tiny-hrapprover>

package/demos/pc/app/hrapprover/custom-service-composition-api.vue

@@ -6,6 +6,7 @@
       @update:approvalPerson="person = $event"
       :fetch-hrapprover="getFetchHrapprover"
       :category="category"
+      title="选择权签人"
     ></tiny-hrapprover>
   </div>
 </template>

package/demos/pc/app/hrapprover/custom-service.vue

@@ -6,6 +6,7 @@
       @update:approvalPerson="person = $event"
       :fetch-hrapprover="getFetchHrapprover"
       :category="category"
+      title="选择权签人"
     ></tiny-hrapprover>
   </div>
 </template>

package/demos/pc/app/hrapprover/disabled-composition-api.vue

@@ -4,6 +4,7 @@
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>

package/demos/pc/app/hrapprover/disabled.vue

@@ -4,6 +4,7 @@
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.4",
+  "version": "3.19.6",
   "license": "MIT",
   "dependencies": {
     "@opentiny/vue-repl": "^1.1.2",
@@ -18,17 +18,17 @@
     "vue-router": "4.1.5",
     "@opentiny/vue": "~3.19.0",
     "@opentiny/vue-common": "~3.19.0",
-    "@opentiny/vue-design-saas": "~3.19.0",
-    "@opentiny/vue-directive": "~3.19.0",
-    "@opentiny/vue-hooks": "~3.19.0",
+    "@opentiny/vue-icon-saas": "~3.19.0",
     "@opentiny/vue-design-aurora": "~3.19.0",
-    "@opentiny/vue-icon": "~3.19.0",
     "@opentiny/vue-icon-multicolor": "~3.19.0",
-    "@opentiny/vue-icon-saas": "~3.19.0",
-    "@opentiny/vue-theme": "~3.19.4",
+    "@opentiny/vue-hooks": "~3.19.0",
+    "@opentiny/vue-design-saas": "~3.19.0",
+    "@opentiny/vue-icon": "~3.19.0",
+    "@opentiny/vue-directive": "~3.19.0",
+    "@opentiny/vue-theme": "~3.19.5",
     "@opentiny/vue-theme-mobile": "~3.19.0",
-    "@opentiny/vue-theme-saas": "~3.19.0",
-    "@opentiny/vue-vite-import": "~1.2.0"
+    "@opentiny/vue-vite-import": "~1.2.0",
+    "@opentiny/vue-theme-saas": "~3.19.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.42.0",

package/playground/App.vue

@@ -1,23 +1,18 @@
-<script setup>
+<script setup lang="jsx">
 import { onMounted, reactive, nextTick } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import {
-  ButtonGroup as TinyButtonGroup,
-  Select as TinySelect,
-  Option as TinyOption,
-  Switch as TinySwitch,
-  Notify
-} from '@opentiny/vue'
+import { TinyButtonGroup, TinyButton, TinySelect, TinyOption, TinySwitch, Notify } from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components/cmp-config'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.16'
+const VERSION = 'tiny-vue-version-3.19'
+const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,40 +23,57 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.19', '3.18', '3.17', '3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
-const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
+const versions = ['3.19', '3.18', '3.17']
+const getVersion = () => {
+  if (isPreview) {
+    return versions[0]
+  }
+  if (versions.includes(localStorage.getItem(VERSION))) {
+    localStorage.getItem(VERSION)
+  }
+  return versions[0]
+}
+const latestVersion = getVersion()
 const cdnHost = localStorage.getItem('setting-cdn')
 
 const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
 const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
 
-const isOldVersion = (version) => {
-  const minorVersion = version?.split('.')?.[1]
-  return minorVersion && minorVersion < 16
-}
-
-// 3.16.0版本之前的runtime还没有抽离单独的包
-const getRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${cdnHost}/@opentiny/vue${versionDelimiter}${version}/${fileDelimiter}runtime/`
+let notify
+const showNotify = () => {
+  if (localStorage.getItem(NOTIFY_KEY) !== 'true' && !notify) {
+    const muteNotify = () => {
+      notify.close()
+      localStorage.setItem(NOTIFY_KEY, true)
+    }
+    notify = Notify({
+      type: 'info',
+      title: '温馨提示：',
+      message: () => (
+        <div>
+          <div>演练场仅保留最新的三个版本可选。</div>
+          <div style="text-align: right;margin-top: 12px;">
+            <TinyButton onClick={muteNotify} type={'primary'}>
+              不再提示
+            </TinyButton>
+          </div>
+        </div>
+      ),
+      duration: -1,
+      position: 'top-right',
+      verticalOffset: 200
+    })
   }
-  return `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
 }
 
-// 3.16.0版本之前的runtime没有tiny-vue-pc.mjs文件
-const getPcRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${getRuntime(version)}tiny-vue.mjs`
-  }
-  return `${getRuntime(version)}tiny-vue-pc.mjs`
-}
+const getRuntime = (version) => `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
 
 const createImportMap = (version) => {
   const imports = {
     'vue': `${cdnHost}/vue${versionDelimiter}3.4.27/${fileDelimiter}dist/vue.runtime.esm-browser.js`,
     'echarts': `${cdnHost}/echarts${versionDelimiter}5.4.1/${fileDelimiter}dist/echarts.esm.js`,
     '@vue/compiler-sfc': `${cdnHost}/@vue/compiler-sfc${versionDelimiter}3.4.27/${fileDelimiter}dist/compiler-sfc.esm-browser.js`,
-    '@opentiny/vue': getPcRuntime(version),
+    '@opentiny/vue': `${getRuntime(version)}tiny-vue-pc.mjs`,
     '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
@@ -72,8 +84,9 @@ const createImportMap = (version) => {
     'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
   if (['aurora', 'saas'].includes(tinyTheme)) {
-    imports[`@opentiny/vue-design-${tinyTheme}`] =
-      `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
+    imports[
+      `@opentiny/vue-design-${tinyTheme}`
+    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
   if (isSaas) {
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
@@ -275,9 +288,9 @@ function share() {
 
 <template>
   <div class="header">
-    <div class="title"><img class="logo" :src="logoUrl" /> <span>OpenTiny Vue 演练场</span></div>
+    <div class="title"><img class="logo" :src="logoUrl" /> <span class="mobile-hide">OpenTiny Vue 演练场</span></div>
     <div>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局方向:
         <tiny-button-group
           :data="state.layoutOptions"
@@ -285,13 +298,19 @@ function share() {
           @change="changeLayout"
         ></tiny-button-group>
       </span>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局反转:
         <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
-        OpenTiny Vue 版本:
-        <tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px" :disabled="isPreview">
+        <span class="mobile-hide">OpenTiny Vue 版本: </span>
+        <tiny-select
+          v-model="state.selectVersion"
+          style="width: 150px"
+          :disabled="isPreview"
+          @change="selectVersion"
+          @click="showNotify"
+        >
           <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
@@ -317,6 +336,12 @@ function share() {
   box-sizing: border-box;
 }
 
+/** 小屏幕时隐藏 */
+@media screen and (max-width: 640px) {
+  .mobile-hide {
+    display: none;
+  }
+}
 #header {
   display: none;
 }

package/src/views/components/components.vue

@@ -16,7 +16,7 @@
     </div>
     <span class="docs-header-spacer"></span>
   </header>
-  <div class="docs-content">
+  <div class="docs-content" id="doc-layout-scoller">
     <div class="ti-fi-1 ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
@@ -241,7 +241,7 @@
             :is-affix="anchorAffix"
             type="dot"
             mask-class="custom-active-anchor"
-            container-id="#doc-layout"
+            container-id="#doc-layout-scoller"
             @link-click="handleAnchorClick"
           >
           </tiny-anchor>
@@ -254,8 +254,8 @@
         {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
       </div>
     </div>
+    <div id="footer"></div>
   </div>
-  <div id="footer"></div>
 </template>
 
 <script lang="jsx">
@@ -473,7 +473,7 @@ export default defineComponent({
     const scrollByHash = (hash) => {
       setTimeout(() => {
         if (!hash) {
-          document.getElementById('doc-layout').scrollTo({
+          document.getElementById('doc-layout-scoller').scrollTo({
             top: 0,
             left: 0
           })
@@ -486,7 +486,7 @@ export default defineComponent({
             scrollTarget = document.querySelector(`#${hash}`)
           } catch (err) {}
           if (scrollTarget && !isRunningTest) {
-            document.getElementById('doc-layout').scrollTo({
+            document.getElementById('doc-layout-scoller').scrollTo({
               top: scrollTarget.offsetTop,
               left: 0,
               behavior: 'smooth'
@@ -501,7 +501,7 @@ export default defineComponent({
       let hash = router.currentRoute.value.hash?.slice(1)
       if (hash !== 'API') {
         setTimeout(() => {
-          document.getElementById('doc-layout').scrollTo({
+          document.getElementById('doc-layout-scoller').scrollTo({
             top: 0,
             left: 0,
             behavior: 'smooth'
@@ -622,18 +622,18 @@ export default defineComponent({
     }
 
     const onDocLayoutScroll = debounce(100, false, () => {
-      const docLayout = document.getElementById('doc-layout')
+      const docLayout = document.getElementById('doc-layout-scoller')
       const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
       const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
       const footerHeight = document.getElementById('footer')?.clientHeight || 0
       const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
-      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout视口下隐藏的部分高度
+      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout-scoller视口下隐藏的部分高度
       state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
     })
 
     const setScrollListener = () => {
       nextTick(() => {
-        const docLayout = document.getElementById('doc-layout')
+        const docLayout = document.getElementById('doc-layout-scoller')
         if (docLayout) {
           docLayout.addEventListener('scroll', onDocLayoutScroll)
         }
@@ -641,7 +641,7 @@ export default defineComponent({
     }
 
     const removeScrollListener = () => {
-      const docLayout = document.getElementById('doc-layout')
+      const docLayout = document.getElementById('doc-layout-scoller')
       if (docLayout) {
         docLayout.removeEventListener('scroll', onDocLayoutScroll)
       }
@@ -809,14 +809,15 @@ export default defineComponent({
 }
 
 .docs-content {
-  margin: 16px 0 120px;
+  flex: 1;
+  overflow: hidden auto;
+  padding: 16px 0 0;
   transition: all ease-in-out 0.3s;
 
   .docs-tabs-wrap {
     flex: 1;
     display: flex;
     justify-content: center;
-    min-width: 680px;
     padding: 0 40px;
   }
 
@@ -837,7 +838,6 @@ export default defineComponent({
 
     :deep(> .tiny-tabs__header) {
       position: sticky;
-      top: 90px;
       z-index: var(--docs-tabs-header-zindex);
       background-color: #fff;