100 lines
2.6 KiB
Plaintext
100 lines
2.6 KiB
Plaintext
---
|
|
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
|
|
│ ├── List.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`组件
|
|
- 使用`SearchForm`为每个列表页添加搜索功能
|