feat: 添加 LIVE 计时器和语言按钮组(P0 优化)

- 视频区左上角显示 LIVE 绿色圆点 + 连接时长计时器
- Header 添加中文/EN/日 语言按钮组,一键切换语言
- live-badge、lang-group 样式

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-06-13 19:01:33 +08:00
parent f764b3a7d8
commit 188782fa66
2 changed files with 110 additions and 2 deletions

View File

@@ -143,6 +143,35 @@ body {
color: var(--color-text);
}
.lang-group {
display: flex;
gap: 2px;
background: var(--color-surface-2);
border-radius: var(--radius-sm);
padding: 2px;
}
.lang-btn {
background: none;
border: none;
color: var(--color-text-muted);
font-size: 0.72rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
}
.lang-btn:hover {
color: var(--color-text);
}
.lang-btn--active {
background: var(--color-primary);
color: white;
}
/* ---- Workspace (双栏) ---- */
.workspace {
@@ -154,7 +183,7 @@ body {
/* ---- 左侧视频面板 ---- */
.video-panel {
width: 400px;
width: 420px;
flex-shrink: 0;
display: flex;
flex-direction: column;
@@ -216,6 +245,31 @@ body {
animation: pulse 1.5s ease-in-out infinite;
}
.live-badge {
position: absolute;
top: 12px;
left: 12px;
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
color: white;
padding: 4px 12px;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.live-badge__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
animation: pulse 1.5s ease-in-out infinite;
}
.video-indicator--loading { color: var(--color-warning); }
.video-indicator--audio { left: auto; right: 16px; color: var(--color-primary); }
.video-indicator--error { color: var(--color-error); animation: none; }