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(() => { - +