添加新功能，完善项目

2026-10-07 22:06:38 +08:00 · 2026-09-22 16:22:29 +08:00
parent 47899284a5
commit b5ce4646cf
85 changed files with 7103 additions and 982 deletions
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { Activity } from 'lucide-react'
+
+import { statsAPI, type TopUserEntry } from '../api/stats'
+import type { User } from '../types'
+
+// ActiveUsersStrip 在用户管理页顶部展示播放次数最多的几个账号。
+//
+// 只做展示与定位，不做筛选：管理员关心的是「谁在用」，点一下滚动到该用户
+// 行即可继续原来的操作。非管理员拿到 403 时静默隐藏，避免出现红色报错条。
+export function ActiveUsersStrip({ users }: { users: User[] }) {
+  const [top, setTop] = useState<TopUserEntry[]>([])
+
+  useEffect(() => {
+    let cancelled = false
+    statsAPI
+      .topUsers(5)
+      .then((rows) => {
+        if (!cancelled) setTop(rows)
+      })
+      .catch(() => {
+        if (!cancelled) setTop([])
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (top.length === 0) return null
+
+  const knownIDs = new Set(users.map((u) => u.id))
+
+  const focusUser = (userID: string) => {
+    const row = document.getElementById(`admin-user-${userID}`)
+    if (row) {
+      row.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  }
+
+  return (
+    <section className="glass-panel">
+      <div className="flex flex-wrap items-center gap-3">
+        <span className="flex items-center gap-1.5 text-xs font-semibold text-ink-100">
+          <Activity size={14} className="text-brand-500" />
+          活跃用户 Top {top.length}
+        </span>
+        <div className="flex flex-wrap items-center gap-2">
+          {top.map((entry) => {
+            // 已删除的账号仍会出现在历史统计里，此时不可点击。
+            const exists = knownIDs.has(entry.user_id)
+            return (
+              <button
+                key={entry.user_id}
+                type="button"
+                disabled={!exists}
+                onClick={() => focusUser(entry.user_id)}
+                title={exists ? '定位到该用户' : '该账号已不存在'}
+                className="rounded-xl border border-sand-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-ink-600 transition-colors enabled:hover:border-brand-300 enabled:hover:text-brand-600 disabled:opacity-50"
+              >
+                {entry.username || entry.user_id}
+                <span className="ml-1.5 font-mono text-[10px] text-sand-500">
+                  {entry.plays} 次
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}