整理i18n

.env

@@ -1,3 +1,3 @@
-VITE_BASE_API_URL=https://testeur.4dkankan.com
-VITE_MAIN_URL=https://testeur.4dkankan.com
-VITE_LIVE_STEAM_URL=https://testeur.4dkankan.com/livestream
+VITE_BASE_API_URL=https://test.4dkankan.com
+VITE_MAIN_URL=https://test.4dkankan.com
+VITE_LIVE_STEAM_URL=https://test4dkankan.com/livestream

.env.development

@@ -0,0 +1,3 @@
+VITE_BASE_API_URL=https://v4-test.4dkankan.com
+VITE_MAIN_URL=https://test.4dkankan.com
+VITE_LIVE_STEAM_URL=https://test4dkankan.com/livestream

package.json

@@ -35,6 +35,7 @@
     "vue-router": "4"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.6",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "@vitejs/plugin-vue": "^3.1.0",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@ant-design/icons-vue': ^6.1.0
+  '@types/lodash-es': ^4.17.6
   '@types/node': ^18.7.18
   '@typescript-eslint/eslint-plugin': ^5.36.2
   '@typescript-eslint/parser': ^5.36.2
@@ -52,6 +53,7 @@ dependencies:
   vue-router: 4.1.6_vue@3.2.41
 
 devDependencies:
+  '@types/lodash-es': 4.17.6
   '@typescript-eslint/eslint-plugin': 5.41.0_huremdigmcnkianavgfk3x6iou
   '@typescript-eslint/parser': 5.41.0_wyqvi574yv7oiwfeinomdzmc3m
   '@vitejs/plugin-vue': 3.1.2_vite@3.1.8+vue@3.2.41
@@ -284,6 +286,16 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.189
+    dev: true
+
+  /@types/lodash/4.14.189:
+    resolution: {integrity: sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA==}
+    dev: true
+
   /@types/node/18.11.5:
     resolution: {integrity: sha512-3JRwhbjI+cHLAkUorhf8RnqUbFXajvzX4q6fMn5JwkgtuwfYtRQYI3u4V92vI6NJuTsbBQWWh3RZjFsuevyMGQ==}
     dev: false

src/App.vue

@@ -16,8 +16,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import LayoutHeader from '@/layout/header.vue'
+import { useLocaleStore } from '@/store/modules/locale'
+import { useLocale } from '@/locales/useLocale'
 
 export const contentRef = ref<HTMLDivElement>()
 
@@ -27,6 +29,14 @@ export default defineComponent({
     LayoutHeader
   },
   setup() {
+    const localeStore = useLocaleStore()
+    const { changeLocale, getLocale } = useLocale()
+    localeStore.initLocale()
+
+    onMounted(() => {
+      changeLocale('zh_CN')
+      console.log('getLocale', getLocale.value)
+    })
     return { contentRef }
   }
 })

src/api/instance.ts

@@ -4,6 +4,7 @@ import { message, Modal } from 'ant-design-vue'
 import { showLoading, hideLoading } from '@/components/loading'
 import { ResCode, ResCodeDesc } from './constant'
 import { baseURL, token, mainURL } from '@/env'
+import { useI18n } from '@/hook/useI18n'
 
 const instance = axiosFactory()
 
@@ -33,9 +34,10 @@ let isOnWarning = false
 const tokenInvalid = () => {
   if (!isOnWarning) {
     // debugger
+    const { t } = useI18n()
     setTimeout(() => {
       Modal.info({
-        title: () => '提示',
+        title: () => t('base.name'),
         zIndex: 10000,
         centered: true,
         content: () => h('div', {}, [h('p', '登录状态失效，请重新登录')]),
@@ -45,7 +47,7 @@ const tokenInvalid = () => {
           gotoLogin()
         }
       })
-    }, 100)
+    }, 300)
     isOnWarning = true
   }
 

src/helper/index.ts

@@ -1,6 +1,7 @@
-import { app } from '@/main'
+import { userApp } from '@/main'
 import { genMount } from '@/shared'
 
+const { app } = userApp()
 export const mount = genMount(app)
 
 export const renderCompoent = <P>(comp: ComponentConstructor<P>, props: P) => {

src/locales/lang/en.ts

@@ -0,0 +1,12 @@
+import { genMessage } from '../helper'
+import antdLocale from 'ant-design-vue/es/locale/en_US'
+
+const modules = import.meta.globEager('./en/**/*.ts')
+export default {
+  message: {
+    ...genMessage(modules, 'en'),
+    antdLocale
+  },
+  dateLocale: null,
+  dateLocaleName: 'en'
+}

src/locales/lang/en/base.ts

@@ -0,0 +1,3 @@
+export default {
+  name: 'testslslslsls'
+}

src/locales/lang/en/index.ts

@@ -1,3 +0,0 @@
-export default {
-  name: 'test'
-}

src/locales/lang/zh-CN/base.ts

@@ -0,0 +1,4 @@
+export default {
+  name: '测试',
+  ttt: '11111'
+}

src/locales/lang/zh-CN/index.ts

@@ -1,3 +0,0 @@
-export default {
-  name: '测试'
-}

src/locales/lang/zh_CN.ts

@@ -0,0 +1,12 @@
+import { genMessage } from '../helper'
+import antdLocale from 'ant-design-vue/es/locale/zh_CN'
+
+// const modules = import.meta.globEager('./zh-CN/**/*.ts')
+const modules = import.meta.glob('./zh-CN/**/*.ts', { eager: true })
+export default {
+  message: {
+    ...genMessage(modules, 'zh-CN'),
+    antdLocale
+  }
+  // momentLocaleName: 'zh-cn',
+}

src/locales/useLocale.ts

@@ -20,7 +20,7 @@ function setI18nLanguage(locale: LocaleType) {
   if (i18n.mode === 'legacy') {
     i18n.global.locale = locale
   } else {
-    ; (i18n.global.locale as any).value = locale
+    ;(i18n.global.locale as any).value = locale
   }
   localeStore.setLocaleInfo({ locale })
   setHtmlPageLang(locale)

src/main.ts

@@ -3,11 +3,21 @@ import 'normalize.css'
 import '@/assets/iconfont/iconfont.css'
 import 'ant-design-vue/lib/message/style/index.less'
 import './style.css'
-import App from './App.vue'
+import AppCom from './App.vue'
 import router from './router'
 import { setupStore } from '@/store'
+import { setupI18n } from '@/locales/setupI18n'
+import type { App } from 'vue'
 
-export const app = createApp(App)
-app.use(router)
-setupStore(app)
-app.mount('#app')
+let app: App
+async function bootstrap() {
+  app = createApp(AppCom)
+  app.use(router)
+  setupStore(app)
+  await setupI18n(app)
+  app.mount('#app')
+}
+export const userApp = () => {
+  return { app }
+}
+bootstrap()

src/store/modules/locale.ts

@@ -1,7 +1,7 @@
 import type { LocaleSetting, LocaleType } from '/#/config'
 
 import { defineStore } from 'pinia'
-import { store } from '/@/store'
+import { store } from '@/store'
 
 interface LocaleState {
   localInfo: LocaleSetting

src/views/room/list.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="headerRef" class="header">
-    <h3>我的房间（{{ roomStore.list.length }}）</h3>
+    <h3>我的房间({{ roomStore.list.length }})</h3>
     <a-input
       v-model:value="keyword"
       placeholder="搜索房间"
@@ -19,7 +19,7 @@
   >
     <template v-if="!keyword" #undata>
       <a-button type="primary" shape="round" size="middle" @click="editRoom()">
-        创建房间
+        创建房间{{ t('name') }}
       </a-button>
     </template>
     <a-list
@@ -67,7 +67,7 @@ import { ref, computed, createVNode } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { copyText } from '@/shared'
 import { renderModal } from '@/helper'
-import { app } from '@/main'
+import { userApp } from '@/main'
 import { useVisible } from '@/hook'
 import { contentRef } from '@/App.vue'
 import EditRoom from './edit-room'
@@ -75,6 +75,7 @@ import RoomSign from './sign.vue'
 import Share from './modal/share.vue'
 import MiniSync from './modal/mini-sync.vue'
 import DataList from '@/components/data-list/index.vue'
+import { useI18n } from '@/hook/useI18n'
 
 import type { Room } from '@/store/modules/room'
 import { fetchRoomDetail } from '@/api'
@@ -85,6 +86,8 @@ const addMarked = Symbol('add-room')
 const roomStore = useRoomStore()
 roomStore.fetchList()
 
+const { t } = useI18n()
+
 const keyword = ref('')
 const roomList = computed(() => [addMarked, ...roomStore.filter(keyword.value)])
 
@@ -102,6 +105,7 @@ const deleteRoom = (room: Room) => {
 const shareRoom = async (room: Room) => {
   // await roomStore.setRoomMiniCode(room)
   const scenes = await fetchRoomDetail(room.id)
+  const { app } = userApp()
   const m = scenes.sceneData[0].num
   Modal.confirm({
     content: createVNode(Share, { room, num: m }),

tsconfig.json

@@ -12,7 +12,7 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
-    "types": ["unplugin-vue-define-options/macros-global"],
+    "types": ["unplugin-vue-define-options/macros-global", "./types"],
     "typeRoots": ["./node_modules/@types/", "./types"],
     "baseUrl": "./",
     "paths": {

vite.config.ts

@@ -42,8 +42,16 @@ export default defineConfig({
   resolve: {
     alias: [
       {
+        find: 'vue-i18n',
+        replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
+      },
+      {
         find: '@',
         replacement: resolve(__dirname, './src')
+      },
+      {
+        find: '#',
+        replacement: resolve(__dirname, './types')
       }
     ]
   },