feat(big-screen): 数据大屏

[ding113]

Summary

添加实时数据监控大屏功能，提供全屏可视化仪表盘，实时展示系统运行状态、供应商负载、用户排行榜和流量趋势。

Problem

管理员和运维人员需要一个直观的全屏监控界面来实时监控系统状态：

• 缺少实时并发数、活跃会话的可视化展示
• 无法快速了解各供应商的负载情况和并发插槽占用
• 缺少 24 小时流量趋势的图表展示
• 无法实时查看最新的 API 请求流

Solution

新增独立的数据大屏页面 /internal/dashboard/big-screen，包含：

核心指标卡片：

• 实时并发数（带脉冲动画）
• 活跃会话数
• 今日请求数（24h）
• 今日成本
• 平均响应时间
• 错误率

可视化组件：

• 📊 24h 流量趋势图 - Area Chart 展示每小时请求数
• 📈 模型调用分布 - Pie Chart 显示各模型占比
• 🔥 实时活动流 - Live 滚动展示最近 20 条请求（用户/模型/供应商/耗时/状态）
• 🏆 用户消耗排行榜 - Realtime Top 5
• 🥇 供应商流量排行 - Top 5（按成本排序）
• 🎰 供应商并发插槽状态 - 显示占用率最高的 3 个供应商（使用量/总插槽数）

交互功能：

• 🌓 暗色/亮色主题切换（独立于系统主题）
• 🌍 多语言切换（中文/英文/日文/俄文/繁体）
• ⏱️ 可配置刷新频率（5s/10s/30s，默认 10s）
• ⚡ 手动刷新按钮
• 🎬 粒子动画背景
• 📱 响应式布局

Changes

后端 API

• 新增 Server Action: getDashboardRealtimeData() (src/actions/dashboard-realtime.ts)

  • 并行查询所有数据源（使用 Promise.allSettled 实现部分失败容错）
  • 聚合 Overview + 活动流 + 排行榜 + 供应商插槽 + 24h 趋势
  • 权限控制：管理员或 allowGlobalUsageView=true 可访问

• 新增 Server Action: getProviderSlots() (src/actions/provider-slots.ts)

  • 查询所有启用供应商的并发限额和实时占用数
  • 集成 SessionTracker.getProviderSessionCount()
  • 过滤未设置并发限额的供应商

• 增强现有 API:

  • getOverviewData(): 新增 todayErrorRate 字段
  • 复用现有 Actions: getActiveSessions, findDailyLeaderboard, getUserStatistics 等

前端页面

• 新建页面: src/app/[locale]/internal/dashboard/big-screen/page.tsx (917 行)
  • 全屏无边框布局（独立 layout.tsx）
  • 使用 SWR 实现自动刷新（可配置间隔）
  • Canvas 粒子动画背景
  • Framer Motion 组件入场动画
  • Recharts 图表库（Area Chart + Pie Chart）
  • 数字滚动动画（CountUp 组件）

国际化

新增 5 个语言文件 messages/{locale}/bigScreen.json：

• 中文简体/繁体、英文、日文、俄文
• 包含所有 UI 文本翻译（指标名称、区域标题、表头、状态提示等）

变更日志

• 更新 CHANGELOG.md: 记录数据大屏功能上线

Testing

• 管理员可正常访问 /internal/dashboard/big-screen
• 普通用户（allowGlobalUsageView=false）被拒绝访问
• 所有数据模块正常加载（容错机制验证）
• 暗色/亮色主题切换正常
• 多语言切换功能正常
• 自动刷新和手动刷新功能正常
• 图表渲染正确（24h 趋势、模型分布）
• 活动流实时滚动显示
• 响应式布局在不同屏幕尺寸下正常

Screenshots

建议管理员添加数据大屏的实际截图

Related Issues

Part of Dashboard enhancement roadmap (#183)

---

访问路径: 登录管理后台 → 访问 /internal/dashboard/big-screen
权限要求: 管理员角色 或 系统设置允许全局数据查看

[gemini-code-assist]

Summary of Changes

Hello @ding113, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求引入了全新的“数据大屏”功能，旨在提供一个全面的实时监控仪表盘。它将各种系统指标、用户和供应商排名、流量趋势以及实时活动流聚合到一个动态视图中。实现内容包括新的服务器端数据获取操作、对现有数据检索逻辑的更新以纳入错误率等新指标，以及一个全新的仪表盘用户界面组件，并支持多语言国际化。

Highlights

• 新功能：数据大屏: 新增了“数据大屏”功能，提供了一个全面的实时监控视图，聚合了各种系统指标、用户和供应商排名、流量趋势以及实时活动流。
• 数据获取API: 新增了 getDashboardRealtimeData API 端点，用于一次性高效获取实时仪表盘所需的所有数据。同时，新增了 getProviderSlots API 端点，用于获取供应商并发插槽状态。
• 指标增强: 增强了 getOverviewData 函数，在概览指标中加入了“今日错误率”，并改进了 findRecentActivityStream，使其能够结合 Redis 中的活跃会话和数据库中的最新请求。
• 模型排名: 新增了 findDailyModelLeaderboard 和 findMonthlyModelLeaderboard 函数，用于获取模型调用排行榜数据。
• 国际化支持: 为数据大屏添加了多语言支持，包括英语、日语、俄语、简体中文和繁体中文的翻译文件。
• 全新用户界面: 引入了全新的全屏实时数据仪表盘用户界面，包含多种数据可视化组件、主题切换和语言切换功能，以提供直观的监控体验。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

此次PR引入了一个功能强大且视觉效果出色的实时数据大屏。整体架构设计优秀，后端通过Server Action高效地并行获取数据，前端利用SWR实现了实时更新，交互体验流畅。代码在性能和健壮性方面考虑周全，例如使用了Promise.allSettled和高效的SQL查询。我发现了一些前端的小问题，主要涉及动画性能、图表数据准确性和国际化，修复后将使这个功能更加完善。整体来说，这是一项非常出色的工作。

[ding113]

🔒 Security Scan Results

✅ No security vulnerabilities detected

This PR has been scanned against OWASP Top 10, CWE Top 25, and common security anti-patterns. No security issues were identified in the code changes.

Scanned Categories

• ✅ Injection attacks (SQL, NoSQL, Command, LDAP, etc.) - All database queries use Drizzle ORM with parameterized queries
• ✅ Authentication and session management - Proper authorization checks via getSession() and role-based access control
• ✅ Sensitive data exposure - No hardcoded credentials, proper error message sanitization
• ✅ Access control and authorization - Consistent permission checks: admin role OR allowGlobalUsageView flag
• ✅ Security misconfiguration - Proper error handling with fail-safe fallbacks
• ✅ Cross-site scripting (XSS) - React auto-escaping used throughout, no dangerouslySetInnerHTML
• ✅ Insecure deserialization - No unsafe deserialization detected
• ✅ SSRF and path traversal - No user-controlled URLs or file paths
• ✅ Cryptographic weaknesses - No cryptographic operations in this PR

Security Strengths Observed

1. Strong Authorization Pattern: All new endpoints (getDashboardRealtimeData, getProviderSlots) implement consistent authorization checks ensuring only admins or users with global view permissions can access sensitive data.

2. SQL Injection Prevention: All database queries use Drizzle ORM's query builder with proper parameterization. No string concatenation or raw SQL with user input detected.

3. XSS Prevention: React component properly escapes all user-generated content. No dangerouslySetInnerHTML usage detected.

4. Error Handling: Robust error handling with Promise.allSettled for graceful degradation when individual data sources fail.

5. Input Validation: Numeric inputs properly validated and bounded (e.g., limit = 20 in activity stream queries).

6. Logging Best Practices: Sensitive operations logged appropriately without exposing PII or credentials.

Review Methodology

• ✅ OWASP Top 10 (2021) coverage
• ✅ CWE Top 25 Most Dangerous Software Weaknesses
• ✅ Input validation and sanitization analysis
• ✅ Authentication and authorization flow review
• ✅ Data exposure and privacy analysis
• ✅ Client-side security (XSS, CSRF) review

---

🤖 Automated security scan performed by Claude AI - OWASP Top 10 & CWE coverage