From b2081b34814d7da585367fd926b45e1daa51037c Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Tue, 8 Nov 2022 01:30:04 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/hooks/useDataThemeChange.ts | 2 +- src/layout/theme/index.ts | 10 ---------- src/style/sidebar.scss | 8 ++------ types/index.ts | 5 +++-- 4 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts index 10a0ce01d..a4089b2e6 100644 --- a/src/layout/hooks/useDataThemeChange.ts +++ b/src/layout/hooks/useDataThemeChange.ts @@ -69,7 +69,7 @@ export function useDataThemeChange() { return new TinyColor(color).shade(10).toString(); }; - /** 设置ep主题色 */ + /** 设置 `element-plus` 主题色 */ const setEpThemeColor = (color: string) => { useEpThemeStoreHook().setEpThemeColor(color); body.style.setProperty("--el-color-primary-active", shadeBgColor(color)); diff --git a/src/layout/theme/index.ts b/src/layout/theme/index.ts index c24bb1b80..d9d273637 100644 --- a/src/layout/theme/index.ts +++ b/src/layout/theme/index.ts @@ -20,7 +20,6 @@ const themeColors = { menuHover: "#4091f7", subMenuBg: "#0f0303", subMenuActiveBg: "#4091f7", - navTextColor: "#fff", menuText: "rgb(254 254 254 / 65%)", sidebarLogo: "#002140", menuTitleHover: "#fff", @@ -33,7 +32,6 @@ const themeColors = { menuHover: "#e0ebf6", subMenuBg: "#fff", subMenuActiveBg: "#e0ebf6", - navTextColor: "#7a80b4", menuText: "#7a80b4", sidebarLogo: "#fff", menuTitleHover: "#000", @@ -46,7 +44,6 @@ const themeColors = { menuHover: "#e13c39", subMenuBg: "#000", subMenuActiveBg: "#e13c39", - navTextColor: "#red", menuText: "rgb(254 254 254 / 65.1%)", sidebarLogo: "#42090c", menuTitleHover: "#fff", @@ -59,7 +56,6 @@ const themeColors = { menuHover: "#e85f33", subMenuBg: "#0f0603", subMenuActiveBg: "#e85f33", - navTextColor: "#fff", menuText: "rgb(254 254 254 / 65%)", sidebarLogo: "#441708", menuTitleHover: "#fff", @@ -72,7 +68,6 @@ const themeColors = { menuHover: "#f6da4d", subMenuBg: "#0f0603", subMenuActiveBg: "#f6da4d", - navTextColor: "#fff", menuText: "rgb(254 254 254 / 65%)", sidebarLogo: "#443b05", menuTitleHover: "#fff", @@ -85,7 +80,6 @@ const themeColors = { menuHover: "#59bfc1", subMenuBg: "#000", subMenuActiveBg: "#59bfc1", - navTextColor: "#7a80b4", menuText: "#7a80b4", sidebarLogo: "#053434", menuTitleHover: "#fff", @@ -98,7 +92,6 @@ const themeColors = { menuHover: "#60ac80", subMenuBg: "#000", subMenuActiveBg: "#60ac80", - navTextColor: "#7a80b4", menuText: "#7a80b4", sidebarLogo: "#112f21", menuTitleHover: "#fff", @@ -111,7 +104,6 @@ const themeColors = { menuHover: "#d84493", subMenuBg: "#000", subMenuActiveBg: "#d84493", - navTextColor: "#7a80b4", menuText: "#7a80b4", sidebarLogo: "#3f0d29", menuTitleHover: "#fff", @@ -124,7 +116,6 @@ const themeColors = { menuHover: "#693ac9", subMenuBg: "#000", subMenuActiveBg: "#693ac9", - navTextColor: "#7a80b4", menuText: "#7a80b4", sidebarLogo: "#1f0c38", menuTitleHover: "#fff", @@ -147,7 +138,6 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => { $menuHover: ${themeColors[key].menuHover} !default; $subMenuBg: ${themeColors[key].subMenuBg} !default; $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default; - $navTextColor: ${themeColors[key].navTextColor} !default; $menuText: ${themeColors[key].menuText} !default; $sidebarLogo: ${themeColors[key].sidebarLogo} !default; $menuTitleHover: ${themeColors[key].menuTitleHover} !default; diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index 4b5aa4263..7a5b395d9 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -233,11 +233,9 @@ .search-container, /* 告警 */ .dropdown-badge, - /* 全屏 */ - .screen-full, /* 国际化 */ .globalization, - /* 登录名 */ + /* 用户名 */ .el-dropdown-link, /* 设置 */ .set-icon { @@ -587,11 +585,9 @@ body[layout="vertical"] { .search-container, /* 告警 */ .dropdown-badge, - /* 全屏 */ - .screen-full, /* 国际化 */ .globalization, - /* 登录名 */ + /* 用户名 */ .el-dropdown-link, /* 设置 */ .set-icon { diff --git a/types/index.ts b/types/index.ts index 017550ad1..9c3056a50 100644 --- a/types/index.ts +++ b/types/index.ts @@ -1,3 +1,4 @@ +import { type FunctionalComponent } from "vue"; import { type RouteComponent } from "vue-router"; export interface StorageConfigs { @@ -64,7 +65,7 @@ export interface RouteChildrenConfigsTable { /** 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加) `必填` */ title: string; /** 菜单图标 `可选` */ - icon?: string; + icon?: string | FunctionalComponent; /** 菜单名称右侧的额外图标,支持`fontawesome`、`iconfont`、`element-plus-icon` `可选` */ extraIcon?: { svg?: boolean; @@ -122,7 +123,7 @@ export interface RouteConfigsTable { /** 菜单名称(兼容国际化、非国际化,如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加)`必填` */ title: string; /** 菜单图标 `可选` */ - icon?: string; + icon?: string | FunctionalComponent; /** 是否在菜单中显示(默认`true`)`可选` */ showLink?: boolean; /** 菜单升序排序,值越高排的越后(只针对顶级路由)`可选` */