feat(layout): implementation of topic switching

components.d.ts

@@ -10,11 +10,13 @@ declare module 'vue' {
     Hello: typeof import('./src/components/Hello.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NFlex: typeof import('naive-ui')['NFlex']
     NH2: typeof import('naive-ui')['NH2']
+    NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']

package.json

@@ -15,6 +15,7 @@
     "lint:lint-staged": "lint-staged"
   },
   "dependencies": {
+    "@vicons/ionicons5": "^0.12.0",
     "axios": "^1.7.2",
     "mitt": "^3.0.1",
     "normalize.css": "^8.0.1",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="isDark ? darkTheme : null">
     <n-message-provider>
       <n-spin :show="isLoading">
         <router-view />
@@ -9,20 +9,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount } from 'vue';
+import { darkTheme } from 'naive-ui';
 import { zhCN, dateZhCN } from 'naive-ui';
 import { NConfigProvider } from 'naive-ui';
+import { computed, onBeforeMount } from 'vue';
 import { useTheme } from '@/hooks/useTheme.ts';
 import { useTranslations } from '@/hooks/useTranslate.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
 import { useLoadingStore } from '@/stores/modules/loading.ts';
 
 import { setFavicon } from '@/utils';
+import { storeToRefs } from 'pinia';
 
 const { initTheme } = useTheme();
+const { updateTranslations } = useTranslations();
+
 const globalStore = useGlobalStore();
 const loadingStore = useLoadingStore();
-const { updateTranslations } = useTranslations();
+
+const { isDark } = storeToRefs(globalStore);
 
 const isLoading = computed(() => {
   return loadingStore.isLoading;

src/hooks/useTheme.ts

@@ -6,6 +6,7 @@ import { createDiscreteApi } from 'naive-ui';
 import { asideTheme } from '@/styles/theme/aside.ts';
 import { getLightColor, getDarkColor } from '@/utils';
 import { useGlobalStore } from '@/stores/modules/global.ts';
+import { mainContentTheme } from '@/styles/theme/mainContent.ts';
 
 /**
  * @description 全局主题 hooks
@@ -32,6 +33,7 @@ export const useTheme = () => {
     }
 
     changePrimary(primary.value);
+    setMainTheme();
     setAsideTheme();
   };
 
@@ -75,6 +77,20 @@ export const useTheme = () => {
     }
   };
 
+  /**
+   * @description 设置主题样式
+   */
+  const setMainTheme = () => {
+    let type: Theme.ThemeType = 'light';
+
+    if (isDark.value) type = 'dark';
+
+    const theme = mainContentTheme[type!];
+    for (const [key, value] of Object.entries(theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  };
+
   /**
    * 初始化样式
    */

src/languages/modules/en.ts

@@ -10,5 +10,7 @@ export default {
   requiredHasUserNameMapped: 'Username attr is required.',
   'Web Terminal': 'Web Terminal',
   'Theme reset': 'The theme color has been reset to',
-  'Custom Setting': 'Custom Setting'
+  'Custom Setting': 'Custom Setting',
+  'Dark Mode': '黑暗模式',
+  'Primary Color': 'Primary Color'
 };

src/languages/modules/zh.ts

@@ -10,5 +10,7 @@ export default {
   requiredHasUserNameMapped: '用户名属性是必需的。',
   'Web Terminal': 'Web 终端',
   'Theme reset': '主题颜色已重置为',
-  'Custom Setting': '自定义设置'
+  'Custom Setting': '自定义设置',
+  'Dark Mode': '黑暗模式',
+  'Primary Color': '主题颜色'
 };

src/layouts/components/SettingDrawer/index.vue

@@ -1,29 +1,52 @@
 <template>
   <n-drawer
     v-model:show="showSettingDrawer"
-    :default-width="502"
+    :default-width="290"
     placement="right"
     resizable
     closable
   >
     <n-drawer-content :title="t('Custom Setting')">
+      <n-divider> 主题设置 </n-divider>
       <n-flex justify="space-around" align="center">
-        主题切换：
-        <n-switch />
+        {{ t('Dark Mode') }}
+        <n-switch v-model:value="active" @update:value="handleChange">
+          <template #checked-icon>
+            <n-icon :component="MoonOutline" />
+          </template>
+          <template #unchecked-icon>
+            <n-icon :component="SunnyOutline" />
+          </template>
+        </n-switch>
       </n-flex>
     </n-drawer-content>
   </n-drawer>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useTheme } from '@/hooks/useTheme.ts';
+import { onBeforeUnmount, ref } from 'vue';
+import { useGlobalStore } from '@/stores/modules/global.ts';
+
 import mittBus from '@/utils/mittBus.ts';
+import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
+
+const globalStore = useGlobalStore();
 
 const { t } = useI18n();
+const { switchDark } = useTheme();
+const { isDark } = storeToRefs(globalStore);
 
+const active = isDark;
 const showSettingDrawer = ref<Boolean>(false);
 
+const handleChange = (value: Boolean) => {
+  globalStore.setGlobalState('isDark', value);
+  switchDark();
+};
+
 mittBus.on('openSettingDrawer', () => {
   showSettingDrawer.value = true;
 });

src/layouts/index.vue

@@ -17,9 +17,14 @@
       >
         <FileManagement class="file-management"></FileManagement>
       </n-layout-sider>
-      <n-layout>
+      <n-layout style="background-color: var(--el-main-bg-color)">
         <n-layout-header
-          style="width: 100%; height: 40px; border-bottom: 1px solid #000000"
+          style="
+            width: 100%;
+            height: 40px;
+            background-color: var(--el-main-bg-color);
+            border-bottom: 1px solid #000000;
+          "
         ></n-layout-header>
       </n-layout>
     </n-layout>

src/styles/theme/mainContent.ts

@@ -0,0 +1,12 @@
+import { Theme } from '../types/index';
+
+export const mainContentTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
+  light: {
+    '--el-main-bg-color': '#F8F8F8',
+    '--el-main-text-color': '#dadada'
+  },
+  dark: {
+    '--el-main-bg-color': '#292C33',
+    '--el-main-text-color': '#dadada'
+  }
+};

vite.config.ts

@@ -31,14 +31,14 @@ export default defineConfig({
     cors: true,
     proxy: {
       '/api': {
-        target: 'http://192.168.200.29:8080',
-        // target: 'http://localhost:8081',
+        // target: 'http://192.168.200.29:8080',
+        target: 'http://localhost:8081',
         changeOrigin: true,
         rewrite: (path: string) => path.replace(/^\/api/, ' ')
       },
       '/static': {
-        target: 'http://192.168.200.29:8080',
-        // target: 'http://localhost:8081',
+        // target: 'http://192.168.200.29:8080',
+        target: 'http://localhost:8081',
         changeOrigin: true,
         rewrite: (path: string) => path.replace(/^\/static/, ' ')
       }