From fb1e359e2d77c80145ea252b614a5298af648599 Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Wed, 17 Dec 2025 14:26:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/element-ui.scss | 40 +- src/assets/styles/index.scss | 5 +- src/assets/styles/sidebar.scss | 30 +- src/assets/styles/variables.module.scss | 48 +- src/layout/components/Navbar.vue | 218 ++++--- src/layout/components/Settings/index.vue | 2 +- src/layout/components/TagsView/ScrollPane.vue | 159 +++--- src/layout/components/TagsView/index.vue | 537 ++++++++++-------- src/main.js | 6 + src/settings.js | 91 ++- src/store/modules/settings.js | 2 +- .../basicManage/inspectionStation/config.js | 19 + .../basicManage/inspectionStation/index.vue | 12 +- src/views/index.vue | 500 +++++----------- src/views/personManage/Person/index.vue | 6 +- 15 files changed, 835 insertions(+), 840 deletions(-) create mode 100644 src/views/basicManage/inspectionStation/config.js diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index 0f175f2..325aece 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -1,8 +1,46 @@ -// cover some element-ui styles +// cover some element-ui styles - 现代化蓝色主题 + +// Element Plus 全局样式优化 +:root { + --el-color-primary: #1677ff; + --el-color-primary-light-3: #91caff; + --el-color-primary-light-5: #d6e4ff; + --el-color-primary-light-7: #f0f7ff; + --el-color-primary-light-8: #f5f9ff; + --el-color-primary-light-9: #fafcff; + --el-color-primary-dark-2: #0958d9; + + // 按钮样式优化 + --el-button-border-radius: 6px; + --el-button-hover-bg-color: #4096ff; + --el-button-active-bg-color: #0958d9; + + // 输入框样式优化 + --el-input-border-radius: 6px; + --el-input-focus-border-color: #1677ff; + + // 表格样式优化 + --el-table-border-color: #f0f0f0; + --el-table-header-bg-color: #fafafa; + --el-table-row-hover-bg-color: #f5f9ff; + + // 标签页样式优化 + --el-tabs-header-height: 48px; + --el-tabs-active-color: #1677ff; + + // 卡片样式优化 + --el-card-border-radius: 8px; + --el-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} .el-breadcrumb__inner, .el-breadcrumb__inner a { font-weight: 400 !important; + color: #666; + + &:hover { + color: #1677ff; + } } .el-upload { diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 87898e6..314a9ca 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -160,11 +160,12 @@ aside { .link-type, .link-type:focus { - color: #337ab7; + color: #1677ff; cursor: pointer; + transition: color 0.3s ease; &:hover { - color: rgb(32, 160, 255); + color: #4096ff; } } diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 54d7441..2c7c220 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -24,8 +24,8 @@ left: 0; z-index: 1001; overflow: hidden; - -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 2px 0 8px rgba(22, 119, 255, 0.15); + box-shadow: 2px 0 8px rgba(22, 119, 255, 0.15); // reset element-ui css .horizontal-collapse-transition { @@ -80,24 +80,44 @@ display: inline-block !important; } - // menu hover + // menu hover - 现代化蓝色主题 .sub-menu-title-noDropdown, .el-sub-menu__title { + transition: all 0.3s ease; &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(255, 255, 255, 0.1) !important; } } & .theme-dark .is-active > .el-sub-menu__title { color: vars.$base-menu-color-active !important; + background-color: rgba(255, 255, 255, 0.15) !important; + } + + & .theme-dark .el-menu-item.is-active { + background-color: rgba(255, 255, 255, 0.15) !important; + color: vars.$base-menu-color-active !important; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3px; + background-color: #ffffff; + border-radius: 0 2px 2px 0; + } } & .nest-menu .el-sub-menu>.el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: vars.$base-sidebar-width !important; + transition: all 0.3s ease; &:hover { - background-color: rgba(0, 0, 0, 0.06) !important; + background-color: rgba(255, 255, 255, 0.1) !important; } } diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 8764e13..6930931 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -8,31 +8,31 @@ $tiffany: #4AB7BD; $yellow: #FEC171; $panGreen: #30B08F; -// 默认主题变量 -$menuText: #bfcbd9; -$menuActiveText: #409eff; -$menuBg: #304156; -$menuHover: #263445; +// 默认主题变量 - 现代化蓝色主题 +$menuText: #e8f4ff; +$menuActiveText: #ffffff; +$menuBg: #1677ff; +$menuHover: #0958d9; // 浅色主题theme-light $menuLightBg: #ffffff; -$menuLightHover: #f0f1f5; +$menuLightHover: #f0f7ff; $menuLightText: #303133; -$menuLightActiveText: #409EFF; +$menuLightActiveText: #1677ff; // 基础变量 $base-sidebar-width: 200px; $sideBarWidth: 200px; -// 菜单暗色变量 -$base-menu-color: #bfcbd9; -$base-menu-color-active: #f4f4f5; -$base-menu-background: #304156; -$base-sub-menu-background: #1f2d3d; -$base-sub-menu-hover: #001528; +// 菜单暗色变量 - 现代化蓝色主题 +$base-menu-color: #e8f4ff; +$base-menu-color-active: #ffffff; +$base-menu-background: #1677ff; +$base-sub-menu-background: #0958d9; +$base-sub-menu-hover: #003eb3; -// 组件变量 -$--color-primary: #409EFF; +// 组件变量 - 现代化蓝色主题 +$--color-primary: #1677ff; $--color-success: #67C23A; $--color-warning: #E6A23C; $--color-danger: #F56C6C; @@ -67,17 +67,31 @@ $--color-info: #909399; // CSS变量定义 :root { - /* 亮色模式变量 */ + /* 亮色模式变量 - 现代化蓝色主题 */ --sidebar-bg: #{$menuBg}; --sidebar-text: #{$menuText}; --menu-hover: #{$menuHover}; + --menu-active-bg: rgba(255, 255, 255, 0.15); --navbar-bg: #ffffff; --navbar-text: #303133; + --navbar-border: #f0f0f0; + + /* Element Plus 主题色 */ + --el-color-primary: #1677ff; + --el-color-primary-light-1: #4096ff; + --el-color-primary-light-2: #69b1ff; + --el-color-primary-light-3: #91caff; + --el-color-primary-light-4: #bae0ff; + --el-color-primary-light-5: #d6e4ff; + --el-color-primary-light-6: #e6f4ff; + --el-color-primary-light-7: #f0f7ff; + --el-color-primary-light-8: #f5f9ff; + --el-color-primary-light-9: #fafcff; + --el-color-primary-dark-2: #0958d9; /* splitpanes default-theme 变量 */ --splitpanes-default-bg: #ffffff; - } // 暗黑模式变量 diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index f903134..249cb27 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,56 +1,72 @@ - \ No newline at end of file + diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index ad2b8ca..ae5d9d4 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -1,45 +1,51 @@ \ No newline at end of file + diff --git a/src/main.js b/src/main.js index f1f6fe2..a0860e4 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,8 @@ import '@/assets/styles/index.scss' // global css import App from './App' import store from './store' import router from './router' +import { handleThemeStyle } from '@/utils/theme' +import useSettingsStore from '@/store/modules/settings' import directive from './directive' // directive // 注册指令 @@ -81,4 +83,8 @@ app.use(ElementPlus, { size: Cookies.get('size') || 'default' }) +// 初始化主题色 +const settingsStore = useSettingsStore() +handleThemeStyle(settingsStore.theme) + app.mount('#app') diff --git a/src/settings.js b/src/settings.js index ac1b77c..000f6ca 100644 --- a/src/settings.js +++ b/src/settings.js @@ -1,57 +1,56 @@ export default { - /** - * 网页标题 - */ - title: import.meta.env.VITE_APP_TITLE, + /** + * 网页标题 + */ + title: import.meta.env.VITE_APP_TITLE, - /** - * 侧边栏主题 深色主题theme-dark，浅色主题theme-light - */ - sideTheme: 'theme-dark', + /** + * 侧边栏主题 深色主题theme-dark，浅色主题theme-light + */ + sideTheme: 'theme-dark', - /** - * 是否系统布局配置 - */ - showSettings: true, + /** + * 是否系统布局配置 + */ + showSettings: true, - /** - * 是否显示顶部导航 - */ - topNav: false, + /** + * 是否显示顶部导航 + */ + topNav: false, - /** - * 是否显示 tagsView - */ - tagsView: true, - - /** - * 显示页签图标 - */ - tagsIcon: false, + /** + * 是否显示 tagsView + */ + tagsView: true, - /** - * 是否固定头部 - */ - fixedHeader: false, + /** + * 显示页签图标 + */ + tagsIcon: false, - /** - * 是否显示logo - */ - sidebarLogo: true, + /** + * 是否固定头部 + */ + fixedHeader: true, - /** - * 是否显示动态标题 - */ - dynamicTitle: false, + /** + * 是否显示logo + */ + sidebarLogo: true, - /** - * 是否显示底部版权 - */ - footerVisible: false, + /** + * 是否显示动态标题 + */ + dynamicTitle: false, - /** - * 底部版权文本内容 - */ - footerContent: 'Copyright © 2018-2025 RuoYi. All Rights Reserved.' + /** + * 是否显示底部版权 + */ + footerVisible: false, + + /** + * 底部版权文本内容 + */ + footerContent: 'Copyright © 2025 计划管理平台. All Rights Reserved.', } - diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 2913564..96a0b07 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -14,7 +14,7 @@ const useSettingsStore = defineStore( { state: () => ({ title: '', - theme: storageSetting.theme || '#409EFF', + theme: storageSetting.theme || '#1677ff', sideTheme: storageSetting.sideTheme || sideTheme, showSettings: showSettings, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, diff --git a/src/views/basicManage/inspectionStation/config.js b/src/views/basicManage/inspectionStation/config.js new file mode 100644 index 0000000..d6243de --- /dev/null +++ b/src/views/basicManage/inspectionStation/config.js @@ -0,0 +1,19 @@ +export default { + formColumns: [ + { + type: 'input', + prop: 'name', + placeholder: '请输入运检站名称', + }, + ], + tableColumns: [ + { + prop: 'name', + label: '运检站名称', + }, + { + prop: 'name', + label: '备注', + }, + ], +} diff --git a/src/views/basicManage/inspectionStation/index.vue b/src/views/basicManage/inspectionStation/index.vue index 6469a49..e5ec69b 100644 --- a/src/views/basicManage/inspectionStation/index.vue +++ b/src/views/basicManage/inspectionStation/index.vue @@ -1,9 +1,13 @@ - + diff --git a/src/views/index.vue b/src/views/index.vue index 90b609f..184047d 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,429 +1,221 @@ - + diff --git a/src/views/personManage/Person/index.vue b/src/views/personManage/Person/index.vue index 7afd015..9fed1ae 100644 --- a/src/views/personManage/Person/index.vue +++ b/src/views/personManage/Person/index.vue @@ -1,9 +1,7 @@ - +