✨ feat(i18n): 添加语言切换

src/renderer/components/LangTab/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-dropdown split-button type="primary" @command="handleCommand">
+    {{ $t('buttons.changeLanguage') }}
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item v-for="lang in langs" :key="lang.value" :command="lang.value">
+        {{ lang.text }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import i18n from '@/i18n'
+
+export default {
+  data() {
+    return {
+      langs: [
+        {
+          text: i18n.t('ying-wen'),
+          value: 'en',
+        },
+        {
+          text: i18n.t('zhong-wen'),
+          value: 'zh-CN',
+        },
+      ],
+    }
+  },
+  methods: {
+    handleCommand(lang) {
+      localStorage.setItem('lang', lang)
+      window.location.reload()
+    },
+  },
+}
+</script>
+
+<style>
+.el-dropdown {
+  vertical-align: top;
+}
+.el-dropdown + .el-dropdown {
+  margin-left: 15px;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>

src/renderer/i18n/index.js

@@ -2,8 +2,12 @@ import en from './languages/en.json'
 import zhCN from './languages/zh-CN.json'
 import enLocale from 'element-ui/lib/locale/lang/en'
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import VueI18n from 'vue-i18n'
+import Vue from 'vue'
 
-export default function loadLanguage() {
+// 创建 i18n
+Vue.use(VueI18n) // 新版本必须要这个，不知道为什么
+function loadLanguage() {
   const languages = {
     en: {
       ...en,
@@ -17,3 +21,10 @@ export default function loadLanguage() {
 
   return languages
 }
+
+const i18n = new VueI18n({
+  locale: localStorage.getItem('lang') || 'zh-CN', // 设置默认语言
+  messages: loadLanguage(), // 设置语言包
+})
+
+export default i18n

src/renderer/i18n/languages/en.json

@@ -40,29 +40,29 @@
   "qing-shu-ru-yan-zheng-ma-0": "Please enter the verification code",
   "hui-yuan-ID": "Member ID",
   "qing-shu-ru-hui-yuan-ID": "Please enter the member ID",
-  "shou-ji-hao": "Mobile phone number",
+  "shou-ji-hao": "Mobile Number",
   "qing-shu-ru-hui-yuan-shou-ji-hao": "Please enter the member's mobile phone number",
-  "ding-dan-hao": "Order number",
+  "ding-dan-hao": "Order Number",
   "qing-shu-ru-ding-dan-hao": "Please enter the order number",
-  "zhuo-ma": "Table code",
+  "zhuo-ma": "Table Code",
   "qing-shu-ru-zhuo-ma": "Please enter the table code",
-  "ding-dan-lei-xing": "Order type",
+  "ding-dan-lei-xing": "Order Type",
   "suo-shu-dian-pu": "Belonging store",
   "qing-xuan-ze-dian-pu": "Please select a store",
-  "ding-dan-zhuang-tai": "Order status",
+  "ding-dan-zhuang-tai": "Order Status",
   "qing-xuan-ze-ding-dan-zhuang-tai": "Please select the order status",
-  "zhi-fu-zhuang-tai": "Payment status",
-  "pei-song-fang-shi": "Delivery method",
+  "zhi-fu-zhuang-tai": "Payment Status",
+  "pei-song-fang-shi": "Delivery Method",
   "cha-xun": "Query",
   "chong-zhi": "Reset",
   "ID": "ID",
-  "hui-yuan-ming-cheng": "Member name",
+  "hui-yuan-ming-cheng": "Member Name",
   "you-ke": "Visitor",
-  "zong-jin-e": "Total amount",
+  "zong-jin-e": "Total Amount",
   "sheng-cheng-shi-jian": "Creation time",
-  "zhi-fu-jin-e": "Payment amount",
-  "you-hui-jin-e": "Discount amount",
-  "ji-fen-jin-e": "Points amount",
+  "zhi-fu-jin-e": "Payment Amount",
+  "you-hui-jin-e": "Discount Amount",
+  "ji-fen-jin-e": "Point Amount",
   "geng-xin-shi-jian": "Update time",
   "cao-zuo": "Operation",
   "xiu-gai": "Modify",
@@ -86,44 +86,20 @@
   "he-xiao-ma": "Verification code",
   "qing-shu-ru-ding-dan-he-xiao-ma": "Please enter the order verification code",
   "tian-xie-wu-liu-xin-xi": "Fill in logistics information",
-  "wu-liu-gong-si": "Logistics company",
+  "wu-liu-gong-si": "Logistics Company",
   "qing-shu-ru-wu-liu-gong-si": "Please enter the logistics company",
-  "wu-liu-dan-hao": "Logistics tracking number",
+  "wu-liu-dan-hao": "Logistics Tracking Number",
   "qing-shu-ru-wu-liu-dan-hao": "Please enter the logistics tracking number",
   "ti-jiao-wu-liu-xin-xi": "Submit logistics information",
   "ding-dan-tui-kuan": "Order refund",
-  "zhi-fu-fang-shi": "Payment method",
+  "zhi-fu-fang-shi": "Payment Method",
   "ding-dan-shi-fu-jin-e": "Actual order payment amount",
   "tui-kuan-jin-e": "Refund amount",
   "qing-shu-ru-tui-kuan-jin-e": "Please enter the refund amount",
   "tui-kuan-bei-zhu": "Refund remarks",
   "qing-shu-ru-tui-kuan-bei-zhu": "Please enter refund remarks",
-  "ding-dan-hao": "Order number",
-  "ding-dan-mo-shi": "Order mode",
-  "ding-dan-zong-jin-e": "Total order amount",
-  "you-hui-jin-e": "Discount amount",
-  "ding-dan-bei-zhu": "Order remarks",
-  "ding-dan-zhuang-tai": "Order status",
-  "que-ding": "Confirm",
-  "qu-xiao": "Cancel",
-  "he-xiao-ding-dan": "Verify order",
-  "he-xiao-ma": "Verification code",
-  "qing-shu-ru-ding-dan-he-xiao-ma": "Please enter the order verification code",
   "que-ding-he-xiao": "Confirm verification",
-  "tian-xie-wu-liu-xin-xi": "Fill in logistics information",
-  "wu-liu-gong-si": "Logistics company",
-  "qing-shu-ru-wu-liu-gong-si": "Please enter the logistics company",
-  "wu-liu-dan-hao": "Logistics tracking number",
-  "qing-shu-ru-wu-liu-dan-hao": "Please enter the logistics tracking number",
-  "ti-jiao-wu-liu-xin-xi": "Submit logistics information",
-  "ding-dan-tui-kuan": "Order refund",
-  "zhi-fu-fang-shi": "Payment method",
-  "ding-dan-shi-fu-jin-e": "Actual order payment amount",
-  "tui-kuan-jin-e": "Refund amount",
-  "qing-shu-ru-tui-kuan-jin-e": "Please enter the refund amount",
   "tui-kuan-jin-e-tips": "( Note: in yuan )",
-  "tui-kuan-bei-zhu": "Refund remarks",
-  "qing-shu-ru-tui-kuan-bei-zhu": "Please enter refund remarks",
   "zong-jin-e-bu-neng-wei-kong": "The total amount cannot be empty",
   "he-xiao-ma-bu-neng-wei-kong": "The verification code cannot be empty",
   "wu-liu-gong-si-bu-neng-wei-kong": "The logistics company cannot be empty",
@@ -145,69 +121,46 @@
   "de-shu-ju-xiang": "",
   "ti-shi-shan-chu-cheng-gong": "Tip: Deletion successful",
   "ding-dan-da-yin-yu-lan": "Order Print Preview",
-  "zhuo-ma": "Table Code",
   "dan-hao": "Order Number",
-  "hui-yuan-ming-cheng": "Member Name",
   "hui-yuan-hao-ma": "Member Number",
   "hui-yuan-xin-xi": "Member Information",
   "wu": "None",
   "shou-huo-ren-ming": "Receiver Name",
   "lian-xi-dian-hua": "Contact Phone",
   "xiang-xi-di-zhi": "Detailed Address",
-  "ding-dan-lei-xing": "Order Type",
   "ding-dan-shi-jian": "Order Time",
-  "you-hui-jin-e": "Discount Amount",
   "ying-shou-jin-e": "Receivable Amount",
   "da-yin": "Print",
-  "qu-xiao": "Cancel",
   "ding-dan-ming-xi": "Order Details",
   "yu-lan-de-biao-ti": "Preview Title",
   "yu-lan-jie-shu-kai-shi-da-yin": "Preview ended, start printing",
   "ding-dan-xiang-qing": "Order Details",
-    "ji-chu-xin-xi": "Basic Information",
-    "ding-dan-hao": "Order Number",
-    "zong-jin-e": "Total Amount",
-    "ding-dan-zhuang-tai": "Order Status",
-    "ding-dan-lei-xing": "Order Type",
-    "ding-dan-shi-jian": "Order Time",
-    "xia-dan-zhuo-ma": "Order Table Code",
-    "bei-zhu-xin-xi": "Remark Information",
-    "zhi-fu-xin-xi": "Payment Information",
-    "zhi-fu-jin-e": "Payment Amount",
-    "zhi-fu-zhuang-tai": "Payment Status",
-    "jian-mian-jin-e": "Reduction Amount",
-    "zhi-fu-fang-shi": "Payment Method",
-    "zhi-fu-shi-jian": "Payment Time",
-    "shi-yong-qia-quan": "Used Coupons",
-    "shi-yong-ji-fen": "Used Points",
-    "ji-fen-jin-e": "Point Amount",
-    "pei-song-fei-yong": "Delivery Fee",
-    "hui-yuan-xin-xi": "Member Information",
-    "hui-yuan-ID": "Member ID",
-    "hui-yuan-hao": "Member Number",
-    "hui-yuan-ming-cheng": "Member Name",
-    "shou-ji-hao": "Mobile Number",
-    "you-ke": "Visitor",
-    "guan-li-yuan": "Administrator",
-    "dai-xia-dan": "placed the order on behalf",
-    "shang-pin-xin-xi": "Product Information",
-    "shang-pin-ID": "Product ID",
-    "tu-pian": "Picture",
-    "ming-cheng": "Name",
-    "gui-ge": "Specification",
-    "jia-ge": "Price",
-    "you-hui-jin-e": "Discount Amount",
-    "shu-liang": "Quantity",
-    "pei-song-xin-xi": "Delivery Information",
-    "pei-song-fang-shi": "Delivery Method",
-    "men-dian-zi-ti": "Store Self-pickup",
-    "wu-liu-pei-song": "Logistics Delivery",
-    "zi-ti-di-zhi": "Self-pickup Address",
-    "shou-huo-ren": "Receiver",
-    "lian-xi-dian-hua": "Contact Phone",
-    "xiang-xi-di-zhi": "Detailed Address",
-    "wu-liu-xin-xi": "Logistics Information",
-    "wu-liu-gong-si": "Logistics Company",
-    "wu-liu-dan-hao": "Logistics Tracking Number",
-    "fa-huo-shi-jian": "Shipping Time"
+  "ji-chu-xin-xi": "Basic Information",
+  "xia-dan-zhuo-ma": "Order Table Code",
+  "bei-zhu-xin-xi": "Remark Information",
+  "zhi-fu-xin-xi": "Payment Information",
+  "jian-mian-jin-e": "Reduction Amount",
+  "zhi-fu-shi-jian": "Payment Time",
+  "shi-yong-qia-quan": "Used Coupons",
+  "shi-yong-ji-fen": "Used Points",
+  "pei-song-fei-yong": "Delivery Fee",
+  "hui-yuan-hao": "Member Number",
+  "guan-li-yuan": "Administrator",
+  "dai-xia-dan": "placed the order on behalf",
+  "shang-pin-xin-xi": "Product Information",
+  "shang-pin-ID": "Product ID",
+  "tu-pian": "Picture",
+  "ming-cheng": "Name",
+  "gui-ge": "Specification",
+  "jia-ge": "Price",
+  "shu-liang": "Quantity",
+  "pei-song-xin-xi": "Delivery Information",
+  "men-dian-zi-ti": "Store Self-pickup",
+  "wu-liu-pei-song": "Logistics Delivery",
+  "zi-ti-di-zhi": "Self-pickup Address",
+  "shou-huo-ren": "Receiver",
+  "wu-liu-xin-xi": "Logistics Information",
+  "fa-huo-shi-jian": "Shipping Time",
+  "ying-wen": "English",
+  "zhong-wen": "Chinese"
 }

src/renderer/i18n/languages/zh-CN.json

@@ -121,49 +121,30 @@
   "de-shu-ju-xiang": "的数据项",
   "ti-shi-shan-chu-cheng-gong": "提示：删除成功",
   "ding-dan-da-yin-yu-lan": "订单打印预览",
-  "zhuo-ma": "桌码",
   "dan-hao": "单号",
-  "hui-yuan-ming-cheng": "会员名称",
   "hui-yuan-hao-ma": "会员号码",
   "hui-yuan-xin-xi": "会员信息",
   "wu": "无",
   "shou-huo-ren-ming": "收货人名",
   "lian-xi-dian-hua": "联系电话",
   "xiang-xi-di-zhi": "详细地址",
-  "ding-dan-lei-xing": "订单类型",
   "ding-dan-shi-jian": "订单时间",
-  "you-hui-jin-e": "优惠金额",
   "ying-shou-jin-e": "应收金额",
   "da-yin": "打印",
-  "qu-xiao": "取消",
   "ding-dan-ming-xi": "订单明细",
   "yu-lan-de-biao-ti": "预览的标题",
   "yu-lan-jie-shu-kai-shi-da-yin": "预览结束，开始打印",
   "ding-dan-xiang-qing": "订单详情",
   "ji-chu-xin-xi": "基础信息",
-  "ding-dan-hao": "订单号",
-  "zong-jin-e": "总金额",
-  "ding-dan-zhuang-tai": "订单状态",
-  "ding-dan-lei-xing": "订单类型",
-  "ding-dan-shi-jian": "订单时间",
   "xia-dan-zhuo-ma": "下单桌码",
   "bei-zhu-xin-xi": "备注信息",
   "zhi-fu-xin-xi": "支付信息",
-  "zhi-fu-jin-e": "支付金额",
-  "zhi-fu-zhuang-tai": "支付状态",
   "jian-mian-jin-e": "减免金额",
-  "zhi-fu-fang-shi": "支付方式",
   "zhi-fu-shi-jian": "支付时间",
   "shi-yong-qia-quan": "使用卡券",
   "shi-yong-ji-fen": "使用积分",
-  "ji-fen-jin-e": "积分金额",
   "pei-song-fei-yong": "配送费用",
-  "hui-yuan-xin-xi": "会员信息",
-  "hui-yuan-ID": "会员ID",
   "hui-yuan-hao": "会员号",
-  "hui-yuan-ming-cheng": "会员名称",
-  "shou-ji-hao": "手机号",
-  "you-ke": "游客",
   "guan-li-yuan": "管理员",
   "dai-xia-dan": "代下单",
   "shang-pin-xin-xi": "商品信息",
@@ -172,18 +153,14 @@
   "ming-cheng": "名称",
   "gui-ge": "规格",
   "jia-ge": "价格",
-  "you-hui-jin-e": "优惠金额",
   "shu-liang": "数量",
   "pei-song-xin-xi": "配送信息",
-  "pei-song-fang-shi": "配送方式",
   "men-dian-zi-ti": "门店自提",
   "wu-liu-pei-song": "物流配送",
   "zi-ti-di-zhi": "自提地址",
   "shou-huo-ren": "收货人",
-  "lian-xi-dian-hua": "联系电话",
-  "xiang-xi-di-zhi": "详细地址",
   "wu-liu-xin-xi": "物流信息",
-  "wu-liu-gong-si": "物流公司",
-  "wu-liu-dan-hao": "物流单号",
-  "fa-huo-shi-jian": "发货时间"
+  "fa-huo-shi-jian": "发货时间",
+  "ying-wen": "英文",
+  "zhong-wen": "中文"
 }

src/renderer/main.js

@@ -26,8 +26,8 @@ import '@/styles/element-variables.scss'
 
 // 引入 i18n 语言包
 import VueI18n from 'vue-i18n'
-import loadLanguage from './i18n'
-const languages = loadLanguage()
+import i18n from './i18n'
+
 const pinia = createPinia()
 
 // 全局组件挂载
@@ -48,16 +48,9 @@ Vue.use(PiniaVuePlugin) // 确保pinia在最先挂载
 Vue.use(directive)
 Vue.use(Print)
 Vue.use(Router)
-// 创建 i18n
-Vue.use(VueI18n) // 新版本必须要这个，不知道为什么
 
 usePermission() // 放在后面，确保加载顺序
 
-const i18n = new VueI18n({
-  locale: 'zh-CN', // 设置默认语言
-  messages: languages, // 设置语言包
-})
-
 Vue.use(ElementUI, {
   i18n: (key, value) => i18n.t(key, value),
 })

src/renderer/views/login/index.vue

@@ -10,6 +10,7 @@
         label-position="left"
       >
         <h3 class="title">{{ systemName }}</h3>
+        <LangTab></LangTab>
         <el-form-item prop="username">
           <span class="svg-container svg-container_login">
             <svg-icon icon-class="user" />
@@ -57,7 +58,9 @@
           </div>
         </el-form-item>
         <div class="login-btn">
-          <button type="button" class="btn" @click="handleLogin()">{{ $t('li-ji-deng-lu') }}</button>
+          <button type="button" class="btn" @click="handleLogin()">
+            {{ $t('li-ji-deng-lu') }}
+          </button>
         </div>
         <div class="tips">
           <!-- <span>Copyright © 2020-2024 <a target="_blank" href="https://www.fuint.cn">fuint.cn</a> 延禾技术 All Rights Reserved.</span> -->
@@ -71,9 +74,12 @@
 import { useUserStore } from '@/store/user'
 import { useRouter } from '@/hooks/use-router'
 import { getCodeImg } from '@/api/login'
+import LangTab from '@/components/LangTab/index.vue'
+
 const { login } = useUserStore()
 const router = useRouter()
 export default {
+  components: { LangTab },
   data() {
     return {
       systemName: this.$t('app.title'),
@@ -82,11 +88,20 @@ export default {
       codeUrl: '',
       pwdType: 'password',
       loginRules: {
-        username: [{ required: true, trigger: 'blur', message: this.$t('qing-shu-ru-nin-de-zhang-hao') }],
-        password: [{ required: true, trigger: 'blur', message: this.$t('qing-shu-ru-nin-de-mi-ma') }],
+        username: [
+          { required: true, trigger: 'blur', message: this.$t('qing-shu-ru-nin-de-zhang-hao') },
+        ],
+        password: [
+          { required: true, trigger: 'blur', message: this.$t('qing-shu-ru-nin-de-mi-ma') },
+        ],
         captchaCode: [
           { required: true, trigger: 'change', message: this.$t('qing-shu-ru-yan-zheng-ma') },
-          { min: 4, max: 6, message: this.$t('qing-shu-ru-zheng-que-yan-zheng-ma'), trigger: 'blur' },
+          {
+            min: 4,
+            max: 6,
+            message: this.$t('qing-shu-ru-zheng-que-yan-zheng-ma'),
+            trigger: 'blur',
+          },
         ],
       },
     }