1

npm install antd @ant-design/icons

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { Button, Table, Modal, Form, Input, Select } from 'antd'

function ProductList({ products = [] }) {
  const columns = [
    { title: '名称', dataIndex: 'name' },
    { title: '价格', dataIndex: 'price', render: v => `¥${v}` },
    { title: '操作', render: (_, record) => (
      <Button type="link">编辑</Button>
    )}
  ]

  return (
    <Table dataSource={products} columns={columns} rowKey="id" />
  )
}

1
2

npx shadcn-ui@latest init
npx shadcn-ui@latest add button table

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

import { Table, Space, Button, Tag } from 'antd'

function ProductTable({ products = [] }) {
  // columns 定义每一列的配置
  // title: 表头文字  dataIndex: 对应数据字段名
  // sorter: true 启用该列的客户端排序
  // filters + onFilter: 启用该列的筛选功能
  const columns = [
    { title: 'ID', dataIndex: 'id', sorter: true },
    {
      title: '名称',
      dataIndex: 'name',
      filters: [
        { text: '产品A', value: '产品A' },
        { text: '产品B', value: '产品B' },
      ],
      // onFilter：决定每行是否通过筛选
      // value 是用户选择的筛选项，record 是当前行数据
      onFilter: (value, record) => record.name.indexOf(value) === 0,
    },
    {
      title: '状态',
      dataIndex: 'status',
      // render：自定义单元格内容，status 是当前单元格的值
      render: status => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '上架' : '下架'}
        </Tag>
      )
    },
    {
      title: '操作',
      // render 的第一个参数是整行数据（此处用 _ 占位表示不用）
      // 第二个参数 record 是当前行完整数据对象
      render: (_, record) => (
        <Space>
          <Button size="small" onClick={() => handleEdit(record.id)}>编辑</Button>
          <Button size="small" danger onClick={() => handleDelete(record.id)}>删除</Button>
        </Space>
      )
    }
  ]

  return (
    <Table
      columns={columns}
      dataSource={products}
      rowKey="id"  // 指定每一行的唯一 key（对应数据中的 id 字段）
      // pagination：分页配置
      // pageSize: 每页条数  showSizeChanger: 显示切换每页条数下拉框
      pagination={{ pageSize: 10, showSizeChanger: true }}
      // onChange：分页、排序、筛选变化时触发
      // 参数 pagination / filters / sorter 包含最新状态，可用于请求后端数据
      onChange={(pagination, filters, sorter) => {
        console.log('分页/筛选/排序变化:', pagination, filters, sorter)
        // 实际项目中这里会重新请求后端数据：
        // fetchProducts({ page: pagination.current, pageSize: pagination.pageSize, ...filters })
      }}
    />
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { Table, Input, InputNumber } from 'antd'

// 可编辑单元格的渲染组件
// editing: 当前行是否处于编辑状态（由父组件管理）
// dataIndex: 当前列对应的字段名（用于 Form.Item 的 name）
// record: 当前行完整数据对象
// children: 默认显示内容（非编辑状态时渲染）
const EditableCell = ({ editing, dataIndex, record, children, ...restProps }) => {
  return (
    <td {...restProps}>
      {editing ? (
        // 如果 record.editable 为 true，该单元格可编辑，显示输入框
        // 如果 record.editable 为 false（如 ID 等不允许编辑的字段），仍然显示原始内容
        record.editable ? (
          <Form.Item name={dataIndex} style={{ margin: 0 }}>
            <Input />
          </Form.Item>
        ) : children
      ) : children}
    </td>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { Form, Input, Button, Space } from 'antd'

function DynamicForm() {
  // useForm()：获取 antd 表单实例，用于编程式操作表单
  const [form] = Form.useForm()

  return (
    <Form form={form}>
      {/* Form.List：专门处理动态表单项（数组形式）
          name="users"：对应表单数据中 users 数组字段
          fields：当前已有的表单项数组，每个项有 key（唯一标识）和 name（在数组中的索引）
          add / remove：Form.List 提供的添加/删除表单项的回调函数 */}
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              // name 是该表单项在数组中的索引
              // name={[name, 'name']} 表示 users[name].name（嵌套字段路径）
              // restField 包含一些内部需要的 props，要透传给 Form.Item
              <Space key={key} align="center">
                <Form.Item {...restField} name={[name, 'name']}>
                  <Input placeholder="姓名" />
                </Form.Item>
                <Form.Item {...restField} name={[name, 'email']}>
                  <Input placeholder="邮箱" />
                </Form.Item>
                {/* remove 接收数组索引 name，直接删除对应项 */}
                <Button onClick={() => remove(name)}>删除</Button>
              </Space>
            ))}
            <Button type="dashed" onClick={add} block>
              添加一行
            </Button>
          </>
        )}
      </Form.List>
    </Form>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 权限配置
const permissions = {
  admin: ['read', 'write', 'delete', 'manage'],
  editor: ['read', 'write'],
  viewer: ['read']
}

// 权限检查
function can(role, action) {
  return permissions[role]?.includes(action) || false
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { Navigate } from 'react-router-dom'

function PermissionRoute({ action, children }) {
  const { user } = useAuthStore()
  if (!can(user.role, action)) {
    return <Navigate to="/403" replace />
  }
  return children
}

<Route path="/users" element={
  <PermissionRoute action="read">
    <UserManagement />
  </PermissionRoute>
} />

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function PermissionButton({ action, children, ...props }) {
  const { user } = useAuthStore()

  if (!can(user.role, action)) return null

  return <Button {...props}>{children}</Button>
}

// 使用
<PermissionButton action="delete" danger onClick={handleDelete}>
  删除
</PermissionButton>

1

npm install recharts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'

function SalesChart({ data }) {
  return (
    <LineChart data={data}>
      {/* CartesianGrid：背景网格线，strokeDasharray="3 3" 表示虚线效果 */}
      <CartesianGrid strokeDasharray="3 3" />
      {/* XAxis/YAxis：坐标轴，dataKey 指定取数据的哪个字段作为坐标值 */}
      <XAxis dataKey="month" />
      <YAxis />
      {/* Tooltip：鼠标悬停时显示详细数据 */}
      <Tooltip />
      {/* Legend：图例，说明每条线代表什么 */}
      <Legend />
      {/* Line：折线图
          type="monotone" 让线条平滑（还有 "linear" 折线模式）
          dataKey 指定取数据的哪个字段作为 Y 轴值
          stroke 是线条颜色 */}
      <Line type="monotone" dataKey="sales" stroke="#4CAF50" />
      <Line type="monotone" dataKey="profit" stroke="#2196F3" />
    </LineChart>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function Dashboard() {
  return (
    <div className="grid grid-cols-4 gap-4">
      <StatCard title="总销售额" value="¥1,234,567" trend="+12%" />
      <StatCard title="订单数" value="8,888" trend="+8%" />
      <StatCard title="访问量" value="45,678" trend="-2%" />
      <StatCard title="转化率" value="3.21%" trend="+5%" />
    </div>
  )
}