feat(glance): promote Glance to main portal (3002) with custom CSS and live telemetry bars
This commit is contained in:
Yin Kou committed
1 parent
862c24e386
commit
784ac05ea6
3 files changed
+195
-44
No files matched your search
@@ -0,0 +1,57 @@
|
||||
/* ============================================================================
|
||||
Glance 二次开发自定义样式表 (/app/assets/user.css)
|
||||
微调卡片质感、进度条与自定义遥测面板样式
|
||||
============================================================================ */
|
||||
.hl-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.hl-card {
|
||||
padding: 16px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hl-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hl-bar-bg {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.hl-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.hl-bar-fill-green {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: var(--color-positive);
|
||||
}
|
||||
|
||||
.hl-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
+136
-43
@@ -2,6 +2,7 @@ theme:
|
||||
background-color: 240 10 4
|
||||
primary-color: 210 90 65
|
||||
contrast-multiplier: 1.2
|
||||
custom-css-file: /assets/user.css
|
||||
|
||||
pages:
|
||||
- name: HomeLab 中控台
|
||||
@@ -12,9 +13,9 @@ pages:
|
||||
hour-format: 24h
|
||||
timezones:
|
||||
- timezone: Asia/Shanghai
|
||||
label: 中国标准时间
|
||||
label: 北京 / 家庭主节点
|
||||
- timezone: Asia/Singapore
|
||||
label: 新加坡节点
|
||||
label: 新加坡 / Azure AI 专线
|
||||
|
||||
- type: weather
|
||||
location: Hangzhou, China
|
||||
@@ -29,6 +30,116 @@ pages:
|
||||
- type: search
|
||||
search-engine: google
|
||||
autofocus: false
|
||||
bangs:
|
||||
- title: GitHub
|
||||
shortcut: "!gh"
|
||||
url: https://github.com/search?q={QUERY}
|
||||
- title: YouTube
|
||||
shortcut: "!yt"
|
||||
url: https://www.youtube.com/results?search_query={QUERY}
|
||||
|
||||
- type: custom-api
|
||||
title: 全屋硬件与 AI 专线实时遥测 (Custom Widget 二次开发模块)
|
||||
cache: 3s
|
||||
url: http://host.docker.internal:3004/api/telemetry
|
||||
template: |
|
||||
<div class="hl-grid">
|
||||
<!-- 1. M6 Mac mini -->
|
||||
<div class="hl-card">
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="size-h4 color-primary">🖥️ Apple M6 Mac mini</span>
|
||||
<span class="hl-badge color-subdue">UP {{ .JSON.String "mini.uptime" }}</span>
|
||||
</div>
|
||||
<div class="size-h6 color-subdue" style="margin-top: 2px;">内网 {{ .JSON.String "mini.ip" }} · Tailscale {{ .JSON.String "mini.tailscale_ip" }}</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">CPU (12核 M6 · Load {{ .JSON.Float "mini.load_1m" }})</span>
|
||||
<span class="color-highlight">{{ .JSON.Float "mini.cpu_pct" }}%</span>
|
||||
</div>
|
||||
<div class="hl-bar-bg"><div class="hl-bar-fill" style="width: {{ .JSON.Float "mini.cpu_pct" }}%;"></div></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">统一内存 ({{ .JSON.Float "mini.mem_used_gb" }} / 24 GB)</span>
|
||||
<span class="color-highlight">{{ .JSON.Float "mini.mem_pct" }}%</span>
|
||||
</div>
|
||||
<div class="hl-bar-bg"><div class="hl-bar-fill" style="width: {{ .JSON.Float "mini.mem_pct" }}%;"></div></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">NVMe 闪存 ({{ .JSON.Float "mini.disk_used_gb" }} / {{ .JSON.Float "mini.disk_total_gb" }} GB)</span>
|
||||
<span class="color-highlight">{{ .JSON.Float "mini.disk_pct" }}%</span>
|
||||
</div>
|
||||
<div class="hl-bar-bg"><div class="hl-bar-fill-green" style="width: {{ .JSON.Float "mini.disk_pct" }}%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 极空间 Z4 20TB -->
|
||||
<div class="hl-card">
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="size-h4 color-primary">💾 极空间 Z4 存储池</span>
|
||||
<span class="hl-badge color-positive">SMB 已挂载 ~/nas</span>
|
||||
</div>
|
||||
<div class="size-h6 color-subdue" style="margin-top: 2px;">内网 {{ .JSON.String "nas.ip" }} · 每日 03:30 自动灾备</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">剩余可用容量</span>
|
||||
<span class="size-h3 color-positive">{{ .JSON.Float "nas.free_tb" }} TB</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">已用 {{ .JSON.Float "nas.used_tb" }} TB / 总计 {{ .JSON.Float "nas.total_tb" }} TB</span>
|
||||
<span class="color-highlight">{{ .JSON.Float "nas.pct" }}%</span>
|
||||
</div>
|
||||
<div class="hl-bar-bg"><div class="hl-bar-fill-green" style="width: {{ .JSON.Float "nas.pct" }}%;"></div></div>
|
||||
</div>
|
||||
<div class="hl-row" style="padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06);">
|
||||
<span class="color-subdue">最近自动备份</span>
|
||||
<span class="color-highlight">{{ .JSON.String "nas.latest_backup" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. AI 专线与路由网关 -->
|
||||
<div class="hl-card">
|
||||
<div>
|
||||
<div class="hl-row">
|
||||
<span class="size-h4 color-primary">🛡️ AI 狮城专线 & 路由</span>
|
||||
<span class="hl-badge color-positive">{{ .JSON.Int "network.sg_delay_ms" }} ms</span>
|
||||
</div>
|
||||
<div class="size-h6 color-subdue" style="margin-top: 2px;">小米路由 192.168.31.1 ⇄ SG Azure</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 7px;">
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">AGY 分流锁定</span>
|
||||
<span class="color-highlight">{{ .JSON.String "network.ai_policy" }}</span>
|
||||
</div>
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">AI 固定出口 IP</span>
|
||||
<span class="color-positive">{{ .JSON.String "network.sg_egress_ip" }}</span>
|
||||
</div>
|
||||
<div class="hl-row">
|
||||
<span class="color-subdue">当前生效节点</span>
|
||||
<span class="color-highlight">{{ .JSON.String "network.sg_node" }}</span>
|
||||
</div>
|
||||
<div class="hl-row" style="padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06);">
|
||||
<span class="color-subdue">家庭联通公网 IP</span>
|
||||
<span class="color-highlight">{{ .JSON.String "network.home_wan_ip" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
- type: monitor
|
||||
cache: 10s
|
||||
@@ -48,55 +159,20 @@ pages:
|
||||
icon: si:bitwarden
|
||||
- title: Mihomo 路由分流面板
|
||||
url: https://clash.home.961504.xyz:10443/ui/
|
||||
check-url: http://host.docker.internal:3004/api/telemetry
|
||||
check-url: http://192.168.31.1:9999
|
||||
icon: si:cloudflare
|
||||
- title: 小米主路由器后台
|
||||
url: https://router.home.961504.xyz:10443
|
||||
check-url: http://host.docker.internal:3004/api/telemetry
|
||||
check-url: http://192.168.31.1
|
||||
icon: si:xiaomi
|
||||
- title: Uptime Kuma 外部哨兵
|
||||
url: https://status.961504.xyz
|
||||
check-url: https://status.961504.xyz
|
||||
icon: si:uptimekuma
|
||||
|
||||
- type: custom-api
|
||||
title: 全屋硬件与 AI 专线实时状态
|
||||
cache: 3s
|
||||
url: http://host.docker.internal:3004/api/telemetry
|
||||
template: |
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;">
|
||||
<div style="padding: 14px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);">
|
||||
<div class="size-h4 color-primary">🖥️ M6 Mac mini</div>
|
||||
<div class="size-h6 color-subdue" style="margin-top:4px;">IP: {{ .JSON.String "mini.ip" }} · UP {{ .JSON.String "mini.uptime" }}</div>
|
||||
<div style="margin-top: 10px; font-size: 13px;">
|
||||
<div>CPU 负载: <span class="color-highlight">{{ .JSON.Float "mini.cpu_pct" }}%</span></div>
|
||||
<div>统一内存: <span class="color-highlight">{{ .JSON.Float "mini.mem_used_gb" }} / 24 GB ({{ .JSON.Float "mini.mem_pct" }}%)</span></div>
|
||||
<div>NVMe 闪存: <span class="color-highlight">{{ .JSON.Float "mini.disk_used_gb" }} / {{ .JSON.Float "mini.disk_total_gb" }} GB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 14px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);">
|
||||
<div class="size-h4 color-primary">💾 极空间 Z4 (20TB)</div>
|
||||
<div class="size-h6 color-subdue" style="margin-top:4px;">IP: {{ .JSON.String "nas.ip" }} · SMB 已挂载 ~/nas</div>
|
||||
<div style="margin-top: 10px; font-size: 13px;">
|
||||
<div>剩余可用: <span class="color-positive">{{ .JSON.Float "nas.free_tb" }} TB</span></div>
|
||||
<div>已用空间: <span class="color-highlight">{{ .JSON.Float "nas.used_tb" }} TB ({{ .JSON.Float "nas.pct" }}%)</span></div>
|
||||
<div>最近灾备: <span class="color-highlight">{{ .JSON.String "nas.latest_backup" }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 14px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);">
|
||||
<div class="size-h4 color-primary">🛡️ AI 狮城专线 & 家宽</div>
|
||||
<div class="size-h6 color-subdue" style="margin-top:4px;">{{ .JSON.String "network.ai_policy" }}</div>
|
||||
<div style="margin-top: 10px; font-size: 13px;">
|
||||
<div>AI 锁定出口: <span class="color-positive">{{ .JSON.String "network.sg_egress_ip" }}</span></div>
|
||||
<div>狮城延迟: <span class="color-highlight">{{ .JSON.Int "network.sg_delay_ms" }} ms ({{ .JSON.String "network.sg_node" }})</span></div>
|
||||
<div>家里联通公网: <span class="color-highlight">{{ .JSON.String "network.home_wan_ip" }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
- type: bookmarks
|
||||
groups:
|
||||
- title: 443 免端口直达 (全网通用)
|
||||
- title: 🌐 443 免端口直达 (全网通用)
|
||||
links:
|
||||
- title: AGY 云端工作台
|
||||
url: https://agy.961504.xyz
|
||||
@@ -104,15 +180,15 @@ pages:
|
||||
url: https://vw.961504.xyz
|
||||
- title: Uptime Kuma 监控
|
||||
url: https://status.961504.xyz
|
||||
- title: 10443 家宽公网直连
|
||||
- title: ⚡ 10443 家宽公网直连
|
||||
links:
|
||||
- title: 极空间 Z4
|
||||
url: https://z4.home.961504.xyz:10443
|
||||
- title: AGY 工作台 (10443)
|
||||
url: https://agy.home.961504.xyz:10443
|
||||
- title: Mihomo 面板
|
||||
- title: Mihomo 分流面板
|
||||
url: https://clash.home.961504.xyz:10443/ui/
|
||||
- title: 局域网原生极速 (192.168.31.x)
|
||||
- title: 🔌 局域网原生地址 (192.168.31.x)
|
||||
links:
|
||||
- title: AGY 终端 (7681)
|
||||
url: http://192.168.31.164:7681
|
||||
@@ -120,3 +196,20 @@ pages:
|
||||
url: http://192.168.31.185:5055
|
||||
- title: 小米路由器 (31.1)
|
||||
url: http://192.168.31.1
|
||||
|
||||
- name: 科技与 AI 资讯流
|
||||
columns:
|
||||
- size: full
|
||||
widgets:
|
||||
- type: hacker-news
|
||||
limit: 15
|
||||
collapse-after: 8
|
||||
- size: small
|
||||
widgets:
|
||||
- type: releases
|
||||
title: 核心组件版本追踪
|
||||
repositories:
|
||||
- glanceapp/glance
|
||||
- dani-garcia/vaultwarden
|
||||
- MetaCubeX/mihomo
|
||||
- tailscale/tailscale
|
||||
@@ -4,11 +4,12 @@ services:
|
||||
container_name: glance
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3003:8080"
|
||||
- "3002:8080"
|
||||
extra_hosts:
|
||||
- "host.docker.internal:host-gateway"
|
||||
environment:
|
||||
- TZ=Asia/Shanghai
|
||||
volumes:
|
||||
- ./config:/app/config
|
||||
- ./assets:/app/assets
|
||||
- /var/run/docker.sock:/var/run/docker.sock:ro
|
||||
Reference in new issue
Block a user