refactor: ♻️ 设置面板调整

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>