From 2502de3081b02f46bab882839a7b2f38d12f8a6d Mon Sep 17 00:00:00 2001 From: lau <1807121535@qq.com> Date: Wed, 25 Mar 2026 22:33:41 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=20=E5=89=8D?= =?UTF-8?q?=E7=AB=AF=E6=A0=B7=E5=BC=8F=E5=88=9D=E6=AD=A5=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=B9=B6=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/base/_document.scss | 82 ++++----------- src/assets/styles/btn.scss | 99 ------------------- src/assets/styles/components/_card-shell.scss | 54 +--------- .../styles/components/_legacy-layout.scss | 54 ---------- .../styles/components/_legacy-utilities.scss | 55 ++--------- src/assets/styles/components/_misc.scss | 13 +++ src/assets/styles/components/_page-shell.scss | 19 +--- .../styles/components/_search-panel.scss | 34 +------ .../styles/components/_selector-dialog.scss | 5 + .../styles/components/_theme-helpers.scss | 14 +-- src/assets/styles/index.scss | 20 +--- src/assets/styles/layout/_surface.scss | 10 +- .../styles/layout/sidebar/_collapsed.scss | 2 +- src/assets/styles/layout/sidebar/_menu.scss | 2 +- src/assets/styles/layout/sidebar/_popper.scss | 2 +- .../styles/layout/sidebar/_responsive.scss | 2 +- src/assets/styles/layout/sidebar/_shell.scss | 4 +- src/assets/styles/mixin.scss | 6 ++ src/assets/styles/tokens/_theme-dark.scss | 7 +- src/assets/styles/tokens/_theme.scss | 11 ++- src/assets/styles/transition.scss | 5 +- .../styles/vendors/element-plus/_card.scss | 13 +++ .../styles/vendors/element-plus/_dialog.scss | 11 +-- .../vendors/element-plus/_dropdown.scss | 2 +- .../vendors/element-plus/_element-tokens.scss | 6 ++ .../vendors/element-plus/_feedback.scss | 3 +- .../styles/vendors/element-plus/_form.scss | 6 +- .../styles/vendors/element-plus/_index.scss | 12 ++- .../element-plus/{_base.scss => _misc.scss} | 19 +++- .../vendors/element-plus/_navigation.scss | 17 +--- .../{_primitives.scss => _overrides.scss} | 9 +- .../styles/vendors/element-plus/_popper.scss | 2 +- .../styles/vendors/element-plus/_table.scss | 52 +++++++++- src/components/Pagination/index.vue | 2 +- src/components/RoleSelect/index.vue | 2 +- src/components/UserSelect/index.vue | 4 +- src/layout/components/TopBar/index.vue | 5 + src/views/demo/demo/index.vue | 2 +- src/views/demo/tree/index.vue | 2 +- src/views/monitor/admin/index.vue | 2 +- src/views/monitor/cache/index.vue | 2 +- src/views/monitor/logininfo/index.vue | 2 +- src/views/monitor/online/index.vue | 2 +- src/views/monitor/operlog/index.vue | 2 +- src/views/monitor/snailjob/index.vue | 2 +- src/views/system/client/index.vue | 2 +- src/views/system/config/index.vue | 2 +- src/views/system/dept/index.vue | 2 +- src/views/system/dict/index.vue | 2 +- src/views/system/menu/index.vue | 2 +- src/views/system/notice/index.vue | 2 +- src/views/system/oss/config.vue | 2 +- src/views/system/oss/index.vue | 2 +- src/views/system/post/index.vue | 2 +- src/views/system/role/authUser.vue | 2 +- src/views/system/role/index.vue | 2 +- src/views/system/role/selectUser.vue | 2 +- src/views/system/user/authRole.vue | 2 +- src/views/system/user/index.vue | 2 +- src/views/system/user/profile/index.vue | 23 ++++- src/views/system/user/profile/userAvatar.vue | 5 + src/views/tool/gen/index.vue | 2 +- src/views/workflow/category/index.vue | 2 +- src/views/workflow/leave/index.vue | 2 +- .../workflow/processDefinition/index.vue | 2 +- src/views/workflow/processInstance/index.vue | 2 +- src/views/workflow/spel/index.vue | 2 +- src/views/workflow/task/allTaskWaiting.vue | 2 +- src/views/workflow/task/myDocument.vue | 2 +- src/views/workflow/task/taskCopyList.vue | 2 +- src/views/workflow/task/taskFinish.vue | 2 +- src/views/workflow/task/taskWaiting.vue | 2 +- 72 files changed, 274 insertions(+), 485 deletions(-) delete mode 100644 src/assets/styles/btn.scss delete mode 100644 src/assets/styles/components/_legacy-layout.scss create mode 100644 src/assets/styles/components/_misc.scss create mode 100644 src/assets/styles/vendors/element-plus/_card.scss create mode 100644 src/assets/styles/vendors/element-plus/_element-tokens.scss rename src/assets/styles/vendors/element-plus/{_base.scss => _misc.scss} (58%) rename src/assets/styles/vendors/element-plus/{_primitives.scss => _overrides.scss} (60%) diff --git a/src/assets/styles/base/_document.scss b/src/assets/styles/base/_document.scss index 654dc3f..7bf6d84 100644 --- a/src/assets/styles/base/_document.scss +++ b/src/assets/styles/base/_document.scss @@ -1,5 +1,6 @@ /* Global document styles and lightweight utility helpers. */ +// --- 视口与排版根 --- body { height: 100%; margin: 0; @@ -48,14 +49,6 @@ body, box-sizing: inherit; } -.no-padding { - padding: 0px !important; -} - -.padding-content { - padding: 4px 0; -} - a:focus, a:active { outline: none; @@ -73,34 +66,6 @@ div:focus { outline: none; } -.fr { - float: right; -} - -.fl { - float: left; -} - -.pr-5 { - padding-right: 5px; -} - -.pl-5 { - padding-left: 5px; -} - -.block { - display: block; -} - -.pointer { - cursor: pointer; -} - -.inlineBlock { - display: block; -} - .clearfix { &:after { visibility: hidden; @@ -112,33 +77,20 @@ div:focus { } } -aside { - background: #eef1f6; - padding: 8px 24px; - margin-bottom: 20px; - border-radius: var(--app-radius-md); - display: block; - line-height: 32px; - font-size: 16px; - font-family: - 'MiSans', - 'HarmonyOS Sans SC', - 'PingFang SC', - 'Source Han Sans SC', - 'Noto Sans SC', - 'Hiragino Sans GB', - 'Microsoft YaHei', - sans-serif; - color: #2c3e50; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - a { - color: #337ab7; - cursor: pointer; - - &:hover { - color: rgb(32, 160, 255); - } - } +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; } diff --git a/src/assets/styles/btn.scss b/src/assets/styles/btn.scss deleted file mode 100644 index 13a464a..0000000 --- a/src/assets/styles/btn.scss +++ /dev/null @@ -1,99 +0,0 @@ -@use './variables.module.scss' as *; - -@mixin colorBtn($color) { - background: $color; - - &:hover { - color: $color; - - &:before, - &:after { - background: $color; - } - } -} - -.blue-btn { - @include colorBtn($blue); -} - -.light-blue-btn { - @include colorBtn($light-blue); -} - -.red-btn { - @include colorBtn($red); -} - -.pink-btn { - @include colorBtn($pink); -} - -.green-btn { - @include colorBtn($green); -} - -.tiffany-btn { - @include colorBtn($tiffany); -} - -.yellow-btn { - @include colorBtn($yellow); -} - -.pan-btn { - font-size: 14px; - color: #fff; - padding: 14px 36px; - border-radius: var(--app-radius-md); - border: none; - outline: none; - transition: 600ms ease all; - position: relative; - display: inline-block; - - &:hover { - background: #fff; - - &:before, - &:after { - width: 100%; - transition: 600ms ease all; - } - } - - &:before, - &:after { - content: ''; - position: absolute; - top: 0; - right: 0; - height: 2px; - width: 0; - transition: 400ms ease all; - } - - &::after { - right: inherit; - top: inherit; - left: 0; - bottom: 0; - } -} - -.custom-button { - display: inline-block; - line-height: 1; - white-space: nowrap; - cursor: pointer; - background: #fff; - color: #fff; - -webkit-appearance: none; - text-align: center; - box-sizing: border-box; - outline: 0; - margin: 0; - padding: 10px 15px; - font-size: 14px; - border-radius: var(--app-radius-sm); -} diff --git a/src/assets/styles/components/_card-shell.scss b/src/assets/styles/components/_card-shell.scss index 654f312..22f2362 100644 --- a/src/assets/styles/components/_card-shell.scss +++ b/src/assets/styles/components/_card-shell.scss @@ -1,5 +1,7 @@ -/* Shared cards, panels, and content surfaces. */ +/* 业务列表/卡片页：分页、树、列表、el-card 等（与 vendors/element-plus 通用覆盖叠加，入口顺序见 index.scss）。 + * 属「页面模式」而非 EP 公共主题，故放在 components。 */ +// --- 历史「表单分区标题」样式 --- .form-header { font-size: 15px; color: #6379bb; @@ -8,13 +10,7 @@ padding-bottom: 5px; } -.pagination-container { - display: flex; - justify-content: flex-end; - margin-top: 18px; - padding: 10px 0 0 !important; -} - +// --- 树形容器描边（暗色覆盖在 _search-panel） --- .tree-border { margin-top: 8px; border: 1px solid rgba(148, 163, 184, 0.16); @@ -34,52 +30,12 @@ } } -.el-table .fixed-width .el-button--small { - padding-left: 0; - padding-right: 0; - width: inherit; -} - -.el-table .el-dropdown-link { - cursor: pointer; - color: #409eff; - margin-left: 10px; -} - -.el-table .el-dropdown, -.el-icon-arrow-down { - font-size: 12px; -} - .el-tree-node__content > .el-checkbox { margin-right: 8px; } -.list-group-striped > .list-group-item { - border-left: 0; - border-right: 0; - border-radius: 0; - padding-left: 0; - padding-right: 0; -} - -.list-group { - padding-left: 0px; - list-style: none; -} - -.list-group-item { - border-bottom: 1px solid #e7eaec; - border-top: 1px solid #e7eaec; - margin-bottom: -1px; - padding: 11px 0px; - font-size: 13px; -} - -.pull-right { - float: right !important; -} +// --- el-card 本业务页外观（与 EP vendors 叠加） --- .el-card__header { padding: 14px 16px 10px !important; min-height: auto; diff --git a/src/assets/styles/components/_legacy-layout.scss b/src/assets/styles/components/_legacy-layout.scss deleted file mode 100644 index 3c09c41..0000000 --- a/src/assets/styles/components/_legacy-layout.scss +++ /dev/null @@ -1,54 +0,0 @@ -/* Legacy shared layout helpers that were previously kept in index.scss. */ - -.components-container { - margin: 30px 50px; - position: relative; -} - -.text-center { - text-align: center; -} - -.sub-navbar { - height: 50px; - line-height: 50px; - position: relative; - width: 100%; - text-align: right; - padding-right: 20px; - transition: 600ms ease position; - background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); - - .subtitle { - font-size: 20px; - color: #fff; - } - - &.draft { - background: #d0d0d0; - } - - &.deleted { - background: #d0d0d0; - } -} - -.link-type, -.link-type:focus { - color: #337ab7; - cursor: pointer; - - &:hover { - color: rgb(32, 160, 255); - } -} - -.filter-container { - padding-bottom: 10px; - - .filter-item { - display: inline-block; - vertical-align: middle; - margin-bottom: 10px; - } -} diff --git a/src/assets/styles/components/_legacy-utilities.scss b/src/assets/styles/components/_legacy-utilities.scss index 3575154..b3d18d6 100644 --- a/src/assets/styles/components/_legacy-utilities.scss +++ b/src/assets/styles/components/_legacy-utilities.scss @@ -1,6 +1,5 @@ -/* Legacy shared utility classes that are still used across pages. */ +/* 工具类 */ -@use '../variables.module.scss' as *; .pt5 { padding-top: 5px; @@ -10,6 +9,11 @@ padding-right: 5px; } + +.pl5 { + padding-left: 5px; +} + .pb5 { padding-bottom: 5px; } @@ -66,31 +70,6 @@ margin-left: 20px; } -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: inherit; - font-weight: 500; - line-height: 1.1; - color: inherit; -} - -.el-form .el-form-item__label { - font-weight: 600; -} - -.el-dialog:not(.is-fullscreen) { - margin-top: 6vh !important; -} .el-dialog.scrollbar .el-dialog__body { overflow: auto; @@ -99,26 +78,6 @@ h6 { padding: 14px 22px 4px; } -.el-table { - .el-table__header-wrapper, - .el-table__fixed-header-wrapper { - th { - word-break: break-word; - background-color: $table-header-bg !important; - color: $table-header-text-color; - height: 40px !important; - font-size: 13px; - } - } - .el-table__body-wrapper { - .el-button [class*='el-icon-'] + span { - margin-left: 1px; - } - } -} -.el-menu--horizontal .el-menu-item .svg-icon + span, -.el-menu--horizontal .el-sub-menu__title .svg-icon + span { - margin-left: 3px; -} + diff --git a/src/assets/styles/components/_misc.scss b/src/assets/styles/components/_misc.scss new file mode 100644 index 0000000..3829d86 --- /dev/null +++ b/src/assets/styles/components/_misc.scss @@ -0,0 +1,13 @@ + + + +.link-type, +.link-type:focus { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } +} + diff --git a/src/assets/styles/components/_page-shell.scss b/src/assets/styles/components/_page-shell.scss index 8b6d284..6580677 100644 --- a/src/assets/styles/components/_page-shell.scss +++ b/src/assets/styles/components/_page-shell.scss @@ -6,14 +6,7 @@ gap: 12px; } -.page-shell { - display: flex; - flex-direction: column; - gap: 12px; -} - -.app-main > .page-shell, -.app-main > .page-shell.p-2 { +.app-main > .p-2 { padding: 0 !important; margin: 0 !important; } @@ -26,15 +19,7 @@ margin-bottom: 0 !important; } -.page-shell > .el-row, -.page-shell > .el-card, -.page-shell > .search-wrap, -.page-shell > div, -.page-shell > section { - margin-bottom: 0 !important; -} - -/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */ +// --- CRUD / 树表页用混入（在 .vue 内 @use 后 @include） --- @mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) { .data-table { diff --git a/src/assets/styles/components/_search-panel.scss b/src/assets/styles/components/_search-panel.scss index 544faae..52d9181 100644 --- a/src/assets/styles/components/_search-panel.scss +++ b/src/assets/styles/components/_search-panel.scss @@ -1,5 +1,6 @@ /* Search panel, table actions, and responsive panel shells. */ +// --- 表格工具列链接按钮（全局） --- .data-table .el-button.is-link { width: 28px !important; height: 28px !important; @@ -17,39 +18,6 @@ margin-bottom: 0 !important; } -.el-card.search-panel, -.el-card.side-panel { - border-radius: 16px !important; - overflow: hidden; -} - -.el-card.table-panel { - border-radius: 14px !important; - overflow: hidden; -} - -.el-card.search-panel .el-card__header, -.el-card.side-panel .el-card__header { - border-top-left-radius: 16px; - border-top-right-radius: 16px; -} - -.el-card.table-panel .el-card__header { - border-top-left-radius: 14px; - border-top-right-radius: 14px; -} - -.el-card.search-panel .el-card__body, -.el-card.side-panel .el-card__body { - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; -} - -.el-card.table-panel .el-card__body { - border-bottom-left-radius: 14px; - border-bottom-right-radius: 14px; -} - .search-panel { .el-card__header { display: block; diff --git a/src/assets/styles/components/_selector-dialog.scss b/src/assets/styles/components/_selector-dialog.scss index 2e93bfc..07930eb 100644 --- a/src/assets/styles/components/_selector-dialog.scss +++ b/src/assets/styles/components/_selector-dialog.scss @@ -1,5 +1,6 @@ /* Reusable scoped mixins for selector dialogs backed by cards and vxe tables. */ +/* 为多个根选择器统一设置 gap */ @mixin shell-gap($selectors...) { @each $selector in $selectors { #{$selector} { @@ -8,18 +9,21 @@ } } +/* 卡片区域撑满弹窗 */ @mixin card-shell { .selector-card { height: 100%; } } +/* 按弹窗根 class 收紧 body 顶内边距 */ @mixin dialog-body-padding($dialog-class) { .#{$dialog-class} :deep(.el-dialog__body) { padding-top: 12px; } } +/* 头部标题与已选 tag 换行、窄屏左对齐 */ @mixin selector-header-tags($mobile-breakpoint: 768px) { .selector-header { align-items: flex-start; @@ -45,6 +49,7 @@ } } +/* vxe 表格圆角与表头色，与全局表格 token 一致 */ @mixin selector-table { .selector-table { border-radius: 10px; diff --git a/src/assets/styles/components/_theme-helpers.scss b/src/assets/styles/components/_theme-helpers.scss index db46553..faff0b7 100644 --- a/src/assets/styles/components/_theme-helpers.scss +++ b/src/assets/styles/components/_theme-helpers.scss @@ -48,14 +48,6 @@ color: #888888; } -.img-circle { - border-radius: 50%; -} - -.img-lg { - width: 120px; - height: 120px; -} .avatar-upload-preview { position: absolute; @@ -68,8 +60,4 @@ overflow: hidden; } -.sortable-ghost { - opacity: 0.8; - color: #fff !important; - background: #42b983 !important; -} + diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 0db1959..c428620 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,3 +1,6 @@ +// ============================================================================= +// 全局样式入口（加载顺序即最终 CSS 层叠顺序，后载入的同优先级规则会覆盖先载入的） +// ============================================================================= @use './variables.module.scss' as *; @use './mixin.scss'; @use './transition.scss'; @@ -8,7 +11,6 @@ @use './layout/sidebar/collapsed'; @use './layout/sidebar/responsive'; @use './layout/sidebar/popper' as sidebar-popper; -@use './components/legacy-layout'; @use './components/legacy-utilities'; @use './components/page-shell'; @use './components/card-shell'; @@ -16,18 +18,6 @@ @use './components/table-toolbar'; @use './components/query-form'; @use './components/search-panel'; -// element样式放最上面，让下面的自定义样式可以覆盖默认样式 -@use 'element-plus/dist/index.css'; -@use './vendors/element-plus/primitives'; -@use './vendors/element-plus/base'; -@use './vendors/element-plus/dialog'; -@use './vendors/element-plus/dropdown'; -@use './vendors/element-plus/form'; -@use './vendors/element-plus/feedback'; -@use './vendors/element-plus/popper' as element-popper; -@use './vendors/element-plus/shell' as element-shell; -@use './vendors/element-plus/navigation'; -@use './vendors/element-plus/table'; -@use './btn.scss'; -@use 'animate.css'; +@use './vendors/element-plus/index' as element-custom; +@use 'animate.css'; diff --git a/src/assets/styles/layout/_surface.scss b/src/assets/styles/layout/_surface.scss index 367ce2a..631788d 100644 --- a/src/assets/styles/layout/_surface.scss +++ b/src/assets/styles/layout/_surface.scss @@ -1,13 +1,11 @@ -/* Shared page shells that are not tied to a specific component library. */ +/* 主内容区面板（.app-container、.panel、.search）：不依赖 Element 类名，与 components 中 EP 类补丁区分。 */ +// --- 整块内容容器（常见于路由视图外包一层） --- .app-container { - padding: 16px; - background: var(--app-surface-bg); - border: 1px solid var(--app-surface-border); - border-radius: var(--app-radius-lg); - box-shadow: var(--app-shadow-sm); + } +// --- 可复用面板条（hover 抬升阴影，非 el-card） --- .panel, .search { margin-bottom: 0.75rem; diff --git a/src/assets/styles/layout/sidebar/_collapsed.scss b/src/assets/styles/layout/sidebar/_collapsed.scss index 0034f33..c7e572a 100644 --- a/src/assets/styles/layout/sidebar/_collapsed.scss +++ b/src/assets/styles/layout/sidebar/_collapsed.scss @@ -1,4 +1,4 @@ -/* Collapsed desktop sidebar behavior and compact trigger states. */ +/* 桌面端折叠侧栏：窄宽、仅图标、子菜单箭头隐藏与 tooltip 触发区域（类名 .hideSidebar）。 */ #app { .hideSidebar { diff --git a/src/assets/styles/layout/sidebar/_menu.scss b/src/assets/styles/layout/sidebar/_menu.scss index e860fcf..5e5bb7a 100644 --- a/src/assets/styles/layout/sidebar/_menu.scss +++ b/src/assets/styles/layout/sidebar/_menu.scss @@ -1,4 +1,4 @@ -/* Menu hover, active states, and nested item styling. */ +/* 侧栏内 el-menu：一级/嵌套项的 hover、active、浅色与 theme-dark 分支（与 _shell 中变量定义配合）。 */ @use '../../variables.module.scss' as *; diff --git a/src/assets/styles/layout/sidebar/_popper.scss b/src/assets/styles/layout/sidebar/_popper.scss index 92477f0..03468dc 100644 --- a/src/assets/styles/layout/sidebar/_popper.scss +++ b/src/assets/styles/layout/sidebar/_popper.scss @@ -1,4 +1,4 @@ -/* Collapsed navigation poppers and popup menu refinements. */ +/* 折叠后弹出子菜单（el-popper.is-pure）：圆角与弹出层内 menu 项样式。 */ .el-menu--vertical { & > .el-menu { diff --git a/src/assets/styles/layout/sidebar/_responsive.scss b/src/assets/styles/layout/sidebar/_responsive.scss index 0d48152..428482a 100644 --- a/src/assets/styles/layout/sidebar/_responsive.scss +++ b/src/assets/styles/layout/sidebar/_responsive.scss @@ -1,4 +1,4 @@ -/* Responsive sidebar behavior for mobile and transition disabling. */ +/* 移动端侧栏：抽屉式滑出、隐藏时 translate；.withoutAnimation 关闭过渡（与布局组件 class 约定一致）。 */ @use '../../variables.module.scss' as *; diff --git a/src/assets/styles/layout/sidebar/_shell.scss b/src/assets/styles/layout/sidebar/_shell.scss index 1b2e495..3e30470 100644 --- a/src/assets/styles/layout/sidebar/_shell.scss +++ b/src/assets/styles/layout/sidebar/_shell.scss @@ -1,8 +1,9 @@ -/* Sidebar shell, base sizing, and main container offsets. */ +/* 侧栏外壳：固定定位宽度、主区左边距、滚动条与 el-menu 根级样式；与 _menu/_collapsed/_responsive 分工。 */ @use '../../variables.module.scss' as *; #app { + // --- 主内容区相对侧栏的偏移 --- .main-container { height: 100%; transition: margin-left 0.28s; @@ -15,6 +16,7 @@ margin-left: 0 !important; } + // --- 侧栏固定列：宽度过渡、主题下滚动条内菜单色变量 --- .sidebar-container { -webkit-transition: width 0.28s; transition: width 0.28s; diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 5250e71..ee9346f 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -1,3 +1,5 @@ + +// 清除浮动（嵌套用） @mixin clearfix { &:after { content: ''; @@ -6,6 +8,7 @@ } } +// WebKit 滚动条配色（用于可滚动容器） @mixin scrollBar { &::-webkit-scrollbar-track-piece { background: #d3dce6; @@ -21,18 +24,21 @@ } } +// 铺满父级的相对定位层 @mixin relative { position: relative; width: 100%; height: 100%; } +// 百分比宽度水平居中块 @mixin pct($pct) { width: #{$pct}; position: relative; margin: 0 auto; } +// CSS 三角箭头（极少用，保留兼容） @mixin triangle($width, $height, $color, $direction) { $width: $width/2; $color-border-style: $height solid $color; diff --git a/src/assets/styles/tokens/_theme-dark.scss b/src/assets/styles/tokens/_theme-dark.scss index dd30bc8..63741a9 100644 --- a/src/assets/styles/tokens/_theme-dark.scss +++ b/src/assets/styles/tokens/_theme-dark.scss @@ -1,4 +1,4 @@ -/* Dark theme CSS variables and component token overrides. */ +/* 暗色主题：在 html.dark 上覆写与浅色同名的业务/app 变量 */ html.dark { --menuBg: #111827; @@ -15,10 +15,12 @@ html.dark { --tableHeaderBg: var(--el-bg-color); --tableHeaderTextColor: var(--el-text-color); + // --- 树节点：暗色下修正 primary 浅底色 --- .el-tree-node__content { --el-color-primary-light-9: #262727; } + // --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 --- .el-button--primary { --el-button-bg-color: #2b6bd3; --el-button-border-color: #3a7be8; @@ -119,6 +121,7 @@ html.dark { --el-button-active-border-color: rgba(75, 85, 99, 0.85); } + // --- Switch / Tag 暗色适配 --- .el-switch { --el-switch-on-color: var(--el-color-primary-dark-6); --el-switch-border-color: var(--el-color-primary-light-2); @@ -153,6 +156,7 @@ html.dark { --el-tag-text-color: #e5e7eb; } + // --- tags-view 与 app 壳变量（暗色） --- --tags-view-active-bg: var(--el-color-primary-dark-6); --tags-view-active-border-color: var(--el-color-primary-light-2); @@ -178,6 +182,7 @@ html.dark { --app-elevated-close-hover-bg: rgba(96, 165, 250, 0.18); --el-bg-color-page: var(--app-shell-bg); + // --- vxe-table 暗色（与 vxe 业务表并存） --- --vxe-font-color: #98989e; --vxe-primary-color: #2c7ecf; --vxe-icon-background-color: #98989e; diff --git a/src/assets/styles/tokens/_theme.scss b/src/assets/styles/tokens/_theme.scss index 8326286..a0ea277 100644 --- a/src/assets/styles/tokens/_theme.scss +++ b/src/assets/styles/tokens/_theme.scss @@ -1,6 +1,7 @@ -/* Light theme CSS variables and shared design tokens. */ +/* 浅色主题：仅声明 CSS 自定义属性，无具体选择器样式。 */ :root { + // --- 侧栏与顶栏表格区域 --- --menuBg: #ffffff; --menuColor: #1f2937; --menuActiveText: #111827; @@ -24,12 +25,19 @@ --tags-view-active-bg: var(--el-color-primary); --tags-view-active-border-color: var(--el-color-primary); + // --- 应用壳：圆角、阴影、表面、导航、强调色与文案色 --- --app-radius-sm: 6px; --app-radius-md: 12px; --app-radius-lg: 18px; + + --app-space-base: 12px; + --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06); --app-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1); + + --app-font-size-base: 14px; + --app-surface-bg: #ffffff; --app-surface-border: #e5e7eb; --app-shell-bg: #f5f7fa; @@ -48,6 +56,7 @@ --app-elevated-close-bg: rgba(148, 163, 184, 0.14); --app-elevated-close-hover-bg: rgba(64, 158, 255, 0.14); + // --- 与 Element Plus 主题变量的桥接（页面背景、默认圆角/阴影） --- --el-border-radius-base: var(--app-radius-md); --el-border-radius-small: var(--app-radius-sm); --el-border-radius-round: 999px; diff --git a/src/assets/styles/transition.scss b/src/assets/styles/transition.scss index 7a548ca..e6d409f 100644 --- a/src/assets/styles/transition.scss +++ b/src/assets/styles/transition.scss @@ -1,5 +1,6 @@ -// global transition css +// 全局 Vue transition 类名（fade / fade-transform / breadcrumb），与业务模块无关 +// --- 淡入淡出 --- /* fade */ .fade-enter-active, .fade-leave-active { @@ -11,6 +12,7 @@ opacity: 0; } +// --- 带水平位移的淡入淡出（常用于主视图切换） --- /* fade-transform */ .fade-transform--move, .fade-transform-leave-active, @@ -28,6 +30,7 @@ transform: translateX(30px); } +// --- 面包屑列表项进出场 --- /* breadcrumb transition */ .breadcrumb-enter-active, .breadcrumb-leave-active { diff --git a/src/assets/styles/vendors/element-plus/_card.scss b/src/assets/styles/vendors/element-plus/_card.scss new file mode 100644 index 0000000..491b11d --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_card.scss @@ -0,0 +1,13 @@ +.el-card { + overflow: hidden; +} + +.el-card .el-card__header { + border-top-left-radius: var(--app-radius-lg); + border-top-right-radius: var(--app-radius-lg); +} + +.el-card .el-card__body { + border-bottom-left-radius: var(--app-radius-lg); + border-bottom-right-radius: var(--app-radius-lg); +} \ No newline at end of file diff --git a/src/assets/styles/vendors/element-plus/_dialog.scss b/src/assets/styles/vendors/element-plus/_dialog.scss index a19fb6d..38d79d9 100644 --- a/src/assets/styles/vendors/element-plus/_dialog.scss +++ b/src/assets/styles/vendors/element-plus/_dialog.scss @@ -1,4 +1,4 @@ -/* Dialog and upload-related overlays. */ +/* 弹窗：遮罩模糊、居中 el-dialog 头身脚与关闭按钮；底部 .upload-container 为上传区宽度占位。 */ .el-overlay { overflow: hidden; @@ -99,13 +99,4 @@ gap: 12px; } -.upload-container { - .el-upload { - width: 100%; - .el-upload-dragger { - width: 100%; - height: 200px; - } - } -} diff --git a/src/assets/styles/vendors/element-plus/_dropdown.scss b/src/assets/styles/vendors/element-plus/_dropdown.scss index ee55b43..be61fd1 100644 --- a/src/assets/styles/vendors/element-plus/_dropdown.scss +++ b/src/assets/styles/vendors/element-plus/_dropdown.scss @@ -1,4 +1,4 @@ -/* Dropdown and inline menu helpers. */ +/* 下拉菜单面板项样式；日期范围分隔符；折叠菜单隐藏箭头；dropdown-link 主色。 */ .el-dropdown-menu { padding: 8px; diff --git a/src/assets/styles/vendors/element-plus/_element-tokens.scss b/src/assets/styles/vendors/element-plus/_element-tokens.scss new file mode 100644 index 0000000..eff36c5 --- /dev/null +++ b/src/assets/styles/vendors/element-plus/_element-tokens.scss @@ -0,0 +1,6 @@ + + +:root { + + --el-font-size-base: var(--app-font-size-base) +} \ No newline at end of file diff --git a/src/assets/styles/vendors/element-plus/_feedback.scss b/src/assets/styles/vendors/element-plus/_feedback.scss index 49ee89c..b48a7a1 100644 --- a/src/assets/styles/vendors/element-plus/_feedback.scss +++ b/src/assets/styles/vendors/element-plus/_feedback.scss @@ -1,4 +1,4 @@ -/* Toast, alert, and message-box feedback components. */ +/* 反馈：MessageBox 卡片化；Message / Notification / Alert 圆角与暗色下 success 等背景微调。 */ .el-message-box .el-message-box__message { word-break: break-word; @@ -206,6 +206,7 @@ border-color: var(--el-color-primary-light-7); } +// --- 暗色下 Message 类型背景（与 tokens 中按钮色阶独立） --- html.dark { .el-message--success { background: rgba(31, 138, 90, 0.18); diff --git a/src/assets/styles/vendors/element-plus/_form.scss b/src/assets/styles/vendors/element-plus/_form.scss index 7dff8d9..a1bb794 100644 --- a/src/assets/styles/vendors/element-plus/_form.scss +++ b/src/assets/styles/vendors/element-plus/_form.scss @@ -1,4 +1,8 @@ -/* Form controls and generic rounded inputs. */ +/* 表单：inline 默认宽度；输入类圆角与 focus 环；按钮/tag/单选复选按钮组圆角。 */ + +.el-form .el-form-item__label { + font-weight: 1000; +} .el-form--inline .el-form-item__label { width: 68px; diff --git a/src/assets/styles/vendors/element-plus/_index.scss b/src/assets/styles/vendors/element-plus/_index.scss index e3261c2..1f1cc3e 100644 --- a/src/assets/styles/vendors/element-plus/_index.scss +++ b/src/assets/styles/vendors/element-plus/_index.scss @@ -1,10 +1,12 @@ -@use './primitives'; -@use './base'; +@use 'element-plus/dist/index.css'; +@use 'overrides'; +@use './misc'; @use './dialog'; @use './dropdown'; @use './form'; @use './feedback'; -@use './popper' as element-popper; -@use './shell' as element-shell; +@use './popper'; +@use './shell'; @use './navigation'; -@use './table'; \ No newline at end of file +@use './table'; +@use './card'; \ No newline at end of file diff --git a/src/assets/styles/vendors/element-plus/_base.scss b/src/assets/styles/vendors/element-plus/_misc.scss similarity index 58% rename from src/assets/styles/vendors/element-plus/_base.scss rename to src/assets/styles/vendors/element-plus/_misc.scss index 033f93d..17a9a14 100644 --- a/src/assets/styles/vendors/element-plus/_base.scss +++ b/src/assets/styles/vendors/element-plus/_misc.scss @@ -1,5 +1,6 @@ -/* Baseline Element Plus tweaks reused by the rest of the overrides. */ +/* 零散 EP 覆盖：折叠、面包屑、上传、表格 .cell 与列辅助 class 等；主题级共用壳层见 _overrides。 */ +// --- 折叠面板标题与内容缩进 --- .el-collapse { .collapse__title { font-weight: 600; @@ -13,16 +14,19 @@ } } +// --- 水平分割线上下边距 --- .el-divider--horizontal { margin-bottom: 10px; margin-top: 10px; } +// --- 面包屑链接字重 --- .el-breadcrumb__inner, .el-breadcrumb__inner a { font-weight: 400 !important; } +// --- 隐藏原生 file input（配合 EP 上传 UI） --- .el-upload { input[type='file'] { display: none !important; @@ -33,12 +37,14 @@ display: none; } +// --- 表格默认 .cell 内 tag 去右间距 --- .cell { .el-tag { margin-right: 0px; } } +// --- 列 class：窄内边距 / 固定宽操作列 / 状态列居中 --- .small-padding { .cell { padding-left: 5px; @@ -63,3 +69,14 @@ } } } + +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} diff --git a/src/assets/styles/vendors/element-plus/_navigation.scss b/src/assets/styles/vendors/element-plus/_navigation.scss index 9915522..f68ae50 100644 --- a/src/assets/styles/vendors/element-plus/_navigation.scss +++ b/src/assets/styles/vendors/element-plus/_navigation.scss @@ -1,19 +1,4 @@ -/* Navigation and collection views: tables, tabs, pagination, breadcrumb. */ - -.el-table { - border-radius: 10px; - overflow: hidden; - border: 1px solid var(--app-surface-border); -} - -.el-table__header-wrapper, -.el-table__body-wrapper { - background: transparent; -} - -.el-table__row:hover td.el-table__cell { - background-color: rgba(53, 109, 255, 0.05) !important; -} +/* 导航类组件：Tabs、Pagination、面包屑容 */ .el-tabs__header { margin: 0 0 12px 0; diff --git a/src/assets/styles/vendors/element-plus/_primitives.scss b/src/assets/styles/vendors/element-plus/_overrides.scss similarity index 60% rename from src/assets/styles/vendors/element-plus/_primitives.scss rename to src/assets/styles/vendors/element-plus/_overrides.scss index 7884ff6..78c9915 100644 --- a/src/assets/styles/vendors/element-plus/_primitives.scss +++ b/src/assets/styles/vendors/element-plus/_overrides.scss @@ -1,5 +1,7 @@ -/* Shared Element Plus primitives used across multiple component overrides. */ +/* 跨多个 Element Plus 组件的共用覆盖（圆角、描边、阴影、主按钮、表格变量、输入框等）。 + * 注意：本文件在入口中晚于 components/_card-shell 载入，其中 .el-card 等与卡片壳层重叠的属性以本文件为准（例如阴影强度）。 */ +// --- 卡片、弹层、抽屉及常见 popper 容器的圆角/边线/阴影 --- .el-card, .el-dialog, .el-drawer, @@ -12,16 +14,19 @@ box-shadow: var(--app-shadow-md); } +// --- 实体「面板」背景 --- .el-card, .el-dialog, .el-drawer { background: var(--app-surface-bg); } +// --- 按钮默认字重 --- .el-button { font-weight: 500; } +// --- primary 品牌色（亮色；暗色见 tokens/_theme-dark） --- .el-button--primary { --el-button-bg-color: var(--app-accent-strong); --el-button-border-color: var(--app-accent-strong); @@ -31,6 +36,7 @@ --el-button-active-border-color: #2e5ce0; } +// --- 表格 CSS 变量接业务 token --- .el-table { --el-table-border-color: var(--app-surface-border); --el-table-header-bg-color: var(--tableHeaderBg); @@ -38,6 +44,7 @@ background: transparent; } +// --- 输入类默认内描边（与 _form 中 focus 环配合） --- .el-input__wrapper, .el-textarea__inner, .el-select__wrapper { diff --git a/src/assets/styles/vendors/element-plus/_popper.scss b/src/assets/styles/vendors/element-plus/_popper.scss index 3fad878..030718c 100644 --- a/src/assets/styles/vendors/element-plus/_popper.scss +++ b/src/assets/styles/vendors/element-plus/_popper.scss @@ -1,4 +1,4 @@ -/* Popper-backed widgets: dropdowns, date pickers, popovers, autocomplete. */ +/* 各类浮层：Select/Cascader/DatePicker/Tooltip/Popover 等边框、列表项 hover、暗色箭头与日历格选中态。 */ .el-select__popper.el-popper, .el-picker__popper.el-popper, diff --git a/src/assets/styles/vendors/element-plus/_table.scss b/src/assets/styles/vendors/element-plus/_table.scss index 20ec2a5..fdf22ab 100644 --- a/src/assets/styles/vendors/element-plus/_table.scss +++ b/src/assets/styles/vendors/element-plus/_table.scss @@ -1,9 +1,10 @@ - -// 覆盖element plus 表格样式 +/* Element Plus 表格：通用容器圆角、边线、overflow、行 hover、四角单元格、border/fit 清理（不含业务页表头 token，表头见 components/_legacy-utilities）。 */ +@use '../../tokens/sass-vars' as *; .el-table { border-radius: var(--app-radius-md); border: 1px solid var(--app-surface-border); + overflow: hidden; // 给右上角表头单元格增加右上角圆角 thead tr:first-child th:last-child { @@ -21,6 +22,15 @@ } } +.el-table__header-wrapper, +.el-table__body-wrapper { + background: transparent; +} + +.el-table__row:hover td.el-table__cell { + background-color: rgba(53, 109, 255, 0.05) !important; +} + // 去掉额外的表格边线，使用表格border .el-table--border:after, .el-table--border:before, @@ -34,4 +44,40 @@ .el-table--fit { border-bottom: 0; border-right: 0; -} \ No newline at end of file +} + + + +// --- 表格内操作列：固定宽按钮、下拉链接色 --- +.el-table .fixed-width .el-button--small { + padding-left: 0; + padding-right: 0; + width: inherit; +} + +.el-table .el-dropdown-link { + cursor: pointer; + color: #409eff; + margin-left: 10px; +} + + +.el-table { + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { + th { + word-break: break-word; + background-color: $table-header-bg !important; + color: $table-header-text-color; + height: 40px !important; + font-size: 13px; + } + } + + .el-table__body-wrapper { + .el-button [class*='el-icon-'] + span { + margin-left: 1px; + } + } +} + diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue index 121082e..8cc2009 100644 --- a/src/components/Pagination/index.vue +++ b/src/components/Pagination/index.vue @@ -71,7 +71,7 @@ function handleCurrentChange(val: number) { display: flex; align-items: center; justify-content: flex-end; - padding-top: 18px; + padding-top: 10px; margin-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.14); diff --git a/src/components/RoleSelect/index.vue b/src/components/RoleSelect/index.vue index 30fa7b6..72ba19a 100644 --- a/src/components/RoleSelect/index.vue +++ b/src/components/RoleSelect/index.vue @@ -1,7 +1,7 @@