@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

package/src/zqyl-skills/backend/xiaoma-zqyl-list-page-backend/pages/listPage.md

@@ -0,0 +1,306 @@
+---
+title: 列表页（后台）
+---
+
+
+# 列表页（后台）
+
+你是一个前端页面实现助手。以本技能描述的列表页骨架为**基线**，结合需求/原型做区块增删改；含标准列表与统计+列表、表格带标签、双重标签、极简查询等变体场景；遵守固定约定与组件 skill（含按需 `ylTips`），不得破坏 `ref` 联动与平台组件选型。
+
+## 平台与参考
+
+- 平台：后台
+- platformType（ylTitle / ylSearchForm）：`yxManager`
+- 模板数据名：`adminListPage`
+- 布局类型：**后台管理列表**（标题 → 可选 Tab → `yl-tabs-table` 内 `ylSearchForm` + `ylTableSimple`；含统计+列表、表格带标签、双重标签、极简查询变体）
+
+## 页面说明
+
+后台列表页面：标题栏 + ylSearchForm + ylTableSimple 同处 yl-tabs-table 卡片；预览含二级标题、统计+列表、表格带标签、双重标签、极简查询等场景
+
+## 何时使用
+
+当用户需要新建或改造**查询列表页**（含搜索条件 + 数据表格 + 分页）时，使用本 skills。
+- 信号：列表、筛选、查询重置、表格列、行内操作、导出/新增、Tab 切换列表维度。
+- 不适用：纯表单页、纯详情页（用 `xiaoma-zqyl-form-detail-page-backend`）；**无表格的仪表盘/看板无专用页面模板** —— 回到 `xiaoma-zqyl-ui-spec` 的「数据统计看板/仪表盘」段落，用 title + data-census + `*-chart` 组件 skill 自建骨架。
+
+## 需求/原型差异落地
+
+本 skill 提供**常用列表页模板**作为基线。实际开发中，需求文档或原型常在基线上**增删改区块**；生成代码前须先做差异对照，**不要**无视需求硬套默认示例。
+
+### 工作流（有需求文档或原型时必做）
+
+```
+1. 通读需求/原型，列出可见区块（标题、Tab、查询、统计、表格、弹窗等）
+2. 对照下方「后台标准骨架」，逐块标注：保留 / 删减 / 调整内容
+3. 仅对「调整」和「新增」区块改模板代码；「删减」区块整段移除
+4. 输出一整页 Vue 代码，并在回复中简要说明相对默认模板删改了哪些区块
+```
+
+### 后台标准骨架（对照用，非强制全保留）
+
+**`ylTitle`** → **`el-card.yl-tabs-table`（内嵌 `ylSearchForm` + `ylTableSimple`；可选标题行 `el-row.mb16`）** → **[页级 Tab `yl-title_tabs`]** → **[统计区]** → **[表格内 Tab]** → **[弹窗]**
+### 跳转类操作（三端通用）
+
+- **定义**：跳转其他页面/外链、**不改变当前列表数据**的操作（如下载中心、任务中心等）。
+- **组件选型**：**优先 `ylButton`**（如 `type="download"`）；仅当 `ylButton` 无法满足样式/交互时再使用 `el-link` + 图标。详见 `xiaoma-zqyl-button-backend`。
+- **落位原则**：**以需求/原型为准**；下列为各端**常用**位置，无明确要求时可作默认参考，勿硬套。
+- **前台/后台常用落位**：表格卡 `el-row.mb16` 的 `text-right` 区域靠左（与 `el-button` 表格操作并列）；亦可按需求放 `ylTitle` 右侧等，见 `xiaoma-zqyl-table-simple-backend`。
+
+
+方括号 `[...]` 为**可选区块**；需求/原型未出现则**不生成**，勿为「凑完整示例」强行保留。
+方括号区块的**插入位置**见下文「列表变体选型」「页面骨架」，非一律接在本行箭头末端。
+
+### 常见差异与处理
+
+| 需求/原型信号 | 相对默认模板 | 处理 |
+| --- | --- | --- |
+| 无 Tab | 示例含页级 Tab | **删掉** `el-card.yl-title_tabs` 整块 |
+| 无表格标题行/右侧按钮 | 示例含 `el-row.mb16` | **删掉**标题行；操作并入 `ylTitle` 右侧插槽或行内 `handle` |
+| 标准列表 + 表格联动 | 示例含 `@searchDate` / `onSearch` | **去掉**事件与方法，由 `tableRefs` 自动查询 |
+| 查询项 < 3 个 | 组件自动隐藏重置 | **勿**写 `@resetDate` / `onReset`（见 `xiaoma-zqyl-search-form-backend` skill） |
+| Tab 在表格上方切换维度 | 页级 Tab | 改用**表格卡片内 Tab**（见 `xiaoma-zqyl-table-simple-backend` skill），**不要**再保留页级 Tab 卡 |
+| 表格上方指标摘要 | 无统计区 | 在 `ylTitle` 与查询区之间插入 **`ylDataCensus`**（见 `xiaoma-zqyl-data-census-backend` skill） |
+| 温馨提示/说明块在查询区下、表格上 | 默认模板无提示或提示在标题下 | 在 `ylSearchForm` 与 `el-card.yl-tabs-table` **之间**插入独立 **`ylTips`**（`class="list-page-tip"`）；**禁止**放入表格卡内，详见 `xiaoma-zqyl-tips-backend` |
+| 多选 + 批量操作 | 仅行内操作 | 表头加 `type: 'selection'`，标题行右侧放批量按钮 |
+| 页头查看/编辑/删除 +「选中一条数据」 | 默认加 radio/selection 列 | **不加**额外列；`@changeRowData` 行点击选中；未选中 Toast「请您选择一条数据」（见 `xiaoma-zqyl-table-simple-backend`） |
+| 仅写「默认按 XX 降序/升序」 | 列加 `sortable` / `defaultSort` | **不加** `sortable`、**不写** `defaultSort`；默认顺序由列表**接口**保证 |
+| 弹窗选行/编辑 | 无弹窗 | 补 **`ylDialog`** + 内嵌表格或表单（见 `xiaoma-zqyl-dialog-backend` skill） |
+| 页内上传 | 无上传 | 在表单区或弹窗内用 **`ylFileUpload`**（见 `xiaoma-zqyl-file-upload-backend` skill） |
+| 字段/列/接口与示例不同 | 示例为结构占位 | **只替换**标题、`searchParmas.parmas`、`tableData.header`、**`INTERFACE` 接口常量**，**不改**区块顺序除非需求要求；**禁止**填充 mock 行 |
+| 布局层级与上表完全不同 | 仍像列表但结构非标 | 优先满足需求层级；保留 `ref` 联动、`platformType`、`isCard` 等硬约束 |
+
+### 优先级
+
+1. **需求文档 / 原型 / 用户明确描述**（最高）
+2. 本 skill 的**固定约定**与配套组件 skill（`ref` 名、`platformType`、`isCard`、中台组件选型等）
+3. 规范平台默认预览示例（仅作基线，可被 1 覆盖删减）
+
+### 硬约束（需求也不得破坏）
+
+- **platformType** 固定为 `yxManager`（与当前平台一致）
+- 前台查询区 `:isCard="true"` 独立；后台查询区 `:isCard="false"` 与表格同卡
+- `ylSearchForm` ↔ `ylTableSimple` `ref` 双向联动名保持一致
+- 公共 class（`yl-tabs-table`、`yl-title_tabs`、`yl_manager_container` 等）用项目 `common.less`，**禁止**在页面 `scoped` 重写
+
+## 配套组件 skills（必须一并遵守）
+
+本 skills 只描述**页面级骨架与拼装顺序**；下列组件的 Props、列配置、查询项结构等细节以已安装的独立组件 skill 为准，生成代码时不得与之冲突：
+
+| 区域 | 组件 | 组件 skill |
+| --- | --- | --- |
+| 页头 | `ylTitle` | `xiaoma-zqyl-title-backend` |
+| 查询区 | `ylSearchForm` | `xiaoma-zqyl-search-form-backend` |
+| 数据区 | **`ylTableSimple`** | `xiaoma-zqyl-table-simple-backend` |
+| 统计区（按需） | `ylDataCensus` | `xiaoma-zqyl-data-census-backend` |
+| 弹窗（按需） | `ylDialog` | `xiaoma-zqyl-dialog-backend` |
+| 上传（按需） | `ylFileUpload` | `xiaoma-zqyl-file-upload-backend` |
+| 提示（按需） | `ylTips` | `xiaoma-zqyl-tips-backend` |
+| 带图标按钮（按需） | `ylButton` | `xiaoma-zqyl-button-backend` |
+
+> 用户只描述业务字段时：先用本 skills 搭页面骨架，再按上表调用对应组件 skills 填充 `searchParmas.parmas`、`tableData.header`、行内 `handle` 等。
+
+## 固定约定（全列表页通用）
+
+| 约定 | 值 | 说明 |
+| --- | --- | --- |
+| 查询表单 ref | `ylSearchForm` | 勿改名，便于与表格联动 |
+| 表格 ref | `ylTableSimple` | `tableRefsName` / `searchRefsName` 均指向这对 ref |
+| 查询 → 表格 | `yl-search-form` 设 `:tableRefs="$refs"` `tableRefsName="ylTableSimple"`；表格设 `:search="$refs"` `searchRefsName="ylSearchForm"` | 双向关联 |
+| 搜索区位置 | 前台：表格外**独立一块**（`:isCard="true"`，组件自带卡片）；后台：在 `el-card.yl-tabs-table` **内**、表格上方 | 勿把前台搜索放进表格 `el-card`；有页级 Tab/`ylTips` 时搜索区在其下方，勿塞进 `el-tab-pane` |
+| isCard | 前台 `true`；后台 `false` | 前台查询区独立成卡；后台与表格同处 `yl-tabs-table` |
+| platformType | `yxManager` | 传给 `ylTitle`、`ylSearchForm`（须与当前平台一致） |
+| POST 列表 | `request.type: 'axiosJson'`, `request.method: 'post'` | GET 用默认 `axios` + `get` |
+| 公共 class | `yl-tabs-table`、`yl-tabs-title`、`lh32`、`text-right`、`mb16`、`yl-title_tabs`、`yl-tabs` | 来自业务项目 `common.less`，**禁止**在页面 `scoped` 中重复定义 |
+| 表格标题行 | `el-row.mb16` + `el-col.yl-tabs-title.lh32` + `el-col.text-right` | 标题加 `lh32` 与右侧按钮垂直居中；右侧放导出/新增等；**仅最右 1 个**实心 `type="primary"`，其余全部 `type="primary" plain` |
+| 页头操作（`ylTitle` 右侧插槽） | default 插槽内 `el-button` | 与表格标题行同规则：查看/编辑/删除/导入等用 `primary plain`，最右主操作（如新增）为实心 `primary` |
+
+## 输出要求
+
+## 数据与接口（禁止 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()`。
+
+- 输出**一整页**可粘贴的 Vue2 单文件组件片段（`<template>` + `<script>`），按需求/原型替换标题、查询项、表头、接口地址，并删减不需要的可选区块。
+- 只输出**一种**与当前平台且与需求匹配的布局（前台 / 中台 / 后台），不要并列多种方案。
+- 有需求/原型时：回复中**用一两句话**说明相对默认模板保留/删减了哪些区块（如「无页级 Tab、无表格标题行」）。
+- 列表须接接口：`searchParmas.request.url` 写 `INTERFACE.xxx`；`tableData.loadData` 保持 `[]`，由 `ylTableSimple` 查询填充；禁止本地 mock 与写死分页 total。
+- `ylSearchForm` 已配置 `:tableRefs` + `tableRefsName` 时：**勿**写 `@searchDate` / `@resetDate` 及 `onSearch` / `onReset`；**勿**写 `:toggleNum`（默认 5）；`parmas` 拼写为历史约定，勿写成 `params`。
+- 仅 Tab 切换、查询前校验（`beforeSearch`）等特殊场景才绑定 `@searchDate` / `@resetDate`。
+
+## 引入与注册
+
+> **zqyl-component-base**：公共组件须在**项目入口文件**（如 `entry_main.js`、`main.js`）按**真实组件名**逐个 `import` 并以 `Vue.component` 全局注册；样式在入口 `import 'zqyl-component-base/lib/theme-chalk/component.css'`。**禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)` 全量注册。
+
+生成前先检查项目入口：
+- 入口**已**按组件名注册所需 `yl*` 组件 → 页面直接使用 `<yl-*>`，**勿**在页面 SFC 重复 import
+- 入口**缺少**本页用到的组件 → **仅**在入口补注册缺失项（按组件名逐个 import），**勿**改页面 SFC 做局部注册，**勿**用全量 `Vue.use`
+
+入口按组件名注册示例（仅列举本任务用到的组件，勿全量 `Vue.use`）：
+
+```js
+import 'zqyl-component-base/lib/theme-chalk/component.css';
+import ylTitle from 'zqyl-component-base/lib/ylTitle';
+import ylSearchForm from 'zqyl-component-base/lib/ylSearchForm';
+import ylTableSimple from 'zqyl-component-base/lib/ylTableSimple';
+import ylTips from 'zqyl-component-base/lib/ylTips';
+import ylButton from 'zqyl-component-base/lib/ylButton';
+
+Vue.component('ylTitle', ylTitle);
+Vue.component('ylSearchForm', ylSearchForm);
+Vue.component('ylTableSimple', ylTableSimple);
+Vue.component('ylTips', ylTips);
+Vue.component('ylButton', ylButton);
+// 项目 legacy 组件（如 ylManagerTitle）可同样 Vue.component，勿覆盖 base 同名组件
+```
+
+页面 script 只需业务逻辑与接口，模板直接使用全局组件，例如：
+
+```vue
+<yl-title platformType="yx" title="列表页标题" :disabledBack="true" />
+```
+
+
+## 提示（ylTips，按需）
+
+- `ylTips` 落位**须先对照原型纵向位置**，再选用下列之一；详见 `xiaoma-zqyl-tips-backend`「列表页落位（强制选型）」。
+
+| 原型位置 | 结构顺序 |
+| --- | --- |
+| 标题下、查询前 | `ylTitle` → `ylTips.page-global-tip` → `ylSearchForm` → 表格卡 |
+| **查询下、表格上**（最常见误放场景） | `ylSearchForm` → `ylTips.list-page-tip` → `el-card.yl-tabs-table`（**提示与表格卡同级**） |
+| 表格卡内短文案 + 按钮 | `el-card.yl-tabs-table` 内 `el-row.mb16` 左侧纯文本；**不用** `ylTips` |
+
+- **禁止**：原型显示查询区与表格为两块独立区域时，将整块 `ylTips` 放入 `el-card.yl-tabs-table` 与 `ylTableSimple` 同卡。
+- **间距**：全局提示 `margin-top: 16px`（`page-global-tip`）；查询与表格间 `margin-top: 16px`（`list-page-tip`）；表单详情卡片内 `margin-bottom: 16px`（`card-inner-tip`）。详见 `xiaoma-zqyl-tips-backend`。
+- 警示类常显用 `showCloseIcon: false`；可关闭说明监听 `@hiddenTips`。
+
+## 列表变体选型
+
+| 变体 | 结构要点 |
+| --- | --- |
+| 标准列表 | 最基础：`ylTitle` → 查询 → 表格（**无页级 Tab**） |
+| 二级标题 | `ylTitle` → `el-card.yl-title_tabs`（页级 Tab）→ 查询 → 表格；切换 Tab 保留各 Tab 查询条件（业务层） |
+| 统计 + 列表 | `ylTitle` → `ylDataCensus` → `ylSearchForm` → [按需 `ylTips`] → `el-card.yl-tabs-table` |
+| 统计 + 列表 + 温馨提示 | `ylTitle` → [页级 Tab] → `ylDataCensus` → `ylSearchForm` → **`ylTips`（独立块）** → `el-card.yl-tabs-table`；提示**不在**表格卡内 |
+| 表格带标签 | 后台：`ylTitle` → `el-card.yl-tabs-table` 内 `ylSearchForm` → `el-tabs` → 操作提示行 → `ylTableSimple`；前台：查询独立成卡（`:is-card="true"`）后接表格卡；改查询各 Tab 同步 |
+| 双重标签 | `ylTitle` → `el-card.yl-title_tabs`（页级 Tab）→ `el-card.yl-tabs-table` 内 Tab + 查询 + 表格（二级标签支持查询） |
+| 极简查询 | 少量 `ylSearchForm` 查询项；表格操作按钮用 `slot="rightBtn"` 与查询区同一行 → `ylTableSimple` |
+
+### 变体注意事项
+
+- 极简查询：整体操作（新增/导出等）放 `ylSearchForm` 的 **`rightBtn`** 插槽，与查询条件同一行；查询项宜少（通常 < 3 个，仅「查询」无「重置」）。
+- 批量导入弹窗由独立页面模板 **`xiaoma-zqyl-import-dialog-page-backend`** 描述，列表页仅保留触发按钮。
+- 统计区 `ylDataCensus` 的 `:list` 由接口赋值，禁止手写示例指标。
+- 整块 `ylTips`（温馨提示等）：默认落在 `ylSearchForm` 与 `el-card.yl-tabs-table` **之间**的独立块；**禁止**默认放入表格卡与 `ylTableSimple` 同模块，详见 `xiaoma-zqyl-tips-backend`。
+
+## 页面骨架
+
+**后台管理列表**：`ylTitle`（右侧操作）→ 可选 `el-card.yl-title_tabs.yl-tabs`（Tab）→ `el-card.yl-tabs-table`（`ylSearchForm` + `ylTableSimple`）。
+
+```vue
+<template>
+  <div class="list-page">
+    <yl-title
+      :platformType="'yxManager'"
+      title="后台列表页标题"
+      :disabledBack="true"
+    >
+      <el-button size="small" type="primary" plain>查看</el-button>
+      <el-button size="small" type="primary" plain>编辑</el-button>
+      <el-button size="small" type="primary" plain>批量导入</el-button>
+      <el-button size="small" type="primary">新增</el-button>
+    </yl-title>
+
+    <el-card class="yl-title_tabs yl-tabs">
+      <el-tabs v-model="activeTab" @tab-click="onTabChange">
+        <el-tab-pane label="变更申请记录" name="变更申请记录" />
+        <el-tab-pane label="管理员变更配置" name="管理员变更配置" />
+      </el-tabs>
+    </el-card>
+
+    <el-card class="yl-tabs-table">
+      <yl-search-form
+        ref="ylSearchForm"
+        :platformType="'yxManager'"
+        :searchParmas="searchParmas"
+        :tableRefs="$refs"
+        tableRefsName="ylTableSimple"
+        :isCard="false"
+        :load="!!searchParmas.request.url"
+      />
+      <yl-table-simple
+        ref="ylTableSimple"
+        :data="tableData"
+        :search="$refs"
+        searchRefsName="ylSearchForm"
+        :page="true"
+      />
+    </el-card>
+  </div>
+</template>
+```
+
+- **Tab 可选**：有 Tab 时单独一张 `el-card.yl-title_tabs`（内仅 `el-tabs`），与下方 `yl-tabs-table` 分两张卡；无 Tab 时省略 Tab 卡片，直接 `yl-tabs-table`。
+- 后台列表使用 `ylSearchForm` + `ylTableSimple`，**不要**误用中台专用的 `ylMpsTable`。
+
+## script 最小示例（联动）
+
+```js
+export default {
+  data() {
+    return {
+      activeTab: '变更申请记录',
+      searchParmas: {
+        routerPush: false,
+        request: {
+          url: '', // INTERFACE.xxxList
+          type: 'axios', // POST 列表改为 axiosJson
+          method: 'get',  // POST 列表改为 post
+          options: { companyName: '', certNo: '' },
+        },
+        parmas: [
+          { title: '企业名称', type: 'text', prop: 'companyName', placeholder: '请输入企业名称', formAttr: { clearable: true } },
+          { title: '证件号码', type: 'text', prop: 'certNo', placeholder: '请输入证件号码', formAttr: { clearable: true } },
+          // 查询项 ≥3 时组件自动显示「重置」，勿写 @resetDate / onReset
+        ],
+      },
+      tableData: {
+        loadData: [],
+        header: [
+          { type: 'index', label: '序号', width: 80 },
+          { prop: 'auditStatus', label: '审核状态', width: 100 },
+          { prop: 'companyName', label: '企业名称', width: 180, tooltip: true },
+          { prop: 'region', label: '所属地区', width: 100 },
+          { prop: 'registerTime', label: '注册时间', width: 160 },
+          { prop: 'submitTime', label: '提交时间', width: 160, sortable: true },
+          { prop: 'currentAuditor', label: '当前审核人', width: 110 },
+          { prop: 'auditor', label: '审核人', width: 90 },
+          { prop: 'auditTime', label: '审核时间', width: 110 },
+          { prop: 'payResult', label: '打款结果', width: 120 },
+        ],
+      },
+    };
+  },
+  methods: {
+    onTabChange() {
+      this.$refs.ylSearchForm?.reset?.();
+    },
+  },
+};
+```
+
+## 注意事项
+
+- 只生成与用户平台一致的骨架（当前为 **后台**）。
+- **跳转类操作**（三端）：优先 `ylButton`，满足不了再用 `el-link`；**落位以需求为准**，常用参考见上文「跳转类操作」— 中台 `ylManagerTitle` `#btn`，前台/后台表格卡标题行 `text-right` 靠左。
+- **`isCard` 勿写反**：前台查询区独立 → `true`；后台查询与表格同卡 → `false`。
+- 列配置、查询项类型、行内 `handle`、多选/合计/合并单元格等：严格遵循 `xiaoma-zqyl-table-simple-backend` / `xiaoma-zqyl-search-form-backend` 组件 skill。
+- 勿用 `operationBtn` 插槽替代「表格标题行 + 右侧按钮」的 `el-row` 布局（除非产品明确要求）。

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

@@ -0,0 +1,142 @@
+---
+name: xiaoma-zqyl-bar-chart-front
+description: 前台柱状图（横向/竖向、单柱/多柱/堆叠、数据标签）的 Vue2 + zqyl-component-base 实现规范（ylBarChart）。在用户提及 ylBarChart、yl-bar-chart、柱状图、条形图、堆叠柱状图、多柱状图，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the bar-chart (ylBarChart) component on a ZQYL front page.
+---
+
+# 柱状图（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`barChart`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-bar-chart」、「ylBarChart」、「柱状图」、「条形图」、「堆叠柱状图」时。
+
+不适用：趋势变化展示 → 使用 `ylLineChart`；仅展示若干静态指标摘要 → 使用 `ylDataCensus`。
+
+## API（ylBarChart）
+
+> 标签：`<yl-bar-chart>` / `ylBarChart`；须在入口 `import ylBarChart from 'zqyl-component-base/lib/ylBarChart'` + `Vue.component('ylBarChart', ylBarChart)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 是否必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `chartData` | Object | `{}` | 是 | 图表配置数据对象 |
+| `id` | String | `'BarChart'` | 否 | 图表容器 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 | `[]` | **多系列**配置（多柱/堆叠/横向） |
+| `seriesColor` | String | - | 单柱状图颜色 |
+| `showBackground` | Boolean | `false` | 是否显示柱条背景色 |
+| `colorList` | Array | - | 按 dataIndex 循环使用的颜色列表 |
+| `tooltip` | Object | - | 自定义 tooltip，覆盖默认配置 |
+| `dataset` | Object | - | ECharts dataset 数据源 |
+| `setEchartsData` | Object | - | 字段映射：`setSeriesName` / `setSeriesData` |
+
+### `seriesJson[]` 项字段
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `name` | String | 系列名称（图例） |
+| `type` | String | 默认 `'bar'` |
+| `data` | Array | 数据数组 |
+| `color` | String | 系列颜色 |
+| `colorList` | Array | 按柱索引循环着色 |
+| `stack` | String | 堆叠标识，相同值系列堆叠相加 |
+| `barWidth` | String \| Number | 柱宽（绝对值或百分比如 `'60%'`） |
+| `seriesLable` | Object | 数据标签配置（含 show、position、formatter 等） |
+| `emphasisFocus` | String | 高亮聚焦：`none` \| `self` \| `series` |
+| `xAxisIndex` / `yAxisIndex` | Number | 使用的坐标轴索引 |
+
+### Events / Slots
+
+无对外事件与插槽。
+
+### Methods
+
+| 方法名 | 说明 |
+| --- | --- |
+| `setEchartOption()` | 父组件数据变化后通过 `ref` 调用，更新并重新渲染图表 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 竖向柱状图（单系列）
+```vue
+<yl-bar-chart :chartData="chartData" id="verticalBarChart" height="400px" />
+```
+
+// chartData: xAxis.type='category', yAxis.type='value', seriesJson: [{ type: 'bar', data }] 或 seriesData
+
+### 横向柱状图
+```vue
+<yl-bar-chart :chartData="horizontalData" id="horizontalBarChart" height="400px" />
+```
+
+// horizontalData: xAxis.type='value', yAxis.type='category' + yAxis.data 类目
+
+### 多柱状图 / 堆叠柱状图
+```vue
+<yl-bar-chart :chartData="multiBarData" id="multiBarChart" height="400px" />
+```
+
+// multiBarData.seriesJson: [{ name, type: 'bar', data, color }, ...]
+// 堆叠：各系列设置相同 stack 值，如 stack: 'total'
+
+### 数据更新后刷新
+```js
+// this.chartData = await fetchChartData();
+// this.$refs.barChart.setEchartOption();
+```
+
+## 注意事项
+- `chartData` 由接口或 `computed` 赋值；**禁止**在规范页手写长期静态假数据，接口未就绪时先空结构，请求后再更新。
+- 单柱状图用 `seriesData`；多系列（多柱、堆叠、横向标签）用 `seriesJson`，避免配置冲突。
+- 横向柱状图：`xAxis.type: 'value'`、`yAxis.type: 'category'`；竖向则相反。
+- 同页多个 `<yl-bar-chart>` 时 `id` 必须唯一，否则 ECharts 容器冲突。
+- 数据标签字段为组件库约定的 `seriesLable`（非 `seriesLabel`）。
+- 组件基于 ECharts 5.x（随 `zqyl-component-base` 依赖）；`xAxis` / `yAxis` / `grid` 可直接透传 ECharts 配置。

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

@@ -0,0 +1,108 @@
+---
+name: xiaoma-zqyl-button-front
+description: 前台导入/导出/下载模板/下载文件/上传且左侧带图标按钮，以及虚线边框按钮的 Vue2 实现规范（ylButton）。在用户提及 ylButton、yl-button、导入左侧图标、导出左侧图标、下载模板左侧图标、下载文件左侧图标、上传左侧图标、虚线边框按钮、outline 按钮，或需要在前台实现该组件时使用。适用于前台门户仓库（如 zqyl-crclopen，platformType `yx`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the button (ylButton) component on a ZQYL front page.
+---
+
+# 按钮（前台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：前台
+- platformType：`yx`
+- 组件条目：`button`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- **同时满足**：① 动作为「导入 / 导出 / 下载模板 / 下载文件 / 上传」之一；② 按钮**文字左侧需要显示图标**（使用组件内置 svg）。
+- 需要「新增/添加」一类**整行虚线边框按钮**入口（`btnType="outline"`）。
+
+不适用：
+- 仅提到「导入/导出/下载/上传」等动作，但**未要求左侧图标** → 使用 `el-button`（`plain` / `text` / `type="primary"` 等）。
+- 普通主按钮/次按钮（保存、取消、提交、新增等无内置图标要求）→ 使用 `el-button`。
+- 图标在右侧、或需自定义图标 → 不要滥用 `ylButton` 内置 svg。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 左侧图标文字按钮（上述 5 类动作）：`btnType: 'text'`（默认），`type` 取 `template` / `export` / `import` / `upload` / `download`。
+- 同类动作但需要 `el-button` 外观且仍要左侧图标：`btnType: 'button'`。
+- 虚线整行按钮：`btnType: 'outline'`。
+- 禁用态：`disabled`，建议外层配 `el-tooltip` 说明禁用原因。
+
+## API（ylButton）
+
+> 标签：`<yl-button>` / `ylButton`；须在入口 `import ylButton from 'zqyl-component-base/lib/ylButton'` + `Vue.component('ylButton', ylButton)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `type` | String | `template` | 内置图标类型：`template`（下载模板）/ `export` / `import` / `upload` / `download` |
+| `content` | String | `下载模板` | 按钮文案 |
+| `btnType` | String | `text` | `text`（文字+左侧图标）/ `button`（el-button）/ `custom` / `outline`（虚线整行） |
+| `disabled` | Boolean | `false` | 禁用态 |
+| `plain` | Boolean | `true` | 仅 `btnType=button` 生效：朴素/实心 |
+| `primary` | Boolean | `false` | 仅 `btnType=custom` 生效：主色实心风格 |
+| `cursorType` | String | `text` | 仅 `btnType=custom` 生效：控制 cursor 样式 |
+
+### Events
+
+| 事件名 | 说明 |
+| --- | --- |
+| `click` | 点击触发；`disabled=true` 时不触发 |
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 左侧图标文字按钮（导入/导出/下载/上传）
+```vue
+<yl-button type="template" content="下载模板" @click="onDownloadTemplate" />
+<yl-button type="export" content="导出文件" @click="onExport" />
+<yl-button type="import" content="导入文件" @click="onImport" />
+<yl-button type="upload" content="上传文件" @click="onUpload" />
+<yl-button type="download" content="下载文件" @click="onDownload" />
+```
+
+### 虚线整行按钮（新增入口）
+```vue
+<yl-button btnType="outline" content="新增一条记录" @click="onAdd" />
+```
+
+### `el-button` 样式（btnType=button）
+```vue
+<yl-button type="export" content="导出文件" btnType="button" @click="onExport" />
+<yl-button type="export" content="导出文件（实心）" btnType="button" :plain="false" @click="onExport" />
+```
+
+## 注意事项
+- **仅当**动作为导入/导出/下载模板/下载文件/上传，且**文字左侧需要图标**时，使用 `ylButton`；否则用 `el-button`。
+- `type` 与动作对应：`template`（下载模板）/ `export` / `import` / `upload` / `download`（下载文件）。
+- 虚线边框整行入口使用 `btnType="outline"`；常用于“新增/添加”。
+- `btnType="button"` 内部是 `el-button`，仍保留左侧内置图标；无图标需求勿用。
+- 禁用态建议外层包 `el-tooltip` 说明原因；`disabled=true` 时组件不会触发 `click`。