@agile-team/wl-skills-kit 2.4.2 → 2.5.1

package/files/.github/skills/core/page-codegen/USAGE.md

@@ -7,7 +7,7 @@
 
 ## 这个 Skill 解决什么问题
 
-基于《页面清单》+ `api.md`，**自动生成符合项目规范的 Vue 页面**（标准页面骨架：index.vue / data.ts / index.scss + api.md 按需），并跑一遍内部规范自检（Pre-flight + 完成摘要）。
+基于《页面清单》+ `api.md`，**自动生成符合项目规范的 Vue 页面**（标准页面骨架：index.vue / data.ts / index.scss + api.md + mock 按需），并跑一遍内部规范自检（Pre-flight + 完成摘要）。
 
 生成出来的代码**满足 13 条 standards**，无需手工改语法/命名。
 
@@ -23,7 +23,9 @@
 
 ## 触发关键词
 
-`生成页面` / `创建页面` / `代码生成` / `vue 页面` / `按原型生成` / `帮我生成`
+`生成页面` / `创建页面` / `代码生成` / `vue 页面` / `按原型生成` / `帮我生成` / `列表页` / `管理页` / `台账` / `mock` / `先能跑` / `AGGrid` / `skills-ui`
+
+用户不需要精确说出 Skill 名。只要表达“做个页面”“根据截图生成”“先用假数据”“菜单也加上”“风格没生效”，AI 应自动进入 Intent Router，读取 `page-codegen/SKILL.md`、模板索引、匹配模板和 `standards/12-base-table.md`。
 
 ---
 
@@ -37,8 +39,9 @@ AI：[Pre-flight]
     模板基线：templates/domains/produce/customer/
     13 条 standards 自检通过项预估：
     ✓ AbstractPageQueryHook 正确继承
-    ✓ EColumn 元数据完备
-    ✓ pageRef 命名规范
+    ✓ BaseTable render-type="agGrid"
+    ✓ TABLE_CID / 列级 cid 完整
+    ✓ defineColumns / renderOps 已使用
     ✓ scoped scss
     ⚠ 待确认：customerStatus 字典 logicValue 名
     [生成中... 8 分钟]
@@ -56,10 +59,11 @@ AI：[Pre-flight]
 
 ```
 src/views/<域>/<模块>/<子模块>/<page-name>/
-├── data.ts        EColumn 定义、API_CONFIG、Hook 类
+├── data.ts        API_CONFIG、Hook 类、TABLE_CID、defineColumns/renderOps
 ├── index.vue      template + script + import data.ts
 ├── index.scss     页面专属样式（已 :deep / scoped 包好）
-└── api.md         （由 api-contract 生成，codegen 不覆盖）
+├── api.md         （由 api-contract 生成，codegen 不覆盖）
+└── mock/*.ts      mock-first 场景下生成，端点与 API_CONFIG 对齐
 ```
 
 外加生成报告：`.github/reports/PAGE_CODEGEN_<模块>_<YYYYMMDD>.md`
@@ -81,12 +85,29 @@ src/views/<域>/<模块>/<子模块>/<page-name>/
 
 ## 常见踩坑
 
-| 现象                                | 原因                                   | 解法                                                |
-| ----------------------------------- | -------------------------------------- | --------------------------------------------------- |
-| 生成出来的页面 console 报字典查不到 | 字典还没在 reports/SYS_DICT_INFO.md 中 | 先跑 `dict-sync` 拉取，或手动补 dict                |
-| 表单弹窗未加 v-loading              | api.md 没标记 save/update 为耗时操作   | 在 api.md 接口清单中加 `**预计耗时：> 2s**` 标记    |
-| `EColumn` 字段缺 `width`            | 模板默认不指定 width                   | 模板里手动加，或选用 `templates/domains/` 下的成品  |
-| AGGrid cid 重复                     | 多页面同时生成时随机数撞了             | cid 已用 `{首字母缩写}-{Unix秒后6位}`，理论极低概率 |
+| 现象                                | 原因                                   | 解法                                                                          |
+| ----------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
+| 生成出来的页面 console 报字典查不到 | 字典还没在 reports/SYS_DICT_INFO.md 中 | 先跑 `dict-sync` 拉取，或手动补 dict                                          |
+| 表单弹窗未加 v-loading              | api.md 没标记 save/update 为耗时操作   | 在 api.md 接口清单中加 `**预计耗时：> 2s**` 标记                              |
+| `EColumn` 字段缺 `width`            | 模板默认不指定 width                   | 模板里手动加，或选用 `templates/domains/` 下的成品                            |
+| AGGrid cid 重复                     | cid 生成不规范                         | 使用 `{页面目录首字母缩写}-{Date.now().toString(36)}`，多表追加 `-sub1/-sub2` |
+| 表格不是 AGGrid                     | 模板未写 `render-type="agGrid"`        | 使用最新模板，或运行 `wl-skills validate-page <页面目录>`                     |
+| 操作列还是旧按钮                    | 生成了 `operations: []`                | 改成 `defaultSlot + renderOps()`                                              |
+| skills-ui 安装但风格没生效          | tokens/styles/preset/runtime 未接入    | 运行 `wl-skills doctor-ui` 查看缺项                                           |
+
+---
+
+## 生成后建议命令
+
+```bash
+wl-skills validate-page src/views/<module>/<subModule>/<page>
+wl-skills doctor-ui
+```
+
+若 AI 可调用 MCP，优先使用：
+
+- `wls_validate_page`
+- `wls_doctor_ui`
 
 ---
 

package/files/.github/skills/core/page-codegen/templates/universal/TPL-DETAIL-TABS.md

@@ -81,6 +81,8 @@
           </div>
           <BaseTable
             ref="itemTableRef"
+            render-type="agGrid"
+            :cid="ITEM_TABLE_CID"
             :data="itemList"
             :columns="itemColumns"
             showToolbar
@@ -110,6 +112,7 @@ import {
   itemList,
   itemColumns,
   itemPage,
+  ITEM_TABLE_CID,
   formRef,
   itemTableRef,
   handleSave,
@@ -136,6 +139,9 @@ import { ElMessage } from "element-plus";
 import type { FormInstance, FormRules } from "element-plus";
 import type { TableColumnDesc } from "@/types/page";
 import envConfig from "@jhlc/common-core/src/store/env-config";
+import { defineColumns, renderOps } from "@agile-team/wk-skills-ui/runtime";
+
+export const ITEM_TABLE_CID = "[pageAbbr]-[base36Timestamp]-sub1";
 
 export const API_CONFIG = {
   getById: "/[服务缩写]/[主资源]/getById",
@@ -184,22 +190,25 @@ export const itemTableRef = ref();
 export const itemList = ref<any[]>([]);
 export const itemPage = reactive({ current: 1, size: 10, total: 0 });
 
-export const itemColumns: TableColumnDesc<any>[] = [
-  { type: "index", width: 55 },
-  { label: "[子项字段]", name: "[fieldName]", minWidth: 120 },
+export const itemColumns: TableColumnDesc<any>[] = defineColumns([
+  { type: "index", label: "序号", width: 60, align: "center" },
+  {
+    label: "[子项字段]",
+    name: "[fieldName]",
+    cid: `${ITEM_TABLE_CID}-[fieldName]`,
+    minWidth: 120,
+  },
   {
     label: "操作",
+    name: "_action",
+    cid: `${ITEM_TABLE_CID}-action`,
     width: 100,
     fixed: "right",
-    operations: [
-      {
-        name: "remove",
-        label: "删除",
-        onClick: (row: any) => removeItem(row),
-      },
-    ],
+    align: "center",
+    defaultSlot: ({ row }: any) =>
+      renderOps([{ type: "del", onClick: () => removeItem(row) }]),
   },
-];
+] as any) as TableColumnDesc<any>[];
 
 // ===== 数据加载 =====
 export async function loadItems() {
@@ -453,7 +462,14 @@ defineExpose({ open });
       @reset="select"
     />
     <BaseToolbar :items="toolbars" />
-    <BaseTable ref="tableRef" :data="list" :columns="columns" showToolbar />
+    <BaseTable
+      ref="tableRef"
+      render-type="agGrid"
+      :cid="TABLE_CID"
+      :data="list"
+      :columns="columns"
+      showToolbar
+    />
     <jh-pagination
       v-show="page.total && page.total > 0"
       :total="page.total || 0"
@@ -468,7 +484,7 @@ defineExpose({ open });
 </template>
 
 <script setup lang="ts">
-import { createPage } from "./data";
+import { createPage, TABLE_CID } from "./data";
 import AddModal from "./components/addModal.vue";
 
 const addModalRef = ref();
@@ -547,22 +563,44 @@ let _editModalRef: any = null;
 
 /** 管理视角列定义 */
 export function managementColumns(): TableColumnDesc<any>[] {
-  return [
-    { type: "selection" },
-    { type: "index" },
+  return defineColumns([
+    { type: "selection", width: 55, fixed: "left", align: "center", headerAlign: "center" },
+    { type: "index", label: "序号", width: 60, align: "center" },
     // ... 管理视角列（按原型顺序）
-    { label: "操作", width: 100, fixed: "right", operations: [...] }
-  ];
+    {
+      label: "操作",
+      name: "_action",
+      cid: `${TABLE_CID}-management-action`,
+      width: 120,
+      fixed: "right",
+      align: "center",
+      defaultSlot: ({ row }: any) => renderOps([
+        { type: "edit", onClick: () => _editModalRef?.value?.open(row.id) },
+        { type: "del", onClick: () => Page?.remove(row.id) }
+      ])
+    }
+  ] as any) as TableColumnDesc<any>[];
 }
 
 /** 使用视角列定义（含业务明细字段） */
 export function usageColumns(): TableColumnDesc<any>[] {
-  return [
-    { type: "selection" },
-    { type: "index" },
+  return defineColumns([
+    { type: "selection", width: 55, fixed: "left", align: "center", headerAlign: "center" },
+    { type: "index", label: "序号", width: 60, align: "center" },
     // ... 使用视角列（按原型顺序，通常比管理视角多出业务字段）
-    { label: "操作", width: 100, fixed: "right", operations: [...] }
-  ];
+    {
+      label: "操作",
+      name: "_action",
+      cid: `${TABLE_CID}-usage-action`,
+      width: 120,
+      fixed: "right",
+      align: "center",
+      defaultSlot: ({ row }: any) => renderOps([
+        { type: "edit", onClick: () => _editModalRef?.value?.open(row.id) },
+        { type: "del", onClick: () => Page?.remove(row.id) }
+      ])
+    }
+  ] as any) as TableColumnDesc<any>[];
 }
 
 let Page: any = null;
@@ -756,18 +794,20 @@ export function createPage() {
     ];
   }
   columnsDef() {
-    return [
+    return defineColumns([
       // ...
       {
-        label: "操作", fixed: "right",
-        operations: [
-          {
-            name: "edit", label: "编辑",
-            onClick: (row: any) => navigateToForm({ id: row.id })
-          }
-        ]
+        label: "操作",
+        name: "_action",
+        cid: `${TABLE_CID}-action`,
+        fixed: "right",
+        align: "center",
+        defaultSlot: ({ row }: any) =>
+          renderOps([
+            { type: "edit", onClick: () => navigateToForm({ id: row.id }) }
+          ])
       }
-    ];
+    ] as any) as TableColumnDesc<any>[];
   }
 }
 ```
@@ -846,22 +886,14 @@ onMounted(() => {
 ### 实现方式
 
 ```vue
-<!-- 表格列：v-if 按 mode 控制 -->
-<el-table-column v-if="isChange" label="使用组织" prop="useOrg" />
-<el-table-column
-  v-if="!isChange && !isView"
-  label="免息天数"
-  prop="interestFreeDays"
+<!-- 表格列：按 mode 在 data.ts 中切换 columns，仍使用 BaseTable + AGGrid -->
+<BaseTable
+  render-type="agGrid"
+  :cid="DETAIL_TABLE_CID"
+  :data="list"
+  :columns="isChange ? changeColumns : addColumns"
 />
 
-<!-- 操作列：变更模式多一个编辑按钮 -->
-<el-table-column v-if="!isView" label="操作" :width="isChange ? 120 : 80">
-  <template #default="{ row, $index }">
-    <el-button v-if="isChange" type="primary" link @click="editRow(row, $index)">编辑</el-button>
-    <el-button type="danger" link @click="list.splice($index, 1)">删除</el-button>
-  </template>
-</el-table-column>
-
 <!-- 底部新增行链接（变更模式） -->
 <div
   v-if="isChange && !isView"
@@ -1000,7 +1032,7 @@ spec.features.hiddenMenu === true：
 ✅ query: spec 12 项 = code 12 项，顺序一致
 ✅ columns: spec 16 项 = code 16 项，顺序一致
 ✅ toolbar: spec 7 项 = code 7 项，顺序一致，颜色正确
-✅ operations: spec 3 项 = code 3 项，顺序一致
+✅ rowActions: spec 3 项 = code 3 项，顺序一致
 ✅ tabs: spec 3 项 = code 3 项，顺序一致
 ✅ subTables: businessInfo(editable) — 有新增/删除
 ✅ dict 字段: 8 个全部配置 logicType
@@ -1013,7 +1045,7 @@ spec.features.hiddenMenu === true：
 ```
 ❌ columns: spec 35 项 ≠ code 34 项 — 缺少 customerName 列 → 已补全
 ❌ toolbar 顺序: spec [新增申请, 删除, 启用] ≠ code [新增, 启用, 删除] → 已调整
-❌ operations: spec [查看, 编辑, 删除] ≠ code [编辑, 删除] — 缺少"查看" → 已补全
+❌ rowActions: spec [查看, 编辑, 删除] ≠ code [编辑, 删除] — 缺少"查看" → 已补全
 ```
 
 ---