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

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>
-          </a>
-          <a target="_blank" href="https://gitee.com/haoxr">
-            <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
+            <el-dropdown-item>项目地址</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">
-    <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