From aa662f624a9f4b604ef76fc21bbae3701db9fd37 Mon Sep 17 00:00:00 2001 From: SuperCuteXiaoSi <1531733886@qq.com> Date: Tue, 4 Jan 2022 17:19:38 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E6=B7=BB=E5=8A=A0=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/vite/optimizeDeps.ts | 23 +++--- build/vite/plugin/theme.ts | 100 +++++++++++------------ src/assets/icons/moon.svg | 16 ++++ src/assets/icons/sun.svg | 42 ++++++++++ src/components/Application/AppLocale.vue | 1 + src/components/Application/AppTheme.vue | 63 ++++++++++++++ src/components/Application/index.ts | 2 + src/layouts/components/AppMain/index.vue | 14 ++-- src/layouts/components/Navbart/index.vue | 3 +- src/styles/index.scss | 2 +- src/styles/sidebar.scss | 2 +- src/styles/variables-dark.scss | 47 ++++++----- src/styles/variables-day.scss | 28 ++++--- src/views/useradmin/userlist/index.vue | 2 +- types/index.d.ts | 3 + 15 files changed, 240 insertions(+), 108 deletions(-) create mode 100644 src/assets/icons/moon.svg create mode 100644 src/assets/icons/sun.svg create mode 100644 src/components/Application/AppTheme.vue diff --git a/build/vite/optimizeDeps.ts b/build/vite/optimizeDeps.ts index 9d648c37..863e711b 100644 --- a/build/vite/optimizeDeps.ts +++ b/build/vite/optimizeDeps.ts @@ -1,16 +1,13 @@ -import { DepOptimizationOptions } from 'vite' +import { DepOptimizationOptions } from 'vite'; export function createViteOptimizeDeps(): DepOptimizationOptions { - const viteOptimizeDeps: DepOptimizationOptions = { - // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。 - include: [ - 'element-plus/es/locale/lang/zh-tw', - 'element-plus/es/locale/lang/en', - ], - // 默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。 - entries: [], - // 在预构建中强制排除的依赖项。 - exclude: ['@zougt/vite-plugin-theme-preprocessor/dist/browser-utils'], - } - return viteOptimizeDeps + const viteOptimizeDeps: DepOptimizationOptions = { + // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。 + include: ['element-plus/es/locale/lang/zh-tw', 'element-plus/es/locale/lang/en'], + // 默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。 + entries: [], + // 在预构建中强制排除的依赖项。 + exclude: ['@zougt/vite-plugin-theme-preprocessor/dist/browser-utils'], + }; + return viteOptimizeDeps; } diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts index 09da592c..7716151a 100644 --- a/build/vite/plugin/theme.ts +++ b/build/vite/plugin/theme.ts @@ -3,60 +3,54 @@ * https://github.com/GitOfZGT/vite-plugin-theme-preprocessor */ -// import type { Plugin } from 'vite' +import type { Plugin } from 'vite'; -// import path from 'path' -// import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor' - -// // 此配置暂时禁止使用（原因不支持ts） - -// export function configThemePlugin(): Plugin | Plugin[] { -// const options = { -// scss: { -// multipleScopeVars: [ -// { -// scopeName: 'variables-theme-day', -// path: path.resolve('src/styles/variables-day.scss'), -// }, -// { -// scopeName: 'variables-theme-dark', -// path: path.resolve('src/styles/variables-dark.scss'), -// }, -// ], -// // 默认取 multipleScopeVars[0].scopeName -// defaultScopeName: '', -// // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效 -// extract: false, -// // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir) -// outputDir: '', -// // 会选取defaultScopeName对应的主题css文件在html添加link -// themeLinkTagId: 'theme-link-tag', -// // "head"||"head-prepend" || "body" ||"body-prepend" -// themeLinkTagInjectTo: 'head', -// // 是否对抽取的css文件内对应scopeName的权重类名移除 -// removeCssScopeName: false, -// // 可以自定义css文件名称的函数 -// customThemeCssFileName: (scopeName: string) => scopeName, -// }, -// // less: { -// // multipleScopeVars: [ -// // { -// // scopeName: "theme-default", -// // path: path.resolve("src/theme/default-vars.less"), -// // }, -// // { -// // scopeName: "theme-mauve", -// // path: path.resolve("src/theme/mauve-vars.less"), -// // }, -// // ], -// // }, -// } -// const plugin: Plugin[] = [themePreprocessorPlugin(options)] - -// return plugin -// } +import path from 'path'; +import { themePreprocessorPlugin } from '@zougt/vite-plugin-theme-preprocessor'; +// 此配置暂时禁止使用（原因不支持ts） export function configThemePlugin(): Plugin | Plugin[] { - const plugin: Plugin[] = [] - return plugin + const options = { + scss: { + multipleScopeVars: [ + { + scopeName: 'variables-theme-day', + path: path.resolve('src/styles/variables-day.scss'), + }, + { + scopeName: 'variables-theme-dark', + path: path.resolve('src/styles/variables-dark.scss'), + }, + ], + // 默认取 multipleScopeVars[0].scopeName + defaultScopeName: '', + // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效 + extract: false, + // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir) + outputDir: '', + // 会选取defaultScopeName对应的主题css文件在html添加link + themeLinkTagId: 'theme-link-tag', + // "head"||"head-prepend" || "body" ||"body-prepend" + themeLinkTagInjectTo: 'head', + // 是否对抽取的css文件内对应scopeName的权重类名移除 + removeCssScopeName: false, + // 可以自定义css文件名称的函数 + customThemeCssFileName: (scopeName: string) => scopeName, + }, + // less: { + // multipleScopeVars: [ + // { + // scopeName: "theme-default", + // path: path.resolve("src/theme/default-vars.less"), + // }, + // { + // scopeName: "theme-mauve", + // path: path.resolve("src/theme/mauve-vars.less"), + // }, + // ], + // }, + }; + const plugin: Plugin[] = [themePreprocessorPlugin(options)]; + + return plugin; } diff --git a/src/assets/icons/moon.svg b/src/assets/icons/moon.svg new file mode 100644 index 00000000..e6667f0d --- /dev/null +++ b/src/assets/icons/moon.svg @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/src/assets/icons/sun.svg b/src/assets/icons/sun.svg new file mode 100644 index 00000000..a3997cbf --- /dev/null +++ b/src/assets/icons/sun.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Application/AppLocale.vue b/src/components/Application/AppLocale.vue index a775b5d7..14bd485d 100644 --- a/src/components/Application/AppLocale.vue +++ b/src/components/Application/AppLocale.vue @@ -37,6 +37,7 @@ diff --git a/src/components/Application/AppTheme.vue b/src/components/Application/AppTheme.vue new file mode 100644 index 00000000..bafe4a88 --- /dev/null +++ b/src/components/Application/AppTheme.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts index 7f32b607..2132950f 100644 --- a/src/components/Application/index.ts +++ b/src/components/Application/index.ts @@ -1,4 +1,6 @@ import { withInstall } from '@/utils'; import appLocale from './AppLocale.vue'; +import appTheme from './AppTheme.vue'; export const AppLocale = withInstall(appLocale); +export const AppTheme = withInstall(appTheme); diff --git a/src/layouts/components/AppMain/index.vue b/src/layouts/components/AppMain/index.vue index 5acc12ef..913bdfcc 100644 --- a/src/layouts/components/AppMain/index.vue +++ b/src/layouts/components/AppMain/index.vue @@ -31,13 +31,13 @@ // min-height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight}); overflow: hidden; background-color: #{$appMainBgColor}; - - .page-container { - height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight+40px}); - margin: 20px; - overflow: hidden; - border-radius: 10px; - } + } + .page-container { + height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight+40px}); + margin: 20px; + overflow: hidden; + border-radius: 10px; + background-color: #{$mainContentBg}; } .fixed-header + .app-main { diff --git a/src/layouts/components/Navbart/index.vue b/src/layouts/components/Navbart/index.vue index e0590196..09c24314 100644 --- a/src/layouts/components/Navbart/index.vue +++ b/src/layouts/components/Navbart/index.vue @@ -7,6 +7,7 @@
+
@@ -32,7 +33,7 @@ // import { ref } from 'vue' import Sidebar from '../../components/Sidebar/index.vue'; import Setting from '../../components/Seting/index.vue'; - import { AppLocale } from '@/components/Application'; + import { AppLocale, AppTheme } from '@/components/Application'; import SvgIcon from '@/components/SvgIcon/index.vue'; import { ref } from '@vue/reactivity'; diff --git a/src/styles/index.scss b/src/styles/index.scss index a12d75c7..7db560ec 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,4 @@ -@import './variables-day.scss'; +// @import './variables-day.scss'; @import './transition.scss'; @import './sidebar.scss'; @import './mixin.scss'; diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index a032e44c..32eb55eb 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -63,7 +63,7 @@ } .el-menu-item.is-active { - color: $menuItemActiveText; + color: $menuItemActiveText !important; background-color: $menuItemActiveBg !important; // border-left: #{$menuItemActiveBorderLeft} solid 3px !important; diff --git a/src/styles/variables-dark.scss b/src/styles/variables-dark.scss index 34472898..63c9028d 100644 --- a/src/styles/variables-dark.scss +++ b/src/styles/variables-dark.scss @@ -1,31 +1,40 @@ +// 统一颜色主题 +$mianColor: #ffffff; //主色 +$subColor: #212121; +$subColor1: #151515; + +// 主题背景颜色 +$mainBgColor: #212121; +$mainContentBg: #151515; + +// 主题文字颜色 +$textColor: #c9d1d9; + // 左侧导航栏 $sideBarWidth: 210px; $navBarHeight: 54px; $BreadcrumbHeight: 50px; //面包屑高度 -$menuBg: #212121; // 侧边栏背景颜色 -$menuHover: #212121; // 焦点背景色 -$menuHoverText: #fff; //焦点文字颜色 -$menuBorderLeft: #fff; //左描边背景颜色 -$menuText: #909399; //文字颜色 -$menuActiveText: #fff; //选中的文字颜色 +$menuBg: $mainBgColor; // 侧边栏背景颜色 +$menuHover: #2d2d2d; // 焦点背景色 +$menuHoverText: $mianColor; //焦点文字颜色 +$menuText: $textColor; //文字颜色 +$menuActiveText: $mianColor; //选中的文字颜色 -$menuItemBg: #212121; //二级背景颜色 -$menuItemBorderLeft: #212121; //未选中的背景颜色 -$menuItemText: #909399; //二级文字颜色 -$menuItemHover: #212121; //二级焦点背景颜色 -$menuItemHoverText: #fff; -$menuItemActiveText: #fff; +$menuItemBg: $mainBgColor; //二级背景颜色 +$menuItemBorderLeft: $mainBgColor; //未选中的背景颜色 +$menuItemText: $textColor; //二级文字颜色 +$menuItemHover: #2d2d2d; //二级焦点背景颜色 +$menuItemHoverText: $mianColor; //二级焦点文字颜色 +$menuItemActiveText: $mianColor; $menuItemActiveBg: #2d2d2d; //二级选中背景颜色 -$menuItemActiveBorderLeft: #409eff; //二级左描边背景颜色 +$menuItemActiveBorderLeft: $mianColor; //二级左描边背景颜色 -$appMainBgColor: #f5f6fa; //app-mian背景颜色 -$navBarColor: #151515; //顶部导航栏背景颜色 +$appMainBgColor: #000; //app-mian背景颜色 +$navBarColor: $mainBgColor; //顶部导航栏背景颜色 $navBarBorderBottomColor: #4a4a4a; -$BreadcrumbColor: #151515; //面包屑背景颜色 -$BreadcrumbText: #fff; - -$textColor: #606266; +$BreadcrumbColor: $mainBgColor; //面包屑背景颜色 +$BreadcrumbText: $textColor; :export { menutext: $menuText; diff --git a/src/styles/variables-day.scss b/src/styles/variables-day.scss index 776b1e16..7ed7e2b9 100644 --- a/src/styles/variables-day.scss +++ b/src/styles/variables-day.scss @@ -3,21 +3,27 @@ $mianColor: #409eff; //主色 $subColor: #a5cfff; //浅蓝1 $subColor1: #ecf5ff; //浅蓝2 +// 主题背景颜色 +$mainBgColor: #ffffff; +$mainContentBg: #ffffff; + +// 主题文字颜色 +$textColor: #909399; + // 左侧导航栏 $sideBarWidth: 210px; $navBarHeight: 54px; $BreadcrumbHeight: 50px; //面包屑高度 -$menuBg: #fff; // 侧边栏背景颜色 +$menuBg: $mainBgColor; // 侧边栏背景颜色 $menuHover: #f3f3f3; // 焦点背景色 $menuHoverText: $mianColor; //焦点文字颜色 -$menuBorderLeft: #fff; //左描边背景颜色 -$menuText: #909399; //文字颜色 +$menuText: $textColor; //文字颜色 $menuActiveText: $mianColor; //选中的文字颜色 -$menuItemBg: #fff; //二级背景颜色 -$menuItemBorderLeft: #fff; //二级未选中的背景颜色 -$menuItemText: #909399; //二级文字颜色 +$menuItemBg: $mainBgColor; //二级背景颜色 +$menuItemBorderLeft: $mainBgColor; //二级未选中的背景颜色 +$menuItemText: $textColor; //二级文字颜色 $menuItemHover: #f3f3f3; //二级焦点背景颜色 $menuItemHoverText: $mianColor; //二级焦点文字颜色 $menuItemActiveText: $mianColor; @@ -25,12 +31,10 @@ $menuItemActiveBg: $subColor1; //二级选中背景颜色 $menuItemActiveBorderLeft: $mianColor; //二级左描边背景颜色 $appMainBgColor: #f5f6fa; //app-mian背景颜色 -$navBarColor: #fff; //顶部导航栏背景颜色 -$navBarBorderBottomColor: #fff; -$BreadcrumbColor: #fff; //面包屑背景颜色 -$BreadcrumbText: #606266; - -$textColor: #606266; +$navBarColor: $mainBgColor; //顶部导航栏背景颜色 +$navBarBorderBottomColor: $mainBgColor; +$BreadcrumbColor: $mainBgColor; //面包屑背景颜色 +$BreadcrumbText: $textColor; :export { menutext: $menuText; diff --git a/src/views/useradmin/userlist/index.vue b/src/views/useradmin/userlist/index.vue index 4cabd137..863cd0e6 100644 --- a/src/views/useradmin/userlist/index.vue +++ b/src/views/useradmin/userlist/index.vue @@ -34,4 +34,4 @@ // console.log(useStore()) - + diff --git a/types/index.d.ts b/types/index.d.ts index 65738ea2..31c03ab0 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -3,3 +3,6 @@ declare type RefType = T | null; declare interface Fn { (...arg: T[]): R; } + +// vite-plugin-theme-preprocessor不支持ts,默认导出一个d.ts解决报错 +declare module '@zougt/*';