update

.env.development

@@ -1,3 +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
+VITE_LIVE_STEAM_URL=https://test.4dkankan.com/livestream

src/App.vue

@@ -31,23 +31,8 @@ export default defineComponent({
     LayoutHeader
   },
   setup() {
-    // const handleChangeLocale = (lang: LocaleType) => {
-    //   const { changeLocale } = useLocale()
-    //   changeLocale(lang)
-    // }
     onMounted(() => {
-      // const lang = browser.getURLParam('lang')
-      // console.log('lang', lang)
-
-      // if (lang) {
-      //   handleChangeLocale(lang as LocaleType)
-      // } else {
-      //   handleChangeLocale('zh')
-      // }
-
-      // localeStore.initLocale()
-      // changeLocale('zh_CN')
-      // console.log('getLocale', getLocale.value)
+ 
     })
     return { contentRef }
   }

src/layout/header.vue

@@ -15,6 +15,7 @@
                 :class="{ [menu.key]: true }"
               >
                 <img style="height: 10px" :src="menu.icon" />
+               
                 {{ menu.label }}
               </a-menu-item>
             </a-menu>
@@ -41,7 +42,7 @@
                 class="menu-item"
                 :class="{ [menu.key]: true }"
               >
-                {{ menu.label }}
+                {{ t(menu.label) }}
               </a-menu-item>
             </a-menu>
           </template>
@@ -76,6 +77,7 @@ import { LocaleType } from '#/config'
 import { showLoading } from '@/components/loading'
 import { getImgSrc } from '@/utils/getImgSrc'
 import browser from '@/utils/browser'
+import { storeToRefs } from 'pinia'
 // const getImgSrc = inject('getImgSrc')
 
 defineOptions({ name: 'LayoutHeader' })
@@ -84,6 +86,7 @@ const userStore = useUserStore()
 
 userStore.fetch()
 const { localInfo, getLocale } = useLocaleStore()
+
 const { t } = useI18n()
 const currentLang = ref({
   key: getLocale,
@@ -96,7 +99,7 @@ const currentLang = ref({
 //     label: t(`base.lang.${unref(getLocale)}`)
 //   }
 // })
-const isEn = computed(() => unref(getLocale) === 'en')
+const isEn = computed(() => unref(currentLang).key === 'en')
 // console.log('getImgSrc', getImgSrc)
 const langList = localInfo.availableLocales.map((item: string) => {
   return {
@@ -109,8 +112,8 @@ const langList = localInfo.availableLocales.map((item: string) => {
 console.log('langList', langList)
 
 const menus = [
-  { label: t('base.personalCenter'), key: 'user' },
-  { label: t('base.logout'), key: 'logout' }
+  { label: 'base.personalCenter', key: 'user' },
+  { label: 'base.logout', key: 'logout' }
 ]
 const handlerMenuClick: MenuProps['onClick'] = async e => {
   if (e.key === 'logout') {
@@ -123,15 +126,18 @@ const handlerMenuClick: MenuProps['onClick'] = async e => {
 
 const handlerLangClick: MenuProps['onClick'] = async e => {
   console.log(e.key)
-  // showLoading()
+  showLoading()
   const searchParam = new URLSearchParams(location.search)
   searchParam.set('lang', `${e.key}`)
+  const { changeLocale } = useLocale()
+  changeLocale(e.key as LocaleType)
   console.log('searchParam', searchParam.toString())
-  const replaceUrl = location.origin + location.pathname + '?' + searchParam.toString();
-  history.replaceState(null, '', replaceUrl);
+  const replaceUrl =
+    location.origin + location.pathname + '?' + searchParam.toString()
+  history.replaceState(null, '', replaceUrl)
   setTimeout(() => {
     location.reload()
-  }, 1000)
+  }, 300)
 }
 
 onMounted(() => {
@@ -143,16 +149,6 @@ onMounted(() => {
     currentLang.value.key = lang
     currentLang.value.label = t(`base.lang.${unref(lang)}`)
   }
-
-  watch(
-    () => getLocale,
-    () => {
-      setCurrentLang(getLocale)
-    },
-    {
-      immediate: true
-    }
-  )
   const lang = browser.getURLParam('lang')
   let defaultLang: LocaleType = 'zh'
   console.log('lang', lang)

src/locales/lang/en/base.ts

@@ -15,5 +15,6 @@ export default {
   loginFail: 'login fail, please Login again!',
   saveSuccess: 'save successfully!',
   noSearchResult: 'No Search Result',
-  unSearchDesc:"您还没有场景，请先创建场景"
+  unSearchDesc: "您还没有场景，请先创建场景",
+  tourist: 'tourist'
 }

src/locales/lang/zh/base.ts

@@ -15,5 +15,6 @@ export default {
   loginFail: '登录状态失效，请重新登录',
   saveSuccess: '保存成功',
   noSearchResult: '未搜索到结果',
-  unSearchDesc:"您还没有场景，请先创建场景"
+  unSearchDesc:"您还没有场景，请先创建场景",
+  tourist: '游客'
 }

src/locales/useLocale.ts

@@ -17,11 +17,13 @@ function setI18nLanguage(locale: LocaleType) {
   const localeStore = useLocaleStoreWithOut()
 
   if (i18n.mode === 'legacy') {
+
     i18n.global.locale = locale
   } else {
     ; (i18n.global.locale as any).value = locale
   }
   localeStore.setLocaleInfo({ locale })
+  // localeStore.setSingleLocale(locale)
   setHtmlPageLang(locale)
 }
 

src/router/index.ts

@@ -1,11 +1,11 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from './config'
 import { computed } from 'vue'
 import { routesMetas } from './constant'
 
 import type { RoutesName } from './constant'
 
-export const history = createWebHashHistory()
+export const history = createWebHistory()
 export const router = createRouter({ history, routes })
 
 export const currentMeta = computed(() => {

src/store/modules/locale.ts

@@ -24,6 +24,7 @@ export const useLocaleStore = defineStore({
   },
   getters: {
     getLocale(): LocaleType {
+      console.log('getLocale', this.localInfo)
       return this.localInfo?.locale ?? 'zh'
     }
   },

src/store/modules/user.ts

@@ -2,9 +2,12 @@ import { fetchUser } from '@/api'
 import { defineStore } from 'pinia'
 
 import type { User } from '@/api'
+import { useI18n } from '@/hook/useI18n'
+
+const { t } = useI18n();
 
 const defUser: User = {
-  nickname: '游客',
+  nickname: t('base.tourist'),
   phone: '',
   avatar: 'https://4dkk.4dage.com/head/18819272208/head_1662022947583.png'
 }