refactor: international language file structure

src/components/custom-footer.vue

@@ -8,15 +8,21 @@ const { t } = useI18n()
 
 <template>
   <ALayoutFooter class="bg-[--color-bg-2] px-2">
-    <div class="mx-auto flex h-14 w-256 max-w-full whitespace-nowrap flex items-center justify-center">
+    <div
+      class="mx-auto flex h-14 w-256 max-w-full whitespace-nowrap flex items-center justify-center"
+    >
       <ASpace>
         <div>
           Copyright &copy; {{ currentYear }}
-          <ALink target="_blank" href="https://github.com/ikxin/kms-tools"> KMS Tools </ALink>
+          <ALink target="_blank" href="https://github.com/ikxin/kms-tools">
+            KMS Tools
+          </ALink>
         </div>
         <div>
           Code with by
-          <ALink target="_blank" href="https://www.ikxin.com">{{ t('main.author') }}</ALink>
+          <ALink target="_blank" href="https://www.ikxin.com">
+            {{ t('name.author') }}
+          </ALink>
         </div>
       </ASpace>
     </div>

src/components/custom-header.vue

@@ -8,17 +8,17 @@ const appStore = useAppStore()
 const navItems = computed(() => [
   {
     name: 'activate',
-    label: t('main.module.activate'),
+    label: t('label.activate'),
     icon: 'i-icons:activate',
   },
   {
     name: 'tools',
-    label: t('main.module.tools'),
+    label: t('label.check'),
     icon: 'i-icons:tools',
   },
   {
     name: 'monitor',
-    label: t('main.module.monitor'),
+    label: t('label.monitor'),
     icon: 'i-icons:monitor',
   },
 ])
@@ -36,17 +36,17 @@ const navSelected = ref([!pathName?.[0] ? 'home' : pathName?.[0]])
 
 const themeItems = computed(() => [
   {
-    lable: t('main.theme.light'),
+    lable: t('label.light-theme'),
     value: 'light',
     icon: 'i-icons:light-mode',
   },
   {
-    lable: t('main.theme.dark'),
+    lable: t('label.dark-theme'),
     value: 'dark',
     icon: 'i-icons:dark-mode',
   },
   {
-    lable: t('main.theme.auto'),
+    lable: t('label.auto-theme'),
     value: 'auto',
     icon: 'i-icons:auto-mode',
   },
@@ -60,13 +60,13 @@ const themeChange = val => (appStore.theme = val)
 
 const languagesItems = computed(() => [
   {
-    lable: t('main.languages.zhCn'),
+    lable: t('label.zh-cn'),
     value: 'zh-cn',
     icon: 'i-languages:zh',
   },
   {
-    lable: t('main.languages.en'),
-    value: 'en-us',
+    lable: t('label.en'),
+    value: 'en',
     icon: 'i-languages:en',
   },
 ])
@@ -77,7 +77,10 @@ const languagesChange = val => (appStore.languages = val)
 <template>
   <ALayoutHeader class="select-none bg-[--color-bg-2] px-2 shadow-md">
     <div class="mx-auto flex w-256 max-w-full items-center justify-between">
-      <div class="i-icons:kms-tools w-48 h-12 cursor-pointer" @click="redirectPage('home')"></div>
+      <div
+        class="i-icons:kms-tools w-48 h-12 cursor-pointer"
+        @click="redirectPage('home')"
+      ></div>
       <AMenu
         v-model:selected-keys="navSelected"
         mode="horizontal"
@@ -99,7 +102,11 @@ const languagesChange = val => (appStore.languages = val)
             <template #icon><i :class="themeIcon" /></template>
           </AButton>
           <template #content>
-            <ADoption v-for="item in themeItems" :key="item.value" @click="themeChange(item.value)">
+            <ADoption
+              v-for="item in themeItems"
+              :key="item.value"
+              @click="themeChange(item.value)"
+            >
               <template #icon><i :class="item.icon" /></template>
               <template #default>{{ item.lable }}</template>
             </ADoption>
@@ -110,7 +117,11 @@ const languagesChange = val => (appStore.languages = val)
             <template #icon><i class="i-icons:languages" /></template>
           </AButton>
           <template #content>
-            <ADoption v-for="item in languagesItems" :key="item.value" @click="languagesChange(item.value)">
+            <ADoption
+              v-for="item in languagesItems"
+              :key="item.value"
+              @click="languagesChange(item.value)"
+            >
               <template #icon><i :class="item.icon" /></template>
               <template #default>{{ item.lable }}</template>
             </ADoption>

src/locales/en.json

@@ -0,0 +1,48 @@
+{
+  "label": {
+    "activate": "Activate",
+    "check": "Check",
+    "monitor": "Monitor",
+    "auto-theme": "System",
+    "light-theme": "Light",
+    "dark-theme": "Dark",
+    "zh-cn": "Simplified Chinese",
+    "zh-tw": "Traditional Chinese",
+    "en": "English",
+    "operating-system": "Operating System",
+    "software": "Software",
+    "edition": "Edition",
+    "cpuarch": "CPU Arch",
+    "license": "License Key",
+    "product": "Product",
+    "service": "KMS Server",
+    "version": "Version",
+    "x64": "x64",
+    "x86": "x86",
+    "domain": "Domain",
+    "port": "Port",
+    "protocol": "Protocol"
+  },
+  "name": {
+    "author": "ikxin"
+  },
+  "placeholder": {
+    "domain": "Please input domain",
+    "port": "Please input port",
+    "protocol": "Please select protocol",
+    "software": "Please select software",
+    "edition": "Please select edition",
+    "product": "Please select product",
+    "service": "Please select kms server",
+    "version": "Please select version"
+  },
+  "button": {
+    "copy-script": "Copy Script",
+    "generate-script": "Generate Script",
+    "download-script": "Download Script",
+    "submit": "Submit"
+  },
+  "title": {
+    "kms-check": "KMS Server Check"
+  }
+}

src/locales/zh-cn.json

@@ -0,0 +1,48 @@
+{
+  "label": {
+    "activate": "激活",
+    "check": "检测",
+    "monitor": "监控",
+    "auto-theme": "跟随系统",
+    "light-theme": "浅色模式",
+    "dark-theme": "深色模式",
+    "zh-cn": "简体中文",
+    "zh-tw": "繁体中文",
+    "en": "英语",
+    "operating-system": "操作系统",
+    "software": "软件",
+    "edition": "发行版本",
+    "cpuarch": "CPU 架构",
+    "license": "许可证",
+    "product": "产品",
+    "service": "KMS 服务器",
+    "version": "系统版本",
+    "x64": "64 位",
+    "x86": "32 位",
+    "domain": "域名",
+    "port": "端口",
+    "protocol": "协议"
+  },
+  "name": {
+    "author": "一纸忘忧"
+  },
+  "placeholder": {
+    "domain": "请输入域名",
+    "port": "请输入端口",
+    "protocol": "请选择协议",
+    "software": "请选择软件",
+    "edition": "请选择版本",
+    "product": "请选择产品",
+    "service": "请选择 kms 服务器",
+    "version": "请选择版本"
+  },
+  "button": {
+    "copy-script": "复制脚本",
+    "generate-script": "生成脚本",
+    "download-script": "下载脚本",
+    "submit": "提交"
+  },
+  "title": {
+    "kms-check": "KMS 服务器检测"
+  }
+}

src/main.ts

@@ -1,7 +1,7 @@
 import App from '@/App.vue'
 import { router } from '@/router'
 import { createI18n } from 'vue-i18n'
-import messages from '@/locales'
+import messages from '@intlify/unplugin-vue-i18n/messages'
 import { useMonitorStore } from '@/store/monitor'
 
 import '@/styles/custom.less'
@@ -10,7 +10,7 @@ import '@/styles/style.css'
 
 const app = createApp(App)
 const pinia = createPinia()
-const i18n = createI18n({ locale: 'en', messages })
+const i18n = createI18n({ locale: 'zh-cn', messages })
 
 app.use(pinia)
 app.use(router)

src/views/activate.vue

@@ -9,7 +9,10 @@ const selectedKeys = ref(pathName)
 </script>
 
 <template>
-  <ALayoutSider :width="240" class="[&>.arco-layout-sider-children]:rounded rounded">
+  <ALayoutSider
+    :width="240"
+    class="[&>.arco-layout-sider-children]:rounded rounded"
+  >
     <AMenu
       v-model:selected-keys="selectedKeys"
       :default-open-keys="['system', 'software']"
@@ -18,20 +21,29 @@ const selectedKeys = ref(pathName)
     >
       <ASubMenu key="system">
         <template #icon><i class="i-icons:system text-base" /></template>
-        <template #title>{{ t('activate.sider.system') }}</template>
-        <AMenuItem key="windows" @click="router.push({ path: '/activate/windows' })">
+        <template #title>{{ t('label.operating-system') }}</template>
+        <AMenuItem
+          key="windows"
+          @click="router.push({ path: '/activate/windows' })"
+        >
           <template #icon><i class="i-icons:windows" /></template>
           <span>Windows</span>
         </AMenuItem>
-        <AMenuItem key="windows-server" @click="router.push({ path: '/activate/windows-server' })">
+        <AMenuItem
+          key="windows-server"
+          @click="router.push({ path: '/activate/windows-server' })"
+        >
           <template #icon><i class="i-icons:windows-server" /></template>
           <span>Windows Server</span>
         </AMenuItem>
       </ASubMenu>
       <ASubMenu key="software">
         <template #icon><i class="i-icons:software text-base" /></template>
-        <template #title>{{ t('activate.sider.software') }}</template>
-        <AMenuItem key="office" @click="router.push({ path: '/activate/office' })">
+        <template #title>{{ t('label.software') }}</template>
+        <AMenuItem
+          key="office"
+          @click="router.push({ path: '/activate/office' })"
+        >
           <template #icon><i class="i-icons:office" /></template>
           <span>Office</span>
         </AMenuItem>