@zeyue0329/xiaoma-cli 1.20.0 → 1.22.0

package/src/zqyl-skills/mid/xiaoma-zqyl-list-page-mid/pages/listPage.md

@@ -0,0 +1,389 @@
+---
+title: 列表页（中台）
+---
+
+
+# 列表页（中台）
+
+你是一个前端页面实现助手。以本技能描述的列表页骨架为**基线**，结合需求/原型做区块增删改；含标准列表与统计+列表、表格带标签、双重标签、极简查询等变体场景；遵守固定约定与组件 skill（含按需 `ylTips`），不得破坏 `ref` 联动与平台组件选型。
+
+## 平台与参考
+
+- 平台：中台
+- 页头/表格：**`ylManagerTitle` + `ylMpsTable`**（项目 `components`，无则手动拷贝）
+- 外部查询：**`ylSearchForm` 在入口按组件名 `Vue.component` 注册**（platformType：`mps`）
+- 模板数据名：`midListPage`
+- 布局类型：**中台管理列表**（`yl_manager_container` → `ylManagerTitle` → `el-card` → 可选 Tab / `ylSearchForm` → `ylMpsTable`）
+- 组件来源：`ylSearchForm` 等 → 入口按组件名逐个 `Vue.component`；`ylManagerTitle`、`ylMpsTable` → 项目 **components**（缺失时手动拷贝）
+
+## 页面说明
+
+中台列表页面：ylManagerTitle（右侧操作）+ ylMpsTable（筛选 + 动态列表格 + 分页）；预览含二级标题、统计+列表、表格带标签、双重标签、极简查询等场景
+
+## 何时使用
+
+当用户需要新建或改造**中台查询列表页**（页头 + Tab + 查询区 + 动态表格 + 分页 + 列配置）时，使用本 skills。
+- 信号：中台管理列表、`listRegistrationNo`、内置或外部查询、表格列配置、行内操作、Tab 切换列表、导出/多选。
+- 不适用：纯表单页、纯详情页（用 `xiaoma-zqyl-form-detail-page-mid`）；**无表格的仪表盘/看板无专用页面模板** —— 回到 `xiaoma-zqyl-ui-spec` 的「数据统计看板/仪表盘」段落，用 title + data-census + `*-chart` 组件 skill 自建骨架。
+
+## 需求/原型差异落地
+
+本 skill 提供**常用列表页模板**作为基线。实际开发中，需求文档或原型常在基线上**增删改区块**；生成代码前须先做差异对照，**不要**无视需求硬套默认示例。
+
+### 工作流（有需求文档或原型时必做）
+
+```
+1. 通读需求/原型，列出可见区块（标题、Tab、查询、统计、表格、弹窗等）
+2. 对照下方「中台标准骨架」，逐块标注：保留 / 删减 / 调整内容
+3. 仅对「调整」和「新增」区块改模板代码；「删减」区块整段移除
+4. 输出一整页 Vue 代码，并在回复中简要说明相对默认模板删改了哪些区块
+```
+
+### 中台标准骨架（对照用，非强制全保留）
+
+`el-row.yl_manager_container` → **`ylManagerTitle`（`#btn` 常用放页头操作）** → `el-card` → **[页级 Tab]** → **[外部 `ylSearchForm`]** → **`ylMpsTable`** → **[弹窗/抽屉]**
+### 跳转类操作（三端通用）
+
+- **定义**：跳转其他页面/外链、**不改变当前列表数据**的操作（如下载中心、任务中心等）。
+- **组件选型**：**优先 `ylButton`**（如 `type="download"`）；仅当 `ylButton` 无法满足样式/交互时再使用 `el-link` + 图标。详见 `xiaoma-zqyl-button-mid`。
+- **落位原则**：**以需求/原型为准**；下列为各端**常用**位置，无明确要求时可作默认参考，勿硬套。
+- **中台常用落位**：`ylManagerTitle` 的 **`#btn` 插槽**（与导出/新增等页头操作并列）；表格区为 `ylMpsTable` 时，跳转类通常不在表内标题行。
+
+
+方括号 `[...]` 为**可选区块**；需求/原型未出现则**不生成**，勿为「凑完整示例」强行保留。
+方括号区块的**插入位置**见下文「列表变体选型」「页面骨架」，非一律接在本行箭头末端。
+
+### 常见差异与处理
+
+| 需求/原型信号 | 相对默认模板 | 处理 |
+| --- | --- | --- |
+| 无 Tab | 示例含页级 Tab | **删掉** `el-card.yl-title_tabs` 整块 |
+| 仅内置筛选 | 示例含外部 `ylSearchForm` | **去掉** `ylSearchForm`，`ylMpsTable` 不设 `hideSearch` |
+| 复杂外部查询 | 仅内置筛选 | 保留 `ylSearchForm`，表格 `:hideSearch="true"` 并写 `searchRefsName` |
+| 列由注册号拉取 | 手写 `tableData.header` | **不要**手写表头；配 `listRegistrationNo` + 列插槽 |
+| 字段/列/接口与示例不同 | 示例为结构占位 | **只替换**标题、`searchParmas.parmas`、`tableData.header`、**`INTERFACE` 接口常量**，**不改**区块顺序除非需求要求；**禁止**填充 mock 行 |
+| 布局层级与上表完全不同 | 仍像列表但结构非标 | 优先满足需求层级；保留 `ref` 联动、`platformType`、`isCard` 等硬约束 |
+
+### 优先级
+
+1. **需求文档 / 原型 / 用户明确描述**（最高）
+2. 本 skill 的**固定约定**与配套组件 skill（`ref` 名、`platformType`、`isCard`、中台组件选型等）
+3. 规范平台默认预览示例（仅作基线，可被 1 覆盖删减）
+
+### 硬约束（需求也不得破坏）
+
+- 中台页面页头默认 **`ylManagerTitle`**；列表主表格默认 **`ylMpsTable`**；未明确要求时**勿用** `ylTitle` / `ylTableSimple` 作页头或主列表
+- **例外**：用户**明确要求**使用 `ylTitle` 或 `ylTableSimple` 时，可按指定组件替换对应区块
+- 外部查询时：`searchFormRef` ↔ `mpsTable` 的 `searchRefsName` 成对
+- 公共 class（`yl-tabs-table`、`yl-title_tabs`、`yl_manager_container` 等）用项目 `common.less`，**禁止**在页面 `scoped` 重写
+
+## 配套组件 skills（必须一并遵守）
+
+本 skills 只描述**页面级骨架与拼装顺序**；下列组件的 Props、列配置、查询项结构等细节以已安装的独立组件 skill 为准，生成代码时不得与之冲突：
+
+| 区域 | 组件 | 组件 skill |
+| --- | --- | --- |
+| 页头 | **`ylManagerTitle`** | `xiaoma-zqyl-manager-title-mid` |
+| 外部查询（可选） | **`ylSearchForm`** | **`zqyl-component-base`**，见 `xiaoma-zqyl-search-form-mid` |
+| 表格 + 内置筛选 + 分页 | **`ylMpsTable`** | `xiaoma-zqyl-mps-table-mid` |
+| 弹窗（按需） | `ylDialog` | `xiaoma-zqyl-dialog-mid` |
+| 提示（按需） | `ylTips` | `xiaoma-zqyl-tips-mid` |
+| 带图标按钮（按需） | `ylButton` | `xiaoma-zqyl-button-mid` |
+
+> 用户只描述业务字段时：先按默认骨架搭 `ylManagerTitle` + `ylMpsTable`（常见再配 Tab、`ylSearchForm`）；列与筛选项由 **`listRegistrationNo`** 拉取，页面侧重 **`queryListUrl`**、**`queryParams`**、列名插槽与 **`#_operate`**。
+
+## 固定约定（全列表页通用）
+
+| 约定 | 值 | 说明 |
+| --- | --- | --- |
+| 表格 ref | `mpsTable` | 对应 `ylMpsTable` 的 `ref` |
+| 列表标识 | `listRegistrationNo` | 字符串，与列表注册配置一致（Tab 切换时通常变更该值） |
+| 列表接口 | `queryListUrl` | 由页面传入，组件内部 POST |
+| 根容器 | `el-row.yl_manager_container` | 中台列表页标准外层，样式见 `common.less` |
+| 页头 | `ylManagerTitle` | **不用** `ylTitle`、**不传** `platformType`；右上角操作用 **`#btn`** |
+| 表格区 | `el-card` 内 **`el-tabs`（可选，表格上方）** + `ylMpsTable` | Tab 与表格**同一张** `el-card`；复杂查询再配 **base 的 `ylSearchForm`**（在 Tab 与表格之间，`:isCard="false"` `:load="false"`）+ 表格 **`hideSearch`** |
+| Tab 位置 | `el-card` 内、`ylMpsTable` **上方** | 与前台 `yl-title_tabs` 独立卡、后台表格外 Tab 卡均不同；切换 Tab 后更新 `listRegistrationNo` / `queryParams` 并 `getList()` |
+| 组件落位 | `ylManagerTitle`、`ylMpsTable` | 项目无则从其它中台项目**拷贝到 `components`**；`ylSearchForm` **不拷贝**，走 base 包 |
+| 外部查询 ref | `searchFormRef` | `yl-search-form` 的 `ref`，与 `ylMpsTable` 的 `searchRefsName` 一致 |
+| 查询 ↔ 表格 | `:search="$refs"` `searchRefsName="searchFormRef"` | 使用外部 `ylSearchForm` 且 `:hideSearch="true"` 时，**`ylMpsTable` 上必写** |
+| 页头操作 | `ylManagerTitle` 的 `#btn` | 导出/新增等；`plain` + 一个 `primary` 实心为主流排布 |
+| 公共 class | `yl_manager_container`、`yl_manager_title`、`w100`、`mt16` | 来自业务项目 `common.less` |
+
+## 输出要求
+
+## 数据与接口（禁止 mock）
+
+- **禁止**在生成业务页面中填充 mock、演示、假数据或静态业务行（如手写 `loadData: [{ companyName: 'xxx' }]`、`reqData` 示例值、`mounted` 里写死 `total` 等）。
+- 列表/表格：`tableData.loadData` 保持 `[]`，数据由 `ylTableSimple` / `ylMpsTable` 通过 `searchParmas.request` / `queryListUrl` **调接口**获取；`request.url` / `queryListUrl` 写项目已有 `INTERFACE.xxx`，未知时留 `''` 并注释 `// TODO: 补充接口常量`。
+- 查询区：`searchParmas.request` 配置 `url`、`type`、`method`、`options`；有 `url` 时 `:load="true"`（或省略，默认加载），由组件触发查询。
+- 表单详情：`reqData` / 表单 model 初始 `{}` 或字段空值；在 `created` / `mounted` 调详情接口赋值；**禁止**预填示例姓名、金额等。
+- 下拉/枚举：`select` 的 `data` 从字典或接口加载，无数据时 `data: []`；**禁止**写死 `{ name: '待审核', code: '1' }` 类占位项（除非需求明确给定静态枚举）。
+- 统计区 `ylDataCensus`：`:list` 由接口或 `computed` 赋值，**禁止**手写示例金额/数量。
+- 动态行表格：`detailRows` 等初始 `[]`，由接口回显或用户操作增删。
+- 本 skill「示例」章节的静态数据**仅供理解组件 API**；生成业务页面时**不得**照搬进 `data()`。
+
+- 输出**一整页**可粘贴的 Vue2 单文件组件片段（`<template>` + `<script>`），按需求/原型替换标题、查询项、表头、接口地址，并删减不需要的可选区块。
+- 只输出**一种**与当前平台且与需求匹配的布局（前台 / 中台 / 后台），不要并列多种方案。
+- 有需求/原型时：回复中**用一两句话**说明相对默认模板保留/删减了哪些区块（如「无页级 Tab、无表格标题行」）。
+- 中台列表：配置 **`listRegistrationNo`**、**`businessCode`**、**`queryListUrl`**、**`queryParams`**；行内操作用 **`#_operate`**；枚举/金额等列用与 **`prop` 同名** 的插槽；**禁止**手写 mock 行或本地 `loadData`。
+- 刷新列表：分配/导入成功后调用 `this.$refs.mpsTable.getList()` 或 `updateTable()`。
+
+## 引入与注册
+
+> **zqyl-component-base**：公共组件须在**项目入口文件**（如 `entry_main.js`、`main.js`）按**真实组件名**逐个 `import` 并以 `Vue.component` 全局注册；样式在入口 `import 'zqyl-component-base/lib/theme-chalk/component.css'`。**禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)` 全量注册。
+
+生成前先检查项目入口：
+- 入口**已**按组件名注册所需 `yl*` 组件 → 页面直接使用 `<yl-*>`，**勿**在页面 SFC 重复 import
+- 入口**缺少**本页用到的组件 → **仅**在入口补注册缺失项（按组件名逐个 import），**勿**改页面 SFC 做局部注册，**勿**用全量 `Vue.use`
+
+入口按组件名注册示例（仅列举本任务用到的组件，勿全量 `Vue.use`）：
+
+```js
+import 'zqyl-component-base/lib/theme-chalk/component.css';
+import ylSearchForm from 'zqyl-component-base/lib/ylSearchForm';
+
+Vue.component('ylSearchForm', ylSearchForm);
+// 项目 legacy 组件（如 ylManagerTitle）可同样 Vue.component，勿覆盖 base 同名组件
+```
+
+页面 script 只需业务逻辑与接口，模板直接使用全局组件，例如：
+
+```vue
+<yl-title platformType="yx" title="列表页标题" :disabledBack="true" />
+```
+
+中台 `ylManagerTitle`、`ylMpsTable` 为项目内组件，同样在入口或单页按路径注册：
+
+```js
+import ylManagerTitle from '@/components/ylManagerTitle.vue';
+import ylMpsTable from '@/components/ylMpsTable/index.vue';
+Vue.component('ylManagerTitle', ylManagerTitle);
+Vue.component('ylMpsTable', ylMpsTable);
+```
+
+## 提示（ylTips，按需）
+
+- `ylTips` 落位**须先对照原型纵向位置**，再选用下列之一；详见 `xiaoma-zqyl-tips-mid`「列表页落位（强制选型）」。
+
+| 原型位置 | 结构顺序 |
+| --- | --- |
+| 标题下、查询前 | `ylTitle` → `ylTips.page-global-tip` → `ylSearchForm` → 表格卡 |
+| **查询下、表格上**（最常见误放场景） | `ylSearchForm` → `ylTips.list-page-tip` → `el-card.yl-tabs-table`（**提示与表格卡同级**） |
+| 表格卡内短文案 + 按钮 | `el-card.yl-tabs-table` 内 `el-row.mb16` 左侧纯文本；**不用** `ylTips` |
+
+- **禁止**：原型显示查询区与表格为两块独立区域时，将整块 `ylTips` 放入 `el-card.yl-tabs-table` 与 `ylTableSimple` 同卡。
+- **间距**：全局提示 `margin-top: 16px`（`page-global-tip`）；查询与表格间 `margin-top: 16px`（`list-page-tip`）；表单详情卡片内 `margin-bottom: 16px`（`card-inner-tip`）。详见 `xiaoma-zqyl-tips-mid`。
+- 警示类常显用 `showCloseIcon: false`；可关闭说明监听 `@hiddenTips`。
+
+## 列表变体选型
+
+| 变体 | 结构要点 |
+| --- | --- |
+| 标准列表 | 最基础：`ylTitle` → 查询 → 表格（**无页级 Tab**） |
+| 二级标题 | `ylTitle` → `el-card.yl-title_tabs`（页级 Tab）→ 查询 → 表格；切换 Tab 保留各 Tab 查询条件（业务层） |
+| 统计 + 列表 | `ylTitle` → `ylDataCensus` → `ylSearchForm` → [按需 `ylTips`] → `el-card.yl-tabs-table` |
+| 统计 + 列表 + 温馨提示 | `ylTitle` → [页级 Tab] → `ylDataCensus` → `ylSearchForm` → **`ylTips`（独立块）** → `el-card.yl-tabs-table`；提示**不在**表格卡内 |
+| 表格带标签 | 后台：`ylTitle` → `el-card.yl-tabs-table` 内 `ylSearchForm` → `el-tabs` → 操作提示行 → `ylTableSimple`；前台：查询独立成卡（`:is-card="true"`）后接表格卡；改查询各 Tab 同步 |
+| 双重标签 | `ylTitle` → `el-card.yl-title_tabs`（页级 Tab）→ `el-card.yl-tabs-table` 内 Tab + 查询 + 表格（二级标签支持查询） |
+| 极简查询 | 少量 `ylSearchForm` 查询项；表格操作按钮用 `slot="rightBtn"` 与查询区同一行 → `ylTableSimple` |
+
+### 变体注意事项
+
+- 极简查询：整体操作（新增/导出等）放 `ylSearchForm` 的 **`rightBtn`** 插槽，与查询条件同一行；查询项宜少（通常 < 3 个，仅「查询」无「重置」）。
+- 批量导入弹窗由独立页面模板 **`xiaoma-zqyl-import-dialog-page-mid`** 描述，列表页仅保留触发按钮。
+- 统计区 `ylDataCensus` 的 `:list` 由接口赋值，禁止手写示例指标。
+- 整块 `ylTips`（温馨提示等）：默认落在 `ylSearchForm` 与 `el-card.yl-tabs-table` **之间**的独立块；**禁止**默认放入表格卡与 `ylTableSimple` 同模块，详见 `xiaoma-zqyl-tips-mid`。
+
+## 页面骨架
+
+**中台管理列表（推荐骨架）**：`el-row.yl_manager_container` → **`ylManagerTitle`**（`have-expand`）→ `el-card` → 可选 **`el-tabs`** → 可选 **`ylSearchForm`** → **`ylMpsTable`**。
+
+```vue
+<template>
+  <el-row class="yl_manager_container">
+    <ylManagerTitle title="中台列表页标题" have-expand />
+    <el-card>
+      <el-tabs v-model="activeName" @tab-click="handleTabClick">
+        <el-tab-pane label="Tab一" name="tab1" />
+        <el-tab-pane label="Tab二" name="tab2" />
+      </el-tabs>
+      <yl-search-form
+        ref="searchFormRef"
+        :platformType="'mps'"
+        :searchParmas="currentSearchParams"
+        :isCard="false"
+        :load="false"
+        @searchDate="getList"
+        @resetDate="handleTabClick"
+      />
+      <ylMpsTable
+        ref="mpsTable"
+        :showIndex="true"
+        :listRegistrationNo="listRegistrationNo"
+        businessCode=""
+        auto-height
+        :hideSearch="true"
+        :height="tableHeight"
+        :initialFilter="initialFilter"
+        :queryParams="currentQueryParams"
+        :queryListUrl="queryListUrl"
+        filter-mode="every"
+        :showSelection="false"
+        :search="$refs"
+        searchRefsName="searchFormRef"
+      >
+        <template v-slot:statusField="scope">
+          <span>{{ scope.row.statusField || '--' }}</span>
+        </template>
+        <template v-slot:_operate="scope">
+          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
+        </template>
+      </ylMpsTable>
+    </el-card>
+  </el-row>
+</template>
+```
+
+- 中台页头用 **`ylManagerTitle`**，勿用 `ylTitle`；页头导出/新增等放 **`#btn`**。
+- **Tab**：切换时更新 `listRegistrationNo`、`queryListUrl`、`queryParams` / `searchParmas`，再 `getList()`。
+- **外部查询**：`yl-search-form` 的 **`ref="searchFormRef"`**；`ylMpsTable` 设 **`:hideSearch="true"`**，并写 **`:search="$refs"` `searchRefsName="searchFormRef"`**；中台 `hideSearch` 场景须在 `@searchDate` / `@resetDate` 中同步 `queryParams` 后 `this.$refs.mpsTable.getList()`。
+- **仅内置筛选**：可去掉 `ylSearchForm`，不传 `hideSearch`（或 `false`），由 `ylMpsTableFilter` 承担查询。
+- 行内操作插槽名为 **`_operate`**；自定义列插槽名与接口返回的 **`camelProperty`** 一致。
+## 中台专用组件 API
+
+## 组件来源（中台必读）
+
+| 组件 | 引入方式 |
+| --- | --- |
+| **`ylSearchForm`**（外部查询区） | 入口 `import ylSearchForm from 'zqyl-component-base/lib/ylSearchForm'` + `Vue.component('ylSearchForm', ylSearchForm)`；`platformType` 通常为 **`mps`** |
+| **`ylManagerTitle`** | 业务项目 **`@/components/ylManagerTitle.vue`**；若项目尚无该文件，需**手动拷贝**至项目 `components` 目录后再引用 |
+| **`ylMpsTable`** | 业务项目 **`@/components/ylMpsTable/`**（含 `ylMpsTableFilter`、`ylTableSettingDrawer` 等子目录）；若项目尚无，需**手动拷贝**整个目录至项目 `components` 后再引用 |
+
+> 中台**页面**页头默认 **`ylManagerTitle`**；**列表**主表格默认 **`ylMpsTable`**。勿默认使用 `ylTitle` / `ylTableSimple` 作页头或主列表；**仅当用户明确要求**指定组件名时，才可替换对应区块。
+
+> 典型列表页拼装顺序：页头 → `el-card` → 可选 Tab → 可选 **`ylSearchForm`（base）** → **`ylMpsTable`（项目 components）**。
+
+### ylManagerTitle
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| `title` | String | `''` | 左侧主标题文案 |
+| `haveExpand` | Boolean | `false` | 子应用/窄屏时显示菜单展开图标，点击调用父窗口 `packUpMenu` |
+| `showBack` | Boolean | `false` | 显示「返回」，点击触发 `go-back` |
+| `mode` | String | `''` | 非空时用具名插槽 `[mode]` 替代默认标题区 |
+
+| 插槽 | 说明 |
+| --- | --- |
+| `btn` | 右上角固定操作区（`operate_btn`，放导出/新增等 `el-button`） |
+| 默认插槽 | 标题行下方扩展区（次要操作或说明） |
+| `[mode]` | `mode` 有值时渲染的自定义标题区 |
+
+| 事件 | 说明 |
+| --- | --- |
+| `go-back` | `showBack` 时点击返回 |
+
+```js
+import ylManagerTitle from '@/components/ylManagerTitle.vue';
+
+export default {
+  components: { ylManagerTitle },
+};
+```
+
+### ylMpsTable
+
+内置 **ylMpsTableFilter**（可 `hideSearch` 关闭）、**动态列 `el-table`**、**分页 `Page`**、**列配置抽屉 `ylTableSettingDrawer`**。列元数据、操作符、列表数据均由组件按 **`listRegistrationNo`** 请求接口拉取；**列表 POST 地址由页面传入 `queryListUrl`**。
+
+| Prop | 类型 | 默认 | 说明 |
+| --- | --- | --- | --- |
+| `listRegistrationNo` | String | **必填** | 列表注册唯一标识（一个业务中的一个列表）|
+| `businessCode` | String | **必填** | 业务方唯一标识；无特殊要求可传 `''` |
+| `queryListUrl` | String | **必填** | 列表 POST 接口地址 |
+| `queryPropertyUrl` | String | 内置默认 | 列/筛选项元数据 GET 地址，一般不改 |
+| `queryParams` | Object | `{}` | 与列表 POST body 合并（Tab 状态、外部查询条件等） |
+| `hideSearch` | Boolean | `false` | `true` 时隐藏内置筛选，改由页内 **`ylSearchForm`** 承担查询 |
+| `autoHeight` | Boolean | `false` | 自动撑满父容器高度；需配合 `height`（写在组件上，透传到容器） |
+| `height` / `maxHeight` | String | — | 非 `autoHeight` 时作为 `el-table` 高度；`autoHeight` 时作为外层容器高度 |
+| `showSelection` | Boolean | `true` | 多选列 |
+| `showRadio` | Boolean | `false` | 单选列（与 `current-change` 配合） |
+| `reserveSelection` | Boolean | `false` | 多选是否跨页保留 |
+| `showIndex` | Boolean | `false` | 序号列 |
+| `hideSetting` | Boolean | `false` | `true` 隐藏表头列配置齿轮 |
+| `operateWidth` | String/Number | `''` | 操作列宽度，默认约 `120px` |
+| `columnsAttr` | Object | `{}` | 按列 `prop` 覆盖 `el-table-column` 属性（`minWidth`、`width` 等） |
+| `assignData` | String | `''` | 行数据在 `res.data.data[assignData]` 时指定字段名 |
+| `whetherPage` | Boolean | `true` | 是否展示底部分页 |
+| `filterMode` | String | `'all'` | 筛选组合：`'all'` / `'any'` / `'every'` |
+| `border` | Boolean | `true` | 表格纵向边框 |
+| `initialFilter` | Array | `[]` | 初始筛选；项含 `operator`、`property`（驼峰字段）、`type`（1=且/全部，2=或/任意）、`value` |
+
+未在 props 中声明的属性（如 `class`、`key`、**`search`**、**`searchRefsName`**）经 **`$attrs` 落到 `el-table`**。
+
+与外部 **`ylSearchForm`**（`ref="searchFormRef"`）联用时，除 **`hideSearch`** 外须在 `ylMpsTable` 上写 **`:search="$refs"` `searchRefsName="searchFormRef"`**（`searchRefsName` 与查询表单 `ref` 一致）。
+
+| 插槽 | 说明 |
+| --- | --- |
+| `header` | 表格上方扩展（不影响 `autoHeight` 计算时可放动态内容） |
+| `footer` | 表格与分页之间 |
+| `_operate` | 行内操作列，`{ row }`；无插槽则不渲染操作列 |
+| **列名插槽** | 与动态列 `prop`（`camelProperty`）同名，如 `v-slot:reportStatus="scope"`，自定义单元格 |
+
+| 事件 | 说明 |
+| --- | --- |
+| `selection-change` | 多选变化（`el-table` 透传） |
+| `row-click` 等 | 其它 `el-table` 事件经 `v-on="$listeners"` 透传 |
+| `current-change` | 单选行变化时 `(currentRow, oldCurrentRow)` |
+| `list-change` | 列表请求结束，`res.data` 或 `{}` |
+
+| ref 方法 | 说明 |
+| --- | --- |
+| `getList(pageData?)` | 拉取列表；分页 `@changePageSize` 传入 `{ pageCurrent, pageSize }` |
+| `updateTable()` | 重新拉列配置并 `getList()` |
+| `doLayout()` | 列变化后重算表格布局 |
+
+列表 POST body 含 `filterConditions`、`orderProperty`、`orderRule`、`listRegistrationNo`、`whetherPage`、`page`/`pageRow` 及 **`queryParams`**。内置筛选条件由 `ylMpsTableFilter` 维护；使用外部 `ylSearchForm` 时，在页面 **`getList`** 里把查询项写入 **`queryParams`** 再调用 `this.$refs.mpsTable.getList()`。
+
+```js
+import 'zqyl-component-base/lib/theme-chalk/component.css';
+import ylSearchForm from 'zqyl-component-base/lib/ylSearchForm';
+import ylManagerTitle from '@/components/ylManagerTitle.vue';
+import ylMpsTable from '@/components/ylMpsTable/index.vue';
+Vue.component('ylSearchForm', ylSearchForm);
+Vue.component('ylManagerTitle', ylManagerTitle);
+Vue.component('ylMpsTable', ylMpsTable);
+```
+
+
+## script 最小示例（联动）
+
+```js
+export default {
+  data() {
+    return {
+      activeName: 'tab1',
+      listRegistrationNo: '', // 列表注册号，随 Tab 切换
+      queryListUrl: '', // 列表 POST 地址，随 Tab 切换
+      queryParams: {}, // 与列表 POST 合并；多 Tab 可用 { tab1: {}, tab2: {} }
+      initialFilter: [],
+      tableHeight: 'calc(100vh - 280px)',
+      searchParamsConfig: { /* 各 Tab 的 searchParmas */ },
+    };
+  },
+  methods: {
+    handleTabClick() {
+      // 重置当前 Tab 的 searchParmas / queryParams
+      this.getList();
+    },
+    getList() {
+      // 将 ylSearchForm.request.options 同步到 queryParams
+      this.$refs.mpsTable && this.$refs.mpsTable.getList();
+    },
+  },
+};
+```
+
+## 注意事项
+
+- 只生成与用户平台一致的骨架（当前为 **中台**）。
+- **跳转类操作**（三端）：优先 `ylButton`，满足不了再用 `el-link`；**落位以需求为准**，常用参考见上文「跳转类操作」— 中台 `ylManagerTitle` `#btn`，前台/后台表格卡标题行 `text-right` 靠左。
+- 若用户**明确指定**使用前台或后台的列表页，不要使用 `ylManagerTitle` 和 `ylMpsTable`，按本 skills 前台/后台章节生成。

package/src/zqyl-skills/module-help.csv

@@ -0,0 +1,15 @@
+module,skill,display-name,menu-code,description,action,args,phase,preceded-by,followed-by,required,output-location,outputs
+ZQYL Spec,_meta,,,,,,,,,false,,
+ZQYL Spec,xiaoma-zqyl-ui-spec,Yunlian UI Spec,ZUI,"Entry point for every ZQYL Vue2 page task: decides platform (backend/front/mid) and page type, then routes to the page-template and component skills. Component skills (xiaoma-zqyl-<component>-<platform>) are read by the page skills, not picked from this menu.",,,anytime,,,false,,
+ZQYL Spec,xiaoma-zqyl-list-page-backend,List Page (backend),ZLB,Backend list page skeleton: ylTitle + ylSearchForm + ylTableSimple plus stat/tab/minimal-query variants.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-list-page-mid,List Page (mid),ZLM,Mid-platform list page skeleton: ylManagerTitle + ylMpsTable plus variant scenarios.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-list-page-front,List Page (front),ZLF,Front portal list page skeleton: ylTitle + ylSearchForm + ylTableSimple plus variant scenarios.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-form-detail-page-backend,Form Detail Page (backend),ZFB,Backend create/edit/view/approve page skeleton: ylFormEditor / ylFormView field blocks plus footer actions.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-form-detail-page-mid,Form Detail Page (mid),ZFM,Mid-platform create/edit/view/approve page skeleton: ylFormEditor / ylFormView field blocks plus footer actions.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-form-detail-page-front,Form Detail Page (front),ZFF,Front portal create/edit/view/approve page skeleton: ylFormEditor / ylFormView field blocks plus footer actions.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-feedback-page-backend,Feedback Page (backend),ZKB,Backend result / empty-state / error page skeleton.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-feedback-page-mid,Feedback Page (mid),ZKM,Mid-platform result / empty-state / error page skeleton.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-feedback-page-front,Feedback Page (front),ZKF,Front portal result / empty-state / error page skeleton.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-import-dialog-page-backend,Import Dialog (backend),ZIB,Backend batch-import dialog skeleton: template download + upload + result feedback.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-import-dialog-page-mid,Import Dialog (mid),ZIM,Mid-platform batch-import dialog skeleton: template download + upload + result feedback.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,
+ZQYL Spec,xiaoma-zqyl-import-dialog-page-front,Import Dialog (front),ZIF,Front portal batch-import dialog skeleton: template download + upload + result feedback.,,,4-implementation,xiaoma-zqyl-ui-spec,,false,,

package/src/zqyl-skills/module.yaml

@@ -0,0 +1,38 @@
+code: zqyl
+name: "ZQYL Spec (中企云链前端规范)"
+description: "Yunlian UI spec skills for ZQYL Vue2 projects: one interaction/visual spec entry point plus page-template and component skills for the backend / front / mid platforms"
+default_selected: false # Org-specific frontend spec pack, opt-in
+
+# Variables from Core Config inserted:
+## user_name
+## communication_language
+## document_output_language
+## output_folder
+
+# All three platform packs install together (96 skills), so the entry skill has to
+# know which one this repo targets. Without a recorded answer an agent can only guess
+# from the repo name — and the strongest lexical signal is misleading (a repo called
+# zqyl-manager collides with the mid-only skill xiaoma-zqyl-manager-title-mid).
+# xiaoma-zqyl-ui-spec reads this key first, before any name-based inference.
+platform:
+  prompt:
+    - "Which ZQYL platform does this repo target?"
+    - "Pins page/component skill selection; pick 'all' for a repo that spans platforms."
+  default: "all"
+  result: "{value}"
+  single-select:
+    - value: "backend"
+      label: "backend 后台管理端 (zqyl-manager 等; ylTitle + ylTableSimple)"
+    - value: "mid"
+      label: "mid 中台 (mps-main 等; ylManagerTitle + ylMpsTable)"
+    - value: "front"
+      label: "front 前台门户 (zqyl-crclopen 等; ylTitle + ylTableSimple)"
+    - value: "all"
+      label: "all 不固定 — 每次由 xiaoma-zqyl-ui-spec 判定"
+
+# Note: this module ships reference-only skills (specs, page skeletons, component
+# APIs). It generates no artifacts of its own — code lands wherever the user's
+# Vue2 project already keeps pages — so it declares no output folder and no
+# `directories:` to create at install time.
+
+# No agents: these are reference skills consumed by whichever agent is active.