feat(v3): Web 应用化基线（异步任务/SSE/llama-server 管理/Vue SPA 四页 + 设置页整页滚动修复）

2026-09-01 08:31:47 +08:00
parent 8d36eeec59
commit 3bbdcb7cc7
60 changed files with 7236 additions and 1160 deletions
@@ -0,0 +1,171 @@
+<template>
+  <div class="metrics-view">
+    <header class="metrics-header">
+      <h2>系统指标</h2>
+      <button class="refresh" @click="load">🔄 刷新</button>
+    </header>
+
+    <div v-if="loading" class="loading">加载中…</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+
+    <template v-else-if="data">
+      <!-- 卡片网格 -->
+      <div class="card-grid">
+        <div class="metric-card">
+          <h3>路由器（v1）</h3>
+          <div class="kv-list">
+            <template v-for="(v, k) in data.router" :key="k">
+              <span>{{ k }}</span><b>{{ v }}</b>
+            </template>
+          </div>
+        </div>
+
+        <div class="metric-card">
+          <h3>缓存</h3>
+          <div class="kv-list">
+            <template v-for="(v, k) in data.cache" :key="k">
+              <span>{{ k }}</span><b>{{ v }}</b>
+            </template>
+          </div>
+        </div>
+
+        <div v-if="data.v2" class="metric-card highlight">
+          <h3>协作管线（v2）</h3>
+          <div class="kv-list">
+            <template v-for="(v, k) in data.v2" :key="k">
+              <span>{{ k }}</span><b>{{ v }}</b>
+            </template>
+          </div>
+        </div>
+
+        <div v-if="data.review" class="metric-card review-card">
+          <h3>人工检验</h3>
+          <div class="review-stats">
+            <div class="stat-item">
+              <span class="stat-num">{{ data.review.pending }}</span>
+              <span class="stat-label">待审核</span>
+            </div>
+            <div class="stat-item">
+              <span class="stat-num">{{ data.review.total }}</span>
+              <span class="stat-label">总提交</span>
+            </div>
+          </div>
+          <div v-if="data.review.total > 0" class="progress-wrap">
+            <div
+              class="reviewed-bar"
+              :style="{
+                width: `${((data.review.total - data.review.pending) / data.review.total) * 100}%`,
+              }"
+            />
+          </div>
+          <p class="review-rate">
+            通过率：
+            {{ (((data.review.total - data.review.pending) / data.review.total) * 100).toFixed(1) }}%
+          </p>
+        </div>
+      </div>
+
+      <!-- 原始 JSON -->
+      <details class="raw-json">
+        <summary>原始 JSON</summary>
+        <pre>{{ JSON.stringify(data, null, 2) }}</pre>
+      </details>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getMetrics } from '@/api'
+import type { Metrics } from '@/types'
+
+const data = ref<Metrics | null>(null)
+const loading = ref(false)
+const error = ref('')
+
+async function load() {
+  loading.value = true
+  error.value = ''
+  try {
+    data.value = await getMetrics()
+  } catch (e: unknown) {
+    // 网络超时或服务端错误：显示友好错误而不是无限 loading
+    error.value = e instanceof Error ? e.message : '指标加载失败，请检查后端服务'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<style scoped>
+.metrics-view { padding: 20px 24px; height: 100%; overflow-y: auto; }
+
+.metrics-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.metrics-header h2 { margin: 0; font-size: 20px; }
+.refresh { padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; background: #fff; }
+
+.loading, .error { text-align: center; padding: 40px; color: #9ca3af; }
+.error { color: #dc2626; }
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.metric-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 16px;
+}
+.metric-card.highlight { border-color: #2563eb; background: #eff6ff; }
+.metric-card h3 { margin: 0 0 12px; font-size: 14px; color: #374151; }
+
+.kv-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 12px;
+  font-size: 13px;
+}
+.kv-list span { color: #6b7280; }
+.kv-list b { color: #111; text-align: right; }
+
+.review-card { grid-column: span 2; }
+.review-stats { display: flex; gap: 24px; margin-bottom: 12px; }
+.stat-item { display: flex; flex-direction: column; align-items: center; }
+.stat-num { font-size: 28px; font-weight: 700; color: #2563eb; }
+.stat-label { font-size: 12px; color: #6b7280; }
+
+.progress-wrap {
+  height: 8px;
+  background: #e5e7eb;
+  border-radius: 99px;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+.reviewed-bar { height: 100%; background: #16a34a; transition: width 0.5s ease; }
+.review-rate { font-size: 13px; color: #6b7280; margin: 0; }
+
+.raw-json {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+.raw-json summary { padding: 10px 14px; cursor: pointer; font-size: 13px; color: #6b7280; }
+.raw-json pre {
+  padding: 10px 14px;
+  margin: 0;
+  font-size: 12px;
+  white-space: pre-wrap;
+  border-top: 1px solid #e5e7eb;
+}
+</style>