@zeyue0329/xiaoma-cli 1.20.0 → 1.22.0

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

@@ -0,0 +1,100 @@
+---
+name: xiaoma-zqyl-drawer-front
+description: 前台抽屉浮层（详情、表格选择、较大操作区）的 Element UI 实现规范（el-drawer）。在用户提及抽屉、Drawer、el-drawer、侧滑详情、表格选择抽屉，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the drawer (el-drawer) component on a ZQYL front page.
+---
+
+# 抽屉（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`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/front/components/xiaoma-zqyl-empty-page-front/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: xiaoma-zqyl-empty-page-front
+description: 前台空状态/异常页插画与文案（无数据、404、网络异常、权限不足等 type 预设）的 Vue2 实现规范（ylEmptyPage）。在用户提及 ylEmptyPage、yl-empty-page、空页面、空状态、暂无数据、404、网络异常、无权限、异常页，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the empty-page (ylEmptyPage) component on a ZQYL front page.
+---
+
+# 空页面（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`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`）。
+- 组件无插槽/事件；返回首页等操作按钮放在组件**外层**，与本组件并列布局。

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

@@ -0,0 +1,291 @@
+---
+name: xiaoma-zqyl-file-upload-front
+description: 前台附件/证照/图片上传（类型限制、预览、删除、重新上传）的 Vue2 实现规范（ylFileUpload）。在用户提及 ylFileUpload、yl-file-upload、文件上传、附件上传、证照上传，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the file-upload (ylFileUpload) component on a ZQYL front page.
+---
+
+# 文件上传（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`fileUpload`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-file-upload」、「ylFileUpload」、「点击上传」、附件/证照上传时。
+
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 单文件按钮：`type: sole` + `num-limit: 1`；需「重新上传」时加 `re-upload-btn`。
+- 多文件仅汇总：`type: multi` + `num-limit`；已上传以「已上传文件(n/m)」展示，弹窗管理列表。
+- 多文件逐项展示：`type: list` + `multiple`；长文件名配 `truncated-file-name-limit`。
+- 多文件带进度列表：`type: multiple` + `multiple`。
+- 多图小方块：`type: square` + `file-type: png/jpg` + `list-style` 宽高。
+- 单图卡片（证照/发票）：`type: invoice`；拖拽热区：`type: icon`。
+- 头像 / 九宫格 / 证件 / 营业执照：`type: avatar` | `nineParts` | `cert` | `business`。
+- 自定义触发区：`type: customize` + `#customize` 插槽。
+- 手动上传：`auto-upload: false`，业务「确定」中调用 `$refs.xxx.submit()`。
+
+## API（ylFileUpload）
+
+> 标签：`<yl-file-upload>` / `ylFileUpload`；须在入口 `import ylFileUpload from 'zqyl-component-base/lib/ylFileUpload'` + `Vue.component('ylFileUpload', ylFileUpload)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `data` | Object | `{}` | 上传配置，含 `attributes` + `request`（必填结构） |
+| `uploadFile` / `upload-file` | Array | `[]` | 已上传文件列表（受控，须在事件中同步） |
+| `numLimit` / `num-limit` | Number | `1` | 最大上传数量 |
+| `limit` | Boolean | `true` | 是否启用数量限制 |
+| `byteLimit` / `byte-limit` | Number | `50` | 单文件最大体积（MB） |
+| `autoUpload` / `auto-upload` | Boolean | `true` | `false` 时选手动 `submit()` |
+| `platformType` / `platform-type` | String | `yx` | 平台：`yx` / `yxManager`（文档亦写作 yx-admin）/ `yz` / `mps` |
+| `truncatedFileNameLimit` | Number | `12` | 文件名展示截断；`type` 为 `multiple` 或 `list` 时生效 |
+| `previewType` | String | `dialog` | 预览方式：`dialog` / 新窗口等 |
+| `deleteBtn` | Boolean | `true` | 是否显示删除 |
+| `reUploadBtn` / `re-upload-btn` | Boolean | `false` | 是否显示重新上传（多用于单文件） |
+| `disabled` | Boolean | `false` | 禁用上传 |
+| `beforeUpload` | Function | — | 上传前钩子，返回 `false` 阻止上传 |
+| `batchUpload` | Boolean | `false` | 是否批量上传 |
+| `multipleCustom` | Array | `[]` | 自定义多选后缀白名单 |
+| `modalIsShow` | Boolean | `true` | 多选列表弹层是否显示遮罩 |
+| `fileNameLimit` | Number | `null` | 文件名长度限制 |
+| `showExample` | Boolean | `false` | 是否显示营业执照示例图 |
+| `noMessageSuccess` | Boolean | `false` | 上传成功不提示 |
+| `onceMessageSuccess` | Boolean | `false` | 多文件仅提示一次成功 |
+| `disabledIE` | Boolean | `false` | 是否禁用 IE9 上传体验 |
+
+### `data.attributes` 常用字段
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `type` | String | 展示样式，见下表「type 展示类型」 |
+| `fileType` | String | 后缀/MIME 校验策略，见「fileType 常用取值」 |
+| `buttonProp` | Object | 按钮配置：`text`、`hideButton`、`border` 等 |
+| `tip` / `notice` | String | 格式/大小提示或校验失败提示 |
+| `multiple` | Boolean | 是否多选 |
+| `directory` | Boolean | 是否支持文件夹上传 |
+| `listStyle` | Object | 列表/小图区域宽高，如 `{ width, height }` |
+| `showImg` | String | 证件/示例图片 URL |
+| `ninePartsTitle` | String | 九宫格标题 |
+| `resolutionRatio` | Object | 图片分辨率限制 `{ width, height }` |
+
+### `data.request`
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `url` | String | 上传接口；**显式传入时优先**于 `platformType` 默认地址 |
+| `options` | Object | 随 FormData 附加字段，如 **`bizType`**（文件中心常必填） |
+| `expand` | Object | 扩展字段，合并进成功回调中的文件对象 |
+
+### `data.attributes.type` 展示类型
+
+| type | 场景 |
+| --- | --- |
+| `sole` / `multi` | 单/多附件按钮（新版常用） |
+| `list` / `multiple` | 文件列表（逐项展示 / 带进度） |
+| `single` | 单文件上传 |
+| `square` | 多图小方块 |
+| `icon` | 拖拽/图标区域上传 |
+| `invoice` / `cert` / `business` | 发票/证件/营业执照专用版式 |
+| `avatar` / `nineParts` | 头像 / 九宫格多图 |
+| `IDcardFront` / `IDcardReverse` | 身份证正/反面 |
+| `customize` | 自定义上传区（配合 `customize` 插槽） |
+| `cloud` / `import` / `svgBtn` | 云上传 / 导入按钮 / SVG 按钮样式 |
+
+### `fileType` 常用取值
+
+| fileType | 说明 |
+| --- | --- |
+| `*` | 不限制（按实现） |
+| `png/jpg` / `image` | 图片 |
+| `pdf` / `pdf/image` | PDF / PDF+图片 |
+| `doc/excel` / `doc/excel/zip` | 办公文档 / 含压缩包 |
+| `types` | 图片 + PDF + Office 等组合 |
+| `zip/image` | 压缩包 + 图片等 |
+
+### Events
+
+| 事件名 | 参数 | 说明 |
+| --- | --- | --- |
+| `setUploadFile` | `(file, fileList)` | 上传成功；须同步更新父组件 `uploadFile` |
+| `removeUploadFile` | `(file, fileList)` | 删除文件 |
+| `getRefName` | `(refName)` | 返回内部上传器 ref 名 |
+| `getFilesLength` | `(successCount)` | 通过校验的文件数量 |
+| `allFileLength` | `(allCount)` | 选中文件总数 |
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `customize` | `type='customize'` 时自定义上传触发区 |
+| `beforeUploadIcon` | 自定义上传前图标；`icon` / `invoice` / `square` / `multiple` 等可替换 |
+
+### 方法（ref）
+
+| 方法 | 说明 |
+| --- | --- |
+| `clearFiles()` | 清空已上传列表 |
+| `submit()` | `autoUpload=false` 时手动触发上传 |
+| `viewFile(url, file, type, index)` | 预览文件 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 单文件上传（sole）
+```vue
+<el-form-item label="上传单一文件">
+  <yl-file-upload
+    :platform-type="platformType"
+    :data="uploadData"
+    :upload-file="fileList"
+    :num-limit="1"
+    @setUploadFile="onSetUpload"
+    @removeUploadFile="onSetUpload"
+  />
+  <div class="form-item-hint">提示文字…</div>
+</el-form-item>
+```
+
+// uploadData: { attributes: { type: 'sole', fileType: 'pdf', tip: '…', buttonProp: { text: '点击上传' } }, request: { url, options: { bizType } } }
+
+### 单文件 + 重新上传（sole + reUploadBtn）
+```vue
+<yl-file-upload
+  ref="fileUpload"
+  :platform-type="platformType"
+  :data="uploadData"
+  :upload-file="fileList"
+  :num-limit="1"
+  :re-upload-btn="true"
+  @setUploadFile="onSetUpload"
+/>
+```
+
+### 多文件列表（list）
+```vue
+<yl-file-upload
+  :platform-type="platformType"
+  :data="uploadData"
+  :upload-file="fileList"
+  :num-limit="5"
+  :truncated-file-name-limit="12"
+  @setUploadFile="onSetUpload"
+  @removeUploadFile="onSetUpload"
+/>
+```
+
+// uploadData.attributes: { type: 'list', fileType: 'pdf', multiple: true, buttonProp: { text: '点击上传' } }
+
+### 多文件汇总（multi）
+```vue
+<yl-file-upload
+  :platform-type="platformType"
+  :data="uploadData"
+  :upload-file="fileList"
+  :num-limit="5"
+  @setUploadFile="onSetUpload"
+  @removeUploadFile="onSetUpload"
+/>
+```
+
+// uploadData.attributes: { type: 'multi', fileType: 'doc/excel/zip', multiple: true, tip: '…' }
+
+### 多图小方块（square）
+```vue
+<yl-file-upload
+  :platform-type="platformType"
+  :data="uploadData"
+  :upload-file="fileList"
+  :num-limit="5"
+  :byte-limit="5"
+  @setUploadFile="onSetUpload"
+  @removeUploadFile="onSetUpload"
+/>
+```
+
+// attributes: { type: 'square', fileType: 'png/jpg', multiple: true, listStyle: { width: '96px', height: '96px' } }
+
+### 单图卡片 / 拖拽区（invoice / icon）
+```vue
+<!-- invoice：虚线框 +「+」占位；icon：拖拽或点击热区 -->
+<yl-file-upload
+  :platform-type="platformType"
+  :data="uploadData"
+  :upload-file="fileList"
+  :num-limit="1"
+  :byte-limit="2"
+  @setUploadFile="onSetUpload"
+/>
+```
+
+// invoice: { type: 'invoice', fileType: 'png/jpg', tip: '…', listStyle: { width: '138px', height: '96px' } }
+// icon: { type: 'icon', fileType: 'png/jpg', multiple: true, listStyle: { width: '255px', height: '136px' } }
+
+### 手动触发上传（autoUpload=false）
+```vue
+<yl-file-upload
+  ref="fileUpload"
+  :platform-type="platformType"
+  :data="uploadData"
+  :upload-file="fileList"
+  :auto-upload="false"
+  :num-limit="3"
+  @setUploadFile="onSetUpload"
+/>
+<el-button size="small" type="primary" @click="$refs.fileUpload.submit()">确认上传</el-button>
+```
+
+### 自定义上传区（customize 插槽）
+```vue
+<yl-file-upload :data="uploadData" :upload-file="fileList" @setUploadFile="onSetUpload">
+  <template #customize>
+    <el-button type="primary" size="small">选择并上传</el-button>
+  </template>
+</yl-file-upload>
+```
+
+// attributes.type 须为 'customize'
+
+## 注意事项
+- 展示由 `data.attributes.type` 决定；`uploadFile` 受控，在 `setUploadFile` / `removeUploadFile` 中同步 `fileList = fileList`。
+- 场景：表单项标签 + 组件 + 下方次要提示（`form-item-hint`）；格式/大小约束放 `attributes.tip`。
+- `data.request.url` 与 `options.bizType` 建议显式配置；未传 `url` 时由 `platformType` 推导默认上传地址。
+- `reUploadBtn` 多用于单文件；与多文件 `numLimit` 勿随意混用（以业务实测为准）。
+- `type: list` 超长文件名用 `truncatedFileNameLimit`；`type: multi` 以「已上传文件(n/m)」汇总。
+- 图片预览依赖上传返回的 `previewUrl`；`beforeUpload` 返回 `false` 时勿假设文件已进入列表。
+- `autoUpload=false` 时在业务确定按钮调用 `$refs.xxx.submit()`；演示/规范平台可用 `:auto-upload="false"` 避免真实上传。
+- 详情/审核页**右侧大块预览**用 **`ylPreview`**（见 preview skill），勿与上传组件弹窗预览混用。

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

@@ -0,0 +1,118 @@
+---
+name: xiaoma-zqyl-flow-chart-front
+description: 前台工作流组件（BPMN 流程图、节点高亮、模板预览）的 Vue2 + zqyl-component-base 实现规范（ylFlowChart）。在用户提及 ylFlowChart、yl-flow-chart、工作流组件、流程图、BPMN、审批流程，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the flow-chart (ylFlowChart) component on a ZQYL front page.
+---
+
+# 工作流组件（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`flowChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 需要展示**审批/业务流程进度**（BPMN 流程图、节点高亮）。
+- 需要预览**流程模板配置**（审批企业、岗位、审批人）。
+- 用户提到「yl-flow-chart」、「ylFlowChart」、「工作流组件」、「流程图」、「BPMN」时。
+
+不适用：数据统计图表 → 使用 `ylLineChart` / `ylBarChart` 等 ECharts 组件；纯表单审批操作 → 使用 `ylFormEditor` 等业务组件。
+
+## API（ylFlowChart）
+
+> 标签：`<yl-flow-chart>` / `ylFlowChart`；须在入口 `import ylFlowChart from 'zqyl-component-base/lib/ylFlowChart'` + `Vue.component('ylFlowChart', ylFlowChart)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 是否必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `bpmnObj` | Object | `null` | 是 | BPMN 流程数据对象 |
+| `btnName` | String | `''` | 否 | 按钮名称（待办节点文案） |
+| `isModel` | Boolean | `false` | 否 | 是否为模板或流程实例视图 |
+
+### `bpmnObj` 数据结构
+
+可从接口 `/zqyl-workflow-api/flowable/act/process/getBpmn` 获取。
+
+| 属性名 | 类型 | 说明 |
+| --- | --- | --- |
+| `bpmnModel` | Object | BPMN 模型数据（含 mainProcess、locationMap、flowLocationMap 等） |
+| `finishTaskInfos` | Array | 已完成任务信息 |
+| `highLightedActivitiIdList` | Array | 已完成节点 ID 列表 |
+| `runningActivitiIdList` | Array | 进行中节点 ID 列表 |
+| `highLightedFlowIds` | Array | 已完成连线 ID 列表 |
+| `userList` | Array | 用户列表 |
+| `userInfo` | Array | 用户信息 |
+| `companyInfo` | Array | 企业信息 |
+| `positionInfo` | Array | 岗位信息 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `changeFlowWidth` | 流程图宽度变化时触发 | `width: Number` — 新的宽度值 |
+
+### Slots
+
+无对外插槽。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（流程实例）
+```vue
+<yl-flow-chart
+  :bpmnObj="bpmnData"
+  :key="flowChartKey"
+  @changeFlowWidth="handleWidthChange"
+/>
+```
+
+```js
+// async mounted() {
+//   const res = await this.$axios.get('/zqyl-workflow-api/flowable/act/process/getBpmn', { params });
+//   this.bpmnData = res.data.data;
+//   this.flowChartKey = Date.now();
+// }
+```
+
+### 模板预览
+```vue
+<yl-flow-chart :bpmnObj="bpmnData" :isModel="true" btnName="审批" />
+```
+
+## 注意事项
+- `bpmnObj` 须由接口赋值；**禁止**在业务页长期手写完整 BPMN 假数据，接口未就绪时先空对象，请求后再更新并刷新 `:key`。
+- `isModel: true` 展示模板配置（审批企业/岗位/审批人）；`false` 展示实例进度（完成人、时间、状态）。
+- 数据变化后更新 `:key`（如 `Date.now()` 或 `Math.random()`）以强制组件重绘。
+- 监听 `changeFlowWidth` 调整外层容器宽度或开启横向滚动，避免宽流程图被截断。
+- 组件基于 dagre-d3 渲染；依赖项目已注入的 `$function.BASE.getBrowser()`。