cfd2a196f2
- 新增 table-actions.css：操作列 flex 居中、间距交给 gap、破坏性动作前 加分组竖线、链接按钮悬停加深并加下划线（默认浅靛蓝在表格底色上对比度 不足）；包装 span 改 flex，消除行内盒基线导致的约 1.7px 垂直错位 - 11 个列表页操作列套用统一容器与分隔线，列宽按动作自然宽度调整并居中 - 确认框不再传 type:warning（Element Plus 的实心黄圆图标与正文并排成 两列，标题行反被留空），图标改由全局样式画在标题行左侧，正文与标题 文字左对齐；图标为 CSS 伪元素，不进无障碍树 验证：pnpm type-check 绿 Co-Authored-By: Claude Code <noreply@anthropic.com>
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
||
import { handledError } from '@/utils/error'
|
||
|
||
/**
|
||
* 「确认框 → 执行 → 成功提示 → 收尾刷新」动作流。
|
||
*
|
||
* 用户/角色两页的启用禁用、删除共四处结构逐行相同，收敛到这里：
|
||
* 取消确认静默返回 false；接口失败由请求拦截器统一提示，此处仅兜底
|
||
* 阻止 Promise 继续传播（handledError 显式标注，不写空 catch）。
|
||
*/
|
||
export function useConfirmAction() {
|
||
/**
|
||
* 弹出确认框并执行；返回是否真正执行成功（用户取消或执行失败均为 false）。
|
||
*/
|
||
async function confirmAndRun(options: {
|
||
/** 确认框正文 */
|
||
confirmText: string
|
||
/** 确认框标题 */
|
||
title?: string
|
||
/** 确认按钮文案 */
|
||
confirmButtonText?: string
|
||
/** 执行成功后的全局提示 */
|
||
successText: string
|
||
/** 真正的业务动作 */
|
||
run: () => Promise<unknown>
|
||
/** 成功后的收尾（如刷新列表） */
|
||
after?: () => Promise<void> | void
|
||
}): Promise<boolean> {
|
||
try {
|
||
await ElMessageBox.confirm(options.confirmText, options.title ?? '操作确认', {
|
||
// 不传 type：Element Plus 的 warning 图标会渲染在正文左侧独立成列，
|
||
// 标题行反被留空。图标改由全局样式画在标题行内（.ys-confirm-box）。
|
||
customClass: 'ys-confirm-box',
|
||
confirmButtonText: options.confirmButtonText ?? '确定',
|
||
cancelButtonText: '取消',
|
||
})
|
||
} catch {
|
||
return false // 用户取消，静默返回
|
||
}
|
||
|
||
try {
|
||
await options.run()
|
||
await options.after?.()
|
||
// 收尾（列表刷新）成功后才提示：先提示后收尾会让用户看到「已删除」
|
||
// 而列表仍留旧行（after 抛错被吞），成功/失败提示同屏矛盾
|
||
ElMessage.success(options.successText)
|
||
return true
|
||
} catch (error) {
|
||
handledError(error) // 失败提示由请求拦截器统一完成
|
||
return false
|
||
}
|
||
}
|
||
|
||
return { confirmAndRun }
|
||
}
|