上传文件至 Typescript/React-Web

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`