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

src/layout/components/Settings/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="setting-container">
-    <el-text tag="b">项目配置</el-text>
+  <div
+    :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="[
-          '#409EFF',
-          '#1890ff',
-          '#304156',
-          '#212121',
-          '#11a983',
-          '#13c2c2',
-          '#6959CD',
-          '#f5222d',
-        ]"
-        @change="changeThemeColor"
-        popper-class="theme-picker-dropdown"
+        @update:model-value="changeThemeColor"
       />
     </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">
-      <el-tooltip content="左侧模式" placement="bottom">
-        <li
-          :class="
-            'layout-item layout-left ' +
-            (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>
+    <LayoutSelect
+      v-model="settingsStore.layout"
+      @update:model-value="changeLayout"
+    />
+  </el-drawer>
 </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 });
-  if (layout === "mix") {
+  settingsStore.changeLayout(layout);
+  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);
-  const theme = settingsStore.theme;
-  if (theme == "dark") {
-    document.documentElement.classList.add("dark");
-  }
-
-  document.documentElement.style.setProperty(
-    "--el-color-primary",
-    settingsStore.themeColor
-  );
+  changeTheme(settingsStore.theme == ThemeEnum.DARK); // 初始化主题
+  changeThemeColor(settingsStore.themeColor); // 初始化主题颜色
 });
 </script>
 
 <style lang="scss" scoped>
-.setting-container {
-  padding: 16px;
+.settings-button {
+  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 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    width: 100%;
-    height: 50px;
+  @apply flex-center;
 
-    &-item {
-      position: relative;
-      width: 18%;
-      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;
-    }
+  &.show {
+    right: 300px;
+    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   }
 }
 
-:deep(.theme-picker-dropdown) {
-  z-index: 99999 !important;
+.settings-option {
+  @apply py-1 flex-x-between;
 }
 </style>
+@/utils/color