feat(glance): promote Glance to main portal (3002) with custom CSS and live telemetry bars

stacks/glance/assets/user.css

@@ -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);
+}

stacks/glance/config/glance.yml

@@ -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

stacks/glance/docker-compose.yml

@@ -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