@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

package/src/zqyl-skills/front/components/xiaoma-zqyl-collapse-front/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: xiaoma-zqyl-collapse-front
+description: 前台可折叠内容区块（标题行展开/收起、header 右侧操作区、content 内容区）的 Vue2 实现规范（ylCollapse）。在用户提及 ylCollapse、yl-collapse、折叠、折叠面板、可收起区块、展开收起，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the collapse (ylCollapse) component on a ZQYL front page.
+---
+
+# 折叠（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`collapse`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 详情/表单页需要将**较长内容分块**，且支持用户展开/收起。
+- 卡片或模块内仅需**单行标题 + 可折叠正文**，标题右侧可放轻量操作。
+- 次要信息默认折叠、关键信息默认展开（通过 `isCollapse` 控制）。
+- 用户提到「yl-collapse」、「ylCollapse」、「折叠组件」、「展开收起」时。
+
+不适用：
+- 需模块卡片、副标题、底部 `footer`、扩展区过渡动画 → 使用 **`ylModule`**。
+- Element 多面板手风琴 → 使用 `el-collapse` / `el-collapse-item`。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 默认折叠展示：`isCollapse: true`（默认），仅传 `title` + `#content`。
+- 默认展开：`:is-collapse="false"`。
+- 标题行右侧操作：`#header` 放按钮/链接，与标题同一行右对齐。
+- 父级受控：`:is-collapse` + `@update:collapse` 同步状态。
+
+## API（ylCollapse）
+
+> 标签：`<yl-collapse>` / `ylCollapse`；须在入口 `import ylCollapse from 'zqyl-component-base/lib/ylCollapse'` + `Vue.component('ylCollapse', ylCollapse)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `title` | String | `''` | 折叠区标题（左侧，可点击切换） |
+| `isCollapse` / `is-collapse` | Boolean | `true` | 是否处于折叠（收起）状态 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `update:collapse` | 展开/收起状态变化时触发 | `Boolean`（当前是否折叠） |
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `header` | 标题行右侧自定义内容（右对齐） |
+| `content` | 折叠内容区；无此插槽时不渲染内容区 |
+
+### 样式与布局（以组件库为准）
+
+- 标题：14px bold / `#303133`；图标与标题间距 6px，点击可切换。
+- `header` 插槽：14px / `#606266`，标题行右侧右对齐。
+- 内容区：`margin-top: 24px`；展开时箭头旋转 180°。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（默认折叠）
+```vue
+<yl-collapse title="折叠标题">
+  <template #content>
+    <div>折叠组件的内容区域，可以包含任意业务内容。</div>
+  </template>
+</yl-collapse>
+```
+
+### 卡片内默认展开
+```vue
+<el-card shadow="never">
+  <yl-collapse title="默认展开的折叠区域" :is-collapse="false">
+    <template #content>
+      <div>该折叠区域初始为展开状态。</div>
+    </template>
+  </yl-collapse>
+</el-card>
+```
+
+### 自定义头部右侧（header 插槽）
+```vue
+<yl-collapse title="自定义头部内容">
+  <template #header>
+    <el-button type="primary" size="small">提交</el-button>
+  </template>
+  <template #content>
+    <div>折叠组件的内容区域。</div>
+  </template>
+</yl-collapse>
+```
+
+### 受控折叠状态
+```vue
+<yl-collapse
+  title="受控折叠"
+  :is-collapse="panelCollapsed"
+  @update:collapse="panelCollapsed = $event"
+>
+  <template #content>
+    <div>内容区</div>
+  </template>
+</yl-collapse>
+```
+
+## 注意事项
+- 内容必须放在 **`#content`** 插槽；无插槽时仅展示标题行。
+- 默认 **`isCollapse: true`**（折叠）；需首屏展示正文时设 **`:is-collapse="false"`**。
+- 标题行右侧操作用 **`#header`**；勿与标题文案混写在 `title` 中。
+- 父级需同步状态时监听 **`@update:collapse`**；与 `ylModule` 的扩展区区分使用场景。
+- **`el-card` 内顶层为 `yl-collapse` 时**：**不要**给 `el-card` 加 `el-card-padding-bottom0`（该 class 仅用于卡片内**直接**放置 `ylFormEditor` / `ylFormView`）。

package/src/zqyl-skills/front/components/xiaoma-zqyl-container-foot-front/SKILL.md

@@ -0,0 +1,192 @@
+---
+name: xiaoma-zqyl-container-foot-front
+description: 前台固定在页面底部的操作区（title/left/center 插槽、keepBlank 占位）的 Vue2 实现规范（ylContainerFoot）。在用户提及 ylContainerFoot、yl-container-foot、页面底部、底栏、页脚、提交栏、保存取消，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the container-foot (ylContainerFoot) component on a ZQYL front page.
+---
+
+# 页面底部（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`containerFoot`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 表单/详情/分步页需要在**页面底部固定**展示操作按钮（提交、保存、取消等）。
+- 底部需同时展示辅助说明（如 Ukey 提示）与主操作按钮。
+- 底部需展示协议勾选、说明文案与操作按钮。
+- 用户提到「yl-container-foot」、「ylContainerFoot」、「页面底部」、「底栏」、「页脚」时。
+
+不适用：
+- 弹窗内底部按钮 → 使用 `ylDialog` 默认 footer 或 `#footer` 插槽。
+- 卡片内局部操作区（非全页固定底栏）→ 使用 `el-card` 内按钮组或表单行内按钮。
+- **表单详情页默认操作** → 使用 **`ylTitle` 右侧插槽**（需求未说明按钮位置时**不要**用本组件）。
+
+### 操作按钮居中（强制）
+
+`ylContainerFoot` 底栏**主操作按钮默认居中**，须通过 **`#center` 插槽**渲染（组件内 `.foot-content-center { text-align: center }`）。
+
+| 规则 | 说明 |
+| --- | --- |
+| **必须** | 保存/取消/提交/暂存等操作按钮 → **`#center` 插槽** |
+| **必须** | 协议勾选、Ukey 提示等辅助文案 → **`#left` 插槽**（或两行场景用 `#title`） |
+| **禁止** | 默认插槽 + `display:flex; justify-content:space-between` 将按钮顶到右侧（会破坏居中） |
+| **禁止** | 在 `#left` 内放主操作按钮（除非原型明确要求且与规范方确认） |
+
+仅按钮、无左侧文案时：只用 **`#center`**，不要包一层自定义 flex。
+
+### 选型优先级（强制）
+
+1. **有具体说明或原型图/截图** → 以需求/原型为准：按底栏**实际行数、文案位置**选用插槽；**按钮仍默认放 `#center` 居中**（除非原型明确写「按钮右对齐」）。
+2. **无具体说明、无原型** → 按本 skill 下方「默认插槽选型」与「方案选择」执行，**不得**自行臆造 `#title` 或默认插槽 flex。
+
+判据示例：原型底栏**同一行**左勾选 + 按钮 → **`#left` + `#center`**（按钮居中），**勿**用 `#title`、**勿**用默认插槽 flex；原型**明确两行**（上行协议、下行 Ukey + 按钮）→ 才用 `#title` + `#left` + `#center`。
+
+### 默认插槽选型（无原型/无具体说明时）
+
+| 场景 | 插槽组合 | 说明 |
+| --- | --- | --- |
+| **单行**：左侧协议勾选 + 操作按钮（常见签约底栏） | **`#left` + `#center`** | 勾选/协议放 `#left`，**按钮放 `#center` 居中**；**禁止** `#title`、**禁止**默认插槽 flex |
+| 上行协议/说明 + 下行 Ukey 提示 + 按钮 | `#title` + `#left` + `#center` | 仅原型明确两行时才用 `#title`；按钮仍放 `#center` |
+| 左侧 Ukey/说明 + 操作按钮 | `#left` + `#center` | 无协议顶栏 |
+| 仅按钮 | **`#center`** | 取消/保存/提交等居中展示 |
+
+> 上表为**默认**；有原型/需求具体描述时**以原型为准**，但**按钮默认仍居中**（`#center`），仅原型明确「按钮右对齐」时才改布局。
+
+> **`#title` 为独立顶栏**：组件内渲染在 `foot-content` **上方**（`keepBlank-title` 占位约 94px），与 `#center` **不在同一行**。单行底栏（左勾选 + 按钮）**勿用 `#title`**；仅原型明确两行时才用。
+
+### 方案选择（内部分析用，勿在回答中罗列；无原型时按此默认）
+- 仅主操作：**`#center`** 放按钮组（保存/取消、提交等），按钮居中。
+- 辅助说明 + 主操作：**`#left`** 放 Ukey/协议/提示文案，**`#center`** 放主按钮（居中）。
+- **单行**协议勾选 + 按钮：**`#left`** 放勾选 + 协议链接，**`#center`** 放按钮（**勿用 `#title`**，**勿用**默认插槽 flex）。
+- **两行**（上行协议 + 下行 Ukey + 按钮）：**`#title`** 放 checkbox + 协议链接，再配 **`#left`** / **`#center`**。
+- 旧版默认插槽：仅兼容存量页；**新建页禁止**用默认插槽包 flex 布局替代 `#center`。
+
+## API（ylContainerFoot）
+
+> 标签：`<yl-container-foot>` / `ylContainerFoot`；须在入口 `import ylContainerFoot from 'zqyl-component-base/lib/ylContainerFoot'` + `Vue.component('ylContainerFoot', ylContainerFoot)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+无。
+
+### Events
+
+无。
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `title` | **独立顶栏**（协议勾选、说明等）；渲染在 `foot-content` **上方**；有内容时占位约 94px；**与按钮不在同一行** |
+| `left` | 左侧辅助说明或次要操作（约 40% 宽，左对齐） |
+| `center` | **主操作按钮区（居中）**；组件 `.foot-content-center { text-align: center }` |
+| `right` | 预留，当前未实现 |
+| default | 兼容旧版；**新建页勿用**自定义 flex 替代 `#center` |
+
+### 布局与样式
+
+- 固定于视口底部（`position: fixed`），`z-index: 3`，`el-card` 阴影 `0 0 5px rgba(0,0,0,.09)`。
+- 无 `title`：底栏 `min-height: 56px`，内置 `keepBlank` 占位 56px。
+- 有 `title`：`keepBlank-title` 占位约 94px。
+- 使用 `#left` / `#center` 时：三栏 table 布局，**`#center` 内按钮水平居中**。
+- 业务基座内默认 `padding-left: 180px` 让出侧栏；子应用/iframe 场景组件会自动调整宽度。
+- 文案高亮可用工具类 `defaultTextColor`（主题色）。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（left + center）
+```vue
+<yl-container-foot>
+  <template #left>
+    请插入尾号为<span class="defaultTextColor">【Ukey后四位】</span>的 Ukey 操作
+  </template>
+  <template #center>
+    <el-button type="primary">提交</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 表单详情（取消 + 保存）
+```vue
+<yl-container-foot>
+  <template #center>
+    <el-button>取 消</el-button>
+    <el-button type="primary">保 存</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 单行：协议勾选 + 按钮（**默认；按钮居中**）
+```vue
+<yl-container-foot>
+  <template #left>
+    <el-checkbox v-model="agreed">我已阅读并确认</el-checkbox>
+    <el-button type="text">《用户协议》</el-button>
+  </template>
+  <template #center>
+    <el-button type="primary" plain>暂存</el-button>
+    <el-button type="primary" :disabled="!agreed">提交</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 两行：title 顶栏协议 + 下行 Ukey + 按钮（**原型明确两行时**）
+```vue
+<yl-container-foot>
+  <div slot="title">
+    <el-checkbox v-model="agreed">我已阅读并确认</el-checkbox>
+    <el-button type="text">《用户协议》</el-button>
+  </div>
+  <template #left>
+    请插入尾号为<span class="defaultTextColor">【Ukey后四位】</span>的 Ukey 操作
+  </template>
+  <template #center>
+    <el-button type="primary" :disabled="!agreed">提交</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 默认插槽（兼容旧版，新建页勿用）
+```vue
+<yl-container-foot>
+  <el-button>取 消</el-button>
+  <el-button type="primary">确 定</el-button>
+</yl-container-foot>
+```
+
+## 注意事项
+- **操作按钮默认居中**：主操作**必须**放 **`#center`**；**禁止**默认插槽 + `justify-content: space-between` 把按钮顶到右侧。
+- **有原型/具体说明 → 以原型为准**；**无说明 → 按本 skill 默认插槽选型**，勿臆造结构。
+- **`#title` 与 `#center` 不在同一行**：`#title` 为独立顶栏；单行底栏（左勾选 + 按钮）→ **`#left` + `#center`**，**禁止** `#title` + `#center`、**禁止**默认插槽 flex。
+- 有 `#title` 时页面需 `keepBlank-title`（约 94px）占位；单行底栏无 `#title` 时占位 56px。

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

@@ -0,0 +1,104 @@
+---
+name: xiaoma-zqyl-data-census-front
+description: 前台指标摘要卡片（描述 + 数值）的 Vue2 实现规范（ylDataCensus）。在用户提及 ylDataCensus、yl-data-census、数据统计、指标摘要、仪表盘统计区，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the data-census (ylDataCensus) component on a ZQYL front page.
+---
+
+# 数据统计（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`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/front/components/xiaoma-zqyl-dialog-front/SKILL.md

@@ -0,0 +1,205 @@
+---
+name: xiaoma-zqyl-dialog-front
+description: 前台弹窗（确认/取消、表格选择、表单编辑、关闭前确认）的 Vue2 实现规范（ylDialog）。在用户提及 ylDialog、yl-dialog、弹窗、对话框、表格选择弹窗，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the dialog (ylDialog) component on a ZQYL front page.
+---
+
+# 弹窗（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`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-front`** 全页表格优先级：优先 `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`。