@brms/ai-skills 0.1.0

package/skills/brms-prototype-generator/examples/few-shot-examples.md

@@ -0,0 +1,577 @@
+# Few-Shot 示例
+
+AI 生成代码时的直接模板。每个示例都是基于真实可编译页面提炼的完整 Vue SFC。
+
+**使用方式：** AI 选择最匹配的示例做模板，替换业务字段名、服务名、中文字段。
+
+**生成约束：**
+
+- 不生成操作列，不创建 `action` / `operation` / `operate` / `操作` 列。
+- 不在 `createColumns` 中生成 checkbox 列；需要勾选时使用 `VxePlusTable :show-checkbox="true"`。
+- 普通列使用 `useTable().createColumns([...], { width: undefined })` 自动撑开。
+- 结果区 `BxContainer` 不使用 `custom-btn-auto`，查询/重置只放在查询区。
+- 示例中的布局、列定义、弹窗结构可复用；默认把旧片段里的 `serviceConfig`、`EiCommunicator` 或真实后台调用改成本地 mock 数据和命名 async TODO 方法。
+- 只有产品文档明确给出 serviceName/methodName 时，才保留或生成 `serviceConfig`、`EiCommunicator` 和 `EiInfo`，并按 `references/06-backend-request-patterns.md` 添加 `// @brms-explicit-interface ...` 标记。
+- mock 后台占位方法必须显示 `ElMessage.info('TODO: 接入后台接口')`，并通过本地数组查询、保存、删除，保证原型可点击。
+
+---
+
+## 示例 1：简单列表查询页
+
+### 对应模式
+
+`references/01-list-query.md` — 双卡片布局
+
+### 用户输入摘要
+
+"需要一个汇率管理页面 FMXR01。查询条件：币种代码（文本输入）、生效日期范围。表格列：序号、币种代码、币种名称、汇率、生效日期。支持新增和删除。"
+
+### 生成代码
+
+```vue
+<template>
+  <div class="flex-col flex h-full">
+    <!-- 搜索卡片 -->
+    <BxRoundedContainer>
+      <BxContainer title="查询条件" custom-btn-auto @btn-click="handleSearchBtn" />
+      <VxePlusForm ref="formRef" :form-options="formOption" />
+    </BxRoundedContainer>
+
+    <!-- 结果卡片 -->
+    <BxRoundedContainer class="flex-1 flex flex-col">
+      <BxContainer class="flex-initial" title="结果集" />
+      <VxePlusTable
+        class="flex-1"
+        id="FMXR01_result"
+        ref="gridRef"
+        :columns="columns"
+        :form-config="formConfig"
+        :service-config="serviceConfig"
+        :toolbar-buttons="toolbarButtons"
+        :show-checkbox="true"
+        :is-edit="true"
+        v-on="gridEvents"
+      />
+    </BxRoundedContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import { useTable } from '@/hooks/useTable';
+  import type { VxeGridProps } from 'vxe-table';
+  import { ElMessage, ElMessageBox } from 'element-plus';
+  import to from 'await-to-js';
+
+  const gridRef = ref();
+  const formRef = ref();
+
+  const formData = reactive({
+    currencyCodeLike: '',
+    effectiveDateBegin: '',
+    effectiveDateEnd: '',
+  });
+
+  const formOption = reactive({
+    id: 'inqu_status',
+    data: formData,
+    items: [
+      { field: 'currencyCodeLike', title: '币种代码', span: 12, itemRender: { name: 'VxeInput' } },
+      {
+        field: 'effectiveDate',
+        title: '生效日期',
+        span: 12,
+        itemRender: {
+          name: 'dateRange',
+          props: {
+            startDate: 'effectiveDateBegin',
+            endDate: 'effectiveDateEnd',
+            type: 'date',
+            format: 'yyyy-MM-dd',
+            valueFormat: 'yyyy-MM-dd',
+          },
+        },
+      },
+    ],
+  });
+
+  const columns = useTable().createColumns(
+    [
+      { type: 'seq', width: 60, fixed: 'left' },
+      { field: 'currencyCode', title: '币种代码' },
+      { field: 'currencyName', title: '币种名称' },
+      { field: 'exchangeRate', title: '汇率' },
+      { field: 'effectiveDate', title: '生效日期' },
+    ],
+    { width: undefined },
+  );
+
+  const formConfig = reactive({
+    id: 'inqu_status',
+    data: formData,
+  });
+
+  const serviceConfig = reactive({
+    serviceName: 'FMXR01',
+    queryMethod: 'query',
+    insertMethod: 'add',
+    updateMethod: 'save',
+    deleteMethod: 'delete',
+  });
+
+  // 表格工具栏按钮
+  const toolbarButtons = ref<NonNullable<VxeGridProps['toolbarConfig']>['buttons']>([
+    { name: '新增', code: 'add', status: 'primary' },
+    { name: '删除', code: 'del', status: 'danger' },
+  ]);
+
+  // 表格事件：工具栏按钮点击
+  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);
+      }
+    },
+  };
+
+  // 搜索卡片按钮：查询 / 重置
+  function handleSearchBtn({ code }: { code: string }) {
+    if (code === 'QUERY') gridRef.value?.reload();
+    if (code === 'RESET') formRef.value?.reset();
+  }
+</script>
+```
+
+---
+
+## 示例 2：Tab 切换列表页
+
+### 对应模式
+
+`references/01-list-query.md` — 变体 B
+
+### 用户输入摘要
+
+"需要一个审批列表页面 BMBF11，有'待办'和'已办'两个 tab。查询条件：审批类型（下拉）、发起人（文本）、发起时间（日期范围）。"
+
+### 生成代码
+
+```vue
+<template>
+  <div class="flex-col flex h-full">
+    <BxRoundedContainer>
+      <BxContainer title="查询条件" custom-btn-auto @btn-click="handleSearchBtn" />
+      <VxePlusForm ref="formRef" :form-options="formOption" />
+    </BxRoundedContainer>
+
+    <BxRoundedContainer class="flex-1 flex flex-col">
+      <BxContainer class="flex-initial" title="结果集" />
+      <vxe-tabs v-model="tabName" class="flex-1" padding>
+        <vxe-tab-pane title="待办列表" name="1">
+          <VxePlusTable
+            id="todo_result"
+            ref="todoGrid"
+            :columns="todoColumns"
+            :form-config="formConfig"
+            :service-config="todoServiceConfig"
+          />
+        </vxe-tab-pane>
+        <vxe-tab-pane title="已办列表" name="2">
+          <VxePlusTable
+            id="done_result"
+            ref="doneGrid"
+            :columns="doneColumns"
+            :form-config="formConfig"
+            :service-config="doneServiceConfig"
+          />
+        </vxe-tab-pane>
+      </vxe-tabs>
+    </BxRoundedContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import { useTable } from '@/hooks/useTable';
+  import { EiCommunicator, EiInfo } from '@eplat/ei';
+
+  const tabName = ref('1');
+  const todoGrid = ref();
+  const doneGrid = ref();
+  const formRef = ref();
+
+  const formData = reactive({
+    approveTypeId: '',
+    submiterName: '',
+    submitTimeBegin: '',
+    submitTimeEnd: '',
+  });
+
+  function getApproveTypeList() {
+    return new Promise((resolve) => {
+      EiCommunicator.send('BMBF999901', 'queryApproveTypeList', new EiInfo()).then((res: any) => {
+        resolve(
+          res.getAttr().approveTypeList.map((item: any) => ({
+            value: item.approveTypeId,
+            label: item.approveTypeName,
+          })),
+        );
+      });
+    });
+  }
+
+  const formOption = reactive({
+    id: 'inqu_status',
+    data: formData,
+    items: [
+      {
+        field: 'approveTypeId',
+        title: '审批类型',
+        span: 12,
+        itemRender: {
+          name: 'formSelect',
+          props: { codeSet: 'BMBF999901', promiseFn: getApproveTypeList },
+        },
+      },
+      {
+        field: 'submiterName',
+        title: '发起人',
+        span: 12,
+        itemRender: { name: 'VxeInput' },
+      },
+      {
+        field: 'submitTime',
+        title: '发起时间',
+        span: 12,
+        itemRender: {
+          name: 'dateRange',
+          props: {
+            startDate: 'submitTimeBegin',
+            endDate: 'submitTimeEnd',
+            type: 'date',
+            format: 'yyyy-MM-dd',
+            valueFormat: 'yyyy-MM-dd',
+          },
+        },
+      },
+    ],
+  });
+
+  const baseColumns = [
+    { field: 'approveTypeName', title: '审批类型' },
+    { field: 'taskName', title: '审批主题' },
+    { field: 'submitTime', title: '递交时间' },
+    { field: 'submiterName', title: '递交人' },
+  ];
+
+  const todoColumns = useTable().createColumns([{ type: 'seq', width: 60 }, ...baseColumns], {
+    width: undefined,
+  });
+
+  const doneColumns = useTable().createColumns(
+    [
+      { type: 'seq', width: 60 },
+      ...baseColumns,
+      { field: 'approvalResultName', title: '审批结果', width: 100 },
+    ],
+    { width: undefined },
+  );
+
+  const formConfig = reactive({
+    id: 'inqu_status',
+    data: formData,
+  });
+
+  const todoServiceConfig = reactive({ serviceName: 'BMBF1301', queryMethod: 'pageQueryTodoList' });
+  const doneServiceConfig = reactive({ serviceName: 'BMBF1301', queryMethod: 'pageQueryDoneList' });
+
+  // 搜索卡片按钮：查询 / 重置
+  function handleSearchBtn({ code }: { code: string }) {
+    if (code === 'QUERY') {
+      if (tabName.value === '1') todoGrid.value?.reload();
+      else doneGrid.value?.reload();
+    }
+    if (code === 'RESET') formRef.value?.reset();
+  }
+</script>
+```
+
+---
+
+## 示例 3：表单录入页
+
+### 对应模式
+
+`references/02-form-entry.md`
+
+### 用户输入摘要
+
+"需要一个港口信息维护页面 DMLB03。表单字段：港口代码（必填）、港口名称（必填）、所属国家（下拉）、港口类型（下拉）、备注。支持新增和编辑。"
+
+### 生成代码
+
+```vue
+<template>
+  <div class="flex-col flex h-full">
+    <BxRoundedContainer>
+      <BxContainer :title="isEdit ? '编辑港口' : '新增港口'" />
+      <VxePlusForm ref="formRef" :form-options="formOption" />
+      <div class="flex justify-center gap-4 py-4">
+        <el-button type="primary" @click="handleSave">保存</el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </BxRoundedContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, reactive, ref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { EiCommunicator, EiInfo, EiBlock } from '@eplat/ei';
+  import { ElMessage } from 'element-plus';
+  import to from 'await-to-js';
+
+  const route = useRoute();
+  const router = useRouter();
+  const formRef = ref();
+  const isEdit = ref(false);
+
+  const formData = reactive({
+    portCode: '',
+    portName: '',
+    countryCode: '',
+    portType: '',
+    remark: '',
+  });
+
+  const formOption = reactive({
+    id: 'form_data',
+    data: formData,
+    items: [
+      {
+        field: 'portCode',
+        title: '港口代码',
+        span: 12,
+        itemRender: { name: 'VxeInput' },
+      },
+      {
+        field: 'portName',
+        title: '港口名称',
+        span: 12,
+        itemRender: { name: 'VxeInput' },
+      },
+      {
+        field: 'countryCode',
+        title: '所属国家',
+        span: 12,
+        itemRender: { name: 'formSelect', props: { codeSet: 'DMLB03.countryList' } },
+      },
+      {
+        field: 'portType',
+        title: '港口类型',
+        span: 12,
+        itemRender: { name: 'formSelect', props: { codeSet: 'DMLB03.portType' } },
+      },
+      { field: 'remark', title: '备注', span: 24, itemRender: { name: 'VxeInput' } },
+    ],
+    rules: {
+      portCode: [{ required: true, message: '请输入港口代码' }],
+      portName: [{ required: true, message: '请输入港口名称' }],
+    },
+  });
+
+  onMounted(async () => {
+    const id = route.query.id as string;
+    if (!id) return;
+    isEdit.value = true;
+
+    const ei = new EiInfo();
+    ei.set('portCode', id);
+    const [err, res] = await to(EiCommunicator.send('DMLB03', 'queryByCode', ei));
+    if (err) return;
+    const row = res.getBlock('result').getMappedRows()[0];
+    Object.assign(formData, row);
+  });
+
+  async function handleSave() {
+    const ei = new EiInfo();
+    ei.addBlock(EiBlock.build('form_data', [{ ...formData }]));
+    const method = isEdit.value ? 'save' : 'add';
+
+    const [err] = await to(EiCommunicator.send('DMLB03', method, ei));
+    if (err) {
+      ElMessage.error('保存失败');
+      return;
+    }
+    ElMessage.success('保存成功');
+    router.back();
+  }
+
+  function handleCancel() {
+    router.back();
+  }
+</script>
+```
+
+---
+
+## 示例 4：组合页面包
+
+### 对应模式
+
+`references/04-composite-page-package.md` — 多页面组合原型/页面包
+
+### 用户输入摘要
+
+"根据 function.md 生成矿权管理原型。文档包含区域公司结构管理、矿权项目维护、矿权信息维护、综合查询、项目资料上传、任务管理、到期提醒、合规报告计划，并给出了页面间导航关系。"
+
+### 生成前规划
+
+先不要生成单个超大页面。应拆成页面包：
+
+| 编码   | 页面标题         | 页面类型       | 文件路径                                      | 菜单     |
+| ------ | ---------------- | -------------- | --------------------------------------------- | -------- |
+| MNRG01 | 区域公司结构管理 | 主从维护页     | `<target-project>/src/views/MN/RG/MNRG01.vue` | 矿权管理 |
+| MNRG02 | 矿权项目维护     | 列表维护页     | `<target-project>/src/views/MN/RG/MNRG02.vue` | 矿权管理 |
+| MNRG03 | 矿权信息维护     | 列表维护页     | `<target-project>/src/views/MN/RG/MNRG03.vue` | 矿权管理 |
+| MNRG04 | 矿权信息综合查询 | 查询汇总页     | `<target-project>/src/views/MN/RG/MNRG04.vue` | 矿权管理 |
+| MNRG05 | 项目资料上传     | 附件管理页     | `<target-project>/src/views/MN/RG/MNRG05.vue` | 矿权管理 |
+| MNRG06 | 矿权任务管理     | 任务维护页     | `<target-project>/src/views/MN/RG/MNRG06.vue` | 矿权管理 |
+| MNRG07 | 任务到期提醒     | 通知设置页     | `<target-project>/src/views/MN/RG/MNRG07.vue` | 矿权管理 |
+| MNRG08 | 合规报告计划     | 报告计划维护页 | `<target-project>/src/views/MN/RG/MNRG08.vue` | 矿权管理 |
+
+共享数据建议放在：
+
+```text
+<target-project>/src/views/MN/RG/data.ts
+```
+
+### 生成方式选择
+
+识别到 8 个完整页面后，先让用户选择生成方式，不要直接生成全部文件：
+
+| 方式                                            | 建议                                                 |
+| ----------------------------------------------- | ---------------------------------------------------- |
+| `single-agent-package` 整包一次性生成           | 不推荐，页面数量较多，容易遗漏局部规则               |
+| `coordinator-sequential` 总控逐页顺序生成       | 当前环境没有子智能体时使用                           |
+| `coordinator-subagents` 总控 + 子智能体逐页生成 | 推荐，8 个页面分别生成，总控统一共享数据、菜单和验证 |
+
+如果用户选择 `coordinator-subagents`，总控先创建全局页面包规划和共享数据契约，然后给每个子智能体下发页面任务包。子智能体只生成一个 Vue 页面文件，不修改 `data.ts`、菜单配置、`localMenu.ts`、其他页面或文档。
+
+页面任务包示例：
+
+```text
+页面任务：MNRG02 矿权项目维护
+文件：<target-project>/src/views/MN/RG/MNRG02.vue
+类型：列表维护页
+共享数据：projects, companies, regionCompanies
+跳转：点击项目名称或“查看矿权”业务入口时跳转 /web/MN/RG/MNRG03，并传递 projectCode、projectName
+布局：标准查询区 + 结果表格；结果标题不要 custom-btn-auto；不生成操作列；选择使用 :show-checkbox="true"
+禁止修改：data.ts、routers/config/*.ts、localMenu.ts、MNRG01.vue、MNRG03.vue...、文档；如果目标项目没有静态路由配置，也禁止创建 routers/config
+```
+
+### 跨页面跳转示例
+
+项目维护页点击“查看矿权”：
+
+```ts
+function handleViewMineralRight(row: any) {
+  router.push({
+    path: '/web/MN/RG/MNRG03',
+    query: {
+      projectCode: row.projectCode,
+      projectName: row.projectName,
+    },
+  });
+}
+```
+
+矿权信息维护页读取项目筛选条件：
+
+```ts
+const route = useRoute();
+
+onMounted(() => {
+  if (route.query.projectCode) formData.projectCode = String(route.query.projectCode);
+});
+```
+
+### 菜单注册示例
+
+当目标项目支持静态路由时，生成文件：`<target-project>/src/routers/config/mnrg-20260530143000.ts`。不要修改 `localMenu.ts`。如果目标项目没有静态路由配置，跳过该文件并输出权限中心菜单配置交接清单。
+
+```typescript
+export default [
+  {
+    path: '/MNMenu',
+    name: 'MNMenu',
+    meta: {
+      icon: 'Folder',
+      title: '矿权管理',
+      isLink: '',
+      isHide: false,
+      isFull: false,
+      isAffix: false,
+      isKeepAlive: true,
+    },
+    children: [
+      {
+        path: '/MN/RG/MNRG01',
+        name: 'MNRG01',
+        component: '/MN/RG/MNRG01',
+        meta: {
+          icon: 'Menu',
+          title: '区域公司结构管理',
+          isLink: '',
+          isHide: false,
+          isFull: false,
+          isAffix: false,
+          isKeepAlive: true,
+        },
+      },
+      {
+        path: '/MN/RG/MNRG02',
+        name: 'MNRG02',
+        component: '/MN/RG/MNRG02',
+        meta: {
+          icon: 'Menu',
+          title: '矿权项目维护',
+          isLink: '',
+          isHide: false,
+          isFull: false,
+          isAffix: false,
+          isKeepAlive: true,
+        },
+      },
+    ],
+  },
+];
+```
+
+### 实现要点
+
+- 一级章节生成独立页面，新增/编辑/上传/附件列表优先做页面内弹窗。
+- 附录导航关系必须体现在按钮或行操作中。
+- 共享 mock 数据只抽取一次，页面通过 import 复用。
+- 主从页使用左右 `BxRoundedContainer`，卡片内标题 `flex-initial`、表格 `flex-1`，参考 `demo/list.vue` 的结果卡片。
+- 不生成操作列和 checkbox 列；表格选择用 `:show-checkbox="true"`，查看/跳转用业务字段点击或 `cell-click`。
+- 项目列表、公司列表等结果区标题不要加 `custom-btn-auto`，避免重复查询按钮。
+- 目标项目支持静态路由时，每次生成独立菜单文件，如 `<target-project>/src/routers/config/mnrg-20260530143000.ts`，不要修改 `localMenu.ts`；不支持时输出权限中心配置交接信息。
+- 最后一次性更新菜单并运行类型检查。