diff --git a/Typescript/React-Web/.cursorrules b/Typescript/React-Web/.cursorrules new file mode 100644 index 0000000..9989494 --- /dev/null +++ b/Typescript/React-Web/.cursorrules @@ -0,0 +1,92 @@ +--- +description: React Web开发最佳实践与规范 +--- + +# React Web开发规范 + +## 技术栈 + +- Typescript +- React +- Unocss +- Vite +- Zustant +- Mantine +- Tanstack Query + +## 依赖管理 + +- 使用`pnpm`管理依赖 + +## 项目结构 + +- 项目整体结构如下: + + ```markdown + $PROJECT_ROOT + ├── src + │ ├── $MODULE1 # 模块1 + │ ├── $MODULE2 # 模块2 + ├───├── App.tsx # 路由配置 + ├───├── main.tsx # 入口文件 + ├───├── uno.d.ts # unocss类型声明 + ├───├── vite-env.d.ts # vite类型声明 + ├── .env # 环境变量 + ├── .env.development # 开发环境变量 + ├── .env.production # 生产环境变量 + ├── .gitignore # git忽略文件 + ├── .cursorrules # cursor规则 + ├── .clinerules # 项目规范/ClineRules + ├── .windsurfrules # 项目规范/WindsurfRules + ``` +- 采用模块化设计,每个模块位于`$PROJECT_ROOT/src`目录下,其结构如下: + + ```markdown + $MODULE1 + ├── components # 组件 + │ ├── Cmp1.tsx + │ ├── index.ts + ├── contexts # 上下文 + │ ├── Ctx1.tsx + │ ├── index.ts + ├── layouts # 布局 + │ ├── Layout1.tsx + │ ├── index.ts + ├── pages # 页面 + │ ├── Page1.tsx + │ ├── Page2.tsx + ├── stores # 状态管理 + │ ├── index.ts + │ └── Store1.ts + ├── schemas.ts # 类型定义 + ├── consts.tsx # 常量 + ├── api.ts # 接口 + ├── index.ts # 入口 + └── utils.ts # 工具函数 + ``` + + +## 样式 + +- 使用`unocss`作为样式框架 +- 使用`mantine`作为组件库 + +## 图标 + +- 使用`react-icons`作为图标库 + +## 代码风格 + +- 所有`tsx`组件使用大驼峰命名法 +- 所有`tsx`组件使用箭头函数定义 + + +## 路由 + +- 使用`react-router`作为路由库 +- 新增模块后,需要在`src/App.tsx`中注册模块 + + +## 枚举 + +- 在`$MODULE/consts.tsx`中为枚举定义颜色映射以及转换为`mantine`的`Select Option`和`Tag`