unnamed-ui
气泡/容器

Confirm Panel

Confirmation panel component with status support and custom actions

删除确认

确定要删除这条记录吗？此操作无法撤销。

"use client";

import { ConfirmPanel } from "@/components/composed/confirm-panel/confirm-panel";

export function ConfirmPanelDemo() {
  return (
    <ConfirmPanel title="删除确认" onConfirm={() => console.log("确认删除")}>
      <p className="text-sm text-[var(--Text-text-secondary)]">
        确定要删除这条记录吗？此操作无法撤销。
      </p>
    </ConfirmPanel>
  );
}

Confirm Panel 组件用于需要用户确认的操作场景，提供清晰的确认界面和操作选项，支持状态显示和自定义操作按钮。

概述

  • 状态支持：支持 pending 和 confirmed 状态显示
  • 自定义操作：支持在确认按钮左侧添加自定义操作按钮
  • 内容隔离：内容区域独立样式控制，不受容器布局影响
  • 灵活配置：可自定义标题、按钮文字和回调函数
  • 类型安全：完整的 TypeScript 类型定义

快速开始

import { ConfirmPanel } from "@/registry/wuhan/composed/confirm-panel";

export function Example() {
  return (
    <ConfirmPanel
      title="删除确认"
      onConfirm={() => console.log("确认删除")}
    >
      <p>确定要删除这条记录吗？</p>
    </ConfirmPanel>
  );
}

特性

  • 状态管理：支持 pending（待确认）和 confirmed（已确认）状态
  • 自动隐藏：confirmed 状态下自动隐藏操作按钮
  • 操作按钮：支持添加多个自定义操作按钮
  • 样式定制：内容区域支持自定义 className 和 style
  • 回调函数：提供 onConfirm 回调处理确认操作

安装

pnpm dlx shadcn@latest add "http://localhost:3000/r/wuhan/confirm-panel.json"

代码演示

基础用法

基础确认面板，包含标题和内容。

删除确认

确定要删除这条记录吗？此操作无法撤销。

"use client";

import { ConfirmPanel } from "@/components/composed/confirm-panel/confirm-panel";

export function ConfirmPanelDemo() {
  return (
    <ConfirmPanel title="删除确认" onConfirm={() => console.log("确认删除")}>
      <p className="text-sm text-[var(--Text-text-secondary)]">
        确定要删除这条记录吗？此操作无法撤销。
      </p>
    </ConfirmPanel>
  );
}

Pending 状态

Pending 状态，显示状态标签，支持确认操作。

提交审批待确认

请确认以下信息无误后提交：

  • 申请人：张三
  • 申请时间：2024-02-04
  • 申请类型：请假
"use client";

import { ConfirmPanel } from "@/components/composed/confirm-panel/confirm-panel";

export function ConfirmPanelPending() {
  return (
    <ConfirmPanel
      title="提交审批"
      status="pending"
      confirmButtonText="提交"
      onConfirm={() => console.log("提交审批")}
    >
      <div className="space-y-2">
        <p className="text-sm text-[var(--Text-text-secondary)]">
          请确认以下信息无误后提交：
        </p>
        <ul className="text-sm text-[var(--Text-text-tertiary)] list-disc list-inside space-y-1">
          <li>申请人：张三</li>
          <li>申请时间：2024-02-04</li>
          <li>申请类型：请假</li>
        </ul>
      </div>
    </ConfirmPanel>
  );
}

Confirmed 状态

Confirmed 状态，显示状态标签，隐藏操作按钮。

提交审批已确认

以下信息已确认并提交：

  • 申请人：张三
  • 申请时间：2024-02-04
  • 申请类型：请假
  • 确认时间：2024-02-04 14:30
"use client";

import { ConfirmPanel } from "@/components/composed/confirm-panel/confirm-panel";

export function ConfirmPanelConfirmed() {
  return (
    <ConfirmPanel
      title="提交审批"
      status="confirmed"
      onConfirm={() => console.log("已确认")}
    >
      <div className="space-y-2">
        <p className="text-sm text-[var(--Text-text-secondary)]">
          以下信息已确认并提交：
        </p>
        <ul className="text-sm text-[var(--Text-text-tertiary)] list-disc list-inside space-y-1">
          <li>申请人：张三</li>
          <li>申请时间：2024-02-04</li>
          <li>申请类型：请假</li>
          <li>确认时间：2024-02-04 14:30</li>
        </ul>
      </div>
    </ConfirmPanel>
  );
}

自定义操作按钮

在确认按钮左侧添加自定义操作按钮。

发布文章待确认

文章标题

如何使用 React 构建现代化应用

发布设置

  • 分类：技术博客
  • 标签：React, JavaScript, 前端
  • 可见性：公开
"use client";

import { ConfirmPanel } from "@/components/composed/confirm-panel/confirm-panel";
import { Button } from "@/components/ui/button";

export function ConfirmPanelWithActions() {
  return (
    <ConfirmPanel
      title="发布文章"
      status="pending"
      confirmButtonText="立即发布"
      actions={[
        <Button key="draft" variant="outline">
          保存草稿
        </Button>,
        <Button key="preview" variant="ghost">
          预览
        </Button>,
      ]}
      onConfirm={() => console.log("发布文章")}
    >
      <div className="space-y-3">
        <div>
          <h4 className="text-sm font-medium text-[var(--Text-text-primary)] mb-1">
            文章标题
          </h4>
          <p className="text-sm text-[var(--Text-text-secondary)]">
            如何使用 React 构建现代化应用
          </p>
        </div>
        <div>
          <h4 className="text-sm font-medium text-[var(--Text-text-primary)] mb-1">
            发布设置
          </h4>
          <ul className="text-sm text-[var(--Text-text-tertiary)] list-disc list-inside space-y-1">
            <li>分类：技术博客</li>
            <li>标签：React, JavaScript, 前端</li>
            <li>可见性：公开</li>
          </ul>
        </div>
      </div>
    </ConfirmPanel>
  );
}

自定义内容样式

自定义内容区域的样式。

数据导出
数据范围最近30天
文件格式Excel (.xlsx)
预计大小约 2.5 MB
"use client";

import { ConfirmPanel } from "@/components/composed/confirm-panel/confirm-panel";

export function ConfirmPanelCustomContent() {
  return (
    <ConfirmPanel
      title="数据导出"
      confirmButtonText="开始导出"
      contentClassName="p-4 bg-[var(--Page-bg-page-secondary)] rounded-lg"
      onConfirm={() => console.log("开始导出")}
    >
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <span className="text-sm text-[var(--Text-text-secondary)]">
            数据范围
          </span>
          <span className="text-sm text-[var(--Text-text-primary)] font-medium">
            最近30天
          </span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-sm text-[var(--Text-text-secondary)]">
            文件格式
          </span>
          <span className="text-sm text-[var(--Text-text-primary)] font-medium">
            Excel (.xlsx)
          </span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-sm text-[var(--Text-text-secondary)]">
            预计大小
          </span>
          <span className="text-sm text-[var(--Text-text-primary)] font-medium">
            约 2.5 MB
          </span>
        </div>
      </div>
    </ConfirmPanel>
  );
}

API

ConfirmPanel

确认面板组件，用于需要用户确认的操作场景。

Props

PropTypeDefaultDescription
titlestring"确认面板"面板标题
status"pending" | "confirmed"-状态，只支持 pending 和 confirmed，confirmed 状态下不显示 Footer
childrenReactNode-面板内容
contentClassNamestring-内容区域自定义类名
contentStyleCSSProperties-内容区域自定义样式
confirmButtonTextstring"确认"确认按钮文字
actionsReactNode[]-操作按钮列表，位于确认按钮左侧
onConfirm() => void-确认操作的回调函数
classNamestring-容器自定义类名

Example

import { ConfirmPanel } from "@/registry/wuhan/composed/confirm-panel";
import { Button } from "@/registry/wuhan/ui/button";

function Example() {
  return (
    <ConfirmPanel
      title="发布文章"
      status="pending"
      confirmButtonText="立即发布"
      actions={[
        <Button key="draft" variant="outline">
          保存草稿
        </Button>,
        <Button key="preview" variant="ghost">
          预览
        </Button>,
      ]}
      onConfirm={() => console.log("发布文章")}
      contentClassName="p-4 bg-gray-50 rounded"
    >
      <p>确定要发布这篇文章吗？</p>
    </ConfirmPanel>
  );
}

使用场景

  • 删除确认：删除重要数据前的二次确认
  • 提交审批：提交表单或审批流程的确认
  • 发布操作：发布文章、产品等内容的确认
  • 数据导出：导出数据前的参数确认
  • 重要操作：任何需要用户明确确认的操作

最佳实践

  • 清晰说明：在内容区域清楚说明需要确认的操作和影响
  • 状态一致：合理使用 pending 和 confirmed 状态，保持状态语义一致
  • 按钮文字：使用明确的按钮文字，如"确认删除"而不是"确认"
  • 操作分组：将相关操作按钮分组放在 actions 中
  • 样式隔离：使用 contentClassName 和 contentStyle 定制内容样式，避免影响容器布局

原语组件

ConfirmPanel 组件基于以下原语组件构建：

  • ConfirmPanelContainerPrimitive: 确认面板容器
  • ConfirmPanelHeaderPrimitive: 确认面板头部
  • ConfirmPanelTitlePrimitive: 确认面板标题
  • ConfirmPanelFooterPrimitive: 确认面板底部操作栏

如需更灵活的定制，可以直接使用这些原语组件。

Feedback

Composed feedback form for reporting issues and collecting feedback

Dynamic Form

Schema-driven dynamic form with validation, multiple field types, and readonly mode

On this page

概述快速开始特性安装代码演示基础用法Pending 状态Confirmed 状态自定义操作按钮自定义内容样式APIConfirmPanelPropsExample使用场景最佳实践原语组件