save

.gitignore

@@ -14,6 +14,7 @@ dist-ssr
 
 # Editor directories and files
 .vscode/*
+!.vscode/settings.json
 !.vscode/extensions.json
 .idea
 .DS_Store

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar"]
+  "recommendations": ["Vue.volar", "lokalise.i18n-ally"]
 }

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "i18n-ally.localesPaths": ["src/locales/lang"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.sourceLanguage": "zh-CN",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledFrameworks": ["vue", "react"],
+  "[vue]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": false
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

src/App.vue

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

src/components.d.ts

@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     DownOutlined: typeof import('@ant-design/icons-vue')['DownOutlined']
     EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
     Loading: typeof import('./components/loading/index.vue')['default']
+    LocalePicker: typeof import('./components/localePicker/index.vue')['default']
     PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/layout/header.vue

@@ -4,32 +4,59 @@
       <h2>
         <a :href="mainURL"><img :src="logoPng" /></a>
       </h2>
+      <div class="right_menu_container">
+        <a-dropdown placement="bottomRight">
+          <template #overlay>
+            <a-menu style="width: 100px" @click="handlerLangClick">
+              <a-menu-item
+                v-for="menu in langList"
+                :key="menu.key"
+                class="menu-item"
+                :class="{ [menu.key]: true }"
+              >
+                {{ menu.label }}
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <div class="avatar">
+            <a-avatar :size="32">
+              <template #icon>
+                <img :src="userStore.current.avatar" />
+              </template>
+            </a-avatar>
+            <span>
+              {{ currentLang.label }}
+              <!-- <DownOutlined /> -->
+            </span>
+          </div>
+        </a-dropdown>
 
-      <a-dropdown placement="bottomRight">
-        <template #overlay>
-          <a-menu style="width: 100px" @click="handlerMenuClick">
-            <a-menu-item
-              v-for="menu in menus"
-              :key="menu.key"
-              class="menu-item"
-              :class="{ [menu.key]: true }"
-            >
-              {{ menu.label }}
-            </a-menu-item>
-          </a-menu>
-        </template>
-        <div class="avatar">
-          <a-avatar :size="32">
-            <template #icon>
-              <img :src="userStore.current.avatar" />
-            </template>
-          </a-avatar>
-          <span>
-            {{ userStore.current.nickname }}
-            <DownOutlined />
-          </span>
-        </div>
-      </a-dropdown>
+        <a-dropdown placement="bottomRight">
+          <template #overlay>
+            <a-menu style="width: 100px" @click="handlerMenuClick">
+              <a-menu-item
+                v-for="menu in menus"
+                :key="menu.key"
+                class="menu-item"
+                :class="{ [menu.key]: true }"
+              >
+                {{ menu.label }}
+              </a-menu-item>
+            </a-menu>
+          </template>
+          <div class="avatar">
+            <a-avatar :size="32">
+              <template #icon>
+                <img :src="userStore.current.avatar" />
+              </template>
+            </a-avatar>
+            <span>
+              {{ userStore.current.nickname }}
+              <DownOutlined />
+            </span>
+          </div>
+        </a-dropdown>
+      </div>
     </div>
   </a-layout-header>
 </template>
@@ -40,11 +67,40 @@ import { useUserStore } from '@/store/modules/user'
 import { postLogout } from '@/api'
 import { mainURL } from '@/env'
 import logoPng from '@/assets/images/logo.png'
+import { useLocaleStore } from '@/store/modules/locale'
+import { useI18n } from '@/hook/useI18n'
+import { useLocale } from '@/locales/useLocale'
+import { computed, unref, inject } from 'vue'
+import { LocaleType } from '#/config'
+import { showLoading } from '@/components/loading'
+
+const getImgSrc = inject('getImgSrc')
 
 defineOptions({ name: 'LayoutHeader' })
 
 const userStore = useUserStore()
+
 userStore.fetch()
+const { localInfo, getLocale } = useLocaleStore()
+
+console.log('localInfo', localInfo)
+const { t } = useI18n()
+const currentLang = computed(() => {
+  return {
+    key: unref(getLocale),
+    label: t(`base.lang.${unref(getLocale)}`)
+  }
+})
+console.log('getImgSrc', getImgSrc)
+const langList = localInfo.availableLocales.map((item: string) => {
+  return {
+    key: item,
+    label: t(`base.lang.${item}`),
+    // icon: getImgSrc(unref(getLocale))
+  }
+})
+
+console.log('langList', langList)
 
 const menus = [
   { label: '个人中心', key: 'user' },
@@ -58,6 +114,17 @@ const handlerMenuClick: MenuProps['onClick'] = async e => {
     location.href = `${mainURL}/#/information`
   }
 }
+
+const handlerLangClick: MenuProps['onClick'] = async e => {
+  console.log(e.key)
+  showLoading()
+  const { changeLocale } = useLocale()
+  changeLocale(e.key as LocaleType)
+  // location.reload()
+  setTimeout(() => {
+    location.reload()
+  }, 100)
+}
 </script>
 <style lang="scss">
 .menu-item {
@@ -81,6 +148,10 @@ const handlerMenuClick: MenuProps['onClick'] = async e => {
     }
   }
 }
+.right_menu_container {
+  display: flex;
+  flex-direction: row;
+}
 
 .content-layout {
   display: flex;

src/locales/helper.ts

@@ -1,4 +1,4 @@
-import type { LocaleType } from '/#/config'
+import type { LocaleType } from '#/config'
 
 import { set } from 'lodash-es'
 

src/locales/lang/en.ts

@@ -1,7 +1,9 @@
 import { genMessage } from '../helper'
 import antdLocale from 'ant-design-vue/es/locale/en_US'
 
-const modules = import.meta.globEager('./en/**/*.ts')
+// const modules = import.meta.globEager('./en/**/*.ts')
+const modules = import.meta.glob('./en/**/*.ts', { eager: true })
+
 export default {
   message: {
     ...genMessage(modules, 'en'),

src/locales/lang/en/base.ts

@@ -1,3 +1,12 @@
 export default {
-  name: 'testslslslsls'
+  lang: {
+    en: 'English',
+    zh_CN: '简体中文'
+  },
+  personalCenter: '个人中心',
+  logout: '退出登录',
+  startLivestring: '开始带看',
+  edit: '编辑',
+  share: '分享',
+  delede: '删除'
 }

src/locales/lang/en/room.ts

@@ -0,0 +1,9 @@
+export default {
+  createRoom: 'create Room',
+  personalCenter: '个人中心',
+  logout: '退出登录',
+  startLivestring: '开始带看',
+  edit: '编辑',
+  share: '分享',
+  delede: '删除'
+}

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

@@ -1,4 +1,12 @@
 export default {
-  name: '测试',
-  ttt: '11111'
+  lang: {
+    en: 'English',
+    zh_CN: '简体中文'
+  },
+  personalCenter: '个人中心',
+  logout: '退出登录',
+  startLivestring: '开始带看',
+  edit: '编辑',
+  share: '分享',
+  delede: '删除'
 }

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

@@ -0,0 +1,9 @@
+export default {
+  createRoom: '创建房间',
+  personalCenter: '个人中心',
+  logout: '退出登录',
+  startLivestring: '开始带看',
+  edit: '编辑',
+  share: '分享',
+  delede: '删除'
+}

src/settings/localeSetting.ts

@@ -1,4 +1,4 @@
-import type { LocaleSetting, LocaleType } from '/#/config'
+import type { LocaleSetting, LocaleType } from '#/config'
 
 export const LOCALE: { [key: string]: LocaleType } = {
   ZH_CN: 'zh_CN',

src/store/modules/locale.ts

@@ -1,4 +1,4 @@
-import type { LocaleSetting, LocaleType } from '/#/config'
+import type { LocaleSetting, LocaleType } from '#/config'
 
 import { defineStore } from 'pinia'
 import { store } from '@/store'

src/utils/getImgSrc.ts

@@ -0,0 +1,7 @@
+const getImgSrc = (name: string) => {
+  if (typeof name === 'undefined') return 'error.png'
+  const path = `/src/assets/images/${name}.png`
+  const modules = import.meta.globEager('/src/assets/images/*')
+  return modules[path]?.default
+}
+export { getImgSrc }

src/views/room/list.vue

@@ -19,7 +19,7 @@
   >
     <template v-if="!keyword" #undata>
       <a-button type="primary" shape="round" size="middle" @click="editRoom()">
-        创建房间{{ t('name') }}
+        {{ t('room.createRoom') }}
       </a-button>
     </template>
     <a-list
@@ -41,7 +41,7 @@
             <a-button shape="circle" class="button" type="primary">
               <plus-outlined class="add-room-icon" />
             </a-button>
-            <p>创建房间</p>
+            <p>{{ t('room.createRoom') }}</p>
           </a-card>
         </a-list-item>
       </template>
@@ -222,6 +222,7 @@ const headerVisible = useVisible({
   height: 321px;
   cursor: pointer;
   display: flex;
+  text-align: center;
   align-items: center;
   justify-content: center;