| | |
| | | - 使用 `ProTable`,不要手写「筛选表单 + Table」。 |
| | | - `columns` 必须放在独立 `columns.tsx`,类型为 `ProColumns<T>[]`;需要回调时导出 `createXxxColumns(options)` 工厂函数。 |
| | | - 页面中用 `useMemo` 缓存 columns,用 `useCallback` 包裹事件处理函数。 |
| | | - `request` 单独定义:在组件内声明 `const fetchList = useCallback((params: XxxListParams) => getXxxList(params).then((result) => ({ data: result.data, total: result.total, success: result.success })), [])`,再传给 `request={fetchList}`;不要在 `<ProTable />` 标签里内联箭头函数,也不要用 `await` + `try/catch`。 |
| | | - 页面组件不直接写请求:列表查询、删除等接口调用统一放在同目录的 `server.ts`,组件只调用导出的方法。 |
| | | - `server.ts` 使用 `@/api/request` 提供的 `request` 发送请求,不要直接使用 axios;泛型顺序为 `request<请求参数, 响应数据>`。 |
| | | - 分页使用 `defaultPageSize`(不要用受控的 `pageSize`);需要切换每页条数时设置 `showSizeChanger: true`。 |
| | | - 不需要右侧工具栏图标时用 `options={false}`。 |
| | | - 表格样式:有 `toolBarRender` 时不加 `cardProps`;没有 `toolBarRender` 时补充 `cardProps={{ bodyStyle: { padding: 20 } }}`。 |
| | | - 表格补充 `scroll={{ x: ... }}` 以兼容窄屏。 |
| | | |
| | | ## 3. 分支 B:非表格页 |
| | |
| | | |
| | | - 页面级接口调用统一放在页面目录的 `server.ts`,不要写在组件内部。 |
| | | - 统一使用 `src/api/request.ts` 的 `request`,不要直接使用 axios。默认会合并相同并发请求、自动提示错误,并只返回响应 `data`。 |
| | | - 接口请求使用 `.then` / `.catch` / `.finally` 链式处理,不要使用 `await` + `try/catch`。 |
| | | - 请求选项:`merge` 控制是否合并、`showError` 控制是否提示错误、`parse: false` 返回完整 `AxiosResponse`、`signal` 用于取消。 |
| | | - 全部使用箭头函数,不新增 `function` 声明。 |
| | | - 提示与确认框使用 `AntdApp.useApp()` 提供的 `message` / `modal`,不要用静态方法。 |
| | |
| | | |
| | | - [ ] 已选择正确分支并整体使用对应模板 |
| | | - [ ] 表格页使用 ProTable,columns 独立在 `columns.tsx` |
| | | - [ ] `request` 已提取为独立的 `useCallback` 方法,未在标签内内联 |
| | | - [ ] 接口请求使用 `.then` 链式处理,没有 `await` + `try/catch` |
| | | - [ ] 表格页无 `toolBarRender` 时已加 `cardProps={{ bodyStyle: { padding: 20 } }}`,有 `toolBarRender` 时未加 |
| | | - [ ] 非表格页未创建 `columns.tsx`,使用合适的 Ant Design 组件 |
| | | - [ ] 两个分支均已创建 `server.ts`,组件内没有直接写请求 |
| | | - [ ] 类型使用 `ProColumns<T>` / 明确接口,没有 `any` |