显示关键词缓存

src/api.js

@@ -104,3 +104,10 @@ export async function fetchUrlKeywords(url) {
   return data
 }
 
+export async function fetchUrlKeywordsStats() {
+  const { data } = await axios.get(`${BASE}/admin/url/keywords/stats`, {
+    timeout: 5000,
+  })
+  return data
+}
+

src/views/RecentCrawls.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, onUnmounted, computed } from 'vue'
-import { fetchRecent, fetchUrlKeywords } from '../api.js'
+import { fetchRecent, fetchUrlKeywords, fetchUrlKeywordsStats } from '../api.js'
 
 const items = ref([])
 const total = ref(0)
@@ -18,6 +18,9 @@ const expandedUrls = ref(new Set())
 const urlKeywords = ref({})
 const loadingKeywords = ref(new Set())
 
+// 关键词缓存统计
+const keywordsStats = ref({ size: 0, max_size: 10000, usage: 0 })
+
 onMounted(async () => {
   await load()
 })
@@ -26,9 +29,13 @@ async function load() {
   loading.value = true
   error.value = null
   try {
-    const data = await fetchRecent(limit.value)
+    const [data, stats] = await Promise.all([
+      fetchRecent(limit.value),
+      fetchUrlKeywordsStats().catch(() => ({ size: 0, max_size: 10000, usage: 0 }))
+    ])
     items.value = data.items || []
     total.value = data.total || 0
+    keywordsStats.value = stats
   } catch (e) {
     error.value = '无法加载数据，可能人服务器未启动'
     console.error(e)
@@ -121,6 +128,37 @@ async function toggleKeywords(url) {
         <p class="text-sm text-gray-500">共 {{ total.toLocaleString() }} 条记录</p>
       </div>
       <div class="flex items-center gap-2 md:gap-3">
+        <!-- 关键词缓存统计卡片 -->
+        <div class="bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 flex items-center gap-2">
+          <div class="flex flex-col">
+            <span class="text-[10px] text-gray-500 uppercase">关键词缓存</span>
+            <span class="text-sm font-medium text-gray-300">
+              {{ keywordsStats.size.toLocaleString() }} / {{ keywordsStats.max_size.toLocaleString() }}
+            </span>
+          </div>
+          <div class="w-12 h-8 relative">
+            <svg viewBox="0 0 36 36" class="w-full h-full transform -rotate-90">
+              <path
+                class="text-gray-800"
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="4"
+              />
+              <path
+                :class="keywordsStats.usage > 0.9 ? 'text-red-500' : keywordsStats.usage > 0.7 ? 'text-yellow-500' : 'text-green-500'"
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="4"
+                :stroke-dasharray="`${(keywordsStats.usage * 100).toFixed(0)}, 100`"
+              />
+            </svg>
+            <span class="absolute inset-0 flex items-center justify-center text-[8px] font-medium text-gray-400">
+              {{ (keywordsStats.usage * 100).toFixed(0) }}%
+            </span>
+          </div>
+        </div>
         <select
           v-model="limit"
           @change="changeLimit(limit)"