Cursor rule

1---
2description:
3globs:
4alwaysApply: false
5---
6---
7description:
8globs:
9alwaysApply: true
10---
11# 项目背景
12 
13这是 soybeanjs/soybean-admin-react的源代码仓库，是一个 React 后台管理模板仓库
14 
15- 使用 TypeScript 和 React 开发
16- 兼容 React 16 ~ 19 版本
17- 遵循 Ant Design 设计规范
18- 支持国际化
19- 基于 React 18 + TypeScript + Vite 的后台管理系统
20- 采用 pnpm monorepo 架构
21- 使用文件系统路由，类似 Next.js 的路由系统
22- 技术栈：React、TypeScript、Vite、Redux Toolkit、Antd、UnoCSS
23- 代码风格遵循 SoybeanJS 官方规范
24 
25## 编码规范
26 
27- 使用 TypeScript 和 React 书写
28- 使用函数式组件和 hooks，避免类组件
29- 使用提前返回（early returns）提高代码可读性
30- 组件名使用大驼峰（PascalCase）
31- 属性名使用小驼峰（camelCase）
32- 合理使用 React.memo、useMemo 和 useCallback 优化性能
33- 所有页面放置于 `src/pages`，每个页面一个文件夹，命名使用小写连字符。
34- 公共组件放在 `src/components`，抽象通用性组件优先。
35- API 调用统一由 `src/service` 管理，采用 axios 封装。
36- 工具函数集中于 `src/utils`。
37 
38## 核心开发原则
39 
40### 1. 严格的类型安全
41- 所有代码必须使用 TypeScript
42- 避免使用 `any` 类型，优先使用具体类型或泛型
43- 为所有函数参数和返回值定义明确的类型
44- 使用 `.d.ts` 文件定义全局类型
45 
46### 2. 响应式设计优先
47- 所有组件必须考虑移动端适配
48- 使用 UnoCSS 进行样式开发
49- 遵循移动端优先的设计理念
50 
51### 3. 性能优化
52- 使用 React.memo、useMemo、useCallback 优化组件性能
53- 路由懒加载，避免首屏加载过慢
54- 图片懒加载和压缩优化
55 
56## 文件和目录命名规范
57 
58### 1. 文件和文件夹命名
59- **统一使用小写字母 + 连字符（kebab-case）命名**
60- 多个单词用连字符 `-` 连接
61- 示例：`user-center`、`role-manage`、`global-header`
62 
63### 2. 组件文件命名
64- React 组件文件使用 PascalCase 命名
65- 页面组件：`index.tsx`
66- 动态路由：`[id].tsx`、`[...slug].tsx`
67- 布局组件：`layout.tsx`
68- 加载组件：`loading.tsx`
69- 错误组件：`error.tsx`
70 
71### 3. 变量和函数命名
72- **变量和普通函数：camelCase**
73```typescript
74  const userInfo = {...};
75  const getUserInfo = () => {...};
76```
77- **常量：UPPER_SNAKE_CASE**
78```typescript
79  const MAX_RETRY_COUNT = 3;
80  const API_BASE_URL = 'https://api.example.com';
81```
82- **类型和接口：PascalCase**
83```typescript
84  interface UserInfo {
85    name: string;
86  }
87  type ApiResponse<T> = {
88    data: T;
89  };
90```
91- **请求函数：以 `fetch` 开头**
92```typescript
93  const fetchUserList = () => {...};
94  const fetchUserById = (id: string) => {...};
95```
96 
97### 4. 样式类命名
98 
99- 使用 Tailwind CSS + UnoCSS 配合，避免直接写原生 CSS。
100- 原则：能用类写完的 UI 不新建样式文件。
101- `class` 顺序遵循结构 > 状态 > 修饰。
102- 尽量通过 `theme` 和 `preset` 控制色彩与间距。
103- 避免写死颜色、字体，统一使用 token。
104- 使用小写字母 + 连字符（kebab-case）
105- 遵循 BEM 命名规范
106```css
107.user-card {
108  .user-card__header {
109    .user-card__title {
110    }
111  }
112}
113```
114 
115> 遵循约定大于配置，尽量避免横跨多个职责的模块。
116 
117