@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/watermark/webdoc/watermark.js

@@ -25,10 +25,10 @@ export default {
     {
       'name': 'watermark',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'width',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '120',
           'desc': {
             'zh-CN': '水印的宽度, 最小宽度120',
@@ -38,7 +38,7 @@ export default {
         },
         {
           'name': 'height',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '64',
           'desc': {
             'zh-CN': '水印的高度, 最小高度64',
@@ -48,7 +48,7 @@ export default {
         },
         {
           'name': 'rotate',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '-22',
           'desc': {
             'zh-CN': '水印绘制时，旋转的角度，单位 °',
@@ -58,7 +58,7 @@ export default {
         },
         {
           'name': 'zIndex',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '9',
           'desc': {
             'zh-CN': '追加的水印元素的 `z-index `',
@@ -68,7 +68,7 @@ export default {
         },
         {
           'name': 'image',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式),此属性高于content',
@@ -78,7 +78,7 @@ export default {
         },
         {
           'name': 'content',
-          'type': 'String | String[]',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '水印文字内容，此属性低于image',
@@ -88,7 +88,7 @@ export default {
         },
         {
           'name': 'font',
-          'type': 'Font',
+          'type': 'object',
           'defaultValue': '',
           'desc': {
             'zh-CN': `文字样式,可配置字段如下{
@@ -104,7 +104,7 @@ export default {
         },
         {
           'name': 'gap',
-          'type': '[Number, Number] ',
+          'type': 'array',
           'defaultValue': '[100, 100]',
           'desc': {
             'zh-CN': '水印之间的间距',
@@ -114,7 +114,7 @@ export default {
         },
         {
           'name': 'offset',
-          'type': '[Number, Number] ',
+          'type': 'array',
           'defaultValue': '[20, 20] ',
           'desc': {
             'zh-CN': '水印距离容器左上角的偏移量，默认为`20 `',
@@ -124,7 +124,7 @@ export default {
         },
         {
           'name': 'interlaced',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '水印是否交错',

package/demos/pc/menus.js

@@ -244,7 +244,15 @@ export const cmpMenus = [
         }
       },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
-      { 'nameCn': '表头详情栏', 'name': 'DetailPage', 'key': 'detail-page' },
+      {
+        'nameCn': '表头详情栏',
+        'name': 'DetailPage',
+        'key': 'detail-page',
+        'mark': {
+          'type': 'danger',
+          'text': 'Del'
+        }
+      },
       { 'nameCn': '图片预览', 'name': 'Image', 'key': 'image' },
       { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
       { 'nameCn': '文字滚动', 'name': 'ScrollText', 'key': 'scroll-text' },

package/demos/pc/webdoc/import-components.md

@@ -68,16 +68,14 @@ export default {
     )
   ],
   define: {
-    'process.env': Object.assign({}, process.env)
+    'process.env': { ...process.env }
   }
 }
 ```
 
 #### 温馨提示：
 
-在 `pnpm` 工程使用该插件时需要在 `package.json` 文件中逐个声明用到的每一个 `TinyVue` 组件依赖，因为 `pnpm` 特点就是用到的依赖就需要提前声明，防止幽灵依赖。
-
-依赖声明可以参考一下配置
+因为 `pnpm` 工程的特点之一是：项目中显示引入的依赖需要提前在 `package.json` 中声明（防止幽灵依赖），所以在 `pnpm` 工程使用该插件时需要在 `package.json` 中声明项目用到的每一个 `TinyVue` 组件依赖（`TinyVue` 每个组件都是一个 `npm` 包）。依赖声明可以参考以下配置：
 
 ```json
 {

package/demos/pc/webdoc/installation-en.md

@@ -34,7 +34,7 @@ npm install @opentiny/vue@2
 If it's`Vite`After the dependency is installed, modify the project.`vite.config.js`, add the following code highlighted section:
 
 ```js {8-10}
-//vite.config.js
+// vite.config.js
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -52,6 +52,11 @@ export default defineConfig({
 <p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
 For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
 </div>
+<div class="tip custom-block">
+<br>
+<p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+</div>
+
 ### Import through CDN
 
 In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN,you are advised to write two valid version numbers as follows.

package/demos/pc/webdoc/installation.md

@@ -52,6 +52,10 @@ export default defineConfig({
   <p>为了避免<code> @opentiny/vue </code> 的月度版本(minor)升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
     比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
 </div>
+<div class="tip custom-block">
+  <br>
+  <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { ...process.env,TINY_MODE:'pc' }</code>。</p>
+</div>
 
 ### 通过 CDN 方式引入
 

package/demos/pc/webdoc/theme-en.md

@@ -96,10 +96,10 @@ If you want to control the `css` variable through `js`, you can do this:
 ```js
 const el = document.documentElement
 
-//Obtain the CSS variable.
+// Obtain the CSS variable.
 getComputedStyle(el).getPropertyValue('--ti-base-color-white')
 
-//Set the CSS variable.
+// Set the CSS variable.
 el.style.setProperty('--ti-base-color-white', '#fefefe')
 ```
 
@@ -115,11 +115,15 @@ Replace all the old variable names in the `src` directory in the project as an e
 
 Step 1: Click to download the mapping table `newVars.json` and the replacement script `replaceVar.js`.
 
-<a :href="$pub('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="$pub('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
+<script setup>
+  import { pubUrl } from '@/tools'
+</script>
+
+<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json files</a> and <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js files</a>
 
 Step 2: Place `newVars.json` and `replaceVar.js` in the root directory of the project, which is at the same level as the src directory.
 
-<img src="@demos/resource/theme-demo.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
+<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
 
 Step 3: Run the following command in the root directory of the project:
 

package/demos/pc/webdoc/theme.md

@@ -47,7 +47,10 @@ resolve: {
 
 ```js
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { tinySmbTheme } from '@opentiny/vue-theme/theme' // 导入主题
+
+import { tinySmbTheme } from '@opentiny/vue-theme/theme'
+
+// 导入主题
 
 new TinyThemeTool(tinySmbTheme, 'tinyStyleSheetId') // 初始化主题
 ```
@@ -162,11 +165,15 @@ el.style.setProperty('--ti-base-color-white', '#fefefe')
 
 步骤一、点击下载新旧变量的映射表`newVars.json`和替换脚本`replaceVar.js`
 
-<a :href="$pub('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json 文件</a> 和 <a :href="$pub('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js 文件</a>
+<script setup>
+  import { pubUrl } from '@/tools'
+</script>
+
+<a :href="pubUrl('@demos/resource/newVars.json')" target="_blank" download="newVars.json">newVars.json 文件</a> 和 <a :href="pubUrl('@demos/resource/replaceVar.js')" target="_blank" download="replaceVar.js">replaceVar.js 文件</a>
 
 步骤二、将 `newVars.json` 和 `replaceVar.js` 放到项目根目录下，与 src 目录同级；
 
-<img src="@demos/resource/theme-demo.png" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
+<img :src="pubUrl('@demos/resource/theme-demo.png')" class="image" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); width: 30vw" ><br><br>
 
 步骤三、在项目根目录下，执行以下命令进行替换；
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -17,15 +17,15 @@
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.12.0",
-    "@opentiny/vue-theme-mobile": "~3.12.0",
     "@opentiny/vue-common": "~3.12.0",
     "@opentiny/vue-icon": "~3.12.0",
+    "@opentiny/vue-icon-saas": "~3.12.0",
     "@opentiny/vue-design-smb": "~3.12.0",
     "@opentiny/vue-design-aurora": "~3.12.0",
-    "@opentiny/vue-icon-saas": "~3.12.0",
-    "@opentiny/vue-vite-import": "~1.1.5",
+    "@opentiny/vue-theme-mobile": "~3.12.0",
+    "@opentiny/vue-theme": "~3.12.1",
     "@opentiny/vue-theme-saas": "~3.12.0",
-    "@opentiny/vue-theme": "~3.12.0"
+    "@opentiny/vue-vite-import": "~1.1.5"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
     <script>
-      const cdnHost = 'https://unpkg.com'
+      const cdnHost = 'https://npm.onmicrosoft.cn'
       window.localStorage.setItem('setting-cdn', cdnHost)
     </script>
   </head>

package/src/App.vue

@@ -16,7 +16,6 @@ import { ConfigProvider, Modal } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
-import { useBulletin } from './tools/useBulletin.jsx'
 
 export default defineComponent({
   name: 'AppVue',
@@ -43,7 +42,6 @@ export default defineComponent({
       common.renderHeader()
     })
     const { designConfig } = useTheme()
-    useBulletin()
 
     provide('showPreview', (url) => {
       previewUrl.value = url

package/src/i18n/index.js

@@ -20,7 +20,7 @@ const i18n = initI18n({
   },
   messages
 })
-const $t = i18n.global.t
-const $t2 = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
+const i18nByKey = i18n.global.t
+const getWord = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
 
-export { i18n, $t, $t2 }
+export { i18n, i18nByKey, getWord }

package/src/main.js

@@ -21,8 +21,7 @@ import './assets/custom-block.less'
 import { i18n } from './i18n/index'
 import { router } from './router'
 import App from './App.vue'
-import { $t, $t2 } from './i18n'
-import { $pub, appData } from './tools'
+import { appData } from './tools'
 import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP } from './const'
 import demoConfig from '@demos/config.js'
 
@@ -62,11 +61,7 @@ if (import.meta.env.VITE_TINY_THEME === 'saas') {
   import('./tailwind.css')
 }
 
-app
-  .use(router)
-  .use(i18n)
-  .use(createHead()) // 支持md修改title
-  .mixin({ methods: { $t, $t2, $pub } })
+app.use(router).use(i18n).use(createHead()) // 支持md修改title
 
 if (typeof demoConfig.initApp === 'function') {
   demoConfig.initApp(app)

package/src/menus.jsx

@@ -1,6 +1,6 @@
 import { docMenus, cmpMenus } from '@menu/menus.js'
 
-import { appData, $t2 } from './tools'
+import { appData } from './tools'
 
 /**
  * 聚合doc  / cmp 两个页面的所有菜单.

package/src/tools/useApiMode.js

@@ -4,8 +4,8 @@ import { $local } from './storage'
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
-  apiMode: $local[_modeKey] || 'Options',
-  demoMode: $local[_demoModeKey] || 'single' // 示例展示： default:多示例， single:单示例
+  apiMode: $local[_modeKey] || 'Composition',
+  demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })
 
 const apiModeFn = {

package/src/tools/utils.js

@@ -27,7 +27,7 @@ const $delay = (time) => new Promise((resolve) => setTimeout(resolve, time))
  */
 const $idle = () => new Promise((resolve) => (window.requestIdleCallback || window.requestAnimationFrame)(resolve))
 
-const $pub = (url) => {
+const pubUrl = (url) => {
   return baseUrl + url
 }
 
@@ -80,4 +80,4 @@ const fetchDemosFile = (path) => {
   })
 }
 
-export { $clone, $split, $delay, $idle, $pub, fetchDemosFile }
+export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile }

package/src/views/components/VersionTip.vue

@@ -25,7 +25,7 @@
 import type { PropType } from 'vue'
 import { defineComponent, computed } from 'vue'
 import { Tag as TinyTag, Alert as TinyAlert, Tooltip as TinyTooltip } from '@opentiny/vue'
-import { $t2 } from '../../i18n/index'
+import { getWord } from '../../i18n/index'
 
 enum STAGE {
   experimental = 'experimental',
@@ -140,9 +140,11 @@ export default defineComponent({
     })
 
     const generateDes = (desMap: typeof cnDesMap) => {
-      // 当前stable之后，不显示experimental的描述 
-      const isFilterExperimental = [STAGE.removed, STAGE.deprecated, STAGE.stable].includes(currentStageComputed.value as STAGE)
-      // 当前deprecated之后，不显示stable的描述 
+      // 当前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 goingStages = Object.entries(desMap).filter(([stage]) => {
@@ -163,17 +165,21 @@ export default defineComponent({
     }
 
     const tipComputed = computed(() => {
-      if (props.tip) return $t2(props.tip['zh-CN'], props.tip['en-US']) as string
+      if (props.tip) return getWord(props.tip['zh-CN'], props.tip['en-US']) as string
 
       if (!props.metaData) return ''
 
       const vertionDesZnCn = generateDes(cnDesMap)
-      const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${props.extendTip?.['zh-CN'] || ''}`
+      const znChTip = `该${props.tipSubject === 'component' ? '组件' : '特性'}${vertionDesZnCn}。${
+        props.extendTip?.['zh-CN'] || ''
+      }`
 
       const vertionDesEnUs = generateDes(enDesMap)
-      const enUsTip = `This ${props.tipSubject === 'component' ? 'component' : 'feature'} is ${vertionDesEnUs}. ${props.extendTip?.['en-US'] || ''}`
+      const enUsTip = `This ${props.tipSubject === 'component' ? 'component' : 'feature'} is ${vertionDesEnUs}. ${
+        props.extendTip?.['en-US'] || ''
+      }`
 
-      return $t2(znChTip, enUsTip) as string
+      return getWord(znChTip, enUsTip) as string
     })
 
     const alertTypeComputed = computed(() => {

package/src/views/components/components.vue

@@ -16,7 +16,7 @@
         </version-tip>
         <template v-if="currJson?.demos?.length > 0">
           <div class="all-demos-container">
-            <h2 class="ti-f30 ti-fw-normal !ti-mb20">{{ $t('yan-shi') }}</h2>
+            <h2 class="ti-f30 ti-fw-normal !ti-mb20">{{ i18nByKey('yan-shi') }}</h2>
             <div v-if="apiModeState.demoMode === 'default'" class="ti-f-c ti-f-wrap">
               <template v-if="currJson.column === '2' && currJson.demos.length > 1">
                 <div class="one-demo-col2">
@@ -41,7 +41,7 @@
           <div id="API">
             <h2 class="ti-f30 ti-fw-normal ti-mt28">API</h2>
             <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-            <div class="mt20" v-for="(oneGroup, idx) in currJson.apis" :key="oneGroup.name">
+            <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
               <div class="ti-f-r ti-f-pos-start ti-fw-bold">
                 <div :id="oneGroup.name" class="ti-f18">{{ oneGroup.name }}</div>
                 <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">{{ oneGroup.type }}</div>
@@ -52,23 +52,23 @@
                   <table class="api-table">
                     <thead>
                       <tr v-if="key.includes('slots')">
-                        <th width="15%">{{ $t('name') }}</th>
-                        <th width="85%">{{ $t('desc') }}</th>
+                        <th width="15%">{{ i18nByKey('name') }}</th>
+                        <th width="85%">{{ i18nByKey('desc') }}</th>
                       </tr>
-                      <tr v-else-if="key.includes('events')">
-                        <th width="15%">{{ $t('name') }}</th>
-                        <th width="20%">{{ $t('propType') }}</th>
-                        <th width="65%">{{ $t('desc') }}</th>
+                      <tr v-else-if="key.includes('events') || key.includes('methods')">
+                        <th width="15%">{{ i18nByKey('name') }}</th>
+                        <th width="20%">{{ i18nByKey('propType') }}</th>
+                        <th width="65%">{{ i18nByKey('desc') }}</th>
                       </tr>
                       <tr v-else>
-                        <th width="15%">{{ $t('name') }}</th>
-                        <th width="20%">{{ $t('propType') }}</th>
-                        <th width="20%">{{ $t('defValue') }}</th>
-                        <th width="45%">{{ $t('desc') }}</th>
+                        <th width="15%">{{ i18nByKey('name') }}</th>
+                        <th width="20%">{{ i18nByKey('propType') }}</th>
+                        <th width="20%">{{ i18nByKey('defValue') }}</th>
+                        <th width="45%">{{ i18nByKey('desc') }}</th>
                       </tr>
                     </thead>
                     <tbody>
-                      <tr v-for="row in oneApiArr" :key="row.name">
+                      <tr v-for="row in oneApiArr.sort((a, b) => a.name.localeCompare(b.name))" :key="row.name">
                         <td>
                           <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
                           <span v-else>{{ row.name }}</span>
@@ -90,7 +90,7 @@
                           ></a>
                           <span v-else v-html="row.type"></span>
                         </td>
-                        <td v-if="!key.includes('slots') && !key.includes('events')">
+                        <td v-if="!key.includes('slots') && !key.includes('events') && !key.includes('methods')">
                           <span
                             v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"
                           ></span>
@@ -117,7 +117,7 @@
         <h2 id="FAQ" v-if="cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
         <div class="markdown-body" v-html="cmpFAQMd"></div>
         <div v-if="currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(currJson.owner)">
-          {{ $t('doc-owner') }} : {{ currJson.owner }}
+          {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
         </div>
       </div>
 
@@ -142,7 +142,7 @@ import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref } fr
 import { marked } from 'marked'
 import { Loading, Anchor, ButtonGroup } from '@opentiny/vue'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
-import { $t, $t2, $clone, $split, fetchDemosFile, useApiMode, useTemplateMode } from '@/tools'
+import { i18nByKey, getWord, $clone, fetchDemosFile, useApiMode, useTemplateMode } from '@/tools'
 import demo from '@/views/components/demo'
 import { router } from '@/router.js'
 import { Collapse, CollapseItem } from '@opentiny/vue'
@@ -168,7 +168,7 @@ export default defineComponent({
     const anchorRefreshKey = ref(0)
     const state = reactive({
       webDocPath: computed(() => ''),
-      langKey: $t2('zh-CN', 'en-US'),
+      langKey: getWord('zh-CN', 'en-US'),
       cmpId: '',
       currJson: { column: 1, demos: [], apis: [] },
       cmpTopMd: null,
@@ -219,6 +219,7 @@ export default defineComponent({
             //  用户打开官网有时候会带一些特殊字符的hash，try catch一下防止js报错
             scrollTarget = document.querySelector(`#${hash}`)
           } catch (err) {
+            // eslint-disable-next-line no-console
             console.log('querySelector has special character:', err)
           }
           if (scrollTarget) {
@@ -263,7 +264,7 @@ export default defineComponent({
 
     // saas下切换mode和组价示例都会触发loadPage,需要防抖
     const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
-      const lang = $t2('cn', 'en')
+      const lang = getWord('cn', 'en')
       state.cmpId = router.currentRoute.value.params.cmpId
 
       // 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
@@ -287,6 +288,7 @@ export default defineComponent({
         }
 
         // 3、加载cmpId.js 文件
+        // eslint-disable-next-line no-eval
         const json = eval('(' + jsData.slice(15) + ')')
         state.currJson = {
           ...json,
@@ -295,12 +297,14 @@ export default defineComponent({
         }
         if (state.cmpId?.startsWith('grid-')) {
           fetchDemosFile(`${staticDemoPath}/grid/webdoc/grid.js`).then((data) => {
+            // eslint-disable-next-line no-eval
             const gridJson = eval('(' + data.slice(15) + ')')
             state.currJson.apis = gridJson.apis
             state.currJson.types = gridJson.types
           })
         } else if (state.cmpId?.startsWith('chart-')) {
           fetchDemosFile(`${staticDemoPath}/chart/webdoc/chart.js`).then((data) => {
+            // eslint-disable-next-line no-eval
             const chartJson = eval('(' + data.slice(15) + ')')
             state.currJson.apis = chartJson.apis
           })
@@ -330,30 +334,23 @@ export default defineComponent({
       copyText: (text) => {
         navigator.clipboard.writeText(text)
       },
+      // 点击 api区域的 name列时
       jumpToDemo: (demoId) => {
         if (demoId.startsWith('chart') || demoId.startsWith('grid')) {
           router.push(demoId)
         } else {
           router.push(`#${demoId}`)
-        }
-      },
-      handleApiClick: (ev) => {
-        if (ev.target.tagName === 'A') {
-          ev.preventDefault()
-          const href = ev.target.getAttribute('href')
-          const hash = $split(href, '#', -1)
-          router.push(href)
-          state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
 
-          scrollByHash(hash)
-        }
-        if (apiModeState.demoMode === 'single') {
-          state.singleDemo = state.currJson.demos.find((d) => d.demoId === demoId)
+          if (apiModeState.demoMode === 'single') {
+            state.singleDemo = state.currJson.demos.find((d) => d.demoId === demoId)
+          }
         }
       },
+      // 点击api 区域的type列
       handleTypeClick: (ev) => {
         changeActiveNames(ev.target.hash, true)
       },
+      // 目录列表上的点击
       handleAnchorClick: (e, data) => {
         if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {
           e.preventDefault()
@@ -412,7 +409,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       ...fn,
-      $t,
+      i18nByKey,
       anchorRefreshKey,
       apiModeState,
       templateModeState,
@@ -550,21 +547,23 @@ table.api-table {
 .custom-block.tip {
   background-color: #f3f5f7;
   border-color: #42b983;
-  border-radius: 0;
-  padding: 1.5rem;
-  border-left-width: 0.5rem;
+  border-radius: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-left-width: 0.3rem;
   border-left-style: solid;
   margin: 1rem 0;
   font-size: 14px;
   color: #5e6d82;
-  line-height: 1.5;
+  line-height: 2;
+
   .custom-block-title {
     font-weight: 600;
+    margin-bottom: 0.5rem;
   }
+
   p {
-    margin: 8px 0;
-    font-size: 16px;
-    line-height: 1.5;
+    margin: 0;
+    font-size: 14px;
   }
   ul {
     li {