chore: 增加i18n支持

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "wa.wa-xlsxToTs",
+    "wa.wa-menus"
+  ]
 }

README.md

@@ -110,5 +110,12 @@ export type WAMenu = (ItemType & {
 package里有不同环境的打包方式
 
 ## 关于mock
+
 mock预设为 test 与 prod(根据import.meta.env.MODE 决定 prod模式时 使用的是prod文件下的mock 其他的都是用的test下的mock)
-需要增加更多环境支持可以在 mock/index.ts修改
+需要增加更多环境支持可以在 mock/index.ts修改
+
+## 关于插件
+
+内设了几款插件
+wa-menu 右键 src/locales/lang.xlsx可以 执行xlsx自动转ts的脚本
+wa-language-tip 丰富i18n 在编写时的提示能力

mock/test/index.ts

@@ -27,6 +27,16 @@ const testMock: MockMethod = [
         data: ['perm-1']
       }
     }
+  },
+  {
+    url: '/api/logout',
+    method: 'get',
+    timeout: 1000,
+    response: () => {
+      return {
+        code: 0
+      }
+    }
   }
 ]
 

package.json

@@ -42,6 +42,11 @@
   "config": {
     "commitizen": {
       "path": "node_modules/cz-git"
+    },
+    "wa-menus": {
+      "xlsxDefaultLan": "zh-CN",
+      "xlsxTransformPath": "",
+      "xlsxTransformType": ""
     }
   },
   "dependencies": {
@@ -63,6 +68,7 @@
     "vite-plugin-mkcert": "^1.16.0",
     "vue": "^3.3.4",
     "vue-hooks-plus": "^1.8.6",
+    "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.4",
     "vuex": "^4.1.0",
     "wa-utils": "^0.2.6"

src/App.vue

@@ -30,6 +30,7 @@
 <script setup lang="ts">
 import zhCN from 'ant-design-vue/es/locale/zh_CN'
 
+// DatePicker ui组件配置中文依然是英文展示
 // @ts-ignore
 zhCN.DatePicker.lang = {
   ...zhCN.DatePicker?.lang,

src/components/layout/layout.vue

@@ -11,14 +11,24 @@
         @click="(v: any) => handleChangeApp(v?.key)"
         v-if="appList.length > 1"
       ></a-menu>
-      <div class="ml-auto w-[50px]">
+      <div class="ml-auto w-[100px]">
+        <a-dropdown>
+          <template #overlay>
+            <a-menu @click="(v) => changeLang(v.key)">
+              <a-menu-item :key="i.value" v-for="i in langMap">
+                <a>{{ i.label }}</a>
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <a>{{ locale }}</a>
+        </a-dropdown>
         <a-dropdown>
           <template #overlay>
             <a-menu @click="systemLogout">
               <a-menu-item key="1"> 退出登录 </a-menu-item>
             </a-menu>
           </template>
-          <Avatar class="avatar"></Avatar
+          <a><Avatar class="avatar ml-[10px]"></Avatar></a
         ></a-dropdown>
       </div>
     </a-layout-header>
@@ -93,7 +103,11 @@ import { computed } from 'vue'
 import { RouterView } from 'vue-router'
 import { Avatar } from 'ant-design-vue'
 import { systemLogout } from '@/utils'
+import { useI18n } from 'vue-i18n'
+import { langMap } from '@/constant'
+import { changeLang } from '@/utils/lang'
 const store = useStore()
+const { locale } = useI18n()
 
 const appList = computed(() => {
   return store.state.common.apps?.map((item) => ({

src/constant/index.ts

@@ -4,3 +4,14 @@ export const adminPerm = '*:*:*'
 
 export const mode = import.meta.env.MODE as unknown as Env
 export const env = import.meta.env
+
+export const langMap = [
+  {
+    label: '中文',
+    value: 'zh-CN'
+  },
+  {
+    label: 'english',
+    value: 'en'
+  }
+]

src/locales/en.ts

@@ -0,0 +1,4 @@
+export default {
+  message: "hello",
+  test: "测试",
+}

src/locales/index.ts

@@ -0,0 +1,20 @@
+// import { globSync } from 'glob'
+import zhCN from './zh-CN'
+import en from './en'
+import { createI18n } from 'vue-i18n'
+import { Lang } from '@/types'
+import { local } from '@/utils/storage'
+
+const getInitLang = (): Lang => {
+  return local.baseGet('lang') || 'zh-CN'
+}
+
+export const setupI18n = createI18n({
+  legacy: false,
+  locale: getInitLang(),
+  globalInjection: true,
+  messages: {
+    'zh-CN': zhCN,
+    en
+  }
+})

src/locales/zh-CN.ts

@@ -0,0 +1,4 @@
+export default {
+  message: "你好",
+  test: "测试",
+}

src/main.ts

@@ -6,7 +6,8 @@ import Antd from 'ant-design-vue'
 import { store, key } from './store/store'
 import './styles/global.scss'
 import './styles/tailwind.global.scss'
+import { setupI18n } from './locales'
 
 document.title = ''
 
-createApp(App).use(Antd).use(route).use(store, key).mount('#app')
+createApp(App).use(setupI18n).use(Antd).use(route).use(store, key).mount('#app')

src/pages/workbench/index.tsx

@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const Workbench = defineComponent({
   name: 'Workbench',
   setup() {
+    const { t, locale } = useI18n()
     return () => {
-      return <div>workbench</div>
+      return <div>{t('message')}</div>
     }
   }
 })

src/services/user.ts

@@ -11,3 +11,10 @@ export const loginService = () => {
     method: 'post'
   })
 }
+
+export const logoutService = () => {
+  return request.request({
+    url: '/api/logout',
+    method: 'get'
+  })
+}

src/types/index.ts

@@ -20,3 +20,5 @@ export type WAMenu = (ItemType & {
 })[]
 
 export type Env = 'development' | 'test' | 'staging' | 'production'
+
+export type Lang = 'zh-CN' | 'en'

src/utils/index.ts

@@ -1,3 +1,4 @@
+import { logoutService } from '@/services/user'
 import { local } from './storage'
 
 export const isLogin = () => {
@@ -13,7 +14,8 @@ export const systemLogin = (token: string) => {
   location.reload()
 }
 
-export const systemLogout = () => {
+export const systemLogout = async () => {
+  await logoutService()
   local.remove('token')
   location.reload()
 }

src/utils/lang.ts

@@ -0,0 +1,7 @@
+import { Lang } from '@/types'
+import { local } from './storage'
+
+export const changeLang = (lang: Lang) => {
+  local.baseSet('lang', lang)
+  location.reload()
+}