多语种支持

src/example/components/header/actions.ts

@@ -4,7 +4,7 @@ import { animation } from "@/core/hook/use-animation";
 import saveAs from "@/utils/file-serve";
 import { ElMessage } from "element-plus";
 import { Mode } from "@/constant/mode";
-import { ui18n } from "@/lang";
+import { availableLocales, lang, langNameEum, ui18n } from "@/lang";
 
 export type Action = {
   handler?: (draw: Draw) => void;
@@ -22,7 +22,7 @@ const rotateView = (draw: Draw) => {
   animation({ rotation: 0 }, { rotation: Math.PI / 2 }, ({ rotation }) => {
     draw.viewer.rotatePixel(
       { x: dom.offsetWidth / 2, y: dom.offsetHeight / 2 },
-      rotation - rotated
+      rotation - rotated,
     );
     rotated = rotation;
   });
@@ -39,22 +39,22 @@ export const getHeaderActions = (draw: Draw) => {
   const floorCovers = computed(() =>
     draw.store
       .getTypeItems("image")
-      .filter((item) => item.key === "kankan-floor-cover")
+      .filter((item) => item.key === "kankan-floor-cover"),
   );
   const floorCoversHide = computed(() =>
-    floorCovers.value.some((image) => image.hide)
+    floorCovers.value.some((image) => image.hide),
   );
 
   return {
     undo: reactive({
       handler: () => draw.history.undo(),
-      text: ui18n.t('sys.actions.undo'),
+      text: ui18n.t("sys.actions.undo"),
       icon: "undo",
       disabled: computed(() => !draw.history.hasUndo.value),
     }),
     redo: reactive({
       handler: () => draw.history.redo(),
-      text: ui18n.t('sys.actions.redo'),
+      text: ui18n.t("sys.actions.redo"),
       icon: "redo",
       disabled: computed(() => !draw.history.hasRedo.value),
     }),
@@ -66,23 +66,23 @@ export const getHeaderActions = (draw: Draw) => {
         draw.store.clear();
       },
       disabled: computed(() => draw.drawing),
-      text: ui18n.t('sys.actions.clear'),
+      text: ui18n.t("sys.actions.clear"),
       icon: "clear",
     }),
     rotateView: reactive({
       handler: () => rotateView(draw),
-      text: ui18n.t('sys.actions.rotate'),
+      text: ui18n.t("sys.actions.rotate"),
       icon: "rotate",
     }),
     initViewport: reactive({
       handler: () => draw.initViewport(),
-      text: ui18n.t('sys.actions.a_adapt'),
+      text: ui18n.t("sys.actions.a_adapt"),
       icon: "a_adapt",
     }),
     toggleShow: reactive({
       handler: () => {
         draw.history.onceTrack(() => {
-          const val = !floorCoversHide.value
+          const val = !floorCoversHide.value;
           floorCovers.value.forEach((image) => {
             draw.store.setItem("image", {
               value: { ...image, hide: val },
@@ -91,14 +91,18 @@ export const getHeaderActions = (draw: Draw) => {
           });
         });
       },
-      text: computed(() => (floorCoversHide.value ? ui18n.t('sys.actions.floor.show') : ui18n.t('sys.actions.floor.hide'))),
+      text: computed(() =>
+        floorCoversHide.value
+          ? ui18n.t("sys.actions.floor.show")
+          : ui18n.t("sys.actions.floor.hide"),
+      ),
       icon: computed(() => "visible___" + (floorCoversHide.value ? "n" : "s")),
-      disabled: computed(() => !floorCovers.value.length)
+      disabled: computed(() => !floorCovers.value.length),
     }),
     expose: reactive({
       disabled: computed(() => draw.drawing),
       handler: () => {},
-      text: ui18n.t('sys.actions.download.name'),
+      text: ui18n.t("sys.actions.download.name"),
       icon: "download",
       children: [
         {
@@ -137,7 +141,7 @@ export const getHeaderActions = (draw: Draw) => {
               pop();
               draw.config.back = oldBack;
               draw.config.showGrid = oldShowGrid;
-              ElMessage.success(ui18n.t('sys.actions.download.success'));
+              ElMessage.success(ui18n.t("sys.actions.download.success"));
             });
           },
           text: "PNG",
@@ -155,5 +159,16 @@ export const getHeaderActions = (draw: Draw) => {
         },
       ],
     }),
+    lang: {
+      handler: () => {},
+      text: ui18n.t("sys.lang"),
+      icon: "nav-geography",
+      children: Object.keys(availableLocales).map((key) => ({
+        text: availableLocales[key as langNameEum],
+        handler: () => {
+          ui18n.change(key as langNameEum);
+        },
+      })),
+    },
   };
 };

src/example/components/header/index.vue

@@ -117,10 +117,10 @@ defineEmits<{ (e: "back"): void }>();
 }
 
 .operate-dropdown {
-  height: 100%;
-  display: flex;
   outline: none !important;
   font-size: inherit;
+
+    vertical-align: baseline;
 }
 
 .nav-back {

src/example/components/slide/actions.ts

@@ -202,7 +202,7 @@ const setPaper = (draw: Draw, p: number[], scale: number) => {
 
 export const paper = {
   icon: "drawing",
-  name: ui18n.t('sys.actions.paper.ma,e'),
+  name: ui18n.t('sys.actions.paper.name'),
   type: "sub-menu-horizontal",
   value: uuid(),
   children: [

src/example/fuse/views/overview/header.vue

@@ -103,6 +103,7 @@ const actions = [
         },
       })),
     },
+    baseActions.lang
   ],
 ];
 

src/example/fuse/views/tabulation/header.vue

@@ -143,6 +143,7 @@ const actions = [
       text: ui18n.t('sys.actions.download.name'),
       icon: "download",
     },
+    baseActions.lang
   ],
 ];
 

src/lang/index.ts

@@ -2,6 +2,14 @@ import { App } from "vue";
 import { createI18n, I18n as BaseI18n } from "vue-i18n";
 import { params } from "@/example/env";
 import zh from "./locales/zh.json";
+import en from './locales/en.json'
+import ja from './locales/ja.json'
+import kr from './locales/ko.json'
+import fr from './locales/fr.json'
+import pt from './locales/pt.json'
+import ru from './locales/ru.json'
+import es from './locales/es.json'
+import th from './locales/th.json'
 
 type I18n = BaseI18n & {
   global: {
@@ -13,12 +21,31 @@ type I18n = BaseI18n & {
 // 语言支持
 export enum langNameEum {
   zh = "zh",
+  en = 'en',
+  ja = 'ja',
+  kr = 'kr',
+  fr = 'fr',
+  pt = 'pt',
+  ru = 'ru',
+  es = 'es',
+  th = 'th'
 }
 
+
 export const lang = params.value.lang || langNameEum.zh;
 export const availableLocales = {
     [langNameEum.zh]: "中文",
+    [langNameEum.en]: 'English',
+    [langNameEum.ja]: '日本語',
+    [langNameEum.kr]: '한국인',
+    [langNameEum.fr]: 'français',
+    [langNameEum.pt]: 'português',
+    [langNameEum.ru]: 'русский',
+    [langNameEum.es]: 'español',
+    [langNameEum.th]: 'ไทย'
 }
+
+
 const i18n: I18n = createI18n({
   legacy: false,
   fallbackLocale: langNameEum.zh,
@@ -29,11 +56,23 @@ const i18n: I18n = createI18n({
   missingWarn: false,
   silentFallbackWarn: true,
 }) as I18n;
-i18n.global.setLocaleMessage(langNameEum.zh, zh);
+
+
+i18n.global.setLocaleMessage(langNameEum.zh, zh)
+i18n.global.setLocaleMessage(langNameEum.en, en)
+i18n.global.setLocaleMessage(langNameEum.ja, ja)
+i18n.global.setLocaleMessage(langNameEum.kr, kr)
+i18n.global.setLocaleMessage(langNameEum.fr, fr)
+i18n.global.setLocaleMessage(langNameEum.pt, pt)
+i18n.global.setLocaleMessage(langNameEum.ru, ru)
+i18n.global.setLocaleMessage(langNameEum.es, es)
+i18n.global.setLocaleMessage(langNameEum.th, th)
 
 i18n.global.change = (lang) => {
   params.value.lang = lang
-  location.reload()
+  setTimeout(() => {
+    location.reload()  
+  }, 500);
 }
 export const ui18n = i18n.global
 export const setupI18n = (app: App) => {

src/lang/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "overview": {
+    "name": "test"
+  }
+}

src/lang/locales/es.json

@@ -0,0 +1,2 @@
+{
+}

src/lang/locales/fr.json

@@ -0,0 +1,2 @@
+{
+}

src/lang/locales/ja.json

@@ -0,0 +1 @@
+{}

src/lang/locales/ko.json

@@ -0,0 +1,2 @@
+{
+}

src/lang/locales/pt.json

@@ -0,0 +1,2 @@
+{
+}

src/lang/locales/ru.json

@@ -0,0 +1,2 @@
+{
+}

src/lang/locales/th.json

@@ -0,0 +1,2 @@
+{
+}

src/lang/locales/zh.json

@@ -324,6 +324,7 @@
       "exit": "按ESC键可退出全屏模式"
     },
     "hide": "隐藏",
+    "lang": "切换语言",
     "length": "长度",
     "line": {
       "strokeWidth": "线宽"