From d26274d89d377067c1e2648192cffbf89464b361 Mon Sep 17 00:00:00 2001
From: wsj <593216709@qq.com>
Date: Wed, 28 Oct 2026 23:34:32 +0800
Subject: [PATCH] feat: 拆包
---
.claude/skills/new-page/SKILL.md | 28 ++++++++++++++++------------
1 files changed, 16 insertions(+), 12 deletions(-)
diff --git a/.claude/skills/new-page/SKILL.md b/.claude/skills/new-page/SKILL.md
index aed1cf0..39ae836 100644
--- a/.claude/skills/new-page/SKILL.md
+++ b/.claude/skills/new-page/SKILL.md
@@ -1,6 +1,6 @@
---
name: new-page
-description: 当用户要创建新页面、新建新页面、新建页面、新增页面、加一个页面或搭建页面脚手架时使用。先选择分支：表格/列表页使用 ProTable 模板，表单/详情/仪表盘等非表格页使用 Ant Design 模板；两个分支都会生成 server.ts 维护接口调用，并统一执行代码规范、路由注册、文档更新与类型检查。
+description: 当用户要创建新页面、新建新页面、新建页面、新增页面、加一个页面或搭建页面脚手架时使用。先选择分支：表格/列表页使用 ProTable 模板，表单/详情/仪表盘等非表格页使用 Ant Design 模板；两个分支都会生成 service.ts 维护接口调用，并统一执行代码规范、路由注册、文档更新与类型检查。
---
# 新增页面
@@ -24,7 +24,7 @@
| 页面名 | 目录名与组件名 | `invoices` / `Invoices` |
| 路由 | 完整路径，同时作为菜单 key | `/business/invoices` |
| 菜单标题 / 图标 | 中文标题 + `@ant-design/icons` | 发票管理 / `FileTextOutlined` |
-| 数据来源 | 接口调用放在同目录 `server.ts`；演示阶段可先用本地 mock | `server.ts` |
+| 数据来源 | 接口调用放在同目录 `service.ts`；演示阶段可先用本地 mock | `service.ts` |
| 是否分组 | 是否放入现有的「系统管理 / 业务管理」分组 | `children` |
表格页额外确认：字段、列展示方式、可搜索字段、分页大小。
@@ -39,7 +39,7 @@
├── index.tsx # 页面组件（默认导出）
├── columns.tsx # ProColumns<T>[] 列定义
├── types.ts # 记录类型与查询参数
-├── server.ts # 接口调用（列表查询、删除等）
+├── service.ts # 接口调用（列表查询、删除等）
└── <Page>.scss # 页面级样式（按需新增）
```
@@ -51,8 +51,8 @@
- `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<请求参数, 响应数据>`。
+- 页面组件不直接写请求：列表查询、删除等接口调用统一放在同目录的 `service.ts`，组件只调用导出的方法。
+- `service.ts` 使用 `@/api/request` 提供的 `request` 发送请求，不要直接使用 axios；泛型顺序为 `request<请求参数, 响应数据>`。
- 分页使用 `defaultPageSize`（不要用受控的 `pageSize`）；需要切换每页条数时设置 `showSizeChanger: true`。
- 不需要右侧工具栏图标时用 `options={false}`。
- 表格样式：有 `toolBarRender` 时不加 `cardProps`；没有 `toolBarRender` 时补充 `cardProps={{ bodyStyle: { padding: 20 } }}`。
@@ -66,7 +66,7 @@
src/pages/<domain>/<page>/
├── index.tsx # 页面组件（默认导出）
├── types.ts # 表单 / 详情类型
-├── server.ts # 接口调用（保存、详情查询等）
+├── service.ts # 接口调用（保存、详情查询等）
└── <Page>.scss # 页面级样式（按需新增）
```
@@ -78,14 +78,14 @@
- 表单使用 Ant Design `Form` + `Form.Item` + `rules` 校验。
- 数据展示优先使用 `Card`、`Descriptions`、`Statistic`、`Tag` 等 Ant Design 组件。
- 页面局部状态使用 `useState`，派生数据使用 `useMemo`。
-- 保存、详情查询等接口调用统一放在同目录的 `server.ts`，组件只调用导出的方法。
-- `server.ts` 使用 `@/api/request` 提供的 `request` 发送请求，不要直接使用 axios。
+- 保存、详情查询等接口调用统一放在同目录的 `service.ts`，组件只调用导出的方法。
+- `service.ts` 使用 `@/api/request` 提供的 `request` 发送请求，不要直接使用 axios。
## 4. 公共步骤（两个分支都执行）
### 4.1 代码规范
-- 页面级接口调用统一放在页面目录的 `server.ts`，不要写在组件内部。
+- 页面级接口调用统一放在页面目录的 `service.ts`，不要写在组件内部。
- 统一使用 `src/api/request.ts` 的 `request`，不要直接使用 axios。默认会合并相同并发请求、自动提示错误，并只返回响应 `data`。
- 接口请求使用 `.then` / `.catch` / `.finally` 链式处理，不要使用 `await` + `try/catch`。
- 请求选项：`merge` 控制是否合并、`showError` 控制是否提示错误、`parse: false` 返回完整 `AxiosResponse`、`signal` 用于取消。
@@ -99,9 +99,13 @@
### 4.2 注册路由
-在 `src/router/routeConfig.tsx` 中增加配置，并补充组件与图标的 import：
+在 `src/router/routeConfig.tsx` 中增加配置，并补充图标 import 与懒加载页面组件：
```tsx
+// 顶部：import { lazy } from 'react';
+const Invoices = lazy(() => import('@/pages/business/invoices'));
+
+// appRoutes 中
{
path: '/business/invoices',
title: '发票管理',
@@ -110,7 +114,7 @@
},
```
-放入现有分组时写在其 `children` 中；新增一级分组时保持与现有分组相同的结构。
+页面组件必须用 `lazy(() => import(...))` 注册，不要静态 import，否则会把页面打进首屏 chunk。放入现有分组时写在其 `children` 中；新增一级分组时保持与现有分组相同的结构。
### 4.3 更新文档
@@ -138,7 +142,7 @@
- [ ] 接口请求使用 `.then` 链式处理，没有 `await` + `try/catch`
- [ ] 表格页无 `toolBarRender` 时已加 `cardProps={{ bodyStyle: { padding: 20 } }}`，有 `toolBarRender` 时未加
- [ ] 非表格页未创建 `columns.tsx`，使用合适的 Ant Design 组件
-- [ ] 两个分支均已创建 `server.ts`，组件内没有直接写请求
+- [ ] 两个分支均已创建 `service.ts`，组件内没有直接写请求
- [ ] 类型使用 `ProColumns<T>` / 明确接口，没有 `any`
- [ ] 全部使用箭头函数
- [ ] 提示与确认框通过 `AntdApp.useApp()` 获取
--
Gitblit v1.9.3