From 5b9dc0ccb94824f373a71992c05554caad241615 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?= Date: Fri, 20 Mar 2026 22:03:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=20CSS=20?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=AE=9A=E5=88=B6=20Element=20Plus=20?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96=20Welcome=20?= =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构 common.less，使用 Element Plus CSS 变量覆盖组件样式： - Menu: --el-menu-bg-color, --el-menu-hover-bg-color 等 - Table: --el-table-header-bg-color, --el-table-row-hover-bg-color 等 - Dialog: --el-dialog-border-radius, --el-dialog-padding-primary - 保留无对应变量的直接样式，添加注释说明 - 优化 Welcome.vue： - 调整 max-width 从 900px 到 1000px - 添加 box-sizing: border-box Co-Authored-By: Claude Opus 4.6 --- src/static/common.less | 48 +++++++++++++++++++++++++----------------- src/views/Welcome.vue | 3 ++- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/static/common.less b/src/static/common.less index 11ace8f..5c1740b 100644 --- a/src/static/common.less +++ b/src/static/common.less @@ -35,24 +35,29 @@ html, body, #app, .layout { border-right: 1px solid var(--el-border-color-light); .el-menu { - border-right: none; - background: transparent; + // CSS 变量覆盖 + --el-menu-bg-color: transparent; + --el-menu-border-color: transparent; + --el-menu-hover-bg-color: var(--el-fill-color); + --el-menu-active-color: var(--el-color-primary); } + .el-menu-item { + // 圆角/间距/宽度无对应 CSS 变量，保留直接样式 border-radius: var(--el-border-radius-base); margin: 2px 8px; width: calc(100% - 16px); &.is-active { + // 激活背景色无对应 CSS 变量，保留直接样式 background-color: var(--el-color-primary-light-9); - color: var(--el-color-primary); font-weight: var(--el-font-weight-primary); } - &:hover { - background-color: var(--el-fill-color); - } } + .el-sub-menu__title:hover { + // Element Plus 子菜单标题 hover 使用 --el-menu-bg-color 而非 --el-menu-hover-bg-color + // 因此无法通过变量覆盖，保留直接样式 background-color: var(--el-fill-color); } } @@ -91,6 +96,14 @@ html, body, #app, .layout { position: relative; .el-table { + // CSS 变量覆盖：表头背景/文字色、行悬停色、边框色、正文色 + --el-table-header-bg-color: var(--el-fill-color-light); + --el-table-header-text-color: var(--el-text-color-regular); + --el-table-row-hover-bg-color: var(--el-color-primary-light-9); + --el-table-border-color: var(--el-border-color-lighter); + --el-table-text-color: var(--el-text-color-primary); + + // 圆角/外边框/溢出裁剪无对应 CSS 变量，保留直接样式 border-radius: var(--el-border-radius-base); overflow: hidden; border: 1px solid var(--el-border-color-lighter); @@ -98,24 +111,18 @@ html, body, #app, .layout { &::before { display: none; } + th.el-table__cell { - background: var(--el-fill-color-light); - color: var(--el-text-color-regular); font-weight: var(--el-font-weight-primary); font-size: var(--el-font-size-small); - border-bottom: 1px solid var(--el-border-color-lighter); } + td.el-table__cell { - border-bottom: 1px solid var(--el-fill-color); - color: var(--el-text-color-primary); + // 行分隔线比表头边框更浅，与 --el-table-border-color 不同，需直接覆盖 + border-bottom-color: var(--el-fill-color); font-size: var(--el-font-size-small); } - .el-table__row:hover > td { - background: var(--el-color-primary-light-9) !important; - } - .el-table__row--striped > td { - background: var(--el-fill-color-lighter); - } + .el-button.is-link { font-size: 16px; padding: 4px 6px; @@ -145,9 +152,12 @@ html, body, #app, .layout { /* ===== 表单弹窗 ===== */ .el-dialog { - border-radius: 12px; + // CSS 变量覆盖：圆角、清除 element-plus 2.x 新增的根元素 padding + --el-dialog-border-radius: 12px; + --el-dialog-padding-primary: 0; + + // overflow:hidden 无对应 CSS 变量，保留直接样式（使圆角裁剪生效） overflow: hidden; - padding: 0 !important; .el-dialog__header { background: var(--el-fill-color-light); diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue index d39567d..f5928dc 100644 --- a/src/views/Welcome.vue +++ b/src/views/Welcome.vue @@ -31,7 +31,8 @@ import menus from '../config/menu'