CRUD 模板

function UserManagement() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [form] = Form.useForm();

  const fetchData = async () => {
    setLoading(true);
    // 获取数据
    setLoading(false);
  };

  const handleAdd = () => {
    setEditingRecord(null);
    form.resetFields();
    setIsModalOpen(true);
  };

  const handleEdit = (record) => {
    setEditingRecord(record);
    form.setFieldsValue(record);
    setIsModalOpen(true);
  };

  const handleDelete = (record) => {
    Modal.confirm({
      title: "确认删除",
      content: `确定要删除 "${record.name}" 吗？`,
      okButtonProps: { danger: true },
      onOk: async () => {
        // 删除逻辑
        message.success("删除成功");
        fetchData();
      },
    });
  };

  const handleSubmit = async (values) => {
    // 提交逻辑
    message.success(editingRecord ? "更新成功" : "创建成功");
    setIsModalOpen(false);
    fetchData();
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
          添加
        </Button>
      </div>
      <Table columns={columns} dataSource={data} loading={loading} rowKey="id" />
      <Modal
        title={editingRecord ? "编辑" : "添加"}
        open={isModalOpen}
        onOk={() => form.submit()}
        onCancel={() => setIsModalOpen(false)}
      >
        <Form form={form} onFinish={handleSubmit} layout="vertical">
          {/* 表单项 */}
        </Form>
      </Modal>
    </div>
  );
}

重要注意事项

1. 类型导入 : ColumnsType 必须从 antd/es/table 导入，不能从 antd 导入

2. 图标名称 : ShieldOutlined 不存在，应使用 SafetyOutlined

3. SSR 兼容 : Next.js App Router 必须使用 AntdRegistry 包裹

4. 中文本地化 : 从 antd/locale/zh_CN 导入 zhCN

5. 图标混用 : lucide-react 图标可与 antd 图标混用，注意 props 差异：

   • antd: style={{ fontSize: 24 }}
   • lucide-react: size={24}

6. 语义化 DOM : 使用 classNames 和 styles props 进行样式定制

7. Hydration 安全 : 避免在组件渲染中使用 Math.random()

查询组件文档

当需要查询特定组件的详细 API 时，搜索本地文档：

• LOCAL_DOCS.md - 本地文档路径和搜索方法

每周安装量

1

代码仓库

azure12355/weilan-skills

GitHub 星标数

1

首次出现

1 天前

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1