Cursor rule

1---
2description:
3globs:
4alwaysApply: false
5---
6# 组件开发规范
7 
8## 1. 组件结构
9```typescript
10// 组件导入顺序
11import React, { useState, useEffect } from 'react';
12import { Button, Card } from 'antd';
13import { useDispatch, useSelector } from 'react-redux';
14import { customHook, utilFunction } from '@/utils';
15import styles from './index.module.scss';
16 
17// 类型定义
18interface Props {
19  title: string;
20  onConfirm?: () => void;
21}
22 
23// 组件实现
24const ComponentName: React.FC<Props> = ({ title, onConfirm }) => {
25  // 状态管理
26  const [loading, setLoading] = useState(false);
27 
28  // Redux
29  const user = useSelector(state => state.auth.user);
30  const dispatch = useDispatch();
31 
32 
33  // 事件处理
34  const handleConfirm = () => {
35    onConfirm?.();
36  };
37 
38  // 副作用
39  useEffect(() => {
40    // 初始化逻辑
41  }, []);
42 
43 
44  // 渲染
45  return (
46    <Card title={title}>
47      <Button onClick={handleConfirm}>确认</Button>
48    </Card>
49  );
50};
51 
52export default ComponentName;
53```
54 
55### 2. 组件命名规范
56- **组件名称：PascalCase**
57```typescript
58<UserProfile />
59<GlobalHeader />
60<ThemeDrawer />
61```
62- **Iconify 图标：kebab-case**
63```typescript
64<IconMdiHome />
65<IconAntDesignUserOutlined />
66```
67 
68### 3. Props 和 State 设计
69- 使用 TypeScript 接口定义 Props
70- 为可选属性使用 `?` 标记
71- 使用泛型提高复用性
72```typescript
73interface TableProps<T = any> {
74  data: T[];
75  loading?: boolean;
76  onRowClick?: (record: T) => void;
77}
78```
79