@zeyue0329/xiaoma-cli 1.21.0 → 1.22.0

package/src/zqyl-skills/mid/xiaoma-zqyl-form-detail-page-mid/pages/formDetailPage.md

@@ -0,0 +1,357 @@
+---
+title: 表单详情页（中台）
+---
+
+
+# 表单详情页（中台）
+
+你是一个前端页面实现助手。以本技能描述的表单详情页骨架为**基线**，结合需求/原型做区块增删改；遵守本 skill 的布局规则与 `xiaoma-zqyl-form-editor-mid` / `xiaoma-zqyl-form-view-mid` / `xiaoma-zqyl-tips-mid` 等组件 skill。
+
+## 平台与参考
+
+- 平台：中台
+- 页头/表格：**`ylManagerTitle` + `ylMpsTable`**（项目 `components`，无则手动拷贝）
+- 外部查询：**`ylSearchForm` 在入口按组件名 `Vue.component` 注册**（platformType：`mps`）
+- 模板数据名：`formDetailPage`
+- 布局类型：**表单详情/审批页**（二级 `ylTitle` 左侧返回 + 右侧页面级操作 → 可选全局 `ylTips` → 多 `el-card`（模块操作在小标题右侧）→ 按需 `ylContainerFoot`；只读 `ylFormView` + 可编辑 `ylFormEditor`）
+
+## 页面说明
+
+详情/审批/新增/编辑页：返回默认前台/中台 ylTitle 左侧、后台 ylTitle 右侧；其他页面级操作默认 ylTitle 右侧；卡片模块操作默认小标题行右侧；ylFormView + ylFormEditor + ylFileUpload + ylTips + ylCollapse + ylModule；仅需求明确置底时用 ylContainerFoot
+
+## 返回按钮位置（默认）
+
+需求/原型**未明确**返回按钮位置时：
+
+- **中台（当前平台）**：页头使用 **`ylManagerTitle`**（见 `xiaoma-zqyl-manager-title-mid` skill）；需返回时 `:showBack="true"` + `@go-back`；页头操作放 **`#btn`**。**勿用** `ylTitle`。
+- 需求/原型**明确**指定返回位置（如「返回在标题右侧」「无返回」）时，以需求为准。
+
+## 卡片小标题 class（强制）
+
+- **中台（当前平台）**：卡片内区块小标题**必须**使用 **yl-title-sub**（14px，无左侧竖条）。
+- **`yl_manager_subheading` 为后台专用样式**（加粗 + 左侧蓝条），当前平台**禁止**使用；勿参考 legacy 页面或后台 showcase 示例。
+- 独立卡片标题（无右侧操作按钮）：`<el-row class="yl-title-sub">区块名</el-row>`
+- 带模块操作的小标题行：左侧 `el-col.yl-title-sub`，右侧 `el-col.text-right`。
+
+## 操作按钮位置（优先级）
+
+| 优先级 | 依据 | 操作按钮位置 |
+| --- | --- | --- |
+| 1 | 需求/原型**明确**写「底部置底 / 底栏固定 / 页面底部按钮」 | `ylContainerFoot`（见模板一·置底） |
+| 2 | 需求/原型**明确**写「标题右侧 / 页头操作」 | **`ylManagerTitle` `#btn`** 插槽 |
+| 3 | **返回按钮**，**未说明**位置 | **`ylManagerTitle`** `:showBack="true"` + `@go-back` |
+| 4 | **其他页面级**操作，**未说明**位置（确认/保存/提交等） | **`ylManagerTitle` `#btn`**；**不要**使用 `ylContainerFoot` |
+| 5 | **卡片/模块内**操作，**未说明**位置（如添加行、模块内导入） | **小标题同一行右侧**（`el-row.mb16` + 左 `yl-title-sub` + 右 `text-right`）；**不要**放在表格/内容区最下方 |
+
+## 卡片模块操作按钮（默认）
+
+需求仅在某个卡片/小模块描述操作（如「添加」「导入一行」），**未说明**按钮位置时：
+
+1. 与小标题同一行：左侧 `el-col.yl-title-sub`，右侧 `el-col.text-right` 放按钮。
+2. 按钮样式与同组规则一致：仅最右 1 个实心 `type="primary"`，其余 `type="primary" plain`。
+3. **禁止**默认把模块操作按钮放在表格下方或卡片底部（除非需求明确要求）。
+4. 表格区使用 **`ylTableSimple`**，行内操作用 `attr.type: 'handle'`；**禁止**默认 `el-table`。
+
+```vue
+<el-card class="yl-tabs-table">
+  <el-row class="mb16">
+    <el-col :span="12" class="yl-title-sub">添加相似问</el-col>
+    <el-col :span="12" class="text-right">
+      <el-button size="small" type="primary" plain icon="el-icon-plus">添加</el-button>
+    </el-col>
+  </el-row>
+  <yl-table-simple :data="similarTableData" />
+</el-card>
+```
+
+## 何时使用
+
+- 详情页、审批页、新建/编辑多卡片表单、分步录入流程。
+- **整卡全只读**时用 `ylFormView`；**存在可编辑字段**时用 `ylFormEditor`（含同卡混排只读+可编辑，见下节）。
+- 用户提到「表单详情页/审批页/详情回显」「多卡片表单」「分步填写」「上一步/下一步」等场景信号时。
+- 仅当需求明确「置底保存/取消/提交」时才选用 `ylContainerFoot`。
+
+## 规范平台预览场景（对照用）
+
+| 场景 | 要点 |
+| --- | --- |
+| 表单模板一（置底） | 多卡片 + `ylFormEditor` / `ylFormView` 混排 + `ylContainerFoot` |
+| 表单模板二（分步） | 步骤条 + 分步 `ylFormEditor` + 置底上一步/下一步 |
+| 纯只读审批 | **全** `ylFormView`，无 `ylFormEditor`、无必填 `*`；置底同意/驳回 |
+| 单列表单居中 | `ylFormEditor` `layout="single"` + `label-width="auto"`；单卡片时按钮紧跟最后一个表单项下方，非 `ylContainerFoot`、**不需置底**、**不加** `el-card-padding-bottom0`；表单项标题**不限 8 字**、取消 label `ellipsis` |
+| 同卡混排只读+可编辑 | **单个** `ylFormEditor`；只读项 `disabled: true`；**禁止**同卡 `ylFormView` + `ylFormEditor` 拆分 |
+
+## 数据与接口（禁止 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()`。
+
+## 同卡混排：只读 + 可编辑（强制）
+
+同一 `el-card` / `ylCollapse` 内容区内，若**同时存在**只读回显字段与待填写/待编辑字段：
+
+1. **整体使用一个 `ylFormEditor`**，所有字段写入同一 `formFields`。
+2. **只读字段**：`disabled: true`（或 `type: slot` 自定义只读展示 + 操作链接，如「查看」「更新」）；**不设** `formRules` 必填校验。
+3. **可编辑字段**：正常配置 `type` / `placeholder` / `formRules`。
+4. **禁止**在同卡片内先 `yl-form-view` 再 `yl-form-editor` 上下/左右拆分（破坏双列对齐与视觉一致性）。
+5. **整卡全只读**（审批查看、无任何输入控件）→ 仍用 **`ylFormView`**。
+
+```vue
+<el-card class="el-card-padding-bottom0">
+  <el-row class="yl-title-sub">企业基本信息</el-row>
+  <yl-form-editor
+    ref="enterpriseEditor"
+    :form-fields="enterpriseFields"
+    :form-rules="enterpriseRules"
+    :initial-values="enterpriseForm"
+    layout="double"
+    :show-submit-button="false"
+  />
+</el-card>
+```
+
+```js
+// enterpriseFields: [
+//   { label: '企业名称', prop: 'companyName', type: 'input', disabled: true },
+//   { label: '联系邮箱', prop: 'contactEmail', type: 'input', placeholder: '请输入' },
+//   { label: '营业执照照片', prop: 'licensePhoto', type: 'slot', slotName: 'licensePhoto' },
+// ]
+// enterpriseRules: { contactEmail: [{ required: true, message: '请输入联系邮箱', trigger: 'blur' }] }
+```
+
+## 表单模板一（多卡片 · 默认 · 页头操作）
+
+> **默认模板**。需求未说明按钮位置时使用；
+> 中台操作在 **`ylManagerTitle` `#btn`**，**不使用** `ylContainerFoot`；**勿用** `ylTitle`。
+
+1. **`ylManagerTitle`**：`:showBack="true"` + `@go-back` 处理返回（二级/详情页）；**`#btn`** 放保存/提交等；仅最右 1 个实心 primary，其余 `primary plain`；列表入口页常用 `have-expand`。
+2. **全局/卡片提示（按需）**：**`ylTips`**（见 `xiaoma-zqyl-tips-mid` skill）。
+3. **多个 `el-card`**：小标题 + 表单区（`ylFormEditor` / `ylFormView`）或动态表格；**卡片内有模块操作且未说明位置** → 小标题行右侧放按钮，再渲染表格/表单内容。
+4. **附件 / 折叠 / 模块（按需）**：见对应组件 skill。
+5. **禁止**：未要求置底时添加 `ylContainerFoot`；页头与置底栏勿重复同一组按钮；**勿**把卡片模块操作默认放在表格下方。
+
+## 表单模板一（多卡片 · 置底 · 按需）
+
+> 仅需求/原型**明确要求**底部置底时使用。
+
+1. **`ylTitle`**：仅标题与返回，**不在**右侧放保存/提交。
+   - 返回：`:showBack="true"` + `@go-back`
+2. **置底操作栏**：**`ylContainerFoot`**（见 `xiaoma-zqyl-container-foot-mid` skill）；**按钮放 `#center` 居中**，辅助文案放 `#left`，**禁止**默认插槽 flex `space-between`。
+
+## 卡片公共 class
+
+| 卡片内容 | 规则 |
+| --- | --- |
+| `ylFormEditor` / `ylFormView`（**直接**置于 `el-card` 内） | `el-card` 加 `el-card-padding-bottom0`（全平台，公共样式，勿在页面 `scoped` 重写） |
+| 单卡片 + 单列表单 + 卡片内操作按钮 | **不加** `el-card-padding-bottom0` |
+| `ylCollapse`（`el-card` 内**顶层**为折叠组件） | **不加** `el-card-padding-bottom0` |
+| 表格组件（`ylTableSimple`） | `el-card` 加 `yl-tabs-table` |
+| 中台页面根容器 | 最外层 `div` 加 `yl_manager_container` |
+
+```vue
+<!-- 折叠卡片：不加 el-card-padding-bottom0 -->
+<el-card>
+  <yl-collapse title="企业基本信息" :is-collapse="false">
+    <template #content>
+      <yl-form-editor layout="double" :show-submit-button="false" ... />
+    </template>
+  </yl-collapse>
+</el-card>
+```
+
+## 表单模板二（分步表单）
+
+> 将冗长或不熟悉任务拆成多步；需做好信息分类与页面层级。
+
+1. **`ylTitle`** + 可关闭 **全局说明**（`ylTips`，`type="info"`，监听 `@hiddenTips`）。
+   - 中台改用 **`ylManagerTitle`** 作页头，全局说明紧跟其下
+2. **`el-steps`**：步骤标题（建议 ≤10 字），展示当前进度。
+3. **当前步内容**：单卡或多卡；填写用 `ylFormEditor`，上游反显/确认用 `ylFormView`（复合表单）；步骤内卡片模块操作未说明位置 → **小标题行右侧**。
+4. **页面级操作按钮**：需求未说明位置时放 **`ylManagerTitle` `#btn`**；需求要求置底时用 `ylContainerFoot`。
+5. **提交成功**：可切换结果区（成功图标 + 说明 + 返回入口）。
+
+## 布局规则
+
+| 场景 | 说明 |
+| --- | --- |
+| 单卡片单列 | 整体居中，提交在卡片内表单项下方，**不需置底**、**不加** `el-card-padding-bottom0`；表单项标题**不限 8 字** |
+| 多卡片复合 | 双列/三列左对齐；**整卡全只读**用 View；**同卡混排只读+可编辑**用 **单个** Editor（只读项 `disabled`） |
+| 未说明按钮位置（页面级） | **默认 
+`**ylManagerTitle` `#btn`**（返回见 `showBack`），不用 `ylContainerFoot` |
+| 未说明返回位置 | **`ylManagerTitle`** `:showBack="true"` + `@go-back` |
+| 未说明按钮位置（卡片模块） | **小标题行右侧**（`yl-title-sub` + `text-right`），不用表格/内容区最下方 |
+| 数据表格 | **优先 `ylTableSimple`**；中台列表主表用 `ylMpsTable`；**禁止**默认 `el-table` |
+
+## 数据表格（优先 ylTableSimple）
+
+表单详情页中相似问、明细行、只读列表等**一律优先 `ylTableSimple`**：
+
+```vue
+<yl-table-simple :data="tableData" :is-table-form="true" />
+```
+
+- 动态行编辑：`:isTableForm="true"` 或自定义列 `slot`；行内操作用 `attr.type: 'handle'`
+- 表格外包 `el-card.yl-tabs-table`，沿用平台默认表格线样式
+- **禁止**默认手写 `el-table`；仅 `ylTableSimple` 无法满足且需求明确要求原生特性时才降级
+
+## 复合表单：标准字段块 + 动态表格
+
+> 典型：基础信息（Editor/View）+ 相似问/明细行（Table）。**基础信息卡片必须用 Editor/View，不得手写 el-form / view-item。**
+
+### 编辑页
+
+1. 卡片「基础信息」：`el-card.el-card-padding-bottom0` + `yl-form-editor`（`layout="double"`，`:show-submit-button="false"`）
+2. 卡片「添加 xxx」：`el-card.yl-tabs-table` + **小标题行右侧**放模块操作按钮（如「添加」）+ **`ylTableSimple`**（`:isTableForm="true"` 或自定义 `slot` 列）；**勿**把模块按钮放在表格下方；动态行 initial 可为 `[]`，由用户点「添加」增行
+3. **`ylTitle` 右侧「确认」**（默认）：在 `onSave` 中 `$refs.formEditor.$refs.dynamicForm.validate`，通过后 `getFormFieldValues()` 取值，再校验表格区并提交；**勿**在 `<yl-form-editor>` 上绑 `@submit` / `@reset`；**`type: 'slot'` 字段（远程选择等）不得绕过 `formRules` 或在确认按钮中 Toast 提示必填空值**
+
+### 查看页
+
+1. 卡片「基础信息」：`el-card.el-card-padding-bottom0` + `yl-form-view`（`layout="doubleRow"`，`:form-data` + `:req-data`）
+2. 卡片「xxx 列表」：只读 **`ylTableSimple`**（无 input；行内查看用 `attr.type: 'handle'`）
+3. **默认**：`ylManagerTitle` `:showBack="true"` + `@go-back`；页头操作放 `#btn`
+
+### 禁止
+
+- 基础信息卡片内手写 `<el-form><el-form-item>` 替代 `yl-form-editor`
+- 查看页用 `<div class="view-item">` 替代 `yl-form-view`
+- 需求未要求置底时使用 `yl-container-foot`
+- 动态行表格：需求未写「至少 N 条」时，**允许删至 0 行**；**勿**默认禁止删最后一行或 Toast「至少保留一条」；提交时**仅校验现有各行**必填/格式（有行未填则标红）
+- 卡片模块操作（如「添加」）**默认**放在表格下方或卡片内容区最底部
+- **禁止**数据表格区默认使用 `el-table`（须优先 `ylTableSimple`）
+- **中台/前台**卡片小标题使用 `yl_manager_subheading`（该 class 仅后台可用）
+
+## 代码骨架（模板一 · 默认 · 页头操作）
+
+```vue
+<template>
+  <div class="yl_manager_container">
+    <ylManagerTitle title="二级页面标题" :showBack="true" have-expand @go-back="onBack">
+      <template #btn>
+        <el-button size="small" type="primary" plain @click="onCancel">取消</el-button>
+        <el-button size="small" type="primary" @click="onSave">保存</el-button>
+      </template>
+    </ylManagerTitle>
+    <yl-tips class="page-global-tip" type="warning" description="提交后将进入审批流程。" :show-close-icon="false" />
+    <el-card class="el-card-padding-bottom0">
+      <el-row class="yl-title-sub">基础信息</el-row>
+      <yl-form-editor ref="formEditor" layout="double" :show-submit-button="false" ... />
+    </el-card>
+    <el-card class="yl-tabs-table">
+      <el-row class="mb16">
+        <el-col :span="12" class="yl-title-sub">明细行</el-col>
+        <el-col :span="12" class="text-right">
+          <el-button size="small" type="primary" plain>添加</el-button>
+        </el-col>
+      </el-row>
+      <yl-table-simple :data="detailTableData" />
+    </el-card>
+  </div>
+</template>
+```
+
+```js
+// detailRows: []，created/mounted 调详情接口赋值；禁止预填 mock 行
+```
+
+## 代码骨架（模板一 · 置底 · 按需）
+
+```vue
+<template>
+  <div class="yl_manager_container">
+    <ylManagerTitle title="二级页面标题" :showBack="true" have-expand @go-back="onBack" />
+    <div class="form-page__body">
+      <el-card class="el-card-padding-bottom0">
+        <yl-form-editor layout="double" :show-submit-button="false" ... />
+      </el-card>
+    </div>
+    <yl-container-foot>
+      <template #center>
+        <el-button>取 消</el-button>
+        <el-button type="primary">保 存</el-button>
+      </template>
+    </yl-container-foot>
+  </div>
+</template>
+```
+
+> 仅需求明确要求置底时使用上述骨架。
+
+## 代码骨架（模板二 · 分步）
+
+```vue
+<template>
+  <div class="yl_manager_container">
+    <ylManagerTitle title="二级页面标题" :showBack="true" have-expand @go-back="onBack">
+      <template #btn>
+        <el-button size="small" type="primary" plain :disabled="step===0" @click="prev">上一步</el-button>
+        <el-button size="small" type="primary" @click="next">{{ step === lastStep ? '提交' : '下一步' }}</el-button>
+      </template>
+    </ylManagerTitle>
+    <yl-tips v-if="globalTipVisible" type="info" description="分步填写过程中可随时点击「保存」暂存草稿。" @hiddenTips="globalTipVisible = false" />
+    <el-card><el-steps :active="step" align-center>...</el-steps></el-card>
+    <el-card v-show="step===0" class="el-card-padding-bottom0">
+      <el-row class="mb16">
+        <el-col :span="12" class="yl-title-sub">步骤一字段</el-col>
+        <el-col :span="12" class="text-right">
+          <el-button size="small" type="primary" plain>添加</el-button>
+        </el-col>
+      </el-row>
+      <yl-form-editor layout="double" ... />
+    </el-card>
+    <el-card v-show="step===3" class="el-card-padding-bottom0"><yl-form-view layout="doubleRow" ... /></el-card>
+  </div>
+</template>
+```
+
+## 引入与注册
+
+> **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 ylFormEditor from 'zqyl-component-base/lib/ylFormEditor';
+import ylFormView from 'zqyl-component-base/lib/ylFormView';
+import ylTips from 'zqyl-component-base/lib/ylTips';
+import ylContainerFoot from 'zqyl-component-base/lib/ylContainerFoot';
+import ylDialog from 'zqyl-component-base/lib/ylDialog';
+
+Vue.component('ylTitle', ylTitle);
+Vue.component('ylFormEditor', ylFormEditor);
+Vue.component('ylFormView', ylFormView);
+Vue.component('ylTips', ylTips);
+Vue.component('ylContainerFoot', ylContainerFoot);
+Vue.component('ylDialog', ylDialog);
+// 项目 legacy 组件（如 ylManagerTitle）可同样 Vue.component，勿覆盖 base 同名组件
+```
+
+页面 script 只需业务逻辑与接口，模板直接使用全局组件，例如：
+
+```vue
+<yl-title platformType="yx" title="列表页标题" :disabledBack="true" />
+```
+
+## 注意事项
+
+- **默认**页面级操作在 **`ylTitle` 右侧**（返回位置见「返回按钮位置」）；**勿**默认添加 `ylContainerFoot`。
+- **卡片模块操作**（如添加行、模块内导入）：需求未说明位置时放 **小标题行右侧**，勿放表格/内容区最下方。
+- **数据表格**：**优先 `ylTableSimple`**，禁止默认 `el-table`。
+- 仅需求明确置底时，才用 `ylContainerFoot`；且勿与页头重复同一组按钮。
+- 只读详情**整卡全只读**时用 `ylFormView`；**同卡混排只读+可编辑**时用 `ylFormEditor` + `disabled`，**勿**拆成 View + Editor。
+- **标准字段块（如「基础信息」）必须用 `ylFormEditor` / `ylFormView`**，禁止整块手写 `el-form` / `view-item`（见「复合表单」章节）。
+- 附件、校验、`visible` 联动见 `xiaoma-zqyl-form-editor-mid` / `xiaoma-zqyl-form-view-mid` / `xiaoma-zqyl-file-upload-mid` 组件 skill。
+- 卡片内折叠：`ylCollapse` 见 `xiaoma-zqyl-collapse-mid`；模块分块 + 扩展区：`ylModule` 见 `xiaoma-zqyl-module-mid`。
+- **`el-card` 内顶层为 `ylCollapse` 时**：**不要**加 `el-card-padding-bottom0`（该 class 仅用于卡片内**直接**放置 `ylFormEditor` / `ylFormView`，且**非**单卡片单列含卡片内按钮场景）。
+- 页面/卡片/表单项提示见 `xiaoma-zqyl-tips-mid`；全局距标题 16px、卡片内距下方内容 16px。

package/src/zqyl-skills/mid/xiaoma-zqyl-import-dialog-page-mid/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: xiaoma-zqyl-import-dialog-page-mid
+description: 中台批量导入弹窗页面规范及骨架（批量导入弹窗（下载模板 + 拖拽上传 / 导入失败结果）；配套组件：ylDialog、ylButton、ylFileUpload）。在用户新建或改造中台批量导入弹窗、或根据需求/原型生成该类型页面时使用；组件细节读取同模块的 xiaoma-zqyl-<组件>-mid skill（完整组件清单见 xiaoma-zqyl-ui-spec 的 components-index.md）。适用于中台仓库（如 mps-main，platformType `mps`；列表页页头/表格用 ylManagerTitle + ylMpsTable）。 Use when building or reviewing a ZQYL mid batch-import dialog page.
+---
+
+# 批量导入弹窗（中台）
+
+本整包提供**中台批量导入弹窗**的页面骨架与拼装规范。组件 Props / 列配置 / 查询项等细节从已安装的独立组件 skill 读取（同模块已一并安装）。使用时先读 **xiaoma-zqyl-ui-spec**，再按下方知识库层次展开。
+
+`zqyl-component-base` 须在**项目入口文件**按**组件名逐个** `import` 并以 `Vue.component` 注册；样式在入口 `import 'zqyl-component-base/lib/theme-chalk/component.css'`。**禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)` 全量注册。页面内直接使用 `<yl-*>`，勿单页重复 import。
+
+## 知识库层次
+
+| 层级 | skill / 路径 | 用途 |
+| --- | --- | --- |
+| 页面模板 | [pages/importDialogPage.md](./pages/importDialogPage.md) | 批量导入弹窗 页面骨架与拼装顺序 |
+| 配套组件 | `xiaoma-zqyl-dialog-mid` | ylDialog · 弹窗 |
+| 配套组件 | `xiaoma-zqyl-button-mid` | ylButton · 按钮 |
+| 配套组件 | `xiaoma-zqyl-file-upload-mid` | ylFileUpload · 文件上传 |
+
+## 执行顺序
+
+0. 若用户提供需求/原型，先按 **xiaoma-zqyl-ui-spec**「从需求/原型生成页面」提取字段与操作，再读本整包
+1. 先读 [pages/importDialogPage.md](./pages/importDialogPage.md) 搭**批量导入弹窗**页面骨架
+2. 按需求出现的组件，读取已安装的 `xiaoma-zqyl-{组件key}-mid` 组件 skill（如上表；同模块已一并安装）
+3. 组件细节以组件 skill 为准，不得与页面骨架冲突
+4. 交付前对照 **xiaoma-zqyl-ui-spec** 交付自检清单

package/src/zqyl-skills/mid/xiaoma-zqyl-import-dialog-page-mid/pages/importDialogPage.md

@@ -0,0 +1,102 @@
+---
+title: 批量导入弹窗（中台）
+---
+
+
+# 批量导入弹窗（中台）
+
+你是一个前端页面实现助手。以本技能描述的批量导入弹窗为**基线**；**无公共批量导入组件**，由列表页按钮触发，用 `ylDialog` + `el-upload` 拼装；失败结果用 warning 标题弹窗。
+
+## 平台与参考
+
+- 平台：中台
+- 页头/表格：**`ylManagerTitle` + `ylMpsTable`**（项目 `components`，无则手动拷贝）
+- 外部查询：**`ylSearchForm` 在入口按组件名 `Vue.component` 注册**（platformType：`mps`）
+- 模板数据名：`importDialogPage`
+- 布局类型：**批量导入弹窗**（列表页按钮触发 → `ylDialog` 600px + 下载模板 + 拖拽上传；失败结果 warning 弹窗）
+- **无公共批量导入组件**，弹窗本体按本 skill 拼装，不重复列表页骨架。
+
+## 页面说明
+
+列表页触发的 Excel 批量导入：ylDialog 600px + 下载模板 + 拖拽上传；导入失败 warning 结果弹窗
+
+## 何时使用
+
+- 列表页/管理页点击「批量导入」「Excel 导入」等按钮，弹出 **`ylDialog` + 拖拽上传** 场景。
+- 需先下载模板、填写后上传 xlsx/xls，校验格式与大小后提交导入接口。
+- 部分失败时需二次 **`warning` 标题弹窗** 展示成功/失败条数，并提供失败明细下载。
+- 用户提到「批量导入弹窗、Excel 导入、下载模板上传、导入失败下载附件」等信号时。
+
+## 重要说明
+
+- **无公共批量导入组件**，按本模板用 `ylDialog` + `el-upload` 拼装。
+- 弹窗通常由**列表页**触发，本模板描述弹窗本体结构与交互，不重复列表页骨架。
+
+## 场景一：批量导入弹窗
+
+1. **容器**：`xiaoma-zqyl-dialog-mid`，宽度 **600px**，`:closeOnClickModal="false"`。
+2. **标题**：默认「批量导入」。
+3. **正文顶部**：`请先` + 可点击「下载模板」+ `，录入信息后上传以批量导入`。
+4. **上传区**：`el-upload` `drag`；`accept=".xlsx,.xls"`；`show-file-list="false"`。
+   - 空态：加号图标 +「将文件拖入此区域，或点击此处上传EXCEL表格」+ 格式/条数/大小说明（如 ≤100 条、≤10M）。
+   - 已选文件：Excel 图标 + 文件名 +「重新上传」按钮。
+   - 校验失败：上传区红色虚线边框 + 下方 `error-text` 提示。
+5. **Footer**：`取消`（default）+ `导入`（primary），右对齐。
+
+## 场景二：导入失败结果弹窗
+
+1. **`ylDialog`** + `:dialogTitleDate="{ type: 'warning', title: '数据导入失败' }"`，宽 600px。
+2. **正文**：`本次导入共计{n}条，导入成功{m}条，导入失败{k}条，点击【下载附件】查看导入失败数据`；「下载附件」用 `el-button type="text"`。
+3. **Footer**：`知道了`（primary）。
+
+## 布局与样式
+
+| 元素 | 规则 |
+| --- | --- |
+| 弹窗宽度 | 600px |
+| 上传拖拽区高度 | 240px，宽度 100% |
+| 下载模板链接 | 主题色、`cursor: pointer` |
+| 错误提示 | `#f56c6c`，12px |
+
+## 示例骨架（批量导入）
+
+```vue
+<yl-dialog
+  :visible.sync="importVisible"
+  :closeOnClickModal="false"
+  :attributes="{ width: '600px', title: '批量导入' }"
+>
+  <p class="mb10">请先<em class="link" @click="downloadTemplate">下载模板</em>，录入信息后上传以批量导入</p>
+  <el-upload drag accept=".xlsx,.xls" :show-file-list="false" ... />
+  <div slot="footer" class="text-right">
+    <el-button size="small" @click="importVisible = false">取消</el-button>
+    <el-button size="small" type="primary" @click="submitImport">导入</el-button>
+  </div>
+</yl-dialog>
+```
+
+## 引入与注册
+
+> **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 ylDialog from 'zqyl-component-base/lib/ylDialog';
+
+Vue.component('ylDialog', ylDialog);
+// 项目 legacy 组件（如 ylManagerTitle）可同样 Vue.component，勿覆盖 base 同名组件
+```
+
+页面 script 只需业务逻辑与接口，模板直接使用全局组件，例如：
+
+```vue
+<yl-title platformType="yx" title="列表页标题" :disabledBack="true" />
+```
+
+列表页触发弹窗时，确保入口已注册 `ylDialog`；上传区用 Element `el-upload`。

package/src/zqyl-skills/mid/xiaoma-zqyl-list-page-mid/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: xiaoma-zqyl-list-page-mid
+description: 中台列表页页面规范及骨架（中台列表页（ylManagerTitle + ylMpsTable + 变体场景）；配套组件：ylManagerTitle、ylSearchForm、ylMpsTable、ylTips、ylDialog、ylButton）。在用户新建或改造中台列表页、或根据需求/原型生成该类型页面时使用；组件细节读取同模块的 xiaoma-zqyl-<组件>-mid skill（完整组件清单见 xiaoma-zqyl-ui-spec 的 components-index.md）。适用于中台仓库（如 mps-main，platformType `mps`；列表页页头/表格用 ylManagerTitle + ylMpsTable）。 Use when building or reviewing a ZQYL mid list page.
+---
+
+# 列表页（中台）
+
+本整包提供**中台列表页**的页面骨架与拼装规范。组件 Props / 列配置 / 查询项等细节从已安装的独立组件 skill 读取（同模块已一并安装）。使用时先读 **xiaoma-zqyl-ui-spec**，再按下方知识库层次展开。
+
+`zqyl-component-base` 须在**项目入口文件**按**组件名逐个** `import` 并以 `Vue.component` 注册；样式在入口 `import 'zqyl-component-base/lib/theme-chalk/component.css'`。**禁止** `import zqylComponentBase from 'zqyl-component-base'` + `Vue.use(zqylComponentBase)` 全量注册。页面内直接使用 `<yl-*>`，勿单页重复 import。
+
+## 知识库层次
+
+| 层级 | skill / 路径 | 用途 |
+| --- | --- | --- |
+| 页面模板 | [pages/listPage.md](./pages/listPage.md) | 列表页 页面骨架与拼装顺序 |
+| 配套组件 | `xiaoma-zqyl-manager-title-mid` | ylManagerTitle · 标题（中台） |
+| 配套组件 | `xiaoma-zqyl-search-form-mid` | ylSearchForm · 查询条件（搜索表单） |
+| 配套组件 | `xiaoma-zqyl-mps-table-mid` | ylMpsTable · 表格（中台） |
+| 配套组件 | `xiaoma-zqyl-tips-mid` | ylTips · 提示 |
+| 配套组件 | `xiaoma-zqyl-dialog-mid` | ylDialog · 弹窗 |
+| 配套组件 | `xiaoma-zqyl-button-mid` | ylButton · 按钮 |
+
+## 执行顺序
+
+0. 若用户提供需求/原型，先按 **xiaoma-zqyl-ui-spec**「从需求/原型生成页面」提取字段与操作，再读本整包
+1. 先读 [pages/listPage.md](./pages/listPage.md) 搭**列表页**页面骨架
+2. 按需求出现的组件，读取已安装的 `xiaoma-zqyl-{组件key}-mid` 组件 skill（如上表；同模块已一并安装）
+3. 组件细节以组件 skill 为准，不得与页面骨架冲突
+4. 交付前对照 **xiaoma-zqyl-ui-spec** 交付自检清单