From 1fe0fae37f2be548cad4e739fe968a1e025047d4 Mon Sep 17 00:00:00 2001
From: bot_dev2 <bot_dev2@xayunmei.com>
Date: Thu, 6 Aug 2026 14:03:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=20issue=20#179=20[D2?=
 =?UTF-8?q?]=20=E6=A0=B7=E5=BC=8F=E5=AF=B9=E9=BD=90=EF=BC=88=E4=B8=8B?=
 =?UTF-8?q?=EF=BC=89=E2=80=94=E2=80=94studio/admin=2010=20=E9=A1=B5?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5=20vben=20=E4=BD=93=E7=B3=BB=EF=BC=88Page+vxe?=
 =?UTF-8?q?-grid+vben-form+iconify=EF=BC=89=EF=BC=8C=E7=A1=AC=E7=BC=96?=
 =?UTF-8?q?=E7=A0=81=E8=89=B2/emoji=20=E6=B8=85=E9=9B=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/iaop/admin/alerts.vue           |  70 +++++++-----
 .../src/views/iaop/admin/audit.vue            |  63 +++++++----
 .../src/views/iaop/admin/index.vue            |  49 ++++++---
 .../src/views/iaop/admin/kb.vue               |  50 ++++++---
 .../src/views/iaop/admin/models.vue           |  68 ++++++++----
 .../src/views/iaop/studio/hyper.vue           | 100 +++++++++++-------
 .../src/views/iaop/studio/import.vue          |  47 +++++---
 .../src/views/iaop/studio/index.vue           |  49 ++++++---
 .../src/views/iaop/studio/layout.vue          |  57 +++++++---
 .../src/views/iaop/studio/version.vue         |  63 +++++++----
 10 files changed, 419 insertions(+), 197 deletions(-)

diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/alerts.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/alerts.vue
index d3526d6..a3dea3a 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/alerts.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/alerts.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-/** 告警确认（issue #173 [B7]）：severity 配色 + 确认 + LLM 解释（infer.ts） */
 import { ref } from 'vue';
 
+import { Page, VbenButton } from '@vben/common-ui';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { ask } from '#/api/iaop/infer';
 
 const alerts = ref([
@@ -12,39 +15,54 @@ const alerts = ref([
 const sevColor: Record<string, string> = { P0: 'red', P1: 'orange', P2: 'blue' };
 const explain = ref('');
 
+const gridOptions: VxeTableGridOptions = {
+  rowConfig: { keyField: 'id' },
+  height: 'auto',
+  stripe: true,
+  columns: [
+    { title: '级别', field: 'severity', width: 90, slots: { default: 'severity' } },
+    { title: '告警', field: 'title', minWidth: 260 },
+    { title: '点位', field: 'device', width: 110 },
+    { title: '状态', field: 'status', width: 110, slots: { default: 'status' } },
+    { title: '操作', field: 'action', width: 210, slots: { default: 'action' } },
+  ],
+  proxy: {
+    query: async ({ page }) => ({
+      items: alerts.value.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+      total: alerts.value.length,
+    }),
+  },
+};
+
+const [Grid] = useVbenVxeGrid({ gridOptions });
+
 async function explainAlert(a: { title: string }) {
   try {
     const r = await ask(`请解释告警并给出处置建议：${a.title}`, { maxTokens: 200 });
     explain.value = r.text;
-  } catch { explain.value = '推理服务不可用，无法生成解释。'; }
+  } catch {
+    explain.value = '推理服务不可用，无法生成解释。';
+  }
+}
+function ack(a: { status: string }) {
+  a.status = 'acked';
 }
-const ack = (a: { status: string }) => (a.status = 'acked');
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">告警确认（PRD 8.1 Alert 状态机）</h1>
-    <a-table :data-source="alerts" size="small" :pagination="false"
-      :columns="[
-        { title: '级别', dataIndex: 'severity', key: 'severity', width: 80 },
-        { title: '告警', dataIndex: 'title', key: 'title' },
-        { title: '点位', dataIndex: 'device', key: 'device', width: 100 },
-        { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
-        { title: '操作', key: 'op', width: 210 },
-      ]">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'severity'">
-          <a-tag :color="sevColor[record.severity]">{{ record.severity }}</a-tag>
-        </template>
-        <template v-else-if="column.key === 'status'">
-          <a-tag :color="record.status === 'acked' ? 'green' : 'orange'">{{ record.status }}</a-tag>
-        </template>
-        <template v-else-if="column.key === 'op'">
-          <a-button size="small" @click="explainAlert(record)">LLM 解释</a-button>
-          <a-button size="small" type="primary" style="margin-left: 6px" :disabled="record.status === 'acked'" @click="ack(record)">确认</a-button>
-        </template>
+  <Page title="告警确认" description="PRD 8.1 · Alert 状态机 / LLM 解释">
+    <Grid>
+      <template #severity="{ row }">
+        <a-tag :color="sevColor[row.severity]">{{ row.severity }}</a-tag>
       </template>
-    </a-table>
+      <template #status="{ row }">
+        <a-tag :color="row.status === 'acked' ? 'green' : 'orange'">{{ row.status }}</a-tag>
+      </template>
+      <template #action="{ row }">
+        <VbenButton size="small" @click="explainAlert(row)">LLM 解释</VbenButton>
+        <VbenButton size="small" variant="solid" :disabled="row.status === 'acked'" @click="ack(row)">确认</VbenButton>
+      </template>
+    </Grid>
     <a-alert v-if="explain" type="info" style="margin-top: 12px" :message="explain" />
-  </div>
+  </Page>
 </template>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/audit.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/audit.vue
index 47cc329..84c8c09 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/audit.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/audit.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-/** 审计查询（issue #173 [B7]）：操作日志列表 + 筛选 */
 import { ref } from 'vue';
 
+import { Page } from '@vben/common-ui';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 const logs = ref([
   { time: '2026-08-06 09:10', user: 'admin', resource: '模型', action: 'promote', result: 'ok', detail: 'quality_forecast v2.1.0 → prod' },
   { time: '2026-08-06 08:55', user: 'admin', resource: '模板', action: 'publish', result: 'ok', detail: 'Ti 模板 v1.0.0 发布' },
@@ -9,30 +13,51 @@ const logs = ref([
   { time: '2026-08-06 08:12', user: 'viewer1', resource: '驾驶舱', action: 'view', result: 'ok', detail: '只读查看' },
 ]);
 const kw = ref('');
+
 const filtered = () => {
   const k = kw.value.trim();
   return k ? logs.value.filter((l) => JSON.stringify(l).includes(k)) : logs.value;
 };
+
+const gridOptions: VxeTableGridOptions = {
+  rowConfig: { keyField: 'time' },
+  height: 'auto',
+  stripe: true,
+  columns: [
+    { title: '时间', field: 'time', width: 160 },
+    { title: '操作者', field: 'user', width: 110 },
+    { title: '资源', field: 'resource', width: 100 },
+    { title: '动作', field: 'action', width: 100 },
+    { title: '结果', field: 'result', width: 90, slots: { default: 'result' } },
+    { title: '详情', field: 'detail', minWidth: 240 },
+  ],
+  proxy: {
+    query: async ({ page }) => {
+      const rows = filtered();
+      return {
+        items: rows.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+        total: rows.length,
+      };
+    },
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+function onSearch() {
+  gridApi.query();
+}
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">审计查询（PRD 9 安全-数据）</h1>
-    <a-input v-model:value="kw" placeholder="筛选：用户 / 资源 / 动作" style="max-width: 320px; margin-bottom: 12px" allow-clear />
-    <a-table :data-source="filtered()" size="small" :pagination="{ pageSize: 10 }"
-      :columns="[
-        { title: '时间', dataIndex: 'time', key: 'time', width: 150 },
-        { title: '操作者', dataIndex: 'user', key: 'user', width: 100 },
-        { title: '资源', dataIndex: 'resource', key: 'resource', width: 90 },
-        { title: '动作', dataIndex: 'action', key: 'action', width: 90 },
-        { title: '结果', dataIndex: 'result', key: 'result', width: 80 },
-        { title: '详情', dataIndex: 'detail', key: 'detail' },
-      ]">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'result'">
-          <a-tag :color="record.result === 'ok' ? 'green' : 'red'">{{ record.result }}</a-tag>
-        </template>
+  <Page title="审计查询" description="PRD 9 · 安全-数据 / 操作日志">
+    <template #extra>
+      <a-input v-model:value="kw" placeholder="筛选：用户 / 资源 / 动作" style="width: 280px" allow-clear @change="onSearch" @press-enter="onSearch" />
+    </template>
+    <Grid>
+      <template #result="{ row }">
+        <a-tag :color="row.result === 'ok' ? 'green' : 'red'">{{ row.result }}</a-tag>
       </template>
-    </a-table>
-  </div>
+    </Grid>
+  </Page>
 </template>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/index.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/index.vue
index 5d2dd5b..0fd8b1a 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/index.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/index.vue
@@ -1,24 +1,47 @@
 <script setup lang="ts">
-/** 管理控制台目录页（issue #172/#173 [B6/B7]）：4 子模块入口 */
+import { Page } from '@vben/common-ui';
+import { BxsFile, FlatColorIconsFolder, MaterialSymbolsEdit, MingcuteProfileLine } from '@vben/icons';
+
 const entries = [
-  { path: '/iaop/admin/models', icon: '🧠', title: '模型管理', desc: '模型模板版本 / 阶段提升 / 回滚' },
-  { path: '/iaop/admin/kb', icon: '📚', title: '知识库管理', desc: 'RAG 文档 / 章节 / 索引状态' },
-  { path: '/iaop/admin/alerts', icon: '🚨', title: '告警确认', desc: 'severity 告警 / LLM 解释 / 确认' },
-  { path: '/iaop/admin/audit', icon: '📜', title: '审计查询', desc: '操作日志 / 筛选 / 结果状态' },
+  { path: '/iaop/admin/models', icon: MaterialSymbolsEdit, title: '模型管理', desc: '模型模板版本 / 阶段提升 / 回滚' },
+  { path: '/iaop/admin/kb', icon: BxsFile, title: '知识库管理', desc: 'RAG 文档 / 章节 / 索引状态' },
+  { path: '/iaop/admin/alerts', icon: MingcuteProfileLine, title: '告警确认', desc: 'severity 告警 / LLM 解释 / 确认' },
+  { path: '/iaop/admin/audit', icon: FlatColorIconsFolder, title: '审计查询', desc: '操作日志 / 筛选 / 结果状态' },
 ];
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">管理控制台（PRD 5.3 / 5.4 / 8.1 / 9）</h1>
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px">
+  <Page title="管理控制台" description="PRD 5.3 / 5.4 / 8.1 / 9 · 模型 · 知识库 · 告警 · 审计">
+    <div class="entry-grid">
       <a-card v-for="e in entries" :key="e.path" hoverable size="small">
-        <router-link :to="e.path" style="text-decoration: none; color: inherit">
-          <div style="font-size: 26px">{{ e.icon }}</div>
-          <div style="font-weight: 600; margin-top: 6px">{{ e.title }}</div>
-          <div style="font-size: 12px; color: #888; margin-top: 4px">{{ e.desc }}</div>
+        <router-link :to="e.path" class="entry-link">
+          <component :is="e.icon" class="size-8" />
+          <div class="entry-title">{{ e.title }}</div>
+          <div class="entry-desc">{{ e.desc }}</div>
         </router-link>
       </a-card>
     </div>
-  </div>
+  </Page>
 </template>
+
+<style scoped>
+.entry-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+}
+.entry-link {
+  display: block;
+  text-decoration: none;
+  color: hsl(var(--card-foreground));
+}
+.entry-title {
+  font-weight: 600;
+  margin-top: 8px;
+}
+.entry-desc {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  margin-top: 4px;
+}
+</style>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/kb.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/kb.vue
index 599db60..4a1684b 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/kb.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/kb.vue
@@ -1,33 +1,51 @@
 <script setup lang="ts">
-/** 知识库管理（issue #172 [B6]）：citations.json 文档列表 + 索引状态 */
 import { onMounted, ref } from 'vue';
 
+import { Page } from '@vben/common-ui';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 const docs = ref<Array<{ title: string; sections: number; indexed: boolean }>>([]);
 
+const gridOptions: VxeTableGridOptions = {
+  rowConfig: { keyField: 'title' },
+  height: 'auto',
+  stripe: true,
+  columns: [
+    { title: '文档', field: 'title', minWidth: 260 },
+    { title: '章节数', field: 'sections', width: 120 },
+    { title: '索引状态', field: 'indexed', width: 140, slots: { default: 'indexed' } },
+  ],
+  proxy: {
+    query: async ({ page }) => ({
+      items: docs.value.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+      total: docs.value.length,
+    }),
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
 onMounted(async () => {
   try {
     const resp = await fetch(`${import.meta.env.BASE_URL}iaop/citations.json`);
     const d = await resp.json();
     const docsObj = (d as { documents?: Record<string, string[]> }).documents || {};
     docs.value = Object.entries(docsObj).map(([title, secs]) => ({ title, sections: secs.length, indexed: true }));
-  } catch { docs.value = []; }
+  } catch {
+    docs.value = [];
+  }
+  gridApi.query();
 });
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">知识库管理（RAG / PRD 5.4）</h1>
-    <a-table :data-source="docs" size="small" :pagination="false"
-      :columns="[
-        { title: '文档', dataIndex: 'title', key: 'title' },
-        { title: '章节数', dataIndex: 'sections', key: 'sections' },
-        { title: '索引状态', dataIndex: 'indexed', key: 'indexed' },
-      ]">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'indexed'">
-          <a-tag :color="record.indexed ? 'green' : 'red'">{{ record.indexed ? '已索引' : '待索引' }}</a-tag>
-        </template>
+  <Page title="知识库管理" description="PRD 5.4 · RAG 文档 / 章节 / 索引状态">
+    <Grid>
+      <template #indexed="{ row }">
+        <a-tag :color="row.indexed ? 'green' : 'red'">{{ row.indexed ? '已索引' : '待索引' }}</a-tag>
       </template>
-    </a-table>
-  </div>
+    </Grid>
+  </Page>
 </template>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/models.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/models.vue
index 42cceff..f5f1aba 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/models.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/admin/models.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-/** 模型管理（issue #172 [B6]）：模型模板列表 + 版本/阶段 + 提升/回滚 */
 import { ref } from 'vue';
 
+import { Page, VbenButton } from '@vben/common-ui';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 const models = ref([
   { name: 'quality_forecast', version: 'v2.1.0', stage: 'prod', desc: 'TiCl4 纯度预测（GBDT）' },
   { name: 'quality_forecast', version: 'v2.2.0', stage: 'staging', desc: 'TiCl4 纯度预测（DNN）' },
@@ -9,30 +13,48 @@ const models = ref([
   { name: 'cross_process_optimizer', version: 'v1.1.0', stage: 'dev', desc: '跨工序寻优' },
 ]);
 
-const promote = (m: { stage: string }) => { if (m.stage === 'staging') m.stage = 'prod'; else if (m.stage === 'dev') m.stage = 'staging'; };
-const rollback = (m: { stage: string }) => { if (m.stage === 'prod') m.stage = 'staging'; };
+const gridOptions: VxeTableGridOptions = {
+  rowConfig: { keyField: 'name' },
+  height: 'auto',
+  stripe: true,
+  columns: [
+    { title: '模型', field: 'name', minWidth: 180 },
+    { title: '版本', field: 'version', width: 120 },
+    { title: '阶段', field: 'stage', width: 110, slots: { default: 'stage' } },
+    { title: '说明', field: 'desc', minWidth: 220 },
+    { title: '操作', field: 'action', width: 170, slots: { default: 'action' } },
+  ],
+  proxy: {
+    query: async ({ page }) => ({
+      items: models.value.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+      total: models.value.length,
+    }),
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+function promote(m: { stage: string }) {
+  if (m.stage === 'staging') m.stage = 'prod';
+  else if (m.stage === 'dev') m.stage = 'staging';
+  gridApi.query();
+}
+function rollback(m: { stage: string }) {
+  if (m.stage === 'prod') m.stage = 'staging';
+  gridApi.query();
+}
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">模型管理（PRD 5.3 模板注册表）</h1>
-    <a-table :data-source="models" size="small" :pagination="false"
-      :columns="[
-        { title: '模型', dataIndex: 'name', key: 'name' },
-        { title: '版本', dataIndex: 'version', key: 'version' },
-        { title: '阶段', dataIndex: 'stage', key: 'stage' },
-        { title: '说明', dataIndex: 'desc', key: 'desc' },
-        { title: '操作', key: 'op' },
-      ]">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'stage'">
-          <a-tag :color="record.stage === 'prod' ? 'green' : record.stage === 'staging' ? 'orange' : 'blue'">{{ record.stage }}</a-tag>
-        </template>
-        <template v-else-if="column.key === 'op'">
-          <a-button size="small" type="primary" :disabled="record.stage === 'prod'" @click="promote(record)">提升</a-button>
-          <a-button size="small" style="margin-left: 6px" :disabled="record.stage !== 'prod'" @click="rollback(record)">回滚</a-button>
-        </template>
+  <Page title="模型管理" description="PRD 5.3 · 模板注册表 / 版本阶段流转">
+    <Grid>
+      <template #stage="{ row }">
+        <a-tag :color="row.stage === 'prod' ? 'green' : row.stage === 'staging' ? 'orange' : 'blue'">{{ row.stage }}</a-tag>
       </template>
-    </a-table>
-  </div>
+      <template #action="{ row }">
+        <VbenButton size="small" :disabled="row.stage === 'prod'" @click="promote(row)">提升</VbenButton>
+        <VbenButton size="small" variant="outline" :disabled="row.stage !== 'prod'" @click="rollback(row)">回滚</VbenButton>
+      </template>
+    </Grid>
+  </Page>
 </template>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/hyper.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/hyper.vue
index 41898b2..45e617c 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/hyper.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/hyper.vue
@@ -1,50 +1,70 @@
 <script setup lang="ts">
-/** 模型超参配置（issue #170 [B4]）：4 类模型 + 表单 + JSON 预览 */
-import { computed, ref } from 'vue';
+import { h, ref } from 'vue';
+
+import { Page, VbenButton } from '@vben/common-ui';
+import { useVbenForm } from '#/adapter/form';
 
 const kinds = ['质量预测', '工艺优化', '异常检测', '跨工序寻优'];
-const kind = ref(kinds[0]);
-const params = ref({
-  learning_rate: 0.01, epochs: 100, batch_size: 64,
-  feature_window: 'PT30M', quality_tag: 'TiCl4_purity', backbone: 'gbdt',
-});
 
-const json = computed(() => JSON.stringify({ template: 'ti-cl4', kind: kind.value, hyperparams: params.value }, null, 2));
+const preview = ref('');
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: [
+    { component: 'Select', componentProps: { options: kinds.map((k) => ({ label: k, value: k })) }, fieldName: 'kind', label: '模型类型', defaultValue: '质量预测' },
+    { component: 'InputNumber', fieldName: 'learning_rate', label: '学习率 learning_rate', defaultValue: 0.01 },
+    { component: 'InputNumber', fieldName: 'epochs', label: '训练轮数 epochs', defaultValue: 100 },
+    { component: 'InputNumber', fieldName: 'batch_size', label: '批大小 batch_size', defaultValue: 64 },
+    { component: 'Input', fieldName: 'feature_window', label: '特征窗口 feature_window', defaultValue: 'PT30M' },
+    { component: 'Input', fieldName: 'quality_tag', label: '质量标签 quality_tag', defaultValue: 'TiCl4_purity' },
+    { component: 'Select', componentProps: { options: [{ label: 'GBDT', value: 'gbdt' }, { label: 'DNN', value: 'dnn' }, { label: 'iForest', value: 'iforest' }, { label: 'LOF', value: 'lof' }] }, fieldName: 'backbone', label: '主干 backbone', defaultValue: 'gbdt' },
+  ],
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: async (values) => {
+    preview.value = JSON.stringify({ template: 'ti-cl4', hyperparams: values }, null, 2);
+  },
+});
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">模型超参配置（PRD 5.3 超参包 JSON）</h1>
-    <a-radio-group v-model:value="kind" button-style="solid">
-      <a-radio-button v-for="k in kinds" :key="k" :value="k">{{ k }}</a-radio-button>
-    </a-radio-group>
-    <div style="display: flex; gap: 24px; margin-top: 16px">
-      <a-form layout="vertical" style="max-width: 420px; flex: 1">
-        <a-form-item label="学习率 learning_rate">
-          <a-input-number v-model:value="params.learning_rate" :step="0.001" style="width: 100%" />
-        </a-form-item>
-        <a-form-item label="训练轮数 epochs">
-          <a-input-number v-model:value="params.epochs" :min="1" style="width: 100%" />
-        </a-form-item>
-        <a-form-item label="批大小 batch_size">
-          <a-input-number v-model:value="params.batch_size" :min="1" style="width: 100%" />
-        </a-form-item>
-        <a-form-item label="特征窗口 feature_window"><a-input v-model:value="params.feature_window" /></a-form-item>
-        <a-form-item label="质量标签 quality_tag"><a-input v-model:value="params.quality_tag" /></a-form-item>
-        <a-form-item label="主干 backbone">
-          <a-select v-model:value="params.backbone">
-            <a-select-option value="gbdt">GBDT</a-select-option>
-            <a-select-option value="dnn">DNN</a-select-option>
-            <a-select-option value="iforest">iForest</a-select-option>
-            <a-select-option value="lof">LOF</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-button type="primary">保存超参包</a-button>
-      </a-form>
-      <div style="flex: 1">
-        <div style="font-size: 13px; color: #888; margin-bottom: 6px">超参包 JSON 实时预览</div>
-        <pre style="background: #0f172a; color: #7dd3fc; border-radius: 8px; padding: 12px; font-size: 12px; overflow: auto">{{ json }}</pre>
+  <Page title="模型超参配置" description="PRD 5.3 · 超参包 JSON（vben-form）">
+    <div class="hyper-layout">
+      <Form class="hyper-form" />
+      <div class="hyper-preview">
+        <div class="preview-title">超参包 JSON 实时预览</div>
+        <pre class="preview-body">{{ preview || '提交表单后此处生成超参包 JSON' }}</pre>
+        <VbenButton type="submit" variant="solid" @click="formApi.submitForm">保存超参包</VbenButton>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
+
+<style scoped>
+.hyper-layout {
+  display: flex;
+  gap: 24px;
+}
+.hyper-form {
+  flex: 1;
+  max-width: 560px;
+}
+.hyper-preview {
+  flex: 1;
+}
+.preview-title {
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 6px;
+}
+.preview-body {
+  background: hsl(var(--muted) / 0.6);
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 12px;
+  overflow: auto;
+  max-height: 360px;
+  margin-bottom: 12px;
+}
+</style>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/import.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/import.vue
index c769258..7d86f32 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/import.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/import.vue
@@ -1,13 +1,33 @@
 <script setup lang="ts">
-/** 点位字典导入（issue #170 [B4]）：上传 CSV -> 解析预览 + 校验错误列表 */
 import { ref } from 'vue';
 
-const preview = ref<Array<Record<string, string>>>([]);
-const errors = ref<string[]>([]);
-const fileName = ref('');
+import { Page, VbenButton } from '@vben/common-ui';
+import { BxsFile } from '@vben/icons';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
 const HEADERS = ['device_id', 'point_id', 'name', 'unit', 'dataType', 'sampleRate', 'qualityCode', 'opcNode', 'protocol'];
 
+const errors = ref<string[]>([]);
+const fileName = ref('');
+const preview = ref<Array<Record<string, string>>>([]);
+
+const gridOptions: VxeTableGridOptions<Record<string, string>> = {
+  rowConfig: { keyField: 'point_id' },
+  height: 'auto',
+  stripe: true,
+  columns: HEADERS.map((h) => ({ title: h, field: h, minWidth: 90 })),
+  proxy: {
+    query: async ({ page }) => ({
+      items: preview.value.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+      total: preview.value.length,
+    }),
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
 function onFile(e: Event) {
   const el = e.target as HTMLInputElement;
   const file = el.files?.[0];
@@ -35,18 +55,19 @@ function parseCsv(text: string) {
     if (!(Number(row.sampleRate) > 0)) errors.value.push(`第 ${i + 1} 行 sampleRate 非法`);
     preview.value.push(row);
   }
+  gridApi.query();
 }
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">点位字典导入（PRD 5.1）</h1>
-    <a-upload :show-upload-list="false" :before-upload="() => false" @change="onFile">
-      <a-button type="primary">选择 CSV 文件</a-button>
-    </a-upload>
-    <div v-if="fileName" style="margin-top: 8px"><a-tag color="blue">{{ fileName }}</a-tag></div>
+  <Page title="点位字典导入" description="PRD 5.1 · CSV 上传 → 校验 → 预览">
+    <template #extra>
+      <a-upload :show-upload-list="false" :before-upload="() => false" @change="onFile">
+        <VbenButton variant="solid"><BxsFile class="size-4" />选择 CSV 文件</VbenButton>
+      </a-upload>
+    </template>
+    <a-tag v-if="fileName" color="blue">{{ fileName }}</a-tag>
     <a-alert v-for="(e, i) in errors" :key="i" type="error" :message="e" style="margin-top: 6px" />
-    <a-table v-if="preview.length" style="margin-top: 12px" :data-source="preview.slice(0, 20)"
-      :columns="HEADERS.map((h) => ({ title: h, dataIndex: h, key: h }))" :pagination="{ pageSize: 10 }" size="small" />
-  </div>
+    <Grid />
+  </Page>
 </template>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/index.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/index.vue
index 69be87f..c2a1277 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/index.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/index.vue
@@ -1,24 +1,47 @@
 <script setup lang="ts">
-/** 模板配置台目录页（issue #170/#171 [B4/B5]）：4 子模块入口 */
+import { Page } from '@vben/common-ui';
+import { BxsFile, FlatColorIconsFolder, MaterialSymbolsAdd, MaterialSymbolsEdit } from '@vben/icons';
+
 const entries = [
-  { path: '/iaop/studio/import', icon: '📥', title: '点位导入', desc: '点位字典 CSV 上传 / 校验 / 预览' },
-  { path: '/iaop/studio/hyper', icon: '⚙️', title: '模型超参', desc: '4 类模型超参包配置（JSON 预览）' },
-  { path: '/iaop/studio/layout', icon: '🧩', title: '驾驶舱编排', desc: '组件清单排序 / 启用 / 导出布局' },
-  { path: '/iaop/studio/version', icon: '🏷️', title: '版本发布', desc: '模板版本列表 / 发布 / 阶段' },
+  { path: '/iaop/studio/import', icon: BxsFile, title: '点位导入', desc: '点位字典 CSV 上传 / 校验 / 预览' },
+  { path: '/iaop/studio/hyper', icon: MaterialSymbolsAdd, title: '模型超参', desc: '4 类模型超参包配置（JSON 预览）' },
+  { path: '/iaop/studio/layout', icon: MaterialSymbolsEdit, title: '驾驶舱编排', desc: '组件清单排序 / 启用 / 导出布局' },
+  { path: '/iaop/studio/version', icon: FlatColorIconsFolder, title: '版本发布', desc: '模板版本列表 / 发布 / 阶段' },
 ];
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">模板配置台（PRD 5.1 / 5.3 / 5.7）</h1>
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 16px">
+  <Page title="模板配置台" description="PRD 5.1 / 5.3 / 5.7 · 点位导入 · 模型超参 · 布局编排 · 版本发布">
+    <div class="entry-grid">
       <a-card v-for="e in entries" :key="e.path" hoverable size="small">
-        <router-link :to="e.path" style="text-decoration: none; color: inherit">
-          <div style="font-size: 26px">{{ e.icon }}</div>
-          <div style="font-weight: 600; margin-top: 6px">{{ e.title }}</div>
-          <div style="font-size: 12px; color: #888; margin-top: 4px">{{ e.desc }}</div>
+        <router-link :to="e.path" class="entry-link">
+          <component :is="e.icon" class="size-8" />
+          <div class="entry-title">{{ e.title }}</div>
+          <div class="entry-desc">{{ e.desc }}</div>
         </router-link>
       </a-card>
     </div>
-  </div>
+  </Page>
 </template>
+
+<style scoped>
+.entry-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+}
+.entry-link {
+  display: block;
+  text-decoration: none;
+  color: hsl(var(--card-foreground));
+}
+.entry-title {
+  font-weight: 600;
+  margin-top: 8px;
+}
+.entry-desc {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  margin-top: 4px;
+}
+</style>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/layout.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/layout.vue
index a2b634b..9dc91bd 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/layout.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/layout.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-/** 驾驶舱布局编排（issue #171 [B5]）：组件清单 + 排序 + 导出布局 JSON */
 import { ref } from 'vue';
 
+import { Page, VbenButton } from '@vben/common-ui';
+import { MaterialSymbolsEdit } from '@vben/icons';
+
 const components = ref([
   { type: 'process_view', title: '四状态工艺流程', enabled: true },
   { type: 'trend', title: '实时趋势', enabled: true },
@@ -21,28 +23,59 @@ const move = (i: number, dir: number) => {
   components.value[i] = components.value[j];
   components.value[j] = t;
 };
+
+const layoutJson = () => JSON.stringify({ widgets: components.value.filter((c) => c.enabled) }, null, 2);
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">驾驶舱布局编排（PRD 5.7）</h1>
-    <div style="display: flex; gap: 24px">
-      <div style="flex: 1">
-        <div style="font-size: 13px; color: #888; margin-bottom: 6px">组件库（点击↑↓调整顺序）</div>
+  <Page title="驾驶舱布局编排" description="PRD 5.7 · 组件清单排序 / 启用 / 导出布局 JSON">
+    <div class="layout-row">
+      <div class="col">
+        <div class="col-title">组件库（点击 ↑ ↓ 调整顺序）</div>
         <a-list size="small" bordered>
           <a-list-item v-for="(c, i) in components" :key="i">
             <a-checkbox v-model:checked="c.enabled" />
-            <span style="flex: 1; margin-left: 8px">{{ c.title }}</span>
+            <span class="item-title">{{ c.title }}</span>
             <a-button size="small" @click="move(i, -1)">↑</a-button>
             <a-button size="small" style="margin-left: 4px" @click="move(i, 1)">↓</a-button>
           </a-list-item>
         </a-list>
       </div>
-      <div style="flex: 1">
-        <div style="font-size: 13px; color: #888; margin-bottom: 6px">导出布局 JSON（由 B1 驾驶舱渲染）</div>
-        <pre style="background: #0f172a; color: #7dd3fc; border-radius: 8px; padding: 12px; font-size: 12px; max-height: 320px; overflow: auto">{{ JSON.stringify({ widgets: components.value.filter(c => c.enabled) }, null, 2) }}</pre>
-        <a-button type="primary" style="margin-top: 8px">发布布局（版本发布见「版本发布」页）</a-button>
+      <div class="col">
+        <div class="col-title">导出布局 JSON（由驾驶舱渲染）</div>
+        <pre class="json-body">{{ layoutJson() }}</pre>
+        <VbenButton variant="solid"><MaterialSymbolsEdit class="size-4" />发布布局（版本发布见「版本发布」页）</VbenButton>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
+
+<style scoped>
+.layout-row {
+  display: flex;
+  gap: 24px;
+}
+.col {
+  flex: 1;
+  min-width: 0;
+}
+.col-title {
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 6px;
+}
+.item-title {
+  flex: 1;
+  margin-left: 8px;
+}
+.json-body {
+  background: hsl(var(--muted) / 0.6);
+  color: hsl(var(--foreground));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 12px;
+  max-height: 320px;
+  overflow: auto;
+}
+</style>
diff --git a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/version.vue b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/version.vue
index 2f2262e..42ab79d 100644
--- a/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/version.vue
+++ b/deploy/fba/fba-ui-src/apps/web-antdv-next/src/views/iaop/studio/version.vue
@@ -1,38 +1,57 @@
 <script setup lang="ts">
-/** 模板版本发布（issue #171 [B5]）：版本列表 + 发布 */
 import { ref } from 'vue';
 
-const versions = ref([
+import { Page, VbenButton } from '@vben/common-ui';
+import { MaterialSymbolsAdd } from '@vben/icons';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+const rows = ref([
   { version: 'v1.0.0', stage: 'prod', time: '2026-08-05 10:00', author: 'bot_dev1', note: 'Ti 一期发布' },
   { version: 'v0.9.0', stage: 'staging', time: '2026-08-04 16:30', author: 'bot_dev1', note: '验收候选' },
   { version: 'v0.8.0', stage: 'dev', time: '2026-08-03 09:00', author: 'bot_dev1', note: '布局资产初版' },
 ]);
 
-const publish = () => {
-  versions.value.unshift({
+const gridOptions: VxeTableGridOptions = {
+  rowConfig: { keyField: 'version' },
+  height: 'auto',
+  stripe: true,
+  columns: [
+    { title: '版本', field: 'version', width: 110 },
+    { title: '阶段', field: 'stage', width: 100, slots: { default: 'stage' } },
+    { title: '时间', field: 'time', width: 170 },
+    { title: '作者', field: 'author', width: 110 },
+    { title: '说明', field: 'note', minWidth: 200 },
+  ],
+  proxy: {
+    query: async ({ page }) => ({
+      items: rows.value.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize),
+      total: rows.value.length,
+    }),
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+
+function publish() {
+  rows.value.unshift({
     version: 'v1.0.1', stage: 'staging', time: new Date().toISOString().slice(0, 16).replace('T', ' '),
     author: 'admin', note: '手动发布',
   });
-};
+  gridApi.query();
+}
 </script>
 
 <template>
-  <div>
-    <h1 style="font-size: 18px">模板版本发布（PRD 5.7 版本管理）</h1>
-    <a-table :data-source="versions" size="small" :pagination="false"
-      :columns="[
-        { title: '版本', dataIndex: 'version', key: 'version' },
-        { title: '阶段', dataIndex: 'stage', key: 'stage' },
-        { title: '时间', dataIndex: 'time', key: 'time' },
-        { title: '作者', dataIndex: 'author', key: 'author' },
-        { title: '说明', dataIndex: 'note', key: 'note' },
-      ]">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'stage'">
-          <a-tag :color="record.stage === 'prod' ? 'green' : record.stage === 'staging' ? 'orange' : 'blue'">{{ record.stage }}</a-tag>
-        </template>
+  <Page title="模板版本发布" description="PRD 5.7 · 版本管理 / 阶段流转">
+    <template #extra>
+      <VbenButton variant="solid" @click="publish"><MaterialSymbolsAdd class="size-4" />发布新版本</VbenButton>
+    </template>
+    <Grid>
+      <template #stage="{ row }">
+        <a-tag :color="row.stage === 'prod' ? 'green' : row.stage === 'staging' ? 'orange' : 'blue'">{{ row.stage }}</a-tag>
       </template>
-    </a-table>
-    <a-button type="primary" style="margin-top: 12px" @click="publish">发布新版本</a-button>
-  </div>
+    </Grid>
+  </Page>
 </template>