Henry_Du/CC-StationBroadcast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
需求：
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 契约。
This commit is contained in:
Henry_Du
2026-08-17 16:17:38 +08:00
parent e0a1252db6
commit 4c049050ce
5 changed files with 389 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CloudServer/public/music.html
+138 -55
View File
@@ -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() {