📝 docs(clinerules): add clinerules for Refine Admin development
- 添加Refine Admin开发最佳实践与规范文档 - 包含技术栈、依赖管理、项目结构等内容
This commit is contained in:
97
Typescript/Refine Admin/clinerules
Normal file
97
Typescript/Refine Admin/clinerules
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
description: Refine Admin开发最佳实践与规范
|
||||
---
|
||||
|
||||
# Refine Admin开发规范
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Typescript
|
||||
- React
|
||||
- Refine
|
||||
- Unocss
|
||||
- Vite
|
||||
- Zustant
|
||||
- Antd
|
||||
|
||||
## 依赖管理
|
||||
|
||||
- 使用`pnpm`管理依赖
|
||||
|
||||
## 项目结构
|
||||
|
||||
- 项目整体结构如下:
|
||||
|
||||
```markdown
|
||||
$PROJECT_ROOT
|
||||
├── src
|
||||
│ ├── $RESOURCE_MODULE1 # 资源模块1
|
||||
│ ├── $RESOURCE_MODULE2 # 资源模块2
|
||||
├── App.tsx # 主应用及路由配置
|
||||
├── index.tsx # 入口文件
|
||||
├── uno.d.ts # unocss类型声明
|
||||
├── .env # 环境变量
|
||||
├── .env.development # 开发环境变量
|
||||
├── .env.production # 生产环境变量
|
||||
├── .gitignore # git忽略文件
|
||||
├── .cursorrules # cursor规则
|
||||
├── .clinerules # 项目规范/ClineRules
|
||||
├── .windsurfrules # 项目规范/WindsurfRules
|
||||
```
|
||||
- 采用模块化设计,每个模块位于`$PROJECT_ROOT/src`目录下,其结构如下:
|
||||
|
||||
```markdown
|
||||
$RESOURCE_MODULE1
|
||||
├── components # 组件
|
||||
│ ├── Cmp1.tsx
|
||||
│ ├── index.ts
|
||||
├── contexts # 上下文
|
||||
│ ├── Ctx1.tsx
|
||||
│ ├── index.ts
|
||||
├── layouts # 布局
|
||||
│ ├── Layout1.tsx
|
||||
│ ├── index.ts
|
||||
├── pages # 页面
|
||||
│ ├── Create.tsx
|
||||
│ ├── Edit.tsx
|
||||
│ ├── index.ts
|
||||
│ └── View.tsx
|
||||
├── stores # 状态管理
|
||||
│ ├── index.ts
|
||||
│ └── Store1.ts
|
||||
├── schemas.ts # 类型定义
|
||||
├── consts.tsx # 常量
|
||||
├── api.ts # 接口
|
||||
├── index.ts # 入口
|
||||
└── utils.ts # 工具函数
|
||||
```
|
||||
|
||||
|
||||
## 样式
|
||||
|
||||
- 使用`unocss`作为样式框架
|
||||
|
||||
## 图标
|
||||
|
||||
- 使用`react-icons`作为图标库
|
||||
|
||||
## 代码风格
|
||||
|
||||
- 所有`tsx`组件使用大驼峰命名法
|
||||
- 所有`tsx`组件使用箭头函数定义
|
||||
- `Refine`的`resource`是实体类的小驼峰命名法,比如`EntityName`,在`Refine`中使用`entityName`
|
||||
|
||||
|
||||
## 路由
|
||||
|
||||
- 使用`react-router`作为路由库
|
||||
- 新增资源管理模块后,需要在`src/App.tsx`中注册资源管理模块
|
||||
|
||||
|
||||
## 枚举
|
||||
|
||||
- 在`$RESOURCE_MODULE/consts.tsx`中为枚举定义颜色映射以及转换为`antd`的`Select Option`和`Tag`
|
||||
|
||||
## 页面
|
||||
|
||||
- 列表页中如果要展示关联的实体,则需要使用`common/components/RecordName.tsx`组件
|
||||
Reference in New Issue
Block a user