Clock Dashboard:
一个基于 Vue 3 + TypeScript + Vite + Tailwind CSS 构建的在线天气时钟看板。 将闲置旧 iPad 变为时钟看板,支持天气、农历、日历、Home Assistant 智能设备控制(通过左右滑动切换页面)。

主要特性:
🕐 动态数字时钟
- • 滚动动画和随机倾斜效果
- • 使用 SF Compact Rounded 字体
- • 支持自定义时钟颜色
- • 支持 12 小时制
🌤️ 实时天气
- • 天气数据来自 Open-Meteo
- • 根据地理位置或通过 BigDataCloud 查询 IP 获取位置
- • 显示温度、湿度、空气指数(US AQI)、体感温度、紫外线指数
- • 支持天气刷新间隔设置
- • 支持下雨、下雪、打雷特效开关
- • 点击底部天气区域可进行设置
📅 农历信息
- • 集成 lunar-typescript
- • 提供精准的农历、干支年及节日显示
📆 全屏日历
- • 内置万年历视图
- • 支持月份切换及今天快速跳转
- • 集成黄历信息,包括宜忌、时辰吉凶、彭祖百忌等
🏠 智能家居控制
- • 深度集成 Home Assistant
- • 支持灯光、开关、窗帘电机(Cover)等设备的实时控制与状态同步
- • 支持一键 JSON 导入/导出,方便跨设备同步配置
📱 PWA 支持
- • 支持 iOS "添加到主屏幕"
- • 全屏沉浸式体验,无地址栏
💾 本地配置缓存
在线地址:
https://teojs.github.io/clock-dashboard
安装
Docker Compose
services:
clock-dashboard:
image: ghcr.io/teojs/clock-dashboard:latest
container_name: clock-dashboard
ports:
- 8080:80
restart: always
使用
浏览器中输入 http://NAS的IP:8080 就能看到界面

首页展示的是时间和天气,动画效果和图标都很不错

点击时间能显示精确到秒

能查看未来五天的天气预报

右上角有一个设置按钮,点击可以打开进行设置

支持语言切换和仅显示时钟的功能

支持自定义为自己喜欢的时钟样式

天气方面如果自动识别不准,也可以手动指定城市名

接下来说说日历和 HA 两个界面的功能

回到首页,向左滑动就是日历界面,查看节日信息很方便

点击具体日期,会显示很有特色的黄历信息

首页向右滑则是智能控制界面,因为还没添加所以目前是空白的

点击右上角设置按钮,进行配置(没有安装 Home Assistant 的用户就不需要设置了)

TIP:用户名 > 安全(页面最底部) > 长期访问令牌(创建令牌 )

接下来填写实体 ID 就可以了(在 HA 里,点开设备后右上角设置可以获取)

简单看看效果,在这个界面是可以直接控制开关的

总结
Clock Dashboard 是一款天气时钟看板,支持动态时钟、实时天气、农历日历和 Home Assistant 设备控制,还能通过 PWA 添加到主屏幕全屏使用。整体完成度很高,动画效果和交互细节都看得出开发者用了心——闲置旧 iPad 装上它,秒变床头时钟看板,这才是最香的用法。
综合推荐:⭐⭐⭐⭐(旧设备再利用,闲置 iPad 秒变时钟看板)
使用体验:⭐⭐⭐⭐(交互流畅,动画精致,HA 集成方便)
部署难易:⭐(非常简单)︎

︎
︎
︎