diff --git a/CHANGELOG.md b/CHANGELOG.md index d039287..dab4829 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,17 @@ 🎉🎉🔥 `vue-prev-admin` 基于 vue2.x + webpack + element ui，适配手机、平板、pc 的后台开源免费模板库（vue3.x 请切换 master 分支） +## 1.2.0 + +`2022.12.06` + +- 🎉 新增 版本升级提示 +- 🎉 新增 主题色修改 +- 🎉 新增 深色模式 +- 🐞 优化 外链界面 `/src/layout/routerView/link.vue` +- 🐞 修复 `菜单水平折叠` 刷新界面还原默认值问题 +- 💔 移除 `vue.config.js` 打包加时间戳方法，因为打包报错了 + ## 1.1.1 `2022.11.17` diff --git a/README.md b/README.md index 6c88e07..f51a6ce 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,9 @@ #### ⚡ 使用说明 -建议使用 cnpm，因为 yarn 有时会报错。`npm install` 安装报错的话，请使用 `cnpm`。 +建议使用 cnpm，因为 yarn 有时会报错。`npm install` 安装报错的话，请使用 `cnpm install`。 + +> 注意：`node` 需大于 `12.xxx` 小于等于 `v16.14.0`，否则安装依赖将报错。 ```bash # 克隆项目 @@ -60,24 +62,30 @@ cnpm run dev cnpm run build ``` +#### 📚 开发文档 + +- 查看开发文档：vue-next-admin-doc + #### 💯 学习交流加 QQ 群 -- 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！ -- 查看开发文档、vue-next-admin 开发文档正在编写中... -- 群号码： - 1 群：665452019 - 2 群：766356862 - 3 群：795345435 +> 若加群了没同意（一般秒过），那就是群满了（500 人群），请换一个群试试。群会定期清理半年（6 个月）未发言的群友，资源有限，请谅解。建议勿加多群，可能会误伤！微信群由于只有 `7天有效` 就不放这里了。 + +- 1 群：665452019 +- 2 群：766356862 +- 3 群：795345435 +- 4 群：736626228 - vue-next-admin 讨论群1 + vue-next-admin 讨论群1 - vue-next-admin 讨论群2 + vue-next-admin 讨论群2 - vue-next-admin 讨论群3 + vue-next-admin 讨论群3 + + vue-next-admin 讨论群4 #### 💒 集成后端 diff --git a/package.json b/package.json index 56e5863..8382e6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-prev-admin", - "version": "1.1.1", + "version": "1.2.0", "private": true, "description": "vue2 webpack admin template", "author": "lyt_20201208", diff --git a/src/App.vue b/src/App.vue index bb41679..193f556 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,21 +2,34 @@
+
+ + diff --git a/src/layout/upgrade/index.vue b/src/layout/upgrade/index.vue new file mode 100644 index 0000000..e2b2c6e --- /dev/null +++ b/src/layout/upgrade/index.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/src/router/index.js b/src/router/index.js index de31097..261d6ff 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -186,7 +186,6 @@ export function adminUser(router, to, next) { store.dispatch('routesList/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles)); dynamicRoutes[0].children = res.data; const awaitRoute = await dynamicRouter(dynamicRoutes); - console.log(awaitRoute); [...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => { router.addRoute({ ...route }); }); diff --git a/src/store/modules/themeConfig.js b/src/store/modules/themeConfig.js index efb7af9..93b1f62 100644 --- a/src/store/modules/themeConfig.js +++ b/src/store/modules/themeConfig.js @@ -9,6 +9,33 @@ const themeConfigModule = { // 是否开启布局配置抽屉 isDrawer: false, + /** + * 全局主题 + */ + // 默认 primary 主题颜色 + primary: '#409eff', + // 是否开启深色模式 + isIsDark: false, + + /** + * 菜单 / 顶栏 + * 请注意： + * 需要同时修改 `/@/theme/common/var.scss` 对应的值， + * 不提供像 vue-next-admin 一样的实现 + */ + // 默认顶栏导航背景颜色 + topBar: '#ffffff', + // 默认顶栏导航字体颜色 + topBarColor: '#606266', + // 默认菜单导航背景颜色 + menuBar: '#545c64', + // 默认菜单导航字体颜色 + menuBarColor: '#eaeaea', + // 默认分栏菜单背景颜色 + columnsMenuBar: '#545c64', + // 默认分栏菜单字体颜色 + columnsMenuBarColor: '#e6e6e6', + /** * 界面设置 */ diff --git a/src/theme/app.scss b/src/theme/app.scss index 8a6bfe2..35a500f 100644 --- a/src/theme/app.scss +++ b/src/theme/app.scss @@ -7,12 +7,40 @@ outline: none; } +:root { + --prev-bg-menuBar: #545c64; + --prev-bg-menuBarColor: #eaeaea; + --prev-bg-topBar: #ffffff; + --prev-bg-topBarColor: #606266; + --prev-bg-columnsMenuBar: #545c64; + --prev-bg-columnsMenuBarColor: #e6e6e6; + --prev-bg-main-color: #f8f8f8; + --prev-bg-color: #f5f7fa; + --prev-bg-white: #ffffff; + --prev-color-primary: #409eff; + --prev-color-text-white: #ffffff; + --prev-color-text-black: #000000; + --prev-color-text-primary: #303133; + --prev-color-text-regular: #606266; + --prev-color-text-secondary: #909399; + --prev-color-text-placeholder: #c0c4cc; + --prev-color-hover: rgba(0, 0, 0, 0.04); + --prev-color-seting-main: #e9eef3; + --prev-color-seting-aside: #d3dce6; + --prev-color-seting-header: #b3c0d1; + --prev-border-color-hover: #c0c4cc; + --prev-border-color-base: #dcdfe6; + --prev-border-color-light: #e4e7ed; + --prev-border-color-lighter: #ebeef5; + --prev-border-color-extra-light: #f2f6fc; +} + html, body, #app { width: 100%; height: 100%; - background-color: var(--color-bg); + background-color: var(--prev-bg-main-color); font-size: 14px; } @@ -22,7 +50,7 @@ body, width: 100%; height: 100%; .layout-aside { - background: var(--bg-menuBar); + background: var(--prev-bg-menuBar); box-shadow: 2px 0 6px rgb(0 21 41 / 1%); height: inherit; position: relative; @@ -41,17 +69,17 @@ body, padding: 0 !important; overflow: hidden; width: 100%; - background-color: #f8f8f8; + background-color: var(--prev-bg-main-color); } .el-scrollbar { width: 100%; } .layout-view-bg-white { - background: white; + background: var(--prev-bg-white); width: 100%; height: 100%; border-radius: 4px; - border: 1px solid #ebeef5; + border: 1px solid var(--prev-border-color-lighter); } .layout-el-aside-br-color { border-right: 1px solid rgb(238, 238, 238); @@ -85,26 +113,10 @@ body, } } -/* element plus 全局样式 -------------------------------- */ -.layout-breadcrumb-seting { - .el-drawer__header { - padding: 0 15px !important; - height: 50px; - display: flex; - align-items: center; - margin-bottom: 0 !important; - border-bottom: 1px solid rgb(230, 230, 230); - } - .el-divider { - background-color: rgb(230, 230, 230); - } -} - /* 进度条颜色 ------------------------------- */ #nprogress .bar { - background: var(--color-primary) !important; + background: var(--prev-color-primary) !important; } /* flex 弹性布局 @@ -158,19 +170,19 @@ body, /* 颜色值 ------------------------------- */ .color-primary { - color: var(--color-primary); + color: var(--prev-color-primary); } .color-success { - color: var(--color-success); + color: var(--prev-color-success); } .color-warning { - color: var(--color-warning); + color: var(--prev-color-warning); } .color-danger { - color: var(--color-danger); + color: var(--prev-color-danger); } .color-info { - color: var(--color-info); + color: var(--prev-color-info); } /* 溢出省略号 diff --git a/src/theme/base.scss b/src/theme/base.scss index ed9216f..62bc3fc 100644 --- a/src/theme/base.scss +++ b/src/theme/base.scss @@ -1,2 +1 @@ @import 'common/transition.scss'; -@import 'common/var.scss'; diff --git a/src/theme/common/transition.scss b/src/theme/common/transition.scss index 8c69b03..64dcfad 100644 --- a/src/theme/common/transition.scss +++ b/src/theme/common/transition.scss @@ -86,3 +86,17 @@ opacity: 1; } } + +/* 左右左 link.vue +------------------------------- */ +@keyframes toRight { + 0% { + left: -5px; + } + 50% { + left: 100%; + } + 100% { + left: -5px; + } +} diff --git a/src/theme/common/var.scss b/src/theme/common/var.scss deleted file mode 100644 index 0a33ce9..0000000 --- a/src/theme/common/var.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* 定义初始颜色 -------------------------------- */ -$--color-primary: #409eff !default; -$--color-whites: #ffffff !default; -$--color-blacks: #000000 !default; -$--color-bg: #f8f8f8 !default; -$--bg-menuBar: #545c64; -$--bg-menuBarColor: #eaeaea; -$--bg-topBar: #ffffff; -$--bg-topBarColor: #606266; -$--bg-columnsMenuBar: #545c64; -$--bg-columnsMenuBarColor: #e6e6e6; - -/* 赋值给:root -------------------------------- */ -:root { - --color-primary: #{$--color-primary}; - --color-whites: #{$--color-whites}; - --color-blacks: #{$--color-blacks}; - --color-bg: #{$--color-bg}; - --bg-menuBar: #{$--bg-menuBar}; - --bg-menuBarColor: #{$--bg-menuBarColor}; - --bg-topBar: #{$--bg-topBar}; - --bg-topBarColor: #{$--bg-topBarColor}; - --bg-columnsMenuBar: #{$--bg-columnsMenuBar}; - --bg-columnsMenuBarColor: #{$--bg-columnsMenuBarColor}; -} diff --git a/src/theme/dark.scss b/src/theme/dark.scss new file mode 100644 index 0000000..a866a7b --- /dev/null +++ b/src/theme/dark.scss @@ -0,0 +1,107 @@ +/* 深色模式样式 +------------------------------- */ +[data-theme='dark'] { + --prev-bg-menuBar: #191919 !important; + --prev-bg-menuBarColor: #dadada !important; + --prev-bg-topBar: #191919 !important; + --prev-bg-topBarColor: #dadada !important; + --prev-bg-columnsMenuBar: #191919 !important; + --prev-bg-columnsMenuBarColor: #dadada !important; + --prev-bg-main-color: #1f1f1f !important; + --prev-bg-color: rgba(0, 0, 0, 0.3) !important; + --prev-bg-white: #191919 !important; + --prev-color-text-black: #ffffff !important; + --prev-color-text-primary: #dadada !important; + --prev-color-text-regular: #dadada !important; + --prev-color-text-secondary: #a3a3a3 !important; + --prev-color-hover: rgba(0, 0, 0, 0.3) !important; + --prev-color-seting-main: #505050 !important; + --prev-color-seting-aside: #3c3c3c !important; + --prev-color-seting-header: #303030 !important; + --prev-border-color-hover: #616161 !important; + --prev-border-color-base: #333333 !important; + --prev-border-color-light: #333333 !important; + --prev-border-color-lighter: #333333 !important; + --prev-border-color-extra-light: #333333 !important; + + // menu + .layout-aside { + border-right: 1px solid var(--prev-border-color-lighter) !important; + } + + // drawer + .el-drawer { + border-left: 1px solid var(--prev-border-color-lighter) !important; + } + + // button + .el-button--default { + background: var(--prev-bg-white); + color: var(--prev-color-text-primary); + border-color: var(--prev-border-color-lighter); + &:hover, + &:focus { + color: var(--prev-color-primary) !important; + background: var(--prev-color-primary-light-8) !important; + border-color: var(--prev-color-primary-light-6) !important; + } + &:focus { + border-color: var(--prev-color-primary-light-1) !important; + } + &:active { + border-color: var(--prev-color-primary-light-6) !important; + } + } + + // tag + .el-tag.el-tag--info { + background-color: var(--prev-bg-white) !important; + border-color: var(--prev-border-color-light) !important; + color: var(--prev-color-text-regular) !important; + } + + // switch + .el-switch__core { + border-color: var(--prev-border-color-base) !important; + background-color: var(--prev-border-color-base) !important; + } + + // TimePicker + .el-time-spinner__item.active:not(.disabled) { + color: var(--prev-color-primary) !important; + } + + // date + .el-date-table td.in-range div, + .el-date-table td.in-range div:hover, + .el-date-table.is-week-mode .el-date-table__row.current div, + .el-date-table.is-week-mode .el-date-table__row:hover div, + .el-date-table td.selected div, + .el-month-table td.in-range div, + .el-month-table td.in-range div:hover { + background-color: var(--prev-bg-color) !important; + } + + // transfer + .el-transfer-panel, + .el-transfer-panel .el-transfer-panel__header { + background-color: var(--prev-bg-color) !important; + } + + // loading + .el-loading-mask { + background-color: var(--prev-bg-color) !important; + } + + // dropdown + .el-dropdown-menu__item:focus, + .el-dropdown-menu__item:not(.is-disabled):hover { + background-color: var(--prev-color-hover) !important; + } + + // dialog + .el-dialog, + .el-calendar { + border: 1px solid var(--prev-border-color-lighter); + } +} diff --git a/src/theme/element.scss b/src/theme/element.scss index 3879ff6..af9b2dd 100644 --- a/src/theme/element.scss +++ b/src/theme/element.scss @@ -1,5 +1,3 @@ -@import 'mixins/function.scss'; - /* 防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度） ------------------------------- */ .el-scrollbar { @@ -46,27 +44,10 @@ margin-right: 5px; } -/* Drawer 抽屉 -------------------------------- */ -.el-drawer__header { - margin-bottom: 0 !important; - padding: 14px 15px !important; - border-bottom: 1px solid #ebeef5; - color: #333333 !important; -} -.el-drawer__body { - width: 100%; - height: 100%; - overflow: auto; -} - /* Dialog 对话框 ------------------------------- */ -.el-dialog__headerbtn:focus .el-dialog__close, -.el-dialog__headerbtn:hover .el-dialog__close { - color: set-color(primary); -} -.el-overlay { +.el-overlay, +.el-dialog__wrapper { display: flex; align-items: center; justify-content: center; @@ -83,35 +64,6 @@ overflow-x: hidden; } -/* Divider 分割线 -------------------------------- */ -.el-divider { - background-color: rgba(0, 0, 0, 0.06) !important; -} - -/* Card 卡片 -------------------------------- */ -.el-card__header { - padding: 15px 20px; -} - -/* Message 消息提示 -------------------------------- */ -.el-message { - min-width: auto !important; - box-sizing: border-box !important; - border-width: 1px !important; - border-style: solid !important; - border-color: #ebeef5 !important; - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); - background-color: #fff !important; - border-radius: 3px !important; - border: 1px solid #ebeef5 !important; - .el-message__icon { - font-size: 1.4em !important; - } -} - /* Alert 警告 ------------------------------- */ .el-alert--warning.is-light { @@ -157,15 +109,15 @@ .el-submenu__title { height: 50px !important; line-height: 50px !important; - color: var(--bg-menuBarColor) !important; + color: var(--prev-bg-menuBarColor) !important; transition: none !important; } // horizontal 水平方向时 .el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { border-bottom: 3px solid !important; - border-bottom-color: set-color(primary) !important; - color: set-color(primary) !important; + border-bottom-color: var(--prev-color-primary) !important; + color: var(--prev-color-primary) !important; } .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover, @@ -173,7 +125,7 @@ .el-menu--horizontal > .el-submenu:hover .el-submenu__title, .el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { - color: set-color(primary) !important; + color: var(--prev-color-primary) !important; } .el-menu.el-menu--horizontal { border-bottom: none !important; @@ -197,19 +149,19 @@ // 默认 hover 时 .el-menu-item:hover, .el-submenu__title:hover { - color: set-color(primary) !important; + color: var(--prev-color-primary) !important; background-color: transparent !important; i { - color: set-color(primary) !important; + color: var(--prev-color-primary) !important; } } // 高亮时 .el-menu-item.is-active { - color: set-color(primary) !important; + color: var(--prev-color-primary) !important; } .el-active-extend { color: #ffffff !important; - background-color: set-color(primary) !important; + background-color: var(--prev-color-primary) !important; i { color: #ffffff !important; } @@ -227,7 +179,7 @@ } // 菜单收起时鼠标经过背景颜色/字体颜色 .el-menu--vertical { - background: var(--bg-menuBar) !important; + background: var(--prev-bg-menuBar) !important; } .el-menu--horizontal { .el-menu { @@ -260,14 +212,6 @@ background-color: transparent !important; } -/* Breadcrumb 面包屑 -------------------------------- */ -.el-breadcrumb__inner a, -.el-breadcrumb__inner.is-link { - font-weight: normal; - color: var(--bg-topBarColor); -} - /* Alert 警告 ------------------------------- */ .el-alert__title { diff --git a/src/theme/index.scss b/src/theme/index.scss index 9494e93..9d49e0d 100644 --- a/src/theme/index.scss +++ b/src/theme/index.scss @@ -3,3 +3,5 @@ @import './other.scss'; @import './element.scss'; @import './media/media.scss'; +@import './variables.scss'; +@import './dark.scss'; diff --git a/src/theme/loading.scss b/src/theme/loading.scss index c7edc4c..1221f34 100644 --- a/src/theme/loading.scss +++ b/src/theme/loading.scss @@ -5,7 +5,7 @@ top: 0; left: 0; z-index: 2; - background-color: var(--color-bg); + background-color: var(--prev-bg-white); } .loading-prev .loading-prev-box { position: absolute; @@ -20,7 +20,7 @@ .loading-prev .loading-prev-box-warp .loading-prev-box-item { width: 33.333333%; height: 33.333333%; - background: var(--color-primary); + background: var(--prev-color-primary); float: left; animation: loading-prev-animation 1.2s infinite ease; border-radius: 1px; diff --git a/src/theme/mixins/function.scss b/src/theme/mixins/function.scss deleted file mode 100644 index ed27a8f..0000000 --- a/src/theme/mixins/function.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* 颜色调用函数 -------------------------------- */ -@function set-color($key) { - @return var(--color-#{$key}); -} diff --git a/src/theme/variables.scss b/src/theme/variables.scss new file mode 100644 index 0000000..b7ee969 --- /dev/null +++ b/src/theme/variables.scss @@ -0,0 +1,952 @@ +/* Button 按钮 +------------------------------- */ +// text +.el-button--text { + color: var(--prev-color-primary); + &:focus, + &:hover { + color: var(--prev-color-primary-light-3); + } +} +.el-button--text:active { + color: var(--prev-color-primary-light-3); +} +// default +.el-button--default:hover, +.el-button--default:focus { + color: var(--prev-color-primary); + background: var(--prev-color-primary-light-8); + border-color: var(--prev-color-primary-light-6); +} +.el-button--default.is-plain:hover, +.el-button--default.is-plain:focus { + color: var(--prev-color-primary); + background: var(--prev-bg-white); + border-color: var(--prev-color-primary-light-1); +} +.el-button--default:active { + color: var(--prev-color-primary); + background: var(--prev-bg-white); + border-color: var(--prev-color-primary-light-1); +} +// primary +.el-button--primary { + color: var(--prev-color-text-white) !important; + background: var(--prev-color-primary) !important; + border-color: var(--prev-color-primary) !important; + &:hover, + &:focus { + color: var(--prev-color-text-white) !important; + background: var(--prev-color-primary-light-3) !important; + border-color: var(--prev-color-primary-light-3) !important; + } +} +.el-button--primary.is-plain { + color: var(--prev-color-primary) !important; + background: var(--prev-color-primary-light-8) !important; + border-color: var(--prev-color-primary-light-6) !important; + &:hover, + &:focus { + color: var(--prev-color-text-white) !important; + background: var(--prev-color-primary) !important; + border-color: var(--prev-color-primary) !important; + } +} +.el-button--primary.is-disabled, +.el-button--primary.is-disabled:active, +.el-button--primary.is-disabled:focus, +.el-button--primary.is-disabled:hover { + color: var(--prev-color-primary) !important; + background: var(--prev-color-primary-light-7) !important; + border-color: var(--prev-color-primary-light-7) !important; +} +.el-button--primary.is-active, +.el-button--primary:active { + color: var(--prev-color-text-white) !important; + background: var(--prev-color-primary) !important; + border-color: var(--prev-color-primary) !important; +} +.el-button.is-disabled.is-plain, +.el-button.is-disabled.is-plain:focus, +.el-button.is-disabled.is-plain:hover { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); + color: var(--prev-color-text-placeholder); +} + +/* Link 文字链接 +------------------------------- */ +// default +.el-link.el-link--default:hover { + color: var(--prev-color-primary-light-3); +} +// primary +.el-link.el-link--primary { + color: var(--prev-color-primary); + &:hover { + color: var(--prev-color-primary-light-3); + } +} +.el-link.el-link--default::after, +.el-link.is-underline:hover::after, +.el-link.el-link--primary.is-underline:hover::after, +.el-link.el-link--primary::after { + border-color: var(--prev-color-primary); +} + +/* Radio 单选框 +------------------------------- */ +.el-radio, +.el-checkbox { + color: var(--prev-color-text-regular); +} +.el-radio__input.is-checked + .el-radio__label, +.el-radio-button__inner:hover { + color: var(--prev-color-primary); +} +.el-radio__input.is-checked .el-radio__inner { + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); +} +.el-radio-button__orig-radio:checked + .el-radio-button__inner { + color: var(--prev-color-text-white); + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); + box-shadow: -1px 0 0 0 var(--prev-color-primary); +} +.el-radio.is-bordered.is-checked, +.el-radio__inner:hover { + border-color: var(--prev-color-primary); +} +.el-radio-button__inner, +.el-checkbox-button__inner { + background-color: var(--prev-bg-white); + color: var(--prev-color-text-regular); + border-color: var(--prev-border-color-base); +} +.el-radio-button:first-child .el-radio-button__inner, +.el-checkbox-button:first-child .el-checkbox-button__inner { + border-left-color: var(--prev-border-color-base); +} +.el-radio.is-bordered, +.el-checkbox.is-bordered { + border-color: var(--prev-border-color-base); +} + +/* Checkbox 多选框 +------------------------------- */ +.el-checkbox__input.is-checked + .el-checkbox__label, +.el-checkbox-button__inner:hover { + color: var(--prev-color-primary); +} +.el-checkbox__input.is-checked .el-checkbox__inner { + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); +} +.el-checkbox__input.is-focus .el-checkbox__inner, +.el-checkbox__inner:hover, +.el-checkbox.is-bordered.is-checked, +.el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: var(--prev-color-primary); +} +.el-checkbox-button.is-checked .el-checkbox-button__inner { + color: var(--prev-color-text-white); + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); + box-shadow: -1px 0 0 0 var(--prev-color-primary); +} +.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: var(--prev-color-primary); +} +.el-checkbox__input.is-checked .el-checkbox__inner, +.el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: var(--prev-color-primary); + border-color: var(--prev-color-primary); +} +.el-checkbox-button.is-disabled .el-checkbox-button__inner { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); +} + +/* Input 输入框、InputNumber 计数器 +------------------------------- */ +// input-number +.el-input__inner:focus, +.el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), +.el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), +.el-textarea__inner:focus { + border-color: var(--prev-color-primary) !important; +} +.el-input-number__increase:hover, +.el-input-number__decrease:hover { + color: var(--prev-color-primary); +} +.el-input-number__decrease, +.el-input-number__increase { + background-color: var(--prev-bg-color); + border-color: var(--prev-border-color-base) !important; +} +// input +.el-input__inner, +.el-textarea__inner { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); + color: var(--prev-color-text-regular); + &:hover { + border-color: var(--prev-border-color-hover); + } +} +.el-input.is-disabled .el-input__inner, +.el-textarea.is-disabled .el-textarea__inner { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); +} +.el-input-group__append, +.el-input-group__prepend { + background-color: var(--prev-bg-color); + color: var(--prev-color-text-regular); + border-color: var(--prev-border-color-base); +} +.el-input .el-input__count .el-input__count-inner { + background-color: var(--prev-bg-color); +} +// autocomplete +.el-autocomplete-suggestion { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); +} +.el-autocomplete-suggestion__wrap { + max-height: 280px !important; +} +// scss 循环 +$positions: 'top', 'right', 'bottom', 'left'; +@each $i in $positions { + .el-popper[x-placement^='#{$i}'] .popper__arrow { + border-#{$i}-color: var(--prev-border-color-base); + &::after { + border-#{$i}-color: var(--prev-bg-white); + } + } +} +.el-autocomplete-suggestion li { + color: var(--prev-color-text-regular); +} +.el-autocomplete-suggestion li.highlighted, +.el-autocomplete-suggestion li:hover { + background-color: var(--prev-color-hover); +} + +/* Select 选择器 +------------------------------- */ +.el-range-editor.is-active, +.el-range-editor.is-active:hover, +.el-select .el-input.is-focus .el-input__inner, +.el-select .el-input__inner:focus { + border-color: var(--prev-color-primary); +} +.el-select-dropdown__item.selected { + color: var(--prev-color-primary); +} +.el-select-dropdown { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-light); +} +.el-select-dropdown__item { + color: var(--prev-color-text-regular); +} +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover { + background-color: var(--prev-color-hover); +} +.el-select-dropdown__item.is-disabled:hover { + background-color: var(--prev-bg-white); +} +.el-select .el-input.is-disabled .el-input__inner:hover { + border-color: var(--prev-border-color-light); +} +.el-select:hover .el-input__inner { + border-color: var(--prev-border-color-hover); +} +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected { + background-color: var(--prev-bg-white); +} +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover { + background-color: var(--prev-color-hover); +} +.el-select-group__wrap:not(:last-of-type)::after { + background: var(--prev-border-color-light); +} + +/* Cascader 级联选择器 +------------------------------- */ +.el-cascader .el-input .el-input__inner:focus, +.el-cascader .el-input.is-focus .el-input__inner { + border-color: var(--prev-color-primary); +} +.el-cascader-node.in-active-path, +.el-cascader-node.is-active, +.el-cascader-node.is-selectable.in-checked-path { + color: var(--prev-color-primary); +} +.el-cascader__dropdown { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-light); +} +.el-cascader-menu { + border-color: var(--prev-border-color-light); + color: var(--prev-color-text-regular); +} +.el-cascader-node:not(.is-disabled):focus, +.el-cascader-node:not(.is-disabled):hover { + background-color: var(--prev-color-hover); +} + +/* Switch 开关 +------------------------------- */ +.el-switch.is-checked .el-switch__core { + border-color: var(--prev-color-primary); + background-color: var(--prev-color-primary); +} +.el-switch__label.is-active { + color: var(--prev-color-primary); +} + +/* Slider 滑块 +------------------------------- */ +.el-slider__bar { + background-color: var(--prev-color-primary); +} +.el-slider__button { + border-color: var(--prev-color-primary); +} +.el-slider__runway { + background-color: var(--prev-border-color-light); +} +.el-slider__marks-text { + color: var(--prev-color-text-secondary); +} + +/* TimePicker 时间选择器 +------------------------------- */ +.el-time-panel__btn.confirm, +.el-time-spinner__arrow:hover, +.time-select-item.selected:not(.disabled) { + color: var(--prev-color-primary); +} +.el-picker-panel { + border-color: var(--prev-border-color-light); + background-color: var(--prev-bg-white); + color: var(--prev-color-text-regular); +} +.time-select-item:hover, +.el-time-spinner__item:hover:not(.disabled):not(.active), +.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active) { + background-color: var(--prev-color-hover); +} +.el-time-panel { + border-color: var(--prev-border-color-light); + background-color: var(--prev-bg-white); +} +.el-time-panel__footer, +.el-time-panel__content::after, +.el-time-panel__content::before, +.el-time-range-picker__body { + border-color: var(--prev-border-color-light); +} +.el-time-panel__btn, +.el-date-editor .el-range-separator { + color: var(--prev-color-text-primary); +} +.el-date-editor .el-range-input { + background-color: var(--prev-bg-white); + color: var(--prev-color-text-primary); +} + +/* DatePicker 日期选择器 +------------------------------- */ +.el-date-table td.today span, +.el-date-table td.available:hover, +.el-date-picker__header-label.active, +.el-date-picker__header-label:hover, +.el-picker-panel__icon-btn:hover, +.el-year-table td.today .cell, +.el-year-table td .cell:hover, +.el-year-table td.current:not(.disabled) .cell, +.el-month-table td .cell:hover, +.el-month-table td.today .cell, +.el-month-table td.current:not(.disabled) .cell, +.el-picker-panel__shortcut:hover { + color: var(--prev-color-primary); +} +.el-date-table td.current:not(.disabled) span, +.el-date-table td.selected span { + color: var(--prev-color-text-white); + background-color: var(--prev-color-primary); +} +.el-date-table td.end-date span, +.el-date-table td.start-date span, +.el-month-table td.end-date .cell, +.el-month-table td.start-date .cell { + background-color: var(--prev-color-primary); +} +.el-date-table td.in-range div, +.el-date-table td.in-range div:hover, +.el-date-table.is-week-mode .el-date-table__row.current div, +.el-date-table.is-week-mode .el-date-table__row:hover div, +.el-date-table td.selected div { + background-color: var(--prev-color-primary-light-9); +} +.el-date-table th, +.el-date-picker__header--bordered, +.el-date-range-picker__content.is-left, +.el-date-picker__time-header, +.el-date-range-picker__time-header { + border-color: var(--prev-border-color-lighter); +} +.el-date-table th, +.el-date-picker__header-label, +.el-picker-panel__shortcut, +.el-month-table td .cell, +.el-year-table td .cell { + color: var(--prev-color-text-regular); +} +.el-date-table td.next-month, +.el-date-table td.prev-month { + color: var(--prev-border-color-hover); +} +.el-picker-panel__icon-btn { + color: var(--prev-color-text-primary); +} +.el-date-table td.disabled div { + background-color: var(--prev-bg-color); +} +.el-picker-panel [slot='sidebar'], +.el-picker-panel__sidebar, +.el-picker-panel__footer { + border-color: var(--prev-border-color-light); + background-color: var(--prev-bg-white); +} +.el-month-table td.end-date .cell, +.el-month-table td.start-date .cell { + color: var(--prev-color-text-white); +} + +/* Upload 上传 +------------------------------- */ +.el-upload-list__item.is-success .el-upload-list__item-name:focus, +.el-upload-list__item.is-success .el-upload-list__item-name:hover, +.el-upload-list__item .el-icon-close-tip, +.el-upload-dragger .el-upload__text em { + color: var(--prev-color-primary); +} +.el-upload--picture-card, +.el-upload-dragger { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-light); + i { + color: var(--prev-color-text-regular); + } +} +.el-upload--picture-card:hover, +.el-upload:focus { + color: var(--prev-color-primary); + border-color: var(--prev-color-primary); +} +.el-upload-dragger:hover, +.el-upload:focus .el-upload-dragger { + border-color: var(--prev-color-primary); +} +.el-upload__tip, +.el-upload-list__item, +.el-upload-dragger .el-upload__text, +.el-upload-list__item-name, +.el-upload-list__item .el-icon-close { + color: var(--prev-color-text-regular); +} +.el-upload-list__item:hover { + background-color: var(--prev-bg-color); +} + +/* ColorPicker 颜色选择器 +------------------------------- */ +.el-color-picker__trigger { + border-color: var(--prev-border-color-light); +} + +/* Transfer 穿梭框 +------------------------------- */ +.el-transfer-panel__item:hover { + color: var(--prev-color-primary); +} +.el-transfer-panel, +.el-transfer-panel .el-transfer-panel__header { + border-color: var(--prev-border-color-lighter); +} +.el-transfer-panel .el-transfer-panel__footer { + border-color: var(--prev-border-color-lighter); + background-color: var(--prev-bg-white); +} +.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label { + color: var(--prev-color-text-primary); +} + +/* Form 表单 +------------------------------- */ +.el-form { + .el-form-item:last-of-type { + margin-bottom: 0 !important; + } +} +.el-form-item__label { + color: var(--prev-color-text-regular); +} + +/* Table 表格 +------------------------------- */ +.el-table { + color: var(--prev-color-text-regular); +} +.el-table .descending .sort-caret.descending { + border-top-color: var(--prev-color-primary); +} +.el-table .ascending .sort-caret.ascending { + border-bottom-color: var(--prev-color-primary); +} +.el-table thead { + color: var(--prev-color-text-secondary); +} +.el-table td.el-table__cell, +.el-table th.el-table__cell.is-leaf, +.el-table--border, +.el-table--group { + border-color: var(--prev-border-color-lighter) !important; +} +.el-table th.el-table__cell, +.el-table tr { + background-color: var(--prev-bg-white); +} +.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell, +.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { + background-color: var(--prev-bg-color); +} +.el-table--border::after, +.el-table--group::after, +.el-table::before { + background-color: var(--prev-border-color-lighter); +} + +/* Tag 标签 +------------------------------- */ +// primary +.el-tag { + color: var(--prev-color-primary); + background-color: var(--prev-color-primary-light-8); + border-color: var(--prev-color-primary-light-6); +} +.el-tag .el-tag__close { + color: var(--prev-color-primary); + &:hover { + color: var(--prev-color-text-white); + background-color: var(--prev-color-primary); + } +} +.el-tag--dark { + color: var(--prev-color-text-white); + background-color: var(--prev-color-primary); +} +.el-tag--dark .el-tag__close { + color: var(--prev-color-text-white); + &:hover { + background-color: var(--prev-color-primary-light-3); + } +} +.el-tag--plain { + color: var(--prev-color-primary); + background-color: var(--prev-bg-white); + border-color: var(--prev-color-primary-light-3); +} + +/* Progress 进度条 +------------------------------- */ +// primary +.el-progress-bar__inner { + background-color: var(--prev-color-primary) !important; +} +.el-progress-bar__outer { + background-color: var(--prev-border-color-lighter); +} +.el-progress__text { + color: var(--prev-color-text-regular); +} + +/* Tree 树形控件 +------------------------------- */ +.el-tree { + background-color: var(--prev-bg-white); + color: var(--prev-color-text-regular); +} +.el-tree-node__content:hover, +.el-tree-node:focus > .el-tree-node__content { + background-color: var(--prev-bg-color); +} + +/* Pagination 分页 +------------------------------- */ +.el-pager li.active, +.el-pager li:hover, +.el-pagination button:hover, +.el-pagination.is-background .el-pager li:not(.disabled):hover { + color: var(--prev-color-primary); +} +.el-pagination__sizes .el-input .el-input__inner:hover { + border-color: var(--prev-color-primary); +} +.el-pagination.is-background .el-pager li:not(.disabled).active { + background-color: var(--prev-color-primary); + color: var(--prev-color-text-white); +} +.el-pagination__total, +.el-pagination__jump { + color: var(--prev-color-text-regular); +} +.el-pagination button:disabled, +.el-pagination .btn-next, +.el-pagination .btn-prev { + background-color: var(--prev-bg-white); +} +.el-pagination .btn-next, +.el-pagination .btn-prev { + color: var(--prev-color-text-primary); +} +.el-pager li { + background-color: var(--prev-bg-white); + color: var(--prev-color-text-primary); +} + +/* Badge 标记 +------------------------------- */ +// primary +.el-badge__content--primary { + background-color: var(--prev-color-primary); +} + +/* Loading 加载 +------------------------------- */ +.el-loading-spinner .path { + stroke: var(--prev-color-primary); +} +.el-loading-spinner .el-loading-text, +.el-loading-spinner i { + color: var(--prev-color-primary); +} + +/* Message 消息提示 +------------------------------- */ +// default/info +.el-message { + min-width: unset !important; + padding: 15px !important; +} + +/* MessageBox 弹框 +------------------------------- */ +.el-message-box__headerbtn:focus .el-message-box__close, +.el-message-box__headerbtn:hover .el-message-box__close { + color: var(--prev-color-primary); +} +.el-message-box { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); +} +.el-message-box__title { + color: var(--prev-color-text-primary); +} +.el-message-box__content { + color: var(--prev-color-text-regular); +} + +/* Notification 通知 +------------------------------- */ +.el-notification { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); + .el-notification__title { + color: var(--prev-color-text-primary); + } + .el-notification__content { + color: var(--prev-color-text-regular); + } +} + +/* Tabs 标签页 +------------------------------- */ +.el-tabs__item.is-active, +.el-tabs__item:hover, +.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active, +.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover { + color: var(--prev-color-primary); +} +.el-tabs__active-bar { + background-color: var(--prev-color-primary); +} +.el-tabs__nav-wrap::after { + height: 1px !important; +} +.el-tabs__item { + color: var(--prev-color-text-primary); +} +.el-tabs__nav-wrap::after { + background-color: var(--prev-border-color-light); +} +.el-tabs--card > .el-tabs__header .el-tabs__item.is-active, +.el-tabs--card > .el-tabs__header .el-tabs__item, +.el-tabs--card > .el-tabs__header, +.el-tabs--card > .el-tabs__header .el-tabs__nav { + border-color: var(--prev-bg-color); +} +.el-tabs--border-card { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); +} +.el-tabs--border-card > .el-tabs__header { + background-color: var(--prev-bg-color); + border-color: var(--prev-border-color-light); +} +.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); +} + +/* Breadcrumb 面包屑 +------------------------------- */ +.el-breadcrumb__inner a:hover, +.el-breadcrumb__inner.is-link:hover { + color: var(--prev-color-primary); +} +.el-breadcrumb__inner a, +.el-breadcrumb__inner.is-link { + color: var(--bg-topBarColor); + font-weight: normal; +} +.el-breadcrumb__inner a, +.el-breadcrumb__inner.is-link { + color: var(--prev-color-text-black); + opacity: 0.7; +} +.el-breadcrumb__separator { + color: var(--prev-border-color-hover); +} + +/* PageHeader 页头 +------------------------------- */ +.el-page-header__left { + color: var(--prev-color-text-black); + &::after { + background-color: var(--prev-border-color-base); + } +} +.el-page-header__content { + color: var(--prev-color-text-primary); +} + +/* Dropdown 下拉菜单 +------------------------------- */ +.el-dropdown-menu__item:focus, +.el-dropdown-menu__item:not(.is-disabled):hover { + color: var(--prev-color-primary); + background-color: var(--prev-color-primary-light-9); +} +.el-dropdown-menu { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); +} +.el-dropdown-menu__item { + color: var(--prev-color-text-regular); +} +.el-dropdown-menu__item--divided { + border-color: var(--prev-border-color-lighter); +} +.el-dropdown-menu__item--divided:before { + background-color: var(--prev-bg-white); +} + +/* Steps 步骤条 +------------------------------- */ +// default +.el-step__title.is-finish, +.el-step__description.is-finish, +.el-step__head.is-finish { + color: var(--prev-color-primary); +} +.el-step__head.is-finish { + border-color: var(--prev-color-primary); +} + +/* Dialog 对话框 +------------------------------- */ +.el-dialog__headerbtn:focus .el-dialog__close, +.el-dialog__headerbtn:hover .el-dialog__close { + color: var(--prev-color-primary); +} +.el-dialog { + background-color: var(--prev-bg-white); +} +.el-dialog__title { + color: var(--prev-color-text-primary); +} +.el-dialog__body { + color: var(--prev-color-text-regular); +} + +/* Popover 弹出框 +------------------------------- */ +.el-popover { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); + color: var(--prev-color-text-regular); +} +.el-popover__title { + color: var(--prev-color-text-primary); +} + +/* Card 卡片 +------------------------------- */ +.el-card { + color: var(--prev-color-text-primary); + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); +} +.el-card__header { + padding: 15px 20px; + border-bottom-color: var(--prev-border-color-lighter); +} + +/* Collapse 折叠面板 +------------------------------- */ +.el-collapse { + border-color: var(--prev-border-color-lighter); +} +.el-collapse-item__header { + color: var(--prev-color-text-primary); + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); +} +.el-collapse-item__wrap { + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-lighter); +} +.el-collapse-item__content { + color: var(--prev-color-text-primary); +} + +/* Timeline 时间线 +------------------------------- */ +// primary +.el-timeline-item__node--primary { + background-color: var(--prev-color-primary); +} +.el-timeline-item__content { + color: var(--prev-color-text-primary); +} + +/* Divider 分割线 +------------------------------- */ +.el-divider { + background-color: var(--prev-border-color-base); +} + +/* Calendar 日历 +------------------------------- */ +.el-calendar-table td { + color: var(--prev-color-text-black); +} +.el-calendar-table td.is-today { + color: var(--prev-color-primary) !important; + background-color: var(--prev-color-primary-light-9); +} +.el-calendar-table .el-calendar-day:hover, +.el-calendar-table td.is-selected { + background-color: var(--prev-color-primary-light-9); + color: var(--prev-color-primary) !important; +} +.el-calendar { + background-color: var(--prev-bg-white); +} +.el-calendar__title { + color: var(--prev-color-text-black); +} +.el-calendar__header, +.el-calendar-table tr:first-child td, +.el-calendar-table td, +.el-calendar-table tr td:first-child { + border-color: var(--prev-border-color-lighter); +} +.el-calendar-table thead th { + color: var(--prev-color-text-regular); +} +.el-calendar-table:not(.is-range) td.next, +.el-calendar-table:not(.is-range) td.prev { + color: var(--prev-color-text-placeholder); +} +.el-calendar__button-group { + .el-button { + color: var(--prev-color-text-regular); + background-color: var(--prev-bg-white); + border-color: var(--prev-border-color-base); + &:focus, + &:hover { + color: var(--prev-color-primary) !important; + background: var(--prev-color-primary-light-8) !important; + border-color: var(--prev-color-primary-light-6) !important; + } + &:active { + color: var(--prev-color-primary-light-3); + } + } +} + +/* Backtop 回到顶部 +------------------------------- */ +.el-backtop { + color: var(--prev-color-primary); + &:hover { + background-color: var(--prev-color-primary-light-9); + } +} + +/* scrollbar +------------------------------- */ +.el-scrollbar__wrap { + overflow-x: hidden !important; + max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/ +} +.el-select-dropdown .el-scrollbar__wrap { + overflow-x: scroll !important; +} + +/* Drawer 抽屉 +------------------------------- */ +.el-drawer, +.el-divider__text { + background-color: var(--prev-bg-white); +} +.el-divider__text { + color: var(--prev-color-text-primary); +} +.el-drawer__close-btn:hover { + color: var(--prev-color-primary); +} +.el-drawer__body { + width: 100%; + height: 100%; + overflow: auto; +} +.el-drawer__header { + padding: 0 15px !important; + height: 50px; + display: flex; + align-items: center; + margin-bottom: 0 !important; + border-bottom: 1px solid var(--prev-border-color-lighter); + color: var(--prev-color-text-primary); +} diff --git a/src/utils/theme.js b/src/utils/theme.js new file mode 100644 index 0000000..4d184c5 --- /dev/null +++ b/src/utils/theme.js @@ -0,0 +1,63 @@ +import { Message } from 'element-ui'; + +/** + * 颜色转换函数 + * @method hexToRgb hex 颜色转 rgb 颜色 + * @method rgbToHex rgb 颜色转 Hex 颜色 + * @method getDarkColor 加深颜色值 + * @method getLightColor 变浅颜色值 + */ +export function useChangeColor() { + // str 颜色值字符串 + const hexToRgb = (str) => { + let hexs = ''; + let reg = /^#?[0-9A-Fa-f]{6}$/; + if (!reg.test(str)) { + Message.warning('输入错误的hex'); + return ''; + } + str = str.replace('#', ''); + hexs = str.match(/../g); + for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16); + return hexs; + }; + // r 代表红色 | g 代表绿色 | b 代表蓝色 + const rgbToHex = (r, g, b) => { + let reg = /^\d{1,3}$/; + if (!reg.test(r) || !reg.test(g) || !reg.test(b)) { + Message.warning('输入错误的rgb颜色值'); + return ''; + } + let hexs = [r.toString(16), g.toString(16), b.toString(16)]; + for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`; + return `#${hexs.join('')}`; + }; + // color 颜色值字符串 | level 变浅的程度，限0-1之间 + const getDarkColor = (color, level) => { + let reg = /^#?[0-9A-Fa-f]{6}$/; + if (!reg.test(color)) { + Message.warning('输入错误的hex颜色值'); + return ''; + } + let rgb = useChangeColor().hexToRgb(color); + for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level)); + return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]); + }; + // color 颜色值字符串 | level 加深的程度，限0-1之间 + const getLightColor = (color, level) => { + let reg = /^#?[0-9A-Fa-f]{6}$/; + if (!reg.test(color)) { + Message.warning('输入错误的hex颜色值'); + return ''; + } + let rgb = useChangeColor().hexToRgb(color); + for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]); + return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]); + }; + return { + hexToRgb, + rgbToHex, + getDarkColor, + getLightColor, + }; +} diff --git a/src/views/home/index.scss b/src/views/home/index.scss index 222ee28..e7a80cd 100644 --- a/src/views/home/index.scss +++ b/src/views/home/index.scss @@ -36,7 +36,7 @@ font-size: 13px; display: flex; .right-label { - color: gray; + color: var(--prev-color-text-regular); width: 40px; } .right-value { @@ -55,11 +55,11 @@ .info-item { display: flex; font-size: 13px; - color: gray; + color: var(--prev-color-text-regular); height: 28px; line-height: 28px; &:hover { - color: var(--color-primary); + color: var(--prev-color-primary); cursor: pointer; } .info-item-left { @@ -81,7 +81,7 @@ .home-recommend { position: relative; height: 100px; - color: #ffffff; + color: var(--prev-color-text-white); border-radius: 4px; overflow: hidden; cursor: pointer; @@ -129,7 +129,7 @@ .home-charts { height: 282.6px; .home-charts-item { - background-color: #f5f5f5; + background-color: var(--prev-bg-main-color); padding: 19px 15px; border-radius: 2px; display: flex; diff --git a/src/views/home/index.vue b/src/views/home/index.vue index fc8d3af..dd3a72b 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -112,7 +112,7 @@ - + @@ -165,6 +165,16 @@ export default { newsInfoList, userInfo: {}, dailyMessage: {}, + charts: { + theme: '', + bgColor: '', + }, + global: { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined], + }, }; }, created() { @@ -203,8 +213,10 @@ export default { }, // 库存作业 initHomeStock() { - const myChart = echarts.init(this.$refs.homeStockRef); + if (!this.global.dispose.some((b) => b === this.global.homeChartOne)) this.global.homeChartOne.dispose(); + this.global.homeChartOne = echarts.init(this.$refs.homeStockRef, this.charts.theme); const option = { + backgroundColor: this.charts.bgColor, grid: { top: 50, right: 20, @@ -237,15 +249,17 @@ export default { }, ], }; - myChart.setOption(option); + this.global.homeChartOne.setOption(option); window.addEventListener('resize', () => { - myChart.resize(); + this.global.homeChartOne.resize(); }); }, // 履约情况 initHomeLaboratory() { - const myChart = echarts.init(this.$refs.homeLaboratoryRef); + if (!this.global.dispose.some((b) => b === this.global.homeChartTwo)) this.global.homeChartTwo.dispose(); + this.global.homeChartTwo = echarts.init(this.$refs.homeLaboratoryRef, this.charts.theme); const option = { + backgroundColor: this.charts.bgColor, grid: { top: 50, right: 20, @@ -281,15 +295,17 @@ export default { }, ], }; - myChart.setOption(option); + this.global.homeChartTwo.setOption(option); window.addEventListener('resize', () => { - myChart.resize(); + this.global.homeChartTwo.resize(); }); }, // 缺货监控 initHomeOvertime() { - const myChart = echarts.init(this.$refs.homeOvertimeRef); + if (!this.global.dispose.some((b) => b === this.global.homeCharThree)) this.global.homeCharThree.dispose(); + this.global.homeCharThree = echarts.init(this.$refs.homeOvertimeRef, this.charts.theme); const option = { + backgroundColor: this.charts.bgColor, grid: { top: 50, right: 20, @@ -335,9 +351,9 @@ export default { }, ], }; - myChart.setOption(option); + this.global.homeCharThree.setOption(option); window.addEventListener('resize', () => { - myChart.resize(); + this.global.homeCharThree.resize(); }); }, // 随机语录 @@ -359,6 +375,28 @@ export default { window.open('https://gitee.com/lyt-top/vue-next-admin'); }, }, + watch: { + // 监听 vuex 数据变化 + '$store.state.themeConfig.themeConfig.isIsDark': { + handler(isIsDark) { + this.$nextTick(() => { + this.charts.theme = isIsDark ? 'dark' : ''; + this.charts.bgColor = isIsDark ? 'transparent' : ''; + setTimeout(() => { + this.initHomeStock(); + }, 500); + setTimeout(() => { + this.initHomeLaboratory(); + }, 700); + setTimeout(() => { + this.initHomeOvertime(); + }, 1000); + }); + }, + deep: true, + immediate: true, + }, + }, }; diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 37ceb98..993fcf6 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -64,7 +64,7 @@ - @@ -161,8 +161,8 @@ export default { userName: this.ruleForm.userName === 'admin' ? 'admin' : 'test', photo: this.ruleForm.userName === 'admin' - ? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg' - : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg', + ? 'https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200' + : 'https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200', time: new Date().getTime(), roles: defaultRoles, authBtnList: defaultAuthBtnList, @@ -215,16 +215,16 @@ export default { width: 491px; padding: 20px; font-size: 16px; - color: #fff; + color: var(--prev-color-text-white); position: relative; - background-color: rgba(64, 158, 255, 0.8); + background-color: var(--prev-color-primary); display: flex; flex-direction: column; border-top-left-radius: 4px; border-bottom-left-radius: 4px; .login-time { width: 100%; - color: #fff; + color: var(--prev-color-text-white); opacity: 0.9; font-size: 14px; overflow: hidden; @@ -242,13 +242,13 @@ export default { margin-bottom: 15px; } .title { - color: #fff; + color: var(--prev-color-text-white); font-weight: 300; letter-spacing: 2px; font-size: 16px; } .msg { - color: #fff; + color: var(--prev-color-text-white); font-size: 13px; margin-top: 35px; .msg-author { @@ -270,14 +270,14 @@ export default { position: relative; align-items: center; display: flex; - background-color: rgba(255, 255, 255, 1); + background-color: var(--prev-bg-white); border-top-right-radius: 4px; border-bottom-right-radius: 4px; .login-main { margin: 0 auto; width: 70%; .login-title { - color: #333; + color: var(--prev-color-text-primary); margin-bottom: 40px; font-weight: 500; font-size: 22px; @@ -287,7 +287,7 @@ export default { .login-form { margin: 10px 0; i { - color: #333; + color: var(--prev-color-text-primary); } .el-form-item { margin-bottom: 20px !important; @@ -301,8 +301,8 @@ export default { margin-top: 2px; width: 100px; height: 38px; - border: 1px solid #dcdfe6; - color: #333; + border: 1px solid var(--prev-border-color-base); + color: var(--prev-color-text-primary); font-size: 14px; font-weight: 700; letter-spacing: 5px; @@ -313,16 +313,14 @@ export default { transition: all ease 0.2s; border-radius: 4px; &:hover { - border-color: #c0c4cc; + border-color: var(--prev-border-color-hover); transition: all ease 0.2s; } } } .login-submit { width: 100%; - height: 45px; letter-spacing: 2px; - font-weight: 300; } } } @@ -331,12 +329,12 @@ export default { width: 100%; text-align: left; a { - color: #999; + color: var(--prev-color-text-secondary); font-size: 12px; margin: 0 8px; text-decoration: none; &:hover { - color: #1e9fff; + color: var(--prev-color-primary); text-decoration: underline; } } diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue index a4dc532..882a558 100644 --- a/src/views/personal/index.vue +++ b/src/views/personal/index.vue @@ -24,5 +24,6 @@ export default { diff --git a/src/views/tools/index.vue b/src/views/tools/index.vue index 5ba3114..54f2bad 100644 --- a/src/views/tools/index.vue +++ b/src/views/tools/index.vue @@ -381,7 +381,7 @@ export default { margin-bottom: 0 !important; } .tools-warp-form-msg { - color: #666666; + color: var(--prev-color-text-regular); font-size: 14px; .tools-warp-form-msg-red { color: red; diff --git a/vue.config.js b/vue.config.js index 2f0269b..bbd3bdd 100644 --- a/vue.config.js +++ b/vue.config.js @@ -25,16 +25,7 @@ module.exports = { config.plugins.delete('preload'); config.plugins.delete('prefetch'); }, - configureWebpack: { - output: { - filename: `js/[name].${new Date().getTime()}.js`, - chunkFilename: `js/[name].${new Date().getTime()}.js`, - }, - }, css: { - extract: { - filename: `css/[name].${new Date().getTime()}.css`, - chunkFilename: `css/[name].${new Date().getTime()}.css`, - }, + extract: { ignoreOrder: true }, }, };