@zeyue0329/xiaoma-cli 1.20.0 → 1.22.0

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

@@ -0,0 +1,341 @@
+---
+name: xiaoma-zqyl-table-simple-backend
+description: 后台列表表格、行内操作、多选、展开行、分页及与 ylSearchForm 联动的 Vue2 实现规范（ylTableSimple）。在用户提及 ylTableSimple、yl-table-simple、查询表格、行内操作、批量操作、表格 Tab，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the table-simple (ylTableSimple) component on a ZQYL backend page.
+---
+
+# 表格（简版）（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`tableSimple`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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 并按规则产出代码：
+- 列表数据展示、行内操作列、批量操作、多选、展开行、分页列表。
+- 与 `ylSearchForm` 联动的简版表格（`search` + `searchRefsName`）。
+- 用户提到「ylTableSimple」、「yl-table-simple」、查询表格数据区时。
+- **任意页面场景**的数据表格：列表页、表单详情页、弹窗、抽屉、反馈页等。
+- 表格区域顶部需按状态/维度切换列表（Tab 在表格卡片内，非页面标题下独立 Tab 卡）时。
+
+**全页表格优先本组件（强制）**：凡页面需展示数据表格，**默认**使用 `ylTableSimple` / `<yl-table-simple>`，**禁止**直接使用 `el-table` 手写列；行内操作用 `attr.type: 'handle'`。仅当需求明确要求原生 `el-table` 特性（如复杂合并单元格）且本组件无法满足时，才允许降级并须在代码注释说明原因。
+
+不适用：
+- **中台列表页**主表格默认 **`ylMpsTable`**；**勿**默认使用本组件。仅当用户**明确要求** `ylTableSimple`，或场景为弹窗/表单内嵌表格等非主列表区时，中台才使用本组件。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 标准列表 + 分页 + 查询：`:data` 配置 `loadData`/`header`，配合 `ylSearchForm` 的 `tableRefs`，数据由接口返回。
+- 规范平台预览可用静态数据；**生成业务页面时**须接接口，`loadData: []`，见「数据与接口（禁止 mock）」。
+- 表格区域：外包 `el-card.yl-tabs-table`；有标题/整体操作时表内上方 `el-row.mb16` + 左 `yl-tabs-title lh32`、右 `text-right`（公共样式，勿另写 CSS）；行内操作用 `attr.type: 'handle'`。
+- **表格卡片内 Tab**（与页面级 `el-card.yl-title_tabs` 区分）：`yl-tabs-table` 内最上方 `el-tabs`，其下操作提示行（左文案、右按钮），再 `ylTableSimple`；`@tab-click` 时更新查询条件并重新请求列表。
+- 多选：`type: 'selection'`；部分行不可选配置 `condition`。
+- 单选：`type: 'radio'`；`defaultValue` 默认选中；`radioDisabled` / `radioDisabledCondition` 禁用行；`@changeRadioData`。
+- 展开行：`type: 'expand'` + `#expand` 插槽；单行编辑常用自定义 `slot`。
+- 合并单元格：`data.spanMethod` + `:needBorder="true"`（竖线区分区域，规范 5.1）。
+- 合计行：`attributes.summary: true` + `summaryMethod`（金额/数量列底部统计）。
+
+## API（ylTableSimple）
+
+> 标签：`<yl-table-simple>` / `ylTableSimple`；须在入口 `import ylTableSimple from 'zqyl-component-base/lib/ylTableSimple'` + `Vue.component('ylTableSimple', ylTableSimple)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+- `data: Object` 表格配置，含 `loadData`、`header`、`spanMethod`、`summaryMethod`、`attributes.summary`（合计行）
+- `page: boolean` 是否显示分页（默认 `true`）
+- `search` / `searchRefsName` 关联 `ylSearchForm` 的 `$refs` 与 ref 名
+- `hidePage: boolean` 是否隐藏分页
+- `layout: string` 分页布局，默认 `total,prev,pager,next,sizes`（20/50/100）
+- `needBorder: boolean` 是否显示边框
+- `defaultSort: Object` 默认排序
+
+### data.header 列配置要点
+- `prop` / `label` / `width` / `align` / `tooltip` / `sortable`（仅需求明确要求**用户点击列头**排序时设 `sortable: true`）
+- `type`: `index` | `selection` | `expand` | `radio`（单选列，见下）
+- `type: 'radio'`：`radioValueKey`（选中值字段，默认 `id`）、`defaultValue`（初始选中值）、`radioText`（单选旁文案）、`radioDisabled(scope)` / `radioDisabledCondition`（禁用）
+- `headerTooltip`: 表头说明图标悬停文案
+- `attr.type: 'handle'` + `attr.handle[]`：`text`、`type`、`callback(scope)`、`condition`（eval 字符串，可用 `scope.row`）、`more`（`true` 时收入「更多」下拉，见下）
+- `handle[].more: true`：该操作不直接展示为行内链接，而出现在操作列「更多」下拉菜单中（低频/删除等宜放入）。
+- `attr.type: 'amount' | 'date' | 'enum'` 需项目内 `$function` / `$store` 支持
+
+### 表格区域结构（推荐）
+- 列表表格外包 `el-card.yl-tabs-table`；左侧有表格标题和/或右侧有整体操作按钮时，在 `yl-table-simple` **上方**使用：
+```vue
+<el-card class="yl-tabs-table">
+  <el-row class="mb16">
+    <el-col :span="12" class="yl-tabs-title lh32">表格标题</el-col>
+    <el-col :span="12" class="text-right">
+      <yl-button type="download" content="下载中心" class="mr10" @click="goDownloadCenter" />
+      <el-button size="small">导出</el-button>
+      <el-button size="small" type="primary">新增</el-button>
+    </el-col>
+  </el-row>
+  <yl-table-simple ref="ylTableSimple" :data="tableData" />
+</el-card>
+```
+- `yl-tabs-table`、`yl-tabs-title`、`lh32`、`text-right`、`mb16` 已在项目公共样式中定义，生成代码时**不要**再写 scoped/局部样式覆盖；标题列须加 `lh32`（`line-height: 32px`）与右侧按钮垂直居中对齐。
+- 仅标题或仅按钮时省略无内容一侧的 `el-col` 即可；无标题且无整体操作时也可仅保留 `el-card.yl-tabs-table` 包裹表格。
+- 跳转其他页面/网站、不改变当前表格数据的操作（如下载中心）：**优先 `ylButton`**（如 `type="download"`）；仅当 `ylButton` 无法满足时再使用 `el-link` 文字链接 + 图标。
+
+### 表格卡片内 Tab（`yl-tabs-table` 内，非 `yl-title_tabs`）
+- 适用：同一列表页在**表格区域**按状态/维度切换（如全部/进行中）；Tab **不要**放进页面标题下的 `yl-title_tabs` 独立卡（那是列表页级 Tab，见 `xiaoma-zqyl-list-page-backend` skill）。
+- 结构顺序：`el-tabs` → `el-row.mb16`（左操作提示文案，右 `text-right` 按钮）→ `yl-table-simple`（可含多选、分页）。
+- Tab 文案：标签名后用括号标数量，如 `` `标签2 ( ${n} )` ``；数量 ≥999 可展示 `999+`。
+```vue
+<el-card class="yl-tabs-table">
+  <el-tabs v-model="activeTab" class="yl-tabs" @tab-click="onTabChange">
+    <el-tab-pane
+      v-for="t in tabDefs"
+      :key="t.name"
+      :label="formatTabLabel(t)"
+      :name="t.name"
+    />
+  </el-tabs>
+  <el-row class="mb16">
+    <el-col :span="12">表格操作相关提示放置在此处</el-col>
+    <el-col :span="12" class="text-right">
+      <el-button size="small">批量下载</el-button>
+      <el-button size="small">次要操作</el-button>
+      <el-button size="small" type="primary">主要操作</el-button>
+    </el-col>
+  </el-row>
+  <yl-table-simple
+    ref="ylTableSimple"
+    :data="tableData"
+    :search="$refs"
+    searchRefsName="ylSearchForm"
+  />
+</el-card>
+```
+- `onTabChange`：切换 `searchParmas` 中状态字段（或 `tableData` 配置）后调用查询/刷新表格；`tabDefs` 含 `name`、`label`、`count` 供 `formatTabLabel` 拼括号数量。
+
+### 插槽
+- `expand` 展开行内容
+- 自定义列：`slot` 名对应 `#slotName`
+- `tips` / `operationBtn`：组件内置表格上方区域；有标题或右对齐按钮时优先用上文 `el-row` 布局
+
+### 事件
+- `changePageSize` 分页变更
+- `changeRowData` 行点击，参数为当前行 `row`
+- `selectRowData` / `getSelectALL` 多选变更
+- `sortChange` 排序变更
+- `changeExpand` 展开行变更
+- `changeRadioData` 单选变更，参数 `{ value, row, column, index }`
+
+### 规范要点
+- 整体操作：外包 `el-card.yl-tabs-table`；表内 `el-row.mb16` + 左 `yl-tabs-title lh32` / 右 `text-right`；**仅最右 1 个**实心 `type="primary"`，其余全部 `type="primary" plain`；跳转类优先 `ylButton`，满足不了再用 `el-link` + 前置图标。
+- 表格内 Tab：`yl-tabs-table` 最上方 `el-tabs` + 操作提示行 + 表格；与 `yl-title_tabs`（标题下独立 Tab 卡）勿混用；Tab 带数量括号，切换后重新查询。
+- 行内操作顺序：流程类 → 常规 → 低频 → 删除；`more: true` 的项在「更多」菜单中。
+- 分页默认 20 条/页；可选 20、50、100。
+- 空单元格显示「-」；超长 `tooltip`；金额右对齐；列头可点击排序（需求明确要求时）设 `sortable: true`。
+- 多选表头展示已选数量；展开行收纳次要字段。
+- 合并单元格：`spanMethod`；建议 `needBorder: true`。
+- 合计行：`attributes.summary: true`；金额/数量列配置 `summaryMethod` 或内置 summary 字段数组。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 基础列表（接口驱动 + 行内操作）
+```vue
+<el-card class="yl-tabs-table">
+  <yl-table-simple
+    ref="ylTableSimple"
+    :data="tableData"
+    :page="false"
+  />
+</el-card>
+
+// tableData 示例
+tableData: {
+  loadData: [],
+  header: [
+    { type: 'index', label: '序号', width: 60 },
+    { prop: 'companyName', label: '企业名称', width: 180, tooltip: true },
+    { prop: 'amount', label: '金额', width: 120, align: 'right' },
+    {
+      label: '操作',
+      width: 200,
+      attr: {
+        fixed: 'right',
+        type: 'handle',
+        handle: [
+          { text: '查看', callback: (scope) => this.onView(scope.row) },
+          { text: '导出', more: true, callback: (scope) => this.onExport(scope.row) },
+          { text: '删除', more: true, callback: (scope) => this.onDelete(scope.row) },
+        ],
+      },
+    },
+  ],
+},
+```
+
+### 表格标题/整体操作 + 联动查询分页
+```vue
+<yl-search-form
+  ref="ylSearchForm"
+  :searchParmas="searchParmas"
+  :tableRefs="$refs"
+  tableRefsName="ylTableSimple"
+  :isCard="false"
+/>
+<el-card class="yl-tabs-table">
+  <el-row class="mb16">
+    <el-col :span="12" class="yl-tabs-title lh32">表格标题</el-col>
+    <el-col :span="12" class="text-right">
+      <yl-button type="download" content="下载中心" class="mr10" @click="goDownloadCenter" />
+      <el-button size="small">导出</el-button>
+      <el-button size="small" type="primary">新增</el-button>
+    </el-col>
+  </el-row>
+  <yl-table-simple
+    ref="ylTableSimple"
+    :data="tableData"
+    :search="$refs"
+    searchRefsName="ylSearchForm"
+  />
+</el-card>
+```
+
+### 表格卡片内 Tab + 操作提示 + 分页
+```vue
+<el-card class="yl-tabs-table">
+  <el-tabs v-model="activeTab" class="yl-tabs" @tab-click="onTabChange">
+    <el-tab-pane label="标签1 ( 1 )" name="tab1" />
+    <el-tab-pane label="标签2 ( 10 )" name="tab2" />
+  </el-tabs>
+  <el-row class="mb16">
+    <el-col :span="12">表格操作相关提示放置在此处</el-col>
+    <el-col :span="12" class="text-right">
+      <el-button size="small">批量下载</el-button>
+      <el-button size="small" type="primary">主要操作</el-button>
+    </el-col>
+  </el-row>
+  <yl-table-simple
+    ref="ylTableSimple"
+    :data="tableData"
+    :search="$refs"
+    searchRefsName="ylSearchForm"
+  />
+</el-card>
+```
+
+### 多选 + 展开行
+```js
+header: [
+  { type: 'selection', width: 48, condition: 'row.selectable !== false' },
+  { type: 'expand', slot: 'expand' },
+  { prop: 'bizNo', label: '业务编号', width: 200 },
+],
+```
+
+### 单选表格
+```vue
+<yl-table-simple
+  :data="tableData"
+  :page="false"
+  @changeRadioData="onRadioChange"
+/>
+```
+```js
+// header 首列
+{
+  type: 'radio',
+  label: '',
+  width: 48,
+  defaultValue: 1,
+  radioDisabledCondition: 'scope.row.locked',
+  attr: { fixed: 'left' },
+},
+// methods
+onRadioChange({ value, row }) {
+  console.log('选中', value, row);
+},
+```
+
+### 合并单元格
+```vue
+<yl-table-simple :data="tableData" :needBorder="true" :page="false" />
+```
+```js
+// tableData：loadData 由接口填充，初始 []
+tableData: {
+  loadData: [],
+  spanMethod({ rowIndex, column }) {
+    // 按业务规则返回 [rowspan, colspan]，同列相邻相同值合并
+    if (column.property !== 'companyGroup') return [1, 1];
+    // ...
+  },
+  header: [
+    { prop: 'companyGroup', label: '企业', width: 180 },
+    { prop: 'bizNo', label: '业务编号', width: 200 },
+  ],
+},
+```
+
+### 合计表格（底部合计行）
+```js
+// loadData 由接口返回；summaryMethod 对当前页 data 求和
+tableData: {
+  loadData: [],
+  attributes: { summary: true },
+  summaryMethod({ columns, data }) {
+    return columns.map((col, index) => {
+      if (index === 0) return '合计';
+      if (col.property === 'quantity') {
+        return String(data.reduce((s, r) => s + Number(r.quantity || 0), 0));
+      }
+      if (col.property === 'amount') { /* 对 amount 列求和并格式化 */ }
+      return '';
+    });
+  },
+  header: [
+    { prop: 'companyName', label: '企业名称', width: 180 },
+    { prop: 'quantity', label: '数量', width: 80, align: 'right' },
+    { prop: 'amount', label: '金额（元）', width: 120, align: 'right' },
+  ],
+},
+```
+
+## 注意事项
+- 预览页使用本地 `loadData` 时可设 `:page="false"`；**生成业务页面**须接接口，见「数据与接口（禁止 mock）」。
+- 行内 `condition` 为字符串，在组件内 `eval`，需写 `scope.row.xxx` 表达式。
+- 空值默认渲染为 `--`；列 `tooltip: true` 时超长省略并悬停展示全文。
+- 与 `ylSearchForm` 联调时表格 ref 名需与 `tableRefsName` / `searchRefsName` 一致。
+- 表格外包 `el-card.yl-tabs-table`；标题/按钮用表内 `el-row.mb16` + `yl-tabs-title lh32` / `text-right`，`yl-tabs-table` 等均为公共样式，勿单独加样式；勿默认用 `operationBtn` 插槽替代标题行布局。
+- 表格卡片内 Tab：`el-tabs` 放在 `yl-tabs-table` 内最上方（非 `yl-title_tabs`）；其下为操作提示行 + `ylTableSimple`；Tab 数量用括号，≥999 用 `999+`；切换 Tab 须重新查询。
+- 下载中心等跳转类操作：**优先 `ylButton`**（如 `type="download"`），置于右侧按钮组靠左；`ylButton` 满足不了时再用 `el-link` + 图标；不改变当前表格数据。
+- 行内 `attr.handle` 中 `more: true` 表示该操作在「更多」下拉中展示，勿与直接展示的链接混用过多。
+- 需求仅写「默认按某字段降序/升序」且未要求列头点击排序：**勿**设 `sortable: true`、**勿**写 `defaultSort`；默认顺序由列表接口返回。`sortable` / `defaultSort` / `sortChange` 仅用于需求或原型明确要求用户可切换排序时。
+- 页头单条操作（查看/编辑/删除）且需求仅写「选中一条数据」：**勿默认**加 `type: 'radio'` / `type: 'selection'` 列；用 `@changeRowData` 行点击维护选中行；未选中时 Toast 提示。
+- 单选列：`type: 'radio'` 仅用于需求/原型**明确要求**单选列，或弹窗内表格选行；禁用行用 `radioDisabledCondition: 'scope.row.xxx'` 或 `radioDisabled(scope)`；监听 `changeRadioData`。
+- 合并单元格：在 `data` 上配置 `spanMethod`（同 Element `span-method`）；有合并时设 `:needBorder="true"`。
+- 合计行：`attributes.summary` 为 `true` 或字段配置数组；自定义逻辑用 `summaryMethod`，首列一般为「合计」。
+- **中台页面**页头默认 **`ylManagerTitle`**；**中台列表**主表格默认 **`ylMpsTable`**；未明确要求时**勿用** `ylTitle` / `ylTableSimple` 作页头或主列表。
+- **例外**：用户**明确要求**使用 `ylTitle` 或 `ylTableSimple` 时，可按指定组件替换对应区块。

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

@@ -0,0 +1,257 @@
+---
+name: xiaoma-zqyl-tips-backend
+description: 后台页面/卡片/表单项的信息与警示提示（success/info/warning/error、标准/简略样式、可关闭）的 Vue2 实现规范（ylTips）。在用户提及 ylTips、yl-tips、提示、警告提示、信息提示、Alert、页面提示、卡片提示，或需要在后台实现该组件时使用。适用于后台管理端仓库（如 zqyl-manager，platformType `yxManager`；页头/表格用 ylTitle + ylTableSimple）。 Use when implementing or reviewing the tips (ylTips) component on a ZQYL backend page.
+---
+
+# 提示（后台）
+
+你是一个前端组件实现与改造助手。你必须严格按本技能的规则输出。
+
+## 适用范围
+- 平台：后台
+- platformType：`yxManager`
+- 组件条目：`tips`
+
+## 目标
+- 当用户提到该组件/场景时，给出可落地的 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-tips」、「ylTips」、「警告提示」、「信息提示」、「Alert」时。
+
+不适用：
+- 表单项下方**次要灰色说明**（格式/大小约束）→ 使用 `form-item-hint` 或 `ylFileUpload` 的 `attributes.tip`。
+- 操作成功轻量反馈 → 使用 `Message`；打断式确认 → 使用 `MessageBox`。
+- 标签旁释义图标 → 使用 `el-tooltip` / 表单项 `tooltip`。
+
+### 方案选择（内部分析用，勿在回答中罗列）
+- 权限/风险常显警示：`type: warning` + `showCloseIcon: false`。
+- 操作前可关闭说明：`type: info` + 默认关闭按钮；关闭监听 `@hiddenTips`。
+- 标准样式（标题+正文）：同时传 `title` + `description`。
+- 简略样式（无标题）：仅传 `description`，文案控制在两行内。
+- 表单项重要提示：放在控件下方，默认仅 `description`（无 `title`），`showCloseIcon: false`；按需求再补 `title`。
+- 富文本/链接：优先 `#description` 插槽；或 `:htmlStr`（注意 XSS，仅可信内容）。
+
+### 列表页 `ylTips` 落位（强制选型，生成前必判）
+
+列表页出现整块 `ylTips`（如「温馨提示」、多行编号说明）时，**先按原型纵向位置**选型，**禁止**默认塞进 `el-card.yl-tabs-table`。
+
+| 原型/需求信号 | 落位 | 结构 |
+| --- | --- | --- |
+| 提示在**标题下**、查询区**之前** | **页头全局提示** | `ylTitle` → `ylTips.page-global-tip` → 后续区块 |
+| 提示在**查询区下、表格上**（独立横条，与表格卡分离） | **查询与表格间独立提示** | `ylSearchForm` → `ylTips.list-page-tip` → `el-card.yl-tabs-table`（**`ylTips` 与表格卡同级，不在卡内**） |
+| 提示在**表格卡内**、与批量按钮同一行、≤40 字短文案 | **表格操作提示行** | `el-card.yl-tabs-table` 内 `el-row.mb16` 左侧纯文本；**不用** `ylTips` |
+| 表单详情页某 `el-card` 有小标题/模块名 | **卡片内提示** | 该业务卡片标题下 + `card-inner-tip`；**非**列表表格卡默认方案 |
+
+**禁止**：原型显示查询区与表格为两块独立区域时，将整块 `ylTips` 放入 `el-card.yl-tabs-table` 与 `ylTableSimple` 同卡（易与「卡片内提示」示例混淆）。
+
+### 提示位置（云链交互规范）
+| 位置 | 说明 |
+| --- | --- |
+| 全局提示 | 页面顶部或 `ylTitle` 标题正下方；与标题间距 **16px** |
+| 查询与表格间独立提示 | `ylSearchForm` 与 `el-card.yl-tabs-table` **之间**的同级独立块；与上下区块间距 **16px** |
+| 卡片提示 | 表单详情等业务卡片内；有卡片标题时放在标题下方；与下方内容间距 **16px** |
+| 表单项提示 | 单一表单项控件下方，与框体左对齐 |
+
+### 间距（页面拼装）
+
+- **全局提示**：紧挨 `ylTitle` / `ylManagerTitle` 下方，`margin-top: 16px`（或由外层容器统一控制为与标题 16px）。
+- **查询与表格间独立提示**：位于 `ylSearchForm` 与 `el-card.yl-tabs-table` 之间，`margin-top: 16px`（`class="list-page-tip"`）；**勿**外包 `el-card`，**勿**放入表格卡。
+- **卡片内提示**：位于**表单详情等业务卡片**标题/子标题与正文之间，提示块 `margin-bottom: 16px`，与下方表单等内容相隔 16px；列表页表格卡默认不用此落位。
+
+## API（ylTips）
+
+> 标签：`<yl-tips>` / `ylTips`；须在入口 `import ylTips from 'zqyl-component-base/lib/ylTips'` + `Vue.component('ylTips', ylTips)` 注册；页面模板直接使用，**勿**单页 import；**禁止**全量 `Vue.use(zqylComponentBase)`。
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `type` | String | `warning` | 提示类型：`success` / `info` / `warning` / `error` |
+| `title` | String | `null` | 提示标题；有标题时为标准样式 |
+| `description` | String | `null` | 提示描述；无标题时为简略样式 |
+| `showCloseIcon` / `show-close-icon` | Boolean | `true` | 是否显示关闭按钮 |
+| `htmlStr` / `html-str` | String | `null` | HTML 描述；与 `description` 同时存在时优先 `htmlStr` |
+| `vNode` | Object \| Function | `null` | 自定义描述 vnode（高级用法） |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| `hiddenTips` | 点击关闭后触发，组件随即隐藏 | — |
+
+### Slots
+
+| 插槽名 | 说明 |
+| --- | --- |
+| `description` | 自定义提示内容；会覆盖 `description` / `htmlStr` |
+
+### 类型样式（组件库）
+
+| type | 背景色 | 边框色 | 图标色 |
+| --- | --- | --- | --- |
+| success | `#E3FCE9` | `#98D880` | `#52C41A` |
+| info | `#DFEFFE` | `#7EBDF7` | `#288CE9` |
+| warning | `#FFF5E6` | `#F0C380` | `#FAAD14` |
+| error | `#FFECEC` | `#F99F9F` | `#FF4D4F` |
+
+- 标题：bold，下边距 8px；描述：14px / `#303133` / 行高 22px。
+- 最小高度 46px；左右内边距 16px；图标 16px。
+
+## 示例（参考写法，回答用户时只选用其中一种）
+
+### 警示类 · 标准样式（常显）
+```vue
+<yl-tips
+  type="warning"
+  title="权限提示"
+  description="当前账号无操作权限，请联系管理员开通后再试。"
+  :show-close-icon="false"
+/>
+```
+
+### 警示类 · 简略样式
+```vue
+<yl-tips
+  type="warning"
+  description="提交后不可撤回，请确认信息无误。"
+  :show-close-icon="false"
+/>
+```
+
+### 信息类 · 可关闭
+```vue
+<yl-tips
+  v-if="tipVisible"
+  type="info"
+  title="操作说明"
+  description="批量导入前请先下载模板并按要求填写。"
+  @hiddenTips="tipVisible = false"
+/>
+```
+
+### 全局提示（标题下方）
+```vue
+<yl-title title="业务管理" :disabled-back="true" />
+<yl-tips class="page-global-tip" type="warning" description="当前为演示环境，请勿录入真实数据。" :show-close-icon="false" />
+```
+
+```css
+/* 全局提示与标题间距 16px */
+.page-global-tip { margin-top: 16px; }
+```
+
+### 列表页 · 查询与表格间独立提示（常用）
+```vue
+<yl-search-form ref="ylSearchForm" :searchParmas="searchParmas" :isCard="true" />
+
+<yl-tips
+  v-if="tipVisible"
+  class="list-page-tip"
+  type="info"
+  title="温馨提示："
+  @hiddenTips="tipVisible = false"
+>
+  <template #description>
+    <p>1. 业务说明第一条…</p>
+    <p>2. 业务说明第二条…</p>
+  </template>
+</yl-tips>
+
+<el-card class="yl-tabs-table" style="margin-top: 16px">
+  <yl-table-simple ref="ylTableSimple" :data="tableData" />
+</el-card>
+```
+
+```css
+/* 查询区与表格卡之间的独立提示，间距 16px */
+.list-page-tip { margin-top: 16px; }
+```
+
+### 卡片内提示（表单详情等业务卡片）
+```vue
+<el-card>
+  <div slot="header">基本信息</div>
+  <yl-tips class="card-inner-tip" type="info" description="以下信息将用于合同签署，请与营业执照保持一致。" :show-close-icon="false" />
+  <yl-form-editor ... />
+</el-card>
+```
+
+```css
+/* 卡片内提示与下方内容间距 16px */
+.card-inner-tip { margin-bottom: 16px; }
+```
+
+### 表单项重要提示（`ylFormEditor` + `formContentSlot`）
+```vue
+<yl-form-editor :form-fields="fields" :initial-values="form" layout="double" label-width="140px" :show-submit-button="false">
+  <template #creditCodeTip>
+    <yl-tips
+      class="form-item-tips"
+      type="warning"
+      description="请确保与营业执照登记信息一致；提交后将进入人工审核，信息错误可能导致驳回。"
+      :show-close-icon="false"
+    />
+  </template>
+</yl-form-editor>
+```
+
+```js
+// fields: [{ label: '统一社会信用代码', prop: 'creditCode', type: 'input', placeholder: '请输入', formContentSlot: 'creditCodeTip' }]
+```
+
+```css
+/* formContentSlot 内嵌 ylTips 时勿再加外边距，组件已对齐框体 */
+.form-item-tips { margin: 0; }
+```
+
+### 自定义内容（插槽）
+```vue
+<yl-tips type="info" :show-close-icon="false">
+  <template #description>
+    <div>自定义提示，含 <el-link type="primary">链接</el-link></div>
+  </template>
+</yl-tips>
+```
+
+### HTML 内容（htmlStr）
+```vue
+<yl-tips type="warning" title="HTML 内容" :html-str="htmlStr" :show-close-icon="false" />
+```
+
+// htmlStr: '支持 <span class="fw7">HTML</span> 标签'
+
+## 注意事项
+- **警示类**（权限/风险）：`showCloseIcon: false` 常显；**信息类**操作说明默认可关闭，监听 `@hiddenTips`。
+- **标准样式**：`title` + `description`；**简略样式**：仅 `description`（两行内简短文案）。
+- **位置与间距**：全局在 `ylTitle` 下（**距标题 16px**）；列表页整块提示在查询与表格之间用 `list-page-tip`（**独立块，不在 `el-card.yl-tabs-table` 内**）；表单详情卡片内用 `card-inner-tip`；表单项在控件下（`ylFormEditor` 的 `formContentSlot` 嵌入 `ylTips`），**默认无 `title`**，仅 `description`；`formContentSlot` 内 `.form-item-tips` **margin 设为 0**。次要灰色说明用 `form-item-hint`，勿与 `ylTips` 混用。
+- **列表页禁止**：整块 `ylTips` 默认**勿**与 `ylTableSimple` 同包在 `el-card.yl-tabs-table`；表格卡内短文案用 `el-row.mb16` 纯文本，不用 `ylTips`。
+- 插槽 `#description` 覆盖 `description` / `htmlStr`；同时设 `description` 与 `htmlStr` 时优先 `htmlStr`。
+- `htmlStr` 会渲染 HTML，仅用于可信内容；关闭后组件内部 `visible=false`，需配合 `v-if` 做持久化隐藏。