feat: claude 修改

wsj

3 days ago 71719ffa0eeb4a28a1b736f87499bcda2847a848

feat: claude 修改

 .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` 用于取消。
@@ -138,7 +138,7 @@
- [ ] 接口请求使用 `.then` 链式处理，没有 `await` + `try/catch`
- [ ] 表格页无 `toolBarRender` 时已加 `cardProps={{ bodyStyle: { padding: 20 } }}`，有 `toolBarRender` 时未加
- [ ] 非表格页未创建 `columns.tsx`，使用合适的 Ant Design 组件
- [ ] 两个分支均已创建 `server.ts`，组件内没有直接写请求
- [ ] 两个分支均已创建 `service.ts`，组件内没有直接写请求
- [ ] 类型使用 `ProColumns<T>` / 明确接口，没有 `any`
- [ ] 全部使用箭头函数
- [ ] 提示与确认框通过 `AntdApp.useApp()` 获取

 .claude/skills/new-page/templates/non-table-page/index.tsx

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { App as AntdApp, Button, Card, Form, Input, Space } from 'antd';
import { saveXxx } from './server';
import { saveXxx } from './service';
import type { XxxFormValues } from './types';
import './Xxx.scss';


 .claude/skills/new-page/templates/non-table-page/service.ts

 .claude/skills/new-page/templates/table-page/index.tsx

@@ -4,7 +4,7 @@
import type { ActionType } from '@ant-design/pro-components';
import { App as AntdApp, Button } from 'antd';
import { createXxxColumns } from './columns';
import { deleteXxx, getXxxList } from './server';
import { deleteXxx, getXxxList } from './service';
import type { XxxListParams, XxxQuery, XxxRecord } from './types';
import './Xxx.scss';


 .claude/skills/new-page/templates/table-page/service.ts

 CLAUDE.md

@@ -41,7 +41,7 @@
│   ├── business/orders/
│   ├── customers/list/
│   └── error/NotFound.tsx
│   # 页面目录：index.tsx、columns.tsx、types.ts、server.ts、components/（按需）、同名 .scss（按需）
│   # 页面目录：index.tsx、columns.tsx、types.ts、service.ts、components/（按需）、同名 .scss（按需）
├── router/
│   ├── routeConfig.tsx  # 路由 + 菜单唯一数据源（含页面组件）
│   ├── menu.tsx         # 菜单过滤与 antd Menu 结构生成
@@ -152,8 +152,8 @@

- Drawer、Modal 等弹层组件，以及详情卡片、表单、局部业务块等可独立成文件的组件，放到 `src/pages/<业务域>/<页面>/components/` 下。
- 组件文件使用大驼峰命名，如 `UserFormDrawer.tsx`、`CustomerDetailDrawer.tsx`；组件私有的 `.scss` 与组件同目录，由组件自身引入。
- 组件只接收 `props`，接口调用仍放在页面目录的 `server.ts`，由页面或组件按需调用；不要跨页面直接引用其他页面目录下的组件。
- 单个页面文件（含 `index.tsx`）超过 300 行时必须拆分：按功能块抽取到 `components/`，`columns.tsx`、`types.ts`、`server.ts`、`utils.ts` 等继续单独维护。
- 组件只接收 `props`，接口调用仍放在页面目录的 `service.ts`，由页面或组件按需调用；不要跨页面直接引用其他页面目录下的组件。
- 单个页面文件（含 `index.tsx`）超过 300 行时必须拆分：按功能块抽取到 `components/`，`columns.tsx`、`types.ts`、`service.ts`、`utils.ts` 等继续单独维护。
- 大于 300 行的复杂组件同样按功能拆分，不要在同一个文件里堆叠多个组件。

```text
@@ -161,7 +161,7 @@
├── index.tsx                # 页面组件（尽量精简）
├── columns.tsx              # 表格列定义
├── types.ts
├── server.ts
├── service.ts
├── utils.ts                 # 按需
├── Users.scss
└── components/
@@ -230,12 +230,22 @@

## 六、新增页面流程

1. 在 `src/pages/<业务域>/<页面>/` 下创建 `index.tsx`（有表格时增加 `columns.tsx`，接口调用放在 `server.ts`，类型放 `types.ts`，有独立样式时增加同名 `.scss`）。
**新增页面统一使用 `/new-page` skill**（定义在 `.claude/skills/new-page/`），不要手工复制模板或另起方式搭脚手架。该 skill 会先选择表格页 / 非表格页分支并整体套用对应模板，再统一完成代码规范、路由注册、文档更新与类型检查。

调用示例：

```bash
/new-page 根据 <接口文档路径>，添加一个【页面名】页面，放到【分组名】目录下
```

> 仅修改现有页面（如调整某一列）等不涉及脚手架的场景，才直接改代码；即使手工创建页面，也须按以下流程执行。

1. 在 `src/pages/<业务域>/<页面>/` 下创建 `index.tsx`（有表格时增加 `columns.tsx`，独立组件放 `components/`，接口调用放在 `service.ts`，类型放 `types.ts`，有独立样式时增加同名 `.scss`）。
2. 在 `src/router/routeConfig.tsx` 中增加路由配置：
   - 使用完整路径（如 `/system/users`）。
   - 配置 `title`、`icon`、`element`。
   - 需要分组时使用 `children`。
3. 执行 `npm run typecheck` 验证。
3. 执行 `npm run typecheck` 验证（涉及样式或构建配置时再执行 `npm run build`）。

示例：

@@ -250,59 +260,65 @@

## 七、接口与状态约定

- **每个接口都必须为其请求（request）与响应（response）定义 `interface`**，并在 `server.ts` 中通过 `request<TReq, TRes>` 显式标注泛型；禁止使用 `any` 或省略类型。
  - 类型统一定义在页面目录的 `types.ts` 中（跨页面复用的放在 `src/api/` 对应业务域文件）。
  - 命名约定：`<业务>Request` / `<业务>Response`，例如 `TenantRoleListRequest`、`TenantRoleListResponse`。
  - 请求体 / 查询参数建模为 `XxxRequest`；响应建模为 `XxxResponse`，对应接口返回 `data` 的结构（若后端是 `Result<T>`，`Response` 指 `data` 部分）。
  - 无请求参数时也应显式定义，例如 `type TenantRoleListRequest = Record<string, never>`，不要留空或使用 `undefined`。
以下四条为强制要求，新增与修改代码必须遵守：

```ts
// types.ts
export interface TenantRoleToggleStatusRequest {
  id: number;
}
export interface TenantRoleToggleStatusResponse {
  id: number;
  status: RoleStatus;
}
1. **所有接口必须使用 `src/api/request.ts`**：统一通过其导出的 `request` 发起请求，不要在页面、组件或 `service.ts` 中直接使用 axios、`fetch` 或其他请求库。
2. **每个接口的 request 与 response 都必须定义 `interface`**：在 `service.ts` 中通过 `request<TReq, TRes>` 显式标注泛型，禁止使用 `any` 或省略类型。
   - 类型统一定义在页面目录的 `types.ts` 中（跨页面复用的放在 `src/api/` 对应业务域文件）。
   - 命名约定：`<业务>Request` / `<业务>Response`，例如 `TenantRoleListRequest`、`TenantRoleListResponse`。
   - 请求体 / 查询参数建模为 `XxxRequest`；响应建模为 `XxxResponse`，对应接口返回 `data` 的结构（若后端是 `Result<T>`，`Response` 指 `data` 部分）。
   - 无请求参数时也应显式定义，例如 `type TenantRoleListRequest = Record<string, never>`，不要留空或使用 `undefined`。

// server.ts
export const toggleRoleStatus = ({ id }: TenantRoleToggleStatusRequest) =>
  request<TenantRoleToggleStatusRequest, TenantRoleToggleStatusResponse>({
    url: `/tenant/roles/${id}/toggle-status`,
    method: 'PUT',
    headers: getAuthHeaders(),
  });
```
   ```ts
   // types.ts
   export interface TenantRoleToggleStatusRequest {
     id: number;
   }
   export interface TenantRoleToggleStatusResponse {
     id: number;
     status: RoleStatus;
   }

- 页面级接口调用统一放在页面目录下的 `server.ts`，页面组件通过它调用接口，不要在组件内直接写请求实现。
- 跨页面复用的接口可放在 `src/api/` 下，按业务域拆分文件。
- 网络请求统一使用 `src/api/request.ts` 的 `request`（基于 axios），不要在页面或 `server.ts` 中直接使用 axios。
- **接口调用使用 `.then` 链式处理，不要使用 `await` + `try/catch`**：成功逻辑写在 `.then`，失败逻辑写在 `.catch`（错误已由 `request` 统一提示时可只保留空 `catch`），收尾逻辑写在 `.finally`。禁止写成 `try { const data = await xxx() } catch {}`。（存量代码在后续迭代中逐步迁移。）
   // service.ts
   export const toggleRoleStatus = ({ id }: TenantRoleToggleStatusRequest) =>
     request<TenantRoleToggleStatusRequest, TenantRoleToggleStatusResponse>({
       url: `/tenant/roles/${id}/toggle-status`,
       method: 'PUT',
       headers: getAuthHeaders(),
     });
   ```

```ts
// ✅ 使用 .then 链式处理
getOrgList({ page: 1, size: 20 })
  .then((data) => {
    setDataSource(data.records);
  })
  .catch(() => {
    // 错误已由 request 统一提示
  })
  .finally(() => {
    setLoading(false);
  });
3. **接口调用必须使用 `.then` 链式处理，禁止 `await` + `try/catch`**：成功逻辑写在 `.then`，失败逻辑写在 `.catch`（错误已由 `request` 统一提示时可只保留空 `catch`），收尾逻辑写在 `.finally`。

// ❌ 不要使用 await + try/catch
try {
  const data = await getOrgList({ page: 1, size: 20 });
  setDataSource(data.records);
} catch {
  // ...
} finally {
  setLoading(false);
}
```
   ```ts
   // ✅ 使用 .then 链式处理
   getOrgList({ page: 1, size: 20 })
     .then((data) => {
       setDataSource(data.records);
     })
     .catch(() => {
       // 错误已由 request 统一提示
     })
     .finally(() => {
       setLoading(false);
     });

   // ❌ 不要使用 await + try/catch
   try {
     const data = await getOrgList({ page: 1, size: 20 });
     setDataSource(data.records);
   } catch {
     // ...
   } finally {
     setLoading(false);
   }
   ```

4. **接口按作用域拆分文件**：
   - 页面接口放在页面目录下的 `service.ts` 中，页面与组件通过它调用，不要在组件内直接写请求实现。
   - 跨页面复用的公共接口按业务域拆分到 `src/api/` 下（如 `src/api/auth.ts`）。

补充说明：

- 开发环境通过 Vite 代理 `/proxy-api` 转发到 `VITE_API_PROXY_TARGET`（未配置时取 `VITE_API_BASE_URL`），因此浏览器端不会产生跨域请求；生产环境需后端配置 CORS，或使用同域反向代理。
  - 泛型：`request<TReq, TRes>(config, options)`，分别表示请求参数/请求体与响应 `data` 的类型。

 README.md

@@ -93,7 +93,7 @@
- 通过 `signal: AbortSignal` 取消调用方的请求。
- 失败时抛出 `ApiError`，保留 `status`、`data`、`response`、`config` 与原始错误。

页面级接口调用放在页面目录的 `server.ts`，组件通过它调用请求。
页面级接口调用放在页面目录的 `service.ts`，组件通过它调用请求。

### 5. 演示页面


 src/pages/customers/list/components/CustomerDetailDrawer.tsx

@@ -2,7 +2,7 @@
import { Button, Descriptions, Drawer, Empty, Spin, Tag } from 'antd';
import type { DescriptionsProps } from 'antd';
import { customerTypeMeta, levelMeta, renderTags, sourceMeta, stageMeta } from '../columns';
import { getCustomerDetail } from '../server';
import { getCustomerDetail } from '../service';
import type { CustomerVO } from '../types';
import { formatDateTime } from '../utils';


 src/pages/customers/list/components/FollowUpRecordsDrawer.tsx

@@ -2,7 +2,7 @@
import { Button, Drawer, Empty, Spin, Tag, Timeline } from 'antd';
import type { TimelineProps } from 'antd';
import { followMethodMeta, followRecordTypeMeta, followStatusMeta, stageMeta } from '../columns';
import { getCustomerFollowUps } from '../server';
import { getCustomerFollowUps } from '../service';
import type { FollowStatus, FollowUpVO } from '../types';
import { formatDateTime } from '../utils';
import './FollowUpRecordsDrawer.scss';

 src/pages/customers/list/index.tsx

@@ -3,7 +3,7 @@
import { createCustomerColumns } from './columns';
import CustomerDetailDrawer from './components/CustomerDetailDrawer';
import FollowUpRecordsDrawer from './components/FollowUpRecordsDrawer';
import { getCustomerList } from './server';
import { getCustomerList } from './service';
import type { CustomerListQuery, CustomerVO } from './types';

const CustomerList = () => {

 src/pages/customers/list/service.ts

 src/pages/platform/audit-logs/index.tsx

@@ -2,7 +2,7 @@
import { ProTable } from '@ant-design/pro-components';
import { createAuditLogColumns } from './columns';
import AuditLogDetailDrawer from './components/AuditLogDetailDrawer';
import { getAuditLogList } from './server';
import { getAuditLogList } from './service';
import type { AuditLogListQuery, AuditLogVO } from './types';

const AuditLogs = () => {

 src/pages/platform/audit-logs/service.ts

 src/pages/system/departments/components/DepartmentFormDrawer.tsx

@@ -10,7 +10,7 @@
  Select,
  Space,
} from 'antd';
import { createOrg, getLeaderDetail, getLeaderOptions, updateOrg } from '../server';
import { createOrg, getLeaderDetail, getLeaderOptions, updateOrg } from '../service';
import type { DepartmentFormValues, OrgVO } from '../types';
import { toOrgTreeSelectData } from '../utils';


 src/pages/system/departments/index.tsx

@@ -5,7 +5,7 @@
import { App as AntdApp } from 'antd';
import { createDepartmentColumns } from './columns';
import DepartmentFormDrawer from './components/DepartmentFormDrawer';
import { deleteOrg, getLeaderOptions, getOrgTree, toggleOrgStatus } from './server';
import { deleteOrg, getLeaderOptions, getOrgTree, toggleOrgStatus } from './service';
import type { DepartmentListQuery, OrgVO } from './types';
import { collectOrgIds, filterOrgTree } from './utils';


 src/pages/system/departments/service.ts

 src/pages/system/roles/index.tsx

@@ -3,7 +3,7 @@
import type { ActionType } from '@ant-design/pro-components';
import { App as AntdApp, Descriptions, Drawer, Tag } from 'antd';
import { createRoleColumns, getRoleStatusMeta, getRoleTypeMeta } from './columns';
import { getRoleDetail, getRoleList, toggleRoleStatus } from './server';
import { getRoleDetail, getRoleList, toggleRoleStatus } from './service';
import type { RoleListQuery, RoleVO } from './types';

const Roles = () => {

 src/pages/system/roles/service.ts

 src/pages/system/users/components/UserFormDrawer.tsx

@@ -10,7 +10,7 @@
  Space,
  Spin,
} from 'antd';
import { createEmployee, getEmployeeDetail, updateEmployee } from '../server';
import { createEmployee, getEmployeeDetail, updateEmployee } from '../service';
import type {
  EmployeeFormValues,
  EmployeeVO,

 src/pages/system/users/index.tsx

@@ -19,7 +19,7 @@
  getOrgTree,
  getRoleOptions,
  importEmployees,
} from './server';
} from './service';
import type {
  EmployeeListQuery,
  EmployeeVO,

 src/pages/system/users/service.ts