@wwkit/freetoken 1.0.1

package/client/src/views/AdminModelsView.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import PageHeader from '../components/PageHeader.vue'
+import axios from 'axios'
+
+const models = ref([])
+const loading = ref(false)
+const dialogVisible = ref(false)
+const dialogTitle = ref('添加模型')
+const formData = ref({
+  id: null,
+  provider: '',
+  model: '',
+  baseUrl: '',
+  apiKeyEnv: '',
+  enableFullTest: false,
+  contextWindow: '',
+  description: ''
+})
+
+const activeProvider = ref('')
+
+const providers = computed(() => {
+  const set = new Set(models.value.map(m => m.provider))
+  return Array.from(set).sort()
+})
+
+const filteredModels = computed(() => {
+  if (!activeProvider.value) return models.value
+  return models.value.filter(m => m.provider === activeProvider.value)
+})
+
+async function fetchModels() {
+  loading.value = true
+  try {
+    const res = await axios.get('/api/admin/')
+    models.value = res.data.models || []
+    if (providers.value.length > 0 && !activeProvider.value) {
+      activeProvider.value = providers.value[0]
+    }
+  } catch (error) {
+    ElMessage.error('获取模型列表失败: ' + error.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectProvider(p) {
+  activeProvider.value = p
+}
+
+function openAddDialog() {
+  dialogTitle.value = '添加模型'
+  formData.value = {
+    id: null,
+    provider: activeProvider.value || '',
+    model: '',
+    baseUrl: '',
+    apiKeyEnv: '',
+    enableFullTest: false,
+    contextWindow: '',
+    description: ''
+  }
+  dialogVisible.value = true
+}
+
+function openEditDialog(row) {
+  dialogTitle.value = '编辑模型'
+  formData.value = { ...row }
+  dialogVisible.value = true
+}
+
+async function saveModel() {
+  try {
+    if (formData.value.id) {
+      await axios.put(`/api/admin/${formData.value.id}`, formData.value)
+      ElMessage.success('更新成功')
+    } else {
+      await axios.post('/api/admin/', formData.value)
+      ElMessage.success('添加成功')
+    }
+    dialogVisible.value = false
+    fetchModels()
+  } catch (error) {
+    ElMessage.error('保存失败: ' + error.message)
+  }
+}
+
+async function deleteModel(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除模型 ${row.model}？`, '确认删除', {
+      type: 'warning'
+    })
+    await axios.delete(`/api/admin/${row.id}`)
+    ElMessage.success('删除成功')
+    fetchModels()
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败: ' + error.message)
+    }
+  }
+}
+
+onMounted(() => {
+  fetchModels()
+})
+</script>
+
+<template>
+  <div class="admin-page">
+    <PageHeader title="模型管理" description="配置测速系统的模型列表" />
+
+    <el-tabs v-model="activeProvider" @tab-change="selectProvider">
+      <el-tab-pane
+        v-for="p in providers"
+        :key="p"
+        :name="p"
+        :label="p"
+      />
+    </el-tabs>
+
+    <div class="toolbar">
+      <el-button type="primary" @click="openAddDialog">添加模型</el-button>
+      <el-button @click="fetchModels" :loading="loading">刷新</el-button>
+    </div>
+
+    <el-table :data="filteredModels" border stripe v-loading="loading">
+      <el-table-column prop="id" label="ID" width="60" />
+      <el-table-column prop="provider" label="供应商" width="120" />
+      <el-table-column prop="model" label="模型名称" min-width="200" />
+      <el-table-column prop="baseUrl" label="Base URL" min-width="250" />
+      <el-table-column prop="apiKeyEnv" label="环境变量" width="180">
+        <template #default="scope">
+          <code v-if="scope.row.apiKeyEnv" class="env-code">{{ scope.row.apiKeyEnv }}</code>
+          <span v-else class="text-muted">-</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="enableFullTest" label="完整测试" width="100">
+        <template #default="scope">
+          <el-tag :type="scope.row.enableFullTest ? 'success' : 'info'" size="small">
+            {{ scope.row.enableFullTest ? '开启' : '关闭' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="contextWindow" label="上下文窗口" width="120">
+        <template #default="scope">{{ scope.row.contextWindow || '-' }}</template>
+      </el-table-column>
+      <el-table-column prop="description" label="描述" min-width="150">
+        <template #default="scope">{{ scope.row.description || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="140" fixed="right">
+        <template #default="scope">
+          <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
+          <el-button size="small" type="danger" @click="deleteModel(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
+      <el-form :model="formData" label-width="100px">
+        <el-form-item label="供应商">
+          <el-input v-model="formData.provider" placeholder="如: bluesliu" />
+        </el-form-item>
+        <el-form-item label="模型名称">
+          <el-input v-model="formData.model" placeholder="如: MiniMax-M2.7" />
+        </el-form-item>
+        <el-form-item label="Base URL">
+          <el-input v-model="formData.baseUrl" placeholder="如: http://7.237.94.74:32527/v1" />
+        </el-form-item>
+        <el-form-item label="环境变量">
+          <el-input v-model="formData.apiKeyEnv" placeholder="如: BLUESLIU_API_KEY" />
+        </el-form-item>
+        <el-form-item label="完整测试">
+          <el-switch v-model="formData.enableFullTest" />
+          <span class="form-tip">开启后执行响应速度、吞吐速度、编码能力测试</span>
+        </el-form-item>
+        <el-form-item label="上下文窗口">
+          <el-input v-model="formData.contextWindow" placeholder="如: 128K tokens" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="formData.description" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveModel">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  margin-bottom: 16px;
+  display: flex;
+  gap: 12px;
+}
+.env-code {
+  padding: 2px 6px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+}
+.text-muted {
+  color: var(--el-text-color-secondary);
+}
+.form-tip {
+  margin-left: 12px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+</style>