feat: h5 desktop shell with sidebar and dark mode

- tokens.css/app.css: Miuix dual-color tokens + HyperOS 4 soft-glass rail
- bridge.js/router.js: Promise bridge wrapper + 5-page router with top clock
- index.html: sidebar + 5 page containers
- native wallpaper transparency: Theme.Hearth (showWallpaper + transparent window) + WebView transparent background
This commit is contained in:
2026-08-16 16:15:58 +08:00
parent dcb712731d
commit bd56d89cf3
8 changed files with 174 additions and 6 deletions
+61
View File
@@ -0,0 +1,61 @@
/* Hearth 桌面样式:侧边栏 + 5 页框架 + 柔光玻璃容器 */
/* Hearth launcher styles: sidebar + 5-page frame + soft-glass containers */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
/* 壁纸透明:html/body 不设背景,露出原生壁纸 */
/* Wallpaper transparency: html/body keep transparent to reveal native wallpaper */
html, body { background: transparent; }
body {
color: var(--text);
font-family: -apple-system, "MiSans", "PingFang SC", sans-serif;
overflow: hidden;
}
.app { display: flex; height: 100vh; }
/* 侧边栏:柔光玻璃容器,非纯色背景 */
/* Sidebar: soft-glass container, not a solid color */
.rail {
width: 80px;
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(1.2) brightness(1.05) contrast(1.1);
-webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(1.05) contrast(1.1);
border-right: 1px solid var(--glass-border);
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0;
gap: 8px;
transition: width .2s;
}
.rail.expanded { width: 240px; align-items: stretch; padding: 12px 8px; }
.rail-clock { font-size: 14px; color: var(--text-dim); display: none; }
.rail-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
background: none;
border: none;
color: var(--text-dim);
padding: 8px;
border-radius: 16px;
cursor: pointer;
}
.rail-item .ico { font-size: 20px; }
.rail-item .lbl { font-size: 11px; }
.rail-item.active { background: var(--accent); color: #fff; }
.content { flex: 1; overflow: hidden; }
.page { display: none; height: 100%; }
.page.active { display: flex; flex-direction: column; }