@zeyue0329/xiaoma-cli 1.20.0 → 1.22.0

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

@@ -0,0 +1,315 @@
+---
+name: xiaoma-zqyl-form-editor-front
+description: 前台配置化可编辑表单（formFields 声明字段、校验、分栏、金额、省市区、自定义插槽）的 Vue2 实现规范（ylFormEditor）。在用户提及 ylFormEditor、yl-form-editor、表单编辑、新建页、编辑页、配置化表单、el-form 动态表单，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the form-editor (ylFormEditor) component on a ZQYL front page.
+---
+
+# 表单编辑（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`formEditor`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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()`。
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skill 并按规则产出代码：
+- 新建/编辑页需要**可编辑**业务表单（非列表顶部的查询条）。
+- 表单字段由配置驱动：`formFields` + `formRules` + `initialValues`。
+- 需要分栏布局（单列/双列/三列）、金额、省市区、级联、动态显隐、自定义表单项插槽。
+- 用户提到「yl-form-editor」、「ylFormEditor」、「表单编辑」、「配置化表单」时。
+
+不适用：列表页顶部筛选查询 → 使用 `ylSearchForm`；只读详情展示 → 使用 `ylFormView`。
+
+### 何时不得使用 el-form 替代本组件
+
+以下场景**禁止**手写 `el-form` + `el-form-item`，必须用 `ylFormEditor`：
+
+- 表单详情页 / 新增页 / 编辑页中的**标准业务字段块**（如「基础信息」）
+- 字段 ≥ 2 个，或存在双列/三列布局
+- 存在 select 联动、tooltip、disabled 只读项、校验规则
+- **同一卡片内只读 + 可编辑混排**（见下节「同卡混排」）
+- 页面由 `xiaoma-zqyl-form-detail-page-front` 整包覆盖
+
+### 同卡混排：只读 + 可编辑（强制）
+
+当**同一卡片/折叠区块**内既有只读回显又有待填字段时：
+
+- **必须**使用**单个** `ylFormEditor` 承载全部字段，**禁止** `ylFormView` + `ylFormEditor` 同卡拆分。
+- 只读项：字段配置 `disabled: true`；无需 `formRules`；长文本/地址可用 `type: textarea` + `disabled`。
+- 只读项需操作链接（如「查看」「更新」）：`type: slot` + 具名插槽，插槽内 disabled 控件或纯文本 + `el-button type="text"`。
+- 可编辑项：正常 `type` / `placeholder` / `formRules`；与只读项共用同一 `initialValues` / `formFields`。
+- **整卡全只读**（无任何输入）→ 改用 `ylFormView`，见 `xiaoma-zqyl-form-view-front` skill。
+
+### 仅允许 el-form 的例外（需同时满足）
+
+- 弹窗内 ≤ 2 个简单字段，且无联动、无分栏
+- 或 legacy 页面**存量迁移中**且用户明确要求保持原结构
+
+> **新建页面默认不走例外。**
+
+### span 选型（生成时必守）
+
+`span` 控制 `formFields[]` 单项在栅格中的列宽（24 栅格）。组件按 `layout` 自动计算默认值，**生成业务页面时勿擅自覆盖**。
+
+| `layout` | 默认 `span` | 含义 |
+| --- | --- | --- |
+| `double` | `12` | 半行，左右两列等宽 |
+| `triple` | `8` | 一行三列 |
+| `single` | `24` | 整行 |
+
+**默认规则（`layout="double"` / `triple`）**
+
+- **勿主动添加** `span: 24`；与原型相邻字段左右并列时，使用组件默认列宽即可。
+- **禁止**因控件较宽（如 `daterange`、`select`、`type: slot` 自定义日期区间）就默认 `span: 24`。
+- `type: slot` 字段（含日期区间、带操作链接的只读项）与同类普通字段遵守**相同列宽规则**。
+
+**仅以下场景可设 `span: 24`（须原型/需求明确）**
+
+- 原型显示该字段**独占整行**（如长 `textarea`、地址类长文本）
+- 条件显隐后需**占满整行**展示（配合 `visible` 函数，见下方示例）
+- `layout="triple"` 时长项需跨列（如规范中的「长只读项独占一行」）
+
+### 表单项标题（label）字数
+
+- **`layout="single"`（单列表单）**：标题**不限 8 字**，完整展示；建议 `label-width="auto"`，并取消组件库对 `.el-form-item__label` 的 `ellipsis` 截断（见下方样式）。
+- **`layout="double"` / `triple`（多列表单）**：标题单行建议 ≤8 字；超过可折行最多 2 行（折行时右对齐），超出当前实现可能显示「…」。
+
+单列表单取消标签截断（页面或公共样式，勿用 `scoped` 盖组件库）：
+
+```css
+/* layout="single" + label-width="auto" 时完整展示 label */
+.yl-form-editor .el-form-item__label {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  word-break: break-word;
+  line-height: 22px;
+  height: auto;
+}
+```
+
+### 生成约束（强制）
+
+- **禁止** 在 `<yl-form-editor>` 上绑定 `@submit` / `@reset`。
+- **禁止** `:show-submit-button="true"`（默认 `false`，不设组件内置提交/重置区）。
+- **禁止** 生成仅服务于组件 `@submit` / `@reset` 的 `onSubmit` / `onReset` methods。
+- 保存/提交由**页面级按钮**（`ylTitle` / `ylContainerFoot` / 弹窗 `footer`）触发：`$refs.xxx.$refs.dynamicForm.validate` 通过后 `getFormFieldValues()` 取值对接接口；或先 `submitForm()` 仅作校验，**勿**再绑 `@submit` 取数。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 标准新建/编辑页：`showSubmitButton: false`，`layout: double`；按钮放页头或置底栏。
+- 弹窗内短表单：常 `layout: single`，`:show-submit-button="false"`，按钮放 `ylDialog` 的 `footer`。
+- 字段联动：优先 `field-change` 或 `visible: (formData) => boolean`。
+- 对接接口取值：以 `getFormFieldValues()` 为准（金额已转数值）。
+
+## API（ylFormEditor）
+
+> 标签：`<yl-form-editor>` / `ylFormEditor`；须在入口 `import ylFormEditor from 'zqyl-component-base/lib/ylFormEditor'` + `Vue.component('ylFormEditor', ylFormEditor)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `formFields` | Array | — | **必填**；字段配置列表 |
+| `formRules` | Object | `{}` | `el-form` rules，key 为 `field.prop` |
+| `layout` | String | `'single'` | `single` / `double` / `triple` |
+| `initialValues` | Object | `{}` | 初始值；变更时仅合并已声明的 `prop` |
+| `gutter` | Number | `16` | `el-row` 的 `gutter` |
+| `labelWidth` | String | `'135px'` | 标签宽度 |
+| `labelPosition` | String | `'right'` | `left` / `right` / `top` |
+| `showSubmitButton` | Boolean | `false` | 是否显示默认提交/重置区 |
+
+### `formFields[]` 常用字段
+
+| 字段 | 说明 |
+| --- | --- |
+| `prop` / `label` | 字段 key 与标签 |
+| `type` | `input` / `textarea` / `select` / `radio` / `checkbox` / `cascader` / `switch` / `time` / `date` / `datetime` / `amount` / `password` / `region` / `slot` |
+| `placeholder` / `tooltip` / `disabled` / `rows` / `span` | 占位、提示、禁用、行数、列宽 |
+| `options` | `select` / `radio` / `checkbox` / `cascader` 选项 |
+| `defaultValue` | 无 `initialValues[prop]` 时的默认值 |
+| `visible` | `Boolean` 或 `(formData) => boolean` 动态显隐 |
+| `valueFormat` | `date` / `datetime` 绑定值格式 |
+| `regionOptions` 等 | `type: region` 省市区数据与字段映射 |
+| `slotName` | `type: slot` 时对应具名插槽 |
+| `formContentSlot` | 表单项控件下方的提示/说明插槽名（常用于“提示说明/重要提示”常驻文案） |
+
+### Events
+
+> 组件内置 `submit` / `reset` 事件；**生成代码时不要**在 `<yl-form-editor>` 上绑定 `@submit` / `@reset`（见「生成约束」）。
+
+| 事件名 | 参数 | 说明 |
+| --- | --- | --- |
+| `submit` | `submitData` | 内置提交区或 `submitForm()` 校验通过时触发；生成时勿绑定 |
+| `reset` | — | 内置重置区或 `resetForm()` 时触发；生成时勿绑定 |
+| `field-change` | `{ field, value, formData }` | 字段值变化 |
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `[field.slotName]` | `type === 'slot'`；作用域：`field`、`formData`、`formRules` |
+| `[field.formContentSlot]` | 表单项控件下方提示区；作用域：`field`、`formData`、`formRules` |
+| `submitBtnsSlot` | 自定义底部按钮区（生成时勿用，按钮放页面级） |
+
+### 方法（ref）
+
+| 方法 | 说明 |
+| --- | --- |
+| `submitForm()` | 校验通过后 `emit('submit')`（内置约 1s 防抖） |
+| `resetForm()` | 重置并 `emit('reset')` |
+| `getFormFieldValues()` | 获取表单数据（金额等已按组件规则处理） |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础双列表单
+```vue
+<yl-form-editor
+  ref="formEditor"
+  :form-fields="fields"
+  :form-rules="rules"
+  :initial-values="form"
+  layout="double"
+  :show-submit-button="false"
+/>
+```
+
+```js
+// fields: [{ label: '名称', prop: 'name', type: 'input', placeholder: '请输入' }]
+// rules: { name: [{ required: true, message: '请输入名称', trigger: 'blur' }] }
+// onSave() {
+//   this.$refs.formEditor.$refs.dynamicForm.validate((valid) => {
+//     if (!valid) return;
+//     const data = this.$refs.formEditor.getFormFieldValues();
+//   });
+// }
+```
+
+### 页级按钮触发校验与取值
+```vue
+<yl-form-editor ref="formEditor" :form-fields="fields" :form-rules="rules" :show-submit-button="false" />
+```
+
+```js
+// ylTitle / ylContainerFoot 的保存按钮：
+// onSave() {
+//   this.$refs.formEditor.$refs.dynamicForm.validate((valid) => {
+//     if (!valid) return;
+//     const data = this.$refs.formEditor.getFormFieldValues();
+//   });
+// }
+```
+
+### 金额 + 日期 + getFormFieldValues
+```vue
+<yl-form-editor ref="formEditor" :form-fields="fields" :initial-values="form" layout="single" :show-submit-button="false" />
+```
+
+```js
+// fields 含 { prop: 'amount', type: 'amount' }、{ prop: 'date', type: 'date' }
+// onSave() { const data = this.$refs.formEditor.getFormFieldValues() }
+```
+
+### 同卡混排：只读 + 可编辑（disabled + slot）
+```vue
+<yl-form-editor
+  :form-fields="mixedFields"
+  :form-rules="mixedRules"
+  :initial-values="mixedForm"
+  layout="double"
+  :show-submit-button="false"
+>
+  <template #licensePhotoSlot>
+    <el-button type="text" @click="onViewLicense">查看</el-button>
+  </template>
+</yl-form-editor>
+```
+
+```js
+// mixedFields: [
+//   { label: '企业名称', prop: 'companyName', type: 'input', disabled: true },
+//   { label: '统一社会信用代码', prop: 'creditCode', type: 'input', disabled: true },
+//   { label: '联系邮箱', prop: 'contactEmail', type: 'input', placeholder: '请输入' },
+//   { label: '营业执照照片', prop: 'licensePhoto', type: 'slot', slotName: 'licensePhotoSlot' },
+// ]
+// mixedRules: { contactEmail: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }] }
+```
+
+### 动态显隐（visible）
+```js
+formFields: [
+  { label: '是否对公', prop: 'isCorp', type: 'switch' },
+  // span: 24 仅因条件显隐后需独占整行，非日期/宽控件默认做法
+  { label: '企业名称', prop: 'corpName', type: 'input', span: 24, visible: (fd) => !!fd.isCorp },
+]
+```
+
+### 日期区间（slot · 双列默认半行）
+```js
+// layout="double" 时勿加 span: 24；与相邻字段左右各占一列
+{ label: '账户有效期', prop: 'accountValidity', type: 'slot', slotName: 'accountValiditySlot' }
+```
+
+### 提示说明 / 重要提示（formContentSlot）
+
+规范：提示文字显示在输入框下方，与框体左对齐；文字过长自动折行；在多列表单中提示区宽度与框体宽度一致（单列表单可略超框体宽度）。
+
+```js
+formFields: [
+  { label: '单行标题最多八字', prop: 'a', type: 'input', placeholder: '请输入', formContentSlot: 'hintA' },
+  { label: '单行标题最多八字', prop: 'b', type: 'input', placeholder: '请输入', formContentSlot: 'hintB' },
+]
+```
+
+```vue
+<yl-form-editor :form-fields="formFields" :initial-values="form" layout="double" label-width="140px">
+  <!-- 普通提示：灰色小字 -->
+  <template #hintA>
+    <div style="margin-top:4px;font-size:12px;line-height:1.5;color:#909399;word-break:break-word">提示文字…</div>
+  </template>
+  <!-- 重要提示：浅蓝底块强调 -->
+  <template #hintB>
+    <div style="margin-top:4px;padding:8px 12px;background:#E8F4FF;color:#303133;line-height:1.5;word-break:break-word">重要提示，文字较多的重要提示…</div>
+  </template>
+</yl-form-editor>
+```
+
+## 注意事项
+- 与 **`ylSearchForm`** 区分：列表顶部筛选走查询条；业务新建/编辑走本组件。
+- **`formRules`** 的 key 必须与 **`field.prop`** 一致，否则校验可能不生效。
+- **`type: 'slot'` 必填项**：须在 **`formRules`** 中声明与 `prop` 一致的 rules；插槽内控件 **`v-model` 绑定 `formData[prop]`**（使用插槽作用域），与其他字段一并 **`submitForm()`** 校验，空值须**输入框标红 + 下方错误文案**（见 `xiaoma-zqyl-ui-spec`）。**禁止**在页头「确认」等按钮中对该字段单独 `$message` / Toast 提示必填空值；Toast 仅用于需求明确的业务冲突（重复、已关联、超长等）。
+- **`initialValues`** 更新时不会为未在 `formFields` 声明的字段补 key。
+- **`submitForm`** 有约 1s 防抖；生成代码时**勿**绑 `@submit`，对接接口以 `getFormFieldValues()` 为准。
+- 金额字段 `type: amount`：展示千分位，提交/取值时为数值；日期可用 `valueFormat`。
+- **提示说明（`formContentSlot`）**：提示区显示在输入框下方、与框体左对齐；过长自动折行；多列时宽度与框体一致。重要提示可用浅蓝底块强调（文案对用户行为影响较大时使用）。
+- **整卡全只读**详情用 **`ylFormView`**；**同卡混排只读+可编辑**时只读项用本组件 **`disabled: true`**，勿拆 `ylFormView` + `ylFormEditor`。
+- **`span` 选型**：`layout="double"` 默认半行（`span: 12`），勿因 daterange / select / slot 较宽就设 `span: 24`；仅原型明确独占整行或条件显隐占满一行时才用 `span: 24`（见「span 选型」章节）。
+- **表单项标题**：`layout="single"` 时不限 8 字，建议 `label-width="auto"` 并取消 label `ellipsis`；`double` / `triple` 时标题建议 ≤8 字。

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

@@ -0,0 +1,165 @@
+---
+name: xiaoma-zqyl-form-view-front
+description: 前台只读表单展示（formData + reqData、金额/日期/枚举格式化、tooltip、自定义插槽、动态显隐）的 Vue2 实现规范（ylFormView）。在用户提及 ylFormView、yl-form-view、表单查看、只读表单、详情页、审批页、字段回显，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the form-view (ylFormView) component on a ZQYL front page.
+---
+
+# 表单查看（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`formView`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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()`。
+
+## 何时使用（智能体选择规则）
+
+当需求/页面出现以下任一信号时，必须优先调用本 skill 并按规则产出代码：
+- 详情页、审批页等**只读**业务字段展示（非可编辑表单）。
+- 字段由配置驱动：`formData` + `reqData`，需统一格式化金额、日期、枚举。
+- 需要 tooltip、自定义插槽整格展示、按数据动态显隐行。
+- 用户提到「yl-form-view」、「ylFormView」、「表单查看」、「只读表单」、「详情回显」时。
+
+不适用：需要输入、校验与提交 → 使用 `ylFormEditor`；列表查询条 → 使用 `ylSearchForm`；**同一卡片内只读+可编辑混排** → 使用 **单个** `ylFormEditor`（只读项 `disabled`），**勿**与本组件同卡并用。
+
+### 禁止模式（新建页）
+
+- ❌ `<div class="view-item"><label>…</label><span>…</span></div>` 整块替代标准字段展示
+- ❌ **同卡混排**时 `yl-form-view` + `yl-form-editor` 上下或分段拆分（应合并为一个 `yl-form-editor`）
+- ✅ **整卡全只读** → `yl-form-view` + `formData[]` + `reqData`
+- ✅ 仅当单列内容为自定义复杂 UI（Tag 列表、嵌套表格）时，对该项使用 `slot`
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 标准详情双列：`layout="doubleRow"`（默认）。
+- 字段较少或强调纵向阅读：`layout="singleRow"`；信息密集：`layout="tripleRow"`。
+- 金额/日期/枚举：在 `formData[].attr` 配置 `type` 与格式化参数。
+- 标签/状态等复杂展示：项上声明 `slot`，用具名插槽自定义整格。
+- 条件展示：`display: 'always'` 或 `visible: (reqData) => boolean`（推荐，勿用 `condition`）。
+
+## API（ylFormView）
+
+> 标签：`<yl-form-view>` / `ylFormView`；须在入口 `import ylFormView from 'zqyl-component-base/lib/ylFormView'` + `Vue.component('ylFormView', ylFormView)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `layout` | String | `'doubleRow'` | `singleRow` / `doubleRow` / `tripleRow` |
+| `formData` | Array | `[]` | 展示项配置列表 |
+| `reqData` | Object | `{}` | 实际数据对象 |
+
+### `formData[]` 常用字段
+
+| 字段 | 说明 |
+| --- | --- |
+| `label` / `prop` | 标签与 `reqData` 键名 |
+| `tooltip` | 标签旁提示（`el-tooltip`） |
+| `layout` | 单项行布局覆盖：`singleRow` / `doubleRow` / `tripleRow` |
+| `slot` | 非空时用具名插槽渲染该格 |
+| `display` | `'always'` 时始终展示 |
+| `visible` | `Boolean` 或 `(reqData) => boolean`；动态显隐（**推荐**） |
+| `attr` | 格式化配置，见下表 |
+
+### `attr` 配置（`attr.type`）
+
+| type | 常用字段 | 说明 |
+| --- | --- | --- |
+| `amount` | `decimal`、`unit` | 金额千分位 + 单位 |
+| `date` | `format`（如 `hms`） | 13 位时间戳格式化 |
+| `dateRange` | `format`、`join`（默认 `至`） | `reqData[prop]` 为 `[start, end]` |
+| `enum` | `enumList` 或 `gettersName` + `name` | 静态枚举优先 `enumList` |
+
+### 可见性逻辑
+
+可见性分两档：① **`visible`** 先判断（函数或 `visible !== false`）；② 通过后再满足 `display === 'always'`、或存在 `prop` 且 `reqData[prop] !== undefined`。动态显隐请用 **`visible`**，不要用 `condition`。无可展示项时显示「暂无数据」。
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `[item.slot]` | 作用域 `{ data }`；自定义整格内容 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础只读字段
+```vue
+<yl-form-view :form-data="formItems" :req-data="detail" />
+```
+
+```js
+// formItems: [{ label: '名称', prop: 'name' }, { label: '状态', prop: 'status', attr: { type: 'enum', enumList: [{ code: 1, name: '生效' }] } }]
+// detail: { name: '示例', status: 1 }
+```
+
+### 三种布局
+```vue
+<yl-form-view layout="singleRow" :form-data="formItems" :req-data="detail" />
+<yl-form-view layout="doubleRow" :form-data="formItems" :req-data="detail" />
+<yl-form-view layout="tripleRow" :form-data="formItems" :req-data="detail" />
+```
+
+### 金额 / 日期 / 区间
+```js
+formItems: [
+  { label: '订单金额', prop: 'orderAmount', attr: { type: 'amount', decimal: 2, unit: '元' } },
+  { label: '创建时间', prop: 'createTime', attr: { type: 'date', format: 'hms' } },
+  { label: '时间范围', prop: 'timeRange', attr: { type: 'dateRange', format: 'hms', join: '至' } },
+]
+// detail: { orderAmount: 1234.56, createTime: 1640995200000, timeRange: [1640995200000, 1641081600000] }
+```
+
+### 自定义插槽（slot）
+```vue
+<yl-form-view :form-data="formItems" :req-data="detail">
+  <template #userTags="{ data }">
+    <el-tag v-for="tag in detail[data.prop]" :key="tag" size="mini">{{ tag }}</el-tag>
+  </template>
+</yl-form-view>
+```
+
+```js
+// formItems: [{ label: '用户标签', prop: 'userTags', slot: 'userTags' }]
+```
+
+### 动态显隐（display / visible）
+```js
+formItems: [
+  { label: '基础信息', prop: 'baseInfo', display: 'always' },
+  { label: '驳回原因', prop: 'rejectReason', visible: (reqData) => reqData.auditStatus === 'reject' },
+]
+```
+
+## 注意事项
+- **整卡全只读**才用本组件；**同卡混排只读+可编辑**时只读字段改由 `ylFormEditor` + `disabled` 承载，勿与本组件同卡拆分。
+- **`prop`** 与 **`reqData`** 键名须一致，否则可能「有配置但不显示」。
+- 枚举优先 **`enumList`**；配置了 `enumList` 时 **`gettersName` 不生效**。
+- 时间类建议 **13 位时间戳**；区间为 **`[start, end]`** 数组。
+- 自定义展示用 **`slot`** + 具名插槽 `{ data }`；无对外 Events。
+- 动态显隐优先 **`visible: (reqData) => boolean`**，与 `ylFormEditor` 一致；勿用 `condition`。

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

@@ -0,0 +1,102 @@
+---
+name: xiaoma-zqyl-funnel-chart-front
+description: 前台漏斗图（转化流程、标签位置、图例）的 Vue2 + zqyl-component-base 实现规范（ylFunnelChart）。在用户提及 ylFunnelChart、yl-funnel-chart、漏斗图、转化漏斗、流失分析，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the funnel-chart (ylFunnelChart) component on a ZQYL front page.
+---
+
+# 漏斗图（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`funnelChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-funnel-chart」、「ylFunnelChart」、「漏斗图」、「转化漏斗」时。
+
+不适用：静态占比构成 → 使用 `ylPieChart`；类目并列对比 → 使用 `ylBarChart`；趋势变化 → 使用 `ylLineChart`。
+
+## API（ylFunnelChart）
+
+> 标签：`<yl-funnel-chart>` / `ylFunnelChart`；须在入口 `import ylFunnelChart from 'zqyl-component-base/lib/ylFunnelChart'` + `Vue.component('ylFunnelChart', ylFunnelChart)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 是否必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `chartData` | Object | `{}` | 是 | 图表配置数据对象 |
+| `id` | String | `'PieChart'` | 否 | 图表容器 DOM id，同页多图须唯一 |
+| `height` | String | `'400px'` | 否 | 图表高度 |
+
+### `chartData` 配置项
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `titleText` | String | `''` | 图表标题文本 |
+| `seriesPosition` | String | `'outside'` | 标签位置：`outside` \| `inner` \| `center` |
+| `legend` | Boolean | `false` | 是否显示图例（图例项取自 `seriesData[].name`） |
+| `seriesData` | Array | `[]` | 漏斗数据，每项 `{ name, value }` |
+
+### Events / Slots
+
+无对外事件与插槽。
+
+### Methods
+
+| 方法名 | 说明 |
+| --- | --- |
+| `setEchartOption()` | 父组件数据变化后通过 `ref` 调用，更新并重新渲染图表 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法
+```vue
+<yl-funnel-chart :chartData="funnelData" id="funnelChart" height="400px" />
+```
+
+// funnelData: { titleText, seriesPosition: 'inner', legend: true, seriesData: [{ name, value }, ...] }
+
+### 数据更新后刷新
+```js
+// this.chartData = await fetchFunnelData();
+// this.$refs.funnelChart.setEchartOption();
+```
+
+## 注意事项
+- `chartData` 由接口或 `computed` 赋值；**禁止**在规范页手写长期静态假数据，接口未就绪时先空结构，请求后再更新。
+- `seriesData` 每项必须包含 `name` 与 `value`；漏斗图内部按数值**降序**排列展示。
+- 数据项较多时建议使用 `seriesPosition: 'outside'`；紧凑布局可用 `inner` 或 `center`。
+- 同页多个 `<yl-funnel-chart>` 时 `id` 必须唯一；组件库默认 id 为 `PieChart`，建议显式指定。
+- 组件基于 ECharts 5.x（随 `zqyl-component-base` 依赖）；窗口 resize 时自动调整尺寸。