@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

package/src/zqyl-skills/backend/components/xiaoma-zqyl-data-census-backend/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: xiaoma-zqyl-data-census-backend
+description: 后台指标摘要卡片（描述 + 数值）的 Vue2 实现规范（ylDataCensus）。在用户提及 ylDataCensus、yl-data-census、数据统计、指标摘要、仪表盘统计区，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the data-census (ylDataCensus) component on a ZQYL backend page.
+---
+
+# 数据统计（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`dataCensus`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 Vue2 + Element UI + zqyl-component-base 代码片段与参数建议。
+- 不改变业务行为，仅替换/补齐结构与交互规范。
+
+## 组件注册（必读）
+
+- `zqyl-component-base` 公共组件在**项目入口**按组件名逐个 `import 'zqyl-component-base/lib/<ComponentName>'` + `Vue.component` 注册；样式在入口引入 `component.css`。
+- **禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)`；页面模板直接使用 `<yl-*>`，**勿**单页重复 import。
+- 生成前先检查入口是否已注册本页用到的组件；缺失则仅在入口补注册。
+
+## 输出要求
+- 回答用户时：根据用户输入与页面场景，只输出**一段**最符合需求的 Vue 代码（可直接粘贴），并简要说明关键 props/注意事项。
+- 不要在一次回答中罗列多种候选实现；不要输出“变体 A/B/C/D”或“方案一/方案二”等对比式内容。
+- 本技能文档「示例」章节含多种参考写法，仅供你内部分析选型；**不得**把多个示例原样全部贴给用户。
+- 示例代码必须可直接粘贴使用（Vue2 单文件组件片段）。
+
+## 数据与接口（禁止 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()`。
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skills 并按规则产出代码：
+- 列表页/详情页顶部需要展示若干**指标摘要**（描述 + 数值），无复杂交互。
+- 数据面板、仪表盘统计区、待办/状态数量概览。
+- 用户提到「yl-data-census」、「ylDataCensus」、「数据统计」卡片时。
+
+不适用：趋势图、对比图、可钻取分析 → 使用 ECharts 或业务定制模块。
+
+## API（ylDataCensus）
+
+> 标签：`<yl-data-census>` / `ylDataCensus`；须在入口 `import ylDataCensus from 'zqyl-component-base/lib/ylDataCensus'` + `Vue.component('ylDataCensus', ylDataCensus)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `list` | Array | `null` | 指标列表（**必填**，勿传空数组） |
+| `title` | Boolean | `false` | 是否显示标题区（为 `true` 时顶部展示「数据统计」） |
+
+### `list[]` 项字段
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `describe` | String | 指标描述文案 |
+| `data` | String \| Number | 指标值；金额等建议在业务层格式化后传入 |
+
+### Events / Slots / Methods
+
+无对外事件、插槽与方法（以组件库为准）。
+
+### 样式与布局（以组件库为准）
+
+- 容器：`el-card` + Element 栅格；列宽约 `24 / list.length`。
+- 数据项之间使用左边框分隔；`title` 为 true 时标题约 14px bold，下边框 `1px solid #F2F2F2`。
+- 描述约 14px / `#909399`；数值约 24px bold / `#303133`。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（无标题）
+```vue
+<yl-data-census :list="dataList" />
+```
+
+// dataList: 由接口赋值，项为 { describe, data }
+
+### 带标题
+```vue
+<yl-data-census :list="dataList" :title="true" />
+```
+
+### 金额类指标（字符串格式化）
+```vue
+<yl-data-census :list="censusList" />
+```
+
+// censusList: 由接口赋值，金额类 data 可为格式化字符串
+
+## 注意事项
+- `list` 由接口或 `computed` 赋值；**禁止**手写示例指标；接口未就绪时 `list: []`，待 `created`/`mounted` 请求后更新。
+- 同一页面多处统计卡时，保持 `list` 长度一致，避免栅格列宽跳动。
+- `title` 为 `true` 时展示内置标题「数据统计」；列表页概览常用无标题或带标题两种。
+- 金额、百分比等在业务层格式化为字符串再传入；组件仅负责展示，无点击事件。

package/src/zqyl-skills/backend/components/xiaoma-zqyl-dialog-backend/SKILL.md

@@ -0,0 +1,205 @@
+---
+name: xiaoma-zqyl-dialog-backend
+description: 后台弹窗（确认/取消、表格选择、表单编辑、关闭前确认）的 Vue2 实现规范（ylDialog）。在用户提及 ylDialog、yl-dialog、弹窗、对话框、表格选择弹窗，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the dialog (ylDialog) component on a ZQYL backend page.
+---
+
+# 弹窗（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`dialog`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 Vue2 + Element UI + zqyl-component-base 代码片段与参数建议。
+- 不改变业务行为，仅替换/补齐结构与交互规范。
+
+## 组件注册（必读）
+
+- `zqyl-component-base` 公共组件在**项目入口**按组件名逐个 `import 'zqyl-component-base/lib/<ComponentName>'` + `Vue.component` 注册；样式在入口引入 `component.css`。
+- **禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)`；页面模板直接使用 `<yl-*>`，**勿**单页重复 import。
+- 生成前先检查入口是否已注册本页用到的组件；缺失则仅在入口补注册。
+
+## 输出要求
+- 回答用户时：根据用户输入与页面场景，只输出**一段**最符合需求的 Vue 代码（可直接粘贴），并简要说明关键 props/注意事项。
+- 不要在一次回答中罗列多种候选实现；不要输出“变体 A/B/C/D”或“方案一/方案二”等对比式内容。
+- 本技能文档「示例」章节含多种参考写法，仅供你内部分析选型；**不得**把多个示例原样全部贴给用户。
+- 示例代码必须可直接粘贴使用（Vue2 单文件组件片段）。
+
+## 数据与接口（禁止 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()`。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skills 并按规则产出代码：
+- 需要弹窗承载内容区 + 底部按钮（确认/取消/关闭）。
+- 表格选择（单选/多选），且未选中时底部主操作需置灰。
+- 弹窗内表单编辑（建议两列以内）、或需在关闭前二次确认。
+- 弹窗内需要放查询条件、标签切换、合计等组合内容。
+- 弹窗内表格展示（含附件列表、选择列表、只读明细等）。
+
+约束：只要是弹窗场景，一律使用 `ylDialog` / `<yl-dialog>`（不要直接使用 Element `el-dialog`）。
+约束：弹窗内表格遵循 **`xiaoma-zqyl-table-simple-backend`** 全页表格优先级：优先 `ylTableSimple`，勿用 `el-table`；行内操作用 `attr.type: 'handle'`。
+
+## API（ylDialog）
+
+> 标签：`<yl-dialog>` / `ylDialog`；须在入口 `import ylDialog from 'zqyl-component-base/lib/ylDialog'` + `Vue.component('ylDialog', ylDialog)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+- `visible: boolean` 是否显示；建议使用 `:visible.sync`
+- `attributes: object` 透传给 `el-dialog`（与 `$attrs` 合并），如 `width` / `title` / `closeOnClickModal` 等
+- `dialogTitleDate: object|null` 自定义标题区；常用字段：`type` / `title` / `icon` / `color`
+- `showClose: boolean` 是否显示关闭按钮，默认 `true`
+- `beforeClose: Function` 关闭回调；若传入，关闭时仅调用该函数，不会自动同步 `visible`
+- `appendToBody: boolean` 同 `el-dialog`
+- `botSpace: boolean` 是否保留底部间距，默认 `true`
+
+### Events
+- `update:visible`（`.sync` 用于可见性同步）
+- `open` / `opened` / `close` / `closed`（透传自 `el-dialog`）
+
+### Slots
+- `default` 主体内容
+- `subTitle` 标题行内副标题（`#subTitle` 插槽，内容用公共 class `sub-title` 包裹）
+- `footer` 底部操作区
+
+### 基础对话框
+```vue
+<yl-dialog
+  :visible.sync="dialogVisible"
+  :attributes="{ width: '600px', title: '标题', closeOnClickModal: false }"
+>
+  <div>内容</div>
+  <div slot="footer" class="text-right">
+    <el-button size="small" @click="dialogVisible = false">取消</el-button>
+    <el-button size="small" type="primary" @click="dialogVisible = false">确定</el-button>
+  </div>
+</yl-dialog>
+```
+
+### 状态标题 / 隐藏标题
+```vue
+<!-- success / warning / error -->
+<yl-dialog
+  :visible.sync="visible"
+  :dialog-title-date="{ type: 'success', title: '操作成功' }"
+  :attributes="{ width: '600px' }"
+/>
+
+<!-- type: hidden 隐藏原生标题栏 -->
+<yl-dialog :dialog-title-date="{ type: 'hidden' }" :attributes="{ width: '600px' }" />
+```
+
+### 副标题（subTitle 插槽）
+```vue
+<yl-dialog
+  :visible.sync="visible"
+  :attributes="{ title: '标题', width: '600px' }"
+>
+  <template slot="subTitle">
+    <div class="sub-title">这是对话框的副标题</div>
+  </template>
+  <div>内容</div>
+</yl-dialog>
+```
+
+- 副标题须用 `#subTitle` 插槽 + 公共 class `sub-title`（组件库已定义样式，勿自定义 class）。
+
+### 只读表格弹窗（无底部操作按钮）
+```vue
+<yl-dialog :visible.sync="visible" :attributes="{ title: '查看明细', width: '900px' }">
+  <yl-table-simple :data="tableData" :page="true" />
+</yl-dialog>
+```
+
+- 只读查看时不使用 `#footer` 插槽；关闭依赖标题栏 × 或 `visible.sync`；此时 `el-dialog__body` 保留 **24px** 底边距。
+
+### 表格选择弹窗（单选 / 多选，未选时按钮置灰）
+```vue
+<yl-dialog :visible.sync="visible" :attributes="{ title: '选择企业', width: '900px' }">
+  <yl-table-simple :data="tableData" :page="true" @changeRadioData="onRadio" />
+  <div slot="footer" class="text-right">
+    <el-button size="small" @click="visible = false">取消</el-button>
+    <el-button size="small" type="primary" :disabled="!selectedRow" @click="confirm">确定</el-button>
+  </div>
+</yl-dialog>
+```
+
+### 关闭前确认（beforeClose）
+```vue
+<yl-dialog
+  :visible.sync="visible"
+  :attributes="{ title: '编辑', width: '600px' }"
+  :before-close="handleBeforeClose"
+/>
+```
+
+```js
+// handleBeforeClose 内需自行 visible = false；不会自动 sync
+handleBeforeClose() {
+  this.$confirm('确认关闭？').then(() => { this.visible = false });
+},
+```
+
+### 附件列表弹窗（ylTableSimple + handle）
+```vue
+<yl-dialog :visible.sync="visible" :attributes="{ title: '附件标题', width: '900px' }">
+  <yl-table-simple :data="attachTableData" :page="false" />
+</yl-dialog>
+```
+
+```js
+attachTableData: {
+  loadData: [],
+  attributes: { height: '360px' },
+  header: [
+    { prop: 'name', label: '文件名称', minWidth: 240, tooltip: true },
+    {
+      label: '操作',
+      width: 200,
+      attr: {
+        fixed: 'right',
+        type: 'handle',
+        handle: [
+          { text: '下载', type: 'primary', callback: (scope) => this.onDownload(scope.row) },
+          { text: '删除', callback: (scope) => this.onRemove(scope.row) },
+        ],
+      },
+    },
+  ],
+},
+```
+
+### 多层级弹窗
+```vue
+<yl-dialog :visible.sync="layer1" :attributes="{ title: '一级', width: '600px' }">
+  <el-button @click="layer2 = true">打开二级</el-button>
+</yl-dialog>
+<yl-dialog :visible.sync="layer2" :append-to-body="true" :attributes="{ title: '二级', width: '520px' }" />
+```
+
+## 注意事项
+- 高度：内容区 **200px ~ 550px**（`dialogMinHeight` / `dialogMaxHeight`）；非 `ylDialog` 内置限制，须在内容区或表格 `attributes.height` 中自行约束。
+- 宽度优先 **600px / 900px / 1200px**；`attributes` 与标签属性合并透传给 `el-dialog`。
+- `beforeClose` 传入后关闭不会自动 `update:visible`，须在回调或业务逻辑中手动置 `visible` 为 false。
+- `dialogTitleDate.type`：`success` / `warning` / `error` / `none` / `hidden`（隐藏原生标题栏）。
+- 弹窗内表格：遵循全页 **`ylTableSimple` 优先**规则；须设置 `data.attributes.height` 使表格体在内容区（200px ~ 550px）内滚动。
+- 表格弹窗：只读查看时不附带行内操作、**不展示底部操作按钮**（无 `#footer`）；无 footer 时 `el-dialog__body` 须保留 **24px** 底边距；单选/多选未选中时底部主操作置灰；分页与列表页 `ylTableSimple` 一致（`:page="true"`，总数由接口返回）。
+- 说明信息：标题右侧用 `subTitle` 插槽 + `<div class="sub-title">`；表格相关信息放表格上方；次要提示放弹窗底部。
+- 底部次要信息布局：当需要在弹窗底部展示次要提示时，放在 `footer` 区域**按钮左侧**（左文右按钮）。可用 `el-row` + 两列 `el-col(:span="12")`，左列 `text-left textMinor`，右列 `text-right` 放操作按钮。
+- 弹窗表单：不建议三列；内容区高度 200px ~ 550px，超出滚动。
+- 滚动：一行查询时条件/表头固定，仅表格区域滚动；多行查询时条件与表格同滚；弹窗内表格分页展示与列表页一致。
+- 组合能力：弹窗内可放 `ylSearchForm`、合计行、多 `el-tabs`。
+- 多层级：二级弹窗建议 `appendToBody`。

package/src/zqyl-skills/backend/components/xiaoma-zqyl-drawer-backend/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: xiaoma-zqyl-drawer-backend
+description: 后台抽屉浮层（详情、表格选择、较大操作区）的 Element UI 实现规范（el-drawer）。在用户提及抽屉、Drawer、el-drawer、侧滑详情、表格选择抽屉，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the drawer (el-drawer) component on a ZQYL backend page.
+---
+
+# 抽屉（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`drawer`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 Vue2 + Element UI + zqyl-component-base 代码片段与参数建议。
+- 不改变业务行为，仅替换/补齐结构与交互规范。
+
+## 组件注册（必读）
+
+- `zqyl-component-base` 公共组件在**项目入口**按组件名逐个 `import 'zqyl-component-base/lib/<ComponentName>'` + `Vue.component` 注册；样式在入口引入 `component.css`。
+- **禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)`；页面模板直接使用 `<yl-*>`，**勿**单页重复 import。
+- 生成前先检查入口是否已注册本页用到的组件；缺失则仅在入口补注册。
+
+## 输出要求
+- 回答用户时：根据用户输入与页面场景，只输出**一段**最符合需求的 Vue 代码（可直接粘贴），并简要说明关键 props/注意事项。
+- 不要在一次回答中罗列多种候选实现；不要输出“变体 A/B/C/D”或“方案一/方案二”等对比式内容。
+- 本技能文档「示例」章节含多种参考写法，仅供你内部分析选型；**不得**把多个示例原样全部贴给用户。
+- 示例代码必须可直接粘贴使用（Vue2 单文件组件片段）。
+
+## 数据与接口（禁止 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()`。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+## 何时使用
+
+- 详情展示、中等复杂度表单/表格选择，需保留主页面上下文。
+- 比弹窗需要更大纵向空间，但不必整页跳转。
+
+不适用：简单确认 → `MessageBox`；标准弹窗表单 → `ylDialog`。
+
+## 代码示例
+
+### 详情抽屉
+```vue
+<el-drawer title="合同详情" :visible.sync="visible" direction="rtl" size="640px" :append-to-body="true">
+  <div class="drawer-panel">
+    <div class="drawer-body">
+      <yl-form-view :form-data="formData" :req-data="reqData" layout="doubleRow" />
+    </div>
+    <div class="drawer-footer text-right">
+      <el-button size="small" @click="visible = false">关闭</el-button>
+      <el-button size="small" type="primary">保存</el-button>
+    </div>
+  </div>
+</el-drawer>
+```
+
+### 表格选择抽屉
+```vue
+<el-drawer title="选择合同" :visible.sync="visible" direction="rtl" size="900px" :append-to-body="true">
+  <div class="drawer-panel">
+    <div class="drawer-body">
+      <yl-search-form :search-parmas="searchParmas" :load="false" :is-card="false" />
+      <yl-table-simple :data="tableData" :page="true" @changeRadioData="onRadio" />
+    </div>
+    <div class="drawer-footer text-right">
+      <el-button size="small" @click="visible = false">取消</el-button>
+      <el-button size="small" type="primary" :disabled="!selectedRow" @click="confirm">确定选择</el-button>
+    </div>
+  </div>
+</el-drawer>
+```
+
+```js
+// tableData 须设置 attributes.height，仅表格体滚动
+tableData: {
+  loadData: [],
+  attributes: { height: '420px' },
+  header: [
+    { type: 'radio', width: 48 },
+    { prop: 'companyName', label: '企业名称', tooltip: true },
+  ],
+},
+```
+
+## 注意事项
+- 标题：`#303133`、**加粗**（`font-weight: 700`），标题区距下方内容 **24px**（`.el-drawer__header { margin-bottom: 24px }`；默认 `title` 属性对应 `header > span[role="heading"]`）。
+- 布局：`drawer-panel` 纵向 flex；`drawer-body` 滚动、`drawer-footer` 固定底栏。
+- 常用宽度 640px / 900px；`append-to-body` 避免被 fixed 底栏遮挡。
+- 抽屉内表格优先 **`ylTableSimple`**，须设置 `data.attributes.height`；单选未选中时底部主操作置灰。

package/src/zqyl-skills/backend/components/xiaoma-zqyl-empty-page-backend/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: xiaoma-zqyl-empty-page-backend
+description: 后台空状态/异常页插画与文案（无数据、404、网络异常、权限不足等 type 预设）的 Vue2 实现规范（ylEmptyPage）。在用户提及 ylEmptyPage、yl-empty-page、空页面、空状态、暂无数据、404、网络异常、无权限、异常页，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the empty-page (ylEmptyPage) component on a ZQYL backend page.
+---
+
+# 空页面（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`emptyPage`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 Vue2 + Element UI + zqyl-component-base 代码片段与参数建议。
+- 不改变业务行为，仅替换/补齐结构与交互规范。
+
+## 组件注册（必读）
+
+- `zqyl-component-base` 公共组件在**项目入口**按组件名逐个 `import 'zqyl-component-base/lib/<ComponentName>'` + `Vue.component` 注册；样式在入口引入 `component.css`。
+- **禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)`；页面模板直接使用 `<yl-*>`，**勿**单页重复 import。
+- 生成前先检查入口是否已注册本页用到的组件；缺失则仅在入口补注册。
+
+## 输出要求
+- 回答用户时：根据用户输入与页面场景，只输出**一段**最符合需求的 Vue 代码（可直接粘贴），并简要说明关键 props/注意事项。
+- 不要在一次回答中罗列多种候选实现；不要输出“变体 A/B/C/D”或“方案一/方案二”等对比式内容。
+- 本技能文档「示例」章节含多种参考写法，仅供你内部分析选型；**不得**把多个示例原样全部贴给用户。
+- 示例代码必须可直接粘贴使用（Vue2 单文件组件片段）。
+
+## 数据与接口（禁止 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()`。
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skills 并按规则产出代码：
+- 整页或内容区需展示**无数据、404、网络异常、登录异常、无权限**等空状态/异常态。
+- 列表/搜索无结果、弹窗外层整页异常、反馈页数据异常等需插画 + 文案的场景。
+- 用户提到「yl-empty-page」、「ylEmptyPage」、「空页面」、「暂无数据页」、「404 页」时。
+
+不适用：
+- 表格内无数据占位 → 使用 `ylTableSimple` 空数据默认态（保留表头）。
+- 轻量 Toast 反馈 → 使用 `Message`；可关闭的说明条 → 使用 `ylTips`。
+- 操作成功/失败结果页（居中图标 + 按钮）→ 自定义布局或反馈页模板，非本组件。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 通用无数据：`type: noData`；404：`notFoundRequet`；网络断开/超时：`networkBreak` / `networkTimeout`。
+- 云租业务：使用 `yz` 前缀类型（如 `yzNodata`、`yzNoAccessPower`）。
+- 覆盖默认文案：传 `text`；云租部分类型需 `:is-position-img="false"`。
+
+## API（ylEmptyPage）
+
+> 标签：`<yl-empty-page>` / `ylEmptyPage`；须在入口 `import ylEmptyPage from 'zqyl-component-base/lib/ylEmptyPage'` + `Vue.component('ylEmptyPage', ylEmptyPage)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `type` | String | `notFoundRequet` | 空状态类型，见下表 |
+| `text` | String | `''` | 自定义提示文案；为空时使用该 type 内置文案 |
+| `isPositionImg` / `is-position-img` | Boolean | `true` | `true` 文案在插画内；`false` 文案在插画下方 |
+| `width` | Number | `null` | 图片宽度（组件内暂不启用） |
+
+### type 预设值
+
+| type | 场景 |
+| --- | --- |
+| `noData` | 无数据 |
+| `notFoundRequet` | 404 页面 |
+| `networkBreak` | 网络断开 |
+| `networkTimeout` | 网络超时 |
+| `loginException` | 登录异常 |
+| `searchNone` | 搜索无结果 |
+| `noBusinessCard` / `noMessage` / `noPoints` / `noShopping` | 其他业务空态 |
+| `yzNotFoundRequet` / `yzNodata` / `yzNoAccessPower` / `yzNoOperationPower` / `yzSigningFailed` | 云租专用 |
+
+### Slots / Events
+
+无插槽、无事件；操作按钮由外层页面自行布局。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法
+```vue
+<yl-empty-page type="noData" />
+```
+
+### 常用类型
+```vue
+<yl-empty-page type="noData" />
+<yl-empty-page type="notFoundRequet" />
+<yl-empty-page type="networkBreak" />
+<yl-empty-page type="loginException" />
+<yl-empty-page type="networkTimeout" />
+```
+
+### 自定义文案
+```vue
+<yl-empty-page
+  type="noData"
+  text="当前列表暂无数据，请稍后再试"
+/>
+```
+
+### 文字位置
+```vue
+<!-- 文案在插画下方 -->
+<yl-empty-page type="noData" :is-position-img="false" />
+<!-- 文案在插画内部（默认） -->
+<yl-empty-page type="noData" :is-position-img="true" />
+```
+
+### 云租类型示例
+```vue
+<yl-empty-page type="yzNodata" :is-position-img="false" />
+<yl-empty-page type="yzNoAccessPower" :is-position-img="false" />
+```
+
+## 注意事项
+- 通过 **`type`** 选择预设插画与默认文案；需覆盖文案时传 **`text`**。
+- **`isPositionImg: false`** 时文案在插画下方；云租部分类型（如 `yzNodata`）常用 `false`。
+- 404 类型键名为 **`notFoundRequet`**（历史拼写，勿写成 `notFoundRequest`）。
+- 组件无插槽/事件；返回首页等操作按钮放在组件**外层**，与本组件并列布局。