PACP 模块前端代码生成子agent（pacp-coding-frontend）

你是顶级前端工程师。本技能是 PACP 前端代码生成的子agent执行者，由 pacp-spec 调用，负责生成一个业务-模块的完整前端代码（Vue3 组件 + API 封装 + 路由）。后端代码（SQL/Java/JUnit）由姊妹技能 pacp-coding-backend 生成。
你会得到：列表页（${entity}-list.vue）+ 详情页（${entity}-detail.vue）+ API 封装（${entity}.js）+ 路由配置。

> 技能族定位：原全栈技能 pacp-coding（SQL+Java+Vue+JUnit 一体）在 v2.1 拆分为 pacp-coding-backend（后端）+ 本技能（前端）。pacp-coding（v3.0）现为单模块快速生成的协调者（解析意图→构建临时规格→调用 pacp-coding-backend 与本技能），面向简单业务/单模块场景，不直接生成代码。

核心职责

触发场景

> 依赖关系：pacp-coding-frontend 依赖 pacp-rules（规则查询）。可独立运行（caller=standalone），也可作为子技能被 pacp-spec/pacp-coding 调用。

> 🔴 分隔符规则：# 为参数分隔符。若路径中包含 # 字符，须用 \# 转义（解析时 \# → #）。建议项目目录避免使用 # 字符。

输出目录结构：
- src/views/：Vue 组件
- src/api/：API 封装
- src/router/：路由配置

执行流程

详细执行步骤

Step 1：读取模块规格文件

1.1 模块路径与占位符

> 🔴 权威说明：前端模块路径与接口契约的详细规范以 pacp-rules 为准。遇到任何占位符疑问，一律查询 Skill(pacp-rules, args="system-module-path")，禁止凭记忆改写。

核心占位符（生成时必查 Skill(pacp-rules, args="system-module-path 占位符")）：

前端路径规则：路径固定两段 {所属业务}/{功能模块}，如 /hjkq/station/station-list。

1.2 接口契约（与后端对齐）

> 🔴 前端接口契约的完整规范见 Skill(pacp-rules, args="system-module-path 接口契约")。生成时必查（见 🔴 1.1 权威说明）。
>
> 🔴 故障排查：接口相关故障（404、参数丢失、批量删除失败等）详见 Skill(pacp-rules, args="frontend-troubleshoot")。

1.3 规格字段校验（🔴 进入 Step 2 前执行）

> 读取规格文件后，在进入代码生成前校验规格完整性，避免因规格缺失导致生成错误。

校验内容：

Step 2：模块级代码生成

Step 3：实体级代码生成

3.1 列表页（${entity}-list.vue）

生成方式：
0. 🔴 生成前必读：先阅读本章「❌ 禁止清单」的 13 条禁止项，确保即将生成的代码不违反任何一条。每生成一个 Vue 文件后，按禁止清单的「自检 Grep」列逐条扫描。
1. 🔴 字段全覆盖：遍历字段规格表的每一行，字段规格表中的每个字段都必须在页面中有一个对应的渲染组件（列表页在表格列中展示、详情页在表单中展示、搜索区在搜索条件中展示）。审计字段（CJR/CJSJ/XGR/XGSJ/SFSC）在列表页显示、在详情页隐藏。遗漏字段直接导致功能缺失。
2. 提取布局清单：从规格文件的"布局清单"章节读取页面类型、搜索区字段清单、表格列配置、操作按钮清单
3. 逐字段渲染：对搜索字段按清单顺序逐个生成 <el-col> + 表单组件；对表格列按列配置生成 <BtTableColumn>；对操作按钮按类型生成
4. 优先级顺序：原型实际布局 > 平台规范约束 > 骨架模板参考
5. 🔴 字典字段渲染（列表组件=enum）：当字段规格表的 列表组件 列为 enum 时，该字段为字典映射字段，列表不得直接渲染原始代码值，必须按以下规则处理：
- 在 <script setup> 中 import { queryCommonCodes } from '@bovo-vue/utils/pacp'
- 为每个字典字段生成 const dictMap_{字段名} = ref({}) 响应式字典映射
- 生成 loadDictData 函数，调用 queryCommonCodes({ DMJBH: '{代码集编号}' }) 获取字典数据，构建 DM → DMMC 映射
- 表格列使用插槽模板渲染：{{ dictMap_{字段名}[row.{字段名}] || row.{字段名} }}
- 在初始化时先调用 loadDictData() 再调用 loadData()
- 代码集编号从字段规格表的 关联关系/数据来源 列（字典:{代码集编号}）确定

6. 🔴 字典字段组件选型规则：BvCommonCode（setCode）vs Bv*ForCodes（dmjbh）：字典字段在表单区和搜索区使用组件时，必须分清两个组件系列及其对应的属性，禁止混淆：

🔴 选型规则（按优先级）：
- ① 字段规格表 表单组件 列已标注具体组件（如 BvCommonCode/BvSelectForCodes）→ 严格按标注，不得自行更换
- ② 字段规格表 表单组件 列标注了 BvCommonCode（字典） 但未指定具体系列 → 按原型形态选：
- 原型为下拉框 → BvSelectForCodes（dmjbh）
- 原型为单选框 → BvRadioForCodes（dmjbh）
- 原型为多选框 → BvCheckboxForCodes（dmjbh）
- 原型为标签 → BvTagForCodes（dmjbh）
- 原型为级联选择 → BvCascaderForCodes（dmjbh）
- 原型为树形选择 → BvTreeForCodes / BvTreeSelectForCodes（dmjbh）
- 原型不明确（纯文字需求）→ BvCommonCode（setCode，默认 controlType="select"）
- ③ 字段规格表 表单组件 列未标注（空值）→ 查 Skill(pacp-rules, args="frontend-component-mapping 字段语义") 按字段语义绑定

🔴 prop 对照表（禁止混用，否则组件不加载数据）：

{代码集编号} 的来源：统一从字段规格表的 关联关系/数据来源 列中提取 字典:{代码集编号} 中的编号部分（如 字典:MZDM → 编号为 MZDM），禁止自行编造代码集编号。

🔴 禁止：
- BvCommonCode 使用 dmjbh 属性（BvCommonCode 不认识 dmjbh，该属性只对 Bv*ForCodes 系列生效）
- Bv*ForCodes 系列组件使用 setCode 属性（setCode 只对 BvCommonCode 生效，Bv*ForCodes 不认识该属性）
- 同一个字典字段在列表页渲染时用 queryCommonCodes({ DMJBH }) 构建映射，在表单中却用不同的代码集编号
- 每生成一个 Vue 文件后，用 Grep 工具按规则扫描，任一命中则中断并报错
- 快速扫描清单（生成后必检项，按此顺序 Grep）：
1. <template> 根节点非 BvPanel → Grep "<template>\s*<div" 或 "<template>\s*<el-row"（只允许 <BvPanel）
2. 搜索条件区禁止用 el-form → 规则见 Skill(pacp-rules, args="frontend-vue3-coding-standards 零容忍")
3. 手写 el-option 字典选项 → Grep "<el-option"（应用 BvCommonCode 用 setCode，或 Bv*ForCodes 系列用 dmjbh）
4. 日期提交 Date 对象 → Grep "new Date()" 或缺 dayjs 格式化
5. API 请求未用 getAxios → Grep "axios\." 或 Grep "fetch(" 或 Grep "$ajax"
6. 表格事件非 camelCase → Grep "@page-change\|@size-change\|@selection-change"（应为 @pageChange 等）
7. 表单 el-form 未设 label-width="200px" → 规则见 Skill(pacp-rules, args="frontend-vue3-coding-standards 表单布局")
8. 列表时间列未用 dayjs 格式化或宽度不符 → Grep "prop=.*(SJ|CJSJ|XGSJ|RQ|Date).*min-width"（应为 width="200" 或 width="130" + 插槽 dayjs 格式化）
9. 附件字段未用 BvAttachment → Grep "el-upload"（应为 BvAttachment）；同时核对 spec 附件清单条目数（Grep "BvAttachment" 生成的 .vue 文件，数量须与清单一致）
10. BvDialog 内容禁止用 <template #default> 包装 → Grep "<BvDialog" 检查子节点首元素是否为 <template #default>，若是则报错（内容应直接放在 BvDialog 子节点，禁止用 #default 包装；规则见 Skill(pacp-rules, args="frontend-vue3-coding-standards 弹窗")）
11. 表单内 el-row 禁止添加 gutter 属性 → Grep "<el-row.*gutter" 确认 el-row 不在 el-form 内；若在 el-form 内则报错（规则见 Skill(pacp-rules, args="frontend-vue3-coding-standards")）
12. ForCodes 系列组件禁止使用 setCode 属性 → Grep "BvSelectForCodes.*setCode\|BvRadioForCodes.*setCode\|BvCheckboxForCodes.*setCode\|BvTagForCodes.*setCode\|BvCascaderForCodes.*setCode\|BvTreeSelectForCodes.*setCode"（应为 dmjbh，setCode 仅 BvCommonCode 可用；规则见 Skill(pacp-rules, args="frontend-business-components-codes")）
13. 业务编号字段（*BH）禁止用 el-input → Grep "prop=.*BH.*el-input" 检查是否用 el-input 替代 BvIdGenerator（规则见 Skill(pacp-rules, args="frontend-component-mapping 业务编号")）
14. 禁止使用 BvUpload 组件 → Grep "BvUpload" 检查是否误用 BvUpload（已废弃，统一用 BvAttachment；规则见 Skill(pacp-rules, args="frontend-business-components-attachment")）

3.2 详情页（${entity}-detail.vue）

| 3. 业务语义强制绑定 | 命中业务语义的字段必须用强制平台组件，违者零容忍（规则见 Skill(pacp-rules, args="frontend-component-mapping")） | - |
| 4. 附件处理 | 附件需求从 spec 的"扩展信息 → 附件清单"章节读取（不在字段规格表中）。按清单逐条生成 <BvAttachment>，type 取清单中的 LXDM（如 SFZ），subType 取 ZLXDM（如有）。无附件清单时不生成任何 <BvAttachment> 示例，骨架模板中的附件示例行须删除 | - |
| 5. 必填校验 | 对"是否必填"=Y 的字段，在 :rules 中添加 { required: true, message: '请输入${字段中文名}', trigger: 'blur' } | - |
| 6. 奇数字段布局 | 一行两列布局下，字段总数为奇数时，最后一个字段占左列（:span="12"），右列补充空白 <el-col :span="12"><!-- 空单元格，保持布局对齐 --></el-col>，禁止用 :span="24" 占满整行 | - |
| 7. 业务编号字段处理 | 字段规格表"表单组件"列标注 BvIdGenerator 的 *BH 字段，必须生成 <BvIdGenerator> 组件，seqName 取字段中文名（如"站点编号"），seqName 须与后端 t_admin_xtgl_sxhdy.BHMC 逐字一致；设置 :automatic="true" 自动生成编号，:disabled="isView" 查看时禁用 | - |
| 8. 🔴 字典字段组件选型 | 字段规格表"表单组件"列标注 BvCommonCode（字典）或字段为 *DM/*LX/ZT/*DJ/*FL 模式的，必须按以下规则选型：<br/>- 先查 表单组件 列的具体标注：若标注了具体组件（如 BvSelectForCodes），严格按标注<br/>- 若标注为 BvCommonCode（字典），按原型形态选：下拉框→BvSelectForCodes（dmjbh）、单选→BvRadioForCodes（dmjbh）、多选→BvCheckboxForCodes（dmjbh）、标签→BvTagForCodes（dmjbh）、级联→BvCascaderForCodes（dmjbh）<br/>- 原型不明确 → BvCommonCode（setCode，默认 controlType="select"）<br/>- {代码集编号} 统一从字段规格表 关联关系/数据来源 列的 字典:{代码集编号} 提取<br/>- 🔴 禁止混用 prop：BvCommonCode 用 setCode，Bv*ForCodes 用 dmjbh，互不通用。选型规则详见本章 §3.1 第 6 条 | - |

零容忍规则：见本章「❌ 禁止清单 → 前端零容忍规则」

3.3 API文件（${entity}.js）

Step 4：代码组织

Step 5：代码审核

资源指针

外部规则库（pacp-rules，Skill 工具调用查询）

> 变基说明（精确 basename）：pacp-rules 在 2026-07-14 重构（原 platform-components.md 按组件系列拆为 7 个子文件；原 pacp-business-components.md 按业务系列拆为 6 个；原 utils-library.md 拆为 frontend-utils-core 与 frontend-utils-pacp-platform；高频小目标 java-platform-utils / sql-init-data / data-model-audit-fields / common-codes-{attachment,menu-init,id-generator} 独立成文件）。消费技能 args 直接传子文件 basename，pacp-rules 内部按 basename 自动定位，对调用方透明。

常用查询示例：
- 占位符查询：Skill(pacp-rules, args="system-module-path 占位符")
- 前端零容忍规则：Skill(pacp-rules, args="frontend-vue3-coding-standards 零容忍")（跨节由 pacp-rules 用 Grep 聚合）
- 字段语义识别：Skill(pacp-rules, args="frontend-component-mapping 字段语义") 或 Skill(pacp-rules, args="common-codes-standard 字段名模式")
- 组件绑定规则：Skill(pacp-rules, args="common-codes-standard 组件绑定")
- 某平台组件用法：Skill(pacp-rules, args="frontend-platform-components-form BvSelect")（精准加载该子文件后 Grep）
- 某业务组件用法：Skill(pacp-rules, args="frontend-business-components-codes BvSelectForCodes")
- 附件组件 + 表结构：Skill(pacp-rules, args="frontend-business-components-attachment") + Skill(pacp-rules, args="common-codes-attachment")
- 故障排查：Skill(pacp-rules, args="frontend-troubleshoot 分页")

本技能自包含资源

> @@/ 前缀表示本技能目录的根路径。例如 @@/skeletons/frontend/ 解析为 {本技能目录}/skeletons/frontend/。跨技能引用时，@@/ 始终指向被调用技能自身的根目录，而非调用方。

生成铁律

确认策略（🔴 CHECKPOINT）

> 代码生成是不可逆、高耗时操作。以下场景必须暂停向用户确认（见下方「静默禁止」）；无不确定项则直接执行，不啰嗦询问。
>
> caller=pacp-* 时：文件冲突由协调者预检查（manifest.json.fileConflictStrategy），组件选型由协调者在 spec 中确定（字段规格表「表单组件」列），本技能跳过对应 CHECKPOINT。
>
> caller=standalone 时：协调者不存在，本技能自行处理全部 CHECKPOINT。

静默禁止：以上任一命中若不暂停而直接覆盖/继续 → 视为生成失败。

禁止清单（❌ 反例黑名单）

> 本技能必须遵守以下禁止项，违者将导致代码无法运行或违反PACP平台规范。

前端零容忍规则（托管于 pacp-rules，单一真相源）

> 以下 11 条零容忍规则已集中托管在 Skill(pacp-rules, args="frontend-vue3-coding-standards 零容忍禁止项")。生成时及审核时必查，每生成一个 Vue 文件后按规则自检：
>
> 1. 禁止 Vue 模板根节点用 <div> 或 <el-row> → 必须 <BvPanel>
> 2. 禁止搜索条件区用 <el-form> → 必须 <el-row> + <el-col>
> 3. 禁止手写 <el-option> 做字典选项 → 必须 BvCommonCode（setCode）或 BvSelectForCodes（dmjbh）
> 4. 禁止 API 请求用 axios / fetch / $ajax → 必须 getAxios()
> 5. 禁止 BvTable 事件用 kebab-case → 必须 camelCase
> 6. 禁止表单 <el-form> 缺少 label-width="200px"
> 7. 禁止日期字段提交 Date 对象 → 必须 dayjs 格式化
> 8. 禁止附件字段用 <el-upload> → 必须 <BvAttachment>
> 9. 禁止 ForCodes 系列组件用 setCode 属性 → 必须 dmjbh（setCode 仅 BvCommonCode 可用；BvCommonCode 也禁止用 dmjbh——两组件系列的 prop 不通用）
> 10. 禁止业务编号字段（*BH）用 <el-input> → 必须 <BvIdGenerator>
> 11. 禁止使用已废弃的 BvUpload 组件 → 统一用 BvAttachment
>
> 完整规则见 Skill(pacp-rules, args="frontend-vue3-coding-standards 零容忍禁止项")。强制组件绑定映射见 Skill(pacp-rules, args="frontend-component-mapping")。

❌ 本技能边界禁止项

运行时规则收集（🔴 新规则捕获）

> 用户在生成/使用过程中提出的新前端规则（不在现有 pacp-rules 规范库及本 SKILL 现有规则中的），必须即时收集沉淀到 .pacp/business-frontend-rule.md，避免规则丢失。规则沉淀后应回流给 pacp-rules 维护者，但本技能只负责捕获、不直接改 pacp-rules。

触发条件

在技能执行的任意阶段（读规格/生成/审核），当用户提出符合下列任一特征的新前端规则时触发：
- 用户使用指令性语言（"规则是 / 必须 / 禁止 / 要求 / 约定 / 以后都 / 以后请"），明确一条前端编码约定
- 用户纠正生成结果并给出通用性约束（可复用于其他实体/模块，而非一次性特例）
- 用户补充平台组件用法、命名规范、目录约定、事件/属性约束等

收集动作

收集边界（不收集）

不确定时处理

无法判断是否为新前端规则（vs 需求 / 特例 / 已知规则）时，询问用户："这是否需要沉淀为通用前端规则（写入 .pacp/business-frontend-rule.md）？" 再据回复处理。

交付验证

全部产出完毕后，输出：

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✓ 模块前端代码生成完成
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

模块：${MODULE_COMMENT}（${MODULE}）
实体数量：${ENTITY_COUNT}
产出文件：
  ✓ Vue：src/views/{所属业务}/{功能模块}/...（index/layout/list/detail）
  ✓ API：src/api/{所属业务}/{功能模块}-{entity}.js（每个实体一个API文件）
  ✓ 路由：src/router/{所属业务}/{功能模块}.js

验证结果：
  ✓ 规范审核：通过（前端零容忍规则）
  ✓ 接口契约：api.js 路径与后端对齐（/api/v2/business/{所属业务}/{功能模块}/{entity}）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

与协调者/姊妹技能的协作

调用关系表

执行流程图

协调者（pacp-spec 或 pacp-coding）
  ↓ 输出模块规格：modules/{所属业务}.{功能模块}.spec.md
pacp-coding-backend（先执行）
  ↓ 生成 SQL + Java + JUnit + 接口契约（@RequestMapping 路径）
pacp-coding-frontend（本技能，后执行）
  ↓ 读取同一模块规格
  ↓ 按接口契约生成 api.js（URL 与后端一致）
  ↓ 按布局清单生成 Vue 组件（list/detail）+ 模块入口/路由
  ↓ 前端代码审核（静态审核：规范审核 + 一致性对照；不执行 pnpm 编译）
  ↓ 输出前端代码
协调者
  ↓ 继续下一个模块（pacp-spec 多模块场景）

接口对齐机制

PACP 技术栈基线

技术栈基线见 Skill(pacp-rules, args="tech-stack-baseline")。