twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 16:37:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 优化主题色 (#842)

Browse Source 
* refactor: 优化主题色

* chore: 移除`yellow`金色主题配色

* perf: 优化左侧菜单的右边框，使其不再突兀

* style: 所有层级的子菜单字体大小跟顶级菜单保持一致都是`14px`

* chore: 默认亮白色`light`主题配色，并按照感官调整主题色顺序

* fix: 修复亮白主题配色，切换暗色主题后再切回亮色主题时，无法恢复之前的亮白主题配色

* style: 统一亮白主题配色下顶部菜单和混合菜单的`logo`和右侧操作功能颜色
This commit is contained in:
xiaoming 2024-01-02 17:42:26 +08:00 committed by GitHub
parent 7acdf03f87
commit ba1f655b6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 110 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/platform-config.json
View File

@ -7,7 +7,7 @@
"KeepAlive": true,
"Locale": "zh",
"Layout": "vertical",
"Theme": "default",
"Theme": "light",
"DarkMode": false,
"Grey": false,
"Weak": false,

2
src/layout/components/panel/index.vue
View File

@ -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);

5
src/layout/components/setting/index.vue
View File

@ -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;
}
}

2
src/layout/components/sidebar/leftCollapse.vue
View File

@ -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);
}
</style>

33
src/layout/hooks/useDataThemeChange.ts
View File

@ -18,24 +18,22 @@ import {
export function useDataThemeChange() {
const { layoutTheme, layout } = useLayout();
const themeColors = ref<Array<themeColorsType>>([
/* 道奇蓝（默认） */
{ 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<GlobalPropertiesApi>();
@ -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");
}
}

5
src/layout/hooks/useLayout.ts
View File

@ -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"
};
}
/** 灰色模式、色弱模式、隐藏标签页 */

3
src/layout/index.vue
View File

@ -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
};
}

133
src/layout/theme/index.ts
View File

@ -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"
}
};

2
src/store/modules/epTheme.ts
View File

@ -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";
}

12
src/style/sidebar.scss
View File

@ -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 {

6
src/utils/responsive.ts
View File

@ -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,

9
types/global.d.ts vendored
View File

@ -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;

3
types/router.d.ts vendored
View File

@ -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 {