From cfd2a196f2add1f2fa2f066eb40d9654f1525cd1 Mon Sep 17 00:00:00 2001 From: liuwenxin <1009266660@qq.com> Date: Mon, 19 Oct 2026 16:33:06 +0800 Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E8=A1=A8=E6=A0=BC=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E5=88=97=E7=BB=9F=E4=B8=80=E6=A0=B7=E5=BC=8F=E4=B8=8E?= =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E6=A1=86=E8=A7=86=E8=A7=89=E6=94=B6=E6=95=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 table-actions.css：操作列 flex 居中、间距交给 gap、破坏性动作前 加分组竖线、链接按钮悬停加深并加下划线（默认浅靛蓝在表格底色上对比度 不足）；包装 span 改 flex，消除行内盒基线导致的约 1.7px 垂直错位 - 11 个列表页操作列套用统一容器与分隔线，列宽按动作自然宽度调整并居中 - 确认框不再传 type:warning（Element Plus 的实心黄圆图标与正文并排成 两列，标题行反被留空），图标改由全局样式画在标题行左侧，正文与标题 文字左对齐；图标为 CSS 伪元素，不进无障碍树 验证：pnpm type-check 绿 Co-Authored-By: Claude Code --- frontend/src/assets/styles/index.css | 35 +++++++++ frontend/src/assets/styles/table-actions.css | 57 +++++++++++++++ frontend/src/composables/useConfirmAction.ts | 4 +- frontend/src/main.ts | 1 + frontend/src/views/base/customers/index.vue | 15 ++-- frontend/src/views/base/personnel/index.vue | 19 +++-- frontend/src/views/base/products/index.vue | 15 ++-- .../src/views/business/businesses/index.vue | 69 ++++++++++-------- frontend/src/views/business/rating/index.vue | 7 +- .../src/views/business/receipts/index.vue | 73 ++++++++++--------- .../src/views/business/shipments/index.vue | 9 ++- .../src/views/system/business-roles/index.vue | 51 +++++++------ frontend/src/views/system/params/index.vue | 2 +- frontend/src/views/system/roles/index.vue | 51 +++++++------ frontend/src/views/system/users/index.vue | 55 +++++++------- 15 files changed, 299 insertions(+), 164 deletions(-) create mode 100644 frontend/src/assets/styles/table-actions.css diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css index e657b17..f9a1265 100644 --- a/frontend/src/assets/styles/index.css +++ b/frontend/src/assets/styles/index.css @@ -81,3 +81,38 @@ body { .toolbar { margin-bottom: 12px; } + +/* + * 确认框（ElMessageBox）统一视觉 + * + * Element Plus 默认把 warning 图标渲染在正文左侧、与正文并排成两列： + * 多行正文时图标悬在文字块中间，左侧留出一列空白，标题行反而是空的； + * 实心黄圆也与本站「中性灰白 + 靛蓝点缀」体系冲突。 + * 这里去掉调用处的 type，把图标改画在标题行左侧：18px 描边样式， + * 深琥珀 #b7791f + 浅琥珀底 #fbf3e4（警示语义，饱和度压到与靛蓝同级）； + * 正文与标题文字左对齐，图标单独悬挂在左侧。图标为 CSS 伪元素，天然不进无障碍树， + * 属于装饰元素，语义由标题文字承载。 + * MessageBox 挂载在 body 下，scoped 样式够不到，因此放在全局文件。 + */ +.ys-confirm-box .el-message-box__title { + display: flex; + align-items: center; + gap: 8px; + font-weight: 600; + color: var(--ys-ink); +} + +.ys-confirm-box .el-message-box__title::before { + content: ''; + flex: none; + width: 18px; + height: 18px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='8.25' fill='%23FBF3E4'/%3E%3Ccircle cx='9' cy='9' r='7.4' stroke='%23B7791F' stroke-width='1.3'/%3E%3Cpath d='M9 5.3V9.8' stroke='%23B7791F' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.4' r='0.95' fill='%23B7791F'/%3E%3C/svg%3E") + center / 18px 18px no-repeat; +} + +.ys-confirm-box .el-message-box__message { + /* 与标题文字对齐，让图标单独悬挂在左侧：18px 图标 + 8px gap */ + padding-left: 26px; + color: var(--ys-ink-2); +} diff --git a/frontend/src/assets/styles/table-actions.css b/frontend/src/assets/styles/table-actions.css new file mode 100644 index 0000000..1bf058e --- /dev/null +++ b/frontend/src/assets/styles/table-actions.css @@ -0,0 +1,57 @@ +/* + * 表格操作列统一样式。 + * + * 用法：用
包住该行的操作按钮；破坏性动作 + * （删除/禁用等）前插入 分组。 + * 列宽须容纳整行动作的自然宽度，否则 Element Plus 会把末尾按钮折到第二行。 + */ +.table-actions { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + white-space: nowrap; +} + +/* 间距统一交给 gap，抵消相邻按钮默认的 12px 外边距 */ +.table-actions .el-button + .el-button { + margin-left: 0; +} + +/* + * 带 title 提示或 tooltip 的按钮常包在 span 里。行内盒的基线留白会让包装 + * 按钮比直接子按钮低约 1.7px，改为 flex 后与整行严格垂直对齐。 + */ +.table-actions > span:not(.table-actions__divider) { + display: flex; + align-items: center; +} + +/* 悬停加深并加下划线：Element 默认悬停变浅，浅靛蓝在表格底色上对比度不足 */ +.table-actions .el-button.is-link:hover { + text-decoration: underline; + text-underline-offset: 3px; +} + +.table-actions .el-button.is-link.el-button--primary:hover { + color: var(--el-color-primary-dark-2); +} + +.table-actions .el-button.is-link.el-button--success:hover { + color: var(--el-color-success-dark-2); +} + +.table-actions .el-button.is-link.el-button--warning:hover { + color: var(--el-color-warning-dark-2); +} + +.table-actions .el-button.is-link.el-button--danger:hover { + color: var(--el-color-danger-dark-2); +} + +.table-actions__divider { + flex: none; + width: 1px; + height: 12px; + background-color: var(--ys-line); +} diff --git a/frontend/src/composables/useConfirmAction.ts b/frontend/src/composables/useConfirmAction.ts index e1d9832..9eb8988 100644 --- a/frontend/src/composables/useConfirmAction.ts +++ b/frontend/src/composables/useConfirmAction.ts @@ -29,7 +29,9 @@ export function useConfirmAction() { }): Promise { try { await ElMessageBox.confirm(options.confirmText, options.title ?? '操作确认', { - type: 'warning', + // 不传 type：Element Plus 的 warning 图标会渲染在正文左侧独立成列， + // 标题行反被留空。图标改由全局样式画在标题行内（.ys-confirm-box）。 + customClass: 'ys-confirm-box', confirmButtonText: options.confirmButtonText ?? '确定', cancelButtonText: '取消', }) diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 48fda14..2908410 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -8,5 +8,6 @@ import pinia from './store' import 'element-plus/dist/index.css' import './assets/styles/index.css' +import './assets/styles/table-actions.css' createApp(App).use(pinia).use(router).use(ElementPlus, { locale: zhCn }).mount('#app') diff --git a/frontend/src/views/base/customers/index.vue b/frontend/src/views/base/customers/index.vue index 88eba5f..a04c75c 100644 --- a/frontend/src/views/base/customers/index.vue +++ b/frontend/src/views/base/customers/index.vue @@ -398,12 +398,17 @@ onMounted(() => { - + diff --git a/frontend/src/views/base/personnel/index.vue b/frontend/src/views/base/personnel/index.vue index 97ab0b4..8858df8 100644 --- a/frontend/src/views/base/personnel/index.vue +++ b/frontend/src/views/base/personnel/index.vue @@ -452,14 +452,19 @@ onMounted(() => { - + diff --git a/frontend/src/views/base/products/index.vue b/frontend/src/views/base/products/index.vue index c156c88..1bf8b22 100644 --- a/frontend/src/views/base/products/index.vue +++ b/frontend/src/views/base/products/index.vue @@ -269,13 +269,16 @@ onMounted(() => { - + diff --git a/frontend/src/views/business/businesses/index.vue b/frontend/src/views/business/businesses/index.vue index 417860d..ad2eeab 100644 --- a/frontend/src/views/business/businesses/index.vue +++ b/frontend/src/views/business/businesses/index.vue @@ -690,37 +690,46 @@ onMounted(() => { {{ row.total_received_amount ?? '—' }} - + diff --git a/frontend/src/views/business/rating/index.vue b/frontend/src/views/business/rating/index.vue index b60ea56..1ac318d 100644 --- a/frontend/src/views/business/rating/index.vue +++ b/frontend/src/views/business/rating/index.vue @@ -282,8 +282,11 @@ onMounted(() => { diff --git a/frontend/src/views/business/receipts/index.vue b/frontend/src/views/business/receipts/index.vue index 45d4469..8fb0e5d 100644 --- a/frontend/src/views/business/receipts/index.vue +++ b/frontend/src/views/business/receipts/index.vue @@ -346,42 +346,45 @@ onMounted(() => { - + diff --git a/frontend/src/views/business/shipments/index.vue b/frontend/src/views/business/shipments/index.vue index 8586108..be42f77 100644 --- a/frontend/src/views/business/shipments/index.vue +++ b/frontend/src/views/business/shipments/index.vue @@ -337,10 +337,13 @@ onMounted(() => { {{ row.total_amount }} - + diff --git a/frontend/src/views/system/business-roles/index.vue b/frontend/src/views/system/business-roles/index.vue index f0b3a74..d833628 100644 --- a/frontend/src/views/system/business-roles/index.vue +++ b/frontend/src/views/system/business-roles/index.vue @@ -258,31 +258,34 @@ onMounted(() => { - + diff --git a/frontend/src/views/system/params/index.vue b/frontend/src/views/system/params/index.vue index f10548a..7721e45 100644 --- a/frontend/src/views/system/params/index.vue +++ b/frontend/src/views/system/params/index.vue @@ -193,7 +193,7 @@ async function submitAll(): Promise { await ElMessageBox.confirm( `共 ${pendingList.value.length} 项变更，${effectiveText.value}。提交后逐项留痕，未生效前可整批撤回。`, '提交确认', - { confirmButtonText: '提交', cancelButtonText: '再想想', type: 'warning' }, + { confirmButtonText: '提交', cancelButtonText: '再想想', customClass: 'ys-confirm-box' }, ) } catch { return diff --git a/frontend/src/views/system/roles/index.vue b/frontend/src/views/system/roles/index.vue index 06859fa..1ec65d5 100644 --- a/frontend/src/views/system/roles/index.vue +++ b/frontend/src/views/system/roles/index.vue @@ -224,31 +224,34 @@ onMounted(load) - + diff --git a/frontend/src/views/system/users/index.vue b/frontend/src/views/system/users/index.vue index 9ceaeb9..bbdbb94 100644 --- a/frontend/src/views/system/users/index.vue +++ b/frontend/src/views/system/users/index.vue @@ -331,34 +331,37 @@ onMounted(() => { - +