feat: 抖音直播间弹幕监控 - Go+Wails 实现

后端:
- SQLite 数据层 (rooms/users/chat_logs/settings/error_logs)
- 抖音 WebSocket 抓取器 (proto 解析, 心跳, watchdog)
- __ac_signature 算法 (纯 Go 移植)
- a_bogus/sign.js 签名 (goja JS 引擎)
- Echo HTTP API 服务器 (端口 5000)
- SSE 事件广播
- 自动保活 + 授权守护
- PAYS 云授权对接

前端:
- 顶栏: 品牌 + 日志/调试/客户名单/授权/文档/房间控制/主题切换
- 添加直播间 (链接解析 + 关键词)
-  Dashboard (卡片/列表视图, 公开/匿名房筛选, 分页)
- 详情页 (多 tab 消息流, 右侧用户面板, 颜色标记, 精准客户, 已看标记)
- 精准客户名单 (跨房间汇总)
- 订阅授权页面 (登录/注册/购买)
- 使用帮助 + 系统调试
- 白昼/黑夜主题切换 (CSS 变量 + iconfont)
- 底部版权栏

frontend/src/App.tsx

@@ -0,0 +1,305 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { errorReporter } from './errorReporter'
+import Header from './components/Header'
+import Dashboard from './components/Dashboard'
+import DetailView from './components/DetailView'
+import LeadView from './components/LeadView'
+import LicenseView from './components/LicenseView'
+import DocView from './components/DocView'
+import DebugView from './components/DebugView'
+import { ICONS } from './constants'
+import { useLs } from './utils'
+import type { RoomData, SysState, LicenseState, Page, RoomMessage } from './types'
+
+errorReporter()
+
+const API = (path: string, init?: RequestInit) => fetch(`/api${path}`, init)
+
+function compactIcon(label: string, active: boolean, click: () => void) {
+  return (
+    <button className={`topbar-btn compact ${active ? 'active' : ''}`} onClick={click} title={label}>
+      {ICONS.room}
+    </button>
+  )
+}
+
+export default function App() {
+  const [theme, setTheme] = useLs<'light'|'dark'>('theme', 'dark')
+  const [rooms, setRooms] = useState<Record<string, RoomData>>({})
+  const [activeRoom, setActiveRoom] = useState<string | null>(null)
+  const [page, setPage] = useState<Page>('home')
+  const [sys, setSys] = useState<SysState>({ version: '', rooms_total: 0, running: 0, error_count: 0, uptime: 0 })
+  const [license, setLicense] = useState<LicenseState | null>(null)
+  const [focusUser, setFocusUser] = useState<string | null>(null)
+  const [logsOpen, setLogsOpen] = useState(false)
+  const [debugMode, setDebugMode] = useLs('debugMode', false)
+  const [viewMode, setViewMode] = useLs<'card'|'list'>('viewMode', 'card')
+  const [cardCols, setCardCols] = useLs('cardCols', 3)
+  const [listPerPage, setListPerPage] = useLs('listPerPage', 20)
+  const [filterKind, setFilterKind] = useState<'all'|'public'|'anon'>('all')
+  const [searchQuery, setSearchQuery] = useState('')
+  const msgIntervals = useRef<Record<string, ReturnType<typeof setInterval>>>({})
+
+  const needAuth = license && (license.state === 'unconfigured' || license.state === 'expired')
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme
+    if (theme === 'dark') {
+      ;(window as any).WindowSetDarkTheme?.()
+    } else {
+      ;(window as any).WindowSetLightTheme?.()
+    }
+  }, [theme])
+
+  useEffect(() => {
+    ;(window as any).WindowSetDebugMode?.(debugMode)
+  }, [debugMode])
+
+  // SSE
+  useEffect(() => {
+    const es = new EventSource('/stream')
+    es.onmessage = e => {
+      try {
+        const msg = JSON.parse(e.data)
+        if (msg.type === 'sys') setSys(msg.data)
+        else if (msg.type === 'room') {
+          setRooms(prev => ({ ...prev, [msg.data.id]: msg.data }))
+          if (msg.data.status === 'stopped' || msg.data.status === 'error') {
+            if (msgIntervals.current[msg.data.id]) {
+              clearInterval(msgIntervals.current[msg.data.id])
+              delete msgIntervals.current[msg.data.id]
+            }
+          }
+        }
+        else if (msg.type === 'msg') {
+          setRooms(prev => {
+            const r = prev[msg.room_id]
+            if (!r) return prev
+            const exists = r.messages.some(m => m.id === msg.data.id)
+            if (exists) return prev
+            return { ...prev, [msg.room_id]: { ...r, messages: [...r.messages, msg.data].slice(-500) } }
+          })
+        }
+        else if (msg.type === 'license') setLicense(msg.data)
+      } catch {}
+    }
+    es.onerror = () => es.close()
+    return () => es.close()
+  }, [])
+
+  // Message polling
+  useEffect(() => {
+    Object.keys(rooms).forEach(id => {
+      const r = rooms[id]
+      if (r.status === 'running' && !msgIntervals.current[id]) {
+        msgIntervals.current[id] = setInterval(() => {
+          API(`/api/rooms/${encodeURIComponent(id)}/msgs`).then(r => r.json()).then(data => {
+            setRooms(prev => {
+              const cur = prev[id]
+              if (!cur) return prev
+              const newMsgs = data.messages?.filter((m: RoomMessage) => !cur.messages.some(cm => cm.id === m.id)) || []
+              if (!newMsgs.length) return prev
+              return { ...prev, [id]: { ...cur, messages: [...cur.messages, ...newMsgs].slice(-500) } }
+            })
+          }).catch(() => {})
+        }, 2500)
+      }
+    })
+    return () => {
+      Object.values(msgIntervals.current).forEach(clearInterval)
+      msgIntervals.current = {}
+    }
+  }, [rooms])
+
+  // Load initial data
+  useEffect(() => {
+    Promise.all([API('/api/sys').then(r => r.json()).then(setSys), API('/api/license').then(r => r.json()).then(setLicense).catch(() => {}), API('/api/rooms').then(r => r.json()).then(setRooms)])
+  }, [])
+
+  const addRoom = useCallback(async (url: string) => {
+    if (needAuth) { setPage('license'); return }
+    try {
+      const res = await API('/api/rooms', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url }) })
+      const data = await res.json()
+      if (data.id) setRooms(prev => ({ ...prev, [data.id]: data }))
+    } catch (e) { console.error(e) }
+  }, [needAuth])
+
+  const toggleRoom = useCallback(async (id: string, action?: string) => {
+    if (needAuth && action === 'start') { setPage('license'); return }
+    try {
+      await API(`/api/rooms/${encodeURIComponent(id)}/${action || 'toggle'}`, { method: 'POST' })
+    } catch (e) { console.error(e) }
+  }, [needAuth])
+
+  const removeRoom = useCallback(async (id: string) => {
+    await API(`/api/rooms/${encodeURIComponent(id)}`, { method: 'DELETE' })
+    setRooms(prev => { const n = { ...prev }; delete n[id]; return n })
+    if (activeRoom === id) { setPage('home'); setActiveRoom(null) }
+  }, [activeRoom])
+
+  const setSeen = useCallback((roomId: string, msgId: string) => {
+    setRooms(prev => {
+      const r = prev[roomId]
+      if (!r) return prev
+      return { ...prev, [roomId]: { ...r, messages: r.messages.map(m => m.id === msgId ? { ...m, is_seen: true } : m) } }
+    })
+  }, [])
+
+  const setLead = useCallback((roomId: string, msgId: string, lead: boolean) => {
+    setRooms(prev => {
+      const r = prev[roomId]
+      if (!r) return prev
+      return { ...prev, [roomId]: { ...r, messages: r.messages.map(m => m.id === msgId ? { ...m, is_lead: lead } : m), lead_count: lead ? r.lead_count + 1 : Math.max(0, r.lead_count - 1) } }
+    })
+  }, [])
+
+  const setMark = useCallback((roomId: string, userId: string, mark: string) => {
+    setRooms(prev => {
+      const r = prev[roomId]
+      if (!r) return prev
+      return { ...prev, [roomId]: { ...r, messages: r.messages.map(m => m.user_id === userId ? { ...m, marked: mark } : m) } }
+    })
+  }, [])
+
+  const allRooms = Object.values(rooms)
+  const roomList = allRooms.filter(r => {
+    if (filterKind === 'public' && r.kind === 'anon') return false
+    if (filterKind === 'anon' && r.kind === 'public') return false
+    if (searchQuery && !r.title.toLowerCase().includes(searchQuery.toLowerCase()) && !r.anchor_id.toLowerCase().includes(searchQuery.toLowerCase())) return false
+    return true
+  })
+
+  const handleSetActive = (id: string) => {
+    setActiveRoom(id)
+    setPage('detail')
+  }
+
+  return (
+    <div className="app">
+      <TopBar
+        compact={false}
+        theme={theme} setTheme={setTheme}
+        logsOpen={logsOpen} setLogsOpen={setLogsOpen}
+        debugMode={debugMode} setDebugMode={setDebugMode}
+        roomCount={allRooms.length} runningCount={sys.running}
+        needAuth={needAuth}
+        onLeads={() => setPage('leads')}
+        onLicense={() => setPage('license')}
+        onDoc={() => setPage('doc')}
+        onDebug={() => setPage('debug')}
+        onStartAll={() => allRooms.filter(r=>r.status==='stopped').forEach(r=>toggleRoom(r.id,'start'))}
+        onStopAll={() => allRooms.filter(r=>r.status==='running').forEach(r=>toggleRoom(r.id,'stop'))}
+        onUser={() => {}}
+      />
+      <div className="app-content">
+        {page === 'home' && (
+          <Header
+            roomCount={roomList.length}
+            viewMode={viewMode} setViewMode={setViewMode}
+            cardCols={cardCols} setCardCols={setCardCols}
+            listPerPage={listPerPage} setListPerPage={setListPerPage}
+            filterKind={filterKind} setFilterKind={setFilterKind}
+            searchQuery={searchQuery} setSearchQuery={setSearchQuery}
+            needAuth={needAuth}
+            onLeads={() => setPage('leads')}
+            onLicense={() => setPage('license')}
+            onDoc={() => setPage('doc')}
+            onDebug={() => setPage('debug')}
+            onLogToggle={() => setLogsOpen(v => !v)}
+            onStartAll={() => allRooms.filter(r=>r.status==='stopped').forEach(r=>toggleRoom(r.id,'start'))}
+            onStopAll={() => allRooms.filter(r=>r.status==='running').forEach(r=>toggleRoom(r.id,'stop'))}
+          />
+        )}
+        {page === 'home' && (
+          <Dashboard
+            rooms={roomList}
+            viewMode={viewMode} cardCols={cardCols} listPerPage={listPerPage}
+            onAddRoom={addRoom}
+            onToggleRoom={toggleRoom}
+            onRemoveRoom={removeRoom}
+            onSetActive={handleSetActive}
+          />
+        )}
+        {page === 'detail' && activeRoom && (
+          <DetailView
+            room={rooms[activeRoom]}
+            focusUser={focusUser} setFocusUser={setFocusUser}
+            onBack={() => setPage('home')}
+            onSeen={setSeen}
+            onLead={setLead}
+            onMark={setMark}
+          />
+        )}
+        {page === 'leads' && <LeadView rooms={allRooms} />}
+        {page === 'license' && <LicenseView license={license} onBack={() => setPage('home')} />}
+        {page === 'doc' && <DocView />}
+        {page === 'debug' && <DebugView sys={sys} rooms={allRooms} />}
+      </div>
+      <div className="footer">
+        <span>青梧映星软件开发工作室</span>
+        <span>开发者: Geliebte</span>
+        <button className="footer-link" onClick={() => (window as any).BrowserOpenURL?.('https://yser.ging.plus/')}>客户服务中心</button>
+      </div>
+    </div>
+  )
+}
+
+interface TopBarProps {
+  compact: boolean
+  theme: 'light' | 'dark'
+  setTheme: (v: 'light'|'dark') => void
+  logsOpen: boolean
+  setLogsOpen: (v: boolean) => void
+  debugMode: boolean
+  setDebugMode: (v: boolean) => void
+  roomCount: number
+  runningCount: number
+  needAuth: boolean
+  onLeads: () => void
+  onLicense: () => void
+  onDoc: () => void
+  onDebug: () => void
+  onStartAll: () => void
+  onStopAll: () => void
+  onUser: () => void
+}
+
+function TopBar({ compact, theme, setTheme, logsOpen, debugMode, roomCount, runningCount, needAuth, onLeads, onLicense, onDoc, onDebug, onStartAll, onStopAll, onUser }: TopBarProps) {
+  if (compact) {
+    return (
+      <div className="topbar">
+        <button className="topbar-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} title="切换主题">
+          {theme === 'dark' ? '🌙' : '☀️'}
+        </button>
+        <button className="topbar-btn" onClick={onUser} title="用户">👤</button>
+      </div>
+    )
+  }
+  return (
+    <div className="topbar">
+      <div className="topbar-brand">
+        <span className="topbar-logo">🎬</span>
+        <span className="topbar-title">抖音直播间需求抓取</span>
+        <span className="room-count-top">{roomCount} 房 / {runningCount} 运行</span>
+      </div>
+      <div className="topbar-actions">
+        <button className="topbar-btn" onClick={onDebug} title="调试" style={{ display: debugMode ? '' : 'none' }}>🔧 调试</button>
+        <button className="topbar-btn" onClick={onLeads} title="客户名单">🎯 客户</button>
+        <button className="topbar-btn" onClick={onLicense} title="授权" style={needAuth ? { color: '#ff4d4f' } : {}}>{needAuth ? '⚠️ 授权' : '🔑 授权'}</button>
+        <button className="topbar-btn" onClick={onDoc} title="文档">📖 文档</button>
+        {runningCount > 0
+          ? <button className="topbar-btn topbar-stop" onClick={onStopAll}>⏹ 全部停止</button>
+          : roomCount > 0
+            ? <button className="topbar-btn topbar-start" onClick={onStartAll}>▶ 全部开始</button>
+            : null
+        }
+        <button className="topbar-btn" onClick={() => onDebug()} title="日志">📋 日志{logsOpen ? '🟢' : ''}</button>
+        <button className="topbar-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} title="切换主题">
+          {theme === 'dark' ? '🌙' : '☀️'}
+        </button>
+        <button className="topbar-btn" onClick={onUser} title="用户">👤</button>
+      </div>
+    </div>
+  )
+}

frontend/src/components/AddRoomBar.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import RoomTools from './RoomTools'
+
+interface AddRoomBarProps {
+  onAdd: (url: string) => void
+}
+
+export default function AddRoomBar({ onAdd }: AddRoomBarProps) {
+  const [url, setUrl] = useState('')
+  const [error, setError] = useState('')
+
+  const handleSubmit = async () => {
+    setError('')
+    const trimmed = url.trim()
+    if (!trimmed) { setError('请输入直播间URL'); return }
+    try {
+      await onAdd(trimmed)
+      setUrl('')
+    } catch (e: any) {
+      setError(e.message || '添加失败')
+    }
+  }
+
+  return (
+    <div className="add-bar">
+      <div className="add-input-wrap">
+        <input
+          className="add-input"
+          type="text"
+          placeholder="粘贴直播间URL或主播主页链接..."
+          value={url}
+          onChange={e => setUrl(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSubmit()}
+        />
+        <button className="add-btn" onClick={handleSubmit}>➕ 添加</button>
+      </div>
+      {error && <span className="add-error">{error}</span>}
+      <RoomTools />
+    </div>
+  )
+}

frontend/src/components/Dashboard.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useMemo } from 'react'
+import RoomCard from './RoomCard'
+import AddRoomBar from './AddRoomBar'
+import type { RoomData } from '../types'
+
+interface DashboardProps {
+  rooms: RoomData[]
+  viewMode: 'card' | 'list'
+  cardCols: number
+  listPerPage: number
+  onAddRoom: (url: string) => void
+  onToggleRoom: (id: string, action?: string) => void
+  onRemoveRoom: (id: string) => void
+  onSetActive: (id: string) => void
+}
+
+export default function Dashboard({ rooms, viewMode, cardCols, listPerPage, onAddRoom, onToggleRoom, onRemoveRoom, onSetActive }: DashboardProps) {
+  const [page, setPage] = useState(0)
+
+  const paginatedRooms = useMemo(() => {
+    if (viewMode === 'list') {
+      const start = page * listPerPage
+      return rooms.slice(start, start + listPerPage)
+    }
+    return rooms
+  }, [rooms, page, listPerPage, viewMode])
+
+  const totalPages = viewMode === 'list' ? Math.ceil(rooms.length / listPerPage) : 0
+
+  return (
+    <div className="dash-zone">
+      <AddRoomBar onAdd={onAddRoom} />
+      {viewMode === 'card' ? (
+        <div className="room-grid" style={{ gridTemplateColumns: `repeat(${cardCols}, 1fr)` }}>
+          {paginatedRooms.map(room => (
+            <RoomCard
+              key={room.id}
+              room={room}
+              onToggle={(a) => onToggleRoom(room.id, a)}
+              onRemove={() => onRemoveRoom(room.id)}
+              onDetail={() => onSetActive(room.id)}
+            />
+          ))}
+          {paginatedRooms.length === 0 && (
+            <div className="empty-state">
+              <p>暂无房间</p>
+              <p>在上方输入框添加直播间URL开始监控</p>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="room-list">
+          <table className="list-table">
+            <thead>
+              <tr>
+                <th>状态</th>
+                <th>房间</th>
+                <th>主播</th>
+                <th>类型</th>
+                <th>观众</th>
+                <th>消息</th>
+                <th>精准</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paginatedRooms.map(room => (
+                <tr key={room.id} className={`list-row ${room.status}`} onClick={() => onSetActive(room.id)}>
+                  <td><span className={`status-dot ${room.status}`} /></td>
+                  <td className="list-title">{room.title}</td>
+                  <td>{room.anchor_id}</td>
+                  <td><span className={`kind-badge ${room.kind}`}>{room.kind === 'public' ? '公开' : '匿名'}</span></td>
+                  <td>{room.viewers}</td>
+                  <td>{room.total_msg}</td>
+                  <td>{room.lead_count}</td>
+                  <td className="list-actions">
+                    <button className="list-btn start" onClick={e => { e.stopPropagation(); onToggleRoom(room.id, 'start') }}>▶</button>
+                    <button className="list-btn stop" onClick={e => { e.stopPropagation(); onToggleRoom(room.id, 'stop') }}>⏹</button>
+                    <button className="list-btn del" onClick={e => { e.stopPropagation(); onRemoveRoom(room.id) }}>✕</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {paginatedRooms.length === 0 && (
+            <div className="empty-state">
+              <p>暂无房间</p>
+              <p>在上方输入框添加直播间URL开始监控</p>
+            </div>
+          )}
+        </div>
+      )}
+      {totalPages > 1 && (
+        <div className="pagination">
+          <button className="page-btn" disabled={page === 0} onClick={() => setPage(p => p - 1)}>‹</button>
+          <span className="page-info">{page + 1} / {totalPages}</span>
+          <button className="page-btn" disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)}>›</button>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/DebugView.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect, useRef } from 'react'
+import type { SysState, RoomData } from '../types'
+
+interface DebugViewProps {
+  sys: SysState
+  rooms: RoomData[]
+}
+
+export default function DebugView({ sys, rooms }: DebugViewProps) {
+  const [logs, setLogs] = useState<string[]>([])
+  const [wsConnected, setWsConnected] = useState(false)
+  const logEndRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const es = new EventSource('/stream')
+    es.onmessage = e => {
+      const line = `[${new Date().toLocaleTimeString()}] ${e.data}`
+      setLogs(prev => [...prev.slice(-500), line])
+    }
+    es.onerror = () => setWsConnected(false)
+    es.onopen = () => setWsConnected(true)
+    return () => { es.close() }
+  }, [])
+
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [logs])
+
+  return (
+    <div className="debug-view">
+      <button className="back-btn" onClick={() => window.history.back()}>← 返回</button>
+      <h2>🔧 系统调试</h2>
+
+      <div className="debug-section">
+        <h3>系统状态</h3>
+        <div className="debug-grid">
+          <div className="debug-item"><span className="label">版本</span><span className="value">{sys.version || '未知'}</span></div>
+          <div className="debug-item"><span className="label">房间总数</span><span className="value">{sys.rooms_total}</span></div>
+          <div className="debug-item"><span className="label">运行中</span><span className="value running">{sys.running}</span></div>
+          <div className="debug-item"><span className="label">错误数</span><span className="value error">{sys.error_count}</span></div>
+          <div className="debug-item"><span className="label">运行时长</span><span className="value">{formatUptime(sys.uptime)}</span></div>
+          <div className="debug-item"><span className="label">WebSocket</span><span className={`value ${wsConnected ? 'connected' : 'disconnected'}`}>{wsConnected ? '已连接' : '未连接'}</span></div>
+        </div>
+      </div>
+
+      <div className="debug-section">
+        <h3>房间状态 ({rooms.length})</h3>
+        <div className="debug-grid">
+          {rooms.map(r => (
+            <div key={r.id} className={`debug-item room-item ${r.status}`}>
+              <span className="label">{r.anchor_id}</span>
+              <span className="value">{r.status} | 观众:{r.viewers} | 消息:{r.total_msg} | 精准:{r.lead_count}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="debug-section">
+        <h3>实时日志 <button className="clear-btn" onClick={() => setLogs([])}>清空</button></h3>
+        <div className="log-container">
+          {logs.length === 0 ? <div className="no-logs">暂无日志</div> : logs.map((l, i) => (
+            <div key={i} className="log-line">{l}</div>
+          ))}
+          <div ref={logEndRef} />
+        </div>
+      </div>
+
+      <div className="debug-section">
+        <h3>手动测试</h3>
+        <div className="test-actions">
+          <button onClick={async () => {
+            try {
+              const r = await fetch('/api/sys')
+              const d = await r.json()
+              setLogs(prev => [...prev, `[TEST] /api/sys: ${JSON.stringify(d)}`])
+            } catch (e) { setLogs(prev => [...prev, `[TEST] Error: ${e}`]) }
+          }}>测试 /api/sys</button>
+          <button onClick={async () => {
+            try {
+              const r = await fetch('/api/rooms')
+              const d = await r.json()
+              setLogs(prev => [...prev, `[TEST] /api/rooms: ${Object.keys(d).length} rooms`])
+            } catch (e) { setLogs(prev => [...prev, `[TEST] Error: ${e}`]) }
+          }}>测试 /api/rooms</button>
+          <button onClick={async () => {
+            try {
+              const r = await fetch('/api/license')
+              const d = await r.json()
+              setLogs(prev => [...prev, `[TEST] /api/license: ${JSON.stringify(d)}`])
+            } catch (e) { setLogs(prev => [...prev, `[TEST] Error: ${e}`]) }
+          }}>测试 /api/license</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function formatUptime(s: number): string {
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+  return `${h}h ${m}m ${sec}s`
+}

frontend/src/components/DetailView.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react'
+import { ICONS, TYPE_LABELS, MARKS, MARK_MAP } from '../constants'
+import { formatTime } from '../utils'
+import type { RoomData, RoomMessage } from '../types'
+
+interface DetailViewProps {
+  room: RoomData | undefined
+  focusUser: string | null
+  setFocusUser: (id: string | null) => void
+  onBack: () => void
+  onSeen: (roomId: string, msgId: string) => void
+  onLead: (roomId: string, msgId: string, lead: boolean) => void
+  onMark: (roomId: string, userId: string, mark: string) => void
+}
+
+export default function DetailView({ room, focusUser, setFocusUser, onBack, onSeen, onLead, onMark }: DetailViewProps) {
+  const [activeTab, setActiveTab] = useState('all')
+  const [markFilter, setMarkFilter] = useState<string>('')
+  const [showLeadOnly, setShowLeadOnly] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  if (!room) return <div className="detail-empty">房间不存在</div>
+
+  const tabs = ['all', 'chat', 'gift', 'enter', 'like', 'follow', 'stats', 'fansclub', 'rank', 'status', 'lead']
+
+  const filteredMsgs = useMemo(() => {
+    let msgs = room.messages
+    if (activeTab !== 'all') {
+      if (activeTab === 'lead') {
+        msgs = msgs.filter(m => m.is_lead)
+      } else {
+        msgs = msgs.filter(m => m.type === activeTab)
+      }
+    }
+    if (markFilter) {
+      msgs = msgs.filter(m => m.marked === markFilter)
+    }
+    if (focusUser) {
+      msgs = msgs.filter(m => m.user_id === focusUser)
+    }
+    return msgs
+  }, [room.messages, activeTab, markFilter, focusUser])
+
+  const userStats = useMemo(() => {
+    const map = new Map<string, { name: string; count: number; leads: number; msgs: RoomMessage[] }>()
+    room.messages.forEach(m => {
+      const existing = map.get(m.user_id)
+      if (existing) {
+        existing.count++
+        if (m.is_lead) existing.leads++
+      } else {
+        map.set(m.user_id, { name: m.username, count: 1, leads: m.is_lead ? 1 : 0, msgs: [m] })
+      }
+    })
+    return Array.from(map.values()).sort((a, b) => b.count - a.count)
+  }, [room.messages])
+
+  const scrollToBottom = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [filteredMsgs.length])
+
+  return (
+    <div className="detail-view">
+      <div className="detail-header">
+        <button className="back-btn" onClick={onBack}>← 返回</button>
+        <div className="detail-title">
+          <span className="detail-room-name">{room.title || room.anchor_id}</span>
+          <span className={`detail-status ${room.status}`}>{room.status === 'running' ? '● 直播中' : room.status === 'error' ? '✕ 错误' : '○ 已停止'}</span>
+        </div>
+        <div className="detail-stats">
+          <span>👁 {room.viewers}</span>
+          <span>💬 {room.total_msg}</span>
+          <span>🎯 {room.lead_count}</span>
+        </div>
+      </div>
+
+      <div className="detail-main">
+        <div className="detail-left">
+          <div className="tab-bar">
+            {tabs.map(tab => (
+              <button key={tab} className={`tab-btn ${activeTab === tab ? 'active' : ''}`} onClick={() => setActiveTab(tab)}>
+                {ICONS[tab as keyof typeof ICONS]} {TYPE_LABELS[tab] || tab}
+                {tab === 'all' && <span className="tab-count">{room.messages.length}</span>}
+                {tab === 'lead' && <span className="tab-count">{room.messages.filter(m => m.is_lead).length}</span>}
+              </button>
+            ))}
+          </div>
+
+          <div className="detail-filters">
+            <select value={markFilter} onChange={e => setMarkFilter(e.target.value)}>
+              <option value="">全部标记</option>
+              {MARKS.map(m => <option key={m.key} value={m.key}>{m.label}标记</option>)}
+            </select>
+            <label className="lead-filter">
+              <input type="checkbox" checked={showLeadOnly} onChange={e => setShowLeadOnly(e.target.checked)} />
+              仅看精准客户
+            </label>
+            {focusUser && (
+              <button className="clear-focus" onClick={() => setFocusUser(null)}>清除用户筛选 ({focusUser})</button>
+            )}
+          </div>
+
+          <div className="msg-container" ref={scrollRef}>
+            {filteredMsgs.length === 0 ? (
+              <div className="no-msgs">暂无消息</div>
+            ) : (
+              filteredMsgs.map(msg => (
+                <MsgCard
+                  key={msg.id}
+                  msg={msg}
+                  isLead={msg.is_lead}
+                  onFocus={() => setFocusUser(msg.user_id)}
+                  onSeen={() => onSeen(room.id, msg.id)}
+                  onLead={(v) => onLead(room.id, msg.id, v)}
+                  onMark={(v) => onMark(room.id, msg.user_id, v)}
+                />
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="detail-right">
+          <div className="user-panel">
+            <h3>👥 用户统计</h3>
+            <div className="user-list">
+              {userStats.slice(0, 50).map(u => (
+                <div key={u.name} className={`user-item ${focusUser === u.name ? 'focused' : ''} ${u.leads > 0 ? 'has-lead' : ''}`}>
+                  <div className="user-info">
+                    <span className="user-name" onClick={() => setFocusUser(focusUser === u.name ? null : u.name)}>{u.name}</span>
+                    <span className="user-count">{u.count}次</span>
+                  </div>
+                  <div className="user-actions">
+                    {u.leads > 0 && <span className="user-lead-count">🎯{u.leads}</span>}
+                    <select className="user-mark-select" value={MARKS.find(m => room.messages.some(mm => mm.user_id === (u.name)) && mm.marked === m.key)?.key || ''} onChange={e => {
+                      const userId = u.name
+                      onMark(room.id, userId, e.target.value || undefined)
+                    }}>
+                      <option value="">标记</option>
+                      {MARKS.map(m => <option key={m.key} value={m.key}>{m.label}</option>)}
+                    </select>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface MsgCardProps {
+  msg: RoomMessage
+  isLead: boolean
+  onFocus: () => void
+  onSeen: () => void
+  onLead: (v: boolean) => void
+  onMark: (v: string) => void
+}
+
+function MsgCard({ msg, isLead, onFocus, onSeen, onLead, onMark }: MsgCardProps) {
+  const typeIcon = ICONS[msg.type as keyof typeof ICONS] || ICONS.chat
+
+  return (
+    <div className={`msg-card ${msg.type} ${isLead ? 'lead' : ''} ${msg.marked ? `marked-${msg.marked}` : ''} ${msg.is_seen ? 'seen' : ''}`}>
+      <div className="msg-header">
+        <span className="msg-type">{typeIcon} {TYPE_LABELS[msg.type] || msg.type}</span>
+        <span className="msg-user" onClick={onFocus} title="点击筛选该用户">{msg.username}</span>
+        {msg.fans_level > 0 && <span className="msg-fans">⭐{msg.fans_level}</span>}
+        <span className="msg-time">{formatTime(msg.timestamp)}</span>
+      </div>
+      <div className="msg-body">
+        {msg.type === 'gift' && msg.gift_name && (
+          <span className="gift-info">{msg.gift_name} ×{msg.gift_num} ({msg.gift_price}抖币)</span>
+        )}
+        {msg.content && <span className="msg-text">{msg.content}</span>}
+      </div>
+      <div className="msg-actions">
+        <button className={`mark-btn ${msg.marked || ''}`} onClick={() => onMark(msg.marked === 'blue' ? '' : 'blue')}>蓝</button>
+        <button className={`mark-btn ${msg.marked || ''}`} onClick={() => onMark(msg.marked === 'red' ? '' : 'red')}>红</button>
+        <button className={`mark-btn ${msg.marked || ''}`} onClick={() => onMark(msg.marked === 'yellow' ? '' : 'yellow')}>黄</button>
+        <button className={`lead-btn ${isLead ? 'active' : ''}`} onClick={() => onLead(!isLead)}>{isLead ? '🎯已精准' : '🎯精准'}</button>
+        {!msg.is_seen && <button className="seen-btn" onClick={onSeen}>✓已看</button>}
+      </div>
+    </div>
+  )
+}

frontend/src/components/DocView.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+export default function DocView() {
+  return (
+    <div className="doc-view">
+      <button className="back-btn" onClick={() => window.history.back()}>← 返回</button>
+      <h2>📖 使用帮助</h2>
+
+      <div className="doc-section">
+        <h3>一、快速开始</h3>
+        <ol>
+          <li>在首页输入框粘贴直播间URL（支持抖音直播间分享链接或主播主页链接）</li>
+          <li>点击「添加」按钮，系统会自动解析并开始监控</li>
+          <li>在房间卡片上点击「▶」启动监控，或点击「全部开始」一键启动所有房间</li>
+        </ol>
+      </div>
+
+      <div className="doc-section">
+        <h3>二、房间操作</h3>
+        <ul>
+          <li><strong>启动/停止</strong>：点击卡片上的 ▶ / ⏹ 按钮，或鼠标悬停卡片显示控制按钮</li>
+          <li><strong>查看详情</strong>：点击卡片进入详情页，查看所有消息流</li>
+          <li><strong>删除房间</strong>：点击卡片右上角 ✕ 按钮</li>
+        </ul>
+      </div>
+
+      <div className="doc-section">
+        <h3>三、消息标记与精准客户</h3>
+        <ul>
+          <li><strong>颜色标记</strong>：在消息操作栏点击「蓝」「红」「黄」，可对用户进行颜色标记，便于识别不同需求的用户</li>
+          <li><strong>精准客户</strong>：点击消息的「🎯精准」按钮，将该用户标记为精准客户</li>
+          <li><strong>已看标记</strong>：点击「✓已看」标记消息已浏览</li>
+          <li><strong>用户筛选</strong>：点击详情页右侧用户列表中的用户名，可筛选仅显示该用户的消息</li>
+        </ul>
+      </div>
+
+      <div className="doc-section">
+        <h3>四、视图切换</h3>
+        <ul>
+          <li><strong>卡片视图</strong>：网格展示房间卡片，可通过列数选择器调整列数（2-5列）</li>
+          <li><strong>列表视图</strong>：表格展示房间列表，可通过每页条数选择器调整分页</li>
+          <li><strong>搜索过滤</strong>：在搜索框输入关键词，可按房间名或主播ID过滤</li>
+          <li><strong>类型过滤</strong>：点击「公开房」/「匿名房」按钮筛选房间类型</li>
+        </ul>
+      </div>
+
+      <div className="doc-section">
+        <h3>五、精准客户汇总</h3>
+        <p>点击顶部「🎯 客户」按钮进入客户名单页，查看所有房间的精准客户汇总，支持按房间筛选。</p>
+      </div>
+
+      <div className="doc-section">
+        <h3>六、主题切换</h3>
+        <p>点击顶栏 🌙/☀️ 按钮切换深色/浅色主题，主题偏好会自动保存。</p>
+      </div>
+
+      <div className="doc-section">
+        <h3>七、常见问题</h3>
+        <dl>
+          <dt>Q: 添加房间后显示「授权失效」？</dt>
+          <dd>A: 请点击顶栏「🔑 授权」按钮，输入授权码完成激活。</dd>
+          <dt>Q: 消息不实时更新？</dt>
+          <dd>A: 检查网络连接，如使用SSE连接失败会自动降级为轮询模式。</dd>
+          <dt>Q: 如何导出精准客户数据？</dt>
+          <dd>A: 在详情页点击精准客户筛选，右键复制消息内容，或联系开发者获取更多导出功能。</dd>
+        </dl>
+      </div>
+
+      <div className="doc-section">
+        <h3>八、技术支持</h3>
+        <p>如有问题请联系客户服务中心：https://yser.ging.plus/</p>
+      </div>
+    </div>
+  )
+}

frontend/src/components/Header.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { ICONS } from '../constants'
+import type { AppState } from '../types'
+
+interface HeaderProps {
+  roomCount: number
+  viewMode: 'card' | 'list'
+  setViewMode: (v: 'card' | 'list') => void
+  cardCols: number
+  setCardCols: (v: number) => void
+  listPerPage: number
+  setListPerPage: (v: number) => void
+  filterKind: 'all' | 'public' | 'anon'
+  setFilterKind: (v: 'all' | 'public' | 'anon') => void
+  searchQuery: string
+  setSearchQuery: (v: string) => void
+  needAuth: boolean
+  onLeads: () => void
+  onLicense: () => void
+  onDoc: () => void
+  onDebug: () => void
+  onLogToggle: () => void
+  onStartAll: () => void
+  onStopAll: () => void
+}
+
+export default function Header({
+  roomCount, viewMode, setViewMode, cardCols, setCardCols, listPerPage, setListPerPage,
+  filterKind, setFilterKind, searchQuery, setSearchQuery, needAuth,
+  onLeads, onLicense, onDoc, onDebug, onLogToggle, onStartAll, onStopAll
+}: HeaderProps) {
+  return (
+    <div className="header">
+      <div className="header-left">
+        <span className="room-count">{ICONS.room} {roomCount} 个房间</span>
+        <div className="filter-group">
+          <button className={`filter-btn ${filterKind === 'all' ? 'active' : ''}`} onClick={() => setFilterKind('all')}>全部</button>
+          <button className={`filter-btn ${filterKind === 'public' ? 'active' : ''}`} onClick={() => setFilterKind('public')}>公开房</button>
+          <button className={`filter-btn ${filterKind === 'anon' ? 'active' : ''}`} onClick={() => setFilterKind('anon')}>匿名房</button>
+        </div>
+        <input
+          className="search-input"
+          type="text"
+          placeholder="搜索房间/主播..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+        />
+      </div>
+      <div className="header-right">
+        <button className="view-toggle" onClick={onLeads} title="客户名单">🎯</button>
+        <button className={`view-toggle ${needAuth ? 'auth-warn' : ''}`} onClick={onLicense} title="授权">
+          {needAuth ? '⚠️' : '🔑'}
+        </button>
+        <button className="view-toggle" onClick={onDoc} title="文档">📖</button>
+        <button className="view-toggle" onClick={onDebug} title="调试">🔧</button>
+        <button className={`view-toggle ${viewMode === 'card' ? 'active' : ''}`} onClick={() => setViewMode('card')} title="卡片视图">🗂</button>
+        <button className={`view-toggle ${viewMode === 'list' ? 'active' : ''}`} onClick={() => setViewMode('list')} title="列表视图">☰</button>
+        {viewMode === 'card' ? (
+          <select className="col-select" value={cardCols} onChange={e => setCardCols(Number(e.target.value))}>
+            <option value={2}>2列</option>
+            <option value={3}>3列</option>
+            <option value={4}>4列</option>
+            <option value={5}>5列</option>
+          </select>
+        ) : (
+          <select className="col-select" value={listPerPage} onChange={e => setListPerPage(Number(e.target.value))}>
+            <option value={10}>10条/页</option>
+            <option value={20}>20条/页</option>
+            <option value={50}>50条/页</option>
+            <option value={100}>100条/页</option>
+          </select>
+        )}
+        <button className="action-btn start-btn" onClick={onStartAll}>▶ 全部开始</button>
+        <button className="action-btn stop-btn" onClick={onStopAll}>⏹ 全部停止</button>
+        <button className="view-toggle" onClick={onLogToggle} title="日志开关">📋</button>
+      </div>
+    </div>
+  )
+}

frontend/src/components/KindBadge.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+interface KindBadgeProps {
+  kind: 'public' | 'anon'
+}
+
+export default function KindBadge({ kind }: KindBadgeProps) {
+  return (
+    <span className={`kind-badge ${kind}`}>
+      {kind === 'public' ? '📢 公开' : '🎭 匿名'}
+    </span>
+  )
+}

frontend/src/components/LeadView.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react'
+import type { RoomData } from '../types'
+
+interface LeadViewProps {
+  rooms: RoomData[]
+}
+
+export default function LeadView({ rooms }: LeadViewProps) {
+  const leads = useMemo(() => {
+    const map = new Map<string, { name: string; room: string; msgs: { content: string; time: number; type: string }[] }>()
+    rooms.forEach(room => {
+      room.messages.filter(m => m.is_lead).forEach(msg => {
+        const existing = map.get(msg.user_id)
+        if (existing) {
+          existing.msgs.push({ content: msg.content, time: msg.timestamp, type: msg.type })
+        } else {
+          map.set(msg.user_id, { name: msg.username, room: room.title || room.anchor_id, msgs: [{ content: msg.content, time: msg.timestamp, type: msg.type }] })
+        }
+      })
+    })
+    return Array.from(map.values()).sort((a, b) => b.msgs.length - a.msgs.length)
+  }, [rooms])
+
+  return (
+    <div className="lead-view">
+      <h2>🎯 跨房间精准客户汇总</h2>
+      {leads.length === 0 ? (
+        <div className="empty-state"><p>暂无精准客户</p></div>
+      ) : (
+        <div className="lead-list">
+          {leads.map(lead => (
+            <div key={lead.name} className="lead-item">
+              <div className="lead-header">
+                <span className="lead-name">{lead.name}</span>
+                <span className="lead-room">{lead.room}</span>
+                <span className="lead-count">{lead.msgs.length}条精准消息</span>
+              </div>
+              <div className="lead-msgs">
+                {lead.msgs.slice(-10).reverse().map((m, i) => (
+                  <div key={i} className="lead-msg">
+                    <span className="lead-msg-type">{m.type}</span>
+                    <span className="lead-msg-content">{m.content}</span>
+                    <span className="lead-msg-time">{new Date(m.time).toLocaleTimeString()}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/LicenseView.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react'
+import { QRCodeSVG } from 'qrcode.react'
+import type { LicenseState } from '../types'
+
+interface LicenseViewProps {
+  license: LicenseState | null
+  onBack: () => void
+}
+
+export default function LicenseView({ license, onBack }: LicenseViewProps) {
+  const [step, setStep] = useState<'login' | 'scan' | 'activate'>('login')
+  const [token, setToken] = useState('')
+  const [status, setStatus] = useState('')
+
+  useEffect(() => {
+    if (license?.state === 'active') setStep('activate')
+    else if (license?.qrcode) setStep('scan')
+  }, [license])
+
+  const handleActivate = async () => {
+    if (!token.trim()) return
+    try {
+      const res = await fetch('/api/license/activate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: token.trim() })
+      })
+      const data = await res.json()
+      if (data.ok) {
+        setStatus('授权成功！')
+        setTimeout(onBack, 1500)
+      } else {
+        setStatus(data.error || '授权失败，请检查token')
+      }
+    } catch {
+      setStatus('网络错误，请重试')
+    }
+  }
+
+  return (
+    <div className="license-view">
+      <button className="back-btn" onClick={onBack}>← 返回</button>
+      <h2>🔑 订阅授权</h2>
+
+      {license?.state === 'active' ? (
+        <div className="license-active">
+          <div className="license-card">
+            <h3>✅ 授权有效</h3>
+            <p>计划: {license.plan}</p>
+            <p>有效期至: {license.expires_at ? new Date(license.expires_at).toLocaleDateString() : '永久'}</p>
+            <p>最大房间数: {license.max_rooms}</p>
+          </div>
+        </div>
+      ) : license?.state === 'expired' ? (
+        <div className="license-expired">
+          <p>⚠️ 授权已过期，请重新激活</p>
+          <ActivateForm token={token} setToken={setToken} status={status} onActivate={handleActivate} />
+        </div>
+      ) : (
+        <div className="license-unconfigured">
+          <p>🔒 尚未配置授权，请选择以下方式激活：</p>
+          <div className="license-steps">
+            <div className="step">
+              <h4>步骤 1: 登录/注册</h4>
+              <p>访问客户服务中心获取授权码</p>
+              <button className="open-url-btn" onClick={() => (window as any).BrowserOpenURL?.('https://yser.ging.plus/')}>
+                打开客户服务中心
+              </button>
+            </div>
+            <div className="step">
+              <h4>步骤 2: 输入授权码</h4>
+              <ActivateForm token={token} setToken={setToken} status={status} onActivate={handleActivate} />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {license?.qrcode && (
+        <div className="qrcode-wrap">
+          <h4>扫码激活</h4>
+          <QRCodeSVG value={license.qrcode} size={200} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ActivateForm({ token, setToken, status, onActivate }: {
+  token: string
+  setToken: (v: string) => void
+  status: string
+  onActivate: () => void
+}) {
+  return (
+    <div className="activate-form">
+      <input
+        className="token-input"
+        type="text"
+        placeholder="请输入授权码..."
+        value={token}
+        onChange={e => setToken(e.target.value)}
+        onKeyDown={e => e.key === 'Enter' && onActivate()}
+      />
+      <button className="activate-btn" onClick={onActivate}>激活授权</button>
+      {status && <span className="activate-status">{status}</span>}
+    </div>
+  )
+}

frontend/src/components/RoomCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import KindBadge from './KindBadge'
+import { ICONS, TYPE_LABELS } from '../constants'
+import type { RoomData } from '../types'
+
+interface RoomCardProps {
+  room: RoomData
+  onToggle: (action: 'start' | 'stop' | 'toggle') => void
+  onRemove: () => void
+  onDetail: () => void
+}
+
+export default function RoomCard({ room, onToggle, onRemove, onDetail }: RoomCardProps) {
+  const lastMsgs = room.messages.slice(-5)
+
+  return (
+    <div className={`room-card ${room.status}`}>
+      <div className="card-header">
+        <div className="card-title-wrap">
+          <KindBadge kind={room.kind} />
+          <span className="card-title" title={room.title}>{room.title || room.anchor_id}</span>
+        </div>
+        <div className="card-controls">
+          <button className="card-btn detail" onClick={onDetail} title="详情">🔍</button>
+          <button className={`card-btn ${room.status === 'running' ? 'stop' : 'start'}`} onClick={() => onToggle(room.status === 'running' ? 'stop' : 'start')} title={room.status === 'running' ? '停止' : '启动'}>
+            {room.status === 'running' ? '⏹' : '▶'}
+          </button>
+          <button className="card-btn del" onClick={onRemove} title="删除">✕</button>
+        </div>
+      </div>
+      <div className="card-stats">
+        <span className="stat">👁 {room.viewers}</span>
+        <span className="stat">💬 {room.total_msg}</span>
+        <span className="stat lead-stat">🎯 {room.lead_count}</span>
+        <span className={`stat status-stat ${room.status}`}>{room.status === 'running' ? '● 直播中' : room.status === 'starting' ? '◌ 启动中' : room.status === 'error' ? '✕ 错误' : '○ 已停止'}</span>
+      </div>
+      {lastMsgs.length > 0 && (
+        <div className="card-preview">
+          {lastMsgs.map(msg => (
+            <div key={msg.id} className={`preview-msg ${msg.is_lead ? 'lead' : ''} ${msg.marked ? `marked-${msg.marked}` : ''}`}>
+              <span className="msg-type-icon">{ICONS[msg.type as keyof typeof ICONS] || ICONS.chat}</span>
+              <span className="msg-content">{truncate(msg.content, 40)}</span>
+              <span className="msg-time">{formatTime(msg.timestamp)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function truncate(s: string, n: number) {
+  return s.length > n ? s.slice(0, n) + '...' : s
+}
+
+function formatTime(ts: number) {
+  if (!ts) return ''
+  const d = new Date(ts)
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}`
+}

frontend/src/components/RoomTools.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+interface RoomToolsProps {
+  viewMode?: 'card' | 'list'
+  cardCols?: number
+  listPerPage?: number
+  onToggleView?: (v: 'card' | 'list') => void
+  onSetCols?: (n: number) => void
+  onSetPerPage?: (n: number) => void
+}
+
+export default function RoomTools({ viewMode, cardCols, listPerPage, onToggleView, onSetCols, onSetPerPage }: RoomToolsProps) {
+  return (
+    <div className="room-tools">
+      <button className={`tool-btn ${viewMode === 'card' ? 'active' : ''}`} onClick={() => onToggleView?.('card')} title="卡片视图">🗂</button>
+      <button className={`tool-btn ${viewMode === 'list' ? 'active' : ''}`} onClick={() => onToggleView?.('list')} title="列表视图">☰</button>
+      {viewMode === 'card' && (
+        <div className="col-sizer">
+          <span className="col-label">列:</span>
+          {[2, 3, 4, 5].map(n => (
+            <button key={n} className={`col-btn ${cardCols === n ? 'active' : ''}`} onClick={() => onSetCols?.(n)}>{n}</button>
+          ))}
+        </div>
+      )}
+      {viewMode === 'list' && (
+        <div className="col-sizer">
+          <span className="col-label">页:</span>
+          {[10, 20, 50, 100].map(n => (
+            <button key={n} className={`col-btn ${listPerPage === n ? 'active' : ''}`} onClick={() => onSetPerPage?.(n)}>{n}</button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/constants.ts

@@ -0,0 +1,39 @@
+export const ICONS = {
+  chat: '💬',
+  gift: '🎁',
+  enter: '👋',
+  like: '❤️',
+  follow: '➕',
+  stats: '📊',
+  fansclub: '⭐',
+  status: 'ℹ️',
+  rank: '🏆',
+  room: '🏠',
+  room_stats: '📊',
+  emoji_chat: '😀',
+  stream_adaptation: '⚙️',
+  lead: '🎯'
+} as const
+
+export const MARKS = [
+  { key: 'blue', label: '蓝', color: '#4a9eff', tint: 'rgba(74,158,255,0.10)' },
+  { key: 'red', label: '红', color: '#ff4d4f', tint: 'rgba(255,77,79,0.10)' },
+  { key: 'yellow', label: '黄', color: '#ffc53d', tint: 'rgba(255,197,61,0.10)' }
+] as const
+
+export const MARK_MAP = Object.fromEntries(MARKS.map(m => [m.key, m])) as Record<string, typeof MARKS[0]>
+
+export const TYPE_LABELS: Record<string, string> = {
+  all: '全部',
+  chat: '聊天',
+  gift: '礼物',
+  enter: '进场',
+  like: '点赞',
+  follow: '关注',
+  stats: '统计',
+  fansclub: '粉丝团',
+  rank: '排行榜',
+  status: '状态',
+  room_stats: '统计',
+  lead: '精准客户'
+}

frontend/src/errorReporter.ts

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export function errorReporter() {
+  window.onerror = (msg, src, line, col, err) => {
+    const body = JSON.stringify({
+      type: 'js_error',
+      message: String(msg),
+      source: src,
+      line,
+      column: col,
+      stack: err ? (err.stack || '') : '',
+      ts: Date.now()
+    })
+    fetch('/api/error', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }).catch(() => {})
+  }
+  window.addEventListener('unhandledrejection', e => {
+    const body = JSON.stringify({
+      type: 'unhandled_rejection',
+      message: (e.reason && (e.reason as any).message) || String(e.reason),
+      ts: Date.now()
+    })
+    fetch('/api/error', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }).catch(() => {})
+  })
+}

frontend/src/main.tsx

@@ -0,0 +1,8 @@
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './style.css'
+import './App.css'
+
+createRoot(document.getElementById('root')!).render(
+  <App />
+)

frontend/src/style.css

@@ -0,0 +1,28 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

frontend/src/types.ts

@@ -0,0 +1,51 @@
+import React from 'react'
+import { ICONS, TYPE_LABELS } from './constants'
+
+export interface RoomMessage {
+  id: string
+  type: string
+  user_id: string
+  username: string
+  fans_level: number
+  content: string
+  gift_name?: string
+  gift_num?: number
+  gift_price?: number
+  timestamp: number
+  marked?: string
+  is_lead?: boolean
+  is_seen?: boolean
+}
+
+export interface RoomData {
+  id: string
+  anchor_id: string
+  room_id: string
+  title: string
+  kind: 'public' | 'anon'
+  status: 'stopped' | 'starting' | 'running' | 'error'
+  viewers: number
+  total_msg: number
+  lead_count: number
+  messages: RoomMessage[]
+  added_at: number
+}
+
+export interface SysState {
+  version: string
+  rooms_total: number
+  running: number
+  error_count: number
+  uptime: number
+}
+
+export interface LicenseState {
+  state: 'unconfigured' | 'active' | 'expired' | 'trial'
+  plan: string
+  expires_at: number
+  max_rooms: number
+  qrcode?: string
+  token?: string
+}
+
+export type Page = 'home' | 'leads' | 'doc' | 'debug' | 'license' | 'detail'

frontend/src/utils.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+
+export function formatTime(ts: number): string {
+  if (!ts) return ''
+  const d = new Date(ts)
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+
+export function useLs<T>(key: string, init: T): [T, (v: T) => void] {
+  const [val, setVal] = React.useState<T>(() => {
+    try {
+      const s = localStorage.getItem(key)
+      return s ? JSON.parse(s) : init
+    } catch {
+      return init
+    }
+  })
+  React.useEffect(() => {
+    try { localStorage.setItem(key, JSON.stringify(val)) } catch {}
+  }, [key, val])
+  return [val, setVal]
+}