diff --git a/public/platform-config.json b/public/platform-config.json index c4ceff9d0..9cf393f87 100644 --- a/public/platform-config.json +++ b/public/platform-config.json @@ -7,7 +7,7 @@ "KeepAlive": true, "Locale": "zh", "Layout": "vertical", - "Theme": "default", + "Theme": "light", "DarkMode": false, "Grey": false, "Weak": false, diff --git a/src/layout/components/panel/index.vue b/src/layout/components/panel/index.vue index efbc04cdc..50318c602 100644 --- a/src/layout/components/panel/index.vue +++ b/src/layout/components/panel/index.vue @@ -120,7 +120,7 @@ onBeforeUnmount(() => { right: 0; z-index: 40000; width: 100%; - max-width: 300px; + max-width: 280px; height: 100vh; box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%); transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1); diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 1fc880f16..aed1c5681 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -194,7 +194,8 @@ function setLayoutModel(layout: string) { theme: layoutTheme.value.theme, darkMode: $storage.layout?.darkMode, sidebarStatus: $storage.layout?.sidebarStatus, - epThemeColor: $storage.layout?.epThemeColor + epThemeColor: $storage.layout?.epThemeColor, + themeColor: layoutTheme.value.theme }; useAppStoreHook().setLayout(layout); } @@ -411,7 +412,7 @@ onBeforeMount(() => { cursor: pointer; border-radius: 4px; - &:nth-child(2) { + &:nth-child(1) { border: 1px solid #ddd; } } diff --git a/src/layout/components/sidebar/leftCollapse.vue b/src/layout/components/sidebar/leftCollapse.vue index c4bd0a59e..ad474fc1b 100644 --- a/src/layout/components/sidebar/leftCollapse.vue +++ b/src/layout/components/sidebar/leftCollapse.vue @@ -66,6 +66,6 @@ const toggleClick = () => { width: 100%; height: 40px; line-height: 40px; - box-shadow: 0 0 6px -2px var(--el-color-primary); + box-shadow: 0 0 6px -3px var(--el-color-primary); } diff --git a/src/layout/hooks/useDataThemeChange.ts b/src/layout/hooks/useDataThemeChange.ts index e92d8d57d..a06e72b23 100644 --- a/src/layout/hooks/useDataThemeChange.ts +++ b/src/layout/hooks/useDataThemeChange.ts @@ -18,24 +18,22 @@ import { export function useDataThemeChange() { const { layoutTheme, layout } = useLayout(); const themeColors = ref>([ - /* 道奇蓝(默认) */ - { color: "#1b2a47", themeColor: "default" }, /* 亮白色 */ { color: "#ffffff", themeColor: "light" }, + /* 道奇蓝 */ + { color: "#1b2a47", themeColor: "default" }, + /* 深紫罗兰色 */ + { color: "#722ed1", themeColor: "saucePurple" }, + /* 深粉色 */ + { color: "#eb2f96", themeColor: "pink" }, /* 猩红色 */ { color: "#f5222d", themeColor: "dusk" }, /* 橙红色 */ { color: "#fa541c", themeColor: "volcano" }, - /* 金色 */ - { color: "#fadb14", themeColor: "yellow" }, /* 绿宝石 */ { color: "#13c2c2", themeColor: "mingQing" }, /* 酸橙绿 */ - { color: "#52c41a", themeColor: "auroraGreen" }, - /* 深粉色 */ - { color: "#eb2f96", themeColor: "pink" }, - /* 深紫罗兰色 */ - { color: "#722ed1", themeColor: "saucePurple" } + { color: "#52c41a", themeColor: "auroraGreen" } ]); const { $storage } = useGlobal(); @@ -50,17 +48,23 @@ export function useDataThemeChange() { } /** 设置导航主题色 */ - function setLayoutThemeColor(theme = getConfig().Theme ?? "default") { + function setLayoutThemeColor( + theme = getConfig().Theme ?? "light", + isClick = true + ) { layoutTheme.value.theme = theme; toggleTheme({ scopeName: `layout-theme-${theme}` }); + // 如果非isClick,保留之前的themeColor + const storageThemeColor = $storage.layout.themeColor; $storage.layout = { layout: layout.value, theme, darkMode: dataTheme.value, sidebarStatus: $storage.layout?.sidebarStatus, - epThemeColor: $storage.layout?.epThemeColor + epThemeColor: $storage.layout?.epThemeColor, + themeColor: isClick ? theme : storageThemeColor }; if (theme === "default" || theme === "light") { @@ -93,14 +97,17 @@ export function useDataThemeChange() { /** 亮色、暗色整体风格切换 */ function dataThemeChange() { if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) { - setLayoutThemeColor("default"); + setLayoutThemeColor("default", false); } else { - setLayoutThemeColor(useEpThemeStoreHook().epTheme); + setLayoutThemeColor(useEpThemeStoreHook().epTheme, false); } if (dataTheme.value) { document.documentElement.classList.add("dark"); } else { + if ($storage.layout.themeColor === "light") { + setLayoutThemeColor("light", false); + } document.documentElement.classList.remove("dark"); } } diff --git a/src/layout/hooks/useLayout.ts b/src/layout/hooks/useLayout.ts index b022cafcf..5e4fb32e3 100644 --- a/src/layout/hooks/useLayout.ts +++ b/src/layout/hooks/useLayout.ts @@ -24,10 +24,11 @@ export function useLayout() { if (!$storage.layout) { $storage.layout = { layout: $config?.Layout ?? "vertical", - theme: $config?.Theme ?? "default", + theme: $config?.Theme ?? "light", darkMode: $config?.DarkMode ?? false, sidebarStatus: $config?.SidebarStatus ?? true, - epThemeColor: $config?.EpThemeColor ?? "#409EFF" + epThemeColor: $config?.EpThemeColor ?? "#409EFF", + themeColor: $config?.Theme ?? "light" }; } /** 灰色模式、色弱模式、隐藏标签页 */ diff --git a/src/layout/index.vue b/src/layout/index.vue index e5d8b1de0..b18f4fe19 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -68,7 +68,8 @@ function setTheme(layoutModel: string) { theme: $storage.layout?.theme, darkMode: $storage.layout?.darkMode, sidebarStatus: $storage.layout?.sidebarStatus, - epThemeColor: $storage.layout?.epThemeColor + epThemeColor: $storage.layout?.epThemeColor, + themeColor: $storage.layout?.themeColor }; } diff --git a/src/layout/theme/index.ts b/src/layout/theme/index.ts index 37ceeb436..ed714d3c4 100644 --- a/src/layout/theme/index.ts +++ b/src/layout/theme/index.ts @@ -6,6 +6,19 @@ import type { multipleScopeVarsOptions } from "@pureadmin/theme"; /** 预设主题色 */ const themeColors = { + /* 亮白色 */ + light: { + subMenuActiveText: "#000000d9", + menuBg: "#fff", + menuHover: "#e0ebf6", + subMenuBg: "#fff", + subMenuActiveBg: "#e0ebf6", + menuText: "rgb(0 0 0 / 60%)", + sidebarLogo: "#fff", + menuTitleHover: "#000", + menuActiveBefore: "#4091f7" + }, + /* 道奇蓝 */ default: { subMenuActiveText: "#fff", menuBg: "#001529", @@ -17,72 +30,19 @@ const themeColors = { menuTitleHover: "#fff", menuActiveBefore: "#4091f7" }, - light: { - subMenuActiveText: "#409eff", - menuBg: "#fff", - menuHover: "#e0ebf6", - subMenuBg: "#fff", - subMenuActiveBg: "#e0ebf6", - menuText: "#7a80b4", - sidebarLogo: "#fff", - menuTitleHover: "#000", - menuActiveBefore: "#4091f7" - }, - dusk: { + /* 深紫罗兰色 */ + saucePurple: { subMenuActiveText: "#fff", - menuBg: "#2a0608", - menuHover: "#e13c39", + menuBg: "#130824", + menuHover: "#693ac9", subMenuBg: "#000", - subMenuActiveBg: "#e13c39", - menuText: "rgb(254 254 254 / 65.1%)", - sidebarLogo: "#42090c", - menuTitleHover: "#fff", - menuActiveBefore: "#e13c39" - }, - volcano: { - subMenuActiveText: "#fff", - menuBg: "#2b0e05", - menuHover: "#e85f33", - subMenuBg: "#0f0603", - subMenuActiveBg: "#e85f33", - menuText: "rgb(254 254 254 / 65%)", - sidebarLogo: "#441708", - menuTitleHover: "#fff", - menuActiveBefore: "#e85f33" - }, - yellow: { - subMenuActiveText: "#d25f00", - menuBg: "#2b2503", - menuHover: "#f6da4d", - subMenuBg: "#0f0603", - subMenuActiveBg: "#f6da4d", - menuText: "rgb(254 254 254 / 65%)", - sidebarLogo: "#443b05", - menuTitleHover: "#fff", - menuActiveBefore: "#f6da4d" - }, - mingQing: { - subMenuActiveText: "#fff", - menuBg: "#032121", - menuHover: "#59bfc1", - subMenuBg: "#000", - subMenuActiveBg: "#59bfc1", + subMenuActiveBg: "#693ac9", menuText: "#7a80b4", - sidebarLogo: "#053434", + sidebarLogo: "#1f0c38", menuTitleHover: "#fff", - menuActiveBefore: "#59bfc1" - }, - auroraGreen: { - subMenuActiveText: "#fff", - menuBg: "#0b1e15", - menuHover: "#60ac80", - subMenuBg: "#000", - subMenuActiveBg: "#60ac80", - menuText: "#7a80b4", - sidebarLogo: "#112f21", - menuTitleHover: "#fff", - menuActiveBefore: "#60ac80" + menuActiveBefore: "#693ac9" }, + /* 深粉色 */ pink: { subMenuActiveText: "#fff", menuBg: "#28081a", @@ -94,16 +54,53 @@ const themeColors = { menuTitleHover: "#fff", menuActiveBefore: "#d84493" }, - saucePurple: { + /* 猩红色 */ + dusk: { subMenuActiveText: "#fff", - menuBg: "#130824", - menuHover: "#693ac9", + menuBg: "#2a0608", + menuHover: "#e13c39", subMenuBg: "#000", - subMenuActiveBg: "#693ac9", - menuText: "#7a80b4", - sidebarLogo: "#1f0c38", + subMenuActiveBg: "#e13c39", + menuText: "rgb(254 254 254 / 65.1%)", + sidebarLogo: "#42090c", menuTitleHover: "#fff", - menuActiveBefore: "#693ac9" + menuActiveBefore: "#e13c39" + }, + /* 橙红色 */ + volcano: { + subMenuActiveText: "#fff", + menuBg: "#2b0e05", + menuHover: "#e85f33", + subMenuBg: "#0f0603", + subMenuActiveBg: "#e85f33", + menuText: "rgb(254 254 254 / 65%)", + sidebarLogo: "#441708", + menuTitleHover: "#fff", + menuActiveBefore: "#e85f33" + }, + /* 绿宝石 */ + mingQing: { + subMenuActiveText: "#fff", + menuBg: "#032121", + menuHover: "#59bfc1", + subMenuBg: "#000", + subMenuActiveBg: "#59bfc1", + menuText: "#7a80b4", + sidebarLogo: "#053434", + menuTitleHover: "#fff", + menuActiveBefore: "#59bfc1" + }, + /* 酸橙绿 */ + auroraGreen: { + subMenuActiveText: "#fff", + menuBg: "#0b1e15", + menuHover: "#60ac80", + subMenuBg: "#000", + subMenuActiveBg: "#60ac80", + menuText: "#7a80b4", + sidebarLogo: "#112f21", + menuTitleHover: "#fff", + menuActiveBefore: "#60ac80" } }; diff --git a/src/store/modules/epTheme.ts b/src/store/modules/epTheme.ts index b5ec91c09..da72af029 100644 --- a/src/store/modules/epTheme.ts +++ b/src/store/modules/epTheme.ts @@ -23,8 +23,6 @@ export const useEpThemeStore = defineStore({ fill(state) { if (state.epTheme === "light") { return "#409eff"; - } else if (state.epTheme === "yellow") { - return "#d25f00"; } else { return "#fff"; } diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index 9f05e0863..421a91b21 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -83,7 +83,7 @@ overflow: hidden; font-size: 0; background: $menuBg; - box-shadow: 0 0 1px #888; + border-right: 1px solid var(--pure-border-color); /* 展开动画 */ transition: width var(--pure-transition-duration); @@ -193,7 +193,7 @@ .el-menu .el-menu--inline .el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: $sideBarWidth !important; - font-size: 12px; + font-size: 14px; background-color: $subMenuBg !important; } @@ -247,7 +247,7 @@ .el-menu-item { span { - font-size: 12px; + font-size: 14px; } } } @@ -270,7 +270,7 @@ /* 子菜单中还有子菜单 */ .el-menu .el-sub-menu__title { min-width: $sideBarWidth !important; - font-size: 12px; + font-size: 14px; background-color: $subMenuBg !important; } @@ -333,7 +333,7 @@ background-color: $subMenuBg; span { - font-size: 12px; + font-size: 14px; } } @@ -351,7 +351,7 @@ /* 子菜单中还有子菜单 */ .el-menu .el-sub-menu__title { min-width: $sideBarWidth !important; - font-size: 12px; + font-size: 14px; background-color: $subMenuBg !important; &:hover { diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts index 37c9f2b68..b5e77986e 100644 --- a/src/utils/responsive.ts +++ b/src/utils/responsive.ts @@ -15,11 +15,13 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => { // layout模式以及主题 layout: Storage.getData("layout", nameSpace) ?? { layout: config.Layout ?? "vertical", - theme: config.Theme ?? "default", + theme: config.Theme ?? "light", darkMode: config.DarkMode ?? false, sidebarStatus: config.SidebarStatus ?? true, - epThemeColor: config.EpThemeColor ?? "#409EFF" + epThemeColor: config.EpThemeColor ?? "#409EFF", + themeColor: config.Theme ?? "light" // 主题色(对应项目配置中的主题色,与theme不同的是它不会受到亮色、暗色整体风格切换的影响,只会在手动点击主题色时改变) }, + // 项目配置-界面显示 configure: Storage.getData("configure", nameSpace) ?? { grey: config.Grey ?? false, weak: config.Weak ?? false, diff --git a/types/global.d.ts b/types/global.d.ts index b9c4c243b..bdc8e0e6e 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -1,11 +1,4 @@ -import type { - VNode, - FunctionalComponent, - PropType as VuePropType, - ComponentPublicInstance -} from "vue"; import type { ECharts } from "echarts"; -import type { IconifyIcon } from "@iconify/vue"; import type { TableColumns } from "@pureadmin/table"; /** @@ -129,6 +122,7 @@ declare global { hideFooter?: boolean; sidebarStatus?: boolean; epThemeColor?: string; + themeColor?: string; showLogo?: boolean; showModel?: string; mapConfigure?: { @@ -155,6 +149,7 @@ declare global { darkMode?: boolean; sidebarStatus?: boolean; epThemeColor?: string; + themeColor?: string; }; configure: { grey?: boolean; diff --git a/types/router.d.ts b/types/router.d.ts index 6f6880a8b..1287e0d48 100644 --- a/types/router.d.ts +++ b/types/router.d.ts @@ -1,6 +1,7 @@ // 全局路由类型声明 -import { type RouteComponent, type RouteLocationNormalized } from "vue-router"; +import type { RouteComponent, RouteLocationNormalized } from "vue-router"; +import type { FunctionalComponent } from "vue"; declare global { interface ToRouteType extends RouteLocationNormalized {