mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 16:37:18 +08:00
refactor: 升级vite至v6版本，升级sass至最新版，重构主题写法，删除@pureadmin/theme
This commit is contained in:
xiaoxian521
parent
fd9ad7eb21
commit
005c1405e4
@ -54,10 +54,6 @@ const include = [
|
||||
* 在预构建中强制排除的依赖项
|
||||
* 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
|
||||
*/
|
||||
const exclude = [
|
||||
"@iconify-icons/ep",
|
||||
"@iconify-icons/ri",
|
||||
"@pureadmin/theme/dist/browser-utils"
|
||||
];
|
||||
const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"];
|
||||
|
||||
export { include, exclude };
|
||||
|
||||
@ -11,9 +11,7 @@ import { configCompressPlugin } from "./compress";
|
||||
import removeNoMatch from "vite-plugin-router-warn";
|
||||
import { visualizer } from "rollup-plugin-visualizer";
|
||||
import removeConsole from "vite-plugin-remove-console";
|
||||
import { themePreprocessorPlugin } from "@pureadmin/theme";
|
||||
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
|
||||
import { genScssMultipleScopeVars } from "../src/layout/theme";
|
||||
import { vitePluginFakeServer } from "vite-plugin-fake-server";
|
||||
|
||||
export function getPluginsList(
|
||||
@ -54,13 +52,6 @@ export function getPluginsList(
|
||||
infixName: false,
|
||||
enableProd: true
|
||||
}),
|
||||
// 自定义主题
|
||||
themePreprocessorPlugin({
|
||||
scss: {
|
||||
multipleScopeVars: genScssMultipleScopeVars(),
|
||||
extract: true
|
||||
}
|
||||
}),
|
||||
// svg组件化支持
|
||||
svgLoader(),
|
||||
VITE_CDN ? cdn : null,
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.5.1",
|
||||
"el-table-infinite-scroll": "^3.0.6",
|
||||
"element-plus": "^2.8.5",
|
||||
"element-plus": "https://pkg.pr.new/element-plus/element-plus@18711",
|
||||
"intro.js": "^7.2.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsbarcode": "^3.11.6",
|
||||
@ -113,12 +113,11 @@
|
||||
"@commitlint/config-conventional": "^19.5.0",
|
||||
"@commitlint/types": "^19.5.0",
|
||||
"@eslint/js": "^9.12.0",
|
||||
"@faker-js/faker": "^8.4.1",
|
||||
"@faker-js/faker": "^9.1.0",
|
||||
"@iconify-icons/ep": "^1.2.12",
|
||||
"@iconify-icons/ri": "^1.2.10",
|
||||
"@iconify/vue": "^4.1.2",
|
||||
"@intlify/unplugin-vue-i18n": "^5.2.0",
|
||||
"@pureadmin/theme": "^3.3.0",
|
||||
"@types/dagre": "^0.7.52",
|
||||
"@types/intro.js": "^5.1.5",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
@ -150,7 +149,7 @@
|
||||
"prettier": "^3.3.3",
|
||||
"rimraf": "^6.0.1",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"sass": "1.79.6",
|
||||
"sass": "^1.80.5",
|
||||
"stylelint": "^16.10.0",
|
||||
"stylelint-config-recess-order": "^5.1.1",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
@ -159,7 +158,7 @@
|
||||
"svgo": "^3.3.2",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.8",
|
||||
"vite": "6.0.0-beta.7",
|
||||
"vite-plugin-cdn-import": "^1.0.1",
|
||||
"vite-plugin-checker": "^0.8.0",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
|
||||
2570
pnpm-lock.yaml
generated
2570
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -14,7 +14,6 @@ import { emitter } from "@/utils/mitt";
|
||||
import LayPanel from "../lay-panel/index.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import Segmented, { type OptionsType } from "@/components/ReSegmented";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
@ -50,9 +49,7 @@ const {
|
||||
if (unref(layoutTheme)) {
|
||||
const layout = unref(layoutTheme).layout;
|
||||
const theme = unref(layoutTheme).theme;
|
||||
toggleTheme({
|
||||
scopeName: `layout-theme-${theme}`
|
||||
});
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
setLayoutModel(layout);
|
||||
}
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ const { title, getLogo } = useNav();
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -6,14 +6,9 @@ import { routerArrays } from "@/layout/types";
|
||||
import { router, resetRouter } from "@/router";
|
||||
import type { themeColorsType } from "../types";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useGlobal, storageLocal } from "@pureadmin/utils";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import {
|
||||
darken,
|
||||
lighten,
|
||||
toggleTheme
|
||||
} from "@pureadmin/theme/dist/browser-utils";
|
||||
import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";
|
||||
|
||||
export function useDataThemeChange() {
|
||||
const { layoutTheme, layout } = useLayout();
|
||||
@ -54,9 +49,7 @@ export function useDataThemeChange() {
|
||||
isClick = true
|
||||
) {
|
||||
layoutTheme.value.theme = theme;
|
||||
toggleTheme({
|
||||
scopeName: `layout-theme-${theme}`
|
||||
});
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
// 如果非isClick，保留之前的themeColor
|
||||
const storageThemeColor = $storage.layout.themeColor;
|
||||
$storage.layout = {
|
||||
|
||||
@ -1,129 +0,0 @@
|
||||
/**
|
||||
* @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
|
||||
*/
|
||||
|
||||
import type { multipleScopeVarsOptions } from "@pureadmin/theme";
|
||||
|
||||
/** 预设主题色 */
|
||||
const themeColors = {
|
||||
/* 亮白色 */
|
||||
light: {
|
||||
subMenuActiveText: "#000000d9",
|
||||
menuBg: "#fff",
|
||||
menuHover: "#f6f6f6",
|
||||
subMenuBg: "#fff",
|
||||
subMenuActiveBg: "#e0ebf6",
|
||||
menuText: "rgb(0 0 0 / 60%)",
|
||||
sidebarLogo: "#fff",
|
||||
menuTitleHover: "#000",
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
/* 道奇蓝 */
|
||||
default: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#001529",
|
||||
menuHover: "rgb(64 145 247 / 15%)",
|
||||
subMenuBg: "#0f0303",
|
||||
subMenuActiveBg: "#4091f7",
|
||||
menuText: "rgb(254 254 254 / 65%)",
|
||||
sidebarLogo: "#002140",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
/* 深紫罗兰色 */
|
||||
saucePurple: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#130824",
|
||||
menuHover: "rgb(105 58 201 / 15%)",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#693ac9",
|
||||
menuText: "#7a80b4",
|
||||
sidebarLogo: "#1f0c38",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#693ac9"
|
||||
},
|
||||
/* 深粉色 */
|
||||
pink: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#28081a",
|
||||
menuHover: "rgb(216 68 147 / 15%)",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#d84493",
|
||||
menuText: "#7a80b4",
|
||||
sidebarLogo: "#3f0d29",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#d84493"
|
||||
},
|
||||
/* 猩红色 */
|
||||
dusk: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#2a0608",
|
||||
menuHover: "rgb(225 60 57 / 15%)",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#e13c39",
|
||||
menuText: "rgb(254 254 254 / 65.1%)",
|
||||
sidebarLogo: "#42090c",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#e13c39"
|
||||
},
|
||||
/* 橙红色 */
|
||||
volcano: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#2b0e05",
|
||||
menuHover: "rgb(232 95 51 / 15%)",
|
||||
subMenuBg: "#0f0603",
|
||||
subMenuActiveBg: "#e85f33",
|
||||
menuText: "rgb(254 254 254 / 65%)",
|
||||
sidebarLogo: "#441708",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#e85f33"
|
||||
},
|
||||
/* 绿宝石 */
|
||||
mingQing: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#032121",
|
||||
menuHover: "rgb(89 191 193 / 15%)",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#59bfc1",
|
||||
menuText: "#7a80b4",
|
||||
sidebarLogo: "#053434",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#59bfc1"
|
||||
},
|
||||
/* 酸橙绿 */
|
||||
auroraGreen: {
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#0b1e15",
|
||||
menuHover: "rgb(96 172 128 / 15%)",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#60ac80",
|
||||
menuText: "#7a80b4",
|
||||
sidebarLogo: "#112f21",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#60ac80"
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 将预设主题色处理成主题插件所需格式
|
||||
*/
|
||||
export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
|
||||
const result = [] as multipleScopeVarsOptions[];
|
||||
Object.keys(themeColors).forEach(key => {
|
||||
result.push({
|
||||
scopeName: `layout-theme-${key}`,
|
||||
varsContent: `
|
||||
$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
|
||||
$menuBg: ${themeColors[key].menuBg} !default;
|
||||
$menuHover: ${themeColors[key].menuHover} !default;
|
||||
$subMenuBg: ${themeColors[key].subMenuBg} !default;
|
||||
$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
|
||||
$menuText: ${themeColors[key].menuText} !default;
|
||||
$sidebarLogo: ${themeColors[key].sidebarLogo} !default;
|
||||
$menuTitleHover: ${themeColors[key].menuTitleHover} !default;
|
||||
$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
|
||||
`
|
||||
} as multipleScopeVarsOptions);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
@ -1,7 +1,8 @@
|
||||
@import "./transition";
|
||||
@import "./element-plus";
|
||||
@import "./sidebar";
|
||||
@import "./dark";
|
||||
@use "theme";
|
||||
@use "transition";
|
||||
@use "element-plus";
|
||||
@use "sidebar";
|
||||
@use "dark";
|
||||
|
||||
/* 自定义全局 CssVar */
|
||||
:root {
|
||||
@ -13,6 +14,16 @@
|
||||
|
||||
/* switch关闭状态下的color 需要时可取用 */
|
||||
--pure-switch-off-color: #a6a6a6;
|
||||
|
||||
/** 主题色 */
|
||||
--pure-theme-sub-menu-active-text: initial;
|
||||
--pure-theme-menu-bg: none;
|
||||
--pure-theme-menu-hover: none;
|
||||
--pure-theme-sub-menu-bg: transparent;
|
||||
--pure-theme-menu-text: initial;
|
||||
--pure-theme-sidebar-logo: none;
|
||||
--pure-theme-menu-title-hover: initial;
|
||||
--pure-theme-menu-active-before: transparent;
|
||||
}
|
||||
|
||||
/* 灰色模式 */
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
font-size: 0;
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
border-right: 1px solid var(--pure-border-color);
|
||||
|
||||
/* 展开动画 */
|
||||
@ -150,11 +150,11 @@
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 50px;
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
|
||||
div,
|
||||
@ -173,15 +173,15 @@
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
@ -204,7 +204,7 @@
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: $sideBarWidth !important;
|
||||
font-size: 14px;
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
}
|
||||
|
||||
/* 有子集的激活菜单左侧小竖条 */
|
||||
@ -218,7 +218,7 @@
|
||||
height: 100%;
|
||||
clear: both;
|
||||
content: "";
|
||||
background-color: $menuActiveBefore;
|
||||
background-color: var(--pure-theme-menu-active-before);
|
||||
transition: all var(--pure-transition-duration) ease-in-out;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@ -253,7 +253,7 @@
|
||||
/* vertical 菜单折叠 */
|
||||
.el-menu--vertical {
|
||||
.el-menu--popup {
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
|
||||
.el-menu-item {
|
||||
span {
|
||||
@ -271,10 +271,10 @@
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -282,23 +282,23 @@
|
||||
.el-menu .el-sub-menu__title {
|
||||
min-width: $sideBarWidth !important;
|
||||
font-size: 14px;
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: $menuText;
|
||||
background-color: $subMenuBg;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: var(--pure-theme-sub-menu-bg);
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
@ -342,15 +342,15 @@
|
||||
}
|
||||
|
||||
.el-menu--popup {
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
|
||||
a > .is-active.submenu-title-noDropdown {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: $menuText;
|
||||
background-color: $subMenuBg;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: var(--pure-theme-sub-menu-bg);
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
@ -358,7 +358,7 @@
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
}
|
||||
}
|
||||
|
||||
@ -366,31 +366,31 @@
|
||||
.el-menu .el-sub-menu__title {
|
||||
min-width: $sideBarWidth !important;
|
||||
font-size: 14px;
|
||||
background-color: $subMenuBg !important;
|
||||
background-color: var(--pure-theme-sub-menu-bg) !important;
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
@ -415,7 +415,7 @@
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
|
||||
.horizontal-header-left {
|
||||
display: flex;
|
||||
@ -440,7 +440,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -458,7 +458,7 @@
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 340px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
|
||||
/* 搜索 */
|
||||
.search-container,
|
||||
@ -473,20 +473,20 @@
|
||||
/* 设置 */
|
||||
.set-icon {
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
background: var(--pure-theme-menu-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-badge {
|
||||
height: 48px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
}
|
||||
|
||||
.globalization {
|
||||
width: 40px;
|
||||
height: 48px;
|
||||
padding: 11px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
@ -497,7 +497,7 @@
|
||||
justify-content: space-around;
|
||||
height: 48px;
|
||||
padding: 10px;
|
||||
color: $subMenuActiveText;
|
||||
color: var(--pure-theme-sub-menu-active-text);
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
@ -522,10 +522,10 @@
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
padding-right: var(--el-menu-base-level-padding);
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -533,7 +533,7 @@
|
||||
.el-sub-menu__title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
|
||||
svg {
|
||||
position: static !important;
|
||||
@ -542,15 +542,15 @@
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
|
||||
i {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: $subMenuActiveText !important;
|
||||
color: var(--pure-theme-sub-menu-active-text) !important;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
}
|
||||
@ -596,7 +596,7 @@ body[layout="vertical"] {
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
background: $sidebarLogo;
|
||||
background: var(--pure-theme-sidebar-logo);
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
|
||||
95
src/style/theme.scss
Normal file
95
src/style/theme.scss
Normal file
@ -0,0 +1,95 @@
|
||||
/* 亮白色 */
|
||||
html[data-theme="light"] {
|
||||
--pure-theme-sub-menu-active-text: #000000d9;
|
||||
--pure-theme-menu-bg: #fff;
|
||||
--pure-theme-menu-hover: #f6f6f6;
|
||||
--pure-theme-sub-menu-bg: #fff;
|
||||
--pure-theme-menu-text: rgb(0 0 0 / 60%);
|
||||
--pure-theme-sidebar-logo: #fff;
|
||||
--pure-theme-menu-title-hover: #000;
|
||||
--pure-theme-menu-active-before: #4091f7;
|
||||
}
|
||||
|
||||
/* 道奇蓝 */
|
||||
html[data-theme="default"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #001529;
|
||||
--pure-theme-menu-hover: rgb(64 145 247 / 15%);
|
||||
--pure-theme-sub-menu-bg: #0f0303;
|
||||
--pure-theme-menu-text: rgb(254 254 254 / 65%);
|
||||
--pure-theme-sidebar-logo: #002140;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #4091f7;
|
||||
}
|
||||
|
||||
/* 深紫罗兰色 */
|
||||
html[data-theme="saucePurple"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #130824;
|
||||
--pure-theme-menu-hover: rgb(105 58 201 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #1f0c38;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #693ac9;
|
||||
}
|
||||
|
||||
/* 深粉色 */
|
||||
html[data-theme="pink"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #28081a;
|
||||
--pure-theme-menu-hover: rgb(216 68 147 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #3f0d29;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #d84493;
|
||||
}
|
||||
|
||||
/* 猩红色 */
|
||||
html[data-theme="dusk"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #2a0608;
|
||||
--pure-theme-menu-hover: rgb(225 60 57 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: rgb(254 254 254 / 65.1%);
|
||||
--pure-theme-sidebar-logo: #42090c;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #e13c39;
|
||||
}
|
||||
|
||||
/* 橙红色 */
|
||||
html[data-theme="volcano"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #2b0e05;
|
||||
--pure-theme-menu-hover: rgb(232 95 51 / 15%);
|
||||
--pure-theme-sub-menu-bg: #0f0603;
|
||||
--pure-theme-menu-text: rgb(254 254 254 / 65%);
|
||||
--pure-theme-sidebar-logo: #441708;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #e85f33;
|
||||
}
|
||||
|
||||
/* 绿宝石 */
|
||||
html[data-theme="mingQing"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #032121;
|
||||
--pure-theme-menu-hover: rgb(89 191 193 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #053434;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #59bfc1;
|
||||
}
|
||||
|
||||
/* 酸橙绿 */
|
||||
html[data-theme="auroraGreen"] {
|
||||
--pure-theme-sub-menu-active-text: #fff;
|
||||
--pure-theme-menu-bg: #0b1e15;
|
||||
--pure-theme-menu-hover: rgb(96 172 128 / 15%);
|
||||
--pure-theme-sub-menu-bg: #000;
|
||||
--pure-theme-menu-text: #7a80b4;
|
||||
--pure-theme-sidebar-logo: #112f21;
|
||||
--pure-theme-menu-title-hover: #fff;
|
||||
--pure-theme-menu-active-before: #60ac80;
|
||||
}
|
||||
@ -131,7 +131,7 @@ getMine().then(res => {
|
||||
|
||||
<style lang="scss">
|
||||
.pure-account-settings {
|
||||
background: $menuBg;
|
||||
background: var(--pure-theme-menu-bg);
|
||||
}
|
||||
|
||||
.pure-account-settings-menu {
|
||||
@ -140,12 +140,12 @@ getMine().then(res => {
|
||||
|
||||
.el-menu-item {
|
||||
height: 48px !important;
|
||||
color: $menuText;
|
||||
color: var(--pure-theme-menu-text);
|
||||
background-color: transparent !important;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
color: var(--pure-theme-menu-title-hover) !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user