一个基于 Vue 3 + TypeScript + Vite + Tailwind CSS 构建的在线天气时钟看板。 将闲置旧 iPad 变为时钟看板，支持天气、农历、日历、Home Assistant 智能设备控制（通过左右滑动切换页面）。
🌐 在线地址： https://teojs.github.io/clock-dashboard/
👏 欢迎加入讨论： QQ群(1018023465) ↗
🌟 如果本项目对你有帮助，不妨点点Star，或者请我喝杯咖啡☕️
⚠️ 此项目用到Vue 3.x框架，这意味着最高系统为 iOS9.3.6 的 iPad mini 1 将无法支持，只支持原生支持 ES2016 的浏览器， 目前仅在 iOS12 及更高版本测试通过。如果您的设备系统为 iOS11 或更低版本，请使用 https://github.com/teojs/clock-dashboard-vue2。
💡 隐私说明： 本项目为纯前端项目，所有接口均为直连，不存在隐私泄露风险。 直接访问在线地址也可以安全使用 Home Assistant，无需私有部署。
| 时钟页面 | 智能控制 | 全屏日历 |
|---|---|---|
 |
 |
 |
-
🕐 动态数字时钟
- 滚动动画和随机倾斜效果
- 使用 SF Compact Rounded 字体
- 支持自定义时钟颜色
- 支持 12 小时制
-
🌤️ 实时天气
- 天气数据来自 Open-Meteo
- 根据地理位置或通过 BigDataCloud 查询 IP 获取位置
- 显示温度、湿度、空气指数（US AQI）、体感温度、紫外线指数
- 支持天气刷新间隔设置
- 支持下雨、下雪、打雷特效开关
- 点击底部天气区域可进行设置
-
📅 农历信息
- 集成 lunar-typescript
- 提供精准的农历、干支年及节日显示
-
📆 全屏日历
- 内置万年历视图
- 支持月份切换及今天快速跳转
-
🏠 智能家居控制
- 深度集成 Home Assistant
- 支持灯光、开关、窗帘电机（Cover）等设备的实时控制与状态同步
- 支持一键 JSON 导入/导出，方便跨设备同步配置
-
📱 PWA 支持
- 支持 iOS "添加到主屏幕"
- 全屏沉浸式体验，无地址栏
-
💾 本地配置缓存
- 所有配置数据都存储在本地，不会上传到服务器
- Node.js >= 22
- pnpm >= 9.6
git clone https://github.com/teojs/clock-dashboard.git
cd clock-dashboardpnpm installpnpm dev服务将运行在 http://localhost:3000。
pnpm build打包产物将生成在 dist 目录中。
# 拉取最新镜像
docker pull ghcr.io/teojs/clock-dashboard:latest
# 运行容器
docker run -d -p 8080:80 --name clock-dashboard ghcr.io/teojs/clock-dashboard:latest访问 http://localhost:8080 即可使用。
# 构建镜像
docker build -t clock-dashboard:latest .
# 运行容器
docker run -d -p 8080:80 --name clock-dashboard clock-dashboard:latest创建 docker-compose.yml 文件：
version: '3.8'
services:
clock-dashboard:
image: ghcr.io/teojs/clock-dashboard:latest
container_name: clock-dashboard
ports:
- '8080:80'
restart: unless-stopped然后运行：
docker-compose up -d由于本项目会不定时优化和更新，如果是群晖 Docker 部署，建议添加自动更新脚本。
设置步骤：
- 控制面板 → 任务计划 → 新增 → 计划的任务 → 用户定义的脚本
- 在任务设置 → 用户定义的脚本 → 填入以下内容：
cd /volume1/docker/your_project_folder
docker-compose pull
docker-compose up -d --remove-orphans
docker image prune -f在应用中点击右上角设置图标，可以配置您的 Home Assistant 信息。
💡 HA地址需要HTTPS支持，如果不支持，建议自己本地部署，并且仅用HTTP访问。
填写您的 Home Assistant 地址，例如：http://192.168.1.100:8123
在 HA 个人设置页底部生成长期访问令牌。
为了让看板能够正常访问 HA 接口，您需要修改 HA 的 configuration.yaml，添加以下内容并重启 HA：
http:
cors_allowed_origins:
- https://your-github-username.github.io # 如果使用 GitHub Pages 部署
- http://192.168.1.xxx:3000 # 本地开发地址
- http://192.168.1.xxx:8080 # Docker 部署地址您可以直接粘贴以下格式进行批量配置：
{
"url": "http://your-ha-url:8123",
"token": "your-long-lived-access-token",
"entities": [
{ "id": "light.living_room", "name": "客厅灯" },
{ "id": "cover.bedroom_curtain", "name": "卧室窗帘" }
]
}- ✨ 新增未来 5 天天气预报弹窗
- ✨ 整合所有设置
- ✨ 日历支持修改每周开始于星期几
- ✨ 新增黄历弹窗，支持查看农历信息、宜忌、时辰吉凶、彭祖百忌
- ✨ 新增法定节假日显示
- ✨ 支持自定义时钟颜色
- ✨ 支持 12 小时制
- ✨ 新增空气指数指标
- ✨ 优化天气城市填写功能
- ✨ 新增 Docker 部署支持
- ✨ 新增天气设置弹窗，支持设置天气刷新间隔、下雨、下雪、打雷特效开关
查看完整更新日志：Releases
本项目采用 CC BY-NC-SA 4.0 (署名-非商业性使用-相同方式共享) 协议。
简而言之： 您可以免费使用和修改本项目，但请务必保留原作者署名，且严禁将本项目的任何部分（包括修改后的版本）用于商业盈利目的。
