@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

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

@@ -0,0 +1,180 @@
+---
+name: xiaoma-zqyl-module-front
+description: 前台折叠模块卡片（主副标题、operation 操作区、expand 扩展区、footer 底栏）的 Vue2 实现规范（ylModule）。在用户提及 ylModule、yl-module、折叠模块、模块卡片、分块展示、扩展区、operation 操作区，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the module (ylModule) component on a ZQYL front page.
+---
+
+# 折叠模块（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`module`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-module」、「ylModule」、「折叠模块」、「模块卡片」时。
+
+不适用：
+- 仅需单行标题 + 简单折叠正文、无卡片结构 → 使用 **`ylCollapse`**。
+- 全页固定底部操作栏 → 使用 **`ylContainerFoot`**。
+- 无标题白底容器 → 直接使用 `el-card`。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 静态分块：仅 `title` + 默认插槽。
+- 带副标题/操作：`sub-title` + `#operation`。
+- 可折叠扩展：`:expand="true"` + `#expand`；默认展开用 `:default-expand-all="true"`。
+- 模块内底栏：`#footer`；需底部留白时 `:bot-space="true"`。
+- 外部控制展开：`ref` + `setExpandAll(true/false)`。
+
+## API（ylModule）
+
+> 标签：`<yl-module>` / `ylModule`；须在入口 `import ylModule from 'zqyl-component-base/lib/ylModule'` + `Vue.component('ylModule', ylModule)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `title` | String | `''` | 主标题 |
+| `subTitle` / `sub-title` | String | `''` | 副标题（主标题右侧，灰色） |
+| `expand` | Boolean | `false` | 是否启用展开箭头与 `#expand` 插槽 |
+| `defaultExpandAll` / `default-expand-all` | Boolean | `false` | 初始是否展开扩展区（仅初始化生效） |
+| `botSpace` / `bot-space` | Boolean | `false` | 是否保留卡片 body 底部 padding |
+| `bodyClassName` / `body-class-name` | String | `''` | 内容区额外 class |
+| `titleSpan` / `title-span` | Number | `12` | 标题列栅格宽度 |
+| `operationSpan` / `operation-span` | Number | `12` | 操作列栅格宽度 |
+| `bodyStyle` / `body-style` | Object | `null` | 自定义 `el-card` body 样式 |
+
+> 其余 `el-card` 属性可通过 `$attrs` 透传（如 `shadow`）。
+
+### Events
+
+无对外事件。
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 主体内容 |
+| `operation` | 标题行右侧操作区（右对齐） |
+| `expand` | 可折叠扩展内容（需 `expand: true`） |
+| `footer` | 模块内底部区域 |
+
+### Methods（ref）
+
+| 方法 | 说明 |
+| --- | --- |
+| `setExpandAll(val)` | `true` 展开扩展区，`false` 收起 |
+
+### 样式与布局（以组件库为准）
+
+- 容器：`el-card`；标题行左右两列栅格（默认各 12）。
+- 副标题：14px / `#909399`，距主标题 8px。
+- 展开箭头：14px / `#303133`，右侧 margin 16px；收起 `arrow-down`，展开 `arrow-up`。
+- 扩展区：`el-collapse-transition` 过渡动画。
+- `botSpace: false` 时 body `padding-bottom: 0`。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础模块
+```vue
+<yl-module title="基础模块" sub-title="这是副标题">
+  <div>这是模块的主要内容区域</div>
+</yl-module>
+```
+
+### 可展开模块
+```vue
+<yl-module title="可展开模块" :expand="true" :default-expand-all="false">
+  <div>这是主要内容区域</div>
+  <template #expand>
+    <div>扩展内容，可通过标题旁箭头展开或收起。</div>
+  </template>
+</yl-module>
+```
+
+### 标题操作区
+```vue
+<yl-module title="带操作按钮" sub-title="副标题信息">
+  <template #operation>
+    <div class="text-right w100">
+      <el-button size="small">导出</el-button>
+      <el-button type="primary" size="small">新增</el-button>
+    </div>
+  </template>
+  <div>模块主体内容</div>
+</yl-module>
+```
+
+### 完整功能（expand + footer + botSpace）
+```vue
+<yl-module
+  title="完整功能模块"
+  sub-title="包含所有功能"
+  :expand="true"
+  :default-expand-all="true"
+  :bot-space="true"
+  body-class-name="custom-body"
+>
+  <template #operation>
+    <el-button type="primary" size="small">查看</el-button>
+  </template>
+  <!-- 主体字段 -->
+  <template #expand>
+    <!-- 扩展字段 -->
+  </template>
+  <template #footer>
+    <el-button type="primary" size="small">提交</el-button>
+  </template>
+</yl-module>
+```
+
+### ref 控制展开/收起
+```vue
+<yl-module ref="moduleRef" title="通过方法控制" :expand="true">
+  <div>主要内容</div>
+  <template #expand><div>扩展内容</div></template>
+</yl-module>
+```
+
+// this.$refs.moduleRef.setExpandAll(true)  // 展开
+// this.$refs.moduleRef.setExpandAll(false) // 收起
+
+## 注意事项
+- **`expand: true`** 才渲染箭头与 `#expand`；`expand: false` 时不要依赖扩展区展示关键数据。
+- **`defaultExpandAll`** 仅影响初始化；之后用 **`setExpandAll`** 或点击箭头控制。
+- 标题右侧操作用 **`#operation`**；模块内底栏用 **`#footer`**（非全页 `ylContainerFoot`）。
+- 有 `footer` 或底部易被遮挡时设 **`:bot-space="true"`**；内容区样式用 **`body-class-name`**。
+- 与 **`ylCollapse`** 区分：需 `el-card` 模块结构、副标题、扩展过渡、模块内 footer 时用本组件。

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

@@ -0,0 +1,132 @@
+---
+name: xiaoma-zqyl-pie-chart-front
+description: 前台饼图/环形图（占比构成、图例、中心总计、自定义标签）的 Vue2 + zqyl-component-base 实现规范（ylPieChart）。在用户提及 ylPieChart、yl-pie-chart、饼图、环形图、占比图、扇形图，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the pie-chart (ylPieChart) component on a ZQYL front page.
+---
+
+# 饼图（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`pieChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-pie-chart」、「ylPieChart」、「饼图」、「环形图」、「占比图」时。
+
+不适用：趋势变化 → 使用 `ylLineChart`；类目并列对比 → 使用 `ylBarChart`；静态指标摘要 → 使用 `ylDataCensus`。
+
+## API（ylPieChart）
+
+> 标签：`<yl-pie-chart>` / `ylPieChart`；须在入口 `import ylPieChart from 'zqyl-component-base/lib/ylPieChart'` + `Vue.component('ylPieChart', ylPieChart)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 是否必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `chartData` | Object | `{}` | 是 | 图表配置数据对象 |
+| `id` | String | `'PieChart'` | 否 | 图表容器 DOM id，同页多图须唯一 |
+| `height` | String | `'400px'` | 否 | 图表高度 |
+
+### `chartData` 配置项
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `titleText` | String | `''` | 图表标题文本 |
+| `title` | Object | `{}` | 标题配置，透传 ECharts `title` |
+| `seriesName` | String | `''` | 系列名称（tooltip 中显示） |
+| `seriesData` | Array | `[]` | 饼图数据，每项 `{ name, value }` |
+| `seriesRadius` | Array \| String | `['0%', '70%']` | 半径；两值时为环形 `[内, 外]` |
+| `seriesCenter` | Array | `['50%', '50%']` | 圆心坐标 `[横, 纵]` |
+| `serieslabelData` | Object | `{}` | 扇区标签配置（组件库字段名） |
+| `colorList` | Array | `[]` | 按 dataIndex 自定义颜色 |
+| `legend` | Object | - | 图例配置；见下方 `legend` 项 |
+| `graphic` | Object | - | ECharts 原生 graphic 自定义图形 |
+
+### `legend` 配置项
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `orient` | String | `'horizontal'` \| `'vertical'` |
+| `left` / `right` / `top` / `bottom` | String \| Number | 图例位置 |
+| `formatter` | Function | 自定义图例文本 |
+| `formatterAtter` | Array | 如 `['name','num','percentage']` 组合显示 |
+
+### Events / Slots
+
+无对外事件与插槽。
+
+### Methods
+
+| 方法名 | 说明 |
+| --- | --- |
+| `setEchartOption()` | 父组件数据变化后通过 `ref` 调用，更新并重新渲染图表 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础饼图
+```vue
+<yl-pie-chart :chartData="pieData" id="basicPieChart" height="400px" />
+```
+
+// pieData: { titleText, seriesData: [{ name, value }, ...] }
+
+### 环形图（中心总计）
+```vue
+<yl-pie-chart :chartData="donutData" id="donutChart" height="400px" />
+```
+
+// donutData: seriesRadius: ['40%','70%'], serieslabelData: { position: 'center', formatter, rich }
+
+### 带图例 + 自定义颜色
+```vue
+<yl-pie-chart :chartData="legendData" id="legendPieChart" height="400px" />
+```
+
+// legend: { orient, left, formatterAtter: ['name','num','percentage'] }, colorList: [...]
+
+### 数据更新后刷新
+```js
+// this.chartData = await fetchChartData();
+// this.$refs.pieChart.setEchartOption();
+```
+
+## 注意事项
+- `chartData` 由接口或 `computed` 赋值；**禁止**在规范页手写长期静态假数据，接口未就绪时先空结构，请求后再更新。
+- `seriesData` 每项必须包含 `name` 与 `value`；`colorList` 长度建议与数据项数一致。
+- 标签字段为组件库约定的 `serieslabelData`（非 `seriesLabel`）；图例百分比计算依赖 `$function.AMOUNT.fixedNumber`。
+- 同页多个 `<yl-pie-chart>` 时 `id` 必须唯一，否则 ECharts 容器冲突。
+- 组件基于 ECharts 5.x（随 `zqyl-component-base` 依赖）；`title` / `graphic` / `legend` 可直接透传 ECharts 配置。

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

@@ -0,0 +1,61 @@
+---
+name: xiaoma-zqyl-popover-front
+description: 前台局部气泡提示（操作强调、首次引导、知道了关闭）的 Element UI 实现规范（el-popover）。在用户提及 Popover、el-popover、气泡提示、知道了、功能引导，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the popover (el-popover) component on a ZQYL front page.
+---
+
+# 气泡提示（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`popover`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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()`。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+## 何时使用
+
+- 局部操作/字段需用户特别关注；可带「知道了」关闭。
+- 首次功能引导（可配合 localStorage 只展示一次）。
+
+不适用：整页/卡片级说明 → `ylTips`；表单项释义 → `tooltip`。
+
+## 代码示例
+```vue
+<el-popover v-model="visible" placement="bottom-start" width="280" trigger="manual">
+  <p>请先完成 XX 操作</p>
+  <el-button size="mini" type="primary" @click="visible = false">知道了</el-button>
+  <i slot="reference" class="el-icon-warning-outline" @click="visible = !visible"></i>
+</el-popover>
+```
+
+## 注意事项
+- 文案简短；复杂说明用 `ylTips`。

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

@@ -0,0 +1,117 @@
+---
+name: xiaoma-zqyl-preview-front
+description: 前台PDF/图片附件在线预览（切换、缩放、旋转、拖拽）的 Vue2 实现规范（ylPreview）。在用户提及 ylPreview、yl-preview、文件预览、PDF预览、图片预览、审核右侧预览、附件预览，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the preview (ylPreview) component on a ZQYL front page.
+---
+
+# 文件预览（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`preview`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 详情/审核页右侧需**大块预览** PDF 或图片（证照、授权书、合同等）。
+- 多个附件需**左右切换**预览，PDF 与图片混排。
+- 图片预览需**缩放、旋转、拖拽**（非弹窗小图预览）。
+- 用户提到「yl-preview」、「ylPreview」、「文件预览区」、「审核预览」时。
+
+不适用：
+- 上传入口、删除、重新上传 → 使用 **`ylFileUpload`**。
+- 上传组件内小窗预览 → `ylFileUpload` 的 `previewType` / `viewFile`。
+
+## API（ylPreview）
+
+> 标签：`<yl-preview>` / `ylPreview`；须在入口 `import ylPreview from 'zqyl-component-base/lib/ylPreview'` + `Vue.component('ylPreview', ylPreview)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `fileList` | Array | `[]` | 文件列表（必填） |
+
+### `fileList[]` 项字段
+
+| 字段 | 说明 |
+| --- | --- |
+| `name` | 文件名（用于识别后缀） |
+| `url` | 预览地址 |
+| `previewUrl` | 预览地址（与 `url` 二选一） |
+| `showName` / `fileName` | 显示名/文件名（可选，参与后缀识别） |
+| `suffix` | 文件后缀（可选，如 `pdf`） |
+
+### 功能
+
+- **PDF**：iframe 嵌入；左右箭头切换附件。
+- **图片**：放大/缩小（0.1～3 倍）、旋转（90° 递增）、拖拽；切换文件时重置变换。
+- 组件根类名 `yl-preview zqyl-component-base`，样式来自 `component.css`。
+
+### 注意事项
+
+- PDF 预览 URL 须可访问（含跨域/鉴权由业务接口保证）。
+- `fileList` 为空时组件可能报错；业务应至少保留 `{ url: '' }` 占位。
+- 切换 Tab/证件类型重建预览时，给组件加 **`:key`** 以重置内部状态。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（PDF + 图片）
+```vue
+<yl-preview :file-list="fileList" />
+```
+```js
+fileList: [
+  { name: '示例文档.pdf', url: 'https://.../file.pdf' },
+  { name: '示例图片.jpg', url: 'https://.../image.jpg' },
+],
+```
+
+### 审核详情 · 右侧预览区
+```vue
+<el-row>
+  <el-col :span="10"><!-- 审核项 / 表单 --></el-col>
+  <el-col :span="14">
+    <yl-preview :key="activeTab" :file-list="previewList" />
+  </el-col>
+</el-row>
+```
+```js
+// 切换 Tab 后同步 previewList；空列表时占位
+if (!previewList.length) previewList = [{ url: '' }];
+```
+
+## 注意事项
+- 与 **`ylFileUpload`** 配合：上传在上传区，已上传文件在详情页用 `fileList` 驱动本组件。
+- 后缀识别顺序：`suffix` → 文件名后缀 → 默认按图片处理（非 pdf）。
+- 切换 `fileList` 或 Tab 时建议 **`:key`**，避免旋转/缩放状态残留。
+- 列表为空时传 `[{ url: '' }]` 占位，避免 `fileList[fileIndex]` 报错。