From 4c049050ce9603468ab7af9423c26a1f4bd7a644 Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Mon, 17 Aug 2026 16:17:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=98=BE=E7=A4=BA=E5=B1=82?=
 =?UTF-8?q?=E5=8E=BB=E9=97=AE=E5=8F=B7=E5=8C=96=20+=20=E7=BD=91=E9=A1=B5?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=20CableManager=20=E9=A3=8E=E6=A0=BC=20+=20?=
 =?UTF-8?q?=E8=A1=A5=E9=BD=90=20select=20=E4=B8=8B=E6=8B=89=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

需求：
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 契约。
---
 CloudServer/public/index.html         | 121 ++++++++++++----
 CloudServer/public/infoboard.html     |  16 ++-
 CloudServer/public/music.html         | 193 ++++++++++++++++++--------
 CloudServer/public/tempbroadcast.html | 191 +++++++++++++++++--------
 station_broadcast.lua                 |  20 ++-
 5 files changed, 389 insertions(+), 152 deletions(-)

diff --git a/CloudServer/public/index.html b/CloudServer/public/index.html
index bb8d3a1..e6be773 100644
--- a/CloudServer/public/index.html
+++ b/CloudServer/public/index.html
@@ -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 = `
diff --git a/CloudServer/public/infoboard.html b/CloudServer/public/infoboard.html
index a093e8a..2d5e241 100644
--- a/CloudServer/public/infoboard.html
+++ b/CloudServer/public/infoboard.html
@@ -10,18 +10,20 @@
     <style>
         :root {
             --bg-body: #09090b;
-            --bg-panel: #18181b;
+            --bg-panel: #121214;
+            --bg-input: #09090b;
             --bg-hover: #27272a;
             --bg-border: #27272a;
-            --text-primary: #e4e4e7;
-            --text-muted: #71717a;
+            --text-primary: #f4f4f5;
+            --text-muted: #a1a1aa;
             --accent: #fafafa;
             --danger: #ef4444;
             --success: #10b981;
             --warning: #f59e0b;
             --radius: 8px;
-            --font-ui: 'Inter', -apple-system, sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
+            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+            --ring-color: rgba(255, 255, 255, 0.2);
         }
 
         * {
@@ -30,7 +32,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: 24px;
@@ -522,7 +524,7 @@
                             <div style="width:100%">
                                 <div style="display:flex; justify-content:space-between; align-items:center;">
                                     <div class="item-info">
-                                        <div class="item-title">${tr.trainId} <span style="font-size:0.7rem; color:var(--text-muted); font-weight:normal; margin-left:8px;">${tr.destination || '未知终点'}</span></div>
+                                        <div class="item-title">${tr.trainId} <span style="font-size:0.7rem; color:var(--text-muted); font-weight:normal; margin-left:8px;">${tr.destination || ''}</span></div>
                                         <div class="item-sub">${currentStCode} <span style="color:${statusColor}; margin-left:8px;">${tr.status === 'At Station' ? '在站' : (tr.status === 'Departed' ? '已发车' : '运行中')}</span></div>
                                     </div>
                                     <div class="status-dot ${tr.status === 'At Station' ? 'dot-online' : 'dot-warn'}"></div>
diff --git a/CloudServer/public/music.html b/CloudServer/public/music.html
index d3024b1..bf9b84e 100644
--- a/CloudServer/public/music.html
+++ b/CloudServer/public/music.html
@@ -8,58 +8,95 @@
     <style>
         :root {
             --bg-body: #09090b;
-            --bg-panel: #18181b;
+            --bg-panel: #121214;
+            --bg-input: #09090b;
             --bg-hover: #27272a;
             --bg-border: #27272a;
-            --text-primary: #e4e4e7;
-            --text-muted: #71717a;
+            --text-primary: #f4f4f5;
+            --text-muted: #a1a1aa;
             --accent: #fafafa;
             --danger: #ef4444;
-            --radius: 6px;
-            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            --font-mono: 'JetBrains Mono', 'Menlo', monospace;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --radius: 8px;
+            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+            --ring-color: rgba(255, 255, 255, 0.2);
         }
         * { box-sizing: border-box; }
         body {
             margin: 0;
-            padding: 24px;
-            background: var(--bg-body);
+            padding: 30px 20px;
+            background: radial-gradient(circle at 50% 0%, #18181b 0%, var(--bg-body) 100%);
             color: var(--text-primary);
             font-family: var(--font-ui);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .layout-wrapper {
+            width: 100%;
+            max-width: 1280px;
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
         }
         .topbar {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding-bottom: 14px;
+            border-bottom: 1px solid var(--bg-border);
             gap: 12px;
-            margin-bottom: 16px;
+            flex-wrap: wrap;
         }
         .title {
             font-size: 1.1rem;
             font-weight: 600;
+            letter-spacing: -0.025em;
+            background: linear-gradient(to right, #fff, #a1a1aa);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         .btn {
             border: 1px solid var(--bg-border);
             background: transparent;
             color: var(--text-primary);
-            padding: 8px 10px;
-            border-radius: var(--radius);
+            padding: 10px 14px;
+            border-radius: 6px;
             cursor: pointer;
-            font-size: 0.85rem;
+            font-size: 0.9rem;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-weight: 500;
+            user-select: none;
+            text-decoration: none;
         }
-        .btn:hover { background: var(--bg-hover); }
+        .btn:hover:not(:disabled) { background: var(--bg-hover); }
+        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .btn-primary {
-            background: var(--accent);
-            color: #09090b;
-            border-color: var(--accent);
+            background: var(--text-primary);
+            color: var(--bg-body);
+            border-color: var(--text-primary);
+            font-weight: 600;
+        }
+        .btn-primary:hover:not(:disabled) {
+            background: #d4d4d8;
+            border-color: #d4d4d8;
         }
-        .btn-primary:hover { filter: brightness(0.92); background: var(--accent); }
         .btn-danger {
-            background: var(--danger);
+            border-color: rgba(239, 68, 68, 0.3);
+            color: var(--danger);
+            background: transparent;
+        }
+        .btn-danger:hover:not(:disabled) {
+            background: rgba(239, 68, 68, 0.1);
             border-color: var(--danger);
-            color: white;
         }
-        .btn-danger:hover { filter: brightness(0.92); background: var(--danger); }
         .grid {
             display: grid;
             grid-template-columns: 1fr 380px;
@@ -69,7 +106,11 @@
             background: var(--bg-panel);
             border: 1px solid var(--bg-border);
             border-radius: var(--radius);
-            padding: 14px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
             overflow: hidden;
         }
         .card-title {
@@ -77,10 +118,12 @@
             justify-content: space-between;
             align-items: center;
             gap: 10px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--bg-border);
         }
         .panel h3 {
             margin: 0;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             font-weight: 600;
             color: var(--text-muted);
             text-transform: uppercase;
@@ -90,71 +133,102 @@
             display: inline-flex;
             align-items: center;
             gap: 6px;
-            padding: 4px 8px;
-            border-radius: 999px;
+            padding: 2px 8px;
+            background: var(--bg-hover);
+            border-radius: 4px;
             border: 1px solid var(--bg-border);
-            background: #0f0f12;
-            color: var(--text-muted);
+            color: var(--text-primary);
             font-size: 0.78rem;
             font-family: var(--font-mono);
+            font-weight: 500;
         }
         label {
             display: block;
-            margin: 10px 0 6px 0;
-            font-size: 0.85rem;
-            color: var(--text-muted);
-        }
-        select, input[type="text"] {
-            width: 100%;
-            padding: 10px;
-            border-radius: var(--radius);
-            border: 1px solid var(--bg-border);
-            background: #0f0f12;
+            margin: 0 0 8px 0;
+            font-size: 0.875rem;
+            font-weight: 500;
             color: var(--text-primary);
-            font-family: var(--font-ui);
+        }
+        input[type="text"], select, textarea {
+            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 {
+            width: 100%;
+            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, textarea:focus, select:focus {
+            border-color: #52525b;
+            box-shadow: 0 0 0 3px var(--ring-color);
         }
         .row {
             display: flex;
             gap: 10px;
             flex-wrap: wrap;
             align-items: center;
-            margin-top: 10px;
         }
         .status {
-            margin-top: 10px;
-            padding: 10px;
-            border-radius: var(--radius);
+            padding: 12px;
+            border-radius: 6px;
             border: 1px solid var(--bg-border);
-            background: #0f0f12;
+            background: var(--bg-input);
             font-family: var(--font-mono);
             font-size: 0.8rem;
             white-space: pre-wrap;
+            color: var(--text-primary);
+            min-height: 2.4em;
         }
         .stations {
             max-height: 420px;
             overflow: auto;
             border: 1px solid var(--bg-border);
-            border-radius: var(--radius);
-            background: #0f0f12;
+            border-radius: 6px;
+            background: var(--bg-input);
         }
         .station-toolbar {
             display: grid;
             grid-template-columns: 1fr auto;
             gap: 10px;
             align-items: center;
-            margin-top: 10px;
         }
         .station-item {
             display: flex;
             gap: 10px;
-            padding: 8px 10px;
+            padding: 10px 12px;
             border-bottom: 1px solid var(--bg-border);
             align-items: center;
         }
         .station-item:last-child { border-bottom: none; }
-        .station-name { flex: 1; }
+        .station-item:hover { background: var(--bg-hover); }
+        .station-name { flex: 1; color: var(--text-primary); }
         .station-meta {
             font-family: var(--font-mono);
             color: var(--text-muted);
@@ -163,21 +237,29 @@
         @media (max-width: 980px) {
             .grid { grid-template-columns: 1fr; }
         }
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb {
+            background: var(--bg-hover);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover { background: #52525b; }
     </style>
 </head>
 <body>
-    <div class="topbar">
-        <div class="title">音乐播放</div>
-        <div class="row" style="margin-top:0">
-            <a class="btn" href="/index.html" style="text-decoration:none; display:inline-flex; align-items:center;">返回控制台</a>
+    <div class="layout-wrapper">
+        <div class="topbar">
+            <div class="title">音乐播放</div>
+            <div class="row" style="margin-top:0">
+                <a class="btn" href="/index.html" style="text-decoration:none; display:inline-flex; align-items:center;">返回控制台</a>
+            </div>
         </div>
-    </div>
 
     <div class="grid">
         <div class="panel">
             <div class="card-title">
                 <h3>控制</h3>
-                <span class="badge" id="track_badge">未选择</span>
+                <span class="badge" id="track_badge"></span>
             </div>
 
             <label for="track_select">选择音乐（来自 /opt/CC-StationBroadcast/Audio/music）</label>
@@ -219,6 +301,7 @@
             <div class="stations" id="stations_box" style="margin-top:10px;"></div>
         </div>
     </div>
+    </div>
 
     <script>
         function setStatus(msg) {
@@ -273,7 +356,7 @@
                 if (!data || !data.success) throw new Error(data?.message || "加载失败");
                 const stations = Array.isArray(data.stations) ? data.stations : [];
                 if (stations.length === 0) {
-                    box.innerHTML = '<div class="station-item" style="color:var(--text-muted); font-style:italic;">暂无在线/已注册站台</div>';
+                    box.innerHTML = '<div class="station-item" style="color:var(--text-muted); font-style:italic;">-</div>';
                     setStatus("站台列表为空");
                     return;
                 }
@@ -303,7 +386,7 @@
         function onTrackChange() {
             const sel = document.getElementById("track_select");
             const v = String(sel.value || "").trim();
-            document.getElementById("track_badge").textContent = v ? v : "未选择";
+            document.getElementById("track_badge").textContent = v ? v : "";
         }
 
         async function loadTracks() {
diff --git a/CloudServer/public/tempbroadcast.html b/CloudServer/public/tempbroadcast.html
index 2adfbe3..c3cb1ad 100644
--- a/CloudServer/public/tempbroadcast.html
+++ b/CloudServer/public/tempbroadcast.html
@@ -8,60 +8,95 @@
     <style>
         :root {
             --bg-body: #09090b;
-            --bg-panel: #18181b;
+            --bg-panel: #121214;
+            --bg-input: #09090b;
             --bg-hover: #27272a;
             --bg-border: #27272a;
-            --text-primary: #e4e4e7;
-            --text-muted: #71717a;
+            --text-primary: #f4f4f5;
+            --text-muted: #a1a1aa;
             --accent: #fafafa;
             --danger: #ef4444;
             --success: #10b981;
             --warning: #f59e0b;
-            --radius: 6px;
-            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            --font-mono: 'JetBrains Mono', 'Menlo', monospace;
+            --radius: 8px;
+            --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+            --ring-color: rgba(255, 255, 255, 0.2);
         }
         * { box-sizing: border-box; }
         body {
             margin: 0;
-            padding: 24px;
-            background: var(--bg-body);
+            padding: 30px 20px;
+            background: radial-gradient(circle at 50% 0%, #18181b 0%, var(--bg-body) 100%);
             color: var(--text-primary);
             font-family: var(--font-ui);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .layout-wrapper {
+            width: 100%;
+            max-width: 1280px;
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
         }
         .topbar {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding-bottom: 14px;
+            border-bottom: 1px solid var(--bg-border);
             gap: 12px;
-            margin-bottom: 16px;
+            flex-wrap: wrap;
         }
         .title {
             font-size: 1.1rem;
             font-weight: 600;
+            letter-spacing: -0.025em;
+            background: linear-gradient(to right, #fff, #a1a1aa);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         .btn {
             border: 1px solid var(--bg-border);
             background: transparent;
             color: var(--text-primary);
-            padding: 8px 10px;
-            border-radius: var(--radius);
+            padding: 10px 14px;
+            border-radius: 6px;
             cursor: pointer;
-            font-size: 0.85rem;
+            font-size: 0.9rem;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-weight: 500;
+            user-select: none;
+            text-decoration: none;
         }
-        .btn:hover { background: var(--bg-hover); }
+        .btn:hover:not(:disabled) { background: var(--bg-hover); }
+        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
         .btn-primary {
-            background: var(--accent);
-            color: #09090b;
-            border-color: var(--accent);
+            background: var(--text-primary);
+            color: var(--bg-body);
+            border-color: var(--text-primary);
+            font-weight: 600;
+        }
+        .btn-primary:hover:not(:disabled) {
+            background: #d4d4d8;
+            border-color: #d4d4d8;
         }
-        .btn-primary:hover { filter: brightness(0.92); background: var(--accent); }
         .btn-danger {
-            background: var(--danger);
+            border-color: rgba(239, 68, 68, 0.3);
+            color: var(--danger);
+            background: transparent;
+        }
+        .btn-danger:hover:not(:disabled) {
+            background: rgba(239, 68, 68, 0.1);
             border-color: var(--danger);
-            color: white;
         }
-        .btn-danger:hover { filter: brightness(0.92); background: var(--danger); }
         .grid {
             display: grid;
             grid-template-columns: 1fr 380px;
@@ -72,29 +107,38 @@
             justify-content: space-between;
             align-items: center;
             gap: 10px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--bg-border);
         }
         .badge {
             display: inline-flex;
             align-items: center;
             gap: 6px;
-            padding: 4px 8px;
-            border-radius: 999px;
+            padding: 2px 8px;
+            background: var(--bg-hover);
+            border-radius: 4px;
             border: 1px solid var(--bg-border);
-            background: #0f0f12;
-            color: var(--text-muted);
+            color: var(--text-primary);
             font-size: 0.78rem;
             font-family: var(--font-mono);
+            font-weight: 500;
+            min-width: 0;
         }
+        .badge:empty { display: none; }
         .panel {
             background: var(--bg-panel);
             border: 1px solid var(--bg-border);
             border-radius: var(--radius);
-            padding: 14px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
             overflow: hidden;
         }
         .panel h3 {
-            margin: 0 0 10px 0;
-            font-size: 0.9rem;
+            margin: 0;
+            font-size: 0.85rem;
             font-weight: 600;
             color: var(--text-muted);
             text-transform: uppercase;
@@ -102,93 +146,129 @@
         }
         label {
             display: block;
-            margin: 10px 0 6px 0;
-            font-size: 0.85rem;
-            color: var(--text-muted);
+            margin: 0 0 8px 0;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-primary);
         }
         textarea, select, input[type="text"] {
             width: 100%;
-            padding: 10px;
-            border-radius: var(--radius);
+            background: var(--bg-input);
             border: 1px solid var(--bg-border);
-            background: #0f0f12;
             color: var(--text-primary);
-            font-family: var(--font-ui);
+            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: 140px;
+            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;
+        }
+        textarea:focus, select:focus, input[type="text"]:focus {
+            border-color: #52525b;
+            box-shadow: 0 0 0 3px var(--ring-color);
         }
-        textarea { min-height: 140px; resize: vertical; }
         .row {
             display: flex;
             gap: 10px;
             flex-wrap: wrap;
             align-items: center;
-            margin-top: 10px;
         }
         .row .btn { flex: 0 0 auto; }
         .hint {
-            margin-top: 10px;
             color: var(--text-muted);
             font-size: 0.85rem;
             line-height: 1.4;
         }
         .status {
-            margin-top: 10px;
-            padding: 10px;
-            border-radius: var(--radius);
+            padding: 12px;
+            border-radius: 6px;
             border: 1px solid var(--bg-border);
-            background: #0f0f12;
+            background: var(--bg-input);
             font-family: var(--font-mono);
             font-size: 0.8rem;
             white-space: pre-wrap;
+            color: var(--text-primary);
+            min-height: 2.4em;
         }
         .stations {
             max-height: 420px;
             overflow: auto;
             border: 1px solid var(--bg-border);
-            border-radius: var(--radius);
-            background: #0f0f12;
+            border-radius: 6px;
+            background: var(--bg-input);
         }
         .station-toolbar {
             display: grid;
             grid-template-columns: 1fr auto;
             gap: 10px;
             align-items: center;
-            margin-top: 10px;
         }
         .station-item {
             display: flex;
             gap: 10px;
-            padding: 8px 10px;
+            padding: 10px 12px;
             border-bottom: 1px solid var(--bg-border);
             align-items: center;
         }
         .station-item:last-child { border-bottom: none; }
-        .station-name { flex: 1; }
+        .station-item:hover { background: var(--bg-hover); }
+        .station-name { flex: 1; color: var(--text-primary); }
         .station-meta {
             font-family: var(--font-mono);
             color: var(--text-muted);
             font-size: 0.75rem;
         }
-        audio { width: 100%; margin-top: 8px; }
+        audio { width: 100%; }
         @media (max-width: 980px) {
             .grid { grid-template-columns: 1fr; }
         }
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb {
+            background: var(--bg-hover);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover { background: #52525b; }
     </style>
 </head>
 <body>
-    <div class="topbar">
-        <div class="title">临时广播</div>
-        <div class="row" style="margin-top:0">
-            <a class="btn" href="/index.html" style="text-decoration:none; display:inline-flex; align-items:center;">返回控制台</a>
+    <div class="layout-wrapper">
+        <div class="topbar">
+            <div class="title">临时广播</div>
+            <div class="row" style="margin-top:0">
+                <a class="btn" href="/index.html" style="text-decoration:none; display:inline-flex; align-items:center;">返回控制台</a>
+            </div>
         </div>
-    </div>
 
     <div class="grid">
         <div class="panel">
             <div class="card-title">
                 <h3 style="margin:0;">内容</h3>
-                <span class="badge" id="build_badge">未合成</span>
+                <span class="badge" id="build_badge"></span>
             </div>
 
             <label for="tb_text">广播文本（中文）</label>
@@ -233,6 +313,7 @@
             <div class="stations" id="stations_box" style="margin-top:10px;"></div>
         </div>
     </div>
+    </div>
 
     <script>
         const TTS_MODEL = "s2.1-pro-free";
@@ -269,7 +350,7 @@
                 if (!data || !data.success) throw new Error(data?.message || "加载失败");
                 const stations = Array.isArray(data.stations) ? data.stations : [];
                 if (stations.length === 0) {
-                    box.innerHTML = '<div class="station-item" style="color:var(--text-muted); font-style:italic;">暂无在线/已注册站台</div>';
+                    box.innerHTML = '<div class="station-item" style="color:var(--text-muted); font-style:italic;">-</div>';
                     setStatus("站台列表为空");
                     return;
                 }
@@ -383,7 +464,7 @@
                 setStatus(`合成完成: broadcastId=${state.broadcastId} duration=${Number(data.durationSec || 0).toFixed(2)}s`);
             } catch (e) {
                 setStatus("合成失败: " + (e?.message || String(e)));
-                document.getElementById("build_badge").textContent = "未合成";
+                document.getElementById("build_badge").textContent = "";
             } finally {
                 document.getElementById("btn_compose").disabled = false;
             }
diff --git a/station_broadcast.lua b/station_broadcast.lua
index faa0663..d2b996b 100644
--- a/station_broadcast.lua
+++ b/station_broadcast.lua
@@ -1,6 +1,6 @@
 
 -- 1. Configuration & Constants
-local APP_VERSION_TEXT = "v1.0.105"
+local APP_VERSION_TEXT = "v1.0.106"
 
 local CONFIG = {
     CLOUD_URL = "ws://stabadmin.fse-media.group",
@@ -209,6 +209,16 @@ function Utils.trim(value)
     return tostring(value or ""):match("^%s*(.-)%s*$")
 end
 
+function Utils.sanitizeDisplay(value)
+    local s = tostring(value or "")
+    if s == "" then return "" end
+    s = s:gsub("%?+", "")
+    s = s:gsub("%s+", " ")
+    s = Utils.trim(s)
+    if s == "" then return "-" end
+    return s
+end
+
 function Utils.loadStationIdentity()
     if not fs.exists(CONFIG.STATION_IDENTITY_FILE) then
         return {}
@@ -3107,13 +3117,13 @@ function Display.render()
     end
 
     local function truncL(str)
-        str = tostring(str or "")
+        str = Utils.sanitizeDisplay(str)
         if #str > leftW then return str:sub(1, leftW) end
         return str
     end
 
     local function truncR(str)
-        str = tostring(str or "")
+        str = Utils.sanitizeDisplay(str)
         if #str > rightW then return str:sub(1, rightW) end
         return str
     end
@@ -3354,7 +3364,7 @@ function Display.render()
         local entry = State.logs[logIdx]
         if entry then
             local lineY = logsStartY + i - 1
-            drawLeft(lineY, entry.text, COLORS[entry.level] or colors.white)
+            drawLeft(lineY, Utils.sanitizeDisplay(entry.text), COLORS[entry.level] or colors.white)
         end
     end
 end
@@ -3386,7 +3396,7 @@ function Display.renderTerminal()
         local entry = State.logs[logIdx]
         if entry then
             term.setTextColor(COLORS[entry.level] or colors.white)
-            term.write(entry.text:sub(1, w - 1))
+            term.write(Utils.sanitizeDisplay(entry.text):sub(1, w - 1))
         end
     end