@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@zeyue0329/xiaoma-cli",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "XiaoMa Universal AI Agent Framework",
   "keywords": [
     "agile",

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

@@ -0,0 +1,142 @@
+---
+name: xiaoma-zqyl-bar-chart-backend
+description: 后台柱状图（横向/竖向、单柱/多柱/堆叠、数据标签）的 Vue2 + zqyl-component-base 实现规范（ylBarChart）。在用户提及 ylBarChart、yl-bar-chart、柱状图、条形图、堆叠柱状图、多柱状图，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the bar-chart (ylBarChart) component on a ZQYL backend page.
+---
+
+# 柱状图（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`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/backend/components/xiaoma-zqyl-button-backend/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: xiaoma-zqyl-button-backend
+description: 后台导入/导出/下载模板/下载文件/上传且左侧带图标按钮，以及虚线边框按钮的 Vue2 实现规范（ylButton）。在用户提及 ylButton、yl-button、导入左侧图标、导出左侧图标、下载模板左侧图标、下载文件左侧图标、上传左侧图标、虚线边框按钮、outline 按钮，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the button (ylButton) component on a ZQYL backend page.
+---
+
+# 按钮（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`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`。

package/src/zqyl-skills/backend/components/xiaoma-zqyl-collapse-backend/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: xiaoma-zqyl-collapse-backend
+description: 后台可折叠内容区块（标题行展开/收起、header 右侧操作区、content 内容区）的 Vue2 实现规范（ylCollapse）。在用户提及 ylCollapse、yl-collapse、折叠、折叠面板、可收起区块、展开收起，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the collapse (ylCollapse) component on a ZQYL backend page.
+---
+
+# 折叠（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`collapse`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 详情/表单页需要将**较长内容分块**，且支持用户展开/收起。
+- 卡片或模块内仅需**单行标题 + 可折叠正文**，标题右侧可放轻量操作。
+- 次要信息默认折叠、关键信息默认展开（通过 `isCollapse` 控制）。
+- 用户提到「yl-collapse」、「ylCollapse」、「折叠组件」、「展开收起」时。
+
+不适用：
+- 需模块卡片、副标题、底部 `footer`、扩展区过渡动画 → 使用 **`ylModule`**。
+- Element 多面板手风琴 → 使用 `el-collapse` / `el-collapse-item`。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 默认折叠展示：`isCollapse: true`（默认），仅传 `title` + `#content`。
+- 默认展开：`:is-collapse="false"`。
+- 标题行右侧操作：`#header` 放按钮/链接，与标题同一行右对齐。
+- 父级受控：`:is-collapse` + `@update:collapse` 同步状态。
+
+## API（ylCollapse）
+
+> 标签：`<yl-collapse>` / `ylCollapse`；须在入口 `import ylCollapse from 'zqyl-component-base/lib/ylCollapse'` + `Vue.component('ylCollapse', ylCollapse)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `title` | String | `''` | 折叠区标题（左侧，可点击切换） |
+| `isCollapse` / `is-collapse` | Boolean | `true` | 是否处于折叠（收起）状态 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `update:collapse` | 展开/收起状态变化时触发 | `Boolean`（当前是否折叠） |
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `header` | 标题行右侧自定义内容（右对齐） |
+| `content` | 折叠内容区；无此插槽时不渲染内容区 |
+
+### 样式与布局（以组件库为准）
+
+- 标题：14px bold / `#303133`；图标与标题间距 6px，点击可切换。
+- `header` 插槽：14px / `#606266`，标题行右侧右对齐。
+- 内容区：`margin-top: 24px`；展开时箭头旋转 180°。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（默认折叠）
+```vue
+<yl-collapse title="折叠标题">
+  <template #content>
+    <div>折叠组件的内容区域，可以包含任意业务内容。</div>
+  </template>
+</yl-collapse>
+```
+
+### 卡片内默认展开
+```vue
+<el-card shadow="never">
+  <yl-collapse title="默认展开的折叠区域" :is-collapse="false">
+    <template #content>
+      <div>该折叠区域初始为展开状态。</div>
+    </template>
+  </yl-collapse>
+</el-card>
+```
+
+### 自定义头部右侧（header 插槽）
+```vue
+<yl-collapse title="自定义头部内容">
+  <template #header>
+    <el-button type="primary" size="small">提交</el-button>
+  </template>
+  <template #content>
+    <div>折叠组件的内容区域。</div>
+  </template>
+</yl-collapse>
+```
+
+### 受控折叠状态
+```vue
+<yl-collapse
+  title="受控折叠"
+  :is-collapse="panelCollapsed"
+  @update:collapse="panelCollapsed = $event"
+>
+  <template #content>
+    <div>内容区</div>
+  </template>
+</yl-collapse>
+```
+
+## 注意事项
+- 内容必须放在 **`#content`** 插槽；无插槽时仅展示标题行。
+- 默认 **`isCollapse: true`**（折叠）；需首屏展示正文时设 **`:is-collapse="false"`**。
+- 标题行右侧操作用 **`#header`**；勿与标题文案混写在 `title` 中。
+- 父级需同步状态时监听 **`@update:collapse`**；与 `ylModule` 的扩展区区分使用场景。
+- **`el-card` 内顶层为 `yl-collapse` 时**：**不要**给 `el-card` 加 `el-card-padding-bottom0`（该 class 仅用于卡片内**直接**放置 `ylFormEditor` / `ylFormView`）。

package/src/zqyl-skills/backend/components/xiaoma-zqyl-container-foot-backend/SKILL.md

@@ -0,0 +1,192 @@
+---
+name: xiaoma-zqyl-container-foot-backend
+description: 后台固定在页面底部的操作区（title/left/center 插槽、keepBlank 占位）的 Vue2 实现规范（ylContainerFoot）。在用户提及 ylContainerFoot、yl-container-foot、页面底部、底栏、页脚、提交栏、保存取消，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the container-foot (ylContainerFoot) component on a ZQYL backend page.
+---
+
+# 页面底部（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`containerFoot`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 表单/详情/分步页需要在**页面底部固定**展示操作按钮（提交、保存、取消等）。
+- 底部需同时展示辅助说明（如 Ukey 提示）与主操作按钮。
+- 底部需展示协议勾选、说明文案与操作按钮。
+- 用户提到「yl-container-foot」、「ylContainerFoot」、「页面底部」、「底栏」、「页脚」时。
+
+不适用：
+- 弹窗内底部按钮 → 使用 `ylDialog` 默认 footer 或 `#footer` 插槽。
+- 卡片内局部操作区（非全页固定底栏）→ 使用 `el-card` 内按钮组或表单行内按钮。
+- **表单详情页默认操作** → 使用 **`ylTitle` 右侧插槽**（需求未说明按钮位置时**不要**用本组件）。
+
+### 操作按钮居中（强制）
+
+`ylContainerFoot` 底栏**主操作按钮默认居中**，须通过 **`#center` 插槽**渲染（组件内 `.foot-content-center { text-align: center }`）。
+
+| 规则 | 说明 |
+| --- | --- |
+| **必须** | 保存/取消/提交/暂存等操作按钮 → **`#center` 插槽** |
+| **必须** | 协议勾选、Ukey 提示等辅助文案 → **`#left` 插槽**（或两行场景用 `#title`） |
+| **禁止** | 默认插槽 + `display:flex; justify-content:space-between` 将按钮顶到右侧（会破坏居中） |
+| **禁止** | 在 `#left` 内放主操作按钮（除非原型明确要求且与规范方确认） |
+
+仅按钮、无左侧文案时：只用 **`#center`**，不要包一层自定义 flex。
+
+### 选型优先级（强制）
+
+1. **有具体说明或原型图/截图** → 以需求/原型为准：按底栏**实际行数、文案位置**选用插槽；**按钮仍默认放 `#center` 居中**（除非原型明确写「按钮右对齐」）。
+2. **无具体说明、无原型** → 按本 skill 下方「默认插槽选型」与「方案选择」执行，**不得**自行臆造 `#title` 或默认插槽 flex。
+
+判据示例：原型底栏**同一行**左勾选 + 按钮 → **`#left` + `#center`**（按钮居中），**勿**用 `#title`、**勿**用默认插槽 flex；原型**明确两行**（上行协议、下行 Ukey + 按钮）→ 才用 `#title` + `#left` + `#center`。
+
+### 默认插槽选型（无原型/无具体说明时）
+
+| 场景 | 插槽组合 | 说明 |
+| --- | --- | --- |
+| **单行**：左侧协议勾选 + 操作按钮（常见签约底栏） | **`#left` + `#center`** | 勾选/协议放 `#left`，**按钮放 `#center` 居中**；**禁止** `#title`、**禁止**默认插槽 flex |
+| 上行协议/说明 + 下行 Ukey 提示 + 按钮 | `#title` + `#left` + `#center` | 仅原型明确两行时才用 `#title`；按钮仍放 `#center` |
+| 左侧 Ukey/说明 + 操作按钮 | `#left` + `#center` | 无协议顶栏 |
+| 仅按钮 | **`#center`** | 取消/保存/提交等居中展示 |
+
+> 上表为**默认**；有原型/需求具体描述时**以原型为准**，但**按钮默认仍居中**（`#center`），仅原型明确「按钮右对齐」时才改布局。
+
+> **`#title` 为独立顶栏**：组件内渲染在 `foot-content` **上方**（`keepBlank-title` 占位约 94px），与 `#center` **不在同一行**。单行底栏（左勾选 + 按钮）**勿用 `#title`**；仅原型明确两行时才用。
+
+### 方案选择（内部分析用，勿在回答中罗列；无原型时按此默认）
+- 仅主操作：**`#center`** 放按钮组（保存/取消、提交等），按钮居中。
+- 辅助说明 + 主操作：**`#left`** 放 Ukey/协议/提示文案，**`#center`** 放主按钮（居中）。
+- **单行**协议勾选 + 按钮：**`#left`** 放勾选 + 协议链接，**`#center`** 放按钮（**勿用 `#title`**，**勿用**默认插槽 flex）。
+- **两行**（上行协议 + 下行 Ukey + 按钮）：**`#title`** 放 checkbox + 协议链接，再配 **`#left`** / **`#center`**。
+- 旧版默认插槽：仅兼容存量页；**新建页禁止**用默认插槽包 flex 布局替代 `#center`。
+
+## API（ylContainerFoot）
+
+> 标签：`<yl-container-foot>` / `ylContainerFoot`；须在入口 `import ylContainerFoot from 'zqyl-component-base/lib/ylContainerFoot'` + `Vue.component('ylContainerFoot', ylContainerFoot)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+无。
+
+### Events
+
+无。
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `title` | **独立顶栏**（协议勾选、说明等）；渲染在 `foot-content` **上方**；有内容时占位约 94px；**与按钮不在同一行** |
+| `left` | 左侧辅助说明或次要操作（约 40% 宽，左对齐） |
+| `center` | **主操作按钮区（居中）**；组件 `.foot-content-center { text-align: center }` |
+| `right` | 预留，当前未实现 |
+| default | 兼容旧版；**新建页勿用**自定义 flex 替代 `#center` |
+
+### 布局与样式
+
+- 固定于视口底部（`position: fixed`），`z-index: 3`，`el-card` 阴影 `0 0 5px rgba(0,0,0,.09)`。
+- 无 `title`：底栏 `min-height: 56px`，内置 `keepBlank` 占位 56px。
+- 有 `title`：`keepBlank-title` 占位约 94px。
+- 使用 `#left` / `#center` 时：三栏 table 布局，**`#center` 内按钮水平居中**。
+- 业务基座内默认 `padding-left: 180px` 让出侧栏；子应用/iframe 场景组件会自动调整宽度。
+- 文案高亮可用工具类 `defaultTextColor`（主题色）。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础用法（left + center）
+```vue
+<yl-container-foot>
+  <template #left>
+    请插入尾号为<span class="defaultTextColor">【Ukey后四位】</span>的 Ukey 操作
+  </template>
+  <template #center>
+    <el-button type="primary">提交</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 表单详情（取消 + 保存）
+```vue
+<yl-container-foot>
+  <template #center>
+    <el-button>取 消</el-button>
+    <el-button type="primary">保 存</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 单行：协议勾选 + 按钮（**默认；按钮居中**）
+```vue
+<yl-container-foot>
+  <template #left>
+    <el-checkbox v-model="agreed">我已阅读并确认</el-checkbox>
+    <el-button type="text">《用户协议》</el-button>
+  </template>
+  <template #center>
+    <el-button type="primary" plain>暂存</el-button>
+    <el-button type="primary" :disabled="!agreed">提交</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 两行：title 顶栏协议 + 下行 Ukey + 按钮（**原型明确两行时**）
+```vue
+<yl-container-foot>
+  <div slot="title">
+    <el-checkbox v-model="agreed">我已阅读并确认</el-checkbox>
+    <el-button type="text">《用户协议》</el-button>
+  </div>
+  <template #left>
+    请插入尾号为<span class="defaultTextColor">【Ukey后四位】</span>的 Ukey 操作
+  </template>
+  <template #center>
+    <el-button type="primary" :disabled="!agreed">提交</el-button>
+  </template>
+</yl-container-foot>
+```
+
+### 默认插槽（兼容旧版，新建页勿用）
+```vue
+<yl-container-foot>
+  <el-button>取 消</el-button>
+  <el-button type="primary">确 定</el-button>
+</yl-container-foot>
+```
+
+## 注意事项
+- **操作按钮默认居中**：主操作**必须**放 **`#center`**；**禁止**默认插槽 + `justify-content: space-between` 把按钮顶到右侧。
+- **有原型/具体说明 → 以原型为准**；**无说明 → 按本 skill 默认插槽选型**，勿臆造结构。
+- **`#title` 与 `#center` 不在同一行**：`#title` 为独立顶栏；单行底栏（左勾选 + 按钮）→ **`#left` + `#center`**，**禁止** `#title` + `#center`、**禁止**默认插槽 flex。
+- 有 `#title` 时页面需 `keepBlank-title`（约 94px）占位；单行底栏无 `#title` 时占位 56px。