Merge pull request #24 from terwer/dev

feat:#1 完成暗黑模式适配

assets/scss/index.dark.scss

@@ -0,0 +1,5 @@
+html.dark body{
+  /* 自定义深色背景颜色 */
+  --custom-app-color:#ffffff;
+  --custom-app-bg-color: #000000;
+}

assets/scss/index.scss

@@ -1,40 +1,42 @@
+/* 样式重置 */
 html,
 body,
 #app {
   margin: 0;
   padding: 0;
 }
 
-html.dark {
-  background: #222;
-  color: white;
-}
-
 a {
   font-weight: 400;
   color: var(--el-color-primary);
 }
 
-/**
-* 所有主题公共样式
-* 注意：每个主题都要引用这个样式
-*/
-body {
-  font-family: "LXGW WenKai","Wenquanyi Micro Hei","Wenquanyi Micro Hei Mono","Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono,Fira Code,Microsoft Yahei,Consolas,Courier New,monospace,Menlo,Monaco !important;
-  color: #666 !important;
-}
 body,
 * {
   box-sizing: border-box;
 }
+
 body a {
   text-decoration: none;
   color: #00a4ff;
 }
+
 body a:hover {
   color: orangered;
 }
 
+/**
+* 所有主题公共样式
+* 注意：每个主题都要引用这个样式
+*/
+body {
+  font-family: "LXGW WenKai", "Wenquanyi Micro Hei", "Wenquanyi Micro Hei Mono", "Microsoft YaHei", "PT Sans", "-apple-system", "Liberation Mono", monospace, dejavu sans mono, Fira Code, Microsoft Yahei, Consolas, Courier New, monospace, Menlo, Monaco !important;
+  --custom-app-color: #666;
+  --custom-app-bg-color: #ffffff;
+  color: var(--custom-app-color);
+  background: var(--custom-app-bg-color);
+}
+
 /*
 页面动画
 https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
@@ -68,9 +70,10 @@ https://github.com/nuxt/framework/issues/3141#issuecomment-1212899838
 }
 
 /* layout */
-.jvue-body{
+.jvue-body {
   padding: 20px;
 }
-.el-menu-item > div{
+
+.el-menu-item > div {
   margin-left: -20px !important;
 }

components/default/Footer.vue

@@ -12,14 +12,21 @@
     <div class="page copyright">
       &copy; 2011-{{ getNowYear() }} <a href="https://terwer.space" target="_blank">Terwer</a> All Rights Reseaved.
       <a href="https://github.com/terwer/jvue-front" target="_blank">Github</a>.
-      <a>暗黑模式</a>
+      <a @click="toggleDark()" class="footer-mode">
+        {{ isDark ? $t('theme.mode.light') : $t('theme.mode.dark') }}
+      </a>
+
     </div>
   </footer>
 </template>
 
 <script lang="ts" setup>
 import {getNowYear, getCountDown} from "~/lib/DateUtil";
+import {useDark, useToggle} from "@vueuse/core";
 
+// 模式
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
 </script>
 
 <script lang="ts">
@@ -34,4 +41,8 @@ export default {
 .page {
   padding: 5px 0;
 }
+
+.footer-mode {
+  cursor: pointer;
+}
 </style>

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>
+          {{ $t('header.nowis') }}
           {{ 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>

locales/en_US.ts

@@ -0,0 +1,12 @@
+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",
+    "header.nowis":"Now is",
+}

locales/zh_CN.ts

@@ -0,0 +1,12 @@
+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": "请选择",
+    "header.nowis":"现在是",
+}

nuxt.config.ts

@@ -22,7 +22,11 @@ export default defineNuxtConfig({
     },
 
     // css
-    css: ['~/assets/scss/index.scss'],
+    css: [
+        '~/assets/scss/index.scss',
+        '~/assets/scss/index.dark.scss',
+        'element-plus/theme-chalk/dark/css-vars.css'
+    ],
 
     // build
     build: {

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",

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">

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)
+})