feat:#1 国际化与暗黑模式集成

terwer · Oct 9, 2022 · 61d30f6 · 61d30f6
1 parent 0f6b6d1
commit 61d30f6
Show file tree

Hide file tree

Showing 8 changed files with 210 additions and 67 deletions.
diff --git a/components/default/HeaderTime.vue b/components/default/HeaderTime.vue
@@ -1,20 +1,20 @@
 <template>
   <el-row class="time">
-    <el-col :xs="24" :sm="24" :md="8">
-      <div>
-        现在是
-        <client-only>
+    <client-only>
+      <el-col :xs="24" :sm="24" :md="8">
+        <div>
+          现在是
           {{ timeData.clientTime }}
-        </client-only>
-        {{ timeData.weekday }}
-      </div>
-    </el-col>
-    <el-col :xs="24" :sm="24" :md="8">
-      <div>{{ timeData.popTime === "" ? "加载中..." : timeData.popTime }}</div>
-    </el-col>
-    <el-col :xs="24" :sm="24" :md="8">
-      <div>{{ timeData.tradTime === "" ? "加载中..." : timeData.tradTime }}</div>
-    </el-col>
+          {{ timeData.weekday }}
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="8">
+        <div>{{ timeData.popTime === "" ? "加载中..." : timeData.popTime }}</div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="8">
+        <div>{{ timeData.tradTime === "" ? "加载中..." : timeData.tradTime }}</div>
+      </el-col>
+    </client-only>
   </el-row>
 </template>
 
@@ -45,9 +45,9 @@ const initData = () => {
   timeData.value.shengxiao = getShengXiao();
 }
 
-initData();
 onMounted(() => {
   if (inBrowser()) {
+    initData();
     setInterval(function () {
       timeData.value.clientTime = getClientTime();
     }, 1000);
@@ -62,7 +62,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.time{
+.time {
   margin-bottom: 10px;
 }
 </style>
diff --git a/locales/en_US.ts b/locales/en_US.ts
@@ -0,0 +1,11 @@
+export default {
+    "lang.choose": "Choose lang",
+    "lang.choose.placeholder": "Please select language",
+    "theme.mode.choose": "Mode",
+    "theme.mode.dark": "Dark mode",
+    "theme.mode.light": "Light mode",
+    "theme.choose": "Choose theme",
+    "theme.choose.default": "Default theme",
+    "theme.choose.terwer": "Terwer theme",
+    "ele.select.placeholder": "Select"
+}
diff --git a/locales/zh_CN.ts b/locales/zh_CN.ts
@@ -0,0 +1,11 @@
+export default {
+    "lang.choose": "语言选择",
+    "lang.choose.placeholder": "请选择语言",
+    "theme.mode.choose": "切换模式",
+    "theme.mode.dark": "暗黑模式",
+    "theme.mode.light": "浅色模式",
+    "theme.choose": "主题选择",
+    "theme.choose.default": "默认主题",
+    "theme.choose.terwer": "特维主题",
+    "ele.select.placeholder": "请选择",
+}
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "sass": "^1.55.0",
     "typescript": "^4.8.4",
     "unplugin-element-plus": "^0.4.1",
-    "vite": "^3.1.6"
+    "vite": "^3.1.6",
+    "vue-i18n": "^9.2.2"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",

diff --git a/pages/setting.vue b/pages/setting.vue
@@ -1,79 +1,105 @@
 <template>
   <div class="setting">
     <el-form>
-      <h1>Setting</h1>
-      <el-form-item label="Lang">
-        <el-space :spacer="spacer">
-          <client-only>
-            <el-select v-model="lang" placeholder="Select">
-              <el-option
-                  v-for="item in langOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-              />
-            </el-select>
-          </client-only>
-          <el-button type="primary" @click="enableCustomLayout">Update layout</el-button>
-        </el-space>
+      <!-- 主题 -->
+      <el-form-item :label="$t('theme.choose')">
+        <client-only>
+          <el-select v-model="layout" :placeholder="$t('ele.select.placeholder')" @change="layoutChanged">
+            <el-option
+                v-for="item in layouts"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </client-only>
       </el-form-item>
-      <el-form-item label="Layout">
-        <el-space :spacer="spacer">
-          <client-only>
-            <el-select v-model="value" placeholder="Select">
-              <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-              />
-            </el-select>
-          </client-only>
-          <el-button type="primary" @click="enableCustomLayout">Update layout</el-button>
-        </el-space>
+
+      <!-- 语言选项 -->
+      <el-form-item :label="$t('lang.choose')">
+        <client-only>
+          <el-select :placeholder="$t('lang.choose.placeholder')" v-model="$i18n.locale" @change="langChanged">
+            <el-option :key="i" v-for="(lang, i) in langs" :label="lang.label" :value="lang.value"/>
+          </el-select>
+        </client-only>
       </el-form-item>
-      <el-form-item label="Dark mode">
-        <el-button type="primary">Change mode</el-button>
+
+      <!-- 暗黑模式 -->
+      <el-form-item :label="$t('theme.mode.choose')">
+        <el-button type="primary" @click="toggleDark()">
+          {{ isDark ? $t('theme.mode.light') : $t('theme.mode.dark') }}
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ElButton, ElDivider, ElForm, ElFormItem, ElOption, ElSelect, ElSpace} from "element-plus";
-import {h, ref} from 'vue'
+import {ElButton, ElForm, ElFormItem, ElOption, ElSelect} from "element-plus";
+import {useI18n} from "vue-i18n";
+import logUtil from "~/lib/logUtil";
+import {useDark, useToggle} from "@vueuse/core";
+import {useSettingStore} from "~/stores/settingStore";
 
-const value = ref('default')
-const options = [
+const {t} = useI18n()
+const router = useRouter();
+const route = useRoute()
+const {locale} = useI18n()
+const {layout, setLayout, lang, setLang} = useSettingStore()
+
+// 主题
+const layouts = [
   {
-    value: 'default',
-    label: 'default',
+    value: '',
+    label: t('ele.select.placeholder'),
   },
-]
-const lang = ref('zh_CN')
-const langOptions = [
   {
-    value: 'zh_CN',
-    label: '简体中文',
+    value: 'default',
+    label: t('theme.choose.default'),
   },
   {
-    value: 'en_US',
-    label: 'English',
+    value: 'terwer',
+    label: t('theme.choose.terwer'),
   },
 ]
-
 // 使用这一行可以不使用通用布局
 // definePageMeta({
 //   layout: false,
 // });
+const layoutChanged = (ly: any) => {
+  logUtil.logInfo("layoutChanged=>", ly);
 
-const route = useRoute()
+  // route.meta.layout = "default"
+  setLayout(ly)
+  route.meta.layout = ly
+}
+
+// 语言
+const langs = [
+  {
+    value: 'zh_CN',
+    label: "简体中文"
+  },
+  {
+    value: 'en_US',
+    label: "English"
+  }
+]
+const langChanged = (lang: string) => {
+  logUtil.logInfo("langChanged=>", lang);
+  setLang(lang);
+  locale.value = lang;
 
-function enableCustomLayout() {
-  route.meta.layout = "default"
+  // 跳转首页，解决当前页面不能马上生效问题
+  router.push({path: "/"});
 }
 
-const spacer = h(ElDivider, {direction: 'vertical'})
+// 模式
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+// 初始化
+locale.value = lang
 </script>
 
 <script lang="ts">

diff --git a/plugins/i18n.ts b/plugins/i18n.ts
@@ -0,0 +1,19 @@
+import {createI18n} from 'vue-i18n'
+// import {zhCn, en} from "element-plus/es/locale";
+import zh_CN from "~/locales/zh_CN";
+import en_US from "~/locales/en_US";
+
+export default defineNuxtPlugin(({vueApp}) => {
+    const i18n = createI18n({
+        legacy: false,
+        globalInjection: true,
+        locale: 'zh_CN', // 默认显示语言
+        fallbackLocale: 'en_US', // 次要语言
+        messages: {
+            zh_CN,
+            en_US
+        },
+    })
+
+    vueApp.use(i18n)
+})
diff --git a/stores/settingStore.ts b/stores/settingStore.ts
@@ -0,0 +1,27 @@
+import {defineStore} from "pinia";
+
+/**
+ * 设置配置存储
+ */
+export const useSettingStore = defineStore("layout", () => {
+    const layout = ref("default")
+    const lang = ref("zh_CN")
+
+    /**
+     * 设置新的布局
+     * @param ly 布局
+     */
+    function setLayout(ly: string) {
+        layout.value = ly;
+    }
+
+    /**
+     * 设置新语言
+     * @param l 语言
+     */
+    function setLang(l: string) {
+        lang.value = l
+    }
+
+    return {layout, setLayout, lang, setLang}
+})
diff --git a/yarn.lock b/yarn.lock
@@ -374,6 +374,44 @@
     kolorist "^1.5.1"
     local-pkg "^0.4.2"
 
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.npmmirror.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
@@ -4169,7 +4207,7 @@ source-map-support@^0.5.21, source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.6.0, source-map@^0.6.1:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -4688,6 +4726,16 @@ vue-devtools-stub@^0.1.0:
   resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"
   integrity sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==
 
+vue-i18n@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-router@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"