Stats
Actions
Tags
From ep-comp
Generate ep-comp pagination list page scaffolds from Swagger, Knife4j, OpenAPI JSON, or request/response examples. Use this whenever the user wants to turn API docs into `generateTableColumns`, `generateFormItems`, `useTablePage`, `GXForm`, and `GXPaginationTable` based list pages, even if they only say "根据 Swagger 生成列表页". If the context clearly points to an `@gx-web/ep-comp` list page, use this skill proactively.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ep-comp:crud-pageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
这个 skill 用于把 Swagger / Knife4j / OpenAPI 文档，或用户直接提供的请求/响应示例，转成基于 `@gx-web/ep-comp` 的分页列表页接入代码。
这个 skill 用于把 Swagger / Knife4j / OpenAPI 文档，或用户直接提供的请求/响应示例，转成基于 @gx-web/ep-comp 的分页列表页接入代码。
目标不是解释单个组件 API，而是生成列表页主链路：
generateTableColumnsgenerateFormItemsuseTablePageGXFormGXPaginationTable默认只覆盖单个分页查询页面。只有用户明确要求时，才扩展到 CRUD、详情、操作列方案等内容。
当任务满足以下特征时，应优先使用这个 skill：
@gx-web/ep-comp 体系下的页面接入如果用户没有明确提到 ep-comp，但当前仓库上下文、已有对话或用户表述已经足以推断目标属于 ep-comp 列表页接入，也应直接使用这个 skill，并在输出开头明确说明：
以下内容按
ep-comp体系生成。
如果上下文还不足以判断是否属于 ep-comp 体系，先追问技术栈或组件体系，再决定是否继续。
以下场景不应触发这个 skill：
generateTableColumns 的单独用法GXForm 或 GXPaginationTable 的 propsep-comp 体系支持以下三类输入源：
至少应能识别：
至少应能识别：
pathmethod至少应包含：
如果以上最小门槛不满足，不要伪造完整主链路。应明确降级为：
输出时直接说明：
当前信息不足，以下先给出结构草稿；所有不确定内容统一放入“待确认项”。
默认采用两段式输出。
当用户只给接口文档或示例时：
当用户补充了模块名、目录结构或目标文件路径后：
输出固定为以下五段，顺序不要变：
ModelAPI查询表单表格分页待确认项这样做的原因是：第三方接入更关心“能否直接抄用”和“哪里还要自己补”，固定结构比自由发挥更稳定。
至少生成：
XxxQueryModelXxxListItemModel命名规则：
Model 结尾VO字段处理原则：
@FieldName(...)至少生成：
useTablePage 对接的返回映射约束：
request.post(...)useTablePage 需要的 Promise<{ records, total }> 契约当用户提供参考代码，或当前任务要求输出落地代码时，先识别项目约定，再生成 API 接入代码。
优先识别以下内容：
request.get({ url, params })request.post({ url, data })request.get(url, { params })current / sizepageNum / pageSizeres.datares.data.records / res.data.totalres.resultRes<T> / ResPage<T> 或等价类型识别优先级固定为：
如果无法确认项目约定，不要强猜；应降级为通用草稿模式，并在“待确认项”中明确标注“需人工确认”。
当 request 封装、分页参数、响应类型或响应结构已经确认时：
Res<T> / ResPage<T> 或等价类型useTablePage 映射代码当响应结构已知，但不是 Res<T> / ResPage<T> 时：
Res<T> / ResPage<T>useTablePage 所需的 { records, total }当 request 封装、响应解包层级、分页字段路径都无法确认时：
所有模式都建议先输出一段极短判断：
接入模式：项目适配模式 / 兼容映射模式 / 通用草稿模式
已识别约定：
- request：`...`
- 分页参数：`...`
- 响应类型：`...`
- 列表映射：`...`
import useAxios from '@base-lib/hooks/core/useAxios'
import type { XxxListItemModel, XxxQueryModel } from '../model'
const request = useAxios()
export const loadPage = (params: XxxQueryModel) => {
return request.get<ResPage<XxxListItemModel>>({
url: '/xxx/page',
params
})
}
const [list, { page, loading, loadList, reloadList, onChange }] = useTablePage(({ current, size }) =>
loadPage({ ...search.value, pageNum: current, pageSize: size }).then(res => ({
records: res.data.records,
total: res.data.total
})))
import { requestInstance } from '@/request'
import type { PageResult } from '@/types/api'
import type { XxxListItemModel, XxxQueryModel } from '../model'
export const loadPage = (params: XxxQueryModel) => {
return requestInstance.get<PageResult<XxxListItemModel>>('/xxx/page', {
params
})
}
const [list, { page, loading, loadList, reloadList, onChange }] = useTablePage(({ current, size }) =>
loadPage({ ...search.value, current, size }).then(res => ({
records: res.result.list,
total: res.result.total
})))
要点：复用项目已有响应类型命名，不强行改写成 Res<T> / ResPage<T>，只在 useTablePage 前完成 { records, total } 映射。
接入模式：通用草稿模式
未识别到项目 request / 响应约定，以下代码为可改造草稿。
export const loadPage = (params: XxxQueryModel) => {
return request.get({
url: '/xxx/page',
params
})
}
const [list, { page, loading, loadList, reloadList, onChange }] = useTablePage(({ current, size }) =>
loadPage({
...search.value,
pageNum: current,
pageSize: size
}).then(res => ({
records: res.data?.records ?? [],
total: res.data?.total ?? 0
})))
如果这里的 request、pageNum / pageSize、res.data.records / res.data.total 都无法确认，必须放入“待确认项”，并明确写出“需人工确认”。
至少生成：
generateFormItems(...)GXForm 示例至少生成：
generateTableColumns(...)useTablePage(...)GXPaginationTable 示例loading、page、total、onChange 的联动方式这里必须遵循当前推荐链路：
generateTableColumnsgenerateFormItemsuseTablePageGXFormGXPaginationTablegetEPTableColumns这一段必须始终输出。
凡是以下情况，都统一使用“需人工确认”这句措辞，不要改写成模糊表达：
待确认项建议按两级组织：
GET / POSTcurrent / size、pageNum / pageSize 或其他项目约定records / total 的真实路径是否已确认Res<T> / ResPage<T> 或等价类型select 类型字段的 options 缺失项采用半自动推断：允许有限推断，但所有推断项都必须明确标注“需人工确认”。
inputkeywordnametitlecodeidremarkphoneemailselectstatustypecategorylevelbizType如果这样推断了，必须明确说明：
startTime / endTimebeginTime / endTimecreateTimeStart / createTimeEnddateRange如果这样推断了，必须明确说明：
优先使用列表响应 schema 生成列。
可直接出列的字段：
谨慎处理的字段：
对这些字段：
render如果当前上下文已确认项目采用以下统一响应约定：
export interface Res<T> {
code: string
data: T
message: string
ok: boolean
}
export type ResPage<T> = Res<{
current: number
optimizeCountSql: boolean
orders: any[]
pages: number
records: T[]
searchCount: boolean
size: number
total: number
}>
则默认按以下方式映射：
res.data.recordsres.data.totaluseTablePage：{ records, total }如果用户项目已有公共 Res / ResPage 类型，应优先复用现有类型定义，不重复内联。
如果用户项目使用的是等价类型，例如 ApiResult<T>、PageResult<T>、ResultPage<T>、CommonResponse<T>，也应优先复用，不要强行改写成 Res / ResPage。
如果找不到现成公共类型，但列表响应结构已经可以确认，优先生成局部 response alias 或局部占位类型，不要默认创建项目级公共 Res / ResPage。
无论上游响应体是什么结构，最终返回给 useTablePage 的稳定契约都应为：
{ records, total }
如果无法确认项目是否沿用这套结构，则不要强行假设。应：
data / records / total 结构恢复为待确认项当用户要求输出落地代码时，默认按以下结构生成：
模块名称/
api/
index.ts
model/
index.ts
index.vue
components/
...
其他目录/
...
api/index.tsmodel/index.tsindex.vuecomponents/：只有确实需要拆查询区、操作栏、弹窗或其他子组件时才生成不要擅自猜测以下内容：
records / total 所在层级路径如果这些信息缺失，应进入“待确认项”，而不是编造成既定事实。
不要卡住或反复重试。直接告诉用户改提供：
如果输入不足以支撑完整主链路：
如果上下文长度受限：
如果用户说：
给你一个 Swagger 地址，帮我生成列表页
而当前上下文已经明确这是 ep-comp 项目，那么你应直接进入此 skill，并按五段结构输出。
如果用户说：
根据这个接口生成查询条件和分页表格
也应优先按 generateFormItems + GXForm + generateTableColumns + useTablePage + GXPaginationTable 的主链路来组织答案。
一次成功输出至少应满足：
Model、API、查询表单、表格分页、待确认项 五段结构在生成代码前，必须先阅读 API Reference，了解所有组件 Props、函数签名、类型定义和完整使用模板。
reference.md 包含以下内容：
@gx-web/core：@FieldName、getModelFromJson、getModelFieldName@gx-web/tool：useTablePage、useStateRef@gx-web/ep-comp：generateTableColumns、generateFormItems、GXPaginationTable、GXForm、GXSearch、useComponentMapEPTableColumnConfigType、EPFormItemConfigType、GXFormProps、GXPaginationTablePropsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub changju-web/cj-cc-marketplace --plugin ep-comp