增加i18n可调用

.vscode/extensions.json

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

src/App.vue

@@ -20,8 +20,22 @@
   import { KankanMetaDataType } from '/#/sdk';
   // import Dialog from '/@/components/basic/dialog';
   import { useRtcStore } from './store/modules/rtc';
+  import { useLocale } from '/@/locales/useLocale';
+  import { LocaleType } from '/#/config';
+  import { useI18n } from '/@/hooks/useI18n';
   const { createTourPlayer } = useTourPlayer();
   const showDebug = ref(true);
+  const { t } = useI18n();
+
+  const { changeLocale } = useLocale();
+  // 设置语言
+  const defaultLang = ['zh', 'en'];
+  const lang = browser.getURLParam('lang');
+  if (lang && defaultLang.includes(browser.getURLParam('lang'))) {
+    changeLocale(lang as LocaleType);
+  } else {
+    changeLocale('zh');
+  }
 
   const sceneStore = useSceneStore();
   const appStore = useAppStore();
@@ -245,7 +259,8 @@
 
 <template>
   <div class="debug flex justify-between px-1" v-if="showDebug">
-    <span>调试信息：小地图显示：{{ !!unref(refMiniMap) && player.showWidgets }}</span
+    <span>
+      {{ t('base.debuginfo') }}：小地图显示：{{ !!unref(refMiniMap) && player.showWidgets }} </span
     ><span class="close" @click.stop="showDebug = false">X</span>
   </div>
   <LoadingLogo :thumb="true" />

src/components/chatRoom/index.vue

@@ -45,7 +45,7 @@
           <div class="mic_no" v-if="audioMuted" @click="handleNoMute"></div>
         </template>
 
-        <div style="font-size: 0.65rem" v-if="isNativeLeader">
+        <div style="font-size: 0.65rem" v-if="isNativeLeader && sceneList.length > 1">
           <ImageIcon type="scene" @click="showScenes = !showScenes" />
         </div>
         <div class="exit" @click="showCloseDialog = true"></div>
@@ -174,11 +174,11 @@
   const showCloseDialog = ref(false);
   const showCreateNameDialog = ref(false);
 
-  // watchEffect(() => {
+  const { sceneList } = useRoom();
 
-  // });
-
- 
+  watchEffect(() => {
+    console.log('sceneList', sceneList);
+  });
   watch(
     () => currentSession,
     (val) => {

src/components/custom/panel.vue

@@ -3,7 +3,7 @@
     <span class="icon" @click="handlePlayTours" v-if="hasTours">
       <Icon type="play" />
     </span>
-    <span class="icon" @click="showScenes = !showScenes">
+    <span class="icon" @click="showScenes = !showScenes" v-if="sceneList.length > 1">
       <Icon type="scene" />
     </span>
     <span class="ctrl" :class="{ show }" @click="show = !show">
@@ -22,7 +22,7 @@
   import { useRoom } from '/@/hooks/useRoom';
   import { useTourPlayer } from '/@/hooks/userTourPlayer';
 
-  const { initialRoom, changeScene } = useRoom();
+  const { initialRoom, changeScene, sceneList } = useRoom();
 
   const show = ref(false);
 

src/hooks/useI18n.ts

@@ -1,51 +1,52 @@
-// import { i18n } from '/@/locales/setupI18n';
-
-// type I18nGlobalTranslation = {
-//   (key: string): string;
-//   (key: string, locale: string): string;
-//   (key: string, locale: string, list: unknown[]): string;
-//   (key: string, locale: string, named: Record<string, unknown>): string;
-//   (key: string, list: unknown[]): string;
-//   (key: string, named: Record<string, unknown>): string;
-// };
-
-// type I18nTranslationRestParameters = [string, any];
-
-// function getKey(namespace: string | undefined, key: string) {
-//   if (!namespace) {
-//     return key;
-//   }
-//   if (key.startsWith(namespace)) {
-//     return key;
-//   }
-//   return `${namespace}.${key}`;
-// }
-
-// export function useI18n(namespace?: string): {
-//   t: I18nGlobalTranslation;
-// } {
-//   const normalFn = {
-//     t: (key: string) => {
-//       return getKey(namespace, key);
-//     },
-//   };
-
-//   if (!i18n) {
-//     return normalFn;
-//   }
-
-//   const { t, ...methods } = i18n.global;
-
-//   const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
-//     if (!key) return '';
-//     if (!key.includes('.') && !namespace) return key;
-//     const res = t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters));
-//     return res;
-//   };
-//   return {
-//     ...methods,
-//     t: tFn,
-//   };
-// }
-
-// export const t = (key: string) => key;
+import { i18n } from '/@/locales/setupI18n';
+
+type I18nGlobalTranslation = {
+  (key: string): string;
+  (key: string, locale: string): string;
+  (key: string, locale: string, list: unknown[]): string;
+  (key: string, locale: string, named: Record<string, unknown>): string;
+  (key: string, list: unknown[]): string;
+  (key: string, named: Record<string, unknown>): string;
+};
+
+type I18nTranslationRestParameters = [string, any];
+
+function getKey(namespace: string | undefined, key: string) {
+  if (!namespace) {
+    return key;
+  }
+  if (key.startsWith(namespace)) {
+    return key;
+  }
+  return `${namespace}.${key}`;
+}
+
+export function useI18n(namespace?: string): {
+  t: I18nGlobalTranslation;
+} {
+  const normalFn = {
+    t: (key: string) => {
+      return getKey(namespace, key);
+    },
+  };
+
+  if (!i18n) {
+    return normalFn;
+  }
+
+  const { t, ...methods } = i18n.global;
+
+  const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
+    if (!key) return '';
+    if (!key.includes('.') && !namespace) return key;
+    // @ts-ignore
+    const res = t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters));
+    return res;
+  };
+  return {
+    ...methods,
+    t: tFn,
+  };
+}
+
+export const t = (key: string) => key;

src/locales/lang/en.ts

@@ -0,0 +1,15 @@
+import { genMessage } from '../helper';
+// import antdLocale from 'ant-design-vue/es/locale/en_US'
+
+type modulesType = Record<string, Record<string, any>>;
+// const modules = import.meta.globEager('./en/**/*.ts')
+const modules: modulesType = import.meta.glob('./en/**/*.ts', { eager: true });
+
+export default {
+  message: {
+    ...genMessage(modules, 'en'),
+    // antdLocale
+  },
+  dateLocale: null,
+  dateLocaleName: 'en',
+};

src/locales/lang/en/base.ts

@@ -0,0 +1,3 @@
+export default {
+  debuginfo: 'debug info',
+};

src/locales/lang/en/index.ts

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

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

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

src/locales/lang/zh.ts

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

src/locales/lang/zh/base.ts

@@ -0,0 +1,3 @@
+export default {
+  debuginfo: '调试信息',
+};

src/main.ts

@@ -7,7 +7,7 @@ import 'virtual:windi-utilities.css';
 import { setupStore } from '/@/store';
 import App from './App.vue';
 import registerComponent from '/@/components/registerComponent';
-
+import { setupI18n } from '/@/locales/setupI18n';
 // import Components from "./global_components";
 
 async function bootstrap() {
@@ -16,6 +16,7 @@ async function bootstrap() {
   // Configure store
   setupStore(app);
   app.use(registerComponent);
+  await setupI18n(app);
 
   app.mount('#app');
 }

src/store/modules/locale.ts

@@ -11,11 +11,11 @@ export const useLocaleStore = defineStore({
   id: 'app-locale',
   state: (): LocaleState => ({
     localInfo: {
-      locale: 'zh_CN',
+      locale: 'zh',
       // default language
-      fallback: 'zh_CN',
+      fallback: 'zh',
       // available Locales
-      availableLocales: ['zh_CN', 'en'],
+      availableLocales: ['zh', 'en'],
     },
   }),
   persist: {

types/config.d.ts

@@ -1,4 +1,4 @@
-export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
+export type LocaleType = 'zh' | 'en' | 'ru' | 'ja' | 'ko';
 
 export interface LocaleSetting {
   // showPicker: boolean;