《WaLiAPI - 本地 LLM API 网关》第3-7节：前端增强与自动更新

作者：小傅哥
博客：https://bugstack.cn (opens new window)

沉淀、分享、成长，让自己和他人都能有所收获！😄

大家好，我是技术UP主小傅哥。

经过前6节的"硬核后端"（协议转换、服务注册、知识库三步渐进、MCP Server），这一节回归前端——让 WaLiAPI 的 UI 更好用、更美观、更智能。

一、本章诉求

1. 增强 ChannelsPage——渠道统计卡片 + 拖拽排序
2. 增强 ApiKeysPage——配额环形图 + 使用进度
3. 增强 LogsPage——日志过滤/搜索 + 详情展开
4. 增强 DashboardPage——6 指标卡片 + 多协议统计
5. 增强 UsagePage——多协议（OpenAI/Anthropic/Responses）用量分析
6. 实现 UpdateChecker——自动检测版本更新
7. 实现 Migration 005/006/007——response_choices/seq/trace_id

二、ChannelsPage 增强

2.1 渠道统计卡片

在渠道列表上方添加统计摘要：

┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│  总渠道   │ │  活跃渠道  │ │  失败渠道  │ │  平均延迟 │
│    5     │ │    4     │ │    1     │ │  320ms   │
└──────────┘ └──────────┘ └──────────┘ └──────────┘

数据来源：statsApi.getDashboard() 返回的 total_channels / active_channels / failed_channels / avg_latency_ms。

2.2 拖拽排序

渠道优先级影响请求分发顺序（优先使用排序靠前的渠道）。拖拽排序让用户直观调整优先级：

// 使用 react-beautiful-dnd 或 @dnd-kit/core
const handleDragEnd = (result: DragEndResult) => {
    if (!result.destination) return;
    const items = reorder(channels, result.source.index, result.destination.index);
    // 更新优先级并保存
    items.forEach((channel, index) => {
        channel.priority = index;
        invoke("update_channel", { id: channel.id, input: { priority: index } });
    });
    setChannels(items);
};