模块设计与规范

文件位置

page 下创建对应业务文件夹

主体文件以 业务名.page.tsx命名
列表列配置命名规范业务名-optional-columns.txs
其余子业务模块以业务名-功能.page.tsx

📁 src                                             // 开发目录
├─ 📁 pages                                        // 业务模块目录
│  ├─ 📁 ***
│  │  ├─ ***-optional-columns.tsx                  // 列表表头配置
│  │  ├─ ***.page.tsx                              // 列表页面
│  │  ├─ ***.page.less                             // 列表页面样式
│  │  ├─ ***-add.page.tsx                          // 新增页面
│  │  ├─ ***-add.page.less                         // 新增页面样式
│  │  ├─ ***-edit.page.tsx                         // 编辑页面
│  │  └─ ***-edit.page.less                        // 编辑页面样式
│  └─ ...
├─ 📁 router                                       // 路由定义目录
├─ 📁 services                                     // api目录
│  ├─ 📁 models                                       // 数据模型定义
│  ├─ ***.services.ts                              // 业务api文件
│  └─ ...
├─ 📁 store                                        // 状态管理目录
│  ├─ 📁 actions                                   // action目录
│  ├─ 📁 reducers                                  // reducers目录
│  ├─ 📁 selectors                                 // selectors目录
│  ├─ state.tsx                                    // 状态管理配置
│  └─ index.ts
├─ 📁 styles                                       // 通用样式文件目录
│ └─ variables.less                               // less 变量文件
└─ ...

API/数据模型

api文件命名和业务保持一致，统一封装成一个service对象导出。
实体、接口等定义统一写在modles文件下，命名和api文件保持一致

主要功能

统一管理 API 请求及所需实体、数据类型等的声明

请求返回数据格式化
query 参数格式化

命名规范

以vehicles业务为例

service 文件夹下创建vehicles.service.ts文件，文件内统一导出Service对象包含业务所需的全部接口。

export const VehiclesService = {  // 统一导出Service，具体画面引用时直接应用对应Service
  getAll: (tenantId: string, query?: VehicleQuery) => http.get(`/tenants/${tenantId}/shipment/vehicles` + queryParse(query)),
  getOne: (tenantId: string, vehicleId: string) => http.get(`/tenants/${tenantId}/shipment/vehicles/${vehicleId}`),
  create: (tenantId: string, data: VehicleBody) => http.post(`/tenants/${tenantId}/shipment/vehicles`, data),
  update: (tenantId: string, vehicleId: string, data: VehicleBody) => http.patch(`/tenants/${tenantId}/shipment/vehicles/${vehicleId}`, data),
  delete: (tenantId: string, vehicleId: string) => http.delete(`/tenants/${tenantId}/shipment/vehicles/${vehicleId}`)
}

具体API方法命名需注意：见名知意、驼峰命名法、精简表达，以下是常见的方法命名：

getAll 获取列表数据
getOne 获取详情数据
create 创建业务数据
update 编辑业务数据
delete 删除业务数据

接口对应的实体类型、查询参数等，应声明在models文件夹下，文件以业务名称命名如vehicles.tsx

//Vehicle 实体
export interface Vehicle {
  id: string;
  name: string;
  plateNumber: string;
  remarks: string;
}

//Vehicle 查询参数实体
export interface VehicleQuery {
  keyword?: string;
  pageNo?: number;
  pageSize: number;
  sortBy?: string[] | string;
}

//Vehicle 请求参数实体
export interface VehicleBody {
  contractorId: string;
  licenseNumber: string;
  maximumPassengers: number;
  maximumLoad: number;
}

文件位置​

API/数据模型​

主要功能​

命名规范​

文件位置

API/数据模型

主要功能

命名规范