refactor: ♻️ 主题色、主题、布局等设置重构

src/components/LangSelect/index.vue

@@ -1,25 +1,7 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { useAppStore } from "@/store/modules/app";
-
-const appStore = useAppStore();
-const { locale } = useI18n();
-
-function handleLanguageChange(lang: string) {
-  locale.value = lang;
-  appStore.changeLanguage(lang);
-  if (lang === "en") {
-    ElMessage.success("Switch Language Successful!");
-  } else {
-    ElMessage.success("切换语言成功！");
-  }
-}
-</script>
-
 <template>
   <el-dropdown trigger="click" @command="handleLanguageChange">
     <div>
-      <svg-icon icon-class="language" />
+      <svg-icon icon-class="language" :size="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
@@ -36,3 +18,28 @@ function handleLanguageChange(lang: string) {
     </template>
   </el-dropdown>
 </template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useAppStore } from "@/store/modules/app";
+
+defineProps({
+  size: {
+    type: String,
+    required: false,
+  },
+});
+
+const appStore = useAppStore();
+const { locale } = useI18n();
+
+function handleLanguageChange(lang: string) {
+  locale.value = lang;
+  appStore.changeLanguage(lang);
+  if (lang === "en") {
+    ElMessage.success("Switch Language Successful!");
+  } else {
+    ElMessage.success("切换语言成功！");
+  }
+}
+</script>

src/components/SizeSelect/index.vue

@@ -1,24 +1,7 @@
-<script setup lang="ts">
-import { useAppStore } from "@/store/modules/app";
-
-const appStore = useAppStore();
-
-const sizeOptions = ref([
-  { label: "默认", value: "default" },
-  { label: "大型", value: "large" },
-  { label: "小型", value: "small" },
-]);
-
-function handleSizeChange(size: string) {
-  appStore.changeSize(size);
-  ElMessage.success("切换布局大小成功");
-}
-</script>
-
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
     <div>
-      <svg-icon icon-class="size" />
+      <svg-icon icon-class="size" :size="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
@@ -34,3 +17,26 @@ function handleSizeChange(size: string) {
     </template>
   </el-dropdown>
 </template>
+
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app";
+
+defineProps({
+  size: {
+    type: String,
+    required: false,
+  },
+});
+
+const sizeOptions = ref([
+  { label: "默认", value: "default" },
+  { label: "大型", value: "large" },
+  { label: "小型", value: "small" },
+]);
+
+const appStore = useAppStore();
+function handleSizeChange(size: string) {
+  appStore.changeSize(size);
+  ElMessage.success("切换布局大小成功");
+}
+</script>

src/enums/LayoutEnum.ts

@@ -0,0 +1,18 @@
+/**
+ * 菜单布局枚举
+ */
+export enum LayoutEnum {
+  /**
+   * 左侧菜单布局
+   */
+  LEFT = "left",
+  /**
+   * 顶部菜单布局
+   */
+  TOP = "top",
+
+  /**
+   * 混合菜单布局
+   */
+  MIX = "mix",
+}

src/enums/ThemeEnum.ts

@@ -0,0 +1,18 @@
+/**
+ * 主题枚举
+ */
+export enum ThemeEnum {
+  /**
+   * 明亮主题
+   */
+  LIGHT = "light",
+  /**
+   * 暗黑主题
+   */
+  DARK = "dark",
+
+  /**
+   * 系统自动
+   */
+  AUTO = "auto",
+}

src/layout/components/NavBar/components/NavbarRight.vue

@@ -5,14 +5,15 @@
       <div class="navbar-item" @click="toggle">
         <svg-icon
           :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+          size="12px"
         />
       </div>
       <!-- 布局大小 -->
       <el-tooltip content="布局大小" effect="dark" placement="bottom">
-        <size-select class="navbar-item" />
+        <size-select class="navbar-item" size="12px" />
       </el-tooltip>
 
-      <lang-select class="navbar-item" />
+      <lang-select class="navbar-item" size="12px" />
     </div>
 
     <!-- 用户头像 -->
@@ -31,23 +32,17 @@
       </div>
       <template #dropdown>
         <el-dropdown-menu>
-          <router-link to="/">
-            <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
-          </router-link>
           <a
             target="_blank"
-            href="https://github.com/youlaitech/vue3-element-admin"
+            href="https://gitee.com/youlaiorg/vue3-element-admin"
           >
-            <el-dropdown-item>Github</el-dropdown-item>
+            <el-dropdown-item>项目地址</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://gitee.com/haoxr">
-            <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
           </a>
           <a target="_blank" href="https://juejin.cn/post/7228990409909108793">
-            <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
+            <el-dropdown-item>项目文档</el-dropdown-item>
           </a>
           <el-dropdown-item divided @click="logout">
-            {{ $t("navbar.logout") }}
+            注销登出
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>
@@ -103,6 +98,12 @@ function logout() {
   &:hover {
     background: rgb(0 0 0 / 10%);
   }
+
+  .svg-icon,
+  svg,
+  .el-icon {
+    vertical-align: -0.15em;
+  }
 }
 
 .layout-top,

src/layout/components/Settings/components/LayoutSelect.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="flex flex-wrap justify-around w-full h-12">
+    <el-tooltip content="左侧模式" placement="bottom">
+      <div
+        class="layout-item left"
+        :class="{ 'is-active': modelValue === LayoutEnum.LEFT }"
+        @click="updateValue(LayoutEnum.LEFT)"
+      >
+        <div></div>
+        <div></div>
+      </div>
+    </el-tooltip>
+
+    <el-tooltip content="顶部模式" placement="bottom">
+      <div
+        class="layout-item top"
+        :class="{ 'is-active': modelValue === LayoutEnum.TOP }"
+        @click="updateValue(LayoutEnum.TOP)"
+      >
+        <div></div>
+        <div></div>
+      </div>
+    </el-tooltip>
+
+    <el-tooltip content="混合模式" placement="bottom">
+      <div
+        class="layout-item mix"
+        :class="{ 'is-active': modelValue === LayoutEnum.MIX }"
+        @click="updateValue(LayoutEnum.MIX)"
+      >
+        <div></div>
+        <div></div>
+      </div>
+    </el-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { LayoutEnum } from "@/enums/LayoutEnum";
+
+const props = defineProps({
+  modelValue: String,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+function updateValue(layout: string) {
+  emit("update:modelValue", layout);
+}
+</script>
+
+<style scoped>
+.layout-selector {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+  height: 50px;
+}
+
+.layout-item {
+  position: relative;
+  width: 18%;
+  height: 45px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #f0f2f5;
+  border-radius: 4px;
+
+  &.mix div:nth-child(1),
+  &.top div:nth-child(1) {
+    width: 100%;
+    height: 30%;
+    background: #1b2a47;
+    box-shadow: 0 0 1px #888;
+  }
+
+  &.mix div:nth-child(2) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 30%;
+    height: 70%;
+    background: #1b2a47;
+    box-shadow: 0 0 1px #888;
+  }
+
+  &.left div:nth-child(1) {
+    width: 30%;
+    height: 100%;
+    background: #1b2a47;
+  }
+
+  &.left div:nth-child(2) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 70%;
+    height: 30%;
+    background: #fff;
+    box-shadow: 0 0 1px #888;
+  }
+}
+
+.layout-item.is-active {
+  border: 2px solid var(--el-color-primary);
+}
+</style>

src/layout/components/Settings/components/ThemeColorPicker.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-color-picker
+    v-model="currentColor"
+    :predefine="colorPresets"
+    popper-class="theme-picker-dropdown"
+  />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: String,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+// 定义颜色预设
+const colorPresets = [
+  "#409EFF",
+  "#ff4500",
+  "#ff8c00",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsva(120, 40, 94)",
+];
+
+const currentColor = ref(props.modelValue);
+
+watch(currentColor, (newValue) => {
+  emit("update:modelValue", newValue);
+});
+</script>
+
+<style scoped>
+:deep(.theme-picker-dropdown) {
+  z-index: 99999 !important;
+}
+</style>

src/layout/components/Settings/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="setting-container">
+  <div
-    <el-text tag="b">项目配置</el-text>
+    :class="['settings-button', { show: settingsVisible }]"
+    @click="settingsVisible = !settingsVisible"
+  >
+    <i-ep-close v-show="settingsVisible" />
+    <i-ep-setting v-show="!settingsVisible" />
+  </div>
+
+  <el-drawer v-model="settingsVisible" size="300" title="项目配置">
     <el-divider>主题设置</el-divider>
 
     <div class="flex-center">
@@ -14,104 +21,96 @@
 
     <el-divider>界面设置</el-divider>
 
-    <div class="py-1 flex-x-between">
+    <div class="settings-option">
       <el-text>主题颜色</el-text>
-      <el-color-picker
+      <ThemeColorPicker
         v-model="settingsStore.themeColor"
-        :predefine="[
+        @update:model-value="changeThemeColor"
-          '#409EFF',
-          '#1890ff',
-          '#304156',
-          '#212121',
-          '#11a983',
-          '#13c2c2',
-          '#6959CD',
-          '#f5222d',
-        ]"
-        @change="changeThemeColor"
-        popper-class="theme-picker-dropdown"
       />
     </div>
 
-    <div class="py-1 flex-x-between">
+    <div class="settings-option">
       <el-text>开启 Tags-View</el-text>
       <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="py-1 flex-x-between">
+    <div class="settings-option">
       <span class="text-xs">固定 Header</span>
       <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="py-1 flex-x-between">
+    <div class="settings-option">
       <span class="text-xs">侧边栏 Logo</span>
       <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
-    <div class="py-1 flex-x-between">
+    <div class="settings-option">
       <span class="text-xs">开启水印</span>
       <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
 
     <el-divider>导航设置</el-divider>
 
-    <ul class="layout">
+    <LayoutSelect
-      <el-tooltip content="左侧模式" placement="bottom">
+      v-model="settingsStore.layout"
-        <li
+      @update:model-value="changeLayout"
-          :class="
+    />
-            'layout-item layout-left ' +
+  </el-drawer>
-            (settingsStore.layout === 'left' ? 'is-active' : '')
-          "
-          @click="changeLayout('left')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-      <el-tooltip content="顶部模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-top ' +
-            (settingsStore.layout === 'top' ? 'is-active' : '')
-          "
-          @click="changeLayout('top')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-      <el-tooltip content="混合模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-mix ' +
-            (settingsStore.layout === 'mix' ? 'is-active' : '')
-          "
-          @click="changeLayout('mix')"
-        >
-          <div></div>
-          <div></div>
-        </li>
-      </el-tooltip>
-    </ul>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 import { Sunny, Moon } from "@element-plus/icons-vue";
+import { LayoutEnum } from "@/enums/LayoutEnum";
+import { ThemeEnum } from "@/enums/ThemeEnum";
+import { genMixColor } from "@/utils/color";
 
 const route = useRoute();
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
+
+const settingsVisible = ref(false);
+
+/**
+ * 切换主题颜色
+ */
+function changeThemeColor(color: string) {
+  settingsStore.changeThemeColor(color);
+
+  const { DEFAULT, dark, light } = genMixColor(color);
+  setStyleProperty(`--el-color-primary`, DEFAULT);
+  setStyleProperty(`--el-color-primary-dark-2`, dark[2]);
+  setStyleProperty(`--el-color-primary-light-3`, light[3]);
+  setStyleProperty(`--el-color-primary-light-5`, light[5]);
+  setStyleProperty(`--el-color-primary-light-7`, light[7]);
+  setStyleProperty(`--el-color-primary-light-8`, light[8]);
+  setStyleProperty(`--el-color-primary-light-9`, light[9]);
+}
+
+function setStyleProperty(propName: string, value: string) {
+  document.documentElement.style.setProperty(propName, value);
+}
+
+/**
+ * 切换主题
+ */
+const isDark = ref<boolean>(settingsStore.theme === ThemeEnum.DARK);
+const changeTheme = (isDark: any) => {
+  useToggle(isDark);
+  const theme = isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT;
+  settingsStore.changeTheme(theme);
+  document.documentElement.classList.toggle("dark", theme === ThemeEnum.DARK);
+};
+
 /**
  * 切换布局
  */
 function changeLayout(layout: string) {
-  settingsStore.changeSetting({ key: "layout", value: layout });
+  settingsStore.changeLayout(layout);
-  if (layout === "mix") {
+  if (layout === LayoutEnum.MIX) {
     route.name && againActiveTop(route.name as string);
-  } else if (layout === "top") {
+  } else if (layout === LayoutEnum.TOP) {
     appStore.openSideBar();
   }
 }
@@ -123,29 +122,6 @@ function againActiveTop(newVal: string) {
   }
 }
 
-/**
- * 切换主题颜色
- */
-function changeThemeColor(color: string) {
-  window.document.documentElement.style.setProperty(
-    "--el-color-primary",
-    color
-  );
-  settingsStore.changeSetting({ key: "themeColor", value: color });
-}
-
-/**
- * 切换暗黑模式
- */
-const isDark = ref<boolean>(settingsStore.theme === "dark");
-const changeTheme = (isDark: any) => {
-  useToggle(isDark);
-  settingsStore.changeSetting({
-    key: "theme",
-    value: isDark ? "dark" : "light",
-  });
-};
-
 function findOutermostParent(tree: any[], findName: string) {
   let parentMap: any = {};
 
@@ -175,87 +151,34 @@ function findOutermostParent(tree: any[], findName: string) {
 }
 
 onMounted(() => {
-  window.document.body.setAttribute("layout", settingsStore.layout);
+  changeTheme(settingsStore.theme == ThemeEnum.DARK); // 初始化主题
-  const theme = settingsStore.theme;
+  changeThemeColor(settingsStore.themeColor); // 初始化主题颜色
-  if (theme == "dark") {
-    document.documentElement.classList.add("dark");
-  }
-
-  document.documentElement.style.setProperty(
-    "--el-color-primary",
-    settingsStore.themeColor
-  );
 });
 </script>
 
 <style lang="scss" scoped>
-.setting-container {
+.settings-button {
-  padding: 16px;
+  position: fixed;
+  top: 250px;
+  right: 0;
+  z-index: 2001;
+  width: 40px;
+  height: 40px;
+  color: var(--el-color-white);
+  cursor: pointer;
+  background-color: var(--el-color-primary);
+  border-radius: 6px 0 0 6px;
 
-  .layout {
+  @apply flex-center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    width: 100%;
-    height: 50px;
 
-    &-item {
+  &.show {
-      position: relative;
+    right: 300px;
-      width: 18%;
+    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-      height: 45px;
-      overflow: hidden;
-      cursor: pointer;
-      background: #f0f2f5;
-      border-radius: 4px;
-    }
-
-    &-item.is-active {
-      border: 2px solid var(--el-color-primary);
-    }
-
-    &-mix div:nth-child(1) {
-      width: 100%;
-      height: 30%;
-      background: #1b2a47;
-      box-shadow: 0 0 1px #888;
-    }
-
-    &-mix div:nth-child(2) {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 30%;
-      height: 70%;
-      background: #1b2a47;
-      box-shadow: 0 0 1px #888;
-    }
-
-    &-top div:nth-child(1) {
-      width: 100%;
-      height: 30%;
-      background: #1b2a47;
-      box-shadow: 0 0 1px #888;
-    }
-
-    &-left div:nth-child(1) {
-      width: 30%;
-      height: 100%;
-      background: #1b2a47;
-    }
-
-    &-left div:nth-child(2) {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 70%;
-      height: 30%;
-      background: #fff;
-      box-shadow: 0 0 1px #888;
-    }
   }
 }
 
-:deep(.theme-picker-dropdown) {
+.settings-option {
-  z-index: 99999 !important;
+  @apply py-1 flex-x-between;
 }
 </style>
+@/utils/color

src/layout/index.vue

@@ -3,14 +3,16 @@
     <!-- 遮罩层 -->
     <div
       v-if="classObj.mobile && classObj.openSidebar"
-      class="fixed-tl z-999 bg-black bg-opacity-30 wh-full"
+      class="wh-full fixed-lt z-999 bg-black bg-opacity-30"
       @click="handleOutsideClick"
     ></div>
+
+    <!-- 公用侧边栏 -->
     <Sidebar class="sidebar-container" />
 
     <!-- 混合布局 -->
     <div v-if="layout === 'mix'" class="mix-container">
-      <div class="sidebar-container__left">
+      <div class="mix-container__left">
         <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
         <div class="sidebar-toggle">
           <hamburger
@@ -25,22 +27,18 @@
           <TagsView v-if="showTagsView" />
         </div>
         <AppMain />
-        <RightPanel v-if="defaultSettings.showSettings">
+        <Settings v-if="defaultSettings.showSettings" />
-          <Settings />
-        </RightPanel>
       </div>
     </div>
 
-    <!-- 左侧布局|| 顶部布局 -->
+    <!-- 左侧和顶部布局 -->
     <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <NavBar v-if="layout === 'left'" />
         <TagsView v-if="showTagsView" />
       </div>
       <AppMain />
-      <RightPanel v-if="defaultSettings.showSettings">
+      <Settings v-if="defaultSettings.showSettings" />
-        <Settings />
-      </RightPanel>
     </div>
   </div>
 </template>
@@ -53,17 +51,11 @@ const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 
-const fixedHeader = computed(() => settingsStore.fixedHeader);
+const fixedHeader = computed(() => settingsStore.fixedHeader); // 是否固定header
-const showTagsView = computed(() => settingsStore.tagsView);
+const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
-const layout = computed(() => settingsStore.layout);
+const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
-
+const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
-const activeTopMenuPath = computed(() => {
+const mixLeftMenus = computed(() => permissionStore.mixLeftMenus); // 混合布局左侧菜单
-  return appStore.activeTopMenuPath;
-});
-// 混合模式左侧菜单
-const mixLeftMenus = computed(() => {
-  return permissionStore.mixLeftMenus;
-});
 
 watch(
   () => activeTopMenuPath.value,
@@ -209,7 +201,7 @@ function toggleSidebar() {
     height: 100%;
     padding-top: $navbar-height;
 
-    .sidebar-container__left {
+    .mix-container__left {
       position: relative;
       width: $sidebar-width;
       height: 100%;
@@ -284,7 +276,7 @@ function toggleSidebar() {
     }
 
     .mix-container {
-      .sidebar-container__left {
+      .mix-container__left {
         width: $sidebar-width-collapsed;
       }
     }

src/store/modules/settings.ts

@@ -35,8 +35,6 @@ export const useSettingsStore = defineStore("setting", () => {
     tagsView,
     sidebarLogo,
     layout,
-    themeColor,
-    theme,
     watermarkEnabled,
   };
 
@@ -50,21 +48,41 @@ export const useSettingsStore = defineStore("setting", () => {
     const setting = settingsMap[key];
     if (setting) {
       setting.value = value;
-      // Special handling for theme changes
-      if (key === "theme") {
-        document.documentElement.classList.toggle("dark", value === "dark");
-      }
     }
   }
 
+  /**
+   * 切换主题
+   */
+  function changeTheme(val: string) {
+    theme.value = val;
+  }
+
+  /**
+   * 切换主题颜色
+   */
+  function changeThemeColor(val: string) {
+    themeColor.value = val;
+  }
+
+  /**
+   * 切换布局
+   */
+  function changeLayout(val: string) {
+    layout.value = val;
+  }
+
   return {
     tagsView,
     fixedHeader,
     sidebarLogo,
     layout,
     themeColor,
-    changeSetting,
     theme,
     watermarkEnabled,
+    changeSetting,
+    changeTheme,
+    changeThemeColor,
+    changeLayout,
   };
 });

src/utils/color.ts

@@ -0,0 +1,287 @@
+/**
+ * 颜色生成
+ */
+type RGB = {
+  r: number;
+  g: number;
+  b: number;
+};
+type HSL = {
+  h: number;
+  s: number;
+  l: number;
+};
+type HEX =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F";
+
+const RGBUnit = 255;
+const HEX_MAP: Record<HEX, number> = {
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  A: 10,
+  B: 11,
+  C: 12,
+  D: 13,
+  E: 14,
+  F: 15,
+};
+const rgbWhite = {
+  r: 255,
+  g: 255,
+  b: 255,
+};
+const rgbBlack = {
+  r: 0,
+  g: 0,
+  b: 0,
+};
+
+/**
+ * RGB颜色转HSL颜色值
+ * @param r 红色值
+ * @param g 绿色值
+ * @param b 蓝色值
+ * @returns { h: [0, 360]; s: [0, 1]; l: [0, 1] }
+ */
+function rgbToHsl(rgb: RGB): HSL {
+  let { r, g, b } = rgb;
+  const hsl = {
+    h: 0,
+    s: 0,
+    l: 0,
+  };
+
+  // 计算rgb基数 ∈ [0, 1]
+  r /= RGBUnit;
+  g /= RGBUnit;
+  b /= RGBUnit;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+
+  // 计算h
+  if (max === min) {
+    hsl.h = 0;
+  } else if (max === r) {
+    hsl.h = 60 * ((g - b) / (max - min)) + (g >= b ? 0 : 360);
+  } else if (max === g) {
+    hsl.h = 60 * ((b - r) / (max - min)) + 120;
+  } else {
+    hsl.h = 60 * ((r - g) / (max - min)) + 240;
+  }
+  hsl.h = hsl.h > 360 ? hsl.h - 360 : hsl.h;
+
+  // 计算l
+  hsl.l = (max + min) / 2;
+
+  // 计算s
+  if (hsl.l === 0 || max === min) {
+    // 灰/白/黑
+    hsl.s = 0;
+  } else if (hsl.l > 0 && hsl.l <= 0.5) {
+    hsl.s = (max - min) / (max + min);
+  } else {
+    hsl.s = (max - min) / (2 - (max + min));
+  }
+
+  return hsl;
+}
+
+/**
+ * hsl -> rgb
+ * @param h [0, 360]
+ * @param s [0, 1]
+ * @param l [0, 1]
+ * @returns RGB
+ */
+function hslToRgb(hsl: HSL): RGB {
+  const { h, s, l } = hsl;
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const hUnit = h / 360; // 色相转换为 [0, 1]
+
+  const Cr = fillCircleVal(hUnit + 1 / 3);
+  const Cg = fillCircleVal(hUnit);
+  const Cb = fillCircleVal(hUnit - 1 / 3);
+
+  // 保持 [0, 1] 环状取值
+  function fillCircleVal(val: number): number {
+    return val < 0 ? val + 1 : val > 1 ? val - 1 : val;
+  }
+
+  function computedRgb(val: number): number {
+    let colorVal: number;
+    if (val < 1 / 6) {
+      colorVal = p + (q - p) * 6 * val;
+    } else if (val >= 1 / 6 && val < 1 / 2) {
+      colorVal = q;
+    } else if (val >= 1 / 2 && val < 2 / 3) {
+      colorVal = p + (q - p) * 6 * (2 / 3 - val);
+    } else {
+      colorVal = p;
+    }
+    return colorVal * 255;
+  }
+
+  return {
+    r: Number(computedRgb(Cr).toFixed(0)),
+    g: Number(computedRgb(Cg).toFixed(0)),
+    b: Number(computedRgb(Cb).toFixed(0)),
+  };
+}
+
+/**
+ * 16进制颜色转换RGB
+ * @param color #rrggbb
+ * @returns RGB
+ */
+function hexToRGB(hex: string): RGB {
+  hex = hex.toUpperCase();
+  const hexRegExp = /^#([0-9A-F]{6})$/;
+  if (!hexRegExp.test(hex)) {
+    throw new Error("请传入合法的16进制颜色值，eg: #FF0000");
+  }
+
+  const hexValArr = (hexRegExp.exec(hex)?.[1] || "000000").split(
+    ""
+  ) as Array<HEX>;
+
+  return {
+    r: HEX_MAP[hexValArr[0]] * 16 + HEX_MAP[hexValArr[1]],
+    g: HEX_MAP[hexValArr[2]] * 16 + HEX_MAP[hexValArr[3]],
+    b: HEX_MAP[hexValArr[4]] * 16 + HEX_MAP[hexValArr[5]],
+  };
+}
+
+/**
+ * rgb 转 16进制
+ * @param rgb RGB
+ * @returns #HEX{6}
+ */
+function rgbToHex(rgb: RGB): string {
+  const HEX_MAP_REVERSE: Record<string, HEX> = {};
+  for (const key in HEX_MAP) {
+    HEX_MAP_REVERSE[HEX_MAP[key as HEX]] = key as HEX;
+  }
+  function getRemainderAndQuotient(val: number): string {
+    val = Math.round(val);
+    return `${HEX_MAP_REVERSE[Math.floor(val / 16)]}${
+      HEX_MAP_REVERSE[val % 16]
+    }`;
+  }
+
+  return `#${getRemainderAndQuotient(rgb.r)}${getRemainderAndQuotient(
+    rgb.g
+  )}${getRemainderAndQuotient(rgb.b)}`;
+}
+
+// hsl 转 16进制
+function hslToHex(hsl: HSL): string {
+  return rgbToHex(hslToRgb(hsl));
+}
+
+// 16进制 转 hsl
+function hexToHsl(hex: string): HSL {
+  return rgbToHsl(hexToRGB(hex));
+}
+
+// 生成混合色（混黑 + 混白）
+function genMixColor(base: string | RGB | HSL): {
+  DEFAULT: string;
+  dark: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+  };
+  light: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+  };
+} {
+  // 基准色统一转换为RGB
+  if (typeof base === "string") {
+    base = hexToRGB(base);
+  } else if ("h" in base) {
+    base = hslToRgb(base);
+  }
+
+  // 混合色
+  function mix(color: RGB, mixColor: RGB, weight: number): RGB {
+    return {
+      r: color.r * (1 - weight) + mixColor.r * weight,
+      g: color.g * (1 - weight) + mixColor.g * weight,
+      b: color.b * (1 - weight) + mixColor.b * weight,
+    };
+  }
+
+  return {
+    DEFAULT: rgbToHex(base),
+    dark: {
+      1: rgbToHex(mix(base, rgbBlack, 0.1)),
+      2: rgbToHex(mix(base, rgbBlack, 0.2)),
+      3: rgbToHex(mix(base, rgbBlack, 0.3)),
+      4: rgbToHex(mix(base, rgbBlack, 0.4)),
+      5: rgbToHex(mix(base, rgbBlack, 0.5)),
+      6: rgbToHex(mix(base, rgbBlack, 0.6)),
+      7: rgbToHex(mix(base, rgbBlack, 0.7)),
+      8: rgbToHex(mix(base, rgbBlack, 0.78)),
+      9: rgbToHex(mix(base, rgbBlack, 0.85)),
+    },
+    light: {
+      1: rgbToHex(mix(base, rgbWhite, 0.1)),
+      2: rgbToHex(mix(base, rgbWhite, 0.2)),
+      3: rgbToHex(mix(base, rgbWhite, 0.3)),
+      4: rgbToHex(mix(base, rgbWhite, 0.4)),
+      5: rgbToHex(mix(base, rgbWhite, 0.5)),
+      6: rgbToHex(mix(base, rgbWhite, 0.6)),
+      7: rgbToHex(mix(base, rgbWhite, 0.7)),
+      8: rgbToHex(mix(base, rgbWhite, 0.78)),
+      9: rgbToHex(mix(base, rgbWhite, 0.85)),
+    },
+  };
+}
+
+export {
+  genMixColor,
+  rgbToHsl,
+  rgbToHex,
+  hslToRgb,
+  hslToHex,
+  hexToRGB,
+  hexToHsl,
+};

src/utils/theme.ts

@@ -1,70 +0,0 @@
-/**
- * hex颜色转rgb颜色
- * @param str 颜色值字符串
- * @return 返回处理后的颜色值
- */
-export function hexToRgb(str: any) {
-  let hexs: any = "";
-  const reg = /^\#?[0-9A-Fa-f]{6}$/;
-  if (!reg.test(str)) return ElMessage.warning("错误的hex");
-  str = str.replace("#", "");
-  hexs = str.match(/../g);
-  for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
-  return hexs;
-}
-
-/**
- * rgb颜色转Hex颜色
- * @param r 代表红色
- * @param g 代表绿色
- * @param b 代表蓝色
- * @return 返回处理后的颜色值
- */
-export function rgbToHex(r: any, g: any, b: any) {
-  const reg = /^\d{1,3}$/;
-  if (!reg.test(r) || !reg.test(g) || !reg.test(b))
-    return ElMessage.warning("错误的rgb颜色值");
-  const hexs = [r.toString(16), g.toString(16), b.toString(16)];
-  for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
-  return `#${hexs.join("")}`;
-}
-
-/**
- * 加深颜色值
- * @param color 颜色值字符串
- * @param level 加深的程度，限0-1之间
- * @return 返回处理后的颜色值
- */
-export function getDarkColor(color: string, level: number) {
-  const reg = /^\#?[0-9A-Fa-f]{6}$/;
-  if (!reg.test(color)) return ElMessage.warning("错误的hex颜色值");
-  const rgb = hexToRgb(color);
-  for (let i = 0; i < 3; i++)
-    rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level));
-  return rgbToHex(rgb[0], rgb[1], rgb[2]);
-}
-
-/**
- * 变浅颜色值
- * @param color 颜色值字符串
- * @param level 加深的程度，限0-1之间
- * @return 返回处理后的颜色值
- */
-export function getLightColor(color: string, level: number) {
-  const reg = /^\#?[0-9A-Fa-f]{6}$/;
-  if (!reg.test(color)) return ElMessage.warning("错误的hex颜色值");
-  const rgb = hexToRgb(color);
-  for (let i = 0; i < 3; i++)
-    rgb[i] = Math.round(255 * level + rgb[i] * (1 - level));
-  return rgbToHex(rgb[0], rgb[1], rgb[2]);
-}
-
-/**
- * 根据dark加工颜色值
- * @param color 颜色值字符串
- * @param level 加深的程度，限0-1之间
- * @return 返回处理后的颜色值
- */
-export function getThemeColor(dark: boolean, color: string, level: number) {
-  return dark ? getDarkColor(color, level) : getLightColor(color, level);
-}