基于 vikiboss/60s API 构建的开源信息聚合面板与浏览器导航首页。
一键部署 · 功能特性 · 快速开始 · 配置说明 · 0.1.1 · 0.1.0 · 部署 · 60s API
60s-web 是一个面向个人首页、自托管信息面板和轻量导航场景的 Web 应用。它将每日简报、全网热榜、城市天气、实用数据、娱乐内容和常用工具整合在一个页面中，并提供搜索跳转、主题、壁纸、头像和缓存策略等个性化能力。
项目本身是纯前端应用，不依赖数据库或自建后端。默认使用 vikiboss/60s 提供的公开 API，也支持在页面设置中切换为自托管 API 地址。
你可以直接通过下方入口快速创建自己的部署：
- Vercel：点击 README 顶部
Deploy with Vercel按钮，导入仓库后即可完成部署。 - Cloudflare：点击 README 顶部
Deploy to Cloudflare按钮，可将项目作为 Cloudflare Workers 静态资源应用快速部署。 - Docker：Docker 没有统一的官方“一键部署按钮”，但仓库已提供
Dockerfile，可以通过下方命令快速启动。
Docker 极速启动：
docker build -t 60s-web .
docker run -d --name 60s-web -p 8080:80 60s-web如果你希望面向更多自部署用户，推荐优先使用顶部的 Vercel / Cloudflare 按钮，再在文档中保留 Docker 的快速启动说明。
- 信息聚合：今日 60 秒、历史信息、IT 资讯、AI 资讯等内容入口。
- 热榜浏览：支持微博、知乎、B 站、抖音、头条等热榜数据源。
- 天气中心：展示实时天气、空气质量、未来天气和城市切换。
- 实用数据：聚合金价、油价、汇率、节假日倒计时等高频信息。
- 娱乐内容：集成电影票房、Epic 免费游戏等轻量娱乐信息。
- 工具页面：内置翻译、二维码、密码生成、配色方案、接口实验室和常用接口收藏。
- 导航搜索：支持站内接口检索，并可跳转 Bing、Google、ChatGPT、豆包等搜索入口。
- 个性化设置：支持默认城市、API 地址、模块开关、头像、壁纸、导航与 Footer 样式。
- 快捷收藏：支持首页快捷入口收藏和设置页管理，常用内容可快速到达。
- 配置管理：支持 API 连接检测、配置导入导出、恢复默认设置和本地缓存清理。
- 移动端体验：支持 iOS 添加到主屏幕、独立窗口运行、可配置移动端导航和离线状态提示。
- 缓存刷新：默认 10 分钟缓存，并自动刷新常用数据，减少重复请求。
- 部署友好：支持 Vercel、Cloudflare Workers、Cloudflare Pages、Docker、Nginx 静态部署。
| 类别 | 技术 |
|---|---|
| Runtime / 包管理 | Bun |
| 构建工具 | Vite |
| 前端框架 | React 19 |
| 开发语言 | TypeScript |
| 图标体系 | lucide-react |
| 数据来源 | vikiboss/60s API |
| 部署方式 | Vercel / Cloudflare Workers / Cloudflare Pages / Docker / Nginx |
克隆项目：
git clone https://github.com/dogxii/60s-web.git
cd 60s-web安装依赖并启动开发服务：
bun install
bun run dev开发服务默认监听 0.0.0.0，本地访问：
http://localhost:5173
构建生产版本：
bun run build预览生产构建：
bun run preview| 命令 | 说明 |
|---|---|
bun run dev |
启动本地开发服务 |
bun run build |
类型检查并构建生产版本 |
bun run preview |
本地预览生产构建产物 |
默认 API 地址：
https://60s.viki.moe/v2
你可以在 设置 -> 默认 API 中替换为自己的 60s API 服务地址，并点击检测按钮验证 /60s 接口是否可访问。配置会保存在浏览器本地，不需要数据库或额外服务。
如需查看接口文档、部署 API 服务或参与接口项目开发，请访问：
- API 项目：vikiboss/60s
- 前端项目：dogxii/60s-web
应用内设置会写入浏览器 localStorage，包括：
- 默认城市
- API 地址
- 搜索引擎偏好
- 常用接口收藏
- 首页快捷入口收藏
- 模块显示开关
- 移动端导航模式
- 头像与 QQ 头像缓存
- 壁纸与界面主题
- 数据缓存与刷新时间
这些配置仅保存在当前浏览器中，不会上传到服务器。
你也可以在 设置 -> 配置管理 中导出或导入常用配置。导出的 JSON 会包含 API 地址、默认城市、搜索偏好、主题、移动端导航模式、模块开关、首页卡片布局、常用接口收藏和首页快捷入口收藏，但不会包含本地头像、QQ 号或自定义壁纸图片，避免生成过大的文件或意外携带个人图片。
项目内置 manifest.webmanifest、Apple Touch Icon 和基础 Service Worker。部署到 HTTPS 后，可在 iPhone Safari 中通过 分享 -> 添加到主屏幕 安装为独立窗口应用。Safari 非独立窗口打开时，页面会显示轻量安装提示；已从主屏幕打开时自动隐藏。
PWA 只缓存应用壳和静态资源，新闻、天气、热榜等 API 数据仍保持网络优先，避免离线缓存导致内容过期。断网时页面会显示离线提示，恢复网络后实时数据继续按现有刷新逻辑更新。
当新版 Service Worker 安装完成时，页面会显示“发现新版本”提示，点击刷新后切换到最新应用壳。移动端导航可在设置页选择自动、底部导航或顶部导航；底部导航会在切换页面或点击当前入口时回到顶部，设置入口保留在右上角。
0.1.1 增加移动端导航模式设置，适合不想固定使用底部导航的用户。新安装用户默认使用自动模式：PWA 独立窗口中使用底部导航，普通浏览器中使用顶部导航；已有本地设置的 0.1.0 用户会继续保持底部导航，避免升级后突然改变操作习惯。
本版本包含：
- 设置页新增“移动端导航”，可选择自动、底部导航或顶部导航。
- 配置导入导出和恢复默认同步支持移动端导航模式。
- 顶部导航模式释放底部空间，底部导航模式保留单手操作体验。
- 底部导航修复 iOS PWA 安全区空白，并在下滑阅读时自动隐藏。
- 添加到主屏幕提示关闭后会记住选择，刷新后不再重复显示。
- Service Worker 静态缓存名更新到
60s-web-static-v0.1.1。
0.1.0 是面向公开使用的首个稳定整理版，重点不是继续扩展接口数量，而是把已经完成的首页、热榜、新闻、天气、工具、设置、配置管理、收藏和 PWA 体验收束到可部署状态。
本版本包含：
- 配置导入导出、API 连接检测、非法 API 地址容错和恢复默认设置。
- 接口实验室常用接口收藏，以及首页快捷入口收藏。
- iOS PWA 安装提示、离线状态提示、Service Worker 更新提示和移动端底部导航。
- 首页卡片布局保存、模块开关、主题、壁纸、头像、搜索偏好等本地个性化能力。
- 清理未引用的
favicon.svg，静态图标统一使用favicon.png和 PWA 图标。
发布到 main 前建议确认：
bun run build和git diff --check均通过。- 生产预览中桌面端与移动端主要页面无明显溢出。
- 配置导入导出、恢复默认、接口收藏、快捷入口收藏刷新后仍保留。
manifest.webmanifest与sw.js可访问，缓存名已更新到当前版本。
通过 GitHub 导入项目后，使用以下配置：
Framework Preset: Vite
Install Command: bun install
Build Command: bun run build
Output Directory: dist
项目已内置 vercel.json，用于指定构建命令、输出目录和 SPA fallback。
也可以使用 Vercel CLI：
bunx vercel
bunx vercel --prod仓库顶部已提供官方 Deploy to Cloudflare 按钮。
该按钮适合希望直接复制仓库并快速上线的用户，部署目标为 Cloudflare Workers 静态资源应用。对于 React / Vite 这类 SPA，这种方式也可以很好地承载静态前端页面。
如果你希望继续使用传统的 Git 导入方式，也可以选择下方的 Cloudflare Pages 方案。
在 Cloudflare Dashboard 中进入 Workers & Pages -> Create application -> Pages，连接 GitHub 仓库 dogxii/60s-web 后使用以下配置：
Framework preset: Vite
Build command: bun run build
Build output directory: dist
Root directory: /
建议添加环境变量：
BUN_VERSION=1.1.0
如果当前构建环境没有启用 Bun，可以改用 npm：
Build command: npm install && npm run build
Build output directory: dist
Docker 方案适合：
- 本地快速运行
- 服务器自托管
- 配合 Portainer / 1Panel / Dokploy / CasaOS 等面板部署
构建镜像：
docker build -t 60s-web .运行容器：
docker run -d --name 60s-web -p 8080:80 60s-web访问：
http://localhost:8080
说明：Docker 本身没有像 Vercel / Cloudflare 那样统一、通用的官方“一键部署按钮”，因此这里保留为最快可复制执行的启动方式。
services:
60s-web:
image: 60s-web
build: .
ports:
- '8080:80'
restart: unless-stopped启动：
docker compose up -d生成静态文件：
bun install
bun run build将 dist/ 上传到服务器，并配置 SPA fallback：
server {
listen 80;
server_name example.com;
root /var/www/60s-web/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}部署完成后建议检查以下内容：
- 首页能够正常加载每日简报、热榜、天气和实用数据。
- 页面刷新后仍能保持当前主题、城市、头像和壁纸设置。
- 设置页中 API 检测能够给出连接成功、地址无效或请求失败提示。
- 配置导入导出和恢复默认设置能够正常工作。
- 首页快捷入口收藏能够在刷新后保留，设置页可恢复默认快捷入口。
- 工具页常用接口收藏能够在刷新后保留，并能快速切换到对应接口。
- iPhone Safari 可以添加到主屏幕，打开后显示独立窗口和底部导航。
- 设置页切换移动端导航模式后，顶部导航和底部导航显示符合预期。
- 下滑阅读时底部导航自动隐藏，上滑或回到顶部后恢复显示。
- 关闭 iOS 添加到主屏幕提示后，刷新页面不会再次显示。
- 移动端底部导航切换页面后回到顶部，点击当前入口也能回到顶部。
- 新版本 Service Worker 安装后能够显示更新提示并刷新到最新应用壳。
- 断网后应用壳能够打开，API 内容显示现有失败提示。
- 直接访问子路径时能够回退到
index.html。 - 如果使用自托管 API，确认浏览器控制台没有跨域错误。
- 如果公开部署，请确认 API 地址可被目标网络访问。
.
├── docs/ # README 截图等文档资源
├── public/ # favicon 等静态资源
├── src/ # 应用源码
├── Dockerfile # Docker 镜像构建
├── nginx.conf # 容器内 Nginx 配置
├── vercel.json # Vercel 部署配置
├── wrangler.jsonc # Cloudflare Workers 部署配置
└── vite.config.ts # Vite 配置
- 浏览器默认首页
- 自托管信息聚合面板
- 60s API 的可视化前端
- 个人服务器或家庭网络的信息入口
- 轻量导航页和常用工具页
感谢 vikiboss/60s 提供稳定、易用的开放接口。本项目主要负责前端展示、交互体验、个性化配置和部署体验。
如果你需要单独部署或扩展接口服务，请优先阅读上游 API 项目的文档和许可说明。
MIT @Dogxi