@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

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

@@ -0,0 +1,103 @@
+---
+name: xiaoma-zqyl-gauge-chart-front
+description: 前台仪表盘（进度/完成度、刻度区间、详情格式化）的 Vue2 + zqyl-component-base 实现规范（ylGaugeChart）。在用户提及 ylGaugeChart、yl-gauge-chart、仪表盘、进度仪表盘、完成度，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the gauge-chart (ylGaugeChart) component on a ZQYL front page.
+---
+
+# 仪表盘（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`gaugeChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-gauge-chart」、「ylGaugeChart」、「仪表盘」、「进度仪表盘」时。
+
+不适用：多指标对比 → 使用 `ylBarChart`；占比构成 → 使用 `ylPieChart`；简单静态摘要 → 使用 `ylDataCensus`。
+
+## API（ylGaugeChart）
+
+> 标签：`<yl-gauge-chart>` / `ylGaugeChart`；须在入口 `import ylGaugeChart from 'zqyl-component-base/lib/ylGaugeChart'` + `Vue.component('ylGaugeChart', ylGaugeChart)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 是否必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `chartData` | Object | `{}` | 是 | 图表配置数据对象 |
+| `id` | String | `'GaugeChart'` | 否 | 图表容器 DOM id，同页多图须唯一 |
+| `height` | String | `'400px'` | 否 | 图表高度 |
+
+### `chartData` 配置项
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `titleText` | String | `''` | 图表标题文本 |
+| `seriesData` | Object | - | 仪表盘数据 `{ name, value }` |
+| `seriesSection` | Array | - | 数值范围 `[最小值, 最大值]` |
+| `seriesDetailFormatter` | String \| Function | `'{value}'` | 中心详情格式化 |
+| `colorList` | Array | `[]` | 自定义颜色数组 |
+
+### Events / Slots
+
+无对外事件与插槽。
+
+### Methods
+
+| 方法名 | 说明 |
+| --- | --- |
+| `setEchartOption()` | 父组件数据变化后通过 `ref` 调用，更新并重新渲染图表 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法
+```vue
+<yl-gauge-chart :chartData="gaugeData" id="basicGaugeChart" height="400px" />
+```
+
+// gaugeData: { titleText, seriesSection: [0, 100], seriesDetailFormatter: '{value} km/h', seriesData: { name, value } }
+
+### 数据更新后刷新
+```js
+// this.chartData = await fetchGaugeData();
+// this.$refs.gaugeChart.setEchartOption();
+```
+
+## 注意事项
+- `chartData` 由接口或 `computed` 赋值；**禁止**在规范页手写长期静态假数据，接口未就绪时先空结构，请求后再更新。
+- `seriesData` 为**单个对象**（非数组），必须包含 `name` 与 `value`。
+- 未设置 `seriesSection` 时默认刻度范围为 0–100；`seriesDetailFormatter` 支持 ECharts 字符串模板或函数。
+- 同页多个 `<yl-gauge-chart>` 时 `id` 必须唯一，否则 ECharts 容器冲突。
+- 组件基于 ECharts 5.x（随 `zqyl-component-base` 依赖）；内置半圆进度样式，窗口 resize 时自动调整尺寸。

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

@@ -0,0 +1,125 @@
+---
+name: xiaoma-zqyl-heatmap-chart-front
+description: 前台ECharts 热力图（日历热力图、矩阵热力图、visualMap）的 Vue2 实现规范（ECharts Heatmap）。在用户提及热力图、heatmap、ECharts 热力图、日历热力图、渠道时序热力图、矩阵热力图，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the heatmap-chart (ECharts Heatmap) component on a ZQYL front page.
+---
+
+# 热力图（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`heatmapChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 需要展示**按日/按日历的密度分布**（渠道时序、活跃日历、交易量热力）。
+- 需要展示**双类目矩阵密度**（时段×星期、地区×指标等）。
+- 用户提到「热力图」、「heatmap」、「日历热力图」、「ECharts 热力图」时。
+
+不适用：折线/柱状/饼图等标准图表 → 优先 `ylLineChart` / `ylBarChart` / `ylPieChart`；静态指标卡片 → `ylDataCensus`。
+
+> **说明**：`zqyl-component-base` 暂无 `ylHeatmapChart` 封装，业务层直接使用 **ECharts 5.x**（项目内随依赖已安装）。可参考 `zqyl-manager` 的 `jointVentureYx/components/echart.vue`（`chartType: 'heatmap'`）。
+
+## API（ECharts 热力图）
+
+### 依赖引入
+
+```js
+import * as echarts from 'echarts';
+```
+
+### 日历热力图（calendar + heatmap）
+
+| 配置项 | 类型 | 说明 |
+| --- | --- | --- |
+| `calendar.range` | `[String, String]` | 日期范围，如 `['2024-06-13', '2025-06-13']` |
+| `calendar.cellSize` | `Array` | 单元格 `[宽, 高]`，可按视口响应式调整 |
+| `series.data` | `Array` | 每项 `[date, value, …]`，date 为 `YYYY-MM-DD` |
+| `visualMap` | `Object` | 颜色映射；日历场景可 `show: false` |
+| `tooltip` | `Object` | 建议 `trigger: 'item'`，formatter 展示日期与业务字段 |
+
+### 直角坐标热力图（category × category）
+
+| 配置项 | 类型 | 说明 |
+| --- | --- | --- |
+| `xAxis.type` / `yAxis.type` | `String` | 均为 `'category'` |
+| `xAxis.data` / `yAxis.data` | `Array` | 类目列表 |
+| `series.data` | `Array` | 每项 `[xIndex, yIndex, value]` |
+| `visualMap` | `Object` | 连续型颜色映射，建议 `calculable: true` |
+
+### Events / Slots
+
+无 Vue 组件封装；ECharts 实例可监听 `click` 等原生事件。
+
+### 生命周期
+
+| 阶段 | 说明 |
+| --- | --- |
+| `mounted` | `echarts.init(dom)` + `setOption(option)` |
+| 数据更新 | `chart.setOption(newOption, true)` 或 `clear` 后重设 |
+| `resize` | 监听窗口变化调用 `chart.resize()`；日历热力图同步更新 `cellSize` |
+| `beforeDestroy` | `chart.dispose()` 并移除 resize 监听 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 日历热力图
+```vue
+<div ref="heatmap" style="height: 320px" />
+```
+
+```js
+import * as echarts from 'echarts';
+
+// chartData: { range: [start, end], series: [[date, amount, count], …], tooltip }
+const option = {
+  visualMap: { show: false, min: 0, max: 1000, inRange: { color: ['#eff3f7', '#57b628'] } },
+  calendar: { range: chartData.range, cellSize: [20, 24] },
+  series: { type: 'heatmap', coordinateSystem: 'calendar', data: chartData.series },
+  tooltip: chartData.tooltip,
+};
+this.chart = echarts.init(this.$refs.heatmap);
+this.chart.setOption(option);
+```
+
+### 直角坐标热力图
+```js
+// series: [[xIndex, yIndex, value], …]
+series: [{ type: 'heatmap', data: series, label: { show: true } }]
+```
+
+## 注意事项
+- 热力图数据须由接口或 computed 赋值；接口返回后组装 `series`，**禁止**在业务页长期维护大段静态假数据。
+- 日历热力图数据格式与 manager `channelTime.vue` 一致：`[[loanApplyTime, loanAmtSum, loanNumber], …]`，tooltip 按需格式化金额/笔数。
+- 同页多个 ECharts 实例时容器 DOM 须独立，`dispose` 避免内存泄漏。
+- 窄屏下缩小 `calendar.cellSize` 与外层高度，避免横向溢出；可参考 manager `responsiveConfig()`。
+- ECharts 版本随项目依赖（当前 5.3.x）；与 `yl*Chart` 组件共用同一 echarts 包。

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

@@ -0,0 +1,136 @@
+---
+name: xiaoma-zqyl-line-chart-front
+description: 前台趋势折线图（单折线/多折线/折柱组合、平滑曲线、面积阴影）的 Vue2 + zqyl-component-base 实现规范（ylLineChart）。在用户提及 ylLineChart、yl-line-chart、折线图、趋势图、多折线、折线柱状组合，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the line-chart (ylLineChart) component on a ZQYL front page.
+---
+
+# 折线图（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`lineChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-line-chart」、「ylLineChart」、「折线图」、「趋势图」时。
+
+不适用：仅展示若干静态指标摘要（描述 + 数值）→ 使用 `ylDataCensus`；复杂定制图表 → 业务层 ECharts。
+
+## API（ylLineChart）
+
+> 标签：`<yl-line-chart>` / `ylLineChart`；须在入口 `import ylLineChart from 'zqyl-component-base/lib/ylLineChart'` + `Vue.component('ylLineChart', ylLineChart)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 是否必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `chartData` | Object | `{}` | 是 | 图表配置数据对象 |
+| `id` | String | `'LineChart'` | 否 | 图表容器 DOM id，同页多图须唯一 |
+| `height` | String | `'400px'` | 否 | 图表高度 |
+
+### `chartData` 配置项
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `titleText` | String | `''` | 图表标题 |
+| `xAxis` | Object | - | X 轴配置，参考 ECharts `xAxis` |
+| `yAxis` | Object \| Array | - | Y 轴配置，参考 ECharts `yAxis` |
+| `grid` | Object | `{}` | 网格边距，参考 ECharts `grid` |
+| `seriesData` | Array | `[]` | **单折线**数据数组 |
+| `seriesJson` | Array | `[]` | **多系列**配置（多折线 / 折柱组合） |
+| `smooth` | Boolean | `false` | 是否平滑曲线 |
+| `seriesColor` | String | - | 单折线颜色 |
+| `serieAareaStyle` | Boolean | `false` | 是否显示折线下方面积阴影（组件库字段名） |
+
+### `seriesJson[]` 项字段
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `name` | String | 系列名称（图例） |
+| `type` | String | `'line'` \| `'bar'` 等 |
+| `data` | Array | 数据数组 |
+| `color` | String | 系列颜色 |
+| `smooth` | Boolean | 是否平滑（可被 chartData.smooth 覆盖） |
+| `labelShow` | Boolean | 是否显示数据标签 |
+| `seriesLable` | Object | 数据标签配置（含 formatter 等） |
+| `stack` | String | 堆叠标识 |
+| `xAxisIndex` / `yAxisIndex` | Number | 使用的坐标轴索引 |
+
+### Events / Slots
+
+无对外事件与插槽。
+
+### Methods
+
+| 方法名 | 说明 |
+| --- | --- |
+| `setEchartOption()` | 父组件数据变化后通过 `ref` 调用，更新并重新渲染图表 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（单折线）
+```vue
+<yl-line-chart :chartData="chartData" id="basicLineChart" height="400px" />
+```
+
+// chartData 示例结构：
+// { titleText, xAxis: { type, data }, yAxis: { type }, seriesData, smooth, seriesColor }
+
+### 多折线图
+```vue
+<yl-line-chart :chartData="multiLineData" id="multiLineChart" height="400px" />
+```
+
+// multiLineData 使用 seriesJson: [{ name, type: 'line', data, color }, ...]
+
+### 折线 + 柱状组合
+```vue
+<yl-line-chart :chartData="comboData" id="barLineChart" height="400px" />
+```
+
+// comboData.seriesJson 中 type 分别为 'bar' 与 'line'
+
+### 数据更新后刷新
+```js
+// this.chartData = await fetchChartData();
+// this.$refs.lineChart.setEchartOption();
+```
+
+## 注意事项
+- `chartData` 由接口或 `computed` 赋值；**禁止**在规范页手写长期静态假数据，接口未就绪时先空结构，请求后再更新。
+- 单折线用 `seriesData`；多系列（多折线、折柱组合）用 `seriesJson`，不要混用导致渲染异常。
+- 同页多个 `<yl-line-chart>` 时 `id` 必须唯一，否则 ECharts 容器冲突。
+- 面积阴影字段为组件库约定的 `serieAareaStyle`（非 `seriesAreaStyle`）。
+- 组件基于 ECharts 5.x（随 `zqyl-component-base` 依赖）；`xAxis` / `yAxis` / `grid` 可直接透传 ECharts 配置。

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

@@ -0,0 +1,130 @@
+---
+name: xiaoma-zqyl-map-chart-front
+description: 前台ECharts 中国地图（geo、visualMap、地域数据分布）的 Vue2 实现规范（ECharts Map）。在用户提及地图、中国地图、ECharts 地图、地域分布、用户来源地图、mapChart，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the map-chart (ECharts Map) component on a ZQYL front page.
+---
+
+# 地图（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`mapChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 需要展示**按省/市/区域的数据分布**（用户来源、企业分布、地域指标对比）。
+- 需要在中国地图上以颜色深浅/分段图例表达数值或占比。
+- 用户提到「地图」、「中国地图」、「ECharts 地图」、「地域分布」、「用户来源地图」时。
+
+不适用：时间趋势 → `ylLineChart`；结构占比 → `ylPieChart`；矩阵/日历密度 → 热力图规范；流程图 → `ylFlowChart`。
+
+> **说明**：`zqyl-component-base` 暂无 `ylMapChart` 封装，业务层直接使用 **ECharts 5.x**。可参考 `zqyl-manager` 的 `analysisData/components/Echart.vue`（`isAxisChart: 'map'`）与 `generalView.vue`。
+
+## API（ECharts 中国地图）
+
+### 依赖引入
+
+```js
+import * as echarts from 'echarts';
+import chinaGeo from '@/path/to/data.json'; // 与 manager analysisData/components/data.json 同源
+echarts.registerMap('china', chinaGeo);
+```
+
+### chartData 结构
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `series` | `Array` | 地图数据，每项 `{ name, value, percentage? }`；`name` 须与 GeoJSON 区域名一致 |
+| `visualMap` | `Object` | 分段 `piecewise` 或连续 `continuous`；无数据时可 `{ show: false }` |
+| `tooltip` | `Object` | 建议 `trigger: 'item'`，formatter 过滤「南海诸岛」 |
+
+### geo / series 关键项
+
+| 配置项 | 类型 | 说明 |
+| --- | --- | --- |
+| `geo.map` | `String` | 固定 `'china'`（与 registerMap 名称一致） |
+| `geo.aspectScale` | `Number` | 长宽比，manager 默认 `0.8` |
+| `geo.zoom` | `Number` | 视觉缩放，manager 默认 `1.2` |
+| `geo.roam` | `Boolean` | 是否缩放/平移，默认 `false` |
+| `series.type` | `String` | `'map'` |
+| `series.geoIndex` | `Number` | 与 geo 关联，通常为 `0` |
+| `series.selectedMode` | `Boolean` | 建议 `false`，取消区域选中交互 |
+
+### Events / Slots
+
+无 Vue 组件封装；ECharts 实例可监听 `click` 等原生事件。
+
+### 生命周期
+
+| 阶段 | 说明 |
+| --- | --- |
+| 首次渲染 | `registerMap` 一次 + `echarts.init(dom)` + `setOption(option)` |
+| 数据更新 | `chart.setOption(newOption, true)` 或 `clear` 后重设 |
+| `resize` | 监听窗口变化调用 `chart.resize()` |
+| `beforeDestroy` | `chart.dispose()` 并移除 resize 监听 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 中国地图（分段 visualMap）
+```vue
+<div ref="mapChart" style="height: 520px" />
+```
+
+```js
+import * as echarts from 'echarts';
+import chinaGeo from './data.json';
+
+echarts.registerMap('china', chinaGeo);
+const option = {
+  tooltip: { trigger: 'item', formatter: (item) => item.data?.percentage ? `${item.name} ${item.data.percentage}%` : `${item.name} ${item.value}` },
+  visualMap: { show: true, type: 'piecewise', right: 50, bottom: 50, pieces: [...] },
+  geo: { map: 'china', aspectScale: 0.8, zoom: 1.2, roam: false, top: '10%' },
+  series: [{ type: 'map', geoIndex: 0, selectedMode: false, data: provinceList }],
+};
+this.chart = echarts.init(this.$refs.mapChart);
+this.chart.setOption(option);
+```
+
+### 连续 visualMap + 漫游
+```js
+visualMap: { type: 'continuous', min: 0, max: 100, calculable: true, inRange: { color: ['#eff3f7', '#57b628'] } },
+geo: { map: 'china', roam: true, ... }
+```
+
+## 注意事项
+- 地图数据须由接口赋值；接口返回后组装 `series`，**禁止**在业务页长期维护大段静态假数据。
+- 省份名须与 GeoJSON 中 `properties.name` 一致（如「广东」而非「广东省」）；不匹配则区域不着色。
+- tooltip formatter 建议排除「南海诸岛」，与 manager `Echart.vue` 一致。
+- `registerMap` 全局只需执行一次；同页多图共用同一 map 名称 `china`。
+- 同页多个 ECharts 实例时容器 DOM 须独立，`dispose` 避免内存泄漏。
+- ECharts 版本随项目依赖（当前 5.3.x）；GeoJSON 文件随项目静态资源引入，勿依赖 CDN。

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

@@ -0,0 +1,63 @@
+---
+name: xiaoma-zqyl-message-feedback-front
+description: 前台轻量 Toast 与打断式对话框反馈（成功/警示/确认/引导下一步）的 Element UI 实现规范（Message / MessageBox）。在用户提及 Message、MessageBox、$message、$confirm、轻量提示、操作反馈，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the message-feedback (Message / MessageBox) component on a ZQYL front page.
+---
+
+# Message / MessageBox（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`messageFeedback`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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()`。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+## 何时使用
+
+- **Message**：主动操作后简短反馈，约 3 秒消失；文案如「提交成功」。
+- **MessageBox**：打断操作；成功引导下一步、失败说明、危险确认、多按钮选择。
+- **MessageBox 不传 `type`**：不展示左侧 success/warning 等状态图标，仅保留标题 + 文案 + 按钮。
+- **ylTips 常驻**：平台变更/权限类需持续可见的警示（可关闭）。
+
+勿用 Message：需用户记忆的信息、复杂引导、整页结果反馈。
+
+## 代码示例
+```js
+this.$message.success('提交成功');
+// 不传 type，避免左侧状态图标
+this.$confirm('提交成功，是否查看进度？', '提示', { confirmButtonText: '去看看', cancelButtonText: '取消' }).then(...);
+```
+
+## 注意事项
+- Message 文案宜短；需引导下一步用 MessageBox 或结果页。
+- MessageBox 调用时**不要传 `type`**（success/warning/info/error），左侧不展示状态图标。
+- 平台维护类通知用 `ylTips` + 可关闭，非 Message。