perf: theme

package.json

@@ -28,6 +28,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@ctrl/tinycolor": "^3.4.0",
     "@element-plus/icons-vue": "^0.2.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.3
 specifiers:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
+  "@ctrl/tinycolor": ^3.4.0
   "@element-plus/icons-vue": ^0.2.4
   "@fortawesome/fontawesome-svg-core": ^1.2.36
   "@fortawesome/free-solid-svg-icons": ^5.15.4
@@ -75,6 +76,7 @@ specifiers:
   vue-types: ^4.1.0
 
 dependencies:
+  "@ctrl/tinycolor": 3.4.0
   "@element-plus/icons-vue": 0.2[email protected]
   "@fortawesome/fontawesome-svg-core": 1.2.36
   "@fortawesome/free-solid-svg-icons": 5.15.4
@@ -731,6 +733,14 @@ packages:
       chalk: 4.1.2
     dev: true
 
+  /@ctrl/tinycolor/3.4.0:
+    resolution:
+      {
+        integrity: sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
+      }
+    engines: { node: ">=10" }
+    dev: false
+
   /@element-plus/icons-vue/[email protected]:
     resolution:
       {

src/layout/components/setting/index.vue

@@ -21,6 +21,7 @@ import { debounce } from "/@/utils/debounce";
 import darkIcon from "/@/assets/svg/dark.svg";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { shadeBgColor } from "../../theme/element-plus";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
@@ -29,6 +30,7 @@ import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-
 
 const router = useRouter();
 const { isSelect } = useCssModule();
+const body = document.documentElement as HTMLElement;
 const instance =
   getCurrentInstance().appContext.app.config.globalProperties.$storage;
 
@@ -260,13 +262,13 @@ function setLayoutThemeColor(theme: string) {
 const setEpThemeColor = (color: string) => {
   writeNewStyle(createNewStyle(color));
   useEpThemeStoreHook().setEpThemeColor(color);
+  body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
 };
 
 let dataTheme = ref<boolean>(instance.layout.darkMode);
 
 // 日间、夜间主题切换
 function dataThemeChange() {
-  const body = document.documentElement as HTMLElement;
   if (dataTheme.value) {
     body.setAttribute("data-theme", "dark");
     setLayoutThemeColor("light");

src/layout/theme/element-plus.ts

@@ -1,6 +1,7 @@
 /* 动态改变element-plus主题色 */
 import rgbHex from "rgb-hex";
 import color from "css-color-function";
+import { TinyColor } from "@ctrl/tinycolor";
 import epCss from "element-plus/dist/index.css";
 
 // 色值表
@@ -72,3 +73,8 @@ const getStyleTemplate = (data: string): string => {
   });
   return data;
 };
+
+// 自动计算hover和active颜色 https://element-plus.gitee.io/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2-%E6%B5%8B%E8%AF%95%E7%89%88
+export const shadeBgColor = (color: string): string => {
+  return new TinyColor(color).shade(10).toString();
+};

src/router/index.ts

@@ -89,7 +89,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
               });
             };
             // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对静态路由）
-            if (to.meta?.dynamicLevel) {
+            if (to.meta?.refreshRedirect) {
               const routes = router.options.routes;
               const { refreshRedirect } = to.meta;
               const { name, meta } = findRouteByPath(refreshRedirect, routes);

src/router/types.ts

@@ -2,8 +2,8 @@ import { RouteLocationNormalized } from "vue-router";
 
 export interface toRouteType extends RouteLocationNormalized {
   meta: {
-    keepAlive: boolean;
+    keepAlive?: boolean;
     refreshRedirect: string;
-    dynamicLevel: string;
+    dynamicLevel?: string;
   };
 }

src/style/element-plus.scss

@@ -35,3 +35,30 @@
 .is-dark {
   z-index: 99999 !important;
 }
+
+/* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary) !important;
+  --el-button-border-color: var(--el-color-primary) !important;
+  --el-button-hover-bg-color: var(--el-color-primary-light-2) !important;
+  --el-button-hover-border-color: var(--el-color-primary-light-2) !important;
+  --el-button-active-bg-color: var(--el-color-primary-active) !important;
+  --el-button-active-border-color: var(--el-color-primary-active) !important;
+}
+
+/* nprogress适配ep的primary */
+#nprogress {
+  & .bar {
+    background-color: var(--el-color-primary) !important;
+  }
+
+  & .peg {
+    box-shadow: 0 0 10px var(--el-color-primary),
+      0 0 5px var(--el-color-primary) !important;
+  }
+
+  & .spinner-icon {
+    border-top-color: var(--el-color-primary);
+    border-left-color: var(--el-color-primary);
+  }
+}

src/utils/http/README.md

@@ -18,8 +18,8 @@ http.request('get', '/xxx?message=' + msg);
 import { http } from "/@/utils/http";
 
 // params传参
-http.request('get', '/xxx', { params: param });
+http.request('post', '/xxx', { params: param });
 
 // data传参
-http.request('get', '/xxx', { data: param });
+http.request('post', '/xxx', { data: param });
 ```