feat: add i18n

package-lock.json

@@ -35,6 +35,7 @@
         "throttle-debounce": "^3.0.1",
         "vite-plugin-compression": "^0.5.1",
         "vue": "3.4.19",
+        "vue-i18n": "^9.13.1",
         "vue-router": "^4.0.0-0",
         "vuedraggable": "^4.1.0"
       },
@@ -631,6 +632,38 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.13.1.tgz",
+      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.13.1",
+        "@intlify/shared": "9.13.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
+      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "dependencies": {
+        "@intlify/shared": "9.13.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.13.1.tgz",
+      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -4169,6 +4202,22 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.13.1.tgz",
+      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "dependencies": {
+        "@intlify/core-base": "9.13.1",
+        "@intlify/shared": "9.13.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",

package.json

@@ -38,6 +38,7 @@
     "throttle-debounce": "^3.0.1",
     "vite-plugin-compression": "^0.5.1",
     "vue": "3.4.19",
+    "vue-i18n": "^9.13.1",
     "vue-router": "^4.0.0-0",
     "vuedraggable": "^4.1.0"
   },

src/App.vue

@@ -1,24 +1,34 @@
-<!--
- * @Author: ShawnPhang
- * @Date: 2023-09-18 17:34:44
- * @Description:  
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-20 16:10:58
--->
 <template>
-  <div id="appindex">
-    <div class="viewWrap">
+  <div id="app-view">
+    <el-config-provider :locale="locale">
       <router-view />
-    </div>
+    </el-config-provider>
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+import en from 'element-plus/es/locale/lang/en'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { useI18n } from 'vue-i18n'
+import { getBrowserLang } from './languages'
+
+const lang = getBrowserLang()
+
+const i18n = useI18n()
+onMounted(() => {
+  i18n.locale.value = lang
+})
+
+// 配置语言,否则element默认是英语
+const locale = computed(() => {
+  return lang == 'zh' ? zhCn : en
+})
+</script>
+
 <style lang="less">
-#appindex {
+#app-view {
   min-width: 1180px;
-  .viewWrap {
-    min-height: calc(110vh - 110px);
-    min-width: 1170px;
-  }
 }
 </style>

src/components/modules/widgets/wImage/wImage.vue

@@ -231,6 +231,12 @@ function updateRecord() {
     }
   }
   updateZoom()
+  // 获取点位
+  if (!isDraw.value) {
+    if (targetRef.value) {
+      const read = new PointImg(targetRef.value)
+    }
+  }
 }
 
 function setTransform(attrName: string, value: string | number) {

src/languages/index.ts

@@ -0,0 +1,39 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2024-05-19 04:14:02
+ * @Description: i18n 示例
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-05-19 05:19:57
+ */
+import { createI18n } from 'vue-i18n'
+
+import zh from './modules/zh'
+import en from './modules/en'
+
+const i18n = createI18n({
+  // Use Composition API, Set to false
+  allowComposition: true,
+  legacy: false,
+  locale: getBrowserLang(),
+  messages: {
+    zh,
+    en,
+  },
+})
+
+/**
+ * @description 获取浏览器默认语言
+ * @returns {String}
+ */
+export function getBrowserLang() {
+  let browserLang = navigator.language ? navigator.language : navigator.browserLanguage
+  let defaultBrowserLang = ''
+  if (['cn', 'zh', 'zh-cn'].includes(browserLang.toLowerCase())) {
+    defaultBrowserLang = 'zh'
+  } else {
+    defaultBrowserLang = 'en'
+  }
+  return defaultBrowserLang
+}
+
+export default i18n

src/languages/modules/en/header.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2024-05-19 05:14:04
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-05-19 05:14:30
+ */
+export default {
+  logout: 'Logout',
+  save: 'Save',
+  download: 'Download',
+}

src/languages/modules/en/index.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2024-05-19 04:14:31
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-05-19 05:17:29
+ */
+import header from "./header"
+export default {
+  home: {
+    welcome: 'Welcome',
+  },
+  tabs: {
+    refresh: 'Refresh',
+  },
+  header
+}

src/languages/modules/zh/header.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2024-05-19 05:14:10
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-05-19 05:15:09
+ */
+export default {
+  logout: '退出登录',
+  save: '保存',
+  download: '下载作品',
+}

src/languages/modules/zh/index.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2024-05-19 04:14:35
+ * @Description:  
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-05-19 05:17:16
+ */
+import header from './header'
+export default {
+  home: {
+    welcome: '欢迎使用',
+  },
+  tabs: {
+    refresh: '刷新',
+  },
+  header,
+}

src/main.ts

@@ -1,10 +1,3 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2022-03-03 14:13:16
- * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2024-04-08 18:19:35
- */
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -13,6 +6,7 @@ import 'normalize.css/normalize.css'
 import '@/assets/styles/index.less'
 import elementConfig from './utils/widgets/elementConfig'
 import { createPinia } from 'pinia'
+import I18n from '@/languages/index'
 
 const pinia = createPinia()
 const app = createApp(App)
@@ -30,4 +24,5 @@ app
   .use(pinia)
   .use(router)
   .use(utils)
+  .use(I18n)
   .mount('#app')

src/views/Index.vue

@@ -4,7 +4,7 @@
  * @Description: 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastUpdateContent: Support typescript
- * @LastEditTime: 2024-04-20 11:14:13
+ * @LastEditTime: 2024-05-19 05:19:03
 -->
 <template>
   <div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
@@ -25,8 +25,8 @@
           <el-divider direction="vertical" />
         </div>
         <HeaderOptions ref="optionsRef" v-model="state.isContinue" @change="optionsChange">
-          <el-button size="large" class="primary-btn" @click="dealWith('save')">保存</el-button>
-          <el-button ref="ref4" size="large" class="primary-btn" plain type="primary" @click="dealWith('download')">下载作品</el-button>
+          <el-button size="large" class="primary-btn" @click="dealWith('save')">{{ $t('header.save') }}</el-button>
+          <el-button ref="ref4" size="large" class="primary-btn" plain type="primary" @click="dealWith('download')">{{ $t('header.download') }}</el-button>
         </HeaderOptions>
       </div>
     </div>