310 lines
8.7 KiB
Vue
310 lines
8.7 KiB
Vue
<template>
|
||
<div class="model-info-config-page">
|
||
<h2 class="page-title">模型信息配置</h2>
|
||
|
||
<section class="filter-card">
|
||
<div class="filter-row">
|
||
<el-form :inline="true" :model="queryForm" class="filter-form">
|
||
<el-form-item label="模型名称">
|
||
<el-input
|
||
v-model="queryForm.modelName"
|
||
size="small"
|
||
clearable
|
||
placeholder="搜索模型名称"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="类型">
|
||
<el-select v-model="queryForm.modelType" size="small" placeholder="全部">
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="文本生成" value="文本生成"></el-option>
|
||
<el-option label="图像生成" value="图像生成"></el-option>
|
||
<el-option label="语音合成" value="语音合成"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="供应商">
|
||
<el-select v-model="queryForm.provider" size="small" placeholder="全部">
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="OpenAI" value="OpenAI"></el-option>
|
||
<el-option label="Google" value="Google"></el-option>
|
||
<el-option label="开元云" value="开元云"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button size="small" type="primary">查询</el-button>
|
||
<el-button size="small">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-button size="small" type="primary" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="table-card">
|
||
<el-tabs v-model="activeTab" class="config-tabs">
|
||
<el-tab-pane label="待上架" name="pending"></el-tab-pane>
|
||
<el-tab-pane label="已上架" name="listed"></el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<el-table :data="displayTableData" class="config-table" style="width: 100%">
|
||
<el-table-column prop="id" label="模型ID" width="90" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="model_name" label="模型名称/版本" min-width="150" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="model_type" label="模型类型" width="120" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="provider" label="供应商" width="120" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="api_doc.api_url" label="接口地址" min-width="190" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="description" label="模型介绍" min-width="190" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="status" label="状态" width="90">
|
||
<template slot-scope="scope">
|
||
<el-tag size="mini" :type="scope.row.listing_status === 1 ? 'success' : 'warning'">
|
||
{{ scope.row.listing_status === 1 ? '已上架' : '待上架' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="updated_at" label="更新时间" width="150" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="操作" width="160" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" @click="openDetailDialog(scope.row)">详情</el-button>
|
||
<el-button type="text" size="mini" @click="openEditDialog(scope.row)">编辑模型信息</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="table-footer">
|
||
<span>共 {{ displayTableData.length }} 条</span>
|
||
<div class="pager">
|
||
<el-button size="mini">上一页</el-button>
|
||
<span>1 / 1</span>
|
||
<el-button size="mini">下一页</el-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<model-info-edit-dialog ref="editDialog" @success="handleDialogSuccess"></model-info-edit-dialog>
|
||
<model-info-detail-dialog ref="detailDialog"></model-info-detail-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ModelInfoEditDialog from './ModelInfoEditDialog.vue'
|
||
import ModelInfoDetailDialog from './ModelInfoDetailDialog.vue'
|
||
import { reqModelInfoConfigList } from '@/api/model/model'
|
||
export default {
|
||
name: 'ModelInfoConfig',
|
||
components: {
|
||
ModelInfoEditDialog,
|
||
ModelInfoDetailDialog
|
||
},
|
||
data() {
|
||
return {
|
||
activeTab: 'pending',
|
||
queryForm: {
|
||
modelName: '',
|
||
modelType: '',
|
||
provider: ''
|
||
},
|
||
tableData: [
|
||
{
|
||
id: 'M006',
|
||
name: 'GPT-3.5-Turbo',
|
||
type: '文本生成',
|
||
provider: 'OpenAI',
|
||
logo: '-',
|
||
apiUrl: 'https://api.openai.com/v1/chat/completions',
|
||
description: 'GPT-3.5-Turbo高效对话模型，适合文本生成和问答。',
|
||
status: '待上架',
|
||
updatedAt: '2026-04-15'
|
||
},
|
||
{
|
||
id: 'M007',
|
||
name: 'ViT-B/16',
|
||
type: '图像生成',
|
||
provider: 'Google',
|
||
logo: '-',
|
||
apiUrl: 'https://api.kaiyuan.cloud/v1/images',
|
||
description: 'ViT-B/16视觉Transformer模型，适合图像理解。',
|
||
status: '待上架',
|
||
updatedAt: '2026-04-14'
|
||
},
|
||
{
|
||
id: 'M008',
|
||
name: 'Bark',
|
||
type: '语音合成',
|
||
provider: '开元云',
|
||
logo: '-',
|
||
apiUrl: 'https://api.kaiyuan.cloud/v1/audio',
|
||
description: 'Bark多语言语音合成模型，支持自然语音生成。',
|
||
status: '待上架',
|
||
updatedAt: '2026-04-13'
|
||
},
|
||
{
|
||
id: 'M009',
|
||
name: 'CLIP',
|
||
type: '多模态',
|
||
provider: 'OpenAI',
|
||
logo: '-',
|
||
apiUrl: 'https://api.kaiyuan.cloud/v1/clip',
|
||
description: 'CLIP多模态模型，支持图文检索和理解。',
|
||
status: '待上架',
|
||
updatedAt: '2026-04-12'
|
||
},
|
||
{
|
||
id: 'M011',
|
||
name: 'Falcon-180B',
|
||
type: '文本生成',
|
||
provider: 'Meta',
|
||
logo: '-',
|
||
apiUrl: 'https://api.kaiyuan.cloud/v1/chat',
|
||
description: 'Falcon-180B开源大语言模型，适合复杂文本任务。',
|
||
status: '待上架',
|
||
updatedAt: '2026-04-27'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
displayTableData() {
|
||
const targetStatus = this.activeTab === 'listed' ? 1 : 0
|
||
return this.tableData.filter(item => Number(item.listing_status || 0) === targetStatus)
|
||
}
|
||
},
|
||
created() {
|
||
this.getModelInfoConfigList()
|
||
},
|
||
methods: {
|
||
// 获取模型信息配置列表
|
||
async getModelInfoConfigList() {
|
||
const res = await reqModelInfoConfigList()
|
||
console.log(res);
|
||
if (res.status === true) {
|
||
this.tableData = res.data.model_list
|
||
}
|
||
|
||
},
|
||
|
||
openAddDialog() {
|
||
this.$refs.editDialog.open()
|
||
},
|
||
openDetailDialog(row) {
|
||
this.$refs.detailDialog.open(row)
|
||
},
|
||
openEditDialog(row) {
|
||
this.$refs.editDialog.open(row)
|
||
},
|
||
handleDialogSuccess() {
|
||
this.getModelInfoConfigList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.model-info-config-page {
|
||
min-height: 100vh;
|
||
padding: 16px 18px 24px;
|
||
background: #f3f7ff;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0 0 16px;
|
||
color: #1f2d3d;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.filter-card,
|
||
.table-card {
|
||
background: #ffffff;
|
||
border: 1px solid #edf1f7;
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 24px rgba(31, 45, 61, 0.04);
|
||
}
|
||
|
||
.filter-card {
|
||
padding: 12px 14px 0;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.filter-form {
|
||
flex: 1;
|
||
|
||
/deep/ .el-form-item {
|
||
margin-right: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/deep/ .el-input,
|
||
/deep/ .el-select {
|
||
width: 160px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.filter-row {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.table-card {
|
||
padding: 0 12px 12px;
|
||
}
|
||
|
||
.config-tabs {
|
||
/deep/ .el-tabs__header {
|
||
margin: 0;
|
||
}
|
||
|
||
/deep/ .el-tabs__nav-wrap::after {
|
||
height: 1px;
|
||
background: #e8edf5;
|
||
}
|
||
|
||
/deep/ .el-tabs__item {
|
||
height: 44px;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.config-table {
|
||
margin-top: 10px;
|
||
color: #344054;
|
||
|
||
/deep/ th {
|
||
color: #475467;
|
||
font-weight: 600;
|
||
background: #fafcff;
|
||
}
|
||
|
||
/deep/ td,
|
||
/deep/ th {
|
||
padding: 8px 0;
|
||
}
|
||
|
||
/deep/ .cell {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.table-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 0 0;
|
||
color: #667085;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.pager {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
</style>
|