feat(global):添加深色模式

li1553770945 · Nov 13, 2024 · 6a6f0b5 · 6a6f0b5
1 parent 618cbe9
commit 6a6f0b5
Show file tree

Hide file tree

Showing 8 changed files with 696 additions and 663 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -24,7 +24,9 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -39,13 +41,15 @@ declare module '@vue/runtime-core' {
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     Menu: typeof import('./src/components/menu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@types/node": "^18.14.0",
     "axios": "^1.3.3",
     "cross-env": "^7.0.3",
-    "element-plus": "^2.7.0",
+    "element-plus": "^2.8.7",
     "pinia": "^2.0.32",
     "vue": "^3.2.45",
     "vue-clipboard3": "^2.0.0",

diff --git a/src/App.vue b/src/App.vue
@@ -20,6 +20,7 @@ import { ref } from "vue";
 import Menu from "./components/menu.vue"
 const timeNow = new Date();
 const year = timeNow.getFullYear();
+
 </script>
 
 <style scoped>
@@ -44,10 +45,8 @@ const year = timeNow.getFullYear();
 .main-content {
   min-width: 800px;
   max-width: 1200px;
-  /* 最大宽度为 1200px */
   width: 100%;
-  /* 使宽度可以根据视口大小变化 */
   margin: 0 auto;
-  /* 水平居中 */
 }
-</style>
+</style>
+
diff --git a/src/components/menu.vue b/src/components/menu.vue
@@ -4,9 +4,13 @@
     <el-aside :width="menuWidth">
       <!-- 侧边栏菜单区域 -->
       <el-menu default-active="home" id="menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
-        <el-radio-group id="collapse-menu-button" v-model="isCollapse">
-          <el-radio-button :label="!isCollapse">|||</el-radio-button>
-        </el-radio-group>
+
+        <div class="menu-buttons">
+          <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" class="theme-switch" />
+          <el-radio-group v-model="isCollapse" id="collapse-menu-button" class="collapse-button">
+            <el-radio-button :label="!isCollapse">|||</el-radio-button>
+          </el-radio-group>
+        </div>
         <router-link to="/home"><el-menu-item index="home">
             <el-icon>
               <House />
@@ -107,17 +111,22 @@
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import { Notebook, TopRight, User, Setting, Message, House, Star, MilkTea, Sugar, InfoFilled } from "@element-plus/icons-vue";
+import { Notebook, TopRight, User, Setting, Message, House, Star, MilkTea, Sugar, InfoFilled, Sunny,  Moon } from "@element-plus/icons-vue";
 import { useUser } from "../store/user"
 import { storeToRefs } from 'pinia'
 import { logoutAPI, userInfoAPI } from "@/request/api";
 import { ElNotification } from 'element-plus'
 import { onMounted } from 'vue'
 import { Github } from '@icon-park/vue-next';
+
+import { set, useDark, useToggle } from '@vueuse/core'
+
+
 const userStore = useUser()
-const { token,isLogined, username, nickname, role } = storeToRefs(userStore)
+const { token, isLogined, username, nickname, role } = storeToRefs(userStore)
 const isCollapse = ref(false);
 let menuWidth = ref("64");
+
 const handleOpen = (key: string, keyPath: string[]) => {
   menuWidth = ref("200");
 };
@@ -168,44 +177,55 @@ const logout = () => {
 }
 
 const fetchUserInfo = () => {
-    userInfoAPI().then(
-        (res) => {
-            let data = res.data;
-            if (data.code != 0) {
-                console.log("用户未登录");
-            } else {
-                data = data.data
-                ElNotification({
-                    title: '获取用户信息成功',
-                    message: "欢迎回来, " + data.nickname,
-                    type: 'success',
-                })
-                isLogined.value = true;
-                username.value = data.username;
-                nickname.value = data.nickname;
-                role.value = data.role;
-            }
-        }
-    ).catch(
-        err => {
-            ElNotification({
-                title: '获取用户信息请求失败',
-                message: err.message,
-                type: 'error',
-            })
-        }
-    )
+  userInfoAPI().then(
+    (res) => {
+      let data = res.data;
+      if (data.code != 0) {
+        console.log("用户未登录");
+      } else {
+        data = data.data
+        ElNotification({
+          title: '获取用户信息成功',
+          message: "欢迎回来, " + data.nickname,
+          type: 'success',
+        })
+        isLogined.value = true;
+        username.value = data.username;
+        nickname.value = data.nickname;
+        role.value = data.role;
+      }
+    }
+  ).catch(
+    err => {
+      ElNotification({
+        title: '获取用户信息请求失败',
+        message: err.message,
+        type: 'error',
+      })
+    }
+  )
 }
 
 // 在 token 改变时重新请求用户信息
 watch(token, (newToken, oldToken) => {
-    if (newToken && newToken !== oldToken) {
-        fetchUserInfo();
-    }
+  if (newToken && newToken !== oldToken) {
+    fetchUserInfo();
+  }
+})
+
+const isDark = useDark()
+
+const changeDarkAttribute = ()=>{
+  const theme = isDark.value ? 'dark' : 'light'
+  document.documentElement.setAttribute('data-theme', theme)
+}
+watch(isDark, (newValue, oldValue) => {
+  changeDarkAttribute()
 })
 
 // 组件挂载时恢复用户状态
 onMounted(() => {
+  changeDarkAttribute();  
   const tokenStoreValue = localStorage.getItem("token");
   if (tokenStoreValue) {
     token.value = tokenStoreValue;
@@ -224,17 +244,60 @@ const openGithub = () => {
 <style>
 #menu {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;  /* 让按钮垂直排列 */
+  justify-content: flex-start; /* 将按钮排列在顶部 */
 }
 
-
-#collapse-menu-button {
-  margin-left: 15px;
+.menu-buttons {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;  /* 按钮居中 */
   margin-bottom: 20px;
   margin-top: 20px;
-  margin-right: 20px;
 }
 
-#contact-me {
-  text-align: center;
+.theme-switch {
+  margin-bottom: 15px;  /* 深色模式开关与折叠按钮之间的间距 */
 }
-</style>
+
+.collapse-button {
+  display: flex;
+  justify-content: center;  /* 将折叠按钮居中 */
+}
+
+#collapse-menu-button .el-radio-button {
+  padding: 5px 10px;
+  transition: background-color 0.3s;
+}
+
+
+#menu .el-menu-item {
+  padding: 10px 20px;  /* 菜单项的内边距 */
+}
+
+/* 改变菜单图标和文字的颜色以适应深色模式 */
+[data-theme="dark"] .el-menu-item {
+  background-color: #333;
+  color: #fff;
+}
+
+[data-theme="dark"] .el-menu-item:hover {
+  background-color: #444;
+}
+
+[data-theme="dark"] .el-sub-menu:hover {
+  background-color: #444;
+}
+
+[data-theme="dark"] .el-menu {
+  background-color: #333;
+  color: #fff;
+}
+.el-switch.is-checked .el-switch__core{
+  --el-switch-on-color: var(--background-color-dark);  /* 激活状态的背景色 */
+  --el-switch-off-color: var(--background-color-light);   /* 非激活状态的背景色 */
+}
+
+</style>
diff --git a/src/main.ts b/src/main.ts
@@ -4,6 +4,8 @@ import App from './App.vue'
 import router from "./routes/index"; 
 import { createPinia } from 'pinia' 
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
 const pinia = createPinia()
 
 const app= createApp(App)

diff --git a/src/store/global.ts b/src/store/global.ts
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+// useMain  可以是 useUser、useCart 之类的名字 
+// defineStore('main',{..}) 在devtools 就使用 main 这个名
+export const useUser = defineStore('user', {
+    // 相当于data
+    state: () => {
+        return {
+            isLogined: false,
+            token:"",
+            username: "",
+            nickname: "",
+            role:"",
+        }
+    },
+
+})
diff --git a/src/style.css b/src/style.css
@@ -4,14 +4,17 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+  --background-color-light: #f6f6f7; /* 浅色背景 */
+  --background-color-dark: #161618; /* 深色背景 */
+  --text-color-light: #000000; /* 浅色文字颜色 */
+  --text-color-dark: #ffffff; /* 深色文字颜色 */
+
 }
 
 a {
@@ -42,13 +45,10 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -62,15 +62,14 @@ button:focus-visible {
   min-height: 100vh;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+/* 默认（浅色模式） */
+body {
+  background-color: var(--background-color-light);
+  color: var(--text-color-light);
+}
+
+/* 深色模式 */
+[data-theme="dark"] body {
+  background-color: var(--background-color-dark);
+  color: var(--text-color-dark);
 }