From 26fd4df6abcb06879665f320479e75a12c8c0362 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Thu, 7 Dec 2023 09:52:06 +0800
Subject: [PATCH] fix(sites): fix console warning (#1042)

* fix(sites): fix console warning

* fix(sites): fix console warning
---
 examples/sites/demos/pc/webdoc/theme-en.md    | 12 +++++---
 examples/sites/demos/pc/webdoc/theme.md       | 13 ++++++--
 examples/sites/src/i18n/index.js              |  6 ++--
 examples/sites/src/main.js                    |  9 ++----
 examples/sites/src/menus.jsx                  |  2 +-
 examples/sites/src/tools/utils.js             |  4 +--
 .../sites/src/views/components/VersionTip.vue | 22 +++++++++-----
 .../sites/src/views/components/components.vue | 30 +++++++++----------
 examples/sites/src/views/components/demo.vue  | 22 +++++++-------
 examples/sites/src/views/docs/docs.vue        |  5 ++--
 examples/sites/src/views/layout/layout.vue    | 28 +++++++++--------
 examples/sites/src/views/overview.vue         | 29 ++++++++++--------
 examples/sites/vite.config.ts                 | 14 ++++++---
 13 files changed, 109 insertions(+), 87 deletions(-)

diff --git a/examples/sites/demos/pc/webdoc/theme-en.md b/examples/sites/demos/pc/webdoc/theme-en.md
index e4339ff7a..1a15e7fe1 100644
--- a/examples/sites/demos/pc/webdoc/theme-en.md
+++ b/examples/sites/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:
 
diff --git a/examples/sites/demos/pc/webdoc/theme.md b/examples/sites/demos/pc/webdoc/theme.md
index 6101216ce..294ecc18b 100644
--- a/examples/sites/demos/pc/webdoc/theme.md
+++ b/examples/sites/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>
 
 步骤三、在项目根目录下，执行以下命令进行替换；
 
diff --git a/examples/sites/src/i18n/index.js b/examples/sites/src/i18n/index.js
index 577ebc3b5..330d95d99 100644
--- a/examples/sites/src/i18n/index.js
+++ b/examples/sites/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 }
diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js
index a585aec85..051e578c5 100644
--- a/examples/sites/src/main.js
+++ b/examples/sites/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)
diff --git a/examples/sites/src/menus.jsx b/examples/sites/src/menus.jsx
index 38c429fda..657468cb6 100644
--- a/examples/sites/src/menus.jsx
+++ b/examples/sites/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 两个页面的所有菜单.
diff --git a/examples/sites/src/tools/utils.js b/examples/sites/src/tools/utils.js
index 6169a7d40..c274ed049 100644
--- a/examples/sites/src/tools/utils.js
+++ b/examples/sites/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 }
diff --git a/examples/sites/src/views/components/VersionTip.vue b/examples/sites/src/views/components/VersionTip.vue
index ee80cc783..9d3ebaade 100644
--- a/examples/sites/src/views/components/VersionTip.vue
+++ b/examples/sites/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(() => {
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index add660783..1d15f3889 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/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">
@@ -52,19 +52,19 @@
                   <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>
@@ -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, 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,
@@ -264,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
 
       // 将请求合并起来，这样页面更新一次，页面刷新的时机就固定了
@@ -409,7 +409,7 @@ export default defineComponent({
     return {
       ...toRefs(state),
       ...fn,
-      $t,
+      i18nByKey,
       anchorRefreshKey,
       apiModeState,
       templateModeState,
diff --git a/examples/sites/src/views/components/demo.vue b/examples/sites/src/views/components/demo.vue
index 617ceab23..f446e07bf 100644
--- a/examples/sites/src/views/components/demo.vue
+++ b/examples/sites/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;
   }
 }
diff --git a/examples/sites/src/views/docs/docs.vue b/examples/sites/src/views/docs/docs.vue
index e4ebff2f9..ea7ac1181 100644
--- a/examples/sites/src/views/docs/docs.vue
+++ b/examples/sites/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
 
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 6f0e29cd5..31521a8c3 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/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>
@@ -109,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, 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'
 
@@ -140,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 = () => {
@@ -213,7 +213,9 @@ export default defineComponent({
       changeLanguage,
       apiModeState,
       apiModeFn,
-      templateModeState
+      templateModeState,
+      getWord,
+      i18nByKey
     }
   }
 })
diff --git a/examples/sites/src/views/overview.vue b/examples/sites/src/views/overview.vue
index 2320d5ee8..5ca6255e2 100644
--- a/examples/sites/src/views/overview.vue
+++ b/examples/sites/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);
diff --git a/examples/sites/vite.config.ts b/examples/sites/vite.config.ts
index 07fd96eac..772199a59 100644
--- a/examples/sites/vite.config.ts
+++ b/examples/sites/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