bilibili话题播放量排行榜_系统开发案例-程序员客栈

技术信息

语言技术
React、TypeScript、Node.js、Rust、前端系统类型
Web、Windows行业分类
内容平台、开发工具

作品详情

行业场景

立项原因与产品问题
在 Bilibili 内容创作生态中，平台会定期推出各类创作活动与征稿话题，UP 主通过参与这些话题可以获得流量扶持、奖金激励和平台曝光。然而，当前 UP 主在寻找和跟踪这些活动话题时面临诸多痛点：话题数量庞大且分散，手动逐一浏览效率极低；缺乏统一的工具来对比不同话题的热度数据（播放量、讨论数、动态数等），难以判断哪些话题值得投入创作精力；已关注的话题状态变化（如活动结束）无法及时感知；收藏和备注功能缺失，无法系统化管理感兴趣的活动。
本项目旨在解决上述问题，为 Bilibili 内容创作者提供一站式的话题发现、数据对比和跟踪管理工具，帮助 UP 主高效筛选高价值活动话题，提升内容创作的针对性和参与活动的成功率。
行业场景与业务背景
本项目属于内容创作辅助工具领域，服务于 Bilibili 平台的 UP 主群体。Bilibili 作为国内领先的视频社区，拥有数百万活跃内容创作者，平台每月推出数百个创作活动和征稿话题。UP 主需要在海量话题中快速识别高流量、高参与度的活动，以便合理分配创作资源。目前市场上缺乏专门针对 Bilibili 话题数据聚合和管理的桌面端工具，大多数 UP 主依赖手动浏览网页或使用简易脚本，存在数据获取不全面、管理混乱、操作繁琐等问题。本工具填补了这一市场空白，为 UP 主提供专业的话题数据洞察和管理能力。

功能介绍

项目功能模块
本项目包含以下五个核心功能模块：
**1. 话题全量同步模块**：通过 40+ 关键词自动枚举 Bilibili 平台所有 UP 主活动话题，并发获取每个话题的详细数据（播放量、讨论数、动态数、收藏数、点赞数），支持设置播放量门槛过滤低质量话题，通过 Tauri 事件系统实时推送同步进度。
**2. 话题排行浏览模块**：采用左右分栏布局，左侧展示话题列表，右侧展示选中话题下的视频列表。支持虚拟滚动以流畅展示大量数据，提供按状态（活跃/已结束/已收藏/全部）筛选和关键词搜索功能。
**3. 话题下视频排行模块**：点击任意话题自动拉取该话题下投稿视频（最多 100 条），按播放量降序排列，展示封面、标题、UP 主、播放量、弹幕数、时长等信息，点击视频可跳转 Bilibili 网页播放。
**4. 收藏与备注模块**：支持单个和批量收藏话题，为话题添加自定义备注，提供批量操作功能（全选、批量收藏/取消、清除备注），方便 UP 主系统化管理重点关注的活动话题。
**5. Cookie 安全管理模块**：SESSDATA 通过系统密钥链安全存储，支持保存、读取和清除操作，确保登录态安全，获取更多 API 数据。
主要功能描述
本工具的核心价值在于将分散的 Bilibili 活动话题数据进行聚合、分析和可视化展示。通过一键同步功能，UP 主可以在数分钟内获取平台上千个活动话题的完整数据，并通过播放量排行快速锁定高价值话题。工具还支持话题状态跟踪，自动标记活跃和已结束的话题，帮助 UP 主把握参与时机。本地 SQLite 数据库确保持久化存储，历史数据可随时查询对比。整体设计注重数据密度和操作效率，采用暗色主题降低长时间使用的视觉疲劳，虚拟滚动技术确保大数据量下的流畅体验。

项目实现

个人负责任务
在本项目中，我负责从零到一的完整开发工作.
**技术栈**：后端使用 Rust + Tauri 2 框架，前端使用 React 19 + TypeScript 6 + Vite 8，UI 层采用 Ant Design 6 暗色主题，数据层使用 SQLite（rusqlite），安全存储使用 keyring 库，HTTP 请求使用 reqwest，异步运行时使用 Tokio。
**架构亮点**：
1. **Tauri 跨平台架构**：采用 Tauri 2 实现 Rust 后端与 WebView 前端的高效通信，通过 `invoke` 机制实现类型安全的前后端调用。
2. **高并发数据获取**：使用 Tokio Semaphore 控制最大 30 路并发请求，平衡获取速度与 API 限流风险，通过原子计数器和事件系统实现实时进度反馈。
3. **虚拟滚动优化**：使用 react-window 的 FixedSizeList 组件，话题列表和视频列表均支持虚拟滚动，即使数据量达到数千条也能保持 60fps 流畅渲染。
4. **安全存储设计**：Cookie 数据通过系统密钥链（Windows Credential Manager / macOS Keychain / Linux Secret Service）存储，避免明文保存在配置文件中，提升安全性。
**实现难点**：
1. **Bilibili API 适配**：需要处理多个 API 端点的数据格式差异，兼容不同字段命名（如 `view` 可能为数字或字符串），以及分页逻辑的统一处理。
2. **并发控制与数据一致性**：在高并发获取话题详情时，需要通过事务确保数据一致性，同时处理网络超时和异常情况下的部分失败恢复。
3. **前端性能优化**：在大数据量场景下保持界面响应性，需要精确计算虚拟滚动容器