add: 添加多语

packages/webview/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "test": "test"
+}

packages/webview/locales/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "test": "测试"
+}

packages/webview/package.json

@@ -15,7 +15,8 @@
     "axios": "^0.27.2",
     "dayjs": "^1.11.6",
     "pinia": "^2.0.36",
-    "vue": "^3.2.41"
+    "vue": "^3.2.41",
+    "vue-i18n": "9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.2",

packages/webview/src/components/HeaderItems/HeaderItems.vue

@@ -41,7 +41,7 @@
           <div class="drop-item" :class="{ active: toolMode === 'form' }" @click="changeToolMode('form')">Forms</div>
           <div class="drop-item" :class="{ active: toolMode === 'sign' }" @click="openSignCreatePanel()">Signatures</div>
           <div class="drop-item" :class="{ active: toolMode === 'security' }" @click="changeToolMode('security')">Security</div>
-          <div class="drop-item" :class="{ active: toolMode === 'compare' }" @click="changeToolMode('compare')">Document Comparison</div>
+          <div class="drop-item" :class="{ active: toolMode === 'compare' }" @click="changeToolMode('compare')">{{ $t('test') }}</div>
         </div>
       </n-popover>
     </div>
@@ -52,7 +52,7 @@
         <div class="item" :class="{ active: toolMode === 'form' }" @click="changeToolMode('form')">Forms</div>
         <div class="item" :class="{ active: toolMode === 'sign' }" @click="openSignCreatePanel()">Signatures</div>
         <div class="item" :class="{ active: toolMode === 'security' }" @click="changeToolMode('security')">Security</div>
-        <div class="item" :class="{ active: toolMode === 'compare' }" @click="changeToolMode('compare')">Document Comparison</div>
+        <div class="item" :class="{ active: toolMode === 'compare' }" @click="changeToolMode('compare')">{{ $t('test') }}</div>
       </div>
     </div>
 

packages/webview/src/main.js

@@ -1,11 +1,28 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import en from '../locales/en.json'
+import zhCN from '../locales/zh-CN.json'
+
 import App from '@/components/App/index.vue'
 import { setupStore } from '@/stores'
 
 import './assets/main.scss'
 
+
+const i18n = createI18n({
+  // something vue-i18n options here ...
+  locale: 'zh-CN',
+  fallbackLocale: 'en',
+  messages: {
+    en,
+    'zh-CN': zhCN
+  }
+})
+
 const app = createApp(App)
 
 setupStore(app)
 
+app.use(i18n)
+
 app.mount('#app')

pnpm-lock.yaml

@@ -80,6 +80,7 @@ importers:
       vite-svg-plugin: ^1.0.2
       vitest: ^0.24.3
       vue: ^3.2.41
+      vue-i18n: '9'
     dependencies:
       '@vue-pdf/core': link:../core
       '@vueuse/core': 9.13.0_vue@3.2.47
@@ -88,6 +89,7 @@ importers:
       dayjs: 1.11.7
       pinia: 2.0.36_vue@3.2.47
       vue: 3.2.47
+      vue-i18n: 9.3.0_vue@3.2.47
     devDependencies:
       '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.47
       '@vue/test-utils': 2.3.2_vue@3.2.47
@@ -1377,6 +1379,44 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@intlify/core-base/9.3.0:
+    resolution: {integrity: sha512-SRzn8TMnPZ6MY8OFrgouRq4DGaf01SHcJEF6FglYFYvRkgPzziEcQe+v2PD+O5lUp/rJafP4dabm1CmsVAA7rA==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/devtools-if': 9.3.0
+      '@intlify/message-compiler': 9.3.0
+      '@intlify/shared': 9.3.0
+      '@intlify/vue-devtools': 9.3.0
+    dev: false
+
+  /@intlify/devtools-if/9.3.0:
+    resolution: {integrity: sha512-5aKZnqj0Ff4dfwBX2Oo+MheVs00CBnC0RzWK26aT2M4AF0cxdFLOJAs51/eHT01jmzrxSvfBMjdArUWHwgetfg==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/shared': 9.3.0
+    dev: false
+
+  /@intlify/message-compiler/9.3.0:
+    resolution: {integrity: sha512-D8tSJEhTCSFcCzkThjE4Sbk1tIdvzkYa1FaVIzUtZ8hKPATvokNrOiDw1i/h671m8A80l9Ywq594i/LPTB6EJA==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/shared': 9.3.0
+      source-map-js: 1.0.2
+    dev: false
+
+  /@intlify/shared/9.3.0:
+    resolution: {integrity: sha512-MMGRz6zWxtz7rHtxIIdnyb8SYOIaaseN1IvUhAEs9tOW4u77RD4DFp4qgPXesp2Gxo/5QitH9kwSs0jnxGUNEw==}
+    engines: {node: '>= 16'}
+    dev: false
+
+  /@intlify/vue-devtools/9.3.0:
+    resolution: {integrity: sha512-kEaxIz1VEgsz2q5RhoS+fBGTkXr/4+pxmK9mN14+speVGb82HPRntKBmz0GO18I1JisD4Z0vAva+KCTHGeAqbQ==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/core-base': 9.3.0
+      '@intlify/shared': 9.3.0
+    dev: false
+
   /@jridgewell/gen-mapping/0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
@@ -4794,6 +4834,19 @@ packages:
       - supports-color
     dev: true
 
+  /vue-i18n/9.3.0_vue@3.2.47:
+    resolution: {integrity: sha512-+2L+ae/e4+fixhjym3lgzGCGQG8wVGlGrDHzjfdgUudheHvbVHu5i6tn6FF+buH75UFA7T5ZO2ZO7zrh6CzuaA==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.3.0
+      '@intlify/shared': 9.3.0
+      '@intlify/vue-devtools': 9.3.0
+      '@vue/devtools-api': 6.5.0
+      vue: 3.2.47
+    dev: false
+
   /vue/3.2.47:
     resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
     dependencies: