fix: models 页改 antd a-table(响应式 :data-source,规避 vben Grid proxy 异步时序导致 0 条)

This commit is contained in:
2026-08-06 16:09:00 +08:00
parent 03dbd04452
commit 2c7ebf4efc
@@ -2,16 +2,15 @@
/**
* 模型管理(issue #183 [E2] 前端接入注册表 API)
* - 数据源:服务端注册表 API(list/promote/rollback 全走服务端,多用户共享);
* - 降级:API 不可达时回退 localStorage(iaop.admin.models.v1,旧版 key),UI 标注「离线演示模式」;
* - 降级:API 不可达时回退 localStorage(iaop.admin.models.v1),UI 标注「离线演示模式」;
* - 迁移:检测 localStorage 有数据且服务端在线时提示导入。
* - 表格:antd a-table(响应式 :data-source 直绑,规避 vxe-grid proxy 异步时序问题)。
*/
import { onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { Page, VbenButton } from '@vben/common-ui';
import { message } from 'antdv-next';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
fetchRegistryModels,
promoteModel,
@@ -45,36 +44,25 @@ function saveLocal(list: LocalModel[]) {
}
}
const online = ref(false); // 注册表服务在线?
const online = ref(false);
const loading = ref(true);
const models = ref<RegistryModel[]>([]);
const migrateVisible = ref(false);
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: 'description', minWidth: 220 },
{ title: '操作', field: 'action', width: 170, slots: { default: 'action' } },
],
// 数据直接绑定 :data(响应式自动渲染,规避 proxy 分页就绪时序)
data: models,
};
const columns = [
{ title: '模型', dataIndex: 'name', key: 'name', width: 200 },
{ title: '版本', dataIndex: 'version', key: 'version', width: 120 },
{ title: '阶段', dataIndex: 'stage', key: 'stage', width: 110 },
{ title: '说明', dataIndex: 'description', key: 'description' },
{ title: '操作', key: 'action', width: 180 },
];
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
async function refresh() {
// :data 响应式绑定,数据变化自动渲染
}
const tagColor = (stage: string) =>
stage === 'prod' ? 'green' : stage === 'staging' ? 'orange' : 'blue';
async function loadFromServer() {
const resp = await fetchRegistryModels();
models.value = resp.models;
models.value = resp.models || [];
}
async function init() {
@@ -82,8 +70,7 @@ async function init() {
try {
await loadFromServer();
online.value = true;
refresh();
// 迁移提示:本地有数据且服务端在线(且本地有服务端没有的模型)
// 迁移提示:本地有服务端没有的模型
const local = loadLocal();
const serverNames = new Set(models.value.map((m) => `${m.name}@${m.version}`));
const localExtra = local.filter((m) => !serverNames.has(`${m.name}@${m.version}`));
@@ -99,7 +86,6 @@ async function init() {
}));
} finally {
loading.value = false;
refresh();
}
}
@@ -108,17 +94,14 @@ async function promote(m: RegistryModel) {
try {
await promoteModel(m.name, m.version);
await loadFromServer();
refresh();
return;
} catch (e) {
message.error(`提升失败:${(e as Error).message}`);
return;
}
}
// 离线降级
m.stage = m.stage === 'staging' ? 'prod' : m.stage === 'dev' ? 'staging' : m.stage;
saveLocal(models.value.map((x) => ({ name: x.name, version: x.version, stage: x.stage, desc: x.description })));
refresh();
}
async function rollback(m: RegistryModel) {
@@ -126,7 +109,6 @@ async function rollback(m: RegistryModel) {
try {
await rollbackModel(m.name, 'prod', m.version);
await loadFromServer();
refresh();
return;
} catch (e) {
message.error(`回滚失败:${(e as Error).message}`);
@@ -135,7 +117,6 @@ async function rollback(m: RegistryModel) {
}
m.stage = 'staging';
saveLocal(models.value.map((x) => ({ name: x.name, version: x.version, stage: x.stage, desc: x.description })));
refresh();
}
async function migrateLocal() {
@@ -151,7 +132,6 @@ async function migrateLocal() {
}
}
await loadFromServer();
refresh();
migrateVisible.value = false;
if (fail === 0) {
localStorage.removeItem(MODELS_KEY);
@@ -161,9 +141,6 @@ async function migrateLocal() {
}
}
const tagColor = (stage: string) =>
stage === 'prod' ? 'green' : stage === 'staging' ? 'orange' : 'blue';
onMounted(init);
</script>
@@ -173,15 +150,17 @@ onMounted(init);
<a-tag :color="online ? 'green' : 'orange'">{{ online ? '● 服务端在线' : '● 离线演示模式' }}</a-tag>
</template>
<a-spin :spinning="loading">
<Grid :data="models">
<template #stage="{ row }">
<a-tag :color="tagColor(row.stage)">{{ row.stage }}</a-tag>
<a-table :data-source="models" :columns="columns" row-key="name" size="small" :pagination="{ pageSize: 10 }">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'stage'">
<a-tag :color="tagColor(record.stage)">{{ record.stage }}</a-tag>
</template>
<template v-else-if="column.key === 'action'">
<VbenButton size="small" :disabled="record.stage === 'prod'" @click="promote(record)">提升</VbenButton>
<VbenButton size="small" variant="outline" :disabled="record.stage !== 'prod'" @click="rollback(record)">回滚</VbenButton>
</template>
</template>
<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>
</a-table>
</a-spin>
<a-modal v-model:open="migrateVisible" title="本地模型导入注册表"
:on-ok="migrateLocal" ok-text="导入服务端" cancel-text="暂不">