import React, { useRef, useState } from 'react';
import { Button, Tour } from 'antd';
import type { TourProps } from 'antd';

const SingleStepTourDemo: React.FC = () => {
  // 1. 为目标按钮创建一个 ref
  const createBtnRef = useRef(null);
  
  // 2. 使用 state 控制引导的显示/隐藏
  const [open, setOpen] = useState(false);

  // 3. 定义引导步骤（当前只有一个）
  const steps: TourProps['steps'] = [
    {
      title: '创建新项目',
      description: '点击这个按钮，立即开始创建您的第一个项目！',
      // 关键：将步骤的目标指向我们创建的 ref
      target: () => createBtnRef.current,
    },
  ];

  return (
    <div className="p-8 bg-white rounded-lg shadow-lg">
      <h3 className="text-xl font-bold mb-4 text-center">单步引导</h3>
      
      {/* 这是我们要引导的目标按钮，并绑定 ref */}
      <Button type="primary" ref={createBtnRef}>
        创建项目
      </Button>

      {/* 这个按钮用于手动打开引导 */}
      <Button style={{ marginLeft: 8 }} onClick={() => setOpen(true)}>
        显示引导
      </Button>

      {/* Tour 组件本体 */}
      <Tour 
        open={open} 
        onClose={() => setOpen(false)} 
        steps={steps}
      />
    </div>
  );
};

export default SingleStepTourDemo;

import React from 'react';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import SingleStepTourDemo from './components/demos/SingleStepTourDemo';

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        <SingleStepTourDemo />
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useRef, useState } from 'react';
import { Button, Tour, Divider, Space, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { TourProps } from 'antd';

const MultiStepTourDemo: React.FC = () => {
  // 1. 为所有目标元素创建 ref
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  
  const [open, setOpen] = useState(false);

  // 2. 扩展 steps 数组，定义完整的引导流程
  const steps: TourProps['steps'] = [
    {
      title: '个人中心',
      description: '点击您的头像，可以进入个人中心。',
      target: () => ref1.current,
      // 为不同步骤指定不同的气泡位置，避免遮挡
      placement: 'bottomRight',
    },
    {
      title: '主操作按钮',
      description: '这是页面的核心操作按钮。',
      target: () => ref2.current,
    },
    {
      title: '更多选项',
      description: '点击这里可以展开更多高级选项。',
      target: () => ref3.current,
      placement: 'topLeft',
    },
  ];

  return (
    <div className="p-8 bg-white rounded-lg shadow-lg w-[600px]">
      <div className="flex justify-between items-center">
        {/* 3. 绑定所有 ref */}
        <div ref={ref1}>
           <Avatar size="large" icon={<UserOutlined />} />
        </div>
        <Button ref={ref2} type="primary">
          主操作
        </Button>
        <div ref={ref3}>
           <Button>更多</Button>
        </div>
      </div>

      <Divider />
      <Button type="default" onClick={() => setOpen(true)}>
        开始多步引导
      </Button>

      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
    </div>
  );
};

export default MultiStepTourDemo;

import React from 'react';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import MultiStepTourDemo from './components/demos/MultiStepTourDemo';

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        <MultiStepTourDemo />
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useRef, useState } from 'react';
// ... (之前的 imports)
import { Button, Tour, Divider, Space, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { TourProps } from 'antd';


const ControlledTourDemo: React.FC = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);
  
  const [open, setOpen] = useState(false);
  // 1. 新增 state 用于控制当前步骤
  const [current, setCurrent] = useState(0);

  const steps: TourProps['steps'] = [
    {
      title: '个人中心',
      description: '点击您的头像，可以进入个人中心。',
      target: () => ref1.current,
      placement: 'bottomRight',
    },
    {
      title: '主操作按钮',
      description: '这是页面的核心操作按钮。',
      // 2. 为步骤添加封面图
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-54fa9a76-2B02-44c6-96b2-1A1230903434.png"
        />
      ),
      target: () => ref2.current,
    },
    {
      title: '完成引导',
      description: '您已了解所有核心功能，点击下方按钮完成引导。',
      target: () => ref3.current,
      placement: 'topLeft',
      // 3. 自定义最后一个步骤的“下一步”按钮
      nextButtonProps: {
        children: '知道了',
      },
    },
  ];

  return (
    <div className="p-8 bg-white rounded-lg shadow-lg w-[600px]">
      <div className="flex justify-between items-center">
        <div ref={ref1}><Avatar size="large" icon={<UserOutlined />} /></div>
        <Button ref={ref2} type="primary">主操作</Button>
        <div ref={ref3}><Button>更多</Button></div>
      </div>
      <Divider />
      <Button type="default" onClick={() => { setOpen(true); setCurrent(0); }}>
        开始完全受控的引导
      </Button>

      <Tour 
        open={open} 
        onClose={() => setOpen(false)} 
        steps={steps}
        // 4. 传入 current 和 onChange 实现完全控制
        current={current}
        onChange={setCurrent}
      />
    </div>
  );
};

export default ControlledTourDemo;

// import MultiStepTourDemo from './components/demos/MultiStepTourDemo';
import ControlledTourDemo from './components/demos/ControlledTourDemo';
// ... 其他 import ...

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        {/* <MultiStepTourDemo /> */}
        <ControlledTourDemo />
      </div>
    </ConfigProvider>
  );
};

import React from 'react';
import { ConfigProvider, Alert, Space } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex justify-center">
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">基础用法：四种样式</h3>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Alert message="操作成功" type="success" />
            <Alert message="这是一条普通信息" type="info" />
            <Alert message="请注意，此操作可能存在风险" type="warning" />
            <Alert message="发生了一个错误" type="error" />
          </Space>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, Alert, Space } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  const handleClose = () => {
    console.log('警告框被关闭了');
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex justify-center">
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">详细描述与可关闭</h3>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Alert
              message="请求成功"
              description="您的请求已成功处理，详细数据正在后台同步中，请稍后刷新查看。"
              type="success"
            />
            <Alert
              message="这是一个可关闭的警告"
              type="warning"
              closable
              onClose={handleClose}
            />
          </Space>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, Alert, Space, Button } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex justify-center">
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">图标与自定义操作</h3>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Alert message="成功提示，强制显示图标" type="success" showIcon />
            <Alert
              message="您的设置已保存"
              type="success"
              showIcon
              action={
                <Button size="small" type="text">
                  撤销
                </Button>
              }
              closable
            />
            <Alert
              message="发现新的系统更新"
              description="V5.25.0 版本已发布，包含多项性能优化和新功能。"
              type="info"
              showIcon
              action={
                <Space direction="vertical">
                  <Button size="small" type="primary">
                    立即更新
                  </Button>
                  <Button size="small" ghost type="primary">
                    查看详情
                  </Button>
                </Space>
              }
              closable
            />
          </Space>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from "react";
import { ConfigProvider, message, Button, Space } from "antd";
import zhCN from "antd/locale/zh_CN";
import "dayjs/locale/zh-cn";

// 为了演示清晰，我们将使用 useMessage 的部分封装在一个子组件中
const MyApp: React.FC = () => {
  // 1. 调用 useMessage Hook
  const [messageApi, contextHolder] = message.useMessage();

  const showSuccess = () => {
    messageApi.success("操作已成功！");
  };

  const showError = () => {
    // 我们在这里故意用一个静态的message来看到区别
    message.error("操作失败，请检查您的输入。");
  };

  const showWarning = () => {
    messageApi.warning("部分选填项未填写。");
  };

  return (
    <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
      {/* 2. 必须在页面中渲染 contextHolder */}
      {contextHolder}
      <h3 className="text-xl font-bold mb-4 text-center">基础全局提示</h3>
      <Space wrap>
        {/* 3. 通过 api 对象调用提示方法 */}
        <Button type="primary" onClick={showSuccess}>
          显示成功提示
        </Button>
        <Button danger onClick={showError}>
          显示失败提示（错误的调用方法）
        </Button>
        <Button onClick={showWarning}>显示警告提示</Button>
      </Space>
    </div>
  );
};

// 整个应用
const App: React.FC = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      // 自定义主题
      theme={{
        token: {
          colorPrimary: "#1677ff",
        },
        // 自定义消息组件的样式
        components: {
          Message: {
            contentBg: "#ffe7ba",
          },
        },
      }}
    >
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        <MyApp />
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, message, Button, Space } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const messageKey = 'saveRequest';

  const handleAsyncSave = () => {
    // 1. 显示 "加载中" 提示，并设置一个唯一的 key。
    //    duration 设置为 0 表示该提示不会自动消失。
    messageApi.open({
      key: messageKey,
      type: 'loading',
      content: '正在保存中...',
      duration: 0,
    });

    // 2. 模拟一个 2 秒的异步网络请求
    setTimeout(() => {
      // 3. 模拟请求成功
      //    使用相同的 key 来更新之前的 "加载中" 提示
      messageApi.open({
        key: messageKey,
        type: 'success',
        content: '数据保存成功！',
        duration: 2, // 成功提示在 2 秒后消失
      });
    }, 2000);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        {contextHolder}
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">异步流程提示</h3>
          <Button type="primary" onClick={handleAsyncSave}>
            模拟异步保存
          </Button>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, notification, Button, Space } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  // 1. 调用 useNotification Hook
  const [api, contextHolder] = notification.useNotification();

  const openNotification = (type: 'success' | 'info' | 'warning' | 'error') => {
    // 2. 使用 api 对象调用通知
    api[type]({
      message: `这是一个 ${type} 通知`,
      description:
        '这是通知的详细描述内容，这里可以放入更长的文本，对通知标题进行补充说明。',
    });
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        {/* 3. 必须渲染 contextHolder 以使通知能够弹出 */}
        {contextHolder}
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">基础通知提醒框</h3>
          <Space wrap>
            <Button type="primary" onClick={() => openNotification('success')}>
              显示成功通知
            </Button>
            <Button onClick={() => openNotification('info')}>
              显示信息通知
            </Button>
            <Button onClick={() => openNotification('warning')}>
              显示警告通知
            </Button>
            <Button danger onClick={() => openNotification('error')}>
              显示失败通知
            </Button>
          </Space>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, notification, Button, Space } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import type { NotificationArgsProps } from 'antd';

const App: React.FC = () => {
  const [api, contextHolder] = notification.useNotification();

  const openCustomNotification = () => {
    const key = `open${Date.now()}`; // 生成一个唯一的 key

    const btn = (
      <Space>
        <Button type="link" size="small" onClick={() => api.destroy(key)}>
          稍后处理
        </Button>
        <Button type="primary" size="small" onClick={() => alert('正在执行操作...')}>
          立即执行
        </Button>
      </Space>
    );

    const config: NotificationArgsProps = {
      key,
      message: '您有一个新的待办事项',
      description: '一个高优先级的任务需要您立即处理，请确认是否执行。',
      placement: 'bottomLeft', // 从左下角弹出
      duration: 0, // 不会自动关闭
      actions: btn, // 自定义操作按钮 (v5.24.0+ 推荐)
      // btn: btn, // 旧版 API，v5.24.0 之前使用
      onClose: () => {
        console.log(`通知 (key: ${key}) 已关闭`);
      },
    };

    api.open(config);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex items-center justify-center">
        {contextHolder}
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">自定义通知</h3>
          <Button type="primary" onClick={openCustomNotification}>
            打开一个带按钮且不会自动关闭的通知
          </Button>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, Result, Button, Space, Divider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-white min-h-screen p-8">
        <h3 className="text-2xl font-bold mb-8 text-center">Result 组件 - 语义状态</h3>
        
        {/* 1. 成功状态 */}
        <Result
          status="success"
          title="项目创建成功！"
          subTitle="项目编号：202510010924，您可以在项目列表中查看详情。"
          extra={[
            <Button type="primary" key="console">返回控制台</Button>,
            <Button key="buy">再创建一个</Button>,
          ]}
        />

        <Divider />

        {/* 2. 失败状态 */}
        <Result
          status="error"
          title="提交失败"
          subTitle="请检查并修改以下信息后，再重新提交。"
          extra={[
            <Button type="primary" key="console">返回修改</Button>,
            <Button key="buy">联系客服</Button>,
          ]}
        />
        
        {/* 我们可以将其他状态放在 Tabs 或其他容器中进行展示，
            这里为了清晰，我们只展示最常用的 success 和 error。
            info 和 warning 的用法完全相同。
        */}
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, Result, Button, Tabs } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  const items = [
    {
      key: '403',
      label: '403 页面',
      children: (
        <Result
          status="403"
          title="403"
          subTitle="抱歉，您无权访问此页面。"
          extra={<Button type="primary">返回首页</Button>}
        />
      ),
    },
    {
      key: '404',
      label: '404 页面',
      children: (
        <Result
          status="404"
          title="404"
          subTitle="抱歉，您访问的页面不存在。"
          extra={<Button type="primary">返回首页</Button>}
        />
      ),
    },
    {
      key: '500',
      label: '500 页面',
      children: (
        <Result
          status="500"
          title="500"
          subTitle="抱歉，服务器出错了。"
          extra={<Button type="primary">返回首页</Button>}
        />
      ),
    },
  ];

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-white min-h-screen p-8">
        <h3 className="text-2xl font-bold mb-8 text-center">Result 组件 - HTTP 状态</h3>
        <Tabs defaultActiveKey="404" items={items} centered />
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useState } from 'react';
import { ConfigProvider, Progress, Button, Space, Divider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  const [percent, setPercent] = useState(30);

  const increase = () => {
    setPercent((prevPercent) => (prevPercent >= 100 ? 100 : prevPercent + 10));
  };

  const decline = () => {
    setPercent((prevPercent) => (prevPercent <= 0 ? 0 : prevPercent - 10));
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex justify-center">
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">Progress 组件演示</h3>

          <Divider orientation="left">线状进度条 (type="line")</Divider>
          <Progress percent={percent} />
          <Progress percent={50} status="active" />
          <Progress percent={70} status="exception" />
          <Progress percent={100} />
          <Progress percent={50} showInfo={false} />
          
          <Divider orientation="left">圆形进度条 (type="circle")</Divider>
          <Space wrap>
            <Progress type="circle" percent={percent} />
            <Progress type="circle" percent={70} status="exception" />
            <Progress type="circle" percent={100} />
          </Space>

           <Divider orientation="left">仪表盘 (type="dashboard")</Divider>
          <Progress type="dashboard" percent={percent} />

          <Divider orientation="left">动态控制</Divider>
          <Button.Group>
            <Button onClick={decline}>-</Button>
            <Button onClick={increase}>+</Button>
          </Button.Group>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useState } from 'react';
import { ConfigProvider, Spin, Switch, Card, Alert } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const toggle = (checked: boolean) => {
    setLoading(checked);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8 flex justify-center">
        <div className="p-8 bg-white rounded-lg shadow-lg w-[800px]">
          <h3 className="text-xl font-bold mb-4 text-center">Spin 组件演示</h3>

          <div className="mb-4">
            <p className="mb-2">基础用法：</p>
            <Spin />
          </div>

          <div className="mb-4">
            <p className="mb-2">作为容器，包裹一个区域：</p>
            <div className="p-12 relative border rounded">
              {/*
                1. 使用 Spin 包裹需要显示加载状态的区域。
                2. spinning 属性控制 Spin 是否可见。
                3. tip 属性可以添加加载提示文案。
              */}
              <Spin spinning={loading} tip="正在加载数据...">
                <Alert
                  message="这里是内容区域"
                  description="当 spinning 为 true 时，这块内容会被遮罩覆盖。"
                  type="info"
                />
              </Spin>
            </div>
            <div style={{ marginTop: 16 }}>
              切换加载状态：
              <Switch checked={loading} onChange={toggle} />
            </div>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useState } from 'react';
import { ConfigProvider, Modal, Button } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  // 1. 使用 state 控制 Modal 的显示/隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    console.log('点击了 OK');
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    console.log('点击了 Cancel');
    setIsModalOpen(false);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8">
        {/* 2. 按钮用于打开 Modal */}
        <Button type="primary" onClick={showModal}>
          打开基础对话框
        </Button>

        {/* 3. Modal 组件本体 */}
        <Modal
          title="基础对话框"
          open={isModalOpen} // 绑定 state
          onOk={handleOk} // 点击确定按钮时的回调
          onCancel={handleCancel} // 点击取消、关闭图标或遮罩时的回调
        >
          <p>这里是对话框的内容...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useState } from 'react';
import { ConfigProvider, Modal, Button } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 1. 新增一个 state 用于控制确认按钮的 loading 状态
  const [confirmLoading, setConfirmLoading] = useState(false);

  const showModal = () => { setIsModalOpen(true); };

  const handleOk = () => {
    // 2. 开始异步操作，设置 loading 为 true
    setConfirmLoading(true);
    console.log('开始提交...');

    // 3. 模拟一个 2 秒的异步网络请求
    setTimeout(() => {
      // 4. 异步操作结束，关闭 loading，并关闭 Modal
      setConfirmLoading(false);
      setIsModalOpen(false);
      console.log('提交成功！');
    }, 2000);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8">
        <Button type="primary" onClick={showModal}>
          打开异步对话框
        </Button>
        <Modal
          title="异步操作"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
          // 5. 将 loading state 绑定到 confirmLoading 属性
          confirmLoading={confirmLoading}
        >
          <p>点击“确定”后，按钮将进入加载状态，2秒后对话框关闭。</p>
        </Modal>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React from 'react';
import { ConfigProvider, Modal, Button } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  // 1. 调用 useModal Hook
  const [modal, contextHolder] = Modal.useModal();

  const showConfirm = async () => {
    // 2. 使用 modal 对象调用 confirm 方法
    try {
      await modal.confirm({
        title: '确认删除',
        content: '您确定要删除这条记录吗？此操作不可恢复。',
        okText: '确认',
        cancelText: '取消',
        // onOk 和 onCancel 也可以是 Promise
        onOk: () => {
          console.log('用户点击了确认');
          // 这里可以执行删除的 API 调用
        },
      });
      console.log('Promise resolved: 用户点击了确认');
    } catch (error) {
      console.log('Promise rejected: 用户点击了取消或关闭');
    }
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8">
        {/* 3. 必须渲染 contextHolder */}
        {contextHolder}
        <Button danger onClick={showConfirm}>
          显示确认对话框
        </Button>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useState } from 'react';
import { ConfigProvider, Drawer, Button } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const App: React.FC = () => {
  // 1. 使用 state 控制抽屉的显示/隐藏
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8">
        {/* 2. 按钮用于打开抽屉 */}
        <Button type="primary" onClick={showDrawer}>
          打开抽屉
        </Button>

        {/* 3. Drawer 组件本体 */}
        <Drawer
          title="基础抽屉"
          placement="right" // 控制滑出位置
          onClose={onClose} // 点击关闭图标或遮罩时调用
          open={open} // 绑定 state
        >
          <p>这里是抽屉的内容...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </div>
    </ConfigProvider>
  );
};

export default App;

import React, { useState } from 'react';
import {
  ConfigProvider, Drawer, Button, Form, Input, Select, Space
} from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

const { Option } = Select;

const App: React.FC = () => {
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();

  const showDrawer = () => { setOpen(true); };
  const onClose = () => { setOpen(false); };

  const onFinish = (values: any) => {
    console.log('表单提交:', values);
    onClose(); // 提交后关闭抽屉
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className="bg-gray-100 min-h-screen p-8">
        <Button type="primary" onClick={showDrawer}>
          创建新用户
        </Button>
        <Drawer
          title="创建新用户"
          width={520} // 可以自定义宽度
          onClose={onClose}
          open={open}
          // 使用 footer 属性来放置操作按钮
          footer={
            <Space style={{ textAlign: 'right', width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={onClose}>取消</Button>
              <Button onClick={() => form.submit()} type="primary">
                提交
              </Button>
            </Space>
          }
        >
          <Form form={form} layout="vertical" onFinish={onFinish}>
            <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
              <Input placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item name="gender" label="性别" rules={[{ required: true, message: '请选择性别' }]}>
              <Select placeholder="请选择性别">
                <Option value="male">男</Option>
                <Option value="female">女</Option>
              </Select>
            </Form.Item>
          </Form>
        </Drawer>
      </div>
    </ConfigProvider>
  );
};

export default App;