feat: 实现业务视图页面
登录、模型调优、评测、推理、对比、模型管理、数据集、数据处理、工具、系统（硬件/日志/训练日志）等全部业务页面视图。
This commit is contained in:
caoxiaozhu
309
frontend/src/views/model/ModelManageView.vue
Normal file
309
frontend/src/views/model/ModelManageView.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import DataTablePage from '@/components/DataTablePage.vue'
|
||||
import {
|
||||
getModelList,
|
||||
getTrainedModels,
|
||||
deleteModel,
|
||||
deleteTrainedModel,
|
||||
mergeModel,
|
||||
exportModelUrl,
|
||||
} from '@/api/modules/model'
|
||||
import { MODEL_TYPE_MAP, PURPOSE_MAP, MODEL_SOURCE_MAP } from '@/constants'
|
||||
import type { ModelItem, TrainedModel } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
type TabKey = 'config' | 'trained'
|
||||
const activeTab = ref<TabKey>('config')
|
||||
|
||||
const loading = ref(false)
|
||||
const configList = ref<ModelItem[]>([])
|
||||
const trainedList = ref<TrainedModel[]>([])
|
||||
|
||||
|
||||
|
||||
async function loadConfig() {
|
||||
loading.value = true
|
||||
try {
|
||||
configList.value = (await getModelList()) || []
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTrained() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getTrainedModels()
|
||||
trainedList.value = res?.models || []
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
if (activeTab.value === 'config') loadConfig()
|
||||
else loadTrained()
|
||||
}
|
||||
|
||||
/** 删除配置模型 */
|
||||
async function handleDeleteConfig(row: any) {
|
||||
await deleteModel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
}
|
||||
|
||||
/** 删除已训练模型（合并权重） */
|
||||
async function handleDeleteTrained(row: any) {
|
||||
await deleteTrainedModel(row.id || row.name, 'merged')
|
||||
ElMessage.success('删除成功')
|
||||
}
|
||||
|
||||
/** 删除 LoRA 权重 */
|
||||
async function handleDeleteWeight(row: any) {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除模型 "${row.name}" 的权重文件吗？合并模型不受影响。`,
|
||||
'确认删除',
|
||||
{ type: 'warning' },
|
||||
)
|
||||
await deleteTrainedModel(row.name, 'lora')
|
||||
ElMessage.success('权重已删除')
|
||||
loadTrained()
|
||||
}
|
||||
|
||||
/** 合并权重 */
|
||||
async function handleMerge(row: any) {
|
||||
await router.push({
|
||||
path: '/model-manage/merge',
|
||||
query: {
|
||||
model: row.name,
|
||||
method: row.train_methods?.[0]?.name || 'lora',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** 导出 */
|
||||
function handleExport(row: any) {
|
||||
window.open(exportModelUrl(row.name), '_blank')
|
||||
}
|
||||
|
||||
function editModel(row: any) {
|
||||
router.push(`/model-manage/${row.id}/edit`)
|
||||
}
|
||||
|
||||
function handleCreateClick() {
|
||||
if (activeTab.value === 'config') {
|
||||
router.push('/model-manage/create')
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
if (activeTab.value === 'config') {
|
||||
loadConfig()
|
||||
} else {
|
||||
loadTrained()
|
||||
}
|
||||
}
|
||||
|
||||
watch(activeTab, () => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="model-manage-page" style="height: 100%;">
|
||||
<!-- 配置模型列表 -->
|
||||
<DataTablePage
|
||||
v-if="activeTab === 'config'"
|
||||
title=""
|
||||
:data="configList"
|
||||
:loading="loading"
|
||||
searchable
|
||||
:search-fields="['name', 'description']"
|
||||
create-text="添加模型"
|
||||
@create="handleCreateClick"
|
||||
:delete-fn="handleDeleteConfig"
|
||||
row-key="id"
|
||||
@refresh="loadConfig"
|
||||
>
|
||||
<template #title>
|
||||
<div class="capsule-tabs">
|
||||
<button class="capsule-tab-item active" @click="activeTab = 'config'">配置模型</button>
|
||||
<button class="capsule-tab-item" @click="activeTab = 'trained'">训练模型</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #columns>
|
||||
<el-table-column label="模型名称" prop="name" align="center" />
|
||||
<el-table-column label="模型类型" align="center" width="140">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="primary" size="small">
|
||||
{{ MODEL_TYPE_MAP[row.type] || row.type || '-' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用途" align="center" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="(PURPOSE_MAP[row.purpose]?.type || 'info') as any" size="small">
|
||||
{{ PURPOSE_MAP[row.purpose]?.text || row.purpose || '-' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="模型来源" align="center" width="110">
|
||||
<template #default="{ row }">
|
||||
{{ MODEL_SOURCE_MAP[row.model_source] || row.model_source || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" align="center" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.description || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ row.create_time ? new Date(row.create_time).toLocaleString('zh-CN') : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<el-button type="primary" link size="small" @click="editModel(row)">编辑</el-button>
|
||||
<el-button type="danger" link size="small" @click="handleDeleteConfig(row)">删除</el-button>
|
||||
</template>
|
||||
</DataTablePage>
|
||||
|
||||
<!-- 训练模型列表 -->
|
||||
<DataTablePage
|
||||
v-else
|
||||
title=""
|
||||
:data="trainedList"
|
||||
:loading="loading"
|
||||
searchable
|
||||
:search-fields="['name']"
|
||||
:delete-fn="handleDeleteTrained"
|
||||
row-key="name"
|
||||
@refresh="loadTrained"
|
||||
>
|
||||
<template #title>
|
||||
<div class="capsule-tabs">
|
||||
<button class="capsule-tab-item" @click="activeTab = 'config'">配置模型</button>
|
||||
<button class="capsule-tab-item active" @click="activeTab = 'trained'">训练模型</button>
|
||||
</div>
|
||||
</template>
|
||||
<template #columns>
|
||||
<el-table-column label="模型名称" prop="name" align="center" />
|
||||
<el-table-column label="训练方法" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.train_methods?.[0]?.name || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="基座模型" align="center" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.base_model_path || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="合并状态" align="center" width="110">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.merging" type="warning" size="small">合并中</el-tag>
|
||||
<el-tag v-else-if="row.merged" type="success" size="small">已合并</el-tag>
|
||||
<el-tag v-else type="info" size="small">未合并</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ row.create_time ? new Date(row.create_time).toLocaleString('zh-CN') : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
v-if="!row.merged && !row.merging"
|
||||
type="primary"
|
||||
link
|
||||
size="small"
|
||||
@click="handleMerge(row)"
|
||||
>
|
||||
<i class="fa fa-code-fork" style="margin-right: 4px" />合并权重
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else-if="row.merging"
|
||||
type="info"
|
||||
link
|
||||
size="small"
|
||||
:loading="true"
|
||||
disabled
|
||||
>
|
||||
合并中
|
||||
</el-button>
|
||||
<el-button type="warning" link size="small" @click="handleDeleteWeight(row)">
|
||||
<i class="fa fa-eraser" style="margin-right: 4px" />删除权重
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.merged"
|
||||
type="success"
|
||||
link
|
||||
size="small"
|
||||
@click="handleExport(row)"
|
||||
>
|
||||
<i class="fa fa-download" style="margin-right: 4px" />导出
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.merged"
|
||||
type="danger"
|
||||
link
|
||||
size="small"
|
||||
@click="handleDeleteTrained(row)"
|
||||
>
|
||||
<i class="fa fa-trash-o" style="margin-right: 4px" />删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</DataTablePage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
/* 胶囊切换栏样式 */
|
||||
.capsule-tabs {
|
||||
display: flex;
|
||||
background: #f1f5f9;
|
||||
padding: 3px;
|
||||
border-radius: 8px;
|
||||
gap: 2px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.capsule-tab-item {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 6px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
color: #4f46e5;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user