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 契约。
This commit is contained in:
@@ -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 = `
|
||||
|
||||
@@ -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>
|
||||
|
||||
+138
-55
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user