From d27abbb5293ab33990ad7895b059266639ad5fb5 Mon Sep 17 00:00:00 2001 From: xqzp2026 Date: Mon, 13 Apr 2026 16:41:59 +0930 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=AB=AF=20UI=20=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=85=A8=E9=9D=A2=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 建立 Design Token 体系（variables.scss），统一颜色、间距、圆角、阴影、字体 - Element Plus 主题对接，通过 CSS 变量覆盖组件样式，删除所有 !important 按钮覆盖 - 统一侧边栏/头部/标签栏配色，侧边栏背景跟随主色调 - 全局组件样式规范化（按钮、输入框、表格、弹窗、抽屉、标签、分页等圆角和交互统一） - 左侧树面板改为搜索区级联选择器（7个基础信息页面+计划任务） - 搜索区封装为 qu-search-area 卡片式组件，超过5项自动展开/收起 - 表格操作按钮集成到 qu-table 组件工具栏 - 表格高度自动撑满（ResizeObserver），列宽自动伸缩（min-width） - 新增主题设置（主色切换+调色板+暗色/浅色模式+跟随系统） - 新增上下布局模式（顶部水平导航菜单+页面标题） - 暗色模式完整适配（表格、弹窗、分页、斑马纹等） - 布局优化：tags+头像合并一行，收缩按钮改为侧边栏半圆触发器 - 后端 MySQL 配置添加 allowPublicKeyRetrieval=true Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/main/resources/application-test.yml | 6 +- .../witcleansystem/src/Assets/css/base.scss | 607 +++++++++++++++--- .../src/Assets/css/variables.scss | 120 ++++ .../src/Components/common/headerCom.vue | 375 +++++++---- .../src/Components/common/sideMenuCom.vue | 174 ++++- .../src/Components/common/tagsCom.vue | 64 +- .../src/Components/common/topMenuCom.vue | 288 +++++++++ .../public/quButttonGroup/buttonGroup.vue | 5 +- .../public/quSearchArea/searchArea.vue | 149 +++++ .../src/Components/public/quTable/table.vue | 119 +++- .../src/Components/public/quTree/tree.vue | 14 +- .../taskCenter/purifierTaskDetailCom.vue | 2 +- .../ObjectManage/ObjectDataManage.vue | 298 ++++----- .../ObjectManage/SceneObjectManage.vue | 227 ++++--- .../ObjectManage/ServeMatterManage.vue | 257 ++++---- .../src/Page/BasicInfo/RegionalGridManage.vue | 284 ++++---- .../src/Page/BasicInfo/SceneManage.vue | 163 +++-- .../src/Page/BasicInfo/ToolMange.vue | 77 +-- .../BasicInfo/WorkManage/ManageScheme.vue | 290 ++++----- .../BasicInfo/WorkManage/WorkDataManage.vue | 135 ++-- .../HEConfig/ConfigureWorkCredits.vue | 15 +- .../HEConfig/PointWagesConfig.vue | 15 +- frontend/witcleansystem/src/Page/Home.vue | 208 ++++-- frontend/witcleansystem/src/Page/Login.vue | 2 +- frontend/witcleansystem/src/Page/MainPage.vue | 3 +- .../DistrictStatistics.vue | 98 ++- .../EfficiencyStatement.vue | 65 +- .../PersonStatistics.vue | 203 +++--- .../PersonEfficiencyCenter/TaskStatistics.vue | 304 ++++----- .../SystemSet/AuthSet/AuthManage/Index.vue | 19 +- .../src/Page/SystemSet/PageManage/Index.vue | 11 +- .../Page/SystemSet/SystemParamSet/Index.vue | 28 +- .../Page/TaskCenter/PatrolTask/PatrolPlan.vue | 19 +- .../Page/TaskCenter/PatrolTask/PatrolTask.vue | 20 +- .../TaskCenter/PatrolTask/PatrolTaskList.vue | 20 +- .../src/Page/TaskCenter/PunchRecord.vue | 18 +- .../PunchRecords/PunchRecordDetail.vue | 31 +- .../PunchRecords/PunchRecordList.vue | 31 +- .../src/Page/TaskCenter/PurifierTask.vue | 46 +- .../TaskCenter/TaskSet/AssignTask/Index.vue | 41 +- .../TaskCenter/TaskSet/DeviceTask/Index.vue | 17 +- .../TaskCenter/TaskSet/PlanTask/Index.vue | 102 ++- .../src/Page/TaskCenter/UserReportManage.vue | 41 +- .../src/Page/TaskCenter/UserReportTask.vue | 46 +- .../src/Page/UserCenter/SkillManage.vue | 16 +- .../src/Page/UserCenter/TagsManage.vue | 16 +- .../src/Page/UserCenter/TeamManage.vue | 17 +- .../src/Page/UserCenter/UserManage.vue | 7 +- .../witcleansystem/src/Utils/themeUtils.js | 119 ++++ frontend/witcleansystem/src/main.js | 5 + frontend/witcleansystem/vite.config.js | 2 +- 51 files changed, 3168 insertions(+), 2071 deletions(-) create mode 100644 frontend/witcleansystem/src/Assets/css/variables.scss create mode 100644 frontend/witcleansystem/src/Components/common/topMenuCom.vue create mode 100644 frontend/witcleansystem/src/Components/public/quSearchArea/searchArea.vue create mode 100644 frontend/witcleansystem/src/Utils/themeUtils.js diff --git a/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml b/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml index ace659f..6a1cbd0 100644 --- a/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml +++ b/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml @@ -2,7 +2,7 @@ server: port: 8095 #redis 多DB配置 redis: - host: 192.168.1.181 + host: localhost port: 6379 password: kaixinjiuhao timeout: 30000 @@ -47,13 +47,13 @@ spring: datasource: type: com.alibaba.druid.pool.DruidDataSource db1: - url: jdbc:mysql://192.168.1.181:3306/xiaoqu_comples_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true + url: jdbc:mysql://localhost:3306/xiaoqu_comples_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true&allowPublicKeyRetrieval=true username: root password: kaixinjiuhao driver-class-name: com.mysql.cj.jdbc.Driver db2: - url: jdbc:mysql://192.168.1.181:3306/xiaoqu_intellectual_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true + url: jdbc:mysql://localhost:3306/xiaoqu_intellectual_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true&allowPublicKeyRetrieval=true username: root password: kaixinjiuhao driver-class-name: com.mysql.cj.jdbc.Driver diff --git a/frontend/witcleansystem/src/Assets/css/base.scss b/frontend/witcleansystem/src/Assets/css/base.scss index cd745f4..8da3463 100644 --- a/frontend/witcleansystem/src/Assets/css/base.scss +++ b/frontend/witcleansystem/src/Assets/css/base.scss @@ -1,95 +1,417 @@ @charset "UTF-8"; -$default-begin-color: #6094fb; -$default-end-color: #888afa; -$default-color: #6d73fb; -$menu-bg-color: #000; + +// Legacy SCSS variables (kept for any remaining references) +$default-begin-color: #6366f1; +$default-end-color: #818cf8; +$default-color: #6366f1; +$menu-bg-color: #1e293b; + +// ========================================== +// Element Plus Theme Override via CSS Variables +// ========================================== +:root { + --el-color-primary: var(--color-primary); + --el-color-primary-light-3: var(--color-primary-light); + --el-color-primary-dark-2: var(--color-primary-dark); + --el-color-success: var(--color-success); + --el-color-warning: var(--color-warning); + --el-color-danger: var(--color-danger); + --el-color-info: var(--color-info); + --el-border-color: var(--color-border); + --el-border-color-light: var(--color-border-light); + --el-border-radius-base: var(--radius-sm); + --el-font-size-base: var(--font-size-base); + --el-text-color-primary: var(--color-text-primary); + --el-text-color-regular: var(--color-text-secondary); + --el-text-color-placeholder: var(--color-text-placeholder); + --el-bg-color-page: var(--color-bg-page); +} + .default-bg { - background-image: -webkit-gradient( - linear, - left top, - right top, - from(#6094fb), - to(#888afa) - ); - background-image: linear-gradient(to right, #6094fb, #888afa); + background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light)); } -/* 修改el-button 默认样式 */ -.el-button--primary.is-active, -.el-button--primary:active { - background: #20b2aa !important; - border-color: #20b2aa !important; - color: #fff !important; +// ========================================== +// Element Plus Component Style Normalization +// ========================================== + +// ---------- Global ---------- +* { + transition: background-color 0.2s, border-color 0.2s, color 0.15s, box-shadow 0.15s; } -.el-button--primary:focus, -.el-button--primary:hover { - background: #48d1cc !important; - border-color: #48d1cc !important; - color: #fff !important; +// ---------- Button ---------- +.el-button { + border-radius: var(--radius-md); + font-weight: 500; + letter-spacing: 0.3px; + transition: all 0.2s ease; + + &:focus-visible { + outline: 2px solid var(--color-primary-light); + outline-offset: 1px; + } + + &--primary { + box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3); + &:hover, &:focus { + box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35); + } + &:active { + transform: scale(0.97); + } + } + + &--success { + box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3); + } + &--warning { + box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3); + } + &--danger { + box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3); + } + + &.is-round { + border-radius: 999px; + } + + &.is-circle { + border-radius: 50%; + } } -.el-button--primary { - color: #fff !important; - /* background-color: #20b2aa; */ - background-image: -webkit-gradient( - linear, - left top, - right top, - from(#6094fb), - to(#888afa) - ) !important; - background-image: linear-gradient(to right, #6094fb, #888afa) !important; - border-color: #6094fb !important; +// ---------- Input / Select / Cascader / DatePicker ---------- +.el-input__wrapper, +.el-textarea__inner { + border-radius: var(--radius-md); + transition: box-shadow 0.2s, border-color 0.2s; } +.el-select .el-input__wrapper, +.el-cascader .el-input__wrapper, +.el-date-editor.el-input__wrapper { + border-radius: var(--radius-md); +} + +.el-input-group__append, +.el-input-group__prepend { + border-radius: 0 var(--radius-md) var(--radius-md) 0; +} + +.el-input-group__prepend { + border-radius: var(--radius-md) 0 0 var(--radius-md); +} + +// ---------- Form ---------- .el-form-item__label-wrap { - margin-left: 5px !important; + margin-left: 5px; } .el-form--inline .el-form-item { - margin-bottom: 10px !important; + margin-bottom: 10px; } -.el-pagination--small .el-pagination__sizes .el-input--mini .el-input__inner { - height: 22px; - line-height: 22px !important; +.el-form-item__label { + font-weight: 500; + color: var(--color-text-secondary); +} + +// ---------- Table ---------- +.el-table { + font-size: var(--font-size-base); + border-radius: var(--radius-md); + overflow: hidden; + --el-table-bg-color: var(--color-bg-card); + --el-table-tr-bg-color: var(--color-bg-card); + --el-table-header-bg-color: var(--color-bg-page); + --el-table-border-color: var(--color-border); + background-color: var(--color-bg-card); + + // 所有表头单元格（含左上角索引列表头） + th.el-table__cell { + background-color: var(--color-bg-page) !important; + font-weight: 600; + color: var(--color-text-primary); + font-size: var(--font-size-sm); + } + + // 所有行背景 + tr { + background-color: var(--color-bg-card) !important; + } + + // 所有单元格背景继承行 + td.el-table__cell { + background-color: inherit !important; + } + + // 斑马纹偶行 + &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { + background-color: var(--color-bg-page) !important; + } + + // hover 行 + .el-table__body tr:hover > td.el-table__cell { + background-color: var(--color-primary-bg) !important; + } + + // 空数据区 + .el-table__empty-block { + background-color: var(--color-bg-card); + } + + // 内部容器 + .el-table__inner-wrapper::before { + background-color: var(--color-border); + } + + // 底部横向滚动条加大 + .el-scrollbar__bar.is-horizontal { + height: 10px; + } + .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb { + border-radius: 5px; + } } body .el-table th.gutter { - display: none !important; - width: 0px !important; + display: none; + width: 0; } body .el-table colgroup.gutter { - display: none !important; - width: 0px !important; + display: none; + width: 0; } +// ---------- Pagination ---------- +.el-pagination { + .el-pager li, + .btn-prev, + .btn-next { + border-radius: var(--radius-sm); + } + + .el-pager li.is-active { + font-weight: 600; + } +} + +// ---------- Dialog ---------- +.el-dialog { + border-radius: var(--radius-lg); + overflow: hidden; + + .el-dialog__header { + padding: var(--spacing-lg) var(--spacing-xl); + border-bottom: 1px solid var(--color-border-light); + margin-right: 0; + } + + .el-dialog__title { + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--color-text-primary); + } + + .el-dialog__headerbtn { + top: var(--spacing-lg); + right: var(--spacing-xl); + width: 28px; + height: 28px; + border-radius: var(--radius-sm); + transition: background 0.2s; + &:hover { + background: var(--color-border-light); + } + } + + .el-dialog__body { + padding: var(--spacing-xl); + } + + .el-dialog__footer { + padding: var(--spacing-md) var(--spacing-xl); + border-top: 1px solid var(--color-border-light); + } +} + +// ---------- Drawer ---------- +.el-drawer { + .el-drawer__header { + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: 0; + padding: var(--spacing-lg) var(--spacing-xl); + border-bottom: 1px solid var(--color-border-light); + } + + .el-drawer__body { + padding: var(--spacing-xl); + } + + .el-drawer__footer { + padding: var(--spacing-md) var(--spacing-xl); + border-top: 1px solid var(--color-border-light); + } +} + +// ---------- Tag ---------- +.el-tag { + border-radius: var(--radius-sm); + font-size: var(--font-size-xs); +} + +.el-tag--round { + border-radius: 999px; +} + +// ---------- Menu ---------- +.el-menu { + border-right: none; + border-bottom: none; +} + +// ---------- Tabs ---------- +.el-tabs__item { + transition: color 0.2s; +} + +// ---------- Popover / Tooltip ---------- +.el-popover.el-popper { + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); +} + +.el-tooltip__popper { + border-radius: var(--radius-sm); +} + +// ---------- Dropdown ---------- +.el-dropdown-menu { + border-radius: var(--radius-md); + padding: var(--spacing-xs) 0; + box-shadow: var(--shadow-md); +} + +.el-dropdown-menu__item { + border-radius: var(--radius-sm); + margin: 0 var(--spacing-xs); + padding: var(--spacing-sm) var(--spacing-md); + transition: background 0.15s, color 0.15s; +} + +// ---------- Message / MessageBox ---------- +.el-message { + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); +} + +.el-message-box { + border-radius: var(--radius-lg); + overflow: hidden; + + .el-message-box__header { + padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md); + } + + .el-message-box__title { + font-size: var(--font-size-lg); + font-weight: 600; + } + + .el-message-box__btns .el-button { + border-radius: var(--radius-md); + } +} + +// ---------- Notification ---------- +.el-notification { + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); +} + +// ---------- Card ---------- +.el-card { + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + border: 1px solid var(--color-border-light); +} + +// ---------- Tree ---------- +.el-tree-node__content { + border-radius: var(--radius-sm); + transition: background-color 0.15s; +} + +// ---------- Checkbox / Radio ---------- +.el-checkbox__inner, +.el-radio__inner { + border-radius: var(--radius-sm); + transition: all 0.2s; +} + +.el-radio__inner { + border-radius: 50%; +} + +// ---------- Switch ---------- +.el-switch__core { + border-radius: 999px; +} + +// ---------- Skeleton ---------- +.el-skeleton__item { + border-radius: var(--radius-sm); +} + +// ---------- Badge ---------- +.el-badge__content { + border-radius: 999px; +} + +// ---------- Upload ---------- +.el-upload-dragger { + border-radius: var(--radius-md); + transition: border-color 0.2s; +} + +// ---------- Popover row buttons ---------- .btn-popover { - min-width: auto !important; + min-width: auto; + border-radius: var(--radius-md); } .btn-popover .row-buttons { text-align: center; + background: var(--color-primary-bg); + border-radius: var(--radius-sm); + margin-bottom: 4px; + transition: background 0.2s; } .btn-popover .row-buttons:hover { - background: #20b2aa; + background: var(--color-primary); } .btn-popover .row-buttons:hover button { - color: #fff !important; + color: #fff; display: block; width: 100%; height: 100%; } +.btn-popover .row-buttons button { + color: var(--color-primary); +} + .btn-popover .row-button { - /* border-right: 1px solid #f2f2f2; */ text-align: center; } +// ---------- Image viewer ---------- .el-image-viewer__wrapper .el-image-viewer__mask { background: #fff; opacity: 0.8; @@ -97,104 +419,204 @@ body .el-table colgroup.gutter { .el-image-viewer__wrapper > .el-image-viewer__btn.el-image-viewer__close { color: #ffffff; - background-color: grey; + background-color: var(--color-info); + border-radius: 50%; } +// ---------- Loading ---------- .overall-loading .el-loading-text { color: rgba(255, 255, 255, 0.76); } .overall-loading .el-loading-spinner i { - color: rgba(255, 255, 255, 0.781); + color: rgba(255, 255, 255, 0.78); font-size: 40px; } .el-loading-mask { - -webkit-transition: opactiy 0.1s !important; - transition: opactiy 0.1s !important; - z-index: 9999 !important; + transition: opacity 0.1s; + z-index: 9999; } + +// ========================================== +// Global Layout Utility Classes +// ========================================== + .main-container { - background-color: #fff; - padding: 0 10px; + background-color: var(--color-bg-card); + padding: 0 var(--spacing-md); box-sizing: border-box; + display: flex; + flex-direction: column; + height: calc(100vh - var(--page-top-offset)); } + +// Unified page container +.page-container { + padding: var(--spacing-lg); + background-color: var(--color-bg-card); + box-sizing: border-box; + display: flex; + flex-direction: column; + height: calc(100vh - var(--page-top-offset)); +} + +// Unified search area +.search-area { + padding: var(--spacing-md) var(--spacing-lg); + display: flex; + align-items: center; + flex-wrap: wrap; + flex-shrink: 0; +} + +// Unified table area — fill remaining space +.main-table { + padding: 0; + flex: 1; + min-height: 0; + overflow: hidden; +} + +// Unified task-box height +.task-box { + box-sizing: border-box; + height: calc(100vh - var(--page-top-offset)); + display: flex; + flex-direction: column; +} + +// Search wrapper — no shrink +.grid-right-btn, +.top-screen { + flex-shrink: 0; +} + +// Common page containers — flex column fill +.regional-grid, +.plan-task, +.user-manage { + display: flex; + flex-direction: column; + height: calc(100vh - var(--page-top-offset)); + box-sizing: border-box; + background-color: var(--color-bg-card); + overflow: hidden; + padding-bottom: 0; +} + +// ========================================== +// Form & Search Field Widths +// ========================================== + .screen-item { - width: 150px; + width: 160px; display: inline-block; } .screen-item .el-input { width: 100%; } + .form-item { width: 180px; } + .form-item .el-input { width: 100%; } + .form-item .el-date-editor.el-input, .form-item .el-date-editor.el-input__inner { width: 100%; } + .form-tip { - margin-left: 10px; - color: blue; + margin-left: var(--spacing-md); + color: var(--color-primary); cursor: pointer; } + +// ========================================== +// Left-Right Split Layout (tree + table) +// ========================================== + +.split-layout { + display: flex; + box-sizing: border-box; + height: calc(100vh - var(--page-top-offset)); + + .split-layout-left { + width: var(--tree-panel-width); + min-width: var(--tree-panel-width); + box-sizing: border-box; + padding: var(--spacing-xl); + background-color: var(--color-bg-card); + border-right: 1px solid var(--color-border-light); + overflow: auto; + } + + .split-layout-right { + flex: 1; + min-width: 0; + padding: var(--spacing-md); + background-color: var(--color-bg-card); + overflow: auto; + } +} + +// ========================================== +// Dialog / Hand-box Styles +// ========================================== + +// Dialog form standard spacing (replaces margin-top: -20px hack) +.dialog-form { + padding: var(--spacing-xl) 0; + border-top: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border); +} + .hand-box .hand-box-title { font-weight: bold; font-size: 18px; line-height: 40px; - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid var(--color-border-light); } .hand-box .hand-box-title > span { - font-size: 12px; - color: grey; - margin-left: 20px; + font-size: var(--font-size-xs); + color: var(--color-info); + margin-left: var(--spacing-xl); } .hand-box .hand-box-con { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; - padding: 10px 0; - flex-wrap: wrap; + padding: var(--spacing-md) 0; } .hand-box .hand-box-con .handle-item { width: 50%; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; justify-content: flex-start; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -ms-flex-line-pack: center; align-content: center; - margin-bottom: 10px; + margin-bottom: var(--spacing-md); } .hand-box .hand-box-con .handle-item.upload { width: 100%; - -ms-flex-wrap: wrap; flex-wrap: wrap; } .hand-box .hand-box-con .handle-item .handle-label { width: 120px; - color: #000; + color: var(--color-text-primary); } .hand-box .hand-box-con .handle-item .handle-value { - color: grey; + color: var(--color-info); } .hand-box .hand-box-con .handle-item .upload-item, @@ -204,20 +626,12 @@ body .el-table colgroup.gutter { } .hand-box .hand-box-con .handle-item .upload-item { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-line-pack: center; align-content: center; - border: 1px dashed #f2f2f2; + border: 1px dashed var(--color-border-light); position: relative; cursor: pointer; } @@ -242,14 +656,13 @@ body .el-table colgroup.gutter { .hand-box .hand-box-con .handle-item .img-item { text-align: center; - margin-left: 20px; + margin-left: var(--spacing-xl); overflow: hidden; } .hand-box .hand-box-con .handle-item .img-item .img-box { width: 100%; - padding: 10px; - -webkit-box-sizing: border-box; + padding: var(--spacing-md); box-sizing: border-box; position: relative; } @@ -267,7 +680,7 @@ body .el-table colgroup.gutter { right: 0; top: 0; border-radius: 50%; - background-color: #f2f2f2f2; + background-color: var(--color-border-light); line-height: 20px; text-align: center; cursor: pointer; @@ -275,20 +688,18 @@ body .el-table colgroup.gutter { } .hand-box .hand-box-con .handle-item .img-item .img-box span:hover { - background-color: blue; + background-color: var(--color-primary); color: #fff; } .qu-dialog { position: absolute; width: 100%; - background-color: #fff; + background-color: var(--color-bg-card); } .qu-dialog .el-dialog { - margin: 0 !important; - width: 100% !important; - -webkit-box-shadow: 0 0px 0px !important; - box-shadow: 0 0px 0px !important; + margin: 0; + width: 100%; + box-shadow: none; } -/*# sourceMappingURL=base.css.map */ diff --git a/frontend/witcleansystem/src/Assets/css/variables.scss b/frontend/witcleansystem/src/Assets/css/variables.scss new file mode 100644 index 0000000..c9d8953 --- /dev/null +++ b/frontend/witcleansystem/src/Assets/css/variables.scss @@ -0,0 +1,120 @@ +:root { + // 主色 + --color-primary: #6366f1; + --color-primary-light: #818cf8; + --color-primary-dark: #4f46e5; + --color-primary-bg: #eef2ff; + + // 语义色 + --color-success: #22c55e; + --color-warning: #f59e0b; + --color-danger: #ef4444; + --color-info: #6b7280; + + // 中性色 + --color-text-primary: #1f2937; + --color-text-secondary: #6b7280; + --color-text-placeholder: #9ca3af; + --color-border: #e5e7eb; + --color-border-light: #f3f4f6; + --color-bg-page: #f5f7fa; + --color-bg-card: #ffffff; + + // 侧边栏（跟随主色） + --sidebar-bg: var(--color-primary-dark); + --sidebar-text: rgba(255, 255, 255, 0.75); + --sidebar-active: #fff; + --sidebar-width: 200px; + --sidebar-collapsed-width: 64px; + + // 间距（8px 基准栅格） + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 12px; + --spacing-lg: 16px; + --spacing-xl: 24px; + --spacing-2xl: 32px; + + // 头部 & 标签栏高度（tags+头像合并为一行） + --header-height: 50px; + --topbar-height: 40px; + --tags-height: 0px; + --content-padding-top: calc(var(--topbar-height) + 4px); + --page-top-offset: var(--content-padding-top); + + // 圆角 + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + + // 阴影 + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); + + // 字体 + --font-size-xs: 12px; + --font-size-sm: 13px; + --font-size-base: 14px; + --font-size-lg: 16px; + --font-size-xl: 20px; + + // 树面板（左右分栏布局） + --tree-panel-width: 280px; +} + +// 暗色模式 +[data-theme="dark"] { + --color-text-primary: #e5e7eb; + --color-text-secondary: #9ca3af; + --color-text-placeholder: #6b7280; + --color-border: #374151; + --color-border-light: #1f2937; + --color-bg-page: #111827; + --color-bg-card: #1f2937; + + --sidebar-bg: #0f172a; + --sidebar-text: #94a3b8; + + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); + + // Element Plus 暗色适配 + --el-bg-color: #1f2937; + --el-bg-color-overlay: #374151; + --el-bg-color-page: #111827; + --el-text-color-primary: #e5e7eb; + --el-text-color-regular: #d1d5db; + --el-text-color-secondary: #9ca3af; + --el-text-color-placeholder: #6b7280; + --el-border-color: #374151; + --el-border-color-light: #4b5563; + --el-border-color-lighter: #374151; + --el-border-color-extra-light: #1f2937; + --el-fill-color: #374151; + --el-fill-color-light: #1f2937; + --el-fill-color-lighter: #111827; + --el-fill-color-blank: #1f2937; + --el-mask-color: rgba(0, 0, 0, 0.6); + + // 表格暗色 + --el-table-bg-color: var(--color-bg-card); + --el-table-tr-bg-color: var(--color-bg-card); + --el-table-header-bg-color: var(--color-bg-page); + --el-table-row-hover-bg-color: #374151; + --el-table-current-row-bg-color: #374151; + --el-table-border-color: #374151; + --el-table-text-color: var(--color-text-primary); + --el-table-header-text-color: var(--color-text-secondary); + // stripe 斑马纹（偶行比奇行略浅） + --el-fill-color-lighter: #263345; + --el-color-white: var(--color-bg-card); + + // 分页暗色 + --el-pagination-bg-color: transparent; + --el-pagination-button-bg-color: #374151; + --el-pagination-hover-color: var(--color-primary); + + // 对话框/抽屉暗色 + --el-dialog-bg-color: #1f2937; + --el-drawer-bg-color: #1f2937; +} diff --git a/frontend/witcleansystem/src/Components/common/headerCom.vue b/frontend/witcleansystem/src/Components/common/headerCom.vue index 43a6fd2..531dfc5 100644 --- a/frontend/witcleansystem/src/Components/common/headerCom.vue +++ b/frontend/witcleansystem/src/Components/common/headerCom.vue @@ -1,45 +1,90 @@ diff --git a/frontend/witcleansystem/src/Components/common/sideMenuCom.vue b/frontend/witcleansystem/src/Components/common/sideMenuCom.vue index 2f0b79d..b46cd8f 100644 --- a/frontend/witcleansystem/src/Components/common/sideMenuCom.vue +++ b/frontend/witcleansystem/src/Components/common/sideMenuCom.vue @@ -1,9 +1,9 @@