组件配置手册

## 二、组件标准配置

### 【数据录入类】

#### 1. Input 输入框

**用途**：文本输入

**标准用法**：

```tsx
// ✅ 基础用法
<Input placeholder="请输入" />

// ✅ 带前缀/后缀
<Input prefix={<SearchOutlined />} placeholder="请搜索" />
<Input suffix={<EyeOutlined />} placeholder="请输入密码" />

// ✅ 文本域
<Input.TextArea placeholder="请输入" rows={4} />

// ✅ 密码框
<Input.Password placeholder="请输入密码" />

// ✅ 数字输入
<InputNumber placeholder="请输入" style={{ width: '100%' }} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Input style={{ background: '#fff' }} />
<Input className="bg-white" />
<Input className="border-gray-300" />
```

---

#### 2. Select 选择器

**用途**：下拉选择

**标准用法**：

```tsx
// ✅ 基础用法
<Select placeholder="请选择" options={options} style={{ width: '100%' }} />

// ✅ 多选
<Select mode="multiple" placeholder="请选择" options={options} />

// ✅ 可搜索
<Select showSearch optionFilterProp="label" placeholder="请搜索" options={options} />

// ✅ 带分组
<Select
  options={[
    {
      label: '分组一',
      options: [{ value: '1', label: '选项一' }]
    }
  ]}
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Select style={{ background: '#fff' }} />
<Select className="bg-white" />
```

---

#### 3. DatePicker 日期选择器

**用途**：日期/时间选择

**标准用法**：

```tsx
// ✅ 日期选择
<DatePicker placeholder="请选择日期" style={{ width: '100%' }} />

// ✅ 日期范围
<DatePicker.RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />

// ✅ 日期时间
<DatePicker showTime placeholder="请选择日期时间" style={{ width: '100%' }} />

// ✅ 月份选择
<DatePicker picker="month" placeholder="请选择月份" style={{ width: '100%' }} />

// ✅ 年份选择
<DatePicker picker="year" placeholder="请选择年份" style={{ width: '100%' }} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<DatePicker style={{ background: '#fff' }} />
```

---

#### 4. TimePicker 时间选择器

**用途**：时间选择

**标准用法**：

```tsx
// ✅ 时间选择
<TimePicker placeholder="请选择时间" style={{ width: '100%' }} />

// ✅ 时间范围
<TimePicker.RangePicker placeholder={['开始时间', '结束时间']} style={{ width: '100%' }} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<TimePicker style={{ background: '#fff' }} />
```

---

#### 5. Switch 开关

**用途**：布尔值切换

**标准用法**：

```tsx
// ✅ 基础用法
<Switch checked={checked} onChange={setChecked} />

// ✅ 带文字
<Switch checkedChildren="开" unCheckedChildren="关" />

// ✅ 带图标
<Switch checkedChildren={<CheckOutlined />} unCheckedChildren={<CloseOutlined />} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Switch style={{ background: '#07C160' }} />
```

---

#### 6. Checkbox 复选框

**用途**：多选

**标准用法**：

```tsx
// ✅ 基础用法
<Checkbox checked={checked} onChange={setChecked}>选项</Checkbox>

// ✅ 复选框组
<Checkbox.Group options={options} value={value} onChange={setValue} />

// ✅ 全选
<Checkbox indeterminate={indeterminate} checked={checkAll} onChange={onCheckAll}>
  全选
</Checkbox>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Checkbox style={{ color: '#07C160' }} />
```

---

#### 7. Radio 单选框

**用途**：单选

**标准用法**：

```tsx
// ✅ 基础用法
<Radio checked={checked} onChange={setChecked}>选项</Radio>

// ✅ 单选框组
<Radio.Group value={value} onChange={setValue}>
  <Radio value="1">选项一</Radio>
  <Radio value="2">选项二</Radio>
</Radio.Group>

// ✅ 按钮样式
<Radio.Group value={value} onChange={setValue} optionType="button">
  <Radio.Button value="1">选项一</Radio.Button>
  <Radio.Button value="2">选项二</Radio.Button>
</Radio.Group>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Radio style={{ color: '#07C160' }} />
```

---

#### 8. Slider 滑动条

**用途**：数值范围选择

**标准用法**：

```tsx
// ✅ 基础用法
<Slider defaultValue={30} />

// ✅ 带输入框
<Slider defaultValue={30} tooltip={{ open: true }} />

// ✅ 范围选择
<Slider range defaultValue={[20, 50]} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Slider style={{ background: '#07C160' }} />
```

---

#### 9. Rate 评分

**用途**：星级评分

**标准用法**：

```tsx
// ✅ 基础用法
<Rate defaultValue={3} />

// ✅ 半星
<Rate allowHalf defaultValue={2.5} />

// ✅ 自定义字符
<Rate character={<HeartOutlined />} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Rate style={{ color: '#07C160' }} />
```

---

#### 10. Upload 上传

**用途**：文件上传

**标准用法**：

```tsx
// ✅ 基础上传
<Upload>
  <Button icon={<UploadOutlined />}>点击上传</Button>
</Upload>

// ✅ 图片上传
<Upload listType="picture-card">
  <div><PlusOutlined /><div>上传</div></div>
</Upload>

// ✅ 拖拽上传
<Upload.Dragger>
  <p>点击或拖拽上传</p>
</Upload.Dragger>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Upload style={{ background: '#fff' }} />
```

---

#### 11. Transfer 穿梭框

**用途**：双栏穿梭选择

**标准用法**：

```tsx
// ✅ 标准用法
<Transfer
  dataSource={data}
  titles={['可选', '已选']}
  targetKeys={targetKeys}
  onChange={setTargetKeys}
  render={item => item.title}
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Transfer style={{ background: '#fff' }} />
```

---

#### 12. Cascader 级联选择

**用途**：多级联动选择

**标准用法**：

```tsx
// ✅ 标准用法
<Cascader
  placeholder="请选择"
  options={options}
  style={{ width: '100%' }}
/>

// ✅ 可搜索
<Cascader showSearch placeholder="请搜索" options={options} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Cascader style={{ background: '#fff' }} />
```

---

#### 13. TreeSelect 树选择

**用途**：树形结构选择

**标准用法**：

```tsx
// ✅ 标准用法
<TreeSelect
  placeholder="请选择"
  treeData={treeData}
  style={{ width: '100%' }}
/>

// ✅ 多选
<TreeSelect
  multiple
  placeholder="请选择"
  treeData={treeData}
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<TreeSelect style={{ background: '#fff' }} />
```

---

#### 14. ColorPicker 颜色选择器

**用途**：颜色选择

**标准用法**：

```tsx
// ✅ 标准用法
<ColorPicker defaultValue="#07C160" />

// ✅ 带文字
<ColorPicker showText defaultValue="#07C160" />
```

**禁止操作**：

```tsx
// ❌ 禁止自定义背景样式
```

---

#### 15. Mentions 提及

**用途**：@提及功能

**标准用法**：

```tsx
// ✅ 标准用法
<Mentions placeholder="请输入 @ 提及">
  <Mentions.Option value="user1">用户一</Mentions.Option>
  <Mentions.Option value="user2">用户二</Mentions.Option>
</Mentions>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Mentions style={{ background: '#fff' }} />
```

---

### 【数据展示类】

#### 16. Table 表格

**用途**：数据列表展示

**标准用法**：

```tsx
// ✅ 基础用法
<Table
  columns={columns}
  dataSource={data}
  rowKey="id"
/>

// ✅ 分页表格
<Table
  columns={columns}
  dataSource={data}
  rowKey="id"
  pagination={{ pageSize: 10, showSizeChanger: true, showTotal: (total) => `共 ${total} 条` }}
/>

// ✅ 可选择
<Table
  rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
  columns={columns}
  dataSource={data}
  rowKey="id"
/>

// ✅ 可展开
<Table
  expandable={{
    expandedRowRender: (record) => <p>{record.description}</p>
  }}
  columns={columns}
  dataSource={data}
  rowKey="id"
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Table style={{ background: '#fff' }} />
<Table className="bg-white" />
// 不要自定义 headerBg、rowHoverBg
```

---

#### 17. List 列表

**用途**：列表数据展示

**标准用法**：

```tsx
// ✅ 基础用法
<List
  dataSource={data}
  renderItem={(item) => (
    <List.Item>
      <List.Item.Meta title={item.title} description={item.desc} />
    </List.Item>
  )}
/>

// ✅ 带分页
<List
  pagination={{ pageSize: 10 }}
  dataSource={data}
  renderItem={(item) => <List.Item>{item.name}</List.Item>}
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<List style={{ background: '#fff' }} />
```

---

#### 18. Card 卡片

**用途**：内容容器

**标准用法**：

```tsx
// ✅ 基础用法
<Card title="标题">
  内容
</Card>

// ✅ 带操作
<Card
  title="标题"
  extra={<Button type="link">更多</Button>}
>
  内容
</Card>

// ✅ 可悬浮
<Card hoverable>
  内容
</Card>

// ✅ 栅格卡片
<Card>
  <Card.Grid>内容1</Card.Grid>
  <Card.Grid>内容2</Card.Grid>
</Card>

// ✅ 无标题
<Card>
  内容
</Card>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Card style={{ background: '#fff' }} />
<Card className="bg-white" />
<Card style={{ borderColor: '#e5e5e5' }} />
```

---

#### 19. Tabs 选项卡

**用途**：内容切换

**标准用法**：

```tsx
// ✅ 基础用法
<Tabs
  activeKey={activeKey}
  onChange={setActiveKey}
  items={[
    { key: '1', label: '标签一', children: <Content1 /> },
    { key: '2', label: '标签二', children: <Content2 /> },
  ]}
/>

// ✅ 卡片型
<Tabs
  type="card"
  items={[
    { key: '1', label: '标签一', children: <Content1 /> },
  ]}
/>

// ✅ 位置
<Tabs tabPosition="left" items={items} />

// ✅ 可编辑
<Tabs type="editable-card" onEdit={onEdit} items={items} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Tabs style={{ background: '#fff' }} />
<Tabs className="bg-white" />
// 不要自定义 ink-bar 颜色
```

---

#### 20. Tree 树形控件

**用途**：树形结构展示

**标准用法**：

```tsx
// ✅ 基础用法
<Tree
  treeData={treeData}
  defaultExpandAll
/>

// ✅ 可选择
<Tree
  checkable
  treeData={treeData}
  checkedKeys={checkedKeys}
  onCheck={setCheckedKeys}
/>

// ✅ 可拖拽
<Tree draggable treeData={treeData} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Tree style={{ background: '#fff' }} />
```

---

#### 21. Descriptions 描述列表

**用途**：详情信息展示

**标准用法**：

```tsx
// ✅ 基础用法
<Descriptions title="用户信息">
  <Descriptions.Item label="姓名">张三</Descriptions.Item>
  <Descriptions.Item label="年龄">25</Descriptions.Item>
  <Descriptions.Item label="地址">北京</Descriptions.Item>
</Descriptions>

// ✅ 边框样式
<Descriptions bordered>
  <Descriptions.Item label="姓名">张三</Descriptions.Item>
</Descriptions>

// ✅ 垂直布局
<Descriptions layout="vertical">
  <Descriptions.Item label="姓名">张三</Descriptions.Item>
</Descriptions>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Descriptions style={{ background: '#fff' }} />
```

---

#### 22. Statistic 统计数值

**用途**：数值统计展示

**标准用法**：

```tsx
// ✅ 基础用法
<Statistic title="用户总数" value={112893} />

// ✅ 带前缀/后缀
<Statistic title="收入" value={112893} prefix="¥" />

// ✅ 倒计时
<Statistic.Countdown title="倒计时" value={deadline} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Statistic style={{ color: '#07C160' }} />
```

---

#### 23. Timeline 时间轴

**用途**：时间线展示

**标准用法**：

```tsx
// ✅ 基础用法
<Timeline>
  <Timeline.Item>创建 2015-09-01</Timeline.Item>
  <Timeline.Item>初审 2015-09-02</Timeline.Item>
  <Timeline.Item>复审 2015-09-03</Timeline.Item>
</Timeline>

// ✅ 带颜色
<Timeline>
  <Timeline.Item color="success">完成</Timeline.Item>
  <Timeline.Item color="error">失败</Timeline.Item>
</Timeline>
```

**禁止操作**：

```tsx
// ❌ 禁止自定义背景
```

---

#### 24. Tag 标签

**用途**：标签标记

**标准用法**：

```tsx
// ✅ 基础用法
<Tag>标签</Tag>

// ✅ 可关闭
<Tag closable onClose={() => {}}>标签</Tag>

// ✅ 可选
<Tag.CheckableTag checked={checked} onChange={setChecked}>标签</Tag.CheckableTag>

// ✅ 预设颜色
<Tag color="success">成功</Tag>
<Tag color="processing">处理中</Tag>
<Tag color="error">错误</Tag>
<Tag color="warning">警告</Tag>
<Tag color="default">默认</Tag>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Tag style={{ background: '#fff', color: '#000' }} />
```

---

#### 25. Badge 徽标

**用途**：数字/状态标记

**标准用法**：

```tsx
// ✅ 数字徽标
<Badge count={5}>
  <Button>消息</Button>
</Badge>

// ✅ 小红点
<Badge dot>
  <Button>通知</Button>
</Badge>

// ✅ 状态徽标
<Badge status="success" text="成功" />
```

**禁止操作**：

```tsx
// ❌ 禁止自定义颜色样式
```

---

#### 26. Avatar 头像

**用途**：用户头像

**标准用法**：

```tsx
// ✅ 图片头像
<Avatar src="url" />

// ✅ 文字头像
<Avatar>张</Avatar>

// ✅ 图标头像
<Avatar icon={<UserOutlined />} />

// ✅ 头像组
<Avatar.Group>
  <Avatar src="url1" />
  <Avatar src="url2" />
</Avatar.Group>
```

**禁止操作**：

```tsx
// ❌ 禁止（除非自定义颜色是业务需求）
<Avatar style={{ background: '#07C160' }} />
```

---

#### 27. Image 图片

**用途**：图片展示/预览

**标准用法**：

```tsx
// ✅ 基础用法
<Image src="url" alt="图片" />

// ✅ 预览
<Image.PreviewGroup>
  <Image src="url1" />
  <Image src="url2" />
</Image.PreviewGroup>
```

**禁止操作**：

```tsx
// ❌ 禁止自定义背景
```

---

#### 28. Calendar 日历

**用途**：日历展示

**标准用法**：

```tsx
// ✅ 基础用法
<Calendar />

// ✅ 带事件
<Calendar cellRender={(date) => <div>{date.date()}</div>} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Calendar style={{ background: '#fff' }} />
```

---

#### 29. Collapse 折叠面板

**用途**：内容折叠

**标准用法**：

```tsx
// ✅ 基础用法
<Collapse items={[
  { key: '1', label: '标题一', children: <p>内容</p> },
  { key: '2', label: '标题二', children: <p>内容</p> },
]} />

// ✅ 手风琴
<Collapse accordion items={items} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Collapse style={{ background: '#fff' }} />
```

---

#### 30. Carousel 走马灯

**用途**：轮播展示

**标准用法**：

```tsx
// ✅ 基础用法
<Carousel>
  <div>内容1</div>
  <div>内容2</div>
</Carousel>

// ✅ 自动播放
<Carousel autoplay>
  <div>内容1</div>
  <div>内容2</div>
</Carousel>
```

**禁止操作**：

```tsx
// ❌ 禁止自定义背景样式
```

---

#### 31. Segmented 分段控制器

**用途**：选项分段

**标准用法**：

```tsx
// ✅ 基础用法
<Segmented
  options={['选项一', '选项二', '选项三']}
  value={value}
  onChange={setValue}
/>

// ✅ 带图标
<Segmented
  options={[
    { label: '列表', value: 'list', icon: <UnorderedListOutlined /> },
    { label: '卡片', value: 'card', icon: <AppstoreOutlined /> },
  ]}
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Segmented style={{ background: '#fff' }} />
```

---

#### 32. QRCode 二维码

**用途**：二维码生成

**标准用法**：

```tsx
// ✅ 基础用法
<QRCode value="https://example.com" />

// ✅ 带图标
<QRCode value="https://example.com" icon="logo.png" />
```

**禁止操作**：

```tsx
// ❌ 禁止自定义颜色（用默认即可）
```

---

### 【反馈类】

#### 33. Modal 弹窗

**用途**：弹窗对话框

**标准用法**：

```tsx
// ✅ 基础用法
<Modal
  title="标题"
  open={open}
  onCancel={onCancel}
  onOk={onOk}
>
  内容
</Modal>

// ✅ 确认弹窗
Modal.confirm({
  title: '确认删除？',
  content: '删除后不可恢复',
  onOk: () => {},
})

// ✅ 自定义按钮
<Modal
  title="标题"
  open={open}
  onCancel={onCancel}
  footer={[
    <Button key="cancel" onClick={onCancel}>取消</Button>,
    <Button key="ok" type="primary" onClick={onOk}>确定</Button>,
  ]}
>
  内容
</Modal>

// ✅ 全屏弹窗
<Modal width="100%" style={{ top: 0 }} open={open}>
  内容
</Modal>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Modal style={{ background: '#fff' }} />
<Modal className="bg-white" />
<Modal wrapClassName="custom-modal" />  // 不要自定义边框样式
```

---

#### 34. Drawer 抽屉

**用途**：侧边抽屉

**标准用法**：

```tsx
// ✅ 基础用法
<Drawer
  title="标题"
  open={open}
  onClose={onClose}
>
  内容
</Drawer>

// ✅ 位置
<Drawer placement="left" open={open}>
  内容
</Drawer>

// ✅ 带页脚
<Drawer
  title="标题"
  open={open}
  onClose={onClose}
  footer={
    <div style={{ textAlign: 'right' }}>
      <Button onClick={onClose}>取消</Button>
      <Button type="primary" onClick={onOk}>确定</Button>
    </div>
  }
>
  内容
</Drawer>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Drawer style={{ background: '#fff' }} />
```

---

#### 35. Message 全局提示

**用途**：操作反馈提示

**标准用法**：

```tsx
// ✅ 正确用法：通过 App.useApp() 获取
function MyComponent() {
  const { message } = App.useApp();
  
  const handleSave = async () => {
    try {
      await saveData();
      message.success('保存成功');
    } catch {
      message.error('保存失败');
    }
  };
}

// ✅ 提示类型
message.success('成功');
message.error('失败');
message.warning('警告');
message.info('提示');
message.loading('加载中...');
```

**禁止操作**：

```tsx
// ❌ 禁止直接使用静态方法
message.success('成功');
```

---

#### 36. Notification 通知提醒

**用途**：系统通知

**标准用法**：

```tsx
// ✅ 正确用法：通过 App.useApp() 获取
function MyComponent() {
  const { notification } = App.useApp();
  
  const showNotification = () => {
    notification.success({
      message: '操作成功',
      description: '数据已保存',
    });
  };
}

// ✅ 位置
notification.open({
  message: '通知',
  description: '内容',
  placement: 'topRight',  // topLeft, bottomRight, bottomLeft
});
```

**禁止操作**：

```tsx
// ❌ 禁止直接使用静态方法
notification.success({...});
```

---

#### 37. Popover 气泡卡片

**用途**：气泡弹窗

**标准用法**：

```tsx
// ✅ 基础用法
<Popover content="内容" title="标题">
  <Button>悬停显示</Button>
</Popover>

// ✅ 点击触发
<Popover trigger="click" content="内容">
  <Button>点击显示</Button>
</Popover>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Popover overlayStyle={{ background: '#fff' }} />
```

---

#### 38. Popconfirm 气泡确认框

**用途**：操作确认

**标准用法**：

```tsx
// ✅ 基础用法
<Popconfirm title="确认删除？" onConfirm={onDelete}>
  <Button danger>删除</Button>
</Popconfirm>

// ✅ 带描述
<Popconfirm
  title="确认删除？"
  description="删除后不可恢复"
  onConfirm={onDelete}
>
  <Button danger>删除</Button>
</Popconfirm>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Popconfirm overlayStyle={{ background: '#fff' }} />
```

---

#### 39. Tooltip 文字提示

**用途**：鼠标悬停提示

**标准用法**：

```tsx
// ✅ 基础用法
<Tooltip title="提示内容">
  <Button>悬停显示</Button>
</Tooltip>

// ✅ 位置
<Tooltip title="提示" placement="top">
  <Button>上方</Button>
</Tooltip>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Tooltip overlayStyle={{ background: '#fff' }} />
```

---

#### 40. Progress 进度条

**用途**：进度展示

**标准用法**：

```tsx
// ✅ 线形进度条
<Progress percent={30} />

// ✅ 圆形进度条
<Progress type="circle" percent={30} />

// ✅ 仪表盘
<Progress type="dashboard" percent={30} />

// ✅ 步骤进度条
<Progress percent={60} status="active" />
<Progress percent={100} status="success" />
<Progress percent={50} status="exception" />
```

**禁止操作**：

```tsx
// ❌ 禁止（使用默认主题色）
<Progress strokeColor="#07C160" />
```

---

#### 41. Spin 加载中

**用途**：加载状态

**标准用法**：

```tsx
// ✅ 基础用法
<Spin />

// ✅ 包裹内容
<Spin spinning={loading}>
  <Content />
</Spin>

// ✅ 自定义提示
<Spin tip="加载中...">
  <Content />
</Spin>

// ✅ 全屏加载
<Spin fullscreen />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Spin style={{ color: '#07C160' }} />
```

---

#### 42. Skeleton 骨架屏

**用途**：内容占位

**标准用法**：

```tsx
// ✅ 基础用法
<Skeleton />

// ✅ 带头像
<Skeleton avatar paragraph={{ rows: 4 }} />

// ✅ 包裹内容
<Skeleton loading={loading}>
  <Content />
</Skeleton>
```

**禁止操作**：

```tsx
// ❌ 禁止自定义颜色
```

---

#### 43. Alert 警告提示

**用途**：警告信息

**标准用法**：

```tsx
// ✅ 基础用法
<Alert message="成功提示" type="success" />
<Alert message="信息提示" type="info" />
<Alert message="警告提示" type="warning" />
<Alert message="错误提示" type="error" />

// ✅ 可关闭
<Alert message="提示" type="info" closable />

// ✅ 带描述
<Alert
  message="警告"
  description="这是一段描述文字"
  type="warning"
/>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Alert style={{ background: '#fff' }} />
```

---

#### 44. Result 结果

**用途**：结果页面

**标准用法**：

```tsx
// ✅ 成功结果
<Result
  status="success"
  title="操作成功"
  subTitle="请等待审核"
  extra={<Button type="primary">返回</Button>}
/>

// ✅ 错误结果
<Result
  status="error"
  title="操作失败"
  subTitle="请重试"
/>

// ✅ 404
<Result
  status="404"
  title="404"
  subTitle="页面不存在"
/>
```

**禁止操作**：

```tsx
// ❌ 禁止自定义背景
```

---

#### 45. Empty 空状态

**用途**：空数据展示

**标准用法**：

```tsx
// ✅ 基础用法
<Empty />

// ✅ 带描述
<Empty description="暂无数据" />

// ✅ 自定义图标
<Empty image={<SmileOutlined />} description="暂无数据" />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Empty style={{ background: '#fff' }} />
```

---

### 【导航类】

#### 46. Menu 菜单

**用途**：导航菜单

**标准用法**：

```tsx
// ✅ 水平菜单
<Menu mode="horizontal" items={items} />

// ✅ 垂直菜单
<Menu mode="inline" items={items} />

// ✅ 暗色主题
<Menu theme="dark" items={items} />
```

**注意事项**：

⚠️ 项目主导航栏已由 ProLayoutWrapper 管理，禁止修改

---

#### 47. Dropdown 下拉菜单

**用途**：下拉操作菜单

**标准用法**：

```tsx
// ✅ 基础用法
<Dropdown menu={{ items }}>
  <Button>下拉</Button>
</Dropdown>

// ✅ 点击触发
<Dropdown trigger={['click']} menu={{ items }}>
  <Button>点击下拉</Button>
</Dropdown>

// ✅ 带箭头
<Dropdown arrow menu={{ items }}>
  <Button>下拉</Button>
</Dropdown>
```

**禁止操作**：

```tsx
// ❌ 禁止
<Dropdown overlayStyle={{ background: '#fff' }} />
```

---

#### 48. Pagination 分页

**用途**：分页导航

**标准用法**：

```tsx
// ✅ 基础用法
<Pagination current={page} total={100} onChange={setPage} />

// ✅ 带页码选择
<Pagination
  showSizeChanger
  showQuickJumper
  current={page}
  total={100}
  onChange={setPage}
/>

// ✅ 显示总数
<Pagination showTotal={(total) => `共 ${total} 条`} total={100} />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Pagination style={{ color: '#07C160' }} />
```

---

#### 49. Steps 步骤条

**用途**：步骤导航

**标准用法**：

```tsx
// ✅ 基础用法
<Steps current={0} items={[
  { title: '步骤一' },
  { title: '步骤二' },
  { title: '步骤三' },
]} />

// ✅ 带图标
<Steps items={[
  { title: '登录', icon: <UserOutlined /> },
  { title: '验证', icon: <SolutionOutlined /> },
  { title: '完成', icon: <SmileOutlined /> },
]} />

// ✅ 垂直
<Steps direction="vertical" items={items} />
```

**禁止操作**：

```tsx
// ❌ 禁止自定义颜色
```

---

#### 50. Breadcrumb 面包屑

**用途**：路径导航

**标准用法**：

```tsx
// ✅ 基础用法
<Breadcrumb items={[
  { title: '首页', href: '/' },
  { title: '列表', href: '/list' },
  { title: '详情' },
]} />
```

**注意事项**：

⚠️ 项目面包屑已由 ProLayoutWrapper 管理，禁止修改

---

### 【布局类】

#### 51. Layout 布局

**注意事项**：

⚠️ 项目布局已由 AdminLayout 管理，禁止修改

❌ 禁止创建独立 layout.tsx
❌ 禁止修改 Layout 样式

---

#### 52. Space 间距

**用途**：元素间距

**标准用法**：

```tsx
// ✅ 基础用法
<Space>
  <Button>按钮一</Button>
  <Button>按钮二</Button>
</Space>

// ✅ 垂直方向
<Space direction="vertical">
  <Button>按钮一</Button>
  <Button>按钮二</Button>
</Space>

// ✅ 间距大小
<Space size="large">
  <Button>按钮</Button>
</Space>

// ✅ 对齐
<Space align="center">
  <span>文字</span>
  <Button>按钮</Button>
</Space>
```

---

#### 53. Divider 分割线

**用途**：内容分割

**标准用法**：

```tsx
// ✅ 水平分割
<Divider />

// ✅ 带文字
<Divider>文字</Divider>

// ✅ 垂直分割
<Divider type="vertical" />
```

**禁止操作**：

```tsx
// ❌ 禁止
<Divider style={{ borderColor: '#e5e5e5' }} />
```

---

#### 54. Grid 栅格

**用途**：响应式布局

**标准用法**：

```tsx
// ✅ 基础用法
<Row gutter={16}>
  <Col span={12}>左</Col>
  <Col span={12}>右</Col>
</Row>

// ✅ 响应式
<Row gutter={[16, 16]}>
  <Col xs={24} sm={12} md={8} lg={6}>
    内容
  </Col>
</Row>
```

**禁止操作**：

```tsx
// ❌ 禁止自定义背景
```

---

### 【表单组合】

#### 55. Form 表单

**用途**：表单容器

**标准用法**：

```tsx
// ✅ 标准用法
<Form
  form={form}
  layout="vertical"
  onFinish={onFinish}
>
  <Form.Item label="姓名" name="name" rules={[{ required: true }]}>
    <Input placeholder="请输入" />
  </Form.Item>
  
  <Form.Item label="部门" name="department">
    <Select placeholder="请选择" options={options} />
  </Form.Item>
  
  <Form.Item>
    <Space>
      <Button type="primary" htmlType="submit">提交</Button>
      <Button onClick={onReset}>重置</Button>
    </Space>
  </Form.Item>
</Form>

// ✅ 行内表单
<Form layout="inline">
  <Form.Item name="keyword">
    <Input placeholder="搜索" />
  </Form.Item>
  <Form.Item>
    <Button type="primary">查询</Button>
  </Form.Item>
</Form>
```

**禁止操作**：

```tsx
// ❌ 禁止给 Form.Item 内组件添加硬编码样式
```

---

#### 56. Form.List 动态表单

**用途**：动态表单项

**标准用法**：

```tsx
// ✅ 动态列表
<Form.List name="users">
  {(fields, { add, remove }) => (
    <>
      {fields.map((field) => (
        <Space key={field.key} align="baseline">
          <Form.Item name={[field.name, 'name']} rules={[{ required: true }]}>
            <Input placeholder="姓名" />
          </Form.Item>
          <Form.Item name={[field.name, 'age']}>
            <Input placeholder="年龄" />
          </Form.Item>
          <Button onClick={() => remove(field.name)}>删除</Button>
        </Space>
      ))}
      <Button onClick={() => add()}>添加</Button>
    </>
  )}
</Form.List>
```

---

#### 57. Form.useFormInstance

**用途**：表单实例操作

**标准用法**：

```tsx
// ✅ 标准用法
const [form] = Form.useForm();

// 重置表单
form.resetFields();

// 设置值
form.setFieldsValue({ name: '张三' });

// 获取值
const values = form.getFieldsValue();

// 验证
form.validateFields();
```

---