@wwkit/freetoken 1.0.1

package/client/src/views/FreeModelsView.vue

@@ -0,0 +1,518 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { freeModelProviders } from '../data/freeModels/index.js'
+import PageHeader from '../components/PageHeader.vue'
+import CodeBlock from '../components/CodeBlock.vue'
+import DetailBlock from '../components/DetailBlock.vue'
+import StepList from '../components/StepList.vue'
+import CheckList from '../components/CheckList.vue'
+import LinkList from '../components/LinkList.vue'
+import ChatBox from '../components/ChatBox.vue'
+import axios from 'axios'
+
+import { useOs } from '../composables/useOs'
+
+const { t, tm } = useI18n()
+const { os } = useOs()
+
+const activeId = ref(freeModelProviders[0].id)
+const activeProvider = ref(freeModelProviders[0])
+const activeSubTab = ref('apiSpec')
+const selectedModel = ref('')
+const inputApiKey = ref('')
+const drawerVisible = ref(false)
+const chatBoxRef = ref(null)
+
+// 数据库模型数据
+const dbModels = ref([])
+
+// 测速数据
+const speedResults = ref([])
+const isLoading = ref(false)
+const lastTested = ref(null)
+
+const subTabs = computed(() => [
+  { id: 'apiSpec', label: t('freeModels.apiSpec') },
+  { id: 'models', label: t('freeModels.modelList') },
+  { id: 'registration', label: t('freeModels.registration') },
+  { id: 'usage', label: t('freeModels.usage') },
+  { id: 'tips', label: t('freeModels.tips') },
+])
+
+const apiUrl = computed(() => {
+  if (import.meta.env.DEV) {
+    return '/api/proxy'
+  } else {
+    return '/api/blues'
+  }
+})
+
+// 当前 provider 的模型列表（来自数据库）
+const providerModels = computed(() => {
+  return dbModels.value.filter(m => m.provider === activeId.value)
+})
+
+// 合并数据库模型和测速数据
+const tableData = computed(() => {
+  return providerModels.value.map(m => {
+    const tested = speedResults.value.find(r => r.model === m.model)
+    const isTested = !!tested?.testedAt
+    return {
+      name: m.model,
+      provider: m.provider,
+      context: m.contextWindow || '-',
+      apiKeyEnv: tested?.apiKeyEnv || m.apiKeyEnv || '-',
+      isTested,
+      available: tested?.available ?? false,
+      ttftMs: tested?.ttftMs ?? null,
+      e2eMs: tested?.e2eMs ?? null,
+      throughput: tested?.throughput ?? null,
+      codingScore: tested?.codingScore ?? null,
+      codingPassed: tested?.codingPassed ?? null,
+      codingTotal: tested?.codingTotal ?? null,
+      testedAt: tested?.testedAt ?? null,
+      errorMsg: tested?.errorMsg ?? null,
+      description: m.description || '-',
+    }
+  })
+})
+
+const registrationSteps = computed(() => activeProvider.value.registration || [])
+const tipsItems = computed(() => activeProvider.value.tips || [])
+
+function selectProvider(p) {
+  activeId.value = p.id
+  activeProvider.value = p
+  activeSubTab.value = 'apiSpec'
+  const models = dbModels.value.filter(m => m.provider === p.id)
+  selectedModel.value = models[0]?.model || ''
+  fetchApiKey(p.id)
+}
+
+// 获取数据库模型列表
+async function fetchDbModels() {
+  try {
+    const res = await axios.get('/api/admin/')
+    dbModels.value = res.data.models || []
+    const models = dbModels.value.filter(m => m.provider === activeId.value)
+    selectedModel.value = models[0]?.model || ''
+  } catch (error) {
+    console.error('Failed to fetch models:', error)
+  }
+}
+
+// 获取 provider 的 API key
+async function fetchApiKey(provider) {
+  try {
+    const res = await axios.get(`/api/speed/apikey/${provider}`)
+    inputApiKey.value = res.data.apiKey || ''
+  } catch (error) {
+    console.error('Failed to fetch API key:', error)
+    inputApiKey.value = ''
+  }
+}
+
+// 获取测速结果
+async function fetchSpeedResults() {
+  isLoading.value = true
+  try {
+    const res = await axios.get('/api/speed/latest')
+    speedResults.value = res.data.results || []
+    lastTested.value = res.data.lastTested
+  } catch (error) {
+    console.error('Failed to fetch speed results:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 手动触发测速
+async function triggerSpeedTest() {
+  try {
+    await axios.post('/api/speed/run')
+    await fetchSpeedResults()
+  } catch (error) {
+    console.error('Failed to trigger speed test:', error)
+  }
+}
+
+// 格式化时间
+function formatTime(isoString) {
+  if (!isoString) return '-'
+  const date = new Date(isoString)
+  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+}
+
+// 格式化吞吐率
+function formatThroughput(value) {
+  if (value === null || value === undefined) return '-'
+  return `${value} t/s`
+}
+
+// 格式化编码分数
+function formatCodingScore(passed, total, score) {
+  if (score === null || score === undefined) return '-'
+  return `${passed}/${total} (${score}分)`
+}
+
+function openChatDrawer() {
+  if (!inputApiKey.value.trim()) {
+    return
+  }
+  drawerVisible.value = true
+}
+
+function closeChatDrawer() {
+  drawerVisible.value = false
+}
+
+function startNewSession() {
+  if (chatBoxRef.value) {
+    chatBoxRef.value.clearMessages()
+  }
+}
+
+onMounted(() => {
+  fetchDbModels()
+  fetchSpeedResults()
+  fetchApiKey(freeModelProviders[0].id)
+})
+</script>
+
+<template>
+  <div class="models-page">
+    <PageHeader
+      :title="$t('freeModels.pageTitle')"
+      :description="$t('freeModels.pageDesc')"
+    />
+
+    <el-tabs v-model="activeId" @tab-change="selectProvider(freeModelProviders.find(p => p.id === activeId))">
+      <el-tab-pane
+        v-for="p in freeModelProviders"
+        :key="p.id"
+        :name="p.id"
+      >
+        <template #label>
+          <span>{{ p.name }}</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div v-if="activeProvider" class="provider-detail">
+      <div class="provider-header">
+        <h2 class="provider-name">{{ activeProvider.name }}</h2>
+        <el-tag type="success">{{ activeProvider.badge }}</el-tag>
+      </div>
+      <p class="provider-tagline">{{ activeProvider.tagline }}</p>
+      <p class="provider-description">{{ activeProvider.description }}</p>
+
+      <el-tabs v-model="activeSubTab" class="sub-tabs">
+        <el-tab-pane :label="subTabs[0].label" name="apiSpec">
+          <DetailBlock :title="$t('freeModels.apiSpec')">
+            <div v-if="providerModels.length > 0" class="api-spec-item">
+              <h4>{{ $t('freeModels.openaiStyle') }}</h4>
+              <div class="spec-row">
+                <span class="spec-label">{{ $t('freeModels.baseUrl') }}:</span>
+                <code class="spec-value">{{ providerModels[0]?.baseUrl }}</code>
+              </div>
+              <div class="spec-row">
+                <span class="spec-label">{{ $t('freeModels.apiKey') }}:</span>
+                <code class="spec-value">{{ inputApiKey || '(从环境变量读取)' }}</code>
+              </div>
+            </div>
+            <div v-if="activeProvider.apiSpec.anthropic" class="api-spec-item">
+              <h4>{{ $t('freeModels.anthropicStyle') }}</h4>
+              <div class="spec-row">
+                <span class="spec-label">{{ $t('freeModels.baseUrl') }}:</span>
+                <code class="spec-value">{{ activeProvider.apiSpec.anthropic.baseUrl }}</code>
+              </div>
+              <div class="spec-row">
+                <span class="spec-label">{{ $t('freeModels.apiKey') }}:</span>
+                <code class="spec-value">{{ activeProvider.apiSpec.anthropic.apiKey }}</code>
+              </div>
+            </div>
+            <div v-if="!activeProvider.apiSpec.openai && !activeProvider.apiSpec.anthropic" class="no-spec">
+              <p>暂无 API 规格信息</p>
+            </div>
+          </DetailBlock>
+
+          <DetailBlock :title="$t('freeModels.apiTest')" style="margin-top: 24px;">
+            <div class="try-model-form">
+              <div class="try-model-row">
+                <el-select v-model="selectedModel" :placeholder="$t('freeModels.selectModel')" style="width: 220px;">
+                  <el-option
+                    v-for="model in providerModels"
+                    :key="model.id"
+                    :label="model.model"
+                    :value="model.model"
+                  />
+                </el-select>
+                
+                <el-input
+                  v-model="inputApiKey"
+                  :placeholder="$t('freeModels.inputApiKey')"
+                  type="password"
+                  show-password
+                />
+                
+                <el-button
+                  type="primary"
+                  @click="openChatDrawer"
+                  :disabled="!inputApiKey.trim()"
+                >
+                  {{ $t('freeModels.startChat') }}
+                </el-button>
+              </div>
+              
+              <p class="api-hint">{{ $t('freeModels.apiHint') }}</p>
+            </div>
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[1].label" name="models">
+          <DetailBlock :title="$t('freeModels.modelList')">
+            <div class="test-info">
+              <span v-if="lastTested" class="test-time">
+                最后测试: {{ formatTime(lastTested) }}
+              </span>
+              <el-button size="small" @click="fetchSpeedResults" :loading="isLoading">
+                刷新
+              </el-button>
+            </div>
+            
+            <el-table :data="tableData" border stripe v-loading="isLoading">
+              <el-table-column prop="provider" :label="$t('freeModels.tableColumns.provider')" width="120" />
+              <el-table-column prop="name" :label="$t('freeModels.tableColumns.name')" min-width="200" />
+              <el-table-column prop="context" :label="$t('freeModels.tableColumns.context')" width="120" />
+              <el-table-column prop="apiKeyEnv" label="环境变量" width="180">
+                <template #default="scope">
+                  <code v-if="scope.row.apiKeyEnv !== '-'" class="env-var">{{ scope.row.apiKeyEnv }}</code>
+                  <span v-else>-</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('freeModels.tableColumns.available')" width="80">
+                <template #default="scope">
+                  <span v-if="!scope.row.isTested">-</span>
+                  <el-tag v-else :type="scope.row.available ? 'success' : 'danger'" size="small">
+                    {{ scope.row.available ? '✓' : '✗' }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="状态信息" min-width="200">
+                <template #default="scope">
+                  <span v-if="scope.row.errorMsg" class="error-msg">{{ scope.row.errorMsg }}</span>
+                  <span v-else-if="scope.row.isTested" class="success-msg">OK</span>
+                  <span v-else>-</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('freeModels.tableColumns.ttft')" width="100">
+                <template #default="scope">
+                  {{ scope.row.ttftMs ? `${scope.row.ttftMs}ms` : '-' }}
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('freeModels.tableColumns.throughput')" width="100">
+                <template #default="scope">
+                  {{ formatThroughput(scope.row.throughput) }}
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('freeModels.tableColumns.coding')" width="120">
+                <template #default="scope">
+                  {{ formatCodingScore(scope.row.codingPassed, scope.row.codingTotal, scope.row.codingScore) }}
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('freeModels.tableColumns.testedAt')" width="80">
+                <template #default="scope">
+                  {{ formatTime(scope.row.testedAt) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="description" :label="$t('freeModels.tableColumns.note')" min-width="150" />
+            </el-table>
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[2].label" name="registration">
+          <DetailBlock :title="$t('freeModels.registration')">
+            <StepList :steps="registrationSteps" small linkable />
+          </DetailBlock>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[3].label" name="usage">
+          <div class="usage-section">
+            <DetailBlock :title="$t('freeModels.usageCurl')">
+              <CodeBlock :code="activeProvider.usageCurl" :copy-text="activeProvider.usageCurlCopy[os]" lang="bash" filename="terminal" />
+            </DetailBlock>
+            <DetailBlock :title="$t('freeModels.usageConfig')">
+              <CodeBlock :code="activeProvider.usageConfig" lang="json" :filename="activeProvider.usageFilename" />
+            </DetailBlock>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane :label="subTabs[4].label" name="tips">
+          <DetailBlock :title="$t('freeModels.tips')">
+            <CheckList :items="tipsItems" />
+          </DetailBlock>
+        </el-tab-pane>
+      </el-tabs>
+
+      <DetailBlock :title="$t('freeModels.relatedLinks')">
+        <LinkList :links="activeProvider.links" />
+      </DetailBlock>
+    </div>
+
+    <!-- 抽屉式对话框 -->
+    <el-drawer
+      v-model="drawerVisible"
+      :title="$t('freeModels.chatTitle')"
+      direction="rtl"
+      size="500px"
+      :before-close="closeChatDrawer"
+    >
+      <template #header>
+        <div class="drawer-header">
+          <span class="drawer-title">{{ $t('freeModels.chatTitle') }}</span>
+          <el-button @click="startNewSession" size="small">
+            {{ $t('freeModels.newSession') }}
+          </el-button>
+        </div>
+      </template>
+      
+      <ChatBox
+        v-if="drawerVisible && providerModels.length > 0"
+        ref="chatBoxRef"
+        :base-url="providerModels[0]?.baseUrl"
+        :api-key="inputApiKey"
+        :model="selectedModel"
+        :provider="activeId"
+        :placeholder="$t('freeModels.tryModelPlaceholder')"
+        :use-proxy="activeId === 'bluesliu'"
+      />
+    </el-drawer>
+  </div>
+</template>
+
+<style scoped>
+.provider-detail {
+  margin-top: 16px;
+}
+.provider-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.provider-name {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+.provider-tagline {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+.provider-description {
+  margin: 0 0 24px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--el-text-color-primary);
+}
+.sub-tabs {
+  margin-bottom: 24px;
+}
+.usage-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.api-spec-item {
+  margin-bottom: 24px;
+}
+.api-spec-item h4 {
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.api-spec-item:not(:last-child) {
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--el-border-color-light);
+}
+.spec-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.spec-label {
+  min-width: 100px;
+  font-weight: 500;
+  color: var(--el-text-color-regular);
+}
+.spec-value {
+  padding: 4px 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 13px;
+}
+.no-spec {
+  text-align: center;
+  padding: 24px;
+  color: var(--el-text-color-secondary);
+}
+.try-model-form {
+  max-width: 100%;
+}
+.try-model-section {
+  max-width: 100%;
+}
+.api-hint {
+  margin-top: 12px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.5;
+}
+.try-model-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.try-model-row .el-input {
+  flex: 1;
+}
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+.drawer-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+.test-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.test-time {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+.env-var {
+  padding: 2px 6px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 11px;
+}
+.error-msg {
+  color: var(--el-color-danger);
+  font-size: 12px;
+}
+.success-msg {
+  color: var(--el-color-success);
+  font-size: 12px;
+}
+</style>