dialog.md
组件 · COMPONENT

确认窗 Dialog

纸面卡片、宽 440、圆角 16，遮罩只降亮不模糊——背景仍能认出正在操作什么。朱键只用于破坏性确认。

来源提炼层组件源ConfirmDialog.jsx源styles/v4/controls.css源extracted.css机读components/dialog.md
真实弹出Esc 或点遮罩＝取消；打开时焦点落在确认键，关闭后归还
还没有操作
import { useState } from 'react'
import { ConfirmProvider, useConfirm } from './extracted/ConfirmDialog.jsx'
import { Btn } from './components/v4/Button.jsx'

function Actions() {
  const confirm = useConfirm()
  const [result, setResult] = useState('还没有操作')
  const remove = async () => {
    const ok = await confirm({
      title: '确认删除这条笔记？',
      description: '此操作不可撤销。',
      tone: 'destructive',
      confirmText: '删除',
    })
    setResult(ok ? '已删除' : '已取消')
  }
  const publish = async () => {
    const ok = await confirm({ title: '发布这节课？', description: '发布后学员立即可见。', confirmText: '发布' })
    setResult(ok ? '已发布' : '已取消')
  }
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
      <Btn variant="accent" onClick={remove}>删除笔记</Btn>
      <Btn onClick={publish}>发布课节</Btn>
      <span style={{ fontSize: 12, color: '#8B8B85' }}>{result}</span>
    </div>
  )
}

export default function DialogDemo() {
  return (
    <ConfirmProvider>
      <Actions />
    </ConfirmProvider>
  )
}
破坏性确认面板本身（inline 陈列）

确认删除这条笔记？

此操作不可撤销。确认窗保留操作上下文，不让浏览器原生灰框打断视觉语言。

import { ConfirmPanel } from './extracted/ConfirmDialog.jsx'

export function Destructive() {
  return (
    <ConfirmPanel
      inline
      title="确认删除这条笔记？"
      description="此操作不可撤销。确认窗保留操作上下文，不让浏览器原生灰框打断视觉语言。"
      tone="destructive"
      confirmText="删除"
    />
  )
}
普通确认

发布这节课？

发布后学员立即可见。

import { ConfirmPanel } from './extracted/ConfirmDialog.jsx'

export function Normal() {
  return <ConfirmPanel inline title="发布这节课？" description="发布后学员立即可见。" confirmText="发布" />
}

useConfirm()

与 edu 的 useDialog().confirm 同一个形状：在根部挂一次 ConfirmProvider，任何地方 await confirm({...}) 拿到 true / false。

属性取值默认说明
titlestring—标题（17px / 700）
descriptionstring—说明（13px / 20，灰）
tone'default' · 'primary' · 'destructive''default'确认键：墨键，破坏性用朱键
confirmTextstring'确认'确认键文字，写动作本身（「删除」而不是「确定」）
cancelTextstring'取消'取消键文字

从 edu 到这里改了什么

edu 的确认窗建在 shadcn dialog.jsx 与 Tailwind 工具类上。这里去掉了这两层依赖：皮肤仍是 controls.css 的 .zzm-dialog-*，定位与入场由 extracted.css 用纯 CSS 补齐，所以不装 Tailwind 也能 1:1 成立。

铁律

✓ 要朱键只给「删除、作废、注销」这类破坏性确认
✗ 不要用 window.confirm() 原生灰框
✓ 要遮罩 rgba(22,22,22,.46)，只降亮
✗ 不要给遮罩加模糊