From 749633e32c20ed278ef72118535b1e5feecc1b0d Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Fri, 24 Dec 2021 10:55:59 +0800 Subject: [PATCH] perf: theme --- package.json | 1 + pnpm-lock.yaml | 10 ++++++++++ src/layout/components/setting/index.vue | 4 +++- src/layout/theme/element-plus.ts | 6 ++++++ src/router/index.ts | 2 +- src/router/types.ts | 4 ++-- src/style/element-plus.scss | 27 +++++++++++++++++++++++++++ src/utils/http/README.md | 4 ++-- 8 files changed, 52 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 0a19077..06fcd1f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ccf53d..bef6ca8 100644 --- a/pnpm-lock.yaml +++ b/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.4_vue@3.2.24 "@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/0.2.4_vue@3.2.24: resolution: { diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 49aad68..a4746f5 100644 --- a/src/layout/components/setting/index.vue +++ b/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(instance.layout.darkMode); // 日间、夜间主题切换 function dataThemeChange() { - const body = document.documentElement as HTMLElement; if (dataTheme.value) { body.setAttribute("data-theme", "dark"); setLayoutThemeColor("light"); diff --git a/src/layout/theme/element-plus.ts b/src/layout/theme/element-plus.ts index d48733a..dadad67 100644 --- a/src/layout/theme/element-plus.ts +++ b/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(); +}; diff --git a/src/router/index.ts b/src/router/index.ts index 74b04bf..bf6d233 100644 --- a/src/router/index.ts +++ b/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); diff --git a/src/router/types.ts b/src/router/types.ts index fa4e103..0e1896a 100644 --- a/src/router/types.ts +++ b/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; }; } diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss index 0b27889..25e5464 100644 --- a/src/style/element-plus.scss +++ b/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); + } +} diff --git a/src/utils/http/README.md b/src/utils/http/README.md index 5b661e6..3b44164 100644 --- a/src/utils/http/README.md +++ b/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 }); ```