refactor: ♻️ 设置面板调整

src/components/RightPanel/index.vue

@@ -1,14 +1,8 @@
 <template>
-  <div ref="rightPanel" :class="{ show: show }">
+  <div ref="rightPanelRef" :class="{ show: show }">
-    <div class="right-panel-overlay"></div>
+    <div class="rightPanel-background"></div>
-    <div class="right-panel-container">
+    <div class="rightPanel">
-      <div
+      <div class="handle-button" @click="show = !show">
-        class="right-panel-btn"
-        :style="{
-          top: buttonTop + 'px',
-        }"
-        @click="show = !show"
-      >
         <i-ep-close v-show="show" />
         <i-ep-setting v-show="!show" />
       </div>
@@ -23,43 +17,32 @@
 import { addClass, removeClass } from "@/utils/index";
 
 const show = ref(false);
-
+const rightPanelRef = ref<HTMLElement | null>(null);
-defineProps({
-  buttonTop: {
-    default: 250,
-    type: Number,
-  },
-});
 
 watch(show, (value) => {
   if (value) {
-    addEventClick();
+    window.addEventListener("click", closeSidebar, { passive: true });
-  }
-  if (value) {
     addClass(document.body, "showRightPanel");
   } else {
     removeClass(document.body, "showRightPanel");
   }
 });
 
-function addEventClick() {
+function closeSidebar(evt: MouseEvent) {
-  window.addEventListener("click", closeSidebar, { passive: true });
+  const target = evt.target as HTMLElement;
-}
+  console.log("target", target);
-
+  console.log("closest", target.closest(".rightPanel"));
-function closeSidebar(evt: any) {
+  if (show.value && target && !target.closest(".rightPanel")) {
-  // 主题选择点击不关闭
-  let parent = evt.target.closest(".right-panel-container");
-  if (!parent) {
     show.value = false;
     window.removeEventListener("click", closeSidebar);
   }
 }
 
-const rightPanel = ref();
-
 function insertToBody() {
-  const body = document.querySelector("body") as any;
+  const body = document.querySelector("body");
-  body.insertBefore(rightPanel.value, body.firstChild);
+  if (body && rightPanelRef.value instanceof Node) {
+    body.insertBefore(rightPanelRef.value, body.firstChild);
+  }
 }
 
 onMounted(() => {
@@ -67,25 +50,29 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  rightPanel.value.remove();
+  if (rightPanelRef.value) {
+    rightPanelRef.value.remove();
+  }
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .showRightPanel {
   position: relative;
-  width: calc(100% - 15px);
+  width: 100%;
   overflow: hidden;
 }
+</style>
 
-.right-panel-overlay {
+<style lang="scss" scoped>
+.rightPanel-background {
   position: fixed;
   top: 0;
   left: 0;
   background: rgb(0 0 0 / 20%);
 }
 
-.right-panel-container {
+.rightPanel {
   position: fixed;
   top: 0;
   right: 0;
@@ -102,33 +89,29 @@ onBeforeUnmount(() => {
 .show {
   transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
-  .right-panel-overlay {
+  .rightPanel-background {
     z-index: 99;
     width: 100%;
     height: 100%;
     opacity: 1;
   }
 
-  .right-panel-container {
+  .rightPanel {
     transform: translate(0);
   }
 }
 
-.right-panel-btn {
+.handle-button {
   position: absolute;
+  top: 250px;
   left: -36px;
   width: 36px;
   height: 36px;
+  line-height: 36px;
   color: var(--el-color-white);
   text-align: center;
   cursor: pointer;
   background-color: var(--el-color-primary);
   border-radius: 6px 0 0 6px;
-
-  svg {
-    width: 20px;
-    height: 20px;
-    vertical-align: -10px;
-  }
 }
 </style>

src/layout/components/Settings/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="setting-container">
-    <h3 class="text-base font-bold">项目配置</h3>
+    <el-text tag="b">项目配置</el-text>
     <el-divider>主题设置</el-divider>
 
     <div class="flex-center">
@@ -8,45 +8,51 @@
         v-model="isDark"
         :active-icon="Moon"
         :inactive-icon="Sunny"
-        @change="handleThemeChange"
+        @change="changeTheme"
       />
     </div>
 
     <el-divider>界面设置</el-divider>
-    <div class="py-[8px] flex-x-between">
+
+    <div class="py-1 flex-x-between">
+      <el-text>主题颜色</el-text>
+      <el-color-picker
+        v-model="settingsStore.themeColor"
+        :predefine="[
+          '#409EFF',
+          '#1890ff',
+          '#304156',
+          '#212121',
+          '#11a983',
+          '#13c2c2',
+          '#6959CD',
+          '#f5222d',
+        ]"
+        @change="changeThemeColor"
+        popper-class="theme-picker-dropdown"
+      />
+    </div>
+
+    <div class="py-1 flex-x-between">
       <el-text>开启 Tags-View</el-text>
       <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="py-[8px] flex-x-between">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">固定 Header</span>
       <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="py-[8px] flex-x-between">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">侧边栏 Logo</span>
       <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
 
-    <div class="py-[8px] flex-x-between">
+    <div class="py-1 flex-x-between">
       <span class="text-xs">开启水印</span>
       <el-switch v-model="settingsStore.watermarkEnabled" />
     </div>
 
-    <el-divider>主题颜色</el-divider>
-
-    <ul class="w-full space-x-2 flex-x-center py-2">
-      <li
-        v-for="(color, index) in themeColors"
-        :key="index"
-        class="w-[30px] h-[30px] cursor-pointer flex-center color-white"
-        :style="{ background: color }"
-        @click="changeThemeColor(color)"
-      >
-        <i-ep-check v-show="color === currentThemeColor" />
-      </li>
-    </ul>
-
     <el-divider>导航设置</el-divider>
 
     <ul class="layout">
@@ -95,10 +101,50 @@ import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 import { Sunny, Moon } from "@element-plus/icons-vue";
 
 const route = useRoute();
-
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
+/**
+ * 切换布局
+ */
+function changeLayout(layout: string) {
+  settingsStore.changeSetting({ key: "layout", value: layout });
+  if (layout === "mix") {
+    route.name && againActiveTop(route.name as string);
+  } else if (layout === "top") {
+    appStore.openSideBar();
+  }
+}
+
+function againActiveTop(newVal: string) {
+  const parent = findOutermostParent(permissionStore.routes, newVal);
+  if (appStore.activeTopMenu !== parent.path) {
+    appStore.activeTopMenu(parent.path);
+  }
+}
+
+/**
+ * 切换主题颜色
+ */
+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 = {};
@@ -128,59 +174,6 @@ function findOutermostParent(tree: any[], findName: string) {
   return null;
 }
 
-/**
- * 切换布局
- */
-function changeLayout(layout: string) {
-  settingsStore.changeSetting({ key: "layout", value: layout });
-  if (layout === "mix") {
-    route.name && againActiveTop(route.name as string);
-  } else if (layout === "top") {
-    appStore.openSideBar();
-  }
-}
-
-function againActiveTop(newVal: string) {
-  const parent = findOutermostParent(permissionStore.routes, newVal);
-  if (appStore.activeTopMenu !== parent.path) {
-    appStore.activeTopMenu(parent.path);
-  }
-}
-
-// 主题颜色
-const themeColors = ref<string[]>([
-  "#409EFF",
-  "#304156",
-  "#11a983",
-  "#13c2c2",
-  "#6959CD",
-  "#f5222d",
-]);
-
-/**
- * 切换主题颜色
- */
-function changeThemeColor(color: string) {
-  document.documentElement.style.setProperty("--el-color-primary", color);
-  settingsStore.changeSetting({ key: "themeColor", value: color });
-}
-
-const currentThemeColor = computed(() => {
-  return settingsStore.themeColor;
-});
-
-/**
- * 切换暗黑模式
- */
-const isDark = ref<boolean>(settingsStore.theme === "dark");
-const handleThemeChange = (isDark: any) => {
-  useToggle(isDark);
-  settingsStore.changeSetting({
-    key: "theme",
-    value: isDark ? "dark" : "light",
-  });
-};
-
 onMounted(() => {
   window.document.body.setAttribute("layout", settingsStore.layout);
   const theme = settingsStore.theme;
@@ -261,4 +254,8 @@ onMounted(() => {
     }
   }
 }
+
+:deep(.theme-picker-dropdown) {
+  z-index: 99999 !important;
+}
 </style>

src/layout/index.vue

@@ -3,14 +3,14 @@
     <!-- 遮罩层 -->
     <div
       v-if="classObj.mobile && classObj.openSidebar"
-      class="fixed z-1000 bg-black bg-opacity-20"
+      class="fixed z-999 bg-black bg-opacity-30 wh-full top-0"
       @click="handleOutsideClick"
     ></div>
     <Sidebar class="sidebar-container" />
 
     <!-- 混合布局 -->
     <div v-if="layout === 'mix'" class="mix-container">
-      <div class="mix-container__left">
+      <div class="sidebar-container__left">
         <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
         <div class="sidebar-toggle">
           <hamburger
@@ -113,6 +113,15 @@ function toggleSidebar() {
 </script>
 
 <style lang="scss" scoped>
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - $sidebar-width);
+  transition: width 0.28s;
+}
+
 .sidebar-container {
   position: fixed;
   top: 0;
@@ -130,15 +139,6 @@ function toggleSidebar() {
   }
 }
 
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - $sidebar-width);
-  transition: width 0.28s;
-}
-
 .main-container {
   position: relative;
   min-height: 100%;
@@ -204,18 +204,12 @@ function toggleSidebar() {
     }
   }
 
-  &.hideSidebar {
-    .sidebar-container {
-      width: 100% !important;
-    }
-  }
-
   .mix-container {
     display: flex;
     height: 100%;
     padding-top: $navbar-height;
 
-    &__left {
+    .sidebar-container__left {
       position: relative;
       width: $sidebar-width;
       height: 100%;
@@ -259,6 +253,11 @@ function toggleSidebar() {
 }
 
 .hideSidebar {
+  .fixed-header {
+    left: $sidebar-width-collapsed;
+    width: calc(100% - $sidebar-width-collapsed);
+  }
+
   .sidebar-container {
     width: $sidebar-width-collapsed !important;
   }
@@ -267,55 +266,57 @@ function toggleSidebar() {
     margin-left: $sidebar-width-collapsed;
   }
 
-  .mix-container__left {
+  .sidebar-container__left {
     width: $sidebar-width-collapsed;
   }
 
-  .fixed-header {
+  &.layout-mix {
-    left: $sidebar-width-collapsed;
+    .sidebar-container {
-    width: calc(100% - $sidebar-width-collapsed);
+      width: 100% !important;
-  }
-
-  &.mobile {
-    .fixed-header {
-      width: 100%;
-    }
-
-    &.layout-left {
-      .main-container {
-        margin-left: 0;
-      }
-
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sidebar-width, 0, 0);
-      }
-    }
-
-    &.layout-top {
-      .sidebar-container {
-        z-index: 999;
-        display: flex;
-        width: 100% !important;
-        height: $navbar-height;
-
-        :deep(.el-scrollbar) {
-          flex: 1;
-          min-width: 0;
-          height: $navbar-height;
-        }
-      }
-
-      .main-container {
-        padding-top: $navbar-height;
-        margin-left: 0;
-        overflow: hidden;
-      }
-
-      // 顶部模式全局变量修改
-      --el-menu-item-height: $navbar-height;
     }
   }
 }
+
+.mobile {
+  .fixed-header {
+    left: 0;
+    width: 100%;
+  }
+
+  .main-container {
+    margin-left: 0;
+  }
+
+  &.hideSidebar {
+    .sidebar-container {
+      pointer-events: none;
+      transition-duration: 0.3s;
+      transform: translate3d(-210px, 0, 0);
+    }
+  }
+
+  &.layout-top {
+    .sidebar-container {
+      z-index: 999;
+      display: flex;
+      width: 100% !important;
+      height: $navbar-height;
+
+      :deep(.el-scrollbar) {
+        flex: 1;
+        min-width: 0;
+        height: $navbar-height;
+      }
+    }
+
+    .main-container {
+      padding-top: $navbar-height;
+      margin-left: 0;
+      overflow: hidden;
+    }
+
+    // 顶部模式全局变量修改
+    --el-menu-item-height: $navbar-height;
+  }
+}
 </style>

src/utils/theme.ts

@@ -0,0 +1,70 @@
+/**
+ * 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);
+}