@opentiny/vue-docs 2.2.4 → 2.2.6

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

@@ -8,16 +8,17 @@
       <div class="ti-fi-1 ti-w0 ti-rel cmp-container">
         <!-- 一个组件的文档:  描述md + demos + apis -->
         <div class="markdown-body markdown-top-body" size="medium" v-html="cmpTopMd"></div>
-        <version-tip 
+        <version-tip
           v-if="currJson.metaData || currJson.versionTipOption"
-          :metaData="currJson.metaData"
-          v-bind="currJson.versionTipOption">
+          :meta-data="currJson.metaData"
+          v-bind="currJson.versionTipOption"
+        >
         </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'">
+              <template v-if="currJson.column === '2' && currJson.demos.length > 1">
                 <div class="one-demo-col2">
                   <div>
                     <demo v-for="demo in evenDemo" :key="demo.name" :demo="demo" />
@@ -40,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>
@@ -51,32 +52,33 @@
                   <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>
+                        <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>
-                          <version-tip 
+                          <version-tip
                             v-if="row.metaData || row.versionTipOption"
-                            :metaData="row.metaData"
-                            v-bind="row.versionTipOption" 
-                            renderType="tag"
-                            tipSubject="api">
+                            :meta-data="row.metaData"
+                            v-bind="row.versionTipOption"
+                            render-type="tag"
+                            tip-subject="api"
+                          >
                           </version-tip>
                         </td>
                         <td v-if="!key.includes('slots')">
@@ -115,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>
 
@@ -138,9 +140,9 @@
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref } from 'vue'
 import { marked } from 'marked'
-import { Loading, Anchor, ButtonGroup, ColumnListGroup } from '@opentiny/vue'
+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'
@@ -166,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,
@@ -217,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) {
@@ -261,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
 
       // 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
@@ -285,6 +288,7 @@ export default defineComponent({
         }
 
         // 3、加载cmpId.js 文件
+        // eslint-disable-next-line no-eval
         const json = eval('(' + jsData.slice(15) + ')')
         state.currJson = {
           ...json,
@@ -293,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
           })
@@ -328,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()
@@ -410,7 +409,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       ...fn,
-      $t,
+      i18nByKey,
       anchorRefreshKey,
       apiModeState,
       templateModeState,
@@ -548,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 {

package/src/views/components/demo.vue

@@ -16,7 +16,7 @@
           <tiny-tooltip
             placement="top"
             :append-to-body="false"
-            :content="demo.isOpen ? $t('hideCode') : $t('showCode')"
+            :content="demo.isOpen ? i18nByKey('hideCode') : i18nByKey('showCode')"
           >
             <i
               :class="!!demo.isOpen ? 'i-ti-codeslash' : 'i-ti-code'"
@@ -24,7 +24,7 @@
               @click="toggleDemoCode(demo)"
             />
           </tiny-tooltip>
-          <tiny-tooltip placement="top" :append-to-body="false" :content="$t('playground')">
+          <tiny-tooltip placement="top" :append-to-body="false" :content="i18nByKey('playground')">
             <i class="i-ti-playground ml8 h:c-success ti-w16 ti-h16 ti-cur-hand" @click="openPlayground(demo)" />
           </tiny-tooltip>
         </div>
@@ -65,8 +65,8 @@
 
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, shallowRef, onMounted, watch, nextTick, inject } from 'vue'
-import { $t, $t2 } from '@/i18n'
-import { $split, appData, fetchDemosFile, $pub } from '@/tools'
+import { i18nByKey, getWord } from '@/i18n'
+import { $split, appData, fetchDemosFile } from '@/tools'
 import { Tooltip as TinyTooltip, Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from './cmpConfig'
 import { router } from '@/router.js'
@@ -108,7 +108,7 @@ export default defineComponent({
             .then((code) => {
               return code
             })
-            .catch((error) => {
+            .catch(() => {
               return `${demoName}示例资源不存在，请检查文件名是否正确？`
             })
           const ext = $split(fileName, '.', -1)
@@ -123,7 +123,7 @@ export default defineComponent({
     const state = reactive({
       tabValue: 'tab0',
       cmpId: router.currentRoute.value.params.cmpId,
-      langKey: $t2('zh-CN', 'en-US'),
+      langKey: getWord('zh-CN', 'en-US'),
       currDemoId: computed(() => {
         let hash = router.currentRoute.value.hash?.slice(1)
 
@@ -133,7 +133,7 @@ export default defineComponent({
         }
         return hash
       }),
-      copyTip: $t('copyCode'),
+      copyTip: i18nByKey('copyCode'),
       copyIcon: 'i-ti-copy'
     })
 
@@ -169,12 +169,12 @@ export default defineComponent({
 
           navigator.clipboard.writeText(demo.files[0].code)
         }
-        state.copyTip = $t('copyCodeOk')
+        state.copyTip = i18nByKey('copyCodeOk')
         state.copyIcon = 'i-ti-check'
       },
       resetTip() {
         setTimeout(() => {
-          state.copyTip = $t('copyCode')
+          state.copyTip = i18nByKey('copyCode')
           state.copyIcon = 'i-ti-copy'
         }, 300)
       },
@@ -218,7 +218,7 @@ export default defineComponent({
       }
     )
 
-    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst }
+    return { ...toRefs(state), ...fn, appData, vueComponents, demoConfig, cmp, isMobileFirst, i18nByKey }
   }
 })
 </script>
@@ -304,7 +304,7 @@ export default defineComponent({
     position: absolute;
     left: 11px;
     top: 79px;
-    transform: translateX(0);
+    transform: i18nByKeyX(0);
     overflow: hidden;
   }
 }

package/src/views/docs/docs.vue

@@ -13,8 +13,7 @@
 
 <script setup>
 import { ref, nextTick, watch, onMounted, computed, shallowRef } from 'vue'
-import { Anchor as TinyAnchor } from '@opentiny/vue'
-import { $t2 } from '@/tools'
+import { getWord } from '@/tools'
 import docMDs, { transformIdSelector } from './docConfig.js'
 import { router } from '@/router.js'
 
@@ -28,7 +27,7 @@ const catalog = ref([])
 const docCmp = shallowRef(null)
 
 async function loadPage() {
-  let suffix = $t2('', '-en')
+  let suffix = getWord('', '-en')
   const docKey = router.currentRoute.value.params.docId
   const docName = isOpen && openDocMap[docKey] ? openDocMap[docKey] : docKey
 

package/src/views/layout/layout.vue

@@ -2,15 +2,15 @@
   <div class="main-layout ti-hp100 ti-f-c ti-f-box-stretch">
     <!-- 切换语言 -->
     <div class="lang-box">
-      <tiny-tooltip :content="$t('changeLanguage')" placement="left">
-        <span class="lang-btn" @click="changeLanguage">{{ $t('language') }}</span>
+      <tiny-tooltip :content="i18nByKey('changeLanguage')" placement="left">
+        <span class="lang-btn" @click="changeLanguage">{{ i18nByKey('language') }}</span>
       </tiny-tooltip>
     </div>
     <!-- 切換主题样式 -->
     <tiny-dropdown v-if="!templateModeState.isSaas" class="theme-change-button" trigger="click">
-      <tiny-tooltip :content="$t('changeTheme')" placement="left">
+      <tiny-tooltip :content="i18nByKey('changeTheme')" placement="left">
         <span>
-          <img :src="themeSvg" :alt="$t('changeTheme')" />
+          <img :src="themeSvg" :alt="i18nByKey('changeTheme')" />
         </span>
       </tiny-tooltip>
       <template #dropdown>
@@ -31,7 +31,7 @@
         <div v-show="!isCollapsed" class="api-type-box" :class="{ 'is-collapsed': isCollapsed }">
           <div class="api-type">
             <div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Options' }">
-              {{ $t2('选项式', 'Options') }}
+              {{ getWord('选项式', 'Options') }}
             </div>
             <tiny-switch
               class="api-switch"
@@ -41,16 +41,16 @@
               v-model="apiModeState.apiMode"
             ></tiny-switch>
             <div :class="{ 'api-mode': true, active: apiModeState.apiMode === 'Composition' }">
-              {{ $t2('组合式', 'Composition') }}
+              {{ getWord('组合式', 'Composition') }}
             </div>
-            <tiny-tooltip :content="$t('apiType')" placement="right">
+            <tiny-tooltip :content="i18nByKey('apiType')" placement="right">
               <icon-help-circle></icon-help-circle>
             </tiny-tooltip>
           </div>
 
           <div class="api-type">
             <div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'single' }">
-              {{ $t2('单示例', 'Single') }}
+              {{ getWord('单示例', 'Single') }}
             </div>
             <tiny-switch
               class="api-switch"
@@ -60,9 +60,9 @@
               v-model="apiModeState.demoMode"
             ></tiny-switch>
             <div :class="{ 'api-mode': true, active: apiModeState.demoMode === 'default' }">
-              {{ $t2('多示例', 'Multiple') }}
+              {{ getWord('多示例', 'Multiple') }}
             </div>
-            <tiny-tooltip :content="$t2('切换demo的预览模式', 'Change demo preview mode')" placement="right">
+            <tiny-tooltip :content="getWord('切换demo的预览模式', 'Change demo preview mode')" placement="right">
               <icon-help-circle></icon-help-circle>
             </tiny-tooltip>
           </div>
@@ -83,12 +83,8 @@
             <div class="node-name-container">
               <tiny-tag v-if="data?.mode?.includes('mobile-first')" effect="plain">多端</tiny-tag>
               <span class="node-name-label">{{ data.label }}</span>
-              <tiny-tag 
-                v-if="data.mark?.text"
-                class="node-float-tip"
-                effect="dark"
-                :type="data.mark?.type">
-                {{ data.mark.text}}
+              <tiny-tag v-if="data.mark?.text" class="node-float-tip" effect="dark" :type="data.mark?.type">
+                {{ data.mark.text }}
               </tiny-tag>
             </div>
           </template>
@@ -113,7 +109,7 @@ import { Switch, TreeMenu, Dropdown, DropdownMenu, DropdownItem, Tooltip, Tag }
 import { iconHelpCircle } from '@opentiny/vue-icon'
 import { genMenus } from '@/menus.jsx'
 import { router } from '@/router.js'
-import { $t2, $t, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
+import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
 import themeSvg from '@/assets/images/theme.svg?url'
 import useTheme from '@/tools/useTheme'
 
@@ -144,7 +140,7 @@ export default defineComponent({
       expandKeys: []
     })
 
-    const lang = $t2('zh-CN', 'en-US')
+    const lang = getWord('zh-CN', 'en-US')
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${lang}/os-theme/${route}${key}`
 
     const changeLanguage = () => {
@@ -217,7 +213,9 @@ export default defineComponent({
       changeLanguage,
       apiModeState,
       apiModeFn,
-      templateModeState
+      templateModeState,
+      getWord,
+      i18nByKey
     }
   }
 })

package/src/views/overview.vue

@@ -2,16 +2,16 @@
   <div>
     <div class="overview-layout ti-pt48">
       <h1 class="ti-mb20 ti-f24 ti-fw-600">
-        {{ $t('overview') }}
+        {{ i18nByKey('overview') }}
         <span class="ti-f18">({{ getTotalComponentsNum() }})</span>
       </h1>
 
       <h1 class="ti-f14 ti-my20 ti-lh21">
-        {{ $t('overviewDesc') }}
+        {{ i18nByKey('overviewDesc') }}
       </h1>
       <!-- 搜索 -->
       <tiny-input
-        :placeholder="$t('searchComponents')"
+        :placeholder="i18nByKey('searchComponents')"
         v-model="value"
         class="ti-mb10 search-input"
         :style="{ width: '100%', padding: '6px' }"
@@ -27,7 +27,7 @@
       </div>
       <div v-for="(menu, index) in searchMenus" :label="menu" :key="index">
         <div class="ti-rel ti-mt25">
-          <h2 class="ti-f16 ti-d-ib ti-fw-600 ti-mr8">{{ $t2(menu.label, menu.labelEn) }}</h2>
+          <h2 class="ti-f16 ti-d-ib ti-fw-600 ti-mr8">{{ getWord(menu.label, menu.labelEn) }}</h2>
           <span v-if="searchMenus?.length !== 0" class="cell-title">{{ menu.children.length }}</span>
         </div>
         <div class="ti-f-r ti-f-wrap ti-f-pos-between overview-card">
@@ -41,8 +41,8 @@
               <div class="ti-br-4 component-card">
                 <img
                   class="ti-h125 ti-w125"
-                  :src="$pub(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
-                  :onerror="`this.src='${$pub(`@demos/overviewimage/dev.svg`)}'`"
+                  :src="pubUrl(`@demos/overviewimage/${getSvg(cell.key)}.svg`)"
+                  :onerror="`this.src='${pubUrl(`@demos/overviewimage/dev.svg`)}'`"
                 />
                 <h2 class="ti-f16 overview-card-label">
                   {{ cell.name }}
@@ -66,8 +66,7 @@ import { cmpMenus } from '@menu/menus.js'
 import TinyInput from '@opentiny/vue-input'
 import noDataSvg from '@/assets/images/no-data.svg?url'
 import searchSvg from '@/assets/images/search.svg?url'
-import { $t2, isZhCn } from '@/tools'
-
+import { getWord, i18nByKey, isZhCn, pubUrl } from '@/tools'
 
 export default defineComponent({
   name: 'Overview',
@@ -98,7 +97,7 @@ export default defineComponent({
       const trimValue = value.replaceAll(' ', '').toLowerCase()
       const currentValue = trimValue
       const reg = new RegExp(currentValue, 'ig')
-      const isGrid = (trimValue === 'grid' || trimValue === '表格')
+      const isGrid = trimValue === 'grid' || trimValue === '表格'
       const searchMenus = state.menus
         .map((item) => {
           const label = item.label
@@ -115,7 +114,7 @@ export default defineComponent({
         .filter((item) => item.children.length > 0)
       state.searchMenus = searchMenus
     }
-    const lang = $t2('zh-CN', 'en-US')
+    const lang = getWord('zh-CN', 'en-US')
     let fn = {
       searchHandler: debounce(searchResultFn, 300),
       getTo: (key) => `${import.meta.env.VITE_CONTEXT}${lang}/os-theme/components/${key}`,
@@ -128,7 +127,7 @@ export default defineComponent({
         }
       },
       getTotalComponentsNum: () => {
-        let total = 0;
+        let total = 0
         cmpMenus.forEach((cmpCategory) => {
           if (cmpCategory.key === 'cmp_frame_style') {
             total += 2
@@ -145,7 +144,7 @@ export default defineComponent({
       const common = new window.TDCommon(['#footer'], {})
       common.renderFooter()
     })
-    return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn }
+    return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn, getWord, i18nByKey, pubUrl }
   }
 })
 </script>
@@ -174,7 +173,11 @@ export default defineComponent({
 
 .component-card {
   box-shadow: 1px 1px 4px 1px rgba(31, 52, 121, 0.1);
-  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
+  transition:
+    color 0.3s,
+    background-color 0.3s,
+    box-shadow 0.3s,
+    border-color 0.3s;
   padding: 24px;
   font-size: 14px;
   color: rgb(51, 54, 57);

package/vite.config.ts

@@ -12,6 +12,7 @@ import importPlugin from '@opentiny/vue-vite-import'
 import vue3SvgPlugin from 'vite-svg-loader'
 import { getAlias, pathFromWorkspaceRoot, getOptimizeDeps } from '../../internals/cli/src/config/vite'
 import virtualTemplatePlugin from '@opentiny-internal/unplugin-virtual-template/vite'
+import tailwindCss from 'tailwindcss'
 
 export default defineConfig((config) => {
   const env = loadEnv(config.mode, process.cwd() + '/env', '')
@@ -97,13 +98,20 @@ export default defineConfig((config) => {
         strict: false,
         allow: ['..']
       }
+    },
+    define: {
+      __VUE_I18N_FULL_INSTALL__: true,
+      __VUE_I18N_LEGACY_API__: true,
+      __INTLIFY_PROD_DEVTOOLS__: false,
+      __INTLIFY_JIT_COMPILATION__: false,
+      __INTLIFY_DROP_MESSAGE_COMPILER__: false
     }
   }
 
   if (env.VITE_TINY_THEME === 'saas') {
     viteConfig.css = {
       postcss: {
-        plugins: [require('tailwindcss')]
+        plugins: [tailwindCss]
       }
     }
     // 这里逻辑是兼容saas官网工程的alias写法
@@ -114,9 +122,7 @@ export default defineConfig((config) => {
   }
 
   if (env.NODE_ENV === 'development') {
-    viteConfig.define = {
-      'process.env': {}
-    }
+    viteConfig.define['process.env'] = {}
   }
 
   return viteConfig