接入真实模型调用与参考文件上传

2026-07-02 15:16:34 +08:00
parent b313083766
commit 5a43cc70d5
9 changed files with 420 additions and 53 deletions
@@ -1,17 +1,128 @@
-<template><div style="padding:24px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><h2>模型管理</h2><a-button type="primary" @click="openAdd">添加模型</a-button></div><a-row :gutter="[16,16]"><a-col :span="8" v-for="m in models" :key="m.id"><a-card :title="m.name"><template #extra><a-button type="link" size="small" @click="openEdit(m)">编辑</a-button></template><p>厂商：{{m.provider}}</p><p>格式：{{m.api_format}}</p><p>地址：{{m.api_endpoint}}</p><p>状态：<a-switch :checked="m.status==='enabled'" @change="toggleStatus(m)" /></p></a-card></a-col></a-row><a-modal v-model:open="modalOpen" :title="isEdit?'编辑模型':'添加模型'" @ok="saveModel"><a-form layout="vertical"><a-form-item label="模型名称"><a-input v-model:value="form.name" /></a-form-item><a-form-item label="供应厂商"><a-input v-model:value="form.provider" /></a-form-item><a-form-item label="API 格式"><a-select v-model:value="form.api_format"><a-select-option value="openai">OpenAI 格式</a-select-option><a-select-option value="anthropic">Anthropic 格式</a-select-option></a-select></a-form-item><a-form-item label="API 地址"><a-input v-model:value="form.api_endpoint" placeholder="https://api.xxx.com" /></a-form-item><a-form-item label="API Key"><a-input-password v-model:value="form.api_key" /></a-form-item></a-form></a-modal></div></template>
+<template>
+  <div style="padding:24px">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+      <h2>模型管理</h2>
+      <a-button type="primary" @click="openAdd">添加模型</a-button>
+    </div>
+
+    <a-row :gutter="[16, 16]">
+      <a-col :span="8" v-for="item in models" :key="item.id">
+        <a-card :title="item.name">
+          <template #extra>
+            <a-button type="link" size="small" @click="openEdit(item)">编辑</a-button>
+          </template>
+          <p>厂商：{{ item.provider }}</p>
+          <p>格式：{{ item.api_format }}</p>
+          <p>地址：{{ item.api_endpoint }}</p>
+          <p>密钥：{{ item.api_key_preview || '未设置' }}</p>
+          <p>状态：<a-switch :checked="item.status === 'enabled'" @change="toggleStatus(item)" /></p>
+          <div style="margin-top:12px;display:flex;gap:8px">
+            <a-button size="small" @click="runTest(item)">连接测试</a-button>
+            <a-button danger size="small" @click="removeModel(item.id)">删除</a-button>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-modal v-model:open="modalOpen" :title="isEdit ? '编辑模型' : '添加模型'" @ok="saveModel">
+      <a-form layout="vertical">
+        <a-form-item label="模型名称">
+          <a-input v-model:value="form.name" placeholder="如 gpt-4o-mini / deepseek-chat / claude-3-5-sonnet-latest" />
+        </a-form-item>
+        <a-form-item label="供应厂商">
+          <a-input v-model:value="form.provider" />
+        </a-form-item>
+        <a-form-item label="API 格式">
+          <a-select v-model:value="form.api_format">
+            <a-select-option value="openai">OpenAI 格式</a-select-option>
+            <a-select-option value="anthropic">Anthropic 格式</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="API 地址">
+          <a-input v-model:value="form.api_endpoint" placeholder="https://api.openai.com 或兼容网关地址" />
+        </a-form-item>
+        <a-form-item label="API Key">
+          <a-input-password v-model:value="form.api_key" placeholder="编辑时留空表示保持原密钥不变" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useModelStore } from "@/stores/model";
-import { message } from "ant-design-vue";
-const store = useModelStore();
-const models = ref<any[]>([]);
-const modalOpen = ref(false);
-const isEdit = ref(false);
-const editId = ref(0);
-const form = ref({name:"",provider:"",api_format:"openai",api_endpoint:"",api_key:""});
-onMounted(async()=>{await store.fetchList();models.value=store.models as any});
-function openAdd(){isEdit.value=false;form.value={name:"",provider:"",api_format:"openai",api_endpoint:"",api_key:""};modalOpen.value=true}
-function openEdit(m:any){isEdit.value=true;editId.value=m.id;form.value={name:m.name,provider:m.provider,api_format:m.api_format,api_endpoint:m.api_endpoint,api_key:""};modalOpen.value=true}
-async function saveModel(){if(isEdit.value){await store.update(editId.value,form.value)}else{await store.create(form.value)}modalOpen.value=false;models.value=store.models as any;message.success("保存成功")}
-async function toggleStatus(m:any){m.status=m.status==="enabled"?"disabled":"enabled";await store.update(m.id,{status:m.status});message.success("状态已更新")}
+import { ref, onMounted } from 'vue'
+import { Modal, message } from 'ant-design-vue'
+import { useModelStore } from '@/stores/model'
+
+const store = useModelStore()
+const models = ref<any[]>([])
+const modalOpen = ref(false)
+const isEdit = ref(false)
+const editId = ref(0)
+const form = ref({ name: '', provider: '', api_format: 'openai', api_endpoint: '', api_key: '' })
+
+async function refreshList() {
+  await store.fetchList()
+  models.value = store.models as any
+}
+
+onMounted(async () => {
+  await refreshList()
+})
+
+function openAdd() {
+  isEdit.value = false
+  form.value = { name: '', provider: '', api_format: 'openai', api_endpoint: '', api_key: '' }
+  modalOpen.value = true
+}
+
+function openEdit(item: any) {
+  isEdit.value = true
+  editId.value = item.id
+  form.value = {
+    name: item.name,
+    provider: item.provider,
+    api_format: item.api_format,
+    api_endpoint: item.api_endpoint,
+    api_key: '',
+  }
+  modalOpen.value = true
+}
+
+async function saveModel() {
+  if (isEdit.value) {
+    await store.update(editId.value, form.value)
+  } else {
+    await store.create(form.value)
+  }
+  modalOpen.value = false
+  await refreshList()
+  message.success('保存成功')
+}
+
+async function toggleStatus(item: any) {
+  const nextStatus = item.status === 'enabled' ? 'disabled' : 'enabled'
+  await store.update(item.id, { status: nextStatus })
+  await refreshList()
+  message.success('状态已更新')
+}
+
+async function runTest(item: any) {
+  try {
+    const result: any = await store.test(item.id)
+    Modal.info({
+      title: '连接测试结果',
+      width: 640,
+      content: JSON.stringify(result.data, null, 2),
+    })
+  } catch (error: any) {
+    message.error(error.message || '连接测试失败')
+  }
+}
+
+async function removeModel(id: number) {
+  await store.remove(id)
+  await refreshList()
+  message.success('模型已删除')
+}
 </script>