支持开启暗黑模式

2024-12-04 20:32:06 +08:00
parent 535c5bd814
commit e212a0ab75
16 changed files with 392 additions and 273 deletions
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -18,6 +18,13 @@

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

+        <el-tooltip content="主题模式" effect="dark" placement="bottom">
+          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
+            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
+            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
+          </div>
+        </el-tooltip>
+
        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>
@@ -98,6 +105,10 @@ const emits = defineEmits(['setLayout'])
 function setLayout() {
  emits('setLayout');
 }
+
+function toggleTheme() {
+  settingsStore.toggleTheme()
+}
 </script>

 <style lang='scss' scoped>
@@ -105,7 +116,7 @@ function setLayout() {
  height: 50px;
  overflow: hidden;
  position: relative;
-  background: #fff;
+  background: var(--navbar-bg);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
@@ -150,7 +161,7 @@ function setLayout() {
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
-      color: #5a5e66;
+      color: var(--navbar-text);
      vertical-align: text-bottom;

      &.hover-effect {
@@ -161,6 +172,19 @@ function setLayout() {
          background: rgba(0, 0, 0, 0.025);
        }
      }
+
+      &.theme-switch-wrapper {
+        display: flex;
+        align-items: center;
+
+        svg {
+          transition: transform 0.3s;
+          
+          &:hover {
+            transform: scale(1.15);
+          }
+        }
+      }
    }

    .avatar-container {
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -149,13 +149,15 @@ defineExpose({
 <style lang='scss' scoped>
 .setting-drawer-title {
  margin-bottom: 12px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--el-text-color-primary, rgba(0, 0, 0, 0.85));
  line-height: 22px;
  font-weight: bold;
+
  .drawer-title {
    font-size: 14px;
  }
 }
+
 .setting-drawer-block-checbox {
  display: flex;
  justify-content: flex-start;
@@ -174,13 +176,6 @@ defineExpose({
      height: 48px;
    }

-    .custom-img {
-      width: 48px;
-      height: 38px;
-      border-radius: 5px;
-      box-shadow: 1px 1px 2px #898484;
-    }
-
    .setting-drawer-block-checbox-selectIcon {
      position: absolute;
      top: 0;
@@ -197,7 +192,7 @@ defineExpose({
 }

 .drawer-item {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--el-text-color-regular, rgba(0, 0, 0, 0.65));
  padding: 12px 0;
  font-size: 14px;

--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
+        <h1 v-else class="sidebar-title">{{ title }}</h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
+        <h1 class="sidebar-title">{{ title }}</h1>
      </router-link>
    </transition>
  </div>
 </template>

 <script setup>
-import variables from '@/assets/styles/variables.module.scss'
 import logo from '@/assets/logo/logo.png'
 import useSettingsStore from '@/store/modules/settings'
+import variables from '@/assets/styles/variables.module.scss'

 defineProps({
  collapse: {
@@ -28,9 +28,27 @@ defineProps({
 const title = import.meta.env.VITE_APP_TITLE;
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
+
+// 获取Logo背景色
+const getLogoBackground = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-bg)';
+  }
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
+});
+
+// 获取Logo文字颜色
+const getLogoTextColor = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-text)';
+  }
+  return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
+});
 </script>

 <style lang="scss" scoped>
+@import '@/assets/styles/variables.module.scss';
+
 .sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
 }
@@ -45,7 +63,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
  width: 100%;
  height: 50px;
  line-height: 50px;
-  background: #2b2f3a;
+  background: v-bind(getLogoBackground);
  text-align: center;
  overflow: hidden;

@@ -63,7 +81,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
    & .sidebar-title {
      display: inline-block;
      margin: 0;
-      color: #fff;
+      color: v-bind(getLogoTextColor);
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,16 +1,17 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div :class="{ 'has-logo': showLogo }" class="sidebar-container">
    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+        :background-color="getMenuBackground"
+        :text-color="getMenuTextColor"
        :unique-opened="true"
        :active-text-color="theme"
        :collapse-transition="false"
        mode="vertical"
+        :class="sideTheme"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
@@ -36,19 +37,68 @@ const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()

-const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
 const isCollapse = computed(() => !appStore.sidebar.opened);

+// 获取菜单背景色
+const getMenuBackground = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-bg)';
+  }
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
+});
+
+// 获取菜单文字颜色
+const getMenuTextColor = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-text)';
+  }
+  return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText;
+});
+
 const activeMenu = computed(() => {
  const { meta, path } = route;
-  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
-})
-
+});
 </script>
+
+<style lang="scss" scoped>
+.sidebar-container {
+  background-color: v-bind(getMenuBackground);
+  
+  .scrollbar-wrapper {
+    background-color: v-bind(getMenuBackground);
+  }
+
+  .el-menu {
+    border: none;
+    height: 100%;
+    width: 100% !important;
+    
+    .el-menu-item, .el-sub-menu__title {
+      &:hover {
+        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+      }
+    }
+
+    .el-menu-item {
+      color: v-bind(getMenuTextColor);
+      
+      &.is-active {
+        color: var(--menu-active-text, #409eff);
+        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+      }
+    }
+
+    .el-sub-menu__title {
+      color: v-bind(getMenuTextColor);
+    }
+  }
+}
+</style>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -257,13 +257,14 @@ function handleScroll() {
 }
 </script>

-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .tags-view-container {
  height: 34px;
  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  background: var(--tags-bg, #fff);
+  border-bottom: 1px solid var(--tags-item-border, #d8dce5);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+
  .tags-view-wrapper {
    .tags-view-item {
      display: inline-block;
@@ -271,25 +272,29 @@ function handleScroll() {
      cursor: pointer;
      height: 26px;
      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
+      border: 1px solid var(--tags-item-border, #d8dce5);
+      color: var(--tags-item-text, #495060);
+      background: var(--tags-item-bg, #fff);
      padding: 0 8px;
      font-size: 12px;
      margin-left: 5px;
      margin-top: 4px;
+
      &:first-of-type {
        margin-left: 15px;
      }
+
      &:last-of-type {
        margin-right: 15px;
      }
+
      &.active {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
+
        &::before {
-          content: "";
+          content: '';
          background: #fff;
          display: inline-block;
          width: 8px;
@@ -301,9 +306,10 @@ function handleScroll() {
      }
    }
  }
+
  .contextmenu {
    margin: 0;
-    background: #fff;
+    background: var(--el-bg-color-overlay, #fff);
    z-index: 3000;
    position: absolute;
    list-style-type: none;
@@ -311,14 +317,17 @@ function handleScroll() {
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    color: var(--tags-item-text, #333);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    border: 1px solid var(--el-border-color-light, #e4e7ed);
+
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
+
      &:hover {
-        background: #eee;
+        background: var(--tags-item-hover, #eee);
      }
    }
  }
@@ -335,15 +344,17 @@ function handleScroll() {
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all .3s cubic-bezier(.645, .045, .355, 1);
      transform-origin: 100% 50%;
+
      &:before {
-        transform: scale(0.6);
+        transform: scale(.6);
        display: inline-block;
        vertical-align: -3px;
      }
+
      &:hover {
-        background-color: #b4bccc;
+        background-color: var(--tags-close-hover, #b4bccc);
        color: #fff;
        width: 12px !important;
        height: 12px !important;