From b51e370a4f471a7cc96fe1a700acd9a71c0ee21d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E7=99=BD=E8=B5=B7?= <313720641@qq.com>
Date: Thu, 23 Jan 2025 18:05:21 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=BE=A7=E8=BE=B9=E6=A0=8F=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2,=E5=A2=9E=E5=8A=A0=E6=B8=90=E5=8F=98?=
 =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   1 +
 src/assets/styles/sidebar.scss           |  22 ++---
 src/assets/styles/variables.module.scss  |   2 +
 src/layout/components/Settings/index.vue | 115 ++++++++---------------
 src/layout/components/Sidebar/Logo.vue   |  40 ++++++--
 src/layout/components/Sidebar/index.vue  |  35 +++++--
 src/settings.ts                          |  15 ++-
 src/utils/sideTheme.ts                   |  60 ++++++++++++
 8 files changed, 184 insertions(+), 106 deletions(-)
 create mode 100644 src/utils/sideTheme.ts

diff --git a/package.json b/package.json
index caac7c0..f2838ae 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "vue-json-pretty": "2.4.0",
     "vue-router": "4.4.5",
     "vue-types": "5.1.3",
+    "vue3-colorpicker": "^2.3.0",
     "vxe-table": "4.5.22"
   },
   "devDependencies": {
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index d85da55..080cda6 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -14,7 +14,7 @@
     -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    background: $gradient-menu-background; // 将渐变色应用到侧边栏容器
     height: 100%;
     position: fixed;
     font-size: 0;
@@ -70,6 +70,7 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background: transparent !important; // 让菜单背景透明，继承父容器渐变色
     }
 
     .el-menu-item,
@@ -77,6 +78,7 @@
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      background: transparent !important; // 让菜单项背景透明，继承父容器渐变色
     }
 
     .el-menu-item .el-menu-tooltip__trigger {
@@ -87,13 +89,13 @@
     .theme-dark .sub-menu-title-noDropdown,
     .theme-dark .el-sub-menu__title {
       &:hover {
-        background-color: $base-sub-menu-title-hover !important;
+        background-color: rgba(255, 255, 255, 0.1) !important; // 使用半透明背景色
       }
     }
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.05) !important;
+        background-color: rgba(0, 0, 0, 0.05) !important; // 使用半透明背景色
       }
     }
 
@@ -105,31 +107,29 @@
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1) !important;
+        background-color: rgba(0, 0, 0, 0.1) !important; // 使用半透明背景色
       }
     }
 
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      background-color: transparent !important; // 让菜单项背景透明，继承父容器渐变色
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background-color: rgba(255, 255, 255, 0.1) !important; // 使用半透明背景色
       }
     }
 
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-menu-item {
       &:hover {
-        // you can use $sub-menuHover
-        background-color: $base-menu-hover !important;
+        background-color: rgba(255, 255, 255, 0.1) !important; // 使用半透明背景色
       }
     }
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-menu-item {
       &:hover {
-        // you can use $sub-menuHover
-        background-color: rgba(0, 0, 0, 0.04) !important;
+        background-color: rgba(0, 0, 0, 0.04) !important; // 使用半透明背景色
       }
     }
   }
@@ -229,4 +229,4 @@
       margin-right: 16px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 3aa871b..4621f9f 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -113,6 +113,8 @@ $--color-danger: #f56c6c;
 $--color-info: #909399;
 
 $base-sidebar-width: 200px;
+// 默认渐变色
+$gradient-menu-background: linear-gradient(to top, #12c2e9, #c471ed, #f64f59);
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 3082beb..1f85442 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,32 +1,17 @@
 <template>
   <el-drawer v-model="showSettings" :with-header="false" direction="rtl" size="300px" close-on-click-modal>
-    <h3 class="drawer-title">主题风格设置</h3>
-
-    <div class="setting-drawer-block-checbox">
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.DARK)">
-        <img src="@/assets/images/dark.svg" alt="dark" />
-        <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
-          <i aria-label="图标: check" class="anticon anticon-check">
-            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </i>
-        </div>
-      </div>
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.LIGHT)">
-        <img src="@/assets/images/light.svg" alt="light" />
-        <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
-          <i aria-label="图标: check" class="anticon anticon-check">
-            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
-              <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
-            </svg>
-          </i>
-        </div>
-      </div>
+    <div class="drawer-item">
+      <span>侧边栏颜色</span>
+      <span class="comp-style">
+        <!-- https://github.com/aesoper101/vue3-colorpicker/blob/main/README.ZH-cn.md -->
+        <ColorPicker
+          v-model:pureColor="pureColor"
+          useType="both"
+          format="hex6"
+          @update:pureColor="onPureColorChange"
+          @update:gradientColor="onGradientColorChange"
+        />
+      </span>
     </div>
     <div class="drawer-item">
       <span>主题颜色</span>
@@ -93,8 +78,11 @@ import useAppStore from '@/store/modules/app';
 import useSettingsStore from '@/store/modules/settings';
 import usePermissionStore from '@/store/modules/permission';
 import { handleThemeStyle } from '@/utils/theme';
+import { handleSideThemeStyle } from '@/utils/sideTheme'; // 侧边栏的处理函数
 import { SideThemeEnum } from '@/enums/SideThemeEnum';
 import defaultSettings from '@/settings';
+import { ColorPicker } from 'vue3-colorpicker';
+import 'vue3-colorpicker/style.css';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const appStore = useAppStore();
@@ -105,8 +93,11 @@ const showSettings = ref(false);
 const theme = ref(settingsStore.theme);
 const sideTheme = ref(settingsStore.sideTheme);
 const storeSettings = computed(() => settingsStore);
-const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
-
+// 增加浅色，深色，国旗红f40002
+const predefineColors = ref(['#409EFF', '#ffffff', '#1d1e1f', '#f40002', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
+// 颜色选择器相关状态
+const pureColor = ref('#409EFF'); // 纯色
+// const gradientColor = ref('linear-gradient(to top, #12c2e9, #c471ed, #f64f59)'); // 渐变色
 // 是否暗黑模式
 const isDark = useDark({
   storageKey: 'useDarkKey',
@@ -135,19 +126,28 @@ const dynamicTitleChange = () => {
   useDynamicTitle();
 };
 
+// 纯色变化
+const onPureColorChange = (color: string) => {
+  sideTheme.value = color;
+  sideThemeChange(color);
+};
+
+// 渐变色变化
+const onGradientColorChange = (gradient: string) => {
+  sideTheme.value = gradient;
+  sideThemeChange(gradient);
+};
+
+// 侧边栏颜色
+const sideThemeChange = (val: string) => {
+  settingsStore.sideTheme = val;
+  handleSideThemeStyle(val);
+};
+// 主题颜色
 const themeChange = (val: string) => {
   settingsStore.theme = val;
   handleThemeStyle(val);
 };
-const handleTheme = (val: string) => {
-  sideTheme.value = val;
-  if (isDark.value && val === SideThemeEnum.LIGHT) {
-    // 暗黑模式颜色不变
-    settingsStore.sideTheme = SideThemeEnum.DARK;
-    return;
-  }
-  settingsStore.sideTheme = val;
-};
 const saveSetting = () => {
   proxy?.$modal.loading('正在保存到本地，请稍候...');
   const settings = useStorage<LayoutSetting>('layout-setting', defaultSettings);
@@ -186,45 +186,6 @@ defineExpose({
     font-size: 14px;
   }
 }
-.setting-drawer-block-checbox {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: 10px;
-  margin-bottom: 20px;
-
-  .setting-drawer-block-checbox-item {
-    position: relative;
-    margin-right: 16px;
-    border-radius: 2px;
-    cursor: pointer;
-
-    img {
-      width: 48px;
-      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;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      padding-top: 15px;
-      padding-left: 24px;
-      color: #1890ff;
-      font-weight: 700;
-      font-size: 14px;
-    }
-  }
-}
 
 .drawer-item {
   padding: 12px 0;
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 631c261..ecf0824 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,19 +1,15 @@
 <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 }" :style="{ backgroundColor: bgColor }">
     <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
       <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 }">
+        <h1 v-else class="sidebar-title" :style="{ color: textColor }">
           {{ 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 }">
+        <h1 class="sidebar-title" :style="{ color: textColor }">
           {{ title }}
         </h1>
       </router-link>
@@ -22,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import variables from '@/assets/styles/variables.module.scss';
 import logo from '@/assets/logo/logo.png';
 import useSettingsStore from '@/store/modules/settings';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -37,6 +32,33 @@ defineProps({
 const title = ref('RuoYi-Vue-Plus');
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
+
+// 动态设置背景颜色
+const bgColor = computed(() => (sideTheme.value.startsWith('linear-gradient') ? sideTheme.value : settingsStore.sideTheme));
+// 动态设置文本颜色
+const textColor = computed(() => {
+  // 如果 bgColor 是渐变色，直接返回白色
+  if (bgColor.value.startsWith('linear-gradient')) {
+    return '#ffffff';
+  }
+  // 如果是纯色，判断是否为深色
+  const isDarkColor = isColorDark(bgColor.value);
+  return isDarkColor ? '#ffffff' : '#606266FF';
+});
+
+// 判断颜色是否为深色的辅助函数
+const isColorDark = (color: string): boolean => {
+  // 将颜色转换为 RGB 值
+  const hex = color.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  // 计算亮度（亮度公式：Y = 0.299*R + 0.587*G + 0.114*B）
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  console.log('Brightness:', brightness); // 调试输出
+  // 如果亮度小于 128，则认为是深色
+  return brightness < 192;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +76,6 @@ const sideTheme = computed(() => settingsStore.sideTheme);
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
   text-align: center;
   overflow: hidden;
 
@@ -72,7 +93,6 @@ const sideTheme = computed(() => settingsStore.sideTheme);
     & .sidebar-title {
       display: inline-block;
       margin: 0;
-      color: #fff;
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index a4f20d0..da9e514 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
+  <div :class="{ 'has-logo': showLogo }" :style="{ background: bgColor, '--text-color': textColor }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
         <el-menu
           :default-active="activeMenu"
           :collapse="isCollapse"
-          :background-color="bgColor"
+          :style="{ background: bgColor }"
           :text-color="textColor"
           :unique-opened="true"
           :active-text-color="theme"
@@ -23,7 +23,6 @@
 <script setup lang="ts">
 import Logo from './Logo.vue';
 import SidebarItem from './SidebarItem.vue';
-import variables from '@/assets/styles/variables.module.scss';
 import useAppStore from '@/store/modules/app';
 import useSettingsStore from '@/store/modules/settings';
 import usePermissionStore from '@/store/modules/permission';
@@ -37,19 +36,43 @@ const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.getSidebarRoutes());
 const showLogo = computed(() => settingsStore.sidebarLogo);
+// 侧边栏颜色
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
 const isCollapse = computed(() => !appStore.sidebar.opened);
 
 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;
 });
 
-const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
-const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
+// 动态设置侧边栏背景颜色
+const bgColor = computed(() => (sideTheme.value.startsWith('linear-gradient') ? sideTheme.value : settingsStore.sideTheme));
+
+const textColor = computed(() => {
+  // 如果 bgColor 是渐变色，直接返回白色
+  if (bgColor.value.startsWith('linear-gradient')) {
+    return '#ffffff';
+  }
+  // 如果是纯色，判断是否为深色
+  const isDarkColor = isColorDark(bgColor.value);
+  return isDarkColor ? '#ffffff' : '#606266FF';
+});
+
+// 判断颜色是否为深色的辅助函数
+const isColorDark = (color: string): boolean => {
+  // 将颜色转换为 RGB 值
+  const hex = color.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  // 计算亮度（亮度公式：Y = 0.299*R + 0.587*G + 0.114*B）
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  console.log('Brightness:', brightness); // 调试输出
+  // 如果亮度小于 128，则认为是深色
+  return brightness < 192;
+};
 </script>
diff --git a/src/settings.ts b/src/settings.ts
index 4b62c75..ee6914c 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -6,12 +6,17 @@ const setting: DefaultSettings = {
    */
   title: import.meta.env.VITE_APP_TITLE,
 
+  /**
+   * 主题颜色
+   */
   theme: '#409EFF',
 
   /**
-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   * 侧边栏渐变色
+   * 使用字符串表示 CSS 渐变
    */
-  sideTheme: 'theme-dark',
+  // sideTheme: 'linear-gradient(180deg, #2af598 0%, #009efd 100%)',
+  sideTheme: 'linear-gradient(to top, #12c2e9, #c471ed, #f64f59)',
   /**
    * 是否系统布局配置
    */
@@ -50,13 +55,19 @@ const setting: DefaultSettings = {
    */
   errorLog: 'production',
 
+  /** 是否启用动画 */
   animationEnable: false,
 
+  /** 是否启用暗黑模式 */
   dark: false,
+
+  /** 默认语言 */
   language: LanguageEnum.zh_CN,
 
+  /** 组件大小 */
   size: 'default',
 
+  /** 布局模式 */
   layout: ''
 };
 export default setting;
diff --git a/src/utils/sideTheme.ts b/src/utils/sideTheme.ts
new file mode 100644
index 0000000..fafb3c0
--- /dev/null
+++ b/src/utils/sideTheme.ts
@@ -0,0 +1,60 @@
+// 处理侧边栏颜色样式
+export const handleSideThemeStyle = (sideTheme: string) => {
+  // 判断是否为渐变色
+  if (sideTheme.startsWith('linear-gradient') || sideTheme.startsWith('radial-gradient')) {
+    // 如果是渐变色，直接应用到侧边栏背景
+    document.documentElement.style.setProperty('--side-theme-background', sideTheme);
+    return; // 渐变色不需要生成浅色和深色变体
+  }
+
+  // 如果是纯色，继续处理浅色和深色变体
+  // document.documentElement.style.setProperty('--side-theme-background', sideTheme);
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(`--side-theme-light-${i}`, `${getLightColor(sideTheme, i / 10)}`);
+  }
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(`--side-theme-dark-${i}`, `${getDarkColor(sideTheme, i / 10)}`);
+  }
+};
+
+// hex颜色转rgb颜色
+export const hexToRgb = (str: string): string[] => {
+  str = str.replace('#', '');
+  const hexs = str.match(/../g);
+  for (let i = 0; i < 3; i++) {
+    if (hexs) {
+      hexs[i] = String(parseInt(hexs[i], 16));
+    }
+  }
+  return hexs ? hexs : [];
+};
+
+// rgb颜色转Hex颜色
+export const rgbToHex = (r: string, g: string, b: string) => {
+  const hexs = [Number(r).toString(16), Number(g).toString(16), Number(b).toString(16)];
+  for (let i = 0; i < 3; i++) {
+    if (hexs[i].length == 1) {
+      hexs[i] = `0${hexs[i]}`;
+    }
+  }
+  return `#${hexs.join('')}`;
+};
+
+// 变浅颜色值
+export const getLightColor = (color: string, level: number) => {
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) {
+    const s = (255 - Number(rgb[i])) * level + Number(rgb[i]);
+    rgb[i] = String(Math.floor(s));
+  }
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};
+
+// 变深颜色值
+export const getDarkColor = (color: string, level: number) => {
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) {
+    rgb[i] = String(Math.floor(Number(rgb[i]) * (1 - level)));
+  }
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};