// 权限检查逻辑 (src/actions/dashboard-realtime.ts)
const settings = await getSystemSettings();
const isAdmin = session.user.role === "admin";
const canViewGlobalData = isAdmin || settings.allowGlobalUsageView;

if (!canViewGlobalData) {
  return {
    ok: false,
    error: "无权限查看全局数据",
  };
}

┌─────────────────────────────────────────────────────────────────┐
│  HEADER: 标题 + 实时时钟 + 语言切换 + 主题切换 + 手动刷新按钮      │
├──────────────┬──────────────────────────────┬───────────────────┤
│              │                              │                   │
│  LEFT COL    │      MIDDLE COL              │   RIGHT COL       │
│  (col-span-3)│      (col-span-5)            │  (col-span-4)     │
│              │                              │                   │
│  用户消耗排行 │  供应商并发插槽状态           │                   │
│  (flex-[3])  │  (可视化进度条)               │  实时请求流        │
│              │                              │  (Live Stream)    │
│  供应商排行   ├──────────────────────────────┤                   │
│  (flex-[2])  │  24小时流量趋势               │                   │
│              │  (面积图)                     │                   │
│              │                              │                   │
│              ├──────────────────────────────┤                   │
│              │  模型调用分布                 │                   │
│              │  (环形饼图)                   │                   │
│              │                              │                   │
├──────────────┴──────────────────────────────┴───────────────────┤
│  FOOTER: 系统状态 + 最后更新时间                                 │
└─────────────────────────────────────────────────────────────────┘

// 示例：网格布局配置
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
  <div className="lg:col-span-3">...</div>
  <div className="lg:col-span-5">...</div>
  <div className="lg:col-span-4">...</div>
</div>

// src/actions/dashboard-realtime.ts
const [
  overviewResult,        // 核心指标
  activityStreamResult,  // 实时活动流
  userRankingsResult,    // 用户排行
  providerRankingsResult,// 供应商排行
  providerSlotsResult,   // 供应商插槽
  modelRankingsResult,   // 模型分布
  statisticsResult,      // 24小时趋势
] = await Promise.allSettled([
  getOverviewData(),
  findRecentActivityStream(ACTIVITY_STREAM_LIMIT),
  findDailyLeaderboard(),
  findDailyProviderLeaderboard(),
  getProviderSlots(),
  findDailyModelLeaderboard(),
  getUserStatistics("today"),
]);

// 活动流数据项结构
interface ActivityStreamEntry {
  id: string;           // 消息/请求 ID
  user: string;         // 用户名
  model: string;        // 模型名称
  provider: string;     // 供应商名称
  latency: number;      // 响应时间（毫秒）
  status: number;       // HTTP 状态码
  cost: number;         // 成本（美元）
  startTime: number;    // 开始时间戳
}

// 计算每个用户的相对消耗比例
const maxCost = rankings[0].totalCost;
const userPercentages = rankings.map(user => ({
  ...user,
  percentage: (user.totalCost / maxCost) * 100,
}));

interface ProviderSlotInfo {
  providerId: number;      // 供应商 ID
  name: string;            // 供应商名称
  usedSlots: number;       // 已使用插槽数
  totalSlots: number;      // 总插槽数（并发限制）
  totalVolume: number;     // 总 Token 流量
}

const COLORS = {
  models: ["#ff6b35", "#00d4ff", "#ffd60a", "#00ff88", "#a855f7"],
};

// src/app/[locale]/internal/dashboard/big-screen/page.tsx
const { data, error, mutate } = useSWR(
  "dashboard-realtime",
  async () => {
    const result = await getDashboardRealtimeData();
    if (!result.ok) {
      throw new Error(result.error || "Failed to fetch data");
    }
    return result.data;
  },
  {
    refreshInterval: 2000,  // 每 2 秒刷新一次
    revalidateOnFocus: false,
  }
);

// src/lib/session-tracker.ts
private static readonly SESSION_TTL = 300000; // 5 分钟（毫秒）

// Key: session:${sessionId}:concurrent_count
// TTL: 10 分钟

全局级别
  └── 所有活跃 session 总数（数据大屏显示的并发数）

供应商级别
  └── 每个供应商的活跃 session 数（用于并发限制）

用户级别
  └── 每个用户的活跃 session 数（用于用户级限流）

API Key 级别
  └── 每个 API Key 的活跃 session 数（用于 Key 级限流）

zh-CN → en → ja → ru → zh-TW → zh-CN

// 获取当前语言翻译
const t = useTranslations("bigScreen");

// 使用翻译
<CardTitle>{t("metrics.concurrentSessions")}</CardTitle>

{
  "title": "实时数据大屏",
  "metrics": {
    "concurrentSessions": "并发数",
    "todayRequests": "今日请求",
    "todayCost": "今日成本",
    "avgResponseTime": "平均响应",
    "todayErrorRate": "错误率"
  },
  "rankings": {
    "userTitle": "用户消耗排行",
    "providerTitle": "供应商排行",
    "modelTitle": "模型调用分布"
  }
}

const activityStreamItems =
  activityStreamResult.status === "fulfilled" 
    ? activityStreamResult.value 
    : [];

const ACTIVITY_STREAM_LIMIT = 20;
const USER_RANKINGS_LIMIT = 5;
const PROVIDER_RANKINGS_LIMIT = 5;
const PROVIDER_SLOTS_LIMIT = 3;
const MODEL_RANKINGS_LIMIT = 10;

-- 请求记录时间索引（用于今日统计）
CREATE INDEX idx_requests_created_at ON requests(created_at);

-- 用户成本索引（用于用户排行）
CREATE INDEX idx_requests_user_cost ON requests(user_id, cost, created_at);

-- 供应商统计索引（用于供应商排行）
CREATE INDEX idx_requests_provider ON requests(provider_id, created_at);

-- 模型统计索引（用于模型分布）
CREATE INDEX idx_requests_model ON requests(model, created_at);

const metrics = data?.metrics || {
  concurrentSessions: 0,
  todayRequests: 0,
  todayCost: 0,
  avgResponseTime: 0,
  todayErrorRate: 0,
};

BigScreenPage
├── ParticleBackground          # Canvas 粒子背景动画
├── Header                      # 顶部标题栏
│   ├── LiveClock              # 实时时钟
│   ├── LanguageToggle         # 语言切换按钮
│   ├── ThemeToggle            # 主题切换按钮
│   └── RefreshButton          # 手动刷新按钮
├── MetricsOverview             # 顶部核心指标区
│   └── MetricCard (x5)        # 五个指标卡片
├── MainContent                 # 主内容区
│   ├── LeftColumn             # 左栏
│   │   ├── UserRankings       # 用户消耗排行
│   │   └── ProviderRankings   # 供应商排行
│   ├── MiddleColumn           # 中栏
│   │   ├── ProviderSlots      # 供应商并发插槽
│   │   ├── TrafficTrend       # 24小时流量趋势
│   │   └── ModelDistribution  # 模型调用分布
│   └── RightColumn            # 右栏
│       └── ActivityStream     # 实时活动流
└── Footer                      # 底部状态栏

### 数据仓库

| 文件 | 说明 |
|------|------|
| `src/repository/activity-stream.ts` | 活动流查询 |
| `src/repository/leaderboard.ts` | 排行榜查询 |
| `src/lib/session-tracker.ts` | Session 追踪（686 行） |

### 国际化

| 文件 | 说明 |
|------|------|
| `messages/zh-CN/bigScreen.json` | 简体中文翻译 |
| `messages/zh-TW/bigScreen.json` | 繁体中文翻译 |
| `messages/en/bigScreen.json` | 英语翻译 |
| `messages/ja/bigScreen.json` | 日语翻译 |
| `messages/ru/bigScreen.json` | 俄语翻译 |

### 依赖

| 依赖 | 用途 |
|------|------|
| `swr` | 数据获取和缓存 |
| `recharts` | 图表（面积图、饼图） |
| `framer-motion` | 动画效果 |
| `lucide-react` | 图标 |
| `next-intl` | 国际化 |

## 最佳实践

### 部署建议

1. **Redis 配置**：确保 Redis 可用，用于准确的并发计数和 session 追踪
2. **大屏幕优化**：建议使用 Chrome 或 Edge 浏览器，分辨率 1920x1080 或更高
3. **刷新频率**：默认 2 秒刷新适合大多数场景，过高频率可能增加服务器负载

### 生产环境配置

在生产环境中部署数据大屏时，建议进行以下配置：

#### Nginx 反向代理配置

```nginx
# 为数据大屏配置较长的超时时间
location /internal/dashboard/big-screen {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    
    # 数据大屏使用 Server Actions，需要较长的超时
    proxy_read_timeout 30s;
    proxy_connect_timeout 30s;
}

services:
  app:
    image: claude-code-hub:latest
    environment:
      - REDIS_URL=redis://redis:6379
      - DATABASE_URL=postgresql://...
      - SESSION_TTL=300000
    depends_on:
      - redis
      - postgres
    
  redis:
    image: redis:7-alpine
    volumes:
      - redis-data:/data
    # 确保 Redis 持久化，避免重启后 session 数据丢失
    command: redis-server --appendonly yes

// src/repository/leaderboard.ts
const timezone = await resolveSystemTimezone();
// 使用 SQL AT TIME ZONE 进行时区转换

// 后端返回的时间戳
const startTime = 1704067200000;

// 前端格式化显示
const formatted = new Date(startTime).toLocaleTimeString(locale);
// 结果："08:00:00"（根据用户时区）

// 1. 在 dashboard-realtime.ts 中添加新的数据源
const [newDataResult] = await Promise.allSettled([
  // ... 其他数据源
  getNewData(),  // 你的新数据源
]);

// 2. 在返回数据中添加新字段
return {
  ok: true,
  data: {
    // ... 其他数据
    newData: newDataResult.status === "fulfilled" 
      ? newDataResult.value 
      : null,
  },
};

// 3. 在页面组件中使用新数据
const newData = data?.newData;