From de76497e8a62dcf641e386bf7b1615fab2b5bc13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E4=B8=87?= <52823142+Ten-K@users.noreply.github.com> Date: Wed, 30 Mar 2022 12:27:51 +0800 Subject: [PATCH] feat: add vxe-table theme and perf layout theme (#226) feat: add vxe-table theme and perf layout theme --- build/plugins.ts | 40 +------ src/layout/components/setting/index.vue | 28 +++-- src/layout/theme/auroraGreen-vars.scss | 11 -- src/layout/theme/default-vars.scss | 29 ----- src/layout/theme/dusk-vars.scss | 11 -- src/layout/theme/index.ts | 136 ++++++++++++++++++++++++ src/layout/theme/light-vars.scss | 11 -- src/layout/theme/mingQing-vars.scss | 11 -- src/layout/theme/pink-vars.scss | 11 -- src/layout/theme/saucePurple-vars.scss | 11 -- src/layout/theme/volcano-vars.scss | 11 -- src/layout/theme/yellow-vars.scss | 11 -- src/layout/types.ts | 2 +- src/plugins/vxe-table/index.scss | 6 ++ src/plugins/vxe-table/index.ts | 1 + src/style/sidebar.scss | 2 - 16 files changed, 159 insertions(+), 173 deletions(-) delete mode 100644 src/layout/theme/auroraGreen-vars.scss delete mode 100644 src/layout/theme/default-vars.scss delete mode 100644 src/layout/theme/dusk-vars.scss create mode 100644 src/layout/theme/index.ts delete mode 100644 src/layout/theme/light-vars.scss delete mode 100644 src/layout/theme/mingQing-vars.scss delete mode 100644 src/layout/theme/pink-vars.scss delete mode 100644 src/layout/theme/saucePurple-vars.scss delete mode 100644 src/layout/theme/volcano-vars.scss delete mode 100644 src/layout/theme/yellow-vars.scss create mode 100644 src/plugins/vxe-table/index.scss diff --git a/build/plugins.ts b/build/plugins.ts index 4a679c4816..232ca616fd 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -13,6 +13,7 @@ import ElementPlus from "unplugin-element-plus/vite"; import { visualizer } from "rollup-plugin-visualizer"; import removeConsole from "vite-plugin-remove-console"; import themePreprocessorPlugin from "@pureadmin/theme"; +import { genScssMultipleScopeVars } from "/@/layout/theme"; export function getPluginsList(command, VITE_LEGACY) { const prodMock = true; @@ -36,44 +37,7 @@ export function getPluginsList(command, VITE_LEGACY) { // 自定义主题 themePreprocessorPlugin({ scss: { - multipleScopeVars: [ - { - 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: genScssMultipleScopeVars(), // 默认取 multipleScopeVars[0].scopeName defaultScopeName: "", // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效 diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index fed0ea01d5..45480f9710 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -9,7 +9,6 @@ import { useCssModule, getCurrentInstance } from "vue"; -import rgbHex from "rgb-hex"; import { find } from "lodash-unified"; import { getConfig } from "/@/config"; import { useRouter } from "vue-router"; @@ -40,23 +39,23 @@ const instanceConfig = let themeColors = ref>([ // 道奇蓝（默认） - { 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("verticalRef", null); @@ -97,8 +96,8 @@ const settings = reactive({ }); const getThemeColorStyle = computed(() => { - return rgb => { - return { background: `rgb(${rgb})` }; + return color => { + return { background: color }; }; }); @@ -261,8 +260,7 @@ function setLayoutThemeColor(theme: string) { setEpThemeColor(getConfig().EpThemeColor); } else { const colors = find(themeColors.value, { themeColor: theme }); - const color = "#" + rgbHex(colors.rgb); - setEpThemeColor(color); + setEpThemeColor(colors.color); } } @@ -359,7 +357,7 @@ nextTick(() => {
  • { + 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; +} diff --git a/src/layout/theme/light-vars.scss b/src/layout/theme/light-vars.scss deleted file mode 100644 index b33aa013a4..0000000000 --- a/src/layout/theme/light-vars.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* 亮白色 */ -$subMenuActiveText: #409eff; -$menuBg: #fff; -$menuHover: #e0ebf6; -$subMenuBg: #fff; -$subMenuActiveBg: #e0ebf6; -$navTextColor: #7a80b4; -$menuText: #7a80b4; -$sidebarLogo: #fff; -$menuTitleHover: #000; -$menuActiveBefore: #4091f7; diff --git a/src/layout/theme/mingQing-vars.scss b/src/layout/theme/mingQing-vars.scss deleted file mode 100644 index 59ead9f1ae..0000000000 --- a/src/layout/theme/mingQing-vars.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* 绿宝石 */ -$subMenuActiveText: #fff; -$menuBg: #032121; -$menuHover: #59bfc1; -$subMenuBg: #000; -$subMenuActiveBg: #59bfc1; -$navTextColor: #7a80b4; -$menuText: #7a80b4; -$sidebarLogo: #053434; -$menuTitleHover: #fff; -$menuActiveBefore: #59bfc1; diff --git a/src/layout/theme/pink-vars.scss b/src/layout/theme/pink-vars.scss deleted file mode 100644 index 3d39a3a023..0000000000 --- a/src/layout/theme/pink-vars.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* 深粉色 */ -$subMenuActiveText: #fff; -$menuBg: #28081a; -$menuHover: #d84493; -$subMenuBg: #000; -$subMenuActiveBg: #d84493; -$navTextColor: #7a80b4; -$menuText: #7a80b4; -$sidebarLogo: #3f0d29; -$menuTitleHover: #fff; -$menuActiveBefore: #d84493; diff --git a/src/layout/theme/saucePurple-vars.scss b/src/layout/theme/saucePurple-vars.scss deleted file mode 100644 index 0ead258a43..0000000000 --- a/src/layout/theme/saucePurple-vars.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* 深紫罗兰色 */ -$subMenuActiveText: #fff; -$menuBg: #130824; -$menuHover: #693ac9; -$subMenuBg: #000; -$subMenuActiveBg: #693ac9; -$navTextColor: #7a80b4; -$menuText: #7a80b4; -$sidebarLogo: #1f0c38; -$menuTitleHover: #fff; -$menuActiveBefore: #693ac9; diff --git a/src/layout/theme/volcano-vars.scss b/src/layout/theme/volcano-vars.scss deleted file mode 100644 index 65dd0dd73f..0000000000 --- a/src/layout/theme/volcano-vars.scss +++ /dev/null @@ -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; diff --git a/src/layout/theme/yellow-vars.scss b/src/layout/theme/yellow-vars.scss deleted file mode 100644 index 102315328e..0000000000 --- a/src/layout/theme/yellow-vars.scss +++ /dev/null @@ -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; diff --git a/src/layout/types.ts b/src/layout/types.ts index 405f8d827b..afd665e8ff 100644 --- a/src/layout/types.ts +++ b/src/layout/types.ts @@ -79,7 +79,7 @@ export type childrenType = { }; export type themeColorsType = { - rgb: string; + color: string; themeColor: string; }; diff --git a/src/plugins/vxe-table/index.scss b/src/plugins/vxe-table/index.scss new file mode 100644 index 0000000000..f34fd0cb66 --- /dev/null +++ b/src/plugins/vxe-table/index.scss @@ -0,0 +1,6 @@ +@import "vxe-table/styles/variable.scss"; +@import "vxe-table/styles/modules.scss"; + +i { + border-color: initial; +} diff --git a/src/plugins/vxe-table/index.ts b/src/plugins/vxe-table/index.ts index 18d229541e..46daf36c4a 100644 --- a/src/plugins/vxe-table/index.ts +++ b/src/plugins/vxe-table/index.ts @@ -1,4 +1,5 @@ import "xe-utils"; +import "./index.scss"; import XEUtils from "xe-utils"; import { App, unref } from "vue"; import { i18n } from "/@/plugins/i18n"; diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index 19fa14b70c..f94a53d169 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -1,5 +1,3 @@ -@import "../layout/theme/default-vars.scss"; - @mixin merge-style( /* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth ) {