Browse Source

perf: theme

i18n
xiaoxian521 3 years ago
parent
commit
749633e32c
  1. 1
      package.json
  2. 10
      pnpm-lock.yaml
  3. 4
      src/layout/components/setting/index.vue
  4. 6
      src/layout/theme/element-plus.ts
  5. 2
      src/router/index.ts
  6. 4
      src/router/types.ts
  7. 27
      src/style/element-plus.scss
  8. 4
      src/utils/http/README.md

1
package.json

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

10
pnpm-lock.yaml

@ -3,6 +3,7 @@ lockfileVersion: 5.3
specifiers: specifiers:
"@commitlint/cli": 13.1.0 "@commitlint/cli": 13.1.0
"@commitlint/config-conventional": 13.1.0 "@commitlint/config-conventional": 13.1.0
"@ctrl/tinycolor": ^3.4.0
"@element-plus/icons-vue": ^0.2.4 "@element-plus/icons-vue": ^0.2.4
"@fortawesome/fontawesome-svg-core": ^1.2.36 "@fortawesome/fontawesome-svg-core": ^1.2.36
"@fortawesome/free-solid-svg-icons": ^5.15.4 "@fortawesome/free-solid-svg-icons": ^5.15.4
@ -75,6 +76,7 @@ specifiers:
vue-types: ^4.1.0 vue-types: ^4.1.0
dependencies: dependencies:
"@ctrl/tinycolor": 3.4.0
"@element-plus/icons-vue": 0.2.4_vue@3.2.24 "@element-plus/icons-vue": 0.2.4_vue@3.2.24
"@fortawesome/fontawesome-svg-core": 1.2.36 "@fortawesome/fontawesome-svg-core": 1.2.36
"@fortawesome/free-solid-svg-icons": 5.15.4 "@fortawesome/free-solid-svg-icons": 5.15.4
@ -731,6 +733,14 @@ packages:
chalk: 4.1.2 chalk: 4.1.2
dev: true 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: /@element-plus/icons-vue/0.2.4_vue@3.2.24:
resolution: resolution:
{ {

4
src/layout/components/setting/index.vue

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

6
src/layout/theme/element-plus.ts

@ -1,6 +1,7 @@
/* 动态改变element-plus主题色 */ /* 动态改变element-plus主题色 */
import rgbHex from "rgb-hex"; import rgbHex from "rgb-hex";
import color from "css-color-function"; import color from "css-color-function";
import { TinyColor } from "@ctrl/tinycolor";
import epCss from "element-plus/dist/index.css"; import epCss from "element-plus/dist/index.css";
// 色值表 // 色值表
@ -72,3 +73,8 @@ const getStyleTemplate = (data: string): string => {
}); });
return data; 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();
};

2
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 routes = router.options.routes;
const { refreshRedirect } = to.meta; const { refreshRedirect } = to.meta;
const { name, meta } = findRouteByPath(refreshRedirect, routes); const { name, meta } = findRouteByPath(refreshRedirect, routes);

4
src/router/types.ts

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

27
src/style/element-plus.scss

@ -35,3 +35,30 @@
.is-dark { .is-dark {
z-index: 99999 !important; 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);
}
}

4
src/utils/http/README.md

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