feat: 核心模块增强 — 加密 + 运行时配置 + 日志缓冲

- crypto.py: API Key 加密/解密工具 - runtime_config.py: 运行时动态配置管理 - log_buffer.py: 内存日志缓冲区 - config.py: 新增加密配置项 - http_client.py: 增强重试和错误处理
2026-09-19 11:58:03 +08:00
parent b3e2c52b49
commit 786f10aa11
57 changed files with 3178 additions and 488 deletions
@@ -0,0 +1,153 @@
+/**
+ * Admin 后台 - 系统日志页面(报刊风)
+ *
+ * 查看应用运行日志(内存缓冲,最新在前):
+ * - 级别筛选 + 关键字搜索
+ * - 自动刷新(10s)可开关
+ * - 缓冲上限 2000 条,进程重启后清零
+ */
+
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { fetchLogs } from '../dal'
+import type { LogEntry } from '../types'
+import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
+
+const LEVELS = ['', 'INFO', 'WARNING', 'ERROR'] as const
+
+const LEVEL_BADGE: Record<string, { status: 'success' | 'info' | 'warning' | 'error'; text: string }> = {
+  DEBUG: { status: 'info', text: 'DEBUG' },
+  INFO: { status: 'info', text: 'INFO' },
+  WARNING: { status: 'warning', text: 'WARN' },
+  ERROR: { status: 'error', text: 'ERROR' },
+  CRITICAL: { status: 'error', text: 'FATAL' },
+}
+
+function fmtTs(ts: number): string {
+  return new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false })
+}
+
+export default function LogsPage() {
+  const [entries, setEntries] = useState<LogEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [level, setLevel] = useState<string>('')
+  const [keyword, setKeyword] = useState('')
+  const [autoRefresh, setAutoRefresh] = useState(true)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      const d = await fetchLogs({ level: level || undefined, keyword: keyword || undefined, limit: 300 })
+      setEntries(d.entries)
+      setError('')
+    } catch (err) {
+      setError(err instanceof Error ? err.message.split('\n')[0] : '加载失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [level, keyword])
+
+  // 筛选条件变化 → 立即拉取
+  useEffect(() => {
+    load()
+  }, [load])
+
+  // 自动刷新
+  useEffect(() => {
+    if (timerRef.current) clearInterval(timerRef.current)
+    if (autoRefresh) {
+      timerRef.current = setInterval(load, 10_000)
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [autoRefresh, load])
+
+  return (
+    <div className="space-y-6">
+      <SectionHeader
+        title="系统日志"
+        description="应用运行日志(登录、配置变更、采集、预测、异常等)。内存缓冲最近 2000 条,重启后清零。"
+      />
+
+      {error && <Alert kind="error" title="无法加载日志" message={error} />}
+
+      <Card>
+        <CardHeader
+          title="日志查看"
+          description={entries.length > 0 ? `显示最新 ${entries.length} 条` : undefined}
+          action={
+            <div className="flex items-center gap-2">
+              <label className="flex cursor-pointer items-center gap-1.5 text-2xs text-ink-500">
+                <input
+                  type="checkbox"
+                  checked={autoRefresh}
+                  onChange={e => setAutoRefresh(e.target.checked)}
+                  className="accent-current"
+                />
+                10s 自动刷新
+              </label>
+              <button onClick={load} disabled={loading} className="btn btn-sm">
+                {loading ? (<><Spinner /> 加载中</>) : '刷新'}
+              </button>
+            </div>
+          }
+        />
+        <CardBody className="px-0 sm:px-0">
+          {/* 筛选栏 */}
+          <div className="flex flex-col gap-2 border-b border-ink-200 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+            <div className="flex flex-wrap gap-1.5">
+              {LEVELS.map(lv => (
+                <button
+                  key={lv || 'all'}
+                  onClick={() => setLevel(lv)}
+                  className={`btn btn-sm ${level === lv ? 'btn-solid' : ''}`}
+                >
+                  {lv || '全部'}
+                </button>
+              ))}
+            </div>
+            <input
+              value={keyword}
+              onChange={e => setKeyword(e.target.value)}
+              placeholder="搜索关键字(消息 / logger)…"
+              className="field w-full sm:w-64"
+            />
+          </div>
+
+          {/* 日志列表 */}
+          {loading && entries.length === 0 ? (
+            <div className="space-y-2 px-4 py-3 sm:px-5">
+              {[1, 2, 3, 4, 5].map(i => <SkeletonBlock key={i} className="h-8 w-full" />)}
+            </div>
+          ) : entries.length === 0 ? (
+            <p className="py-10 text-center text-xs text-ink-400">暂无匹配的日志</p>
+          ) : (
+            <div>
+              {entries.map((e, i) => {
+                const badge = LEVEL_BADGE[e.level] ?? { status: 'info' as const, text: e.level }
+                return (
+                  <div
+                    key={`${e.ts}-${i}`}
+                    className="flex flex-col gap-0.5 border-b border-ink-200 px-4 py-2 last:border-b-0 sm:flex-row sm:items-baseline sm:gap-3 sm:px-5"
+                  >
+                    <span className="w-40 flex-shrink-0 text-2xs tabular-nums text-ink-400">{fmtTs(e.ts)}</span>
+                    <span className="w-14 flex-shrink-0">
+                      <Badge status={badge.status}>{badge.text}</Badge>
+                    </span>
+                    <span className="w-40 flex-shrink-0 truncate font-mono text-2xs text-ink-400" title={e.logger}>
+                      {e.logger}
+                    </span>
+                    <span className="min-w-0 flex-1 break-all font-mono text-2xs leading-relaxed text-ink-800">
+                      {e.message}
+                    </span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  )
+}