mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
feat: add vxe-table theme and perf layout theme (#226)
feat: add vxe-table theme and perf layout theme
This commit is contained in:
一万
GitHub
parent
9cdfe80143
commit
de76497e8a
@ -13,6 +13,7 @@ import ElementPlus from "unplugin-element-plus/vite";
|
|||||||
import { visualizer } from "rollup-plugin-visualizer";
|
import { visualizer } from "rollup-plugin-visualizer";
|
||||||
import removeConsole from "vite-plugin-remove-console";
|
import removeConsole from "vite-plugin-remove-console";
|
||||||
import themePreprocessorPlugin from "@pureadmin/theme";
|
import themePreprocessorPlugin from "@pureadmin/theme";
|
||||||
|
import { genScssMultipleScopeVars } from "/@/layout/theme";
|
||||||
|
|
||||||
export function getPluginsList(command, VITE_LEGACY) {
|
export function getPluginsList(command, VITE_LEGACY) {
|
||||||
const prodMock = true;
|
const prodMock = true;
|
||||||
@ -36,44 +37,7 @@ export function getPluginsList(command, VITE_LEGACY) {
|
|||||||
// 自定义主题
|
// 自定义主题
|
||||||
themePreprocessorPlugin({
|
themePreprocessorPlugin({
|
||||||
scss: {
|
scss: {
|
||||||
multipleScopeVars: [
|
multipleScopeVars: genScssMultipleScopeVars(),
|
||||||
{
|
|
||||||
scopeName: "layout-theme-default",
|
|
||||||
path: "src/layout/theme/default-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-light",
|
|
||||||
path: "src/layout/theme/light-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-dusk",
|
|
||||||
path: "src/layout/theme/dusk-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-volcano",
|
|
||||||
path: "src/layout/theme/volcano-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-yellow",
|
|
||||||
path: "src/layout/theme/yellow-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-mingQing",
|
|
||||||
path: "src/layout/theme/mingQing-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-auroraGreen",
|
|
||||||
path: "src/layout/theme/auroraGreen-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-pink",
|
|
||||||
path: "src/layout/theme/pink-vars.scss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scopeName: "layout-theme-saucePurple",
|
|
||||||
path: "src/layout/theme/saucePurple-vars.scss"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
// 默认取 multipleScopeVars[0].scopeName
|
// 默认取 multipleScopeVars[0].scopeName
|
||||||
defaultScopeName: "",
|
defaultScopeName: "",
|
||||||
// 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
|
// 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
|
||||||
|
|||||||
@ -9,7 +9,6 @@ import {
|
|||||||
useCssModule,
|
useCssModule,
|
||||||
getCurrentInstance
|
getCurrentInstance
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import rgbHex from "rgb-hex";
|
|
||||||
import { find } from "lodash-unified";
|
import { find } from "lodash-unified";
|
||||||
import { getConfig } from "/@/config";
|
import { getConfig } from "/@/config";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
@ -40,23 +39,23 @@ const instanceConfig =
|
|||||||
|
|
||||||
let themeColors = ref<Array<themeColorsType>>([
|
let themeColors = ref<Array<themeColorsType>>([
|
||||||
// 道奇蓝（默认）
|
// 道奇蓝（默认）
|
||||||
{ rgb: "27, 42, 71", themeColor: "default" },
|
{ color: "#1b2a47", themeColor: "default" },
|
||||||
// 亮白色
|
// 亮白色
|
||||||
{ rgb: "255, 255, 255", themeColor: "light" },
|
{ color: "#ffffff", themeColor: "light" },
|
||||||
// 猩红色
|
// 猩红色
|
||||||
{ rgb: "245, 34, 45", themeColor: "dusk" },
|
{ color: "#f5222d", themeColor: "dusk" },
|
||||||
// 橙红色
|
// 橙红色
|
||||||
{ rgb: "250, 84, 28", themeColor: "volcano" },
|
{ color: "#fa541c", themeColor: "volcano" },
|
||||||
// 金色
|
// 金色
|
||||||
{ rgb: "250, 219, 20", themeColor: "yellow" },
|
{ color: "#fadb14", themeColor: "yellow" },
|
||||||
// 绿宝石
|
// 绿宝石
|
||||||
{ rgb: "19, 194, 194", themeColor: "mingQing" },
|
{ color: "#13c2c2", themeColor: "mingQing" },
|
||||||
// 酸橙绿
|
// 酸橙绿
|
||||||
{ rgb: "82, 196, 26", themeColor: "auroraGreen" },
|
{ color: "#52c41a", themeColor: "auroraGreen" },
|
||||||
// 深粉色
|
// 深粉色
|
||||||
{ rgb: "235, 47, 150", themeColor: "pink" },
|
{ color: "#eb2f96", themeColor: "pink" },
|
||||||
// 深紫罗兰色
|
// 深紫罗兰色
|
||||||
{ rgb: "114, 46, 209", themeColor: "saucePurple" }
|
{ color: "#722ed1", themeColor: "saucePurple" }
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
|
const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
|
||||||
@ -97,8 +96,8 @@ const settings = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const getThemeColorStyle = computed(() => {
|
const getThemeColorStyle = computed(() => {
|
||||||
return rgb => {
|
return color => {
|
||||||
return { background: `rgb(${rgb})` };
|
return { background: color };
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -261,8 +260,7 @@ function setLayoutThemeColor(theme: string) {
|
|||||||
setEpThemeColor(getConfig().EpThemeColor);
|
setEpThemeColor(getConfig().EpThemeColor);
|
||||||
} else {
|
} else {
|
||||||
const colors = find(themeColors.value, { themeColor: theme });
|
const colors = find(themeColors.value, { themeColor: theme });
|
||||||
const color = "#" + rgbHex(colors.rgb);
|
setEpThemeColor(colors.color);
|
||||||
setEpThemeColor(color);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -359,7 +357,7 @@ nextTick(() => {
|
|||||||
<li
|
<li
|
||||||
v-for="(item, index) in themeColors"
|
v-for="(item, index) in themeColors"
|
||||||
:key="index"
|
:key="index"
|
||||||
:style="getThemeColorStyle(item.rgb)"
|
:style="getThemeColorStyle(item.color)"
|
||||||
@click="setLayoutThemeColor(item.themeColor)"
|
@click="setLayoutThemeColor(item.themeColor)"
|
||||||
>
|
>
|
||||||
<el-icon
|
<el-icon
|
||||||
|
|||||||
@ -1,11 +0,0 @@
|
|||||||
/* 酸橙绿 */
|
|
||||||
$subMenuActiveText: #fff;
|
|
||||||
$menuBg: #0b1e15;
|
|
||||||
$menuHover: #60ac80;
|
|
||||||
$subMenuBg: #000;
|
|
||||||
$subMenuActiveBg: #60ac80;
|
|
||||||
$navTextColor: #7a80b4;
|
|
||||||
$menuText: #7a80b4;
|
|
||||||
$sidebarLogo: #112f21;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #60ac80;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
/**
|
|
||||||
* 道奇蓝（默认）
|
|
||||||
* 此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升
|
|
||||||
* 同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* 菜单选中后字体样式 */
|
|
||||||
$subMenuActiveText: #fff !default;
|
|
||||||
|
|
||||||
/* 菜单背景 */
|
|
||||||
$menuBg: #001529 !default;
|
|
||||||
|
|
||||||
/* 鼠标覆盖到菜单时的背景 */
|
|
||||||
$menuHover: #4091f7 !default;
|
|
||||||
|
|
||||||
/* 子菜单背景 */
|
|
||||||
$subMenuBg: #0f0303 !default;
|
|
||||||
|
|
||||||
/* 有无子集的激活菜单背景 */
|
|
||||||
$subMenuActiveBg: #4091f7 !default;
|
|
||||||
$navTextColor: #fff !default;
|
|
||||||
$menuText: rgb(254 254 254 / 65%) !default;
|
|
||||||
|
|
||||||
/* logo背景颜色 */
|
|
||||||
$sidebarLogo: #002140 !default;
|
|
||||||
|
|
||||||
/* 鼠标覆盖到菜单时的字体颜色 */
|
|
||||||
$menuTitleHover: #fff !default;
|
|
||||||
$menuActiveBefore: #4091f7 !default;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 猩红色 */
|
|
||||||
$subMenuActiveText: #fff;
|
|
||||||
$menuBg: #2a0608;
|
|
||||||
$menuHover: #e13c39;
|
|
||||||
$subMenuBg: #000;
|
|
||||||
$subMenuActiveBg: #e13c39;
|
|
||||||
$navTextColor: red;
|
|
||||||
$menuText: rgb(254 254 254 / 65.1%);
|
|
||||||
$sidebarLogo: #42090c;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #e13c39;
|
|
||||||
136
src/layout/theme/index.ts
Normal file
136
src/layout/theme/index.ts
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
const themeColors = {
|
||||||
|
default: {
|
||||||
|
color: "#409EFF",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#001529",
|
||||||
|
menuHover: "#4091f7",
|
||||||
|
subMenuBg: "#0f0303",
|
||||||
|
subMenuActiveBg: "#4091f7",
|
||||||
|
navTextColor: "#fff",
|
||||||
|
menuText: "rgb(254 254 254 / 65%)",
|
||||||
|
sidebarLogo: "#002140",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#4091f7"
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
color: "#409EFF",
|
||||||
|
subMenuActiveText: "#409eff",
|
||||||
|
menuBg: "#fff",
|
||||||
|
menuHover: "#e0ebf6",
|
||||||
|
subMenuBg: "#fff",
|
||||||
|
subMenuActiveBg: "#e0ebf6",
|
||||||
|
navTextColor: "#7a80b4",
|
||||||
|
menuText: "#7a80b4",
|
||||||
|
sidebarLogo: "#fff",
|
||||||
|
menuTitleHover: "#000",
|
||||||
|
menuActiveBefore: "#4091f7"
|
||||||
|
},
|
||||||
|
dusk: {
|
||||||
|
color: "#f5222d",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#2a0608",
|
||||||
|
menuHover: "#e13c39",
|
||||||
|
subMenuBg: "#000",
|
||||||
|
subMenuActiveBg: "#e13c39",
|
||||||
|
navTextColor: "#red",
|
||||||
|
menuText: "rgb(254 254 254 / 65.1%)",
|
||||||
|
sidebarLogo: "#42090c",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#e13c39"
|
||||||
|
},
|
||||||
|
volcano: {
|
||||||
|
color: "#fa541c",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#2b0e05",
|
||||||
|
menuHover: "#e85f33",
|
||||||
|
subMenuBg: "#0f0603",
|
||||||
|
subMenuActiveBg: "#e85f33",
|
||||||
|
navTextColor: "#fff",
|
||||||
|
menuText: "rgb(254 254 254 / 65%)",
|
||||||
|
sidebarLogo: "#441708",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#e85f33"
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
color: "#fadb14",
|
||||||
|
subMenuActiveText: "#d25f00",
|
||||||
|
menuBg: "#2b2503",
|
||||||
|
menuHover: "#f6da4d",
|
||||||
|
subMenuBg: "#0f0603",
|
||||||
|
subMenuActiveBg: "#f6da4d",
|
||||||
|
navTextColor: "#fff",
|
||||||
|
menuText: "rgb(254 254 254 / 65%)",
|
||||||
|
sidebarLogo: "#443b05",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#f6da4d"
|
||||||
|
},
|
||||||
|
mingQing: {
|
||||||
|
color: "#13c2c2",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#032121",
|
||||||
|
menuHover: "#59bfc1",
|
||||||
|
subMenuBg: "#000",
|
||||||
|
subMenuActiveBg: "#59bfc1",
|
||||||
|
navTextColor: "#7a80b4",
|
||||||
|
menuText: "#7a80b4",
|
||||||
|
sidebarLogo: "#053434",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#59bfc1"
|
||||||
|
},
|
||||||
|
auroraGreen: {
|
||||||
|
color: "#52c41a",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#0b1e15",
|
||||||
|
menuHover: "#60ac80",
|
||||||
|
subMenuBg: "#000",
|
||||||
|
subMenuActiveBg: "#60ac80",
|
||||||
|
navTextColor: "#7a80b4",
|
||||||
|
menuText: "#7a80b4",
|
||||||
|
sidebarLogo: "#112f21",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#60ac80"
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
color: "#eb2f96",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#28081a",
|
||||||
|
menuHover: "#d84493",
|
||||||
|
subMenuBg: "#000",
|
||||||
|
subMenuActiveBg: "#d84493",
|
||||||
|
navTextColor: "#7a80b4",
|
||||||
|
menuText: "#7a80b4",
|
||||||
|
sidebarLogo: "#3f0d29",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#d84493"
|
||||||
|
},
|
||||||
|
saucePurple: {
|
||||||
|
color: "#722ed1",
|
||||||
|
subMenuActiveText: "#fff",
|
||||||
|
menuBg: "#130824",
|
||||||
|
menuHover: "#693ac9",
|
||||||
|
subMenuBg: "#000",
|
||||||
|
subMenuActiveBg: "#693ac9",
|
||||||
|
navTextColor: "#7a80b4",
|
||||||
|
menuText: "#7a80b4",
|
||||||
|
sidebarLogo: "#1f0c38",
|
||||||
|
menuTitleHover: "#fff",
|
||||||
|
menuActiveBefore: "#693ac9"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
type MultipleScopeVarsItem = {
|
||||||
|
scopeName: string;
|
||||||
|
path: string;
|
||||||
|
varsContent: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
|
||||||
|
const result = [] as MultipleScopeVarsItem[];
|
||||||
|
Object.keys(themeColors).forEach(key => {
|
||||||
|
result.push({
|
||||||
|
scopeName: `layout-theme-${key}`,
|
||||||
|
varsContent: `$primary-color: ${themeColors[key].color} !default;$vxe-primary-color: $primary-color;$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;$navTextColor: ${themeColors[key].navTextColor} !default;$menuText: ${themeColors[key].menuText} !default;$sidebarLogo: ${themeColors[key].sidebarLogo} !default;$menuTitleHover: ${themeColors[key].menuTitleHover} !default;$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;`
|
||||||
|
} as MultipleScopeVarsItem);
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 亮白色 */
|
|
||||||
$subMenuActiveText: #409eff;
|
|
||||||
$menuBg: #fff;
|
|
||||||
$menuHover: #e0ebf6;
|
|
||||||
$subMenuBg: #fff;
|
|
||||||
$subMenuActiveBg: #e0ebf6;
|
|
||||||
$navTextColor: #7a80b4;
|
|
||||||
$menuText: #7a80b4;
|
|
||||||
$sidebarLogo: #fff;
|
|
||||||
$menuTitleHover: #000;
|
|
||||||
$menuActiveBefore: #4091f7;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 绿宝石 */
|
|
||||||
$subMenuActiveText: #fff;
|
|
||||||
$menuBg: #032121;
|
|
||||||
$menuHover: #59bfc1;
|
|
||||||
$subMenuBg: #000;
|
|
||||||
$subMenuActiveBg: #59bfc1;
|
|
||||||
$navTextColor: #7a80b4;
|
|
||||||
$menuText: #7a80b4;
|
|
||||||
$sidebarLogo: #053434;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #59bfc1;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 深粉色 */
|
|
||||||
$subMenuActiveText: #fff;
|
|
||||||
$menuBg: #28081a;
|
|
||||||
$menuHover: #d84493;
|
|
||||||
$subMenuBg: #000;
|
|
||||||
$subMenuActiveBg: #d84493;
|
|
||||||
$navTextColor: #7a80b4;
|
|
||||||
$menuText: #7a80b4;
|
|
||||||
$sidebarLogo: #3f0d29;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #d84493;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 深紫罗兰色 */
|
|
||||||
$subMenuActiveText: #fff;
|
|
||||||
$menuBg: #130824;
|
|
||||||
$menuHover: #693ac9;
|
|
||||||
$subMenuBg: #000;
|
|
||||||
$subMenuActiveBg: #693ac9;
|
|
||||||
$navTextColor: #7a80b4;
|
|
||||||
$menuText: #7a80b4;
|
|
||||||
$sidebarLogo: #1f0c38;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #693ac9;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 橙红色 */
|
|
||||||
$subMenuActiveText: #fff;
|
|
||||||
$menuBg: #2b0e05;
|
|
||||||
$menuHover: #e85f33;
|
|
||||||
$subMenuBg: #0f0603;
|
|
||||||
$subMenuActiveBg: #e85f33;
|
|
||||||
$navTextColor: #fff;
|
|
||||||
$menuText: rgb(254 254 254 / 65%);
|
|
||||||
$sidebarLogo: #441708;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #e85f33;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
/* 金色 */
|
|
||||||
$subMenuActiveText: #d25f00;
|
|
||||||
$menuBg: #2b2503;
|
|
||||||
$menuHover: #f6da4d;
|
|
||||||
$subMenuBg: #0f0603;
|
|
||||||
$subMenuActiveBg: #f6da4d;
|
|
||||||
$navTextColor: #fff;
|
|
||||||
$menuText: rgb(254 254 254 / 65%);
|
|
||||||
$sidebarLogo: #443b05;
|
|
||||||
$menuTitleHover: #fff;
|
|
||||||
$menuActiveBefore: #f6da4d;
|
|
||||||
@ -79,7 +79,7 @@ export type childrenType = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export type themeColorsType = {
|
export type themeColorsType = {
|
||||||
rgb: string;
|
color: string;
|
||||||
themeColor: string;
|
themeColor: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
6
src/plugins/vxe-table/index.scss
Normal file
6
src/plugins/vxe-table/index.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@import "vxe-table/styles/variable.scss";
|
||||||
|
@import "vxe-table/styles/modules.scss";
|
||||||
|
|
||||||
|
i {
|
||||||
|
border-color: initial;
|
||||||
|
}
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import "xe-utils";
|
import "xe-utils";
|
||||||
|
import "./index.scss";
|
||||||
import XEUtils from "xe-utils";
|
import XEUtils from "xe-utils";
|
||||||
import { App, unref } from "vue";
|
import { App, unref } from "vue";
|
||||||
import { i18n } from "/@/plugins/i18n";
|
import { i18n } from "/@/plugins/i18n";
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
@import "../layout/theme/default-vars.scss";
|
|
||||||
|
|
||||||
@mixin merge-style(
|
@mixin merge-style(
|
||||||
/* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
|
/* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
|
||||||
) {
|
) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user