60s-web

在信息爆炸的时代，我们每天都被各种新闻、热搜、天气和工具链接淹没。60s-web 是一个基于 vikiboss/60s API 构建的开源 Web 应用，旨在将这些碎片化信息整合在一个干净、美观的面板中。

它不仅是你的浏览器导航首页，更是一个轻量级的个人信息中心（Dashboard）。纯前端架构，无需数据库，支持 Vercel、Cloudflare、Docker 等多种方式一键部署，让你轻松拥有完全可控的信息入口。

核心功能：一站式获取高频信息

信息聚合与热榜

• 每日 60 秒：快速获取当日全球要闻简报。
• 全网热榜：实时同步微博、知乎、B 站、抖音、头条等主流平台热点，不错过任何话题。
• 垂直资讯：集成 IT 资讯、AI 前沿动态，满足专业领域的信息需求。

生活与实用数据

• 天气中心：展示实时天气、空气质量、未来预报，支持城市切换。
• 金融数据：聚合金价、油价、汇率等高频金融指标。
• 节假日倒计时：清晰展示距离下一个假期的天数，提升工作动力。
• 娱乐休闲：集成电影票房、Epic 免费游戏信息等轻量娱乐内容。

内置工具箱

• 常用工具：内置翻译、二维码生成、密码生成器、配色方案提取器。
• 接口实验室：提供常用 API 接口收藏与测试功能，方便开发者快速调用。
• 搜索聚合：支持站内接口检索，并可一键跳转 Bing、Google、ChatGPT、豆包等搜索引擎。

极致个性化：你的主页你做主

60s-web 提供了丰富的自定义选项，所有配置均保存在本地浏览器（localStorage），隐私安全且无需后端存储。

• 视觉定制：支持更换壁纸、头像（含 QQ 头像缓存）、主题色系（深色/浅色模式）。
• 模块开关：自由开启或隐藏不需要的信息模块，打造极简界面。
• 快捷收藏：支持首页快捷入口收藏，常用网站一键直达。
• 配置管理：支持配置导入/导出、恢复默认设置、API 连接检测及本地缓存清理。

移动端体验：PWA 原生应用感

项目深度优化了移动端体验，支持 iOS/Android PWA（渐进式 Web 应用）安装：

• 独立窗口运行：添加到主屏幕后，以独立 App 形式运行，无浏览器地址栏干扰。
• 智能导航模式：
  • 自动模式：PWA 模式下使用底部导航，普通浏览器中使用顶部导航。
  • 底部导航：适配单手操作，下滑阅读时自动隐藏，上滑或回到顶部时显示。
  • 顶部导航：释放底部空间，适合偏好传统布局的用户。
• 离线提示与服务更新：断网时显示友好提示；新版 Service Worker 安装完成后，自动提示刷新以获取最新应用壳。

技术栈：现代、轻量、高性能

• 前端框架：React 19
• 开发语言：TypeScript
• 构建工具：Vite
• 运行时/包管理：Bun
• 图标体系：lucide-react
• 数据来源：vikiboss/60s API（默认公开 API，支持切换为自托管地址）

快速开始：四种部署方式

方式一：Vercel 部署（推荐新手）

1. 点击仓库顶部的 “Deploy with Vercel” 按钮。
2. 导入 GitHub 仓库。
3. 保持默认配置（Framework Preset: Vite, Build Command: bun run build, Output Directory: dist）。
4. 点击 Deploy，几秒后即可拥有专属域名。

方式二：Cloudflare Workers/Pages 部署

• Workers：点击 “Deploy to Cloudflare” 按钮，将项目作为静态资源应用快速部署。
• Pages：
  1. 在 Cloudflare Dashboard 创建 Pages 应用，连接 GitHub 仓库。
  2. 配置构建命令：bun run build（或 npm install && npm run build）。
  3. 输出目录：dist。
  4. 建议添加环境变量 BUN_VERSION=1.1.0。

方式三：Docker 部署（适合自托管）

# 构建镜像
docker build -t 60s-web .

# 运行容器
docker run -d --name 60s-web -p 8080:80 60s-web

访问 http://localhost:8080 即可。也支持 Docker Compose：

services:
  60s-web:
    image: 60s-web
    build: .
    ports:
      - '8080:80'
    restart: unless-stopped

方式四：Nginx 静态部署

1. 本地构建：

   bun install
   bun run build
   

2. 将 dist/ 目录上传至服务器。
3. 配置 Nginx 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 地址：默认使用 https://60s.viki.moe/v2。你可以在设置中替换为自托管 API 地址，并点击“检测”验证连通性。
• 本地存储：所有个性化设置（城市、主题、收藏等）均存储在浏览器 localStorage 中，不会上传服务器。
• 配置导入导出：支持导出 JSON 配置文件，方便在多设备间同步偏好（不包含图片等大文件）。