2026-10-19 04:59:57 -04:00
15 changed files with 299 additions and 164 deletions
--- 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);
+}
--- a/frontend/src/assets/styles/table-actions.css
+++ b/frontend/src/assets/styles/table-actions.css
@ -0,0 +1,57 @@
+/*
+ * 表格操作列统一样式。
+ *
+ * 用法：用 <div class="table-actions"> 包住该行的操作按钮；破坏性动作
+ * （删除/禁用等）前插入 <span class="table-actions__divider"></span> 分组。
+ * 列宽须容纳整行动作的自然宽度，否则 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);
+}
--- a/frontend/src/composables/useConfirmAction.ts
+++ b/frontend/src/composables/useConfirmAction.ts
@ -29,7 +29,9 @@ export function useConfirmAction() {
  }): Promise<boolean> {
    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: '取消',
      })
--- 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')
--- a/frontend/src/views/base/customers/index.vue
+++ b/frontend/src/views/base/customers/index.vue
@ -398,12 +398,17 @@ onMounted(() => {
        <el-table-column label="归属人员" min-width="110">
          <template #default="{ row }">{{ row.owner_personnel_name ?? '（无归属）' }}</template>
        </el-table-column>
-        <el-table-column label="操作" width="230" fixed="right">
+        <el-table-column label="操作" width="260" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <el-button link type="primary" size="small" @click="openOwnership(row)">归属变更</el-button>
-            <el-button link type="primary" size="small" @click="openLogs(row)">变更记录</el-button>
-            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <el-button link type="primary" size="small" @click="openOwnership(row)">
+                归属变更
+              </el-button>
+              <el-button link type="primary" size="small" @click="openLogs(row)">变更记录</el-button>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/base/personnel/index.vue
+++ b/frontend/src/views/base/personnel/index.vue
@ -452,14 +452,19 @@ onMounted(() => {
            <StatusTag :value="row.status" active-text="在职" inactive-text="离职" />
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="230" fixed="right">
+        <el-table-column label="操作" width="270" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <el-button link type="primary" size="small" @click="openSubTables(row)">区域与计划</el-button>
-            <el-button link type="warning" size="small" @click="handleToggleStatus(row)">
-              {{ row.status === 1 ? '设为离职' : '设为在职' }}
-            </el-button>
-            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <el-button link type="primary" size="small" @click="openSubTables(row)">
+                区域与计划
+              </el-button>
+              <el-button link type="warning" size="small" @click="handleToggleStatus(row)">
+                {{ row.status === 1 ? '设为离职' : '设为在职' }}
+              </el-button>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/base/products/index.vue
+++ b/frontend/src/views/base/products/index.vue
@ -269,13 +269,16 @@ onMounted(() => {
            <StatusTag :value="row.status" />
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="170" fixed="right">
+        <el-table-column label="操作" width="170" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <el-button link type="warning" size="small" @click="handleToggleStatus(row)">
-              {{ row.status === 1 ? '停用' : '启用' }}
-            </el-button>
-            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <el-button link type="warning" size="small" @click="handleToggleStatus(row)">
+                {{ row.status === 1 ? '停用' : '启用' }}
+              </el-button>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/business/businesses/index.vue
+++ b/frontend/src/views/business/businesses/index.vue
@ -690,37 +690,46 @@ onMounted(() => {
            <span class="cell-amount">{{ row.total_received_amount ?? '—' }}</span>
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="300" fixed="right">
+        <el-table-column label="操作" width="300" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openDrawer(row)">详情</el-button>
-            <el-tooltip content="已完成或已终止的业务禁止编辑" :disabled="row.status === 1" placement="top">
-              <span class="op-wrap">
-                <el-button
-                  link
-                  type="primary"
-                  size="small"
-                  :disabled="row.status !== 1"
-                  @click="openEdit(row)"
-                >
-                  编辑
-                </el-button>
-              </span>
-            </el-tooltip>
-            <el-tooltip content="终态不可再变更" :disabled="row.status === 1" placement="top">
-              <span class="op-wrap">
-                <el-button
-                  link
-                  type="primary"
-                  size="small"
-                  :disabled="row.status !== 1"
-                  @click="openStatus(row)"
-                >
-                  状态
-                </el-button>
-              </span>
-            </el-tooltip>
-            <el-button link type="primary" size="small" @click="openOwnership(row)">归属</el-button>
-            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openDrawer(row)">详情</el-button>
+              <el-tooltip
+                content="已完成或已终止的业务禁止编辑"
+                :disabled="row.status === 1"
+                placement="top"
+              >
+                <span class="op-wrap">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    :disabled="row.status !== 1"
+                    @click="openEdit(row)"
+                  >
+                    编辑
+                  </el-button>
+                </span>
+              </el-tooltip>
+              <el-tooltip content="终态不可再变更" :disabled="row.status === 1" placement="top">
+                <span class="op-wrap">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    :disabled="row.status !== 1"
+                    @click="openStatus(row)"
+                  >
+                    状态
+                  </el-button>
+                </span>
+              </el-tooltip>
+              <el-button link type="primary" size="small" @click="openOwnership(row)">
+                归属
+              </el-button>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/business/rating/index.vue
+++ b/frontend/src/views/business/rating/index.vue
@ -282,8 +282,11 @@ onMounted(() => {
        <el-table-column prop="sort_order" label="排序" width="70" align="center" />
        <el-table-column label="操作" width="110" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <el-button link type="danger" size="small" @click="removeGrade(row)">删除</el-button>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-button link type="danger" size="small" @click="removeGrade(row)">删除</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/business/receipts/index.vue
+++ b/frontend/src/views/business/receipts/index.vue
@ -346,42 +346,45 @@ onMounted(() => {
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="130" fixed="right">
+        <el-table-column label="操作" width="130" fixed="right" align="center">
          <template #default="{ row }">
-            <el-tooltip
-              content="已核算回款不可变更"
-              :disabled="row.settlement_status !== 1"
-              placement="top"
-            >
-              <span class="op-wrap">
-                <el-button
-                  link
-                  type="primary"
-                  size="small"
-                  :disabled="row.settlement_status === 1"
-                  @click="openEdit(row)"
-                >
-                  编辑
-                </el-button>
-              </span>
-            </el-tooltip>
-            <el-tooltip
-              content="已核算回款不可变更"
-              :disabled="row.settlement_status !== 1"
-              placement="top"
-            >
-              <span class="op-wrap">
-                <el-button
-                  link
-                  type="danger"
-                  size="small"
-                  :disabled="row.settlement_status === 1"
-                  @click="handleDelete(row)"
-                >
-                  删除
-                </el-button>
-              </span>
-            </el-tooltip>
+            <div class="table-actions">
+              <el-tooltip
+                content="已核算回款不可变更"
+                :disabled="row.settlement_status !== 1"
+                placement="top"
+              >
+                <span class="op-wrap">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    :disabled="row.settlement_status === 1"
+                    @click="openEdit(row)"
+                  >
+                    编辑
+                  </el-button>
+                </span>
+              </el-tooltip>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-tooltip
+                content="已核算回款不可变更"
+                :disabled="row.settlement_status !== 1"
+                placement="top"
+              >
+                <span class="op-wrap">
+                  <el-button
+                    link
+                    type="danger"
+                    size="small"
+                    :disabled="row.settlement_status === 1"
+                    @click="handleDelete(row)"
+                  >
+                    删除
+                  </el-button>
+                </span>
+              </el-tooltip>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/business/shipments/index.vue
+++ b/frontend/src/views/business/shipments/index.vue
@ -337,10 +337,13 @@ onMounted(() => {
            <span class="cell-amount">{{ row.total_amount }}</span>
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="130" fixed="right">
+        <el-table-column label="操作" width="130" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/system/business-roles/index.vue
+++ b/frontend/src/views/system/business-roles/index.vue
@ -258,31 +258,34 @@ onMounted(() => {
            <StatusTag :value="row.status" />
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="190" fixed="right">
+        <el-table-column label="操作" width="190" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <span :title="builtinHint(row)">
-              <el-button
-                link
-                type="warning"
-                size="small"
-                :disabled="isBuiltin(row)"
-                @click="handleToggleStatus(row)"
-              >
-                {{ row.status === 1 ? '禁用' : '启用' }}
-              </el-button>
-            </span>
-            <span :title="builtinHint(row)">
-              <el-button
-                link
-                type="danger"
-                size="small"
-                :disabled="isBuiltin(row)"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-button>
-            </span>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <span :title="builtinHint(row)">
+                <el-button
+                  link
+                  type="warning"
+                  size="small"
+                  :disabled="isBuiltin(row)"
+                  @click="handleToggleStatus(row)"
+                >
+                  {{ row.status === 1 ? '禁用' : '启用' }}
+                </el-button>
+              </span>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <span :title="builtinHint(row)">
+                <el-button
+                  link
+                  type="danger"
+                  size="small"
+                  :disabled="isBuiltin(row)"
+                  @click="handleDelete(row)"
+                >
+                  删除
+                </el-button>
+              </span>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/system/params/index.vue
+++ b/frontend/src/views/system/params/index.vue
@ -193,7 +193,7 @@ async function submitAll(): Promise<void> {
    await ElMessageBox.confirm(
      `共 ${pendingList.value.length} 项变更，${effectiveText.value}。提交后逐项留痕，未生效前可整批撤回。`,
      '提交确认',
-      { confirmButtonText: '提交', cancelButtonText: '再想想', type: 'warning' },
+      { confirmButtonText: '提交', cancelButtonText: '再想想', customClass: 'ys-confirm-box' },
    )
  } catch {
    return
--- a/frontend/src/views/system/roles/index.vue
+++ b/frontend/src/views/system/roles/index.vue
@ -224,31 +224,34 @@ onMounted(load)
        <el-table-column label="用户数" width="90" align="center">
          <template #default="{ row }">{{ row.user_count }}</template>
        </el-table-column>
-        <el-table-column label="操作" width="170" fixed="right">
+        <el-table-column label="操作" width="170" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <span :title="isBuiltin(row) ? '内置管理员角色不可禁用' : ''">
-              <el-button
-                link
-                type="warning"
-                size="small"
-                :disabled="isBuiltin(row)"
-                @click="handleToggleStatus(row)"
-              >
-                {{ row.status === 1 ? '禁用' : '启用' }}
-              </el-button>
-            </span>
-            <span :title="deleteHint(row)">
-              <el-button
-                link
-                type="danger"
-                size="small"
-                :disabled="isBuiltin(row) || row.user_count > 0"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-button>
-            </span>
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <span :title="isBuiltin(row) ? '内置管理员角色不可禁用' : ''">
+                <el-button
+                  link
+                  type="warning"
+                  size="small"
+                  :disabled="isBuiltin(row)"
+                  @click="handleToggleStatus(row)"
+                >
+                  {{ row.status === 1 ? '禁用' : '启用' }}
+                </el-button>
+              </span>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <span :title="deleteHint(row)">
+                <el-button
+                  link
+                  type="danger"
+                  size="small"
+                  :disabled="isBuiltin(row) || row.user_count > 0"
+                  @click="handleDelete(row)"
+                >
+                  删除
+                </el-button>
+              </span>
+            </div>
          </template>
        </el-table-column>
      </el-table>
--- a/frontend/src/views/system/users/index.vue
+++ b/frontend/src/views/system/users/index.vue
@ -331,34 +331,37 @@ onMounted(() => {
        <el-table-column label="最后登录" min-width="170">
          <template #default="{ row }">{{ formatDateTime(row.last_login_time) }}</template>
        </el-table-column>
-        <el-table-column label="操作" width="250" fixed="right">
+        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="{ row }">
-            <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
-            <el-button link type="primary" size="small" @click="openReset(row)">
-              重置密码
-            </el-button>
-            <span :title="selfHint(row)">
-              <el-button
-                link
-                type="warning"
-                size="small"
-                :disabled="isSelf(row)"
-                @click="handleToggleStatus(row)"
-              >
-                {{ row.status === 1 ? '禁用' : '启用' }}
+            <div class="table-actions">
+              <el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
+              <el-button link type="primary" size="small" @click="openReset(row)">
+                重置密码
              </el-button>
-            </span>
-            <span :title="selfHint(row)">
-              <el-button
-                link
-                type="danger"
-                size="small"
-                :disabled="isSelf(row)"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-button>
-            </span>
+              <span :title="selfHint(row)">
+                <el-button
+                  link
+                  type="warning"
+                  size="small"
+                  :disabled="isSelf(row)"
+                  @click="handleToggleStatus(row)"
+                >
+                  {{ row.status === 1 ? '禁用' : '启用' }}
+                </el-button>
+              </span>
+              <span class="table-actions__divider" aria-hidden="true"></span>
+              <span :title="selfHint(row)">
+                <el-button
+                  link
+                  type="danger"
+                  size="small"
+                  :disabled="isSelf(row)"
+                  @click="handleDelete(row)"
+                >
+                  删除
+                </el-button>
+              </span>
+            </div>
          </template>
        </el-table-column>
      </el-table>