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/index.html
+91 -30
View File
@@ -10,33 +10,25 @@
rel="stylesheet"> rel="stylesheet">
<style> <style>
:root { :root {
/* Ultra-Dark / Minimalist Theme */ /* Ultra-Dark / Minimalist Theme (aligned with cablemanager) */
--bg-body: #09090b; --bg-body: #09090b;
/* Zinc-950 */ --bg-panel: #121214;
--bg-panel: #18181b; --bg-input: #09090b;
/* Zinc-900 */
--bg-hover: #27272a; --bg-hover: #27272a;
/* Zinc-800 */
--bg-border: #27272a; --bg-border: #27272a;
/* Zinc-800 */
--text-primary: #e4e4e7; --text-primary: #f4f4f5;
/* Zinc-200 */ --text-muted: #a1a1aa;
--text-muted: #71717a;
/* Zinc-500 */
--accent: #fafafa; --accent: #fafafa;
/* Zinc-50 */
--danger: #ef4444; --danger: #ef4444;
/* Red-500 */
--success: #10b981; --success: #10b981;
/* Emerald-500 */
--warning: #f59e0b; --warning: #f59e0b;
/* Amber-500 */
--radius: 6px; --radius: 8px;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Menlo', monospace; --font-mono: 'JetBrains Mono', 'Menlo', monospace;
--ring-color: rgba(255, 255, 255, 0.2);
} }
* { * {
@@ -45,7 +37,7 @@
body { body {
font-family: var(--font-ui); 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); color: var(--text-primary);
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -299,14 +291,18 @@
background: transparent; background: transparent;
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
color: var(--text-primary); color: var(--text-primary);
padding: 6px 12px; padding: 10px 14px;
border-radius: var(--radius); border-radius: 6px;
font-size: 0.8rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s ease;
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; justify-content: center;
gap: 8px;
font-weight: 500;
user-select: none;
text-decoration: none;
} }
.btn:hover:not(:disabled) { .btn:hover:not(:disabled) {
@@ -322,15 +318,25 @@
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: #fff; background: #d4d4d8;
border-color: #fff; border-color: #d4d4d8;
} }
.btn:disabled { .btn:disabled {
opacity: 0.3; opacity: 0.5;
cursor: not-allowed; 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 { .btn-icon {
padding: 8px; padding: 8px;
border: none; border: none;
@@ -699,6 +705,61 @@
display: none; 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 */ /* Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -1145,7 +1206,7 @@
const hasCC = Array.isArray(st.tags) && st.tags.includes('CC'); const hasCC = Array.isArray(st.tags) && st.tags.includes('CC');
const stationTarget = st.target || st.name; const stationTarget = st.target || st.name;
const memberCount = Number(st.memberCount || 1); const memberCount = Number(st.memberCount || 1);
const stationVersion = st.version || '未知版本'; const stationVersion = st.version || '';
const targetVersion = currentStationUpdate?.targetVersion || ''; const targetVersion = currentStationUpdate?.targetVersion || '';
const needsUpdate = !!targetVersion && stationVersion !== targetVersion; const needsUpdate = !!targetVersion && stationVersion !== targetVersion;
const updateBadge = needsUpdate const updateBadge = needsUpdate
@@ -1232,7 +1293,7 @@
container.appendChild(card); 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 = ` card.innerHTML = `
<div style="position:absolute; top:0; left:0; right:0; height:3px; background:#3b82f6; animation:pulse 1s infinite;"></div> <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) { function renderStationUpdate(info) {
const el = document.getElementById('current-version'); const el = document.getElementById('current-version');
const localVersion = info?.localVersion || '未知'; const localVersion = info?.localVersion || '-';
const targetVersion = info?.targetVersion || '未发布'; const targetVersion = info?.targetVersion || '';
const publishedAt = info?.publishedAt ? new Date(info.publishedAt).toLocaleString() : '未发布'; const publishedAt = info?.publishedAt ? new Date(info.publishedAt).toLocaleString() : '';
const remoteVersionHtml = info?.remoteVersion ? `<div>Gitea最新：${info.remoteVersion}</div>` : ''; const remoteVersionHtml = info?.remoteVersion ? `<div>Gitea最新：${info.remoteVersion}</div>` : '';
el.innerHTML = ` el.innerHTML = `
CloudServer/public/infoboard.html
+9 -7
View File
@@ -10,18 +10,20 @@
<style> <style>
:root { :root {
--bg-body: #09090b; --bg-body: #09090b;
--bg-panel: #18181b; --bg-panel: #121214;
--bg-input: #09090b;
--bg-hover: #27272a; --bg-hover: #27272a;
--bg-border: #27272a; --bg-border: #27272a;
--text-primary: #e4e4e7; --text-primary: #f4f4f5;
--text-muted: #71717a; --text-muted: #a1a1aa;
--accent: #fafafa; --accent: #fafafa;
--danger: #ef4444; --danger: #ef4444;
--success: #10b981; --success: #10b981;
--warning: #f59e0b; --warning: #f59e0b;
--radius: 8px; --radius: 8px;
--font-ui: 'Inter', -apple-system, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: 'JetBrains Mono', monospace; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--ring-color: rgba(255, 255, 255, 0.2);
} }
* { * {
@@ -30,7 +32,7 @@
body { body {
font-family: var(--font-ui); 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); color: var(--text-primary);
margin: 0; margin: 0;
padding: 24px; padding: 24px;
@@ -522,7 +524,7 @@
<div style="width:100%"> <div style="width:100%">
<div style="display:flex; justify-content:space-between; align-items:center;"> <div style="display:flex; justify-content:space-between; align-items:center;">
<div class="item-info"> <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 class="item-sub">${currentStCode} <span style="color:${statusColor}; margin-left:8px;">${tr.status === 'At Station' ? '在站' : (tr.status === 'Departed' ? '已发车' : '运行中')}</span></div>
</div> </div>
<div class="status-dot ${tr.status === 'At Station' ? 'dot-online' : 'dot-warn'}"></div> <div class="status-dot ${tr.status === 'At Station' ? 'dot-online' : 'dot-warn'}"></div>
CloudServer/public/music.html
+138 -55
View File
@@ -8,58 +8,95 @@
<style> <style>
:root { :root {
--bg-body: #09090b; --bg-body: #09090b;
--bg-panel: #18181b; --bg-panel: #121214;
--bg-input: #09090b;
--bg-hover: #27272a; --bg-hover: #27272a;
--bg-border: #27272a; --bg-border: #27272a;
--text-primary: #e4e4e7; --text-primary: #f4f4f5;
--text-muted: #71717a; --text-muted: #a1a1aa;
--accent: #fafafa; --accent: #fafafa;
--danger: #ef4444; --danger: #ef4444;
--radius: 6px; --success: #10b981;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --warning: #f59e0b;
--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; } * { box-sizing: border-box; }
body { body {
margin: 0; margin: 0;
padding: 24px; padding: 30px 20px;
background: var(--bg-body); background: radial-gradient(circle at 50% 0%, #18181b 0%, var(--bg-body) 100%);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-ui); 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 { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid var(--bg-border);
gap: 12px; gap: 12px;
margin-bottom: 16px; flex-wrap: wrap;
} }
.title { .title {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.025em;
background: linear-gradient(to right, #fff, #a1a1aa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.btn { .btn {
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: transparent; background: transparent;
color: var(--text-primary); color: var(--text-primary);
padding: 8px 10px; padding: 10px 14px;
border-radius: var(--radius); border-radius: 6px;
cursor: pointer; 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 { .btn-primary {
background: var(--accent); background: var(--text-primary);
color: #09090b; color: var(--bg-body);
border-color: var(--accent); 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 { .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); border-color: var(--danger);
color: white;
} }
.btn-danger:hover { filter: brightness(0.92); background: var(--danger); }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: 1fr 380px; grid-template-columns: 1fr 380px;
@@ -69,7 +106,11 @@
background: var(--bg-panel); background: var(--bg-panel);
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
border-radius: var(--radius); 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; overflow: hidden;
} }
.card-title { .card-title {
@@ -77,10 +118,12 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bg-border);
} }
.panel h3 { .panel h3 {
margin: 0; margin: 0;
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
@@ -90,71 +133,102 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 8px; padding: 2px 8px;
border-radius: 999px; background: var(--bg-hover);
border-radius: 4px;
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: #0f0f12; color: var(--text-primary);
color: var(--text-muted);
font-size: 0.78rem; font-size: 0.78rem;
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 500;
} }
label { label {
display: block; display: block;
margin: 10px 0 6px 0; margin: 0 0 8px 0;
font-size: 0.85rem; font-size: 0.875rem;
color: var(--text-muted); font-weight: 500;
}
select, input[type="text"] {
width: 100%;
padding: 10px;
border-radius: var(--radius);
border: 1px solid var(--bg-border);
background: #0f0f12;
color: var(--text-primary); 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; font-size: 0.9rem;
outline: none; 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 { .row {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-top: 10px;
} }
.status { .status {
margin-top: 10px; padding: 12px;
padding: 10px; border-radius: 6px;
border-radius: var(--radius);
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: #0f0f12; background: var(--bg-input);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.8rem;
white-space: pre-wrap; white-space: pre-wrap;
color: var(--text-primary);
min-height: 2.4em;
} }
.stations { .stations {
max-height: 420px; max-height: 420px;
overflow: auto; overflow: auto;
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
border-radius: var(--radius); border-radius: 6px;
background: #0f0f12; background: var(--bg-input);
} }
.station-toolbar { .station-toolbar {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
margin-top: 10px;
} }
.station-item { .station-item {
display: flex; display: flex;
gap: 10px; gap: 10px;
padding: 8px 10px; padding: 10px 12px;
border-bottom: 1px solid var(--bg-border); border-bottom: 1px solid var(--bg-border);
align-items: center; align-items: center;
} }
.station-item:last-child { border-bottom: none; } .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 { .station-meta {
font-family: var(--font-mono); font-family: var(--font-mono);
color: var(--text-muted); color: var(--text-muted);
@@ -163,21 +237,29 @@
@media (max-width: 980px) { @media (max-width: 980px) {
.grid { grid-template-columns: 1fr; } .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> </style>
</head> </head>
<body> <body>
<div class="topbar"> <div class="layout-wrapper">
<div class="title">音乐播放</div> <div class="topbar">
<div class="row" style="margin-top:0"> <div class="title">音乐播放</div>
<a class="btn" href="/index.html" style="text-decoration:none; display:inline-flex; align-items:center;">返回控制台</a> <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>
<div class="grid"> <div class="grid">
<div class="panel"> <div class="panel">
<div class="card-title"> <div class="card-title">
<h3>控制</h3> <h3>控制</h3>
<span class="badge" id="track_badge">未选择</span> <span class="badge" id="track_badge"></span>
</div> </div>
<label for="track_select">选择音乐（来自 /opt/CC-StationBroadcast/Audio/music）</label> <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 class="stations" id="stations_box" style="margin-top:10px;"></div>
</div> </div>
</div> </div>
</div>
<script> <script>
function setStatus(msg) { function setStatus(msg) {
@@ -273,7 +356,7 @@
if (!data || !data.success) throw new Error(data?.message || "加载失败"); if (!data || !data.success) throw new Error(data?.message || "加载失败");
const stations = Array.isArray(data.stations) ? data.stations : []; const stations = Array.isArray(data.stations) ? data.stations : [];
if (stations.length === 0) { 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("站台列表为空"); setStatus("站台列表为空");
return; return;
} }
@@ -303,7 +386,7 @@
function onTrackChange() { function onTrackChange() {
const sel = document.getElementById("track_select"); const sel = document.getElementById("track_select");
const v = String(sel.value || "").trim(); const v = String(sel.value || "").trim();
document.getElementById("track_badge").textContent = v ? v : "未选择"; document.getElementById("track_badge").textContent = v ? v : "";
} }
async function loadTracks() { async function loadTracks() {
CloudServer/public/tempbroadcast.html
+136 -55
View File
@@ -8,60 +8,95 @@
<style> <style>
:root { :root {
--bg-body: #09090b; --bg-body: #09090b;
--bg-panel: #18181b; --bg-panel: #121214;
--bg-input: #09090b;
--bg-hover: #27272a; --bg-hover: #27272a;
--bg-border: #27272a; --bg-border: #27272a;
--text-primary: #e4e4e7; --text-primary: #f4f4f5;
--text-muted: #71717a; --text-muted: #a1a1aa;
--accent: #fafafa; --accent: #fafafa;
--danger: #ef4444; --danger: #ef4444;
--success: #10b981; --success: #10b981;
--warning: #f59e0b; --warning: #f59e0b;
--radius: 6px; --radius: 8px;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Menlo', monospace; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--ring-color: rgba(255, 255, 255, 0.2);
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { body {
margin: 0; margin: 0;
padding: 24px; padding: 30px 20px;
background: var(--bg-body); background: radial-gradient(circle at 50% 0%, #18181b 0%, var(--bg-body) 100%);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-ui); 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 { .topbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid var(--bg-border);
gap: 12px; gap: 12px;
margin-bottom: 16px; flex-wrap: wrap;
} }
.title { .title {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.025em;
background: linear-gradient(to right, #fff, #a1a1aa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.btn { .btn {
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: transparent; background: transparent;
color: var(--text-primary); color: var(--text-primary);
padding: 8px 10px; padding: 10px 14px;
border-radius: var(--radius); border-radius: 6px;
cursor: pointer; 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 { .btn-primary {
background: var(--accent); background: var(--text-primary);
color: #09090b; color: var(--bg-body);
border-color: var(--accent); 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 { .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); border-color: var(--danger);
color: white;
} }
.btn-danger:hover { filter: brightness(0.92); background: var(--danger); }
.grid { .grid {
display: grid; display: grid;
grid-template-columns: 1fr 380px; grid-template-columns: 1fr 380px;
@@ -72,29 +107,38 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--bg-border);
} }
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 4px 8px; padding: 2px 8px;
border-radius: 999px; background: var(--bg-hover);
border-radius: 4px;
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: #0f0f12; color: var(--text-primary);
color: var(--text-muted);
font-size: 0.78rem; font-size: 0.78rem;
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 500;
min-width: 0;
} }
.badge:empty { display: none; }
.panel { .panel {
background: var(--bg-panel); background: var(--bg-panel);
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
border-radius: var(--radius); 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; overflow: hidden;
} }
.panel h3 { .panel h3 {
margin: 0 0 10px 0; margin: 0;
font-size: 0.9rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
@@ -102,93 +146,129 @@
} }
label { label {
display: block; display: block;
margin: 10px 0 6px 0; margin: 0 0 8px 0;
font-size: 0.85rem; font-size: 0.875rem;
color: var(--text-muted); font-weight: 500;
color: var(--text-primary);
} }
textarea, select, input[type="text"] { textarea, select, input[type="text"] {
width: 100%; width: 100%;
padding: 10px; background: var(--bg-input);
border-radius: var(--radius);
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: #0f0f12;
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-ui); padding: 10px 14px;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.9rem; font-size: 0.9rem;
outline: none; 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 { .row {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-top: 10px;
} }
.row .btn { flex: 0 0 auto; } .row .btn { flex: 0 0 auto; }
.hint { .hint {
margin-top: 10px;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4; line-height: 1.4;
} }
.status { .status {
margin-top: 10px; padding: 12px;
padding: 10px; border-radius: 6px;
border-radius: var(--radius);
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
background: #0f0f12; background: var(--bg-input);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.8rem;
white-space: pre-wrap; white-space: pre-wrap;
color: var(--text-primary);
min-height: 2.4em;
} }
.stations { .stations {
max-height: 420px; max-height: 420px;
overflow: auto; overflow: auto;
border: 1px solid var(--bg-border); border: 1px solid var(--bg-border);
border-radius: var(--radius); border-radius: 6px;
background: #0f0f12; background: var(--bg-input);
} }
.station-toolbar { .station-toolbar {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
margin-top: 10px;
} }
.station-item { .station-item {
display: flex; display: flex;
gap: 10px; gap: 10px;
padding: 8px 10px; padding: 10px 12px;
border-bottom: 1px solid var(--bg-border); border-bottom: 1px solid var(--bg-border);
align-items: center; align-items: center;
} }
.station-item:last-child { border-bottom: none; } .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 { .station-meta {
font-family: var(--font-mono); font-family: var(--font-mono);
color: var(--text-muted); color: var(--text-muted);
font-size: 0.75rem; font-size: 0.75rem;
} }
audio { width: 100%; margin-top: 8px; } audio { width: 100%; }
@media (max-width: 980px) { @media (max-width: 980px) {
.grid { grid-template-columns: 1fr; } .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> </style>
</head> </head>
<body> <body>
<div class="topbar"> <div class="layout-wrapper">
<div class="title">临时广播</div> <div class="topbar">
<div class="row" style="margin-top:0"> <div class="title">临时广播</div>
<a class="btn" href="/index.html" style="text-decoration:none; display:inline-flex; align-items:center;">返回控制台</a> <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>
<div class="grid"> <div class="grid">
<div class="panel"> <div class="panel">
<div class="card-title"> <div class="card-title">
<h3 style="margin:0;">内容</h3> <h3 style="margin:0;">内容</h3>
<span class="badge" id="build_badge">未合成</span> <span class="badge" id="build_badge"></span>
</div> </div>
<label for="tb_text">广播文本（中文）</label> <label for="tb_text">广播文本（中文）</label>
@@ -233,6 +313,7 @@
<div class="stations" id="stations_box" style="margin-top:10px;"></div> <div class="stations" id="stations_box" style="margin-top:10px;"></div>
</div> </div>
</div> </div>
</div>
<script> <script>
const TTS_MODEL = "s2.1-pro-free"; const TTS_MODEL = "s2.1-pro-free";
@@ -269,7 +350,7 @@
if (!data || !data.success) throw new Error(data?.message || "加载失败"); if (!data || !data.success) throw new Error(data?.message || "加载失败");
const stations = Array.isArray(data.stations) ? data.stations : []; const stations = Array.isArray(data.stations) ? data.stations : [];
if (stations.length === 0) { 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("站台列表为空"); setStatus("站台列表为空");
return; return;
} }
@@ -383,7 +464,7 @@
setStatus(`合成完成: broadcastId=${state.broadcastId} duration=${Number(data.durationSec || 0).toFixed(2)}s`); setStatus(`合成完成: broadcastId=${state.broadcastId} duration=${Number(data.durationSec || 0).toFixed(2)}s`);
} catch (e) { } catch (e) {
setStatus("合成失败: " + (e?.message || String(e))); setStatus("合成失败: " + (e?.message || String(e)));
document.getElementById("build_badge").textContent = "未合成"; document.getElementById("build_badge").textContent = "";
} finally { } finally {
document.getElementById("btn_compose").disabled = false; document.getElementById("btn_compose").disabled = false;
} }
station_broadcast.lua
+15 -5
View File
@@ -1,6 +1,6 @@
-- 1. Configuration & Constants -- 1. Configuration & Constants
local APP_VERSION_TEXT = "v1.0.105" local APP_VERSION_TEXT = "v1.0.106"
local CONFIG = { local CONFIG = {
CLOUD_URL = "ws://stabadmin.fse-media.group", CLOUD_URL = "ws://stabadmin.fse-media.group",
@@ -209,6 +209,16 @@ function Utils.trim(value)
return tostring(value or ""):match("^%s*(.-)%s*$") return tostring(value or ""):match("^%s*(.-)%s*$")
end 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() function Utils.loadStationIdentity()
if not fs.exists(CONFIG.STATION_IDENTITY_FILE) then if not fs.exists(CONFIG.STATION_IDENTITY_FILE) then
return {} return {}
@@ -3107,13 +3117,13 @@ function Display.render()
end end
local function truncL(str) local function truncL(str)
str = tostring(str or "") str = Utils.sanitizeDisplay(str)
if #str > leftW then return str:sub(1, leftW) end if #str > leftW then return str:sub(1, leftW) end
return str return str
end end
local function truncR(str) local function truncR(str)
str = tostring(str or "") str = Utils.sanitizeDisplay(str)
if #str > rightW then return str:sub(1, rightW) end if #str > rightW then return str:sub(1, rightW) end
return str return str
end end
@@ -3354,7 +3364,7 @@ function Display.render()
local entry = State.logs[logIdx] local entry = State.logs[logIdx]
if entry then if entry then
local lineY = logsStartY + i - 1 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 end
end end
@@ -3386,7 +3396,7 @@ function Display.renderTerminal()
local entry = State.logs[logIdx] local entry = State.logs[logIdx]
if entry then if entry then
term.setTextColor(COLORS[entry.level] or colors.white) 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
end end