update

src/App.vue

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

src/layout/header.vue

@@ -71,10 +71,11 @@ 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 } from 'vue'
+import { computed, onMounted, ref, unref, watch } from 'vue'
 import { LocaleType } from '#/config'
 import { showLoading } from '@/components/loading'
 import { getImgSrc } from '@/utils/getImgSrc'
+import browser from '@/utils/browser'
 // const getImgSrc = inject('getImgSrc')
 
 defineOptions({ name: 'LayoutHeader' })
@@ -83,15 +84,18 @@ 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)}`)
-  }
+const currentLang = ref({
+  key: getLocale,
+  label: t(`base.lang.${unref(getLocale)}`)
 })
+
+// const currentLang = computed(() => {
+//   return {
+//     key: getLocale,
+//     label: t(`base.lang.${unref(getLocale)}`)
+//   }
+// })
 const isEn = computed(() => unref(getLocale) === 'en')
 // console.log('getImgSrc', getImgSrc)
 const langList = localInfo.availableLocales.map((item: string) => {
@@ -119,14 +123,49 @@ const handlerMenuClick: MenuProps['onClick'] = async e => {
 
 const handlerLangClick: MenuProps['onClick'] = async e => {
   console.log(e.key)
-  showLoading()
-  const { changeLocale } = useLocale()
-  changeLocale(e.key as LocaleType)
-  // location.reload()
+  // showLoading()
+  const searchParam = new URLSearchParams(location.search)
+  searchParam.set('lang', `${e.key}`)
+  console.log('searchParam', searchParam.toString())
+  const replaceUrl = location.origin + location.pathname + '?' + searchParam.toString();
+  history.replaceState(null, '', replaceUrl);
   setTimeout(() => {
     location.reload()
   }, 100)
 }
+
+onMounted(() => {
+  const handleChangeLocale = (lang: LocaleType) => {
+    const { changeLocale } = useLocale()
+    changeLocale(lang)
+  }
+  const setCurrentLang = (lang: LocaleType) => {
+    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)
+
+  if (lang) {
+    defaultLang = lang as LocaleType
+    handleChangeLocale(lang as LocaleType)
+  } else {
+    defaultLang = 'zh'
+    handleChangeLocale('zh')
+  }
+  setCurrentLang(defaultLang)
+})
 </script>
 <style lang="scss">
 .menu-item {

src/locales/useLocale.ts

@@ -19,7 +19,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)
@@ -37,6 +37,7 @@ export function useLocale() {
   // Switching the language will change the locale of useI18n
   // And submit to configuration modification
   async function changeLocale(locale: LocaleType) {
+    const localeStore = useLocaleStoreWithOut()
     const globalI18n = i18n.global
     const currentLocale = unref(globalI18n.locale)
     if (currentLocale === locale) {
@@ -52,10 +53,13 @@ export function useLocale() {
     if (!langModule) return
 
     const { message } = langModule
-
+    localeStore.setLocaleInfo({
+      locale: locale
+    })
     globalI18n.setLocaleMessage(locale, message)
     loadLocalePool.push(locale)
 
+
     setI18nLanguage(locale)
     return locale
   }

src/store/modules/room.ts

@@ -65,7 +65,7 @@ export const useRoomStore = defineStore('room', {
       param.name && search.set('name', `${param.name}`)
       search.set('roomId', `roomId_${param.roomId}`)
       param.avatar && search.set('avatar', param.avatar)
-      param.lang && search.set('set', param.lang)
+      param.lang && search.set('lang', param.lang)
       param.userId && search.set('vruserId', `user_${param.userId}`)
       param.isTour && search.set('isTour', `${param.isTour}`)
       return liveStreamURL + '?' + search.toString()

src/views/room/list.vue

@@ -63,7 +63,7 @@
 <script setup lang="ts">
 import { useRoomStore } from '@/store/modules/room'
 import { useUserStore } from '@/store/modules/user'
-import { ref, computed, createVNode } from 'vue'
+import { ref, computed, createVNode, unref } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import { copyText } from '@/shared'
 import { renderModal } from '@/helper'
@@ -79,6 +79,7 @@ import { useI18n } from '@/hook/useI18n'
 
 import type { Room } from '@/store/modules/room'
 import { fetchRoomDetail } from '@/api'
+import { useLocale } from '@/locales/useLocale'
 
 defineOptions({ name: 'RoomList' })
 
@@ -150,7 +151,9 @@ const miniSyncRoom = async (room: Room, key?: 'leader') => {
 }
 const webSyncRoom = async (room: Room) => {
   // debugger
+
   const scenes = await fetchRoomDetail(room.id)
+  const { getLocale } = useLocale()
   const user = useUserStore().current
   console.log('scenes', scenes)
   const m = scenes.sceneData[0].num
@@ -161,7 +164,8 @@ const webSyncRoom = async (room: Room) => {
     name: scenes.roomHostName,
     avatar: encodeURIComponent(user.avatar) || '',
     userId: '1',
-    isTour: '0'
+    isTour: '0',
+    lang: unref(getLocale) || 'zh'
   })
   console.log('带看link', link)
   window.open(link, '_blank')

vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import ViteComponents from 'unplugin-vue-components/vite'
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
@@ -6,16 +6,16 @@ import DefineOptions from 'unplugin-vue-define-options/vite'
 
 import { resolve } from 'path'
 
-const proxy = {
-  '/api': {
-    target: 'http://v4-test.4dkankan.com/',
-    changeOrigin: true,
-    rewrite: path => path.replace(/^\/api/, '')
-  }
-}
+// const proxy = {
+//   '/api': {
+//     target: 'https://v4-test.4dkankan.com/',
+//     changeOrigin: true,
+//     rewrite: path => path.replace(/^\/api/, '')
+//   }
+// }
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default ({ mode }) => defineConfig({
   base: './',
   plugins: [
     vue(),
@@ -59,6 +59,12 @@ export default defineConfig({
     host: '0.0.0.0',
     port: 5173,
     open: true,
-    proxy: proxy
+    proxy: {
+      '/api': {
+        target: loadEnv(mode, process.cwd()).VITE_BASE_API_URL,
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api/, '')
+      }
+    }
   }
 })