一个聚合多个平台热榜数据的 React + Tauri 桌面应用,支持深色模式、详情页浏览、自定义设置等功能,帮助你快速了解全网热点趋势。
- 🚀 支持多个平台的热榜数据
- 🎨 深色 / 浅色主题切换
- 🔍 平台可见性设置、顺序自定义
- 🔗 设置链接是否新标签页打开
- 🧠 智能懒加载,仅加载进入视图的卡片数据
- 📱 响应式设计,适配桌面与移动端
- 📄 详情页支持分页浏览,更清晰的热点摘要
- 📦 本地缓存设置,自动恢复用户配置
- 🖥️ 原生桌面支持:集成 Tauri 打包为 Windows/macOS/Linux 应用(目前仅支持Windows)
| 平台名称 | 中文名称 |
|---|---|
| douyin | 抖音热点 |
| 微博热搜 | |
| xinwenlianbo | 新闻联播 |
| zhihu | 知乎热榜 |
| rednote | 小红书 |
| baidu | 百度热搜 |
| juejin | 稀土掘金 |
| bilibili | 哔哩哔哩 |
| github | GitHub |
| toutiao | 今日头条 |
| v2ex | V2EX |
| douban-movie | 豆瓣电影 |
| csdn | CSDN |
| hellogithub | HelloGitHub |
| thepaper | 澎湃新闻 |
| sina-news | 新浪新闻 |
| qq-news | 腾讯新闻 |
| netease-news | 网易新闻 |
| dongchedi | 懂车帝 |
| 36kr | 36氪 |
| 果壳 | Guokr |
| coolapk | 酷安 |
| smzdm | 什么值得买 |
| sspai | 少数派 |
| ithome | IT之家 |
| tieba | 百度贴吧 |
| genshin | 原神 |
| starrail | 崩坏:星穹铁道 |
| lol | 英雄联盟 |
| weread | 微信读书 |
| zhihu-daily | 知乎日报 |
| ngabbs | NGA |
| jianshu | 简书 |
- React + Hooks(状态与生命周期管理)
- Vite(快速构建工具)
- Tailwind CSS(快速环境格式系统)
- Axios(请求 API 接口)
- Font Awesome(图标系统)
- Tauri(轻量跨平台桌面应用框架)
# 克隆项目
git clone https://github.com/your-username/hot-topics-aggregator.git
cd hot-topics-aggregator
# 安装依赖
npm install
# 本地开发启动
npm run dev
# 构建生产环境
npm run build
# 本地预览构建结果
npm run preview
# 本地tauri开发
npm run tauri本项目已集成 Tauri,支持构建为原生桌面应用,具备更小体积、更好性能与原生系统集成能力。
- 官方网站: https://tauri.app/
- GitHub: https://github.com/tauri-apps/tauri
- 中文社区: https://tauri.app/zh-cn/
# 安装 Tauri 所需依赖(仅需一次)
# 参考:https://tauri.app/zh-cn/start/prerequisites/#_top
# 初始化 tauri(首次)
npx tauri init
# 构建桌面应用(Release)
npm run tauri build
# 或构建开发版(Debug)
npm run tauri
# 打包 Windows 桌面应用(生成.exe)
npm run build:win
# 启动开发服务器(前端)
npm run dev
# 构建前端资源
npm run build
# 启动 Tauri 开发环境(带桌面窗口)
npm run tauri构建产物默认输出在 src-tauri/target 与 src-tauri/target/release/bundle/ 目录下。
dailyhot-topic/
├── src
│ ├── api # API 请求相关
│ │ └── fetcher.js # 封装通用请求方法
│ ├── App.jsx # 应用根组件
│ ├── assets
│ │ └── favicon.png
│ ├── components # 页面与通用组件
│ │ ├── ErrorPage.jsx # 错误状态页
│ │ ├── Header.jsx # 顶部导航栏
│ │ ├── HotTopicCard.jsx # 热点卡片
│ │ ├── HotTopicDetailPage.jsx# 热点详情页
│ │ ├── LazyLoadWrapper.jsx # 懒加载容器
│ │ ├── NotificationToast.jsx # 消息通知组件
│ │ ├── ProxyImage.jsx # 图片代理处理
│ │ ├── SettingsPage.jsx # 设置页面
│ │ └── Skeleton.jsx # 骨架屏
│ ├── index.css
│ ├── main.jsx # 前端入口
│ ├── mock.jsx # 数据源 mock 数据
│ └── utils.jsx # 工具函数
├── src-tauri # Tauri 桌面端相关
│ ├── build.rs
│ ├── capabilities
│ │ └── default.json
│ ├── Cargo.toml # Rust 项目配置
│ ├── icons
│ │ └── favicon.svg
│ ├── packages
│ │ └── windows
│ │ └── installer.nsi
│ ├── src
│ │ ├── lib.rs
│ │ └── main.rs # Tauri 主入口
│ └── tauri.conf.json # Tauri 配置
├── tailwind.config.js # Tailwind 配置
├── eslint.config.js
├── index.html
├── package.json # 前端依赖
├── package-lock.json
├── postcss.config.js
├── README.md
└── vite.config.js # Vite 配置
点击右上角的 设置按钮 可以进入设置页面:
- ✅ 显示/隐藏平台:控制是否展示特定榜单
- 🔃 自定义榜单顺序(手动控制顺序,支持后续拖拽)
- 🌐 控制链接是否在新标签页打开
- 🧹 一键恢复默认设置
设置项会保存在 localStorage 中,刷新页面或重启浏览器后仍能保留。
| 路径 | 说明 |
|---|---|
/ |
首页热榜聚合 |
#/settings |
设置页面 |
#/detail/平台名 |
某个平台详情页 |
- 本项目不依赖任何第三方 UI 库(如 Ant Design、MUI);
- 所有图标使用 Font Awesome SVG 版;
- 所有样式基于 TailwindCSS 编写;
- 滑动条样式通过 CSS 伪类实现,不使用插件;
- 暗黑模式通过添加
dark类实现,无需 JS 控制; - Tauri 打包构建需安装 Rust 环境及目标平台构建工具。
MIT License © 2025 [Your Name or Team]
感谢你选择本项目!如果你觉得它对你有帮助,请给一个 Star 或分享给朋友!
如有问题或建议,请随时提 Issues 或联系作者。
本项目仅作学习与交流用途,如需商用请确保数据来源合法合规。