@brms/ai-skills 0.1.0

package/skills/brms-prototype-generator/references/01-list-query.md

@@ -0,0 +1,444 @@
+# 列表查询页模式
+
+最常用的页面模式：双卡片布局（查询条件卡片 + 结果表格卡片）。
+
+## 适用场景
+
+- 数据管理和浏览（用户列表、订单列表）
+- 带增删改查的标准 CRUD 页面
+- 审批待办/已办列表
+- 任何"筛选 → 浏览"的数据页面
+
+## 标准结构（双卡片模式）
+
+```
+div.flex-col.flex.h-full
+  └── BxRoundedContainer                    ← 卡片1：查询条件
+        ├── BxContainer(title="查询条件")     ← 卡片标题
+        └── VxePlusForm(:form-options)        ← 查询表单
+  └── BxRoundedContainer.flex-1.flex.flex-col ← 卡片2：结果表格（flex-1 占满剩余空间）
+        ├── BxContainer.flex-initial(title="结果集") ← 卡片标题
+        └── VxePlusTable.flex-1(...)          ← 数据表格
+```
+
+**关键 CSS 类：**
+
+- 最外层 `flex-col flex h-full` — 纵向 flex，撑满高度
+- 查询卡片不加 `flex-1` — 避免挤压结果表格
+- 结果卡片 `flex-1 flex flex-col` — 占据剩余空间
+- 结果标题 `flex-initial` — 不参与伸缩
+- 表格 `flex-1` — 占据卡片剩余空间
+
+## 生成硬规则
+
+- 查询/重置按钮只出现在查询卡片标题：`<BxContainer title="查询条件" custom-btn-auto ... />`。
+- 结果表格标题只显示标题，不放新增/编辑/删除按钮，不使用 `custom-btn-auto`。
+- 不生成操作列。不要创建 `action` / `operation` / `operate` / `操作` 列，也不要依赖 `actions` 配置。
+- 新增、编辑、删除、批量删除等表格动作统一使用 `VxePlusTable :toolbar-buttons="toolbarButtons"` 和 `toolbarButtonClick`，避免标题栏和表格工具栏重复生成按钮。
+- 只有产品文档明确要求“标题栏区块按钮”且该按钮不是表格新增/编辑/删除动作时，才允许使用结果区 `BxContainer :custom-btn-list`。
+- 需要单行“查看详情/查看矿权”时，优先让业务字段使用 `tableLink` 可点击；不要新增操作列。不要用 `cell-click` 作为默认编辑入口。
+- 不在 `createColumns` 中生成 `{ type: 'checkbox' }`。需要勾选时在表格组件上设置 `:show-checkbox="true"`。
+- 普通数据列默认使用 `useTable().createColumns([...], { width: undefined })` 让列自动撑开；只给序号、状态、短数字等列显式 `width`。
+- 同一个表格只能选择一种编辑模式：行编辑或弹窗编辑，不能混用。
+
+## 变体
+
+### 变体 A：纯列表（无 tabs）
+
+最基础模式。参考 `demo/list.vue`。适合单数据源的简单列表。
+
+### 变体 B：Tab 切换列表
+
+参考 `BMBF11.vue`。适合同时展示多组数据（如待办 + 已办）。
+
+**特征：**
+
+- 在结果卡片内用 `vxe-tabs` 包裹多个 `VxePlusTable`
+- 默认使用本地 mock 数据；只有产品文档明确给出 serviceName/methodName 时才使用 `serviceConfig`
+- 共用同一个 formData
+
+### 变体 C：行编辑列表
+
+适合需要行内编辑的列表。
+
+**特征：**
+
+- `VxePlusTable` 设置 `:is-edit="true"` 和 `toolbarButtons`
+- 可编辑字段在 `createColumns` 中配置 `editRender`
+- `toolbarButtonClick` 中调用 `$grid.insertAt({})` 新增行
+- 保存/删除/校验围绕 `$grid` 当前数据和勾选数据处理
+- 不生成 `vxe-modal` 编辑弹窗，不生成 `handleEdit(row)` 打开弹窗
+
+### 变体 D：弹窗编辑列表
+
+适合新增/编辑字段较多、需要独立表单校验或分组排版的列表。
+
+**特征：**
+
+- `VxePlusTable` 不设置 `:is-edit="true"`
+- 普通数据列不配置 `editRender`
+- 新增/编辑/删除入口放在 `toolbarButtons` 和 `toolbarButtonClick`
+- 新增/编辑打开 `vxe-modal + VxePlusForm :form-options`
+- 编辑已选行时从 `$grid.getCheckboxRecords()` 或当前行取数据；不要通过 `cell-click` 暗中打开编辑弹窗
+
+## 关键代码骨架
+
+### 查询表单
+
+```ts
+const formData = reactive({
+  field1Like: '',
+  field2: '',
+  dateBegin: '',
+  dateEnd: '',
+});
+
+const formOption = reactive({
+  id: 'inqu_status',
+  data: formData,
+  items: [
+    { field: 'field1Like', title: '字段1', itemRender: { name: 'VxeInput' } },
+    {
+      field: 'field2',
+      title: '字段2',
+      itemRender: { name: 'formSelect', props: { codeSet: 'XXX.query' } },
+    },
+    {
+      field: 'dateRange',
+      title: '日期范围',
+      itemRender: {
+        name: 'dateRange',
+        props: { startDate: 'dateBegin', endDate: 'dateEnd', type: 'date' },
+      },
+    },
+  ],
+});
+```
+
+### 表格列定义
+
+普通列表/弹窗编辑列表的列默认只展示数据：
+
+```ts
+const columns = useTable().createColumns(
+  [
+    { type: 'seq', width: 60, fixed: 'left' },
+    { field: 'col1', title: '列1' },
+    { field: 'col2', title: '列2' },
+    {
+      field: 'projectName',
+      title: '项目名称',
+      cellRender: {
+        name: 'tableLink',
+        props: { linkClick: row => router.push({ path: '/web/DMDA02', query: { id: row.id } }) },
+      },
+    },
+  ],
+  { width: undefined },
+);
+```
+
+行编辑列表才使用 `editRender`：
+
+```ts
+const columns = useTable().createColumns(
+  [
+    { type: 'seq', width: 60, fixed: 'left' },
+    { field: 'col1', title: '列1', editRender: { name: 'VxeInput' } },
+    {
+      field: 'col3',
+      title: '列3（下拉编辑）',
+      editRender: { name: 'tableSelect', props: { codeSet: 'XXX' } },
+    },
+  ],
+  { width: undefined },
+);
+```
+
+## 编辑模式选择
+
+### 行编辑
+
+Use when the product doc describes inline maintenance, batch row editing, editable grids, or spreadsheet-like input.
+
+Required table shape:
+
+```vue
+<VxePlusTable
+  id="DMDA01_result"
+  ref="gridRef"
+  :columns="columns"
+  :data="rows"
+  :is-edit="true"
+  :edit-rules="editRules"
+  :toolbar-buttons="toolbarButtons"
+  :show-checkbox="true"
+  v-on="gridEvents"
+/>
+```
+
+Renderer selection for row edit:
+
+- text/input cells: `editRender: { name: 'VxeInput' }`
+- select cells: `editRender: { name: 'tableSelect', props: { options: [] } }` or `codeSet`
+- date cells: `editRender: { name: 'VxeDatePicker', props: { type: 'date' } }`
+- dialog selector cells: `editRender: { name: 'tableSelectDialog', props: { component, fields, dialogFields } }`
+
+### 弹窗编辑
+
+Use when add/edit has a separate form, grouped fields, conditional fields, or confirmation flow.
+
+Required table shape:
+
+```vue
+<VxePlusTable
+  id="DMDA01_result"
+  ref="gridRef"
+  :columns="columns"
+  :data="rows"
+  :toolbar-buttons="toolbarButtons"
+  :show-checkbox="true"
+  v-on="gridEvents"
+/>
+```
+
+Rules:
+
+- Do not set `:is-edit="true"`.
+- Do not add `editRender` to normal data columns.
+- Use `vxe-modal + VxePlusForm :form-options` for the edit form.
+- Open the modal from `toolbarButtonClick`, explicit `handleEdit(row)`, or `tableLink` on a business field.
+- Do not use `@cell-click`, `cellClick`, or `handleCellClick` to open the edit modal.
+
+Renderer selection for popup forms:
+
+- text/input fields: `itemRender: { name: 'VxeInput' }`
+- select fields: `itemRender: { name: 'formSelect', props: { options: [] } }` or `codeSet`
+- date range query fields: `itemRender: { name: 'dateRange', props: { startDate, endDate, type: 'date' } }`
+- dialog selector fields: `itemRender: { name: 'formSelectDialog', props: { component, fields, dialogFields } }`
+
+### Mock 数据和接口占位
+
+```ts
+// @brms-mock-data product-doc: list seed rows, remove after ServiceName.query is wired
+const mockRows: RowVO[] = [];
+
+// @brms-mock-data product-doc: visible table rows derived from mockRows
+const rows = ref<RowVO[]>(mockRows);
+
+// @brms-mock-handler product-doc: local list query, replace with ServiceName.query
+async function queryList() {
+  // TODO: 接入后台查询接口
+  ElMessage.info('TODO: 接入后台接口');
+  rows.value = mockRows.filter((row) => matchesQuery(row, formData));
+}
+
+// @brms-mock-handler product-doc: local row save, replace with ServiceName.save
+async function saveRow(row: RowVO) {
+  // TODO: 接入后台保存接口
+  ElMessage.info('TODO: 接入后台接口');
+  upsertLocalRow(rows.value, row);
+}
+
+// @brms-mock-handler product-doc: local row delete, replace with ServiceName.delete
+async function deleteRow(row: RowVO) {
+  // TODO: 接入后台删除接口
+  ElMessage.info('TODO: 接入后台接口');
+  rows.value = rows.value.filter((item) => item.id !== row.id);
+}
+
+// @brms-mock-handler product-doc: local mock filter helper, remove after backend query is wired
+function matchesQuery(row: RowVO, query: typeof formData) {
+  return true;
+}
+```
+
+### 明确接口时的 serviceConfig
+
+只有文档明确列出后台服务和方法时，才把表格从 `:data="rows"` 切换为 `:service-config="serviceConfig"`。生成前必须读取 `references/06-backend-request-patterns.md`。
+
+```ts
+// @brms-explicit-interface product-doc: BMBF56.query/BMBF56.insert/BMBF56.save/BMBF56.delete
+const formConfig = reactive({
+  id: 'inqu_status',
+  data: formData,
+});
+
+const serviceConfig = reactive({
+  serviceName: 'BMBF56',
+  queryMethod: 'query',
+  insertMethod: 'insert',
+  updateMethod: 'save',
+  deleteMethod: 'delete',
+});
+```
+
+### 按钮配置
+
+列表页涉及两类按钮，分别在 BxContainer（搜索卡片标题栏）和 VxePlusTable（表格工具栏）。
+
+---
+
+#### 1. 搜索卡片按钮 — BxContainer.customBtnAuto / customBtnList
+
+**源码链路：** `bx-container-v2.vue` 的 `customBtnList` prop → `onMounted` 中先查后端权限按钮 `findBtnByPath(pageId)[containerId]`，无权限配置时 fallback 到 `customBtnList` 或内置默认按钮 → 渲染为 `el-button` → 点击 emit `btnClick({ name, code })`
+
+**方式 A：customBtnAuto（推荐，自动生成查询/重置）**
+
+```vue
+<BxContainer title="查询条件" custom-btn-auto @btn-click="handleSearchBtn" />
+```
+
+`customBtnAuto` 自动生成两个按钮：
+
+| nodeName | nodeCode | 说明                                      |
+| -------- | -------- | ----------------------------------------- |
+| 查询     | `QUERY`  | 触发查询                                  |
+| 重置     | `RESET`  | 触发表单重置（`isReset` 为 false 时隐藏） |
+
+**方式 B：customBtnList（自定义按钮列表）**
+
+```vue
+<BxContainer title="查询条件" :custom-btn-list="searchBtnList" @btn-click="handleSearchBtn" />
+```
+
+```ts
+const searchBtnList = [
+  { nodeName: '搜索', nodeCode: 'SEARCH' },
+  { nodeName: '导出', nodeCode: 'EXPORT' },
+  { nodeName: '清空', nodeCode: 'CLEAR' },
+];
+```
+
+**CustomBtnItem 接口：**
+
+```ts
+interface CustomBtnItem {
+  nodeName: string; // 按钮显示文本
+  nodeCode: string; // 按钮编码（emit 时作为 code 传出）
+  visible?: boolean; // 是否显示，默认 true
+  disabled?: boolean; // 是否禁用，默认 false
+}
+```
+
+**处理函数：**
+
+```ts
+function handleSearchBtn({ code }: { code: string }) {
+  if (code === 'QUERY') gridRef.value?.reload();
+  if (code === 'RESET') formRef.value?.reset();
+  // 自定义按钮按 code 判断
+}
+```
+
+---
+
+#### 2. 表格工具栏按钮 — VxePlusTable.toolbarButtons
+
+**源码链路：** `VxePlusTable` 的 `toolbarButtons` prop → `useToolbarConfig()` hook → 先查后端权限按钮 `findBtnByPath(pageId)['GRID:EF_GRID_${tableId}']` → 与 `props.toolbarButtons` concat 合并 → 按 `leftButtons` 拆分为左/右两组 → 由 `groupButtom` renderer 渲染 → 点击触发 vxe-grid 原生的 `toolbarButtonClick` 事件，payload 为 `{ code, $grid }`
+
+> **注意：** toolbarButtons 定义在 `v-on="gridEvents"` 中通过 `toolbarButtonClick` 处理，不是 `@btn-click`。
+
+```vue
+<VxePlusTable
+  :toolbar-buttons="toolbarButtons"
+  :show-checkbox="true"
+  :is-edit="true"
+  v-on="gridEvents"
+/>
+```
+
+`show-checkbox` 会让表格组件生成勾选列，`createColumns` 中不要再写 `{ type: 'checkbox' }`。
+
+```ts
+import type { VxeGridProps } from 'vxe-table';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import to from 'await-to-js';
+
+const toolbarButtons = ref<NonNullable<VxeGridProps['toolbarConfig']>['buttons']>([
+  { name: '新增', code: 'add', status: 'primary' },
+  { name: '删除', code: 'del', status: 'danger' },
+  { name: '导出', code: 'export', status: 'success' },
+]);
+
+const gridEvents = {
+  toolbarButtonClick: async ({ code, $grid }: any) => {
+    if (code === 'add') {
+      // 新增行并进入编辑态
+      const { row: newRow } = await $grid.insertAt({});
+      $grid.setEditRow(newRow);
+    }
+    if (code === 'del') {
+      const rows = $grid.getCheckboxRecords();
+      if (rows.length === 0) {
+        ElMessage.warning('请先勾选要删除的记录');
+        return;
+      }
+      // 二次确认
+      const [err] = await to(
+        ElMessageBox.confirm('确定删除所选记录吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }),
+      );
+      if (err) return;
+      await $grid.remove(rows);
+    }
+    if (code === 'export') {
+      // 导出逻辑
+    }
+  },
+};
+```
+
+**ToolbarButton 接口：**
+
+```ts
+interface ToolbarButton {
+  name: string; // 按钮显示文本
+  code: string; // 按钮编码（toolbarButtonClick 中作为 code 传出）
+  status?: string; // 按钮类型：'primary' | 'danger' | 'success' | 'warning' | ''
+  disabled?: boolean; // 是否禁用
+  visible?: boolean; // 是否显示
+}
+```
+
+**$grid 常用方法：**
+
+| 方法                         | 说明                     |
+| ---------------------------- | ------------------------ |
+| `$grid.insertAt({})`         | 插入新行，返回 `{ row }` |
+| `$grid.setEditRow(row)`      | 将指定行设为编辑态       |
+| `$grid.getCheckboxRecords()` | 获取所有勾选行           |
+| `$grid.remove(rows)`         | 删除指定行               |
+| `$grid.reload()`             | 重新加载数据             |
+| `$grid.getGridInstance()`    | 获取底层 vxe-grid 实例   |
+
+**## 关键规则：** 删除操作必须用 `ElMessageBox.confirm` 二次确认，并用 `await-to-js` 的 `to()` 包裹。
+
+### 表单-表格关联
+
+```ts
+const formConfig = reactive({
+  id: 'inqu_status',
+  data: formData,
+});
+```
+
+### 查询/重置按钮处理
+
+当 `BxContainer` 设置了 `customBtnAuto` 或 `customBtnList` 包含查询/重置按钮时：
+
+```ts
+function handleBtnClick({ code }: { code: string }) {
+  if (code === 'QUERY') gridRef.value?.reload();
+  if (code === 'RESET') formRef.value?.reset();
+}
+```
+
+## 参考文件
+
+- **demo/list.vue**：优先使用目标项目内的 demo/list；没有时参考 `project/prototype/src/views/demo/list.vue` — 标准双卡片模式
+- **BMBF11.vue**：`project/prototype/src/views/BM/BF/BMBF11.vue` — Tab 切换 + 双表格
+- **demo/index.vue**：`project/prototype/src/views/demo/index.vue` — 可编辑 + 级联下拉 + 工具栏按钮

package/skills/brms-prototype-generator/references/02-form-entry.md

@@ -0,0 +1,129 @@
+# 表单录入页模式
+
+数据录入/编辑页面模式：表单卡片 + 提交按钮。
+
+默认不接入真实后台。保存、查询详情等位置保留命名 async 方法，方法内写 TODO 注释、显示 `ElMessage.info('TODO: 接入后台接口')`，并读写本地 mock 数据。只有产品文档明确给出 serviceName/methodName 时，才按 `references/06-backend-request-patterns.md` 生成 `EiCommunicator.send` 请求。
+
+Mock-only 保存、详情回填和本地数据 helper 必须写可搜索标记：`// @brms-mock-data <source-or-page>: <purpose>` 或 `// @brms-mock-handler <source-or-page>: <operation>`。不要只写普通 TODO。
+
+## 适用场景
+
+- 新增记录
+- 编辑记录
+- 配置信息维护
+- 任何"填写 → 保存"的数据录入
+
+## 标准结构
+
+```
+div.flex-col.flex.h-full
+  └── BxRoundedContainer
+        ├── BxContainer(title="新增/编辑XXX")
+        ├── VxePlusForm(:form-options)
+        └── div(操作按钮区)
+              ├── el-button(保存)
+              └── el-button(取消)
+```
+
+## 关键代码骨架
+
+### 表单配置
+
+```ts
+const formData = reactive({
+  code: '',
+  name: '',
+  type: '',
+  status: '1',
+  remark: '',
+  dateBegin: '',
+  dateEnd: '',
+});
+
+const formOption = reactive({
+  id: 'form_data',
+  data: formData,
+  items: [
+    { field: 'code', title: '编码', span: 12, itemRender: { name: 'VxeInput' } },
+    { field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } },
+    {
+      field: 'type',
+      title: '类型',
+      span: 12,
+      itemRender: { name: 'formSelect', props: { codeSet: 'brmerp.common.type' } },
+    },
+    {
+      field: 'dateRange',
+      title: '有效日期',
+      span: 12,
+      itemRender: {
+        name: 'dateRange',
+        props: { startDate: 'dateBegin', endDate: 'dateEnd', type: 'date' },
+      },
+    },
+    { field: 'remark', title: '备注', span: 24, itemRender: { name: 'VxeInput' } },
+  ],
+  rules: {
+    code: [{ required: true, message: '请输入编码' }],
+    name: [{ required: true, message: '请输入名称' }],
+  },
+});
+```
+
+Required validation must live in `rules`, keyed by field. Do not use `titlePrefix: { content: '必填' }` for validation, and do not put `required: true` inside `items`; both patterns fail to enforce form validation in this wrapper.
+
+### 保存逻辑
+
+```ts
+import { EiInfo, EiBlock } from '@eplat/ei';
+import { ElMessage } from 'element-plus';
+import to from 'await-to-js';
+
+// @brms-mock-handler product-doc: local form save, replace with ServiceName.save
+async function handleSave() {
+  const ei = new EiInfo();
+  ei.addBlock(EiBlock.build('form_data', [{ ...formData }]));
+
+  // TODO: 接入后台保存接口
+  ElMessage.info('TODO: 接入后台接口');
+  const [err] = await to(Promise.resolve(saveLocalForm(formData)));
+  if (err) {
+    ElMessage.error('保存失败');
+    return;
+  }
+  ElMessage.success('保存成功');
+  router.back();
+}
+```
+
+如果保存接口明确，例如 `ServiceName.save`，则保留 `EiInfo` 组包并调用真实方法，同时在文件中添加 `// @brms-explicit-interface product-doc: ServiceName.save`。接口不明确时不要生成 `EiCommunicator.send`。
+
+### 编辑回填
+
+```ts
+// @brms-mock-data product-doc: local detail seed rows for edit backfill
+const mockDetailRows: FormVO[] = [];
+
+// @brms-mock-handler product-doc: local detail backfill, replace with ServiceName.queryDetail
+onMounted(async () => {
+  if (!route.query.id) return;
+
+  const ei = new EiInfo();
+  ei.set('id', route.query.id);
+
+  // TODO: 接入后台详情接口
+  ElMessage.info('TODO: 接入后台接口');
+  const [err, res] = await to(Promise.resolve(queryLocalDetail(id)));
+  if (err) return;
+
+  const row = res.getBlock('result').getMappedRows()[0];
+  Object.assign(formData, row);
+});
+```
+
+如果详情接口明确，例如 `ServiceName.queryDetail`，可用 `EiCommunicator.send('ServiceName', 'queryDetail', ei)` 回填表单；否则继续从本地 mock 查询。
+
+## 参考文件
+
+- **demo/list.vue**：`project/prototype/src/views/demo/list.vue` — 双卡片布局参考
+- **demo/index.vue**：`project/prototype/src/views/demo/index.vue` — formOption.items 各种字段类型示例

package/skills/brms-prototype-generator/references/03-detail-display.md

@@ -0,0 +1,125 @@
+# 详情展示页模式
+
+只读详情展示页面：主表信息 + 子表数据。
+
+默认不接入真实后台。详情加载位置保留命名 async 方法，方法内写 TODO 注释、显示 `ElMessage.info('TODO: 接入后台接口')`，并从本地 mock 数据中读取详情和子表。只有产品文档明确给出详情/子表查询 serviceName 和 methodName 时，才按 `references/06-backend-request-patterns.md` 生成 `EiCommunicator.send` 请求。
+
+Mock-only 详情数据、子表数据和本地加载方法必须写可搜索标记：`// @brms-mock-data <source-or-page>: <purpose>` 或 `// @brms-mock-handler <source-or-page>: <operation>`。不要只写普通 TODO。
+
+## 适用场景
+
+- 查看单据详情
+- 审批详情页（只读数据 + 审批操作）
+- 主-子表结构展示
+- 任何"查看"而非"编辑"的场景
+
+## 标准结构
+
+```
+div.flex-col.flex.h-full
+  └── BxRoundedContainer
+        ├── BxContainer(title="XXX详情")
+        ├── VxePlusForm(:form-options)          ← 只读信息
+        ├── VxePlusTable(:columns, :data)        ← 子表数据
+        └── div(操作按钮)
+              └── el-button(返回)
+```
+
+## 只读信息展示方式
+
+### 方式 A：el-descriptions（推荐）
+
+适合字段较少的只读信息：
+
+```vue
+<el-descriptions :column="3" border>
+  <el-descriptions-item label="编码">{{ detailData.code }}</el-descriptions-item>
+  <el-descriptions-item label="名称">{{ detailData.name }}</el-descriptions-item>
+  <el-descriptions-item label="状态">
+    <el-tag :type="detailData.status === '1' ? 'success' : 'info'">
+      {{ detailData.status === '1' ? '启用' : '停用' }}
+    </el-tag>
+  </el-descriptions-item>
+</el-descriptions>
+```
+
+### 方式 B：VxePlusForm
+
+适合字段较多的只读表单：
+
+```ts
+const formData = reactive({
+  code: '',
+  name: '',
+  type: '',
+  status: '',
+  createTime: '',
+  creator: '',
+});
+
+const formOption = reactive({
+  id: 'detail_data',
+  data: formData,
+  items: [
+    { field: 'code', title: '编码', span: 8, itemRender: { name: 'VxeInput' } },
+    { field: 'name', title: '名称', span: 8, itemRender: { name: 'VxeInput' } },
+    { field: 'type', title: '类型', span: 8, itemRender: { name: 'VxeInput' } },
+    { field: 'status', title: '状态', span: 8, itemRender: { name: 'VxeInput' } },
+    { field: 'createTime', title: '创建时间', span: 8, itemRender: { name: 'VxeInput' } },
+    { field: 'creator', title: '创建人', span: 8, itemRender: { name: 'VxeInput' } },
+  ],
+});
+```
+
+如果详情接口明确，在文件中添加 `// @brms-explicit-interface product-doc: ServiceName.queryDetail`，并只对已明确的方法发起真实请求；未明确的子表或审批动作继续使用 mock。
+
+## 数据加载
+
+```ts
+// @brms-mock-data product-doc: local detail and child-table seed data
+const mockDetailRows: DetailVO[] = [];
+
+// @brms-mock-handler product-doc: local detail load, replace with ServiceName.queryDetail
+onMounted(async () => {
+  const ei = new EiInfo();
+  ei.set('id', route.query.id);
+
+  // TODO: 接入后台详情接口
+  ElMessage.info('TODO: 接入后台接口');
+  const [err, res] = await to(Promise.resolve(queryLocalDetail(id)));
+  if (err) return;
+
+  // 主表数据
+  const mainRow = res.getBlock('main').getMappedRows()[0];
+  Object.assign(formData, mainRow);
+
+  // 子表数据
+  childData.value = res.getBlock('details').getMappedRows();
+});
+```
+
+## 审批详情变体
+
+```vue
+<div class="flex-col flex h-full">
+  <BxRoundedContainer>
+    <BxContainer title="业务信息" />
+    <VxePlusForm :form-options="detailFormOption" />
+  </BxRoundedContainer>
+
+  <BxRoundedContainer>
+    <BxContainer title="审批意见" />
+    <vxe-textarea v-model="opinion" placeholder="请输入审批意见" />
+  </BxRoundedContainer>
+
+  <div class="flex justify-center gap-4 py-4">
+    <el-button type="success" @click="approve">通过</el-button>
+    <el-button type="danger" @click="reject">驳回</el-button>
+  </div>
+</div>
+```
+
+## 参考文件
+
+- **BMBF10.vue**：`project/prototype/src/views/BM/BF/BMBF10.vue` — 审批详情 + 动态组件
+- **BMBF10V6.vue**：`project/prototype/src/views/BM/BF/BMBF10V6.vue` — V6 版本审批详情