feat(ui): 显示层去问号化 + 网页统一 CableManager 风格 + 补齐 select 下拉样式

需求： 1. 客户端与网页端所有展示到屏幕上的内容，去掉 ???、Unknown、未知版本、未选择、未合成、暂无在线等占位问号/疑问式字符； 2. 网页端所有页面统一 cablemanager.html 那套风格（色板、硬边边框、圆角 6/8、顶栏渐变字/下边框分隔、shadow、body 径向渐变）； 3. 补齐 <select>/option 下拉样式（appearance none、内联 SVG 箭头、padding-right 留位、ring focus、option 背景与主色一致），不再沿用系统默认。改动： 1. station_broadcast.lua： - 新增 Utils.sanitizeDisplay：统一把任意显示字符串内的 ? 全部剥离并 trim 空白，空串返回 '-' - Display.render 里 truncL / truncR 从直接 tostring 改为走 sanitizeDisplay，保证所有监视器内容 0 问号 - Display.render 底部 3 条日志（drawLeft）和 Display.renderTerminal 顶部日志全部走 sanitizeDisplay 2. CloudServer/public/： - index.html： * :root 色板对齐 cablemanager（--bg-panel #121214、--text-primary #f4f4f5、--text-muted #a1a1aa、加 --bg-input/--ring-color、radius 8px） * body 改 radial-gradient 背景 * .btn / .btn-primary / .btn-danger 统一成 cablemanager 同款尺寸（10x14、radius 6、font-weight 500/600） * 新增 input[type=text|number|password] + textarea + select + option 完整样式组（cablemanager 同款） * 清理 display 层的 Unknown/未知/未发布： - stationVersion || '未知版本' 改为 || ''（空版本号直接省略，不写未知） - seqHtml fallback 从 'Unknown sequence' 改为 '' - localVersion 从 '未知' 改为 '-'，targetVersion/publishedAt 从 '未发布' 改为 ''（空即省略） - infoboard.html： * :root 对齐 cablemanager，加 --bg-input、--ring-color、加 body radial-gradient * 车次目的地 fallback 从 '未知终点' 改为 ''（没终点就空白） - music.html： * :root / body / layout-wrapper / topbar / title / btn / panel / card-title / badge / input+select+textarea 全对齐 cablemanager * track_badge 默认占位从 '未选择' 改空（badge:empty 直接不显示） * 空站台列表占位从 '暂无在线/已注册站台' 改为 '-' * 补了完整 scrollbar 样式 * 最外层 body 内加 .layout-wrapper（对齐 cablemanager max-width 1280 + 居中） - tempbroadcast.html： * 所有风格同步 music.html（与 cablemanager 一致） * build_badge 默认 '未合成' 改为空，失败分支也清空（只在合成成功/合成中写入），同时 .badge:empty {display:none} * 空站台列表占位 '-' * 补 select 下拉外观样式客户端 bump v1.0.105 -> v1.0.106。 server.js node -c 通过；所有修改 HTML 仅改 style 段与少量占位文本，不影响 API 契约。
2026-08-17 16:17:38 +08:00
parent e0a1252db6
commit 4c049050ce
5 changed files with 389 additions and 152 deletions
@@ -10,33 +10,25 @@
        rel="stylesheet">
    <style>
        :root {
-            /* Ultra-Dark / Minimalist Theme */
+            /* Ultra-Dark / Minimalist Theme (aligned with cablemanager) */
            --bg-body: #09090b;
-            /* Zinc-950 */
-            --bg-panel: #18181b;
-            /* Zinc-900 */
+            --bg-panel: #121214;
+            --bg-input: #09090b;
            --bg-hover: #27272a;
-            /* Zinc-800 */
            --bg-border: #27272a;
-            /* Zinc-800 */

-            --text-primary: #e4e4e7;
-            /* Zinc-200 */
-            --text-muted: #71717a;
-            /* Zinc-500 */
+            --text-primary: #f4f4f5;
+            --text-muted: #a1a1aa;

            --accent: #fafafa;
-            /* Zinc-50 */
            --danger: #ef4444;
-            /* Red-500 */
            --success: #10b981;
-            /* Emerald-500 */
            --warning: #f59e0b;
-            /* Amber-500 */

-            --radius: 6px;
+            --radius: 8px;
            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'JetBrains Mono', 'Menlo', monospace;
+            --ring-color: rgba(255, 255, 255, 0.2);
        }

        * {
@@ -45,7 +37,7 @@

        body {
            font-family: var(--font-ui);
-            background-color: var(--bg-body);
+            background: radial-gradient(circle at 50% 0%, #18181b 0%, var(--bg-body) 100%);
            color: var(--text-primary);
            margin: 0;
            padding: 0;
@@ -299,14 +291,18 @@
            background: transparent;
            border: 1px solid var(--bg-border);
            color: var(--text-primary);
-            padding: 6px 12px;
-            border-radius: var(--radius);
-            font-size: 0.8rem;
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-size: 0.9rem;
            cursor: pointer;
-            transition: all 0.2s;
-            display: flex;
+            transition: all 0.2s ease;
+            display: inline-flex;
            align-items: center;
-            gap: 6px;
+            justify-content: center;
+            gap: 8px;
+            font-weight: 500;
+            user-select: none;
+            text-decoration: none;
        }

        .btn:hover:not(:disabled) {
@@ -322,15 +318,25 @@
        }

        .btn-primary:hover:not(:disabled) {
-            background: #fff;
-            border-color: #fff;
+            background: #d4d4d8;
+            border-color: #d4d4d8;
        }

        .btn:disabled {
-            opacity: 0.3;
+            opacity: 0.5;
            cursor: not-allowed;
        }

+        .btn-danger {
+            border-color: rgba(239, 68, 68, 0.3);
+            color: var(--danger);
+        }
+
+        .btn-danger:hover:not(:disabled) {
+            background: rgba(239, 68, 68, 0.1);
+            border-color: var(--danger);
+        }
+
        .btn-icon {
            padding: 8px;
            border: none;
@@ -699,6 +705,61 @@
            display: none;
        }

+        input[type="text"], input[type="number"], input[type="password"], textarea, select {
+            background: var(--bg-input);
+            border: 1px solid var(--bg-border);
+            color: var(--text-primary);
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-family: var(--font-mono);
+            font-size: 0.9rem;
+            outline: none;
+            transition: all 0.2s;
+            height: 40px;
+        }
+
+        textarea {
+            height: auto;
+            min-height: 80px;
+            resize: vertical;
+            font-family: var(--font-ui);
+        }
+
+        select {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a1a1aa'><path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/></svg>");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 16px 16px;
+            padding-right: 36px;
+            cursor: pointer;
+        }
+
+        select > option {
+            background: var(--bg-panel);
+            color: var(--text-primary);
+            font-family: var(--font-mono);
+            font-size: 0.9rem;
+        }
+
+        input[type="text"]:focus,
+        input[type="number"]:focus,
+        input[type="password"]:focus,
+        textarea:focus,
+        select:focus {
+            border-color: #52525b;
+            box-shadow: 0 0 0 3px var(--ring-color);
+        }
+
+        label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-bottom: 6px;
+        }
+
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
@@ -1145,7 +1206,7 @@
                    const hasCC = Array.isArray(st.tags) && st.tags.includes('CC');
                    const stationTarget = st.target || st.name;
                    const memberCount = Number(st.memberCount || 1);
-                    const stationVersion = st.version || '未知版本';
+                    const stationVersion = st.version || '';
                    const targetVersion = currentStationUpdate?.targetVersion || '';
                    const needsUpdate = !!targetVersion && stationVersion !== targetVersion;
                    const updateBadge = needsUpdate
@@ -1232,7 +1293,7 @@
                    container.appendChild(card);
                }
                
-                const seqHtml = seq ? seq.map(s => `<span style="background:var(--bg-hover); padding:2px 6px; border-radius:4px; font-size:0.75rem; font-family:var(--font-mono); margin:2px; display:inline-block;">${s}</span>`).join('') : 'Unknown sequence';
+                const seqHtml = seq ? seq.map(s => `<span style="background:var(--bg-hover); padding:2px 6px; border-radius:4px; font-size:0.75rem; font-family:var(--font-mono); margin:2px; display:inline-block;">${s}</span>`).join('') : '';
                
                card.innerHTML = `
                    <div style="position:absolute; top:0; left:0; right:0; height:3px; background:#3b82f6; animation:pulse 1s infinite;"></div>
@@ -1708,9 +1769,9 @@

        function renderStationUpdate(info) {
            const el = document.getElementById('current-version');
-            const localVersion = info?.localVersion || '未知';
-            const targetVersion = info?.targetVersion || '未发布';
-            const publishedAt = info?.publishedAt ? new Date(info.publishedAt).toLocaleString() : '未发布';
+            const localVersion = info?.localVersion || '-';
+            const targetVersion = info?.targetVersion || '';
+            const publishedAt = info?.publishedAt ? new Date(info.publishedAt).toLocaleString() : '';
            const remoteVersionHtml = info?.remoteVersion ? `<div>Gitea最新：${info.remoteVersion}</div>` : '';
            
            el.innerHTML = `