From 05ca2995bf7ef0e2ff1c7ac9bac9379a3022781d Mon Sep 17 00:00:00 2001
From: lsewcx <lse2100852163.com>
Date: Fri, 12 Jul 2024 15:25:11 +0800
Subject: [PATCH] Added vue3-i18n, and added Chinese language at the same time

---
 package-lock.json                    | 47 +++++++--------
 package.json                         |  3 +-
 src/components/settings/Settings.vue | 88 +++++++++++++++++++---------
 src/locals/en/en.js                  | 30 ++++++++++
 src/locals/index.js                  | 15 +++++
 src/locals/zh/zh.js                  | 30 ++++++++++
 src/main.js                          |  3 +-
 7 files changed, 159 insertions(+), 57 deletions(-)
 create mode 100644 src/locals/en/en.js
 create mode 100644 src/locals/index.js
 create mode 100644 src/locals/zh/zh.js

diff --git a/package-lock.json b/package-lock.json
index 0e1b376..ba9b734 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.8.0-beta",
       "license": "Commons Clause MIT",
       "dependencies": {
-        "electron-log": "^5.0.1"
+        "electron-log": "^5.0.1",
+        "vue3-i18n": "^1.1.5"
       },
       "devDependencies": {
         "@codemirror/autocomplete": "^6.11.1",
@@ -240,7 +241,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
       "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -988,8 +988,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@lezer/common": {
       "version": "1.1.2",
@@ -1707,7 +1706,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.11.tgz",
       "integrity": "sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.5",
         "@vue/shared": "3.3.11",
@@ -1719,7 +1717,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz",
       "integrity": "sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-core": "3.3.11",
         "@vue/shared": "3.3.11"
@@ -1729,7 +1726,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz",
       "integrity": "sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.5",
         "@vue/compiler-core": "3.3.11",
@@ -1747,7 +1743,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz",
       "integrity": "sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.11",
         "@vue/shared": "3.3.11"
@@ -1806,7 +1801,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.11.tgz",
       "integrity": "sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==",
-      "dev": true,
       "dependencies": {
         "@vue/shared": "3.3.11"
       }
@@ -1815,7 +1809,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz",
       "integrity": "sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.5",
         "@vue/compiler-core": "3.3.11",
@@ -1828,7 +1821,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.11.tgz",
       "integrity": "sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==",
-      "dev": true,
       "dependencies": {
         "@vue/reactivity": "3.3.11",
         "@vue/shared": "3.3.11"
@@ -1838,7 +1830,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz",
       "integrity": "sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==",
-      "dev": true,
       "dependencies": {
         "@vue/runtime-core": "3.3.11",
         "@vue/shared": "3.3.11",
@@ -1849,7 +1840,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.11.tgz",
       "integrity": "sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.3.11",
         "@vue/shared": "3.3.11"
@@ -1861,8 +1851,7 @@
     "node_modules/@vue/shared": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.11.tgz",
-      "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==",
-      "dev": true
+      "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw=="
     },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
@@ -2761,8 +2750,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
@@ -3590,8 +3578,7 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/extract-zip": {
       "version": "2.0.1",
@@ -4480,7 +4467,6 @@
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -4647,7 +4633,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4882,8 +4867,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -4971,7 +4955,6 @@
       "version": "8.4.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
       "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5477,7 +5460,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5783,7 +5765,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6329,7 +6311,6 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.11.tgz",
       "integrity": "sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==",
-      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.3.11",
         "@vue/compiler-sfc": "3.3.11",
@@ -6388,6 +6369,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue3-i18n": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/vue3-i18n/-/vue3-i18n-1.1.5.tgz",
+      "integrity": "sha512-DN5XfE0z6BnFxjbP/qW8AKI5QCex97L2l8z7G76ccTkfTsJ18n4mXGCy4K9H2rm4FlzDx/USPlPqQK64yXQqDg==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index ab1662a..180afed 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "vue-tsc": "^1.0.16"
   },
   "dependencies": {
-    "electron-log": "^5.0.1"
+    "electron-log": "^5.0.1",
+    "vue3-i18n": "^1.1.5"
   }
 }
diff --git a/src/components/settings/Settings.vue b/src/components/settings/Settings.vue
index 42c9ee6..6c20b51 100644
--- a/src/components/settings/Settings.vue
+++ b/src/components/settings/Settings.vue
@@ -2,6 +2,7 @@
     import KeyboardHotkey from "./KeyboardHotkey.vue"
     import TabListItem from "./TabListItem.vue"
     import TabContent from "./TabContent.vue"
+    import { useI18n } from "vue3-i18n";
 
     const defaultFontFamily = window.heynote.defaultFontFamily
     const defaultFontSize = window.heynote.defaultFontSize
@@ -23,7 +24,12 @@
                     { name: "Default", value: "default" },
                     { name: "Emacs", value: "emacs" },
                 ],
+                language: [
+                    { name: "English", value: "en" },
+                    { name: "Chinese", value: "zh"}
+                ],
                 keymap: this.initialSettings.keymap,
+                selectedLanguage: this.initialSettings.selectedLanguage,
                 metaKey: this.initialSettings.emacsMetaKey,
                 isMac: window.heynote.platform.isMac,
                 showLineNumberGutter: this.initialSettings.showLineNumberGutter,
@@ -64,7 +70,9 @@
         beforeUnmount() {
             window.removeEventListener("keydown", this.onKeyDown);
         },
-
+        created() {
+            this.setLocale(this.selectedLanguage)
+        },
         methods: {
             onKeyDown(event) {
                 if (event.key === "Escape") {
@@ -77,6 +85,7 @@
                     showLineNumberGutter: this.showLineNumberGutter,
                     showFoldGutter: this.showFoldGutter,
                     keymap: this.keymap,
+                    selectedLanguage: this.selectedLanguage,
                     emacsMetaKey: window.heynote.platform.isMac ? this.metaKey : "alt",
                     allowBetaVersions: this.allowBetaVersions,
                     enableGlobalHotkey: this.enableGlobalHotkey,
@@ -93,6 +102,7 @@
                 if (!this.showInDock) {
                     this.showInMenu = true
                 }
+                this.setLocale(this.selectedLanguage)
             },
 
             async selectBufferLocation() {
@@ -109,7 +119,17 @@
                     this.updateSettings()
                 }
             },
-        }
+        },
+        setup() {
+            const i18n = useI18n();
+            const setLocale = (lang) => {
+                i18n.setLocale(lang);
+            };
+
+            return {
+                setLocale,
+            };
+        },
     }
 </script>
 
@@ -121,25 +141,25 @@
                     <h1>Settings</h1>
                     <ul>
                         <TabListItem 
-                            name="General" 
+                            :name="$t('General')"
                             tab="general" 
                             :activeTab="activeTab" 
                             @click="activeTab = 'general'"
                         />
                         <TabListItem 
-                            name="Editing" 
+                            :name="$t('Editing')"
                             tab="editing"
                             :activeTab="activeTab" 
                             @click="activeTab = 'editing'"
                         />
                         <TabListItem 
-                            name="Appearance" 
+                            :name="$t('Appearance')"
                             tab="appearance"
                             :activeTab="activeTab" 
                             @click="activeTab = 'appearance'"
                         />
                         <TabListItem 
-                            :name="isWebApp ? 'Version' : 'Updates'" 
+                            :name="isWebApp ? $t('Version') : $t('Updates')" 
                             tab="updates" 
                             :activeTab="activeTab" 
                             @click="activeTab = 'updates'"
@@ -150,7 +170,7 @@
                     <TabContent tab="general" :activeTab="activeTab">
                         <div class="row">
                             <div class="entry">
-                                <h2>Keymap</h2>
+                                <h2>{{ $t('Keymap') }}</h2>
                                 <select ref="keymapSelector" v-model="keymap" @change="updateSettings" class="keymap">
                                     <template v-for="km in keymaps" :key="km.value">
                                         <option :selected="km.value === keymap" :value="km.value">{{ km.name }}</option>
@@ -167,14 +187,15 @@
                         </div>
                         <div class="row" v-if="!isWebApp">
                             <div class="entry">
-                                <h2>Global Keyboard Shortcut</h2>
+                                <h2>{{ $t('Global_Keyboard_Shortcut') }}</h2>
                                 <label class="keyboard-shortcut-label">
                                     <input 
                                         type="checkbox" 
                                         v-model="enableGlobalHotkey" 
                                         @change="updateSettings"
                                     />
-                                    Enable Global Hotkey
+                                    {{ $t('Enable_Global_Hotkey') }}
+
                                 </label>
                                 
                                 <KeyboardHotkey 
@@ -186,14 +207,14 @@
                         </div>
                         <div class="row" v-if="!isWebApp">
                             <div class="entry">
-                                <h2>Window / Application</h2>
+                                <h2>{{ $t('Window_Application') }}</h2>
                                 <label v-if="isMac">
                                     <input
                                         type="checkbox"
                                         v-model="showInDock"
                                         @change="updateSettings"
                                     />
-                                    Show in dock
+                                    {{ $t('Show_in_dock') }}
                                 </label>
                                 <label>
                                     <input
@@ -203,7 +224,7 @@
                                         @change="updateSettings"
                                     />
                                     <template v-if="isMac">
-                                        Show in menu bar
+                                        {{ $t('Show_in_menu_bar')}}
                                     </template>
                                     <template v-else>
                                         Show in system tray
@@ -215,43 +236,54 @@
                                         v-model="alwaysOnTop"
                                         @change="updateSettings"
                                     />
-                                    Always on top
+                                    {{ $t('Always_on_top') }}
                                 </label>
                             </div>
                         </div>
                         <div class="row" v-if="!isWebApp">
                             <div class="entry buffer-location">
-                                <h2>Buffer File Path</h2>
+                                <h2>{{ $t('Buffer_File_Path') }}</h2>
                                 <label class="keyboard-shortcut-label">
                                     <input 
                                         type="checkbox" 
                                         v-model="customBufferLocation" 
                                         @change="onCustomBufferLocationChange"
                                     />
-                                    Use custom buffer file location
+                                    {{ $t('Use_custom_buffer_file_location') }}
+                                    
                                 </label>
                                 <div class="file-path">
                                     <button
                                         :disabled="!customBufferLocation"
                                         @click="selectBufferLocation"
-                                    >Select Directory</button>
+                                    >{{ $t('Select_Directory') }}</button>
                                     <span class="path" v-show="customBufferLocation && bufferPath">{{ bufferPath }}</span>
                                 </div>
                             </div>
                         </div>
+                        <div class="row" v-if="!isWebApp">
+                            <div class="entry buffer-location">
+                                <h2>{{ $t('change_language') }}</h2>
+                                <select ref="keymapSelector" v-model="selectedLanguage" @change="updateSettings" class="keymap">
+                                    <template v-for="km in language" :key="km.value">
+                                        <option :value="km.value">{{ km.name }}</option>
+                                    </template>
+                                </select>
+                            </div>
+                        </div>
                     </TabContent>
 
                     <TabContent tab="editing" :activeTab="activeTab">
                         <div class="row">
                             <div class="entry">
-                                <h2>Input settings</h2>
+                                <h2>{{ $t('Input_settings') }}</h2>
                                 <label>
                                     <input 
                                         type="checkbox"
                                         v-model="bracketClosing"
                                         @change="updateSettings"
                                     />
-                                    Auto-close brackets and quotation marks
+                                    {{ $t('Auto_close_brackets_and_quotation_marks') }}
                                 </label>
                             </div>  
                         </div>
@@ -260,14 +292,14 @@
                     <TabContent tab="appearance" :activeTab="activeTab">
                         <div class="row">
                             <div class="entry">
-                                <h2>Gutters</h2>
+                                <h2>{{ $t('Gutters') }}</h2>
                                 <label>
                                     <input 
                                         type="checkbox" 
                                         v-model="showLineNumberGutter" 
                                         @change="updateSettings"
                                     />
-                                    Show line numbers
+                                    {{ $t('Show_line_numbers') }}
                                 </label>
                                 
                                 <label>
@@ -276,13 +308,13 @@
                                         v-model="showFoldGutter" 
                                         @change="updateSettings"
                                     />
-                                    Show fold gutter
+                                    {{ $t('Show_fold_gutter') }}
                                 </label>
                             </div>
                         </div>
                         <div class="row font-settings">
                             <div class="entry">
-                                <h2>Font Family</h2>
+                                <h2>{{ $t('Font_Family') }}</h2>
                                 <select v-model="fontFamily" @change="updateSettings" class="font-family">
                                     <option
                                         v-for="[font, label] in systemFonts"
@@ -292,7 +324,7 @@
                                 </select>
                             </div>
                             <div class="entry">
-                                <h2>Font Size</h2>
+                                <h2>{{ $t('Font_Size') }}</h2>
                                 <select v-model="fontSize" @change="updateSettings" class="font-size">
                                     <option
                                         v-for="size in [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
@@ -307,34 +339,34 @@
                     <TabContent tab="updates" :activeTab="activeTab">
                         <div class="row">
                             <div class="entry">
-                                <h2>Current Version</h2>
+                                <h2>{{ $t('Current_Version') }}</h2>
                                 <b>{{ appVersion }}</b>
                             </div>
                         </div>
 
                         <div class="row" v-if="!isWebApp">
                             <div class="entry">
-                                <h2>Auto Update</h2>
+                                <h2>{{ $t('Auto_Update') }}</h2>
                                 <label>
                                     <input 
                                         type="checkbox" 
                                         v-model="autoUpdate" 
                                         @change="updateSettings"
                                     />
-                                    Periodically check for new updates
+                                    {{ $t('Periodically_check_for_new_updates') }}
                                 </label>
                             </div>
                         </div>
                         <div class="row" v-if="!isWebApp">
                             <div class="entry">
-                                <h2>Beta Versions</h2>
+                                <h2>{{ $t('Beta_Versions') }}</h2>
                                 <label>
                                     <input 
                                         type="checkbox" 
                                         v-model="allowBetaVersions" 
                                         @change="updateSettings"
                                     />
-                                    Use beta versions of Heynote
+                                    {{ $t('Use_beta_versions_of_Heynote') }}
                                 </label>
                             </div>
                         </div>
diff --git a/src/locals/en/en.js b/src/locals/en/en.js
new file mode 100644
index 0000000..9cd9ea0
--- /dev/null
+++ b/src/locals/en/en.js
@@ -0,0 +1,30 @@
+export const en = {
+    General: 'General',
+    Keymap:'Keymap',
+    Global_Keyboard_Shortcut: 'Global Keyboard Shortcut',
+    Enable_Global_Hotkey: 'Enable Global Hotkey',
+    Window_Application: 'Window/Application',
+    Show_in_dock: 'Show in dock',
+    Show_in_menu_bar: ' Show in menu bar',
+    Always_on_top: 'Always on top',
+    Buffer_File_Path: 'Buffer File Path',
+    Use_custom_buffer_file_location: 'Use custom buffer file location',
+    change_language: 'Change Language',
+    Select_Directory: 'Select Directory',
+    Editing: 'Editing', 
+    Input_settings: 'Input settings',
+    Auto_close_brackets_and_quotation_marks: 'Auto-close brackets and quotation marks',
+    Appearance: 'Appearance',
+    Gutters: 'Gutters',
+    Show_line_numbers: 'Show line numbers',
+    Show_fold_gutter: 'Show fold gutter',
+    Font_Family: 'Font Family',
+    Font_Size: 'Font Size',
+    Current_Version: 'Current Version',
+    Auto_Update: 'Auto Update',
+    Periodically_check_for_new_updates: 'Periodically check for new updates',
+    Beta_Versions: 'Beta Versions',
+    Use_beta_versions_of_Heynote: 'Use beta versions of Heynote',
+    Updates: 'Updates',
+    Version:'Version'
+  };
\ No newline at end of file
diff --git a/src/locals/index.js b/src/locals/index.js
new file mode 100644
index 0000000..46bf712
--- /dev/null
+++ b/src/locals/index.js
@@ -0,0 +1,15 @@
+import { gutters } from "@codemirror/view";
+import { createI18n } from "vue3-i18n";
+import { en } from "./en/en";
+import { zh } from "./zh/zh";
+const messages = {
+  en,
+  zh
+};
+
+const i18n = createI18n({
+  locale: "en",
+  messages: messages,
+});
+
+export default i18n;
\ No newline at end of file
diff --git a/src/locals/zh/zh.js b/src/locals/zh/zh.js
new file mode 100644
index 0000000..5296c0d
--- /dev/null
+++ b/src/locals/zh/zh.js
@@ -0,0 +1,30 @@
+export const zh={ 
+    General: '常用',
+    Keymap:'快捷键',
+    Global_Keyboard_Shortcut: '全局快捷键',
+    Enable_Global_Hotkey: '启用全局快捷键',
+    Window_Application: '窗口/应用',
+    Show_in_dock: '显示在任务栏',
+    Show_in_menu_bar: ' 显示在菜单栏',
+    Always_on_top: '置顶',
+    Buffer_File_Path: '缓存文件路径',
+    Use_custom_buffer_file_location: '使用自定义缓存文件位置',
+    change_language: '切换语言',
+    Select_Directory: '选择目录',
+    Editing: '编辑',
+    Input_settings: '输入设置',
+    Auto_close_brackets_and_quotation_marks: '自动关闭括号和引号',
+    Appearance: '外观',
+    Gutters: '边栏',
+    Show_line_numbers: '显示行号',
+    Show_fold_gutter: '显示折叠边栏',
+    Font_Family: '字体',
+    Font_Size: '字号',
+    Current_Version: '当前版本',
+    Auto_Update: '自动更新',
+    Periodically_check_for_new_updates: '定期检查新版本',
+    Beta_Versions: '测试版本',
+    Use_beta_versions_of_Heynote: '使用 Heynote 测试版本',
+    Updates: '更新',
+    Version:'版本'
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7836648..dcb657f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,10 +3,11 @@ import './css/application.sass'
 import { createApp } from 'vue'
 import App from './components/App.vue'
 import { loadCurrencies } from './currency'
+import i18n from './locals'
 
 
 const app = createApp(App)
-
+app.use(i18n)
 app.mount('#app').$nextTick(() => {
     // hide loading screen
     postMessage({ payload: 'removeLoading' }, '*')