feat: update

package.json

@@ -71,7 +71,7 @@
     "@vue/compiler-sfc": "^3.2.20",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "@zougt/vite-plugin-theme-preprocessor": "^1.2.0",
+    "@zougt/vite-plugin-theme-preprocessor": "^1.3.1",
     "autoprefixer": "^10.2.4",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "chalk": "^2.4.2",

src/layout/components/setting/index.vue

@@ -4,6 +4,7 @@ import { useRouter } from "vue-router";
 import { emitter } from "/@/utils/mitt";
 import { templateRef } from "@vueuse/core";
 import { debounce } from "/@/utils/debounce";
+import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import {
@@ -18,6 +19,27 @@ import {
 const router = useRouter();
 const { isSelect } = useCssModule();
 
+let themeColors = ref<Array<themeColorsType>>([
+  // 暗雅（默认）
+  { rgb: "27, 42, 71", themeColor: "layout-theme-default" },
+  // 明亮
+  { rgb: "255, 255, 255", themeColor: "layout-theme-light" },
+  // 薄暮
+  { rgb: "245, 34, 45", themeColor: "layout-theme-dusk" },
+  // 火山
+  { rgb: "250, 84, 28", themeColor: "layout-theme-volcano" },
+  // 日暮
+  { rgb: "250, 84, 28", themeColor: "layout-theme-higurashi" },
+  // 明青
+  { rgb: "19, 194, 194", themeColor: "layout-theme-mingQing" },
+  // 极光绿
+  { rgb: "82, 196, 26", themeColor: "layout-theme-auroraGreen" },
+  // 极客蓝
+  { rgb: "47, 84, 235", themeColor: "layout-theme-geekBlue" },
+  // 酱紫
+  { rgb: "114, 46, 209", themeColor: "layout-theme-saucePurple" }
+]);
+
 const instance =
   getCurrentInstance().appContext.app.config.globalProperties.$storage;
 
@@ -177,8 +199,16 @@ function setTheme(layout: string) {
     </ul>
 
     <el-divider>主题色</el-divider>
-    <ul>
+    <ul class="theme-color">
-      <li>11</li>
+      <li
+        v-for="(item, index) in themeColors"
+        :key="index"
+        :style="{ background: `rgb(${item.rgb})` }"
+      >
+        <el-icon style="margin: 4px 3px 0 0">
+          <Check />
+        </el-icon>
+      </li>
     </ul>
 
     <el-divider>界面显示</el-divider>
@@ -316,4 +346,29 @@ function setTheme(layout: string) {
     }
   }
 }
+
+.theme-color {
+  width: 100%;
+  height: 40px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+
+  li {
+    float: left;
+    width: 20px;
+    height: 20px;
+    margin-top: 8px;
+    margin-right: 8px;
+    color: #fff;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 2px;
+    cursor: pointer;
+
+    &:nth-child(2) {
+      border: 1px solid #ddd;
+    }
+  }
+}
 </style>

src/layout/types.ts

@@ -63,3 +63,8 @@ export type childrenType = {
     };
   };
 };
+
+export type themeColorsType = {
+  rgb: string;
+  themeColor: string;
+};

src/plugins/element-plus/index.ts

@@ -38,7 +38,7 @@ import {
 } from "element-plus";
 
 // https://element-plus.org/zh-CN/component/icon.html
-import { Menu } from "@element-plus/icons";
+import { Check } from "@element-plus/icons";
 
 const components = [
   ElTag,
@@ -75,7 +75,7 @@ const components = [
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  Menu
+  Check
 ];
 
 const plugins = [ElLoading];

src/utils/storage/responsive.ts

@@ -30,7 +30,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
     layout: {
       type: Object,
       default: Storage.getData(undefined, "layout") ?? {
-        layout: config.Layout
+        layout: config.Layout,
+        theme: config.Theme
       }
     }
   });

types/global.d.ts

@@ -90,6 +90,7 @@ declare global {
     KeepAlive?: boolean;
     Locale?: string;
     Layout?: string;
+    Theme?: string;
     MapConfigure?: {
       amapKey?: string;
       baiduKey?: string;

vite.config.ts

@@ -60,11 +60,11 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
         scss: {
           multipleScopeVars: [
             {
-              scopeName: "layout-default",
+              scopeName: "layout-theme-default",
               path: pathResolve("src/layout/theme/default-vars.scss")
             },
             {
-              scopeName: "layout-light",
+              scopeName: "layout-theme-light",
               path: pathResolve("src/layout/theme/light-vars.scss")
             }
           ],

yarn.lock

@@ -922,7 +922,7 @@
   dependencies:
     vue-demi "*"
 
-"@zougt/some-loader-utils@^1.1.0":
+"@zougt/some-loader-utils@^1.3.2":
   version "1.3.2"
   resolved "https://registry.npmjs.org/@zougt/some-loader-utils/-/some-loader-utils-1.3.2.tgz#362ad8158c3a95fa89ac61b2e6f9e61a32b2364a"
   integrity sha512-8cWH8yfQ10Fwh7Dc4kvPwFQ901KGUmGxKgNq1asfTsFdf6QSRZOQWWMX58LuV4XjqRqhMECWyd6fNvjPddQjTQ==
@@ -930,12 +930,12 @@
     parse-color "^1.0.0"
     postcss "^8.2.9"
 
-"@zougt/vite-plugin-theme-preprocessor@^1.2.0":
+"@zougt/vite-plugin-theme-preprocessor@^1.3.1":
-  version "1.2.0"
+  version "1.3.1"
-  resolved "https://registry.npmjs.org/@zougt/vite-plugin-theme-preprocessor/-/vite-plugin-theme-preprocessor-1.2.0.tgz#cf3443d9bfd8dc722e2bfe7556b993c1e03b2e28"
+  resolved "https://registry.npmjs.org/@zougt/vite-plugin-theme-preprocessor/-/vite-plugin-theme-preprocessor-1.3.1.tgz#09971727583f5c07c6aae7775394cf02b8c04990"
-  integrity sha512-CTt0UmvykY5QL6DGSs/gxOBfqdmN53p1cI4eRXjbfq+cpAJO4uvZfZTk/tuHgm4FOvOVOgJ7dPCm3xX9H5WIUQ==
+  integrity sha512-GKTHaxgndS70/BS1uoP+qY45dl2Gnq05pwJiyiytyVgz+jB7zmGWgqLnMoA58oE74Nx32zwuTRKnE6XJGY8N2w==
   dependencies:
-    "@zougt/some-loader-utils" "^1.1.0"
+    "@zougt/some-loader-utils" "^1.3.2"
     fs-extra "^9.1.0"
     string-hash "^1.1.3"