agent-management/frontend/src/composables/useConfirmDelete.js

import { h } from 'vue'
import { NIcon, useDialog } from 'naive-ui'
import { AlertCircleOutline } from '@vicons/ionicons5'

/**
 * 统一的删除确认弹窗：居中、蓝色调、风格一致
 *
 * 用法：
 *   const confirmDelete = useConfirmDelete()
 *   confirmDelete({
 *     name: skill.name,
 *     itemType: '技能',
 *     onConfirm: async () => { await api.delete(id) }
 *   })
 *
 * 选项：
 *   - name:        被删项名称（用于展示）
 *   - itemType:    类型标签，如 "技能"/"模型"/"智能体"/"分类"，默认空
 *   - content:     自定义正文（覆盖默认模板）
 *   - onConfirm:   点击"确认删除"后的回调（async）
 */
export function useConfirmDelete() {
  const dialog = useDialog()

  return function confirmDelete(options = {}) {
    const {
      name = '',
      itemType = '',
      content,
      onConfirm,
    } = options

    const subject = itemType ? `${itemType}「${name}」` : `「${name}」`
    const body = content || `确定要删除${subject}吗？此操作不可恢复。`

    dialog.create({
      title: '确认删除',
      content: body,
      maskClosable: false,
      positiveText: '确认删除',
      negativeText: '取消',
      icon() {
        return h(NIcon, { color: 'var(--color-primary)', size: 24 }, {
          default: () => h(AlertCircleOutline),
        })
      },
      actionStyle: {
        // 让按钮区域有一点上边距，整体更紧凑
        paddingTop: '8px',
      },
      onPositiveClick: async () => {
        if (typeof onConfirm === 'function') {
          await onConfirm()
        }
      },
    })
  }
}