From e212a0ab75e1c59d0d030ac0b2f07048f6a0f9cf Mon Sep 17 00:00:00 2001 From: RuoYi Date: Wed, 4 Dec 2024 20:32:06 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=BC=80=E5=90=AF=E6=9A=97?= =?UTF-8?q?=E9=BB=91=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/svg/moon.svg | 1 + src/assets/icons/svg/sunny.svg | 1 + src/assets/styles/ruoyi.scss | 64 +++--- src/assets/styles/sidebar.scss | 6 +- src/assets/styles/variables.module.scss | 235 +++++++++++++++++++---- src/components/Crontab/index.vue | 1 - src/components/Hamburger/index.vue | 1 + src/components/TopNav/index.vue | 4 +- src/components/TreeSelect/index.vue | 156 --------------- src/layout/components/Navbar.vue | 28 ++- src/layout/components/Settings/index.vue | 13 +- src/layout/components/Sidebar/Logo.vue | 30 ++- src/layout/components/Sidebar/index.vue | 66 ++++++- src/layout/components/TagsView/index.vue | 41 ++-- src/main.js | 4 +- src/store/modules/settings.js | 14 +- 16 files changed, 392 insertions(+), 273 deletions(-) create mode 100644 src/assets/icons/svg/moon.svg create mode 100644 src/assets/icons/svg/sunny.svg delete mode 100644 src/components/TreeSelect/index.vue diff --git a/src/assets/icons/svg/moon.svg b/src/assets/icons/svg/moon.svg new file mode 100644 index 0000000..ec72d77 --- /dev/null +++ b/src/assets/icons/svg/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/sunny.svg b/src/assets/icons/svg/sunny.svg new file mode 100644 index 0000000..cc628bf --- /dev/null +++ b/src/assets/icons/svg/sunny.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index fa551d3..4996ae5 100644 --- a/src/assets/styles/ruoyi.scss +++ b/src/assets/styles/ruoyi.scss @@ -1,4 +1,4 @@ - /** +/** * 通用css样式布局处理 * Copyright (c) 2019 ruoyi */ @@ -102,40 +102,55 @@ /** 表格布局 **/ .pagination-container { - position: relative; - height: 32px; - margin-bottom: 10px; - margin-top: 15px; - padding: 10px 20px !important; + position: relative; + height: 25px; + margin-bottom: 10px; + margin-top: 15px; + padding: 10px 20px !important; + background-color: transparent !important; } +/* 分页器定位 */ +.pagination-container .el-pagination { + position: absolute; + right: 0; + top: 0; +} + +/* 弹窗中的分页器 */ .el-dialog .pagination-container { - position: static !important; + position: static !important; + margin: 10px 0 0 0; + padding: 0 !important; + + .el-pagination { + position: static; + } +} + +/* 移动端适配 */ +@media (max-width: 768px) { + .pagination-container { + .el-pagination { + > .el-pagination__jump { + display: none !important; + } + > .el-pagination__sizes { + display: none !important; + } + } + } } /* tree border */ .tree-border { margin-top: 5px; - border: 1px solid #e5e6e7; - background: #FFFFFF none; + border: 1px solid var(--el-border-color-light, #e5e6e7); + background: var(--el-bg-color, #FFFFFF) none; border-radius:4px; width: 100%; } -.pagination-container .el-pagination { - right: 0; - position: absolute; -} - -@media ( max-width : 768px) { - .pagination-container .el-pagination > .el-pagination__jump { - display: none !important; - } - .pagination-container .el-pagination > .el-pagination__sizes { - display: none !important; - } -} - .el-table .fixed-width .el-button--small { padding-left: 0; padding-right: 0; @@ -282,6 +297,5 @@ /* 分割面板样式 */ .splitpanes.default-theme .splitpanes__pane { - background-color: #fff!important; + background-color: var(--splitpanes-default-bg) !important; } - diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index df7a62f..89820d1 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -1,7 +1,7 @@ #app { .main-container { - height: 100%; + min-height: 100%; transition: margin-left .28s; margin-left: $base-sidebar-width; position: relative; @@ -12,10 +12,8 @@ } .sidebar-container { - -webkit-transition: width .28s; transition: width 0.28s; width: $base-sidebar-width !important; - background-color: $base-menu-background; height: 100%; position: fixed; font-size: 0px; @@ -103,7 +101,7 @@ & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, & .theme-dark .el-sub-menu .el-menu-item { - background-color: $base-sub-menu-background !important; + background-color: $base-sub-menu-background; &:hover { background-color: $base-sub-menu-hover !important; diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index e065775..27941ab 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -8,58 +8,211 @@ $tiffany: #4AB7BD; $yellow: #FEC171; $panGreen: #30B08F; -// 默认菜单主题风格 +// 默认主题变量 +$menuText: #bfcbd9; +$menuActiveText: #409eff; +$menuBg: #304156; +$menuHover: #263445; + +// 浅色主题theme-light +$menuLightBg: #ffffff; +$menuLightHover: #f0f1f5; +$menuLightText: #303133; +$menuLightActiveText: #409EFF; + +// 基础变量 +$base-sidebar-width: 200px; +$sideBarWidth: 200px; + +// 菜单暗色变量 $base-menu-color: #bfcbd9; $base-menu-color-active: #f4f4f5; $base-menu-background: #304156; -$base-logo-title-color: #ffffff; - -$base-menu-light-color: rgba(0, 0, 0, 0.7); -$base-menu-light-background: #ffffff; -$base-logo-light-title-color: #001529; - $base-sub-menu-background: #1f2d3d; $base-sub-menu-hover: #001528; -// 自定义暗色菜单风格 -/** -$base-menu-color:hsla(0,0%,100%,.65); -$base-menu-color-active:#fff; -$base-menu-background:#001529; -$base-logo-title-color: #ffffff; - -$base-menu-light-color:rgba(0,0,0,.70); -$base-menu-light-background:#ffffff; -$base-logo-light-title-color: #001529; - -$base-sub-menu-background:#000c17; -$base-sub-menu-hover:#001528; -*/ - +// 组件变量 $--color-primary: #409EFF; $--color-success: #67C23A; $--color-warning: #E6A23C; $--color-danger: #F56C6C; $--color-info: #909399; -$base-sidebar-width: 200px; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { - menuColor: $base-menu-color; - menuLightColor: $base-menu-light-color; - menuColorActive: $base-menu-color-active; - menuBackground: $base-menu-background; - menuLightBackground: $base-menu-light-background; - subMenuBackground: $base-sub-menu-background; - subMenuHover: $base-sub-menu-hover; - sideBarWidth: $base-sidebar-width; - logoTitleColor: $base-logo-title-color; - logoLightTitleColor: $base-logo-light-title-color; - primaryColor: $--color-primary; - successColor: $--color-success; - dangerColor: $--color-danger; - infoColor: $--color-info; - warningColor: $--color-warning; + menuText: $menuText; + menuActiveText: $menuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + menuLightBg: $menuLightBg; + menuLightHover: $menuLightHover; + menuLightText: $menuLightText; + menuLightActiveText: $menuLightActiveText; + sideBarWidth: $sideBarWidth; + // 导出基础颜色 + blue: $blue; + lightBlue: $light-blue; + red: $red; + pink: $pink; + green: $green; + tiffany: $tiffany; + yellow: $yellow; + panGreen: $panGreen; + // 导出组件颜色 + colorPrimary: $--color-primary; + colorSuccess: $--color-success; + colorWarning: $--color-warning; + colorDanger: $--color-danger; + colorInfo: $--color-info; } + +// CSS变量定义 +:root { + /* 亮色模式变量 */ + --sidebar-bg: #{$menuBg}; + --sidebar-text: #{$menuText}; + --menu-hover: #{$menuHover}; + + --navbar-bg: #ffffff; + --navbar-text: #303133; + + /* splitpanes default-theme 变量 */ + --splitpanes-default-bg: #ffffff; + +} + +// 暗黑模式变量 +html.dark { + /* 默认通用 */ + --el-bg-color: #141414; + --el-bg-color-overlay: #1d1e1f; + --el-text-color-primary: #ffffff; + --el-text-color-regular: #d0d0d0; + --el-border-color: #434343; + --el-border-color-light: #434343; + + /* 侧边栏 */ + --sidebar-bg: #141414; + --sidebar-text: #ffffff; + --menu-hover: #2d2d2d; + --menu-active-text: #{$menuActiveText}; + + /* 顶部导航栏 */ + --navbar-bg: #141414; + --navbar-text: #ffffff; + --navbar-hover: #141414; + + /* 标签栏 */ + --tags-bg: #141414; + --tags-item-bg: #1d1e1f; + --tags-item-border: #303030; + --tags-item-text: #d0d0d0; + --tags-item-hover: #2d2d2d; + --tags-close-hover: #64666a; + + /* splitpanes 组件暗黑模式变量 */ + --splitpanes-bg: #141414; + --splitpanes-border: #303030; + --splitpanes-splitter-bg: #1d1e1f; + --splitpanes-splitter-hover-bg: #2d2d2d; + + /* blockquote 暗黑模式变量 */ + --blockquote-bg: #1d1e1f; + --blockquote-border: #303030; + --blockquote-text: #d0d0d0; + + /* Cron 时间表达式 模式变量 */ + --cron-border: #303030; + + /* splitpanes default-theme 暗黑模式变量 */ + --splitpanes-default-bg: #141414; + + /* 侧边栏菜单覆盖 */ + .sidebar-container { + & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, + & .theme-dark .el-sub-menu .el-menu-item { + background-color: var(--el-bg-color) !important; + } + } + + /* 顶部栏栏菜单覆盖 */ + .el-menu--horizontal { + .el-menu-item { + &:not(.is-disabled) { + &:hover, + &:focus { + background-color: var(--navbar-hover) !important; + } + } + } + } + + /* 分割窗格覆盖 */ + .splitpanes { + background-color: var(--splitpanes-bg); + + .splitpanes__pane { + background-color: var(--splitpanes-bg); + border-color: var(--splitpanes-border); + } + + .splitpanes__splitter { + background-color: var(--splitpanes-splitter-bg); + border-color: var(--splitpanes-border); + + &:hover { + background-color: var(--splitpanes-splitter-hover-bg); + } + + &:before, + &:after { + background-color: var(--splitpanes-border); + } + } + } + + /* 表格样式覆盖 */ + .el-table { + --el-table-header-bg-color: var(--el-bg-color-overlay) !important; + --el-table-header-text-color: var(--el-text-color-regular) !important; + --el-table-border-color: var(--el-border-color-light) !important; + --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important; + + .el-table__header-wrapper, .el-table__fixed-header-wrapper { + th { + background-color: var(--el-bg-color-overlay, #f8f8f9) !important; + color: var(--el-text-color-regular, #515a6e); + } + } + } + + /* 树组件高亮样式覆盖 */ + .el-tree { + .el-tree-node.is-current > .el-tree-node__content { + background-color: var(--el-bg-color-overlay) !important; + color: var(--el-color-primary); + } + + .el-tree-node__content:hover { + background-color: var(--el-bg-color-overlay); + } + } + + /* 下拉菜单样式覆盖 */ + .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{ + background-color: var(--navbar-hover) !important; + } + + /* blockquote样式覆盖 */ + blockquote { + background-color: var(--blockquote-bg) !important; + border-left-color: var(--blockquote-border) !important; + color: var(--blockquote-text) !important; + } + + /* 时间表达式标题样式覆盖 */ + .popup-result .title { + background: var(--cron-border); + } + +} + diff --git a/src/components/Crontab/index.vue b/src/components/Crontab/index.vue index f1d7201..71f3824 100644 --- a/src/components/Crontab/index.vue +++ b/src/components/Crontab/index.vue @@ -251,7 +251,6 @@ onMounted(() => { .popup-main { position: relative; margin: 10px auto; - background: #fff; border-radius: 5px; font-size: 12px; overflow: hidden; diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 8b6f7a8..ab1dc36 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -7,6 +7,7 @@ xmlns="http://www.w3.org/2000/svg" width="64" height="64" + fill="currentColor" > diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue index e628094..1f666d3 100644 --- a/src/components/TopNav/index.vue +++ b/src/components/TopNav/index.vue @@ -196,7 +196,7 @@ onMounted(() => { /* 背景色隐藏 */ .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover { - background-color: #ffffff !important; + background-color: #ffffff; } /* 图标右间距 */ @@ -211,4 +211,6 @@ onMounted(() => { margin-left: 8px; margin-top: 0px; } + + diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue deleted file mode 100644 index 82cafb7..0000000 --- a/src/components/TreeSelect/index.vue +++ /dev/null @@ -1,156 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index f669a6d..e0e2df8 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -18,6 +18,13 @@ + +
+ + +
+ + @@ -98,6 +105,10 @@ const emits = defineEmits(['setLayout']) function setLayout() { emits('setLayout'); } + +function toggleTheme() { + settingsStore.toggleTheme() +} diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index 2cd6617..b8460a5 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -257,13 +257,14 @@ function handleScroll() { } -