diff --git a/public/static/manifest.json b/public/static/manifest.json index 8bf493c..cd93450 100644 --- a/public/static/manifest.json +++ b/public/static/manifest.json @@ -1,5 +1,5 @@ { - "generatedAt": "2026-06-17T08:54:58.662Z", + "generatedAt": "2026-06-18T07:58:42.060Z", "events": [ { "id": "赛事一", diff --git a/src/styles/global.css b/src/styles/global.css index 6b56789..2935b54 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -7,20 +7,47 @@ } :root { - --ui-font-sans: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; - --ui-accent: #ea580c; - --ui-accent-strong: #c2410c; - --ui-primary: #1d4ed8; - --ui-primary-soft: #dbeafe; - --ui-surface: #f8fafc; - --ui-surface-elevated: #ffffff; - --ui-border: #cbd5e1; - --ui-text: #0f172a; - --ui-text-muted: #64748b; - --ui-radius: 10px; - --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); - --ui-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1); - --ui-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.16); + --ui-font-sans: 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; + --ui-accent: #d97706; + --ui-accent-strong: #b45309; + --ui-primary: #2563eb; + --ui-primary-soft: #eff6ff; + --ui-surface: #f3f4f6; + --ui-surface-elevated: #fafafa; + --ui-border: #d1d5db; + --ui-text: #111827; + --ui-text-muted: #6b7280; + --ui-radius: 6px; + --ui-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); + --ui-shadow-md: 0 2px 8px rgba(0,0,0,0.08); + --ui-shadow-lg: 0 6px 24px rgba(0,0,0,0.12); + + --desktop-titlebar-height: 40px; + --desktop-statusbar-height: 28px; + --desktop-panel-bg: #f5f5f5; + --desktop-border: #c4c4c4; + --desktop-text: #1a1a1a; + --desktop-muted: #6e6e6e; + --desktop-accent: #0078d4; +} + +/* 桌面应用风格滚动条 */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: #a1a1a1; +} +::-webkit-scrollbar-corner { + background: transparent; } html, diff --git a/src/views/EventConfig.vue b/src/views/EventConfig.vue index 2c8c8a1..2e29e24 100644 --- a/src/views/EventConfig.vue +++ b/src/views/EventConfig.vue @@ -788,8 +788,26 @@ function toggleConfigPanel() { initFromSaved() refreshSerial() +// 桌面键盘快捷键 +function onKeydown(e) { + if ((e.ctrlKey || e.metaKey) && e.key === 'p') { + e.preventDefault() + if (!liveMode.value && canStart.value) handleProjection() + return + } + if (e.key === 'Escape') { + if (pageConfigVisible.value) { + pageConfigVisible.value = false + return + } + } +} + +window.addEventListener('keydown', onKeydown) + onUnmounted(() => { stopStageDrag() + window.removeEventListener('keydown', onKeydown) }) function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { @@ -813,25 +831,30 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) {
-
- Competition Control -

赛事配置

-

- {{ - liveMode - ? '配置已收起，请在本页控制台操作比赛；投屏窗口仅作大屏展示。' - : '按流程完成资源、页面、设备配置后投屏，在本页控制台操作比赛。' - }} -

+
+ 🏆 +
+

赛事配置中心

+

+ {{ + liveMode + ? '比赛进行中 — 投屏窗口已打开，此处为控制台' + : '配置资源与设备后点击投屏开始比赛' + }} +

+
+
+
+ ● 直播中 +
-
正在加载赛事资源…
@@ -1158,6 +1181,13 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) {
+ + +
@@ -1240,24 +1270,20 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { min-height: 0; overflow-y: auto; overflow-x: hidden; - background: - radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.08), transparent 42%), - radial-gradient(circle at 100% 0%, rgba(234, 88, 12, 0.07), transparent 38%), - linear-gradient(180deg, #e8edf5 0%, #d5dce8 100%); - padding: 0.85rem; + background: #e8e8e8; + padding: 0; -webkit-overflow-scrolling: touch; } .config-card { max-width: none; min-height: calc(100vh - 1.7rem); - margin: 0 auto; + margin: 0; overflow: hidden; - background: rgba(248, 250, 252, 0.96); - border: 1px solid rgba(148, 163, 184, 0.45); - border-radius: 14px; - box-shadow: var(--ui-shadow-lg); - backdrop-filter: blur(8px); + background: #f5f5f5; + border: none; + border-radius: 0; + box-shadow: none; } .config-header { @@ -1268,89 +1294,119 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { align-items: center; justify-content: space-between; gap: 1rem; - min-height: 58px; + min-height: var(--desktop-titlebar-height); margin-bottom: 0; - padding: 0.7rem 1rem 0.7rem 1.7rem; - color: #0f172a; - background: linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%); - border-bottom: 1px solid #cbd5e1; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset; + padding: 0 0.85rem; + color: #1a1a1a; + background: #e8e8e8; + border-bottom: 1px solid #c4c4c4; + user-select: none; +} + +.header-left { + display: flex; + align-items: center; + gap: 0.5rem; + min-width: 0; +} + +.header-icon { + font-size: 1.15rem; + flex-shrink: 0; +} + +.header-right { + display: flex; + align-items: center; + gap: 0.65rem; + flex-shrink: 0; +} + +.live-badge { + font-size: 0.76rem; + font-weight: 700; + color: #16a34a; + padding: 0.15rem 0.45rem; + background: #dcfce7; + border: 1px solid #86efac; + border-radius: 4px; + animation: live-pulse 2s ease-in-out infinite; +} + +@keyframes live-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } } .config-toggle-btn { flex-shrink: 0; - padding: 0.5rem 0.9rem; - font-size: 0.82rem; - font-weight: 700; - color: #1e3a8a; - background: #dbeafe; - border: 1px solid #93c5fd; - border-radius: 6px; - transition: background 0.12s ease, border-color 0.12s ease; + padding: 0.3rem 0.6rem; + font-size: 0.78rem; + font-weight: 600; + color: #374151; + background: #f3f4f6; + border: 1px solid #c4c4c4; + border-radius: 4px; + transition: background 0.1s; } - .config-toggle-btn:hover { - background: #bfdbfe; - border-color: #60a5fa; + background: #e5e7eb; } .eyebrow { - display: inline-flex; - align-items: center; - margin-bottom: 0.15rem; - font-size: 0.68rem; - font-weight: 800; - letter-spacing: 0.16em; - text-transform: uppercase; - color: #64748b; + display: none; } .config-header h1 { - font-size: 1.12rem; - color: #0f172a; - margin-bottom: 0.1rem; + font-size: 0.95rem; + font-weight: 600; + color: #1a1a1a; + margin-bottom: 0; + line-height: 1.3; } .subtitle { max-width: 36rem; - font-size: 0.78rem; - line-height: 1.45; - color: #64748b; + font-size: 0.72rem; + line-height: 1.35; + color: #6e6e6e; margin-bottom: 0; + margin-top: 1px; } .status-msg { text-align: center; - padding: 2rem; + padding: 1.5rem; color: #666; + font-size: 0.85rem; } .status-msg.error { - color: #e63946; + color: #d32f2f; } .section { min-width: 0; - padding: 0.9rem; + padding: 0.6rem 0.7rem; margin-bottom: 0; - background: var(--ui-surface-elevated); - border: 1px solid rgba(203, 213, 225, 0.85); - border-radius: var(--ui-radius); - box-shadow: var(--ui-shadow-sm); - transition: border-color 0.15s ease, box-shadow 0.15s ease; + background: #fafafa; + border: 1px solid #d4d4d4; + border-radius: 4px; + box-shadow: none; + transition: border-color 0.15s; } - .section:hover { - border-color: rgba(148, 163, 184, 0.95); - box-shadow: var(--ui-shadow-md); + border-color: #a0a0a0; + box-shadow: none; } .config-layout { display: grid; - grid-template-columns: minmax(360px, 0.95fr) minmax(440px, 1.35fr); - gap: 0.85rem; + grid-template-columns: minmax(380px, 0.85fr) minmax(480px, 1.35fr); + gap: 0; align-items: start; - padding: 0.85rem; + padding: 0; + border-top: 1px solid #d4d4d4; } .config-layout.is-live-collapsed { @@ -1364,28 +1420,36 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .preview-panel { display: grid; - gap: 0.75rem; + gap: 0.5rem; position: sticky; - top: 4.6rem; + top: 2.5rem; align-self: start; + padding: 0.6rem; + background: #ececec; + border-left: 1px solid #d4d4d4; + min-height: calc(100vh - 3.5rem); } .preview-panel.is-live-panel { position: static; + background: #f5f5f5; + border-left: none; + padding: 0; } .live-workspace { - padding: 0.85rem; - background: #ffffff; - border: 1px solid #d1d5db; - border-radius: 8px; + padding: 0; + background: #f5f5f5; + border: none; + border-radius: 0; } .form-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.65rem; + gap: 0.5rem; align-content: start; + padding: 0.6rem; } .folder-section, @@ -1399,33 +1463,33 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } .preview-section { - padding: 0.9rem; - background: var(--ui-surface-elevated); - border: 1px solid rgba(203, 213, 225, 0.85); - border-radius: var(--ui-radius); - box-shadow: var(--ui-shadow-sm); + padding: 0.6rem; + background: #fafafa; + border: 1px solid #d4d4d4; + border-radius: 4px; + box-shadow: none; } .preview-section-main { - padding: 0.9rem; + padding: 0.6rem; overflow: hidden; } .preview-stage-wrap { width: 100%; overflow: hidden; - border-radius: 8px; - box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35); + border-radius: 4px; + box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .preview-section-compact { - padding: 0.85rem; + padding: 0.5rem; } .preview-side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.85rem; + gap: 0.5rem; } .preview-side-grid > .preview-section { @@ -1466,74 +1530,64 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .preview-config-btn { width: 100%; - margin-bottom: 0.65rem; - padding: 0.58rem 0.8rem; - color: #e0f2fe; - background: linear-gradient(180deg, #1e3a8a, #1d4ed8); - /* border: 1px solid rgba(147, 197, 253, 0.45); */ - border-radius: 8px; - font-weight: 700; - /* box-shadow: 0 4px 14px rgba(30, 64, 175, 0.28); */ - transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; + margin-bottom: 0.5rem; + padding: 0.4rem 0.6rem; + color: #fff; + background: var(--desktop-accent); + border: 1px solid #005fb8; + border-radius: 4px; + font-weight: 600; + font-size: 0.78rem; + transition: background 0.1s; } - .preview-config-btn:hover { - background: linear-gradient(180deg, #1d4ed8, #2563eb); - border-color: #93c5fd; - transform: translateY(-1px); + background: #106ebe; } .config-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.55rem; + gap: 0.4rem; } .status-card { display: flex; align-items: flex-start; - gap: 0.55rem; + gap: 0.4rem; min-width: 0; - padding: 0.72rem; - background: linear-gradient(180deg, #fff7ed, #ffedd5); - border: 1px solid #fdba74; - border-radius: 9px; - box-shadow: var(--ui-shadow-sm); + padding: 0.5rem; + background: #fff8f0; + border: 1px solid #d4d4d4; + border-radius: 4px; } - -.status-card > div { - min-width: 0; -} - .status-card.ready { - background: linear-gradient(180deg, #f0fdf4, #dcfce7); - border-color: #86efac; + background: #f0faf0; + border-color: #a0d4a0; } .status-dot { - width: 0.7rem; - height: 0.7rem; - margin-top: 0.25rem; + width: 0.55rem; + height: 0.55rem; + margin-top: 0.2rem; flex-shrink: 0; border-radius: 50%; - background: #f97316; + background: #d97706; } - .status-card.ready .status-dot { background: #22c55e; } .status-card strong { display: block; - font-size: 0.82rem; - color: #1f2937; + font-size: 0.76rem; + color: #1a1a1a; } .status-card p { - margin-top: 0.2rem; - font-size: 0.72rem; - line-height: 1.35; - color: #6b7280; + margin-top: 0.1rem; + font-size: 0.68rem; + line-height: 1.3; + color: #6e6e6e; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; @@ -1545,43 +1599,43 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .missing-panel { margin-bottom: 0; - padding: 0.75rem 0.85rem; - background: #fffbeb; - border: 1px solid #fcd34d; - border-radius: 8px; + padding: 0.5rem 0.6rem; + background: #fffbe6; + border: 1px solid #e5d076; + border-radius: 4px; box-shadow: none; } .missing-panel h2 { - font-size: 0.9rem; - color: #92400e; - margin-bottom: 0.45rem; + font-size: 0.82rem; + color: #6b5900; + margin-bottom: 0.3rem; } .missing-panel ul { - padding-left: 1.1rem; - color: #92400e; - font-size: 0.82rem; - line-height: 1.7; + padding-left: 1rem; + color: #6b5900; + font-size: 0.76rem; + line-height: 1.6; } .section-label { display: flex; align-items: center; - gap: 0.45rem; - font-size: 0.76rem; - font-weight: 800; - color: #334155; - margin-bottom: 0.5rem; + gap: 0.35rem; + font-size: 0.74rem; + font-weight: 600; + color: #374151; + margin-bottom: 0.4rem; } .section-label::before { content: ''; - width: 0.22rem; - height: 0.9rem; - border-radius: 999px; - background: linear-gradient(180deg, #2563eb, #1d4ed8); - box-shadow: 0 0 8px rgba(37, 99, 235, 0.28); + width: 3px; + height: 0.85rem; + border-radius: 2px; + background: var(--desktop-accent); + box-shadow: none; } .theme-picker { @@ -1600,48 +1654,30 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { display: flex; flex-direction: column; align-items: flex-start; - gap: 0.35rem; + gap: 0.3rem; min-width: 0; padding: 0; text-align: left; overflow: hidden; - background: #f8fafc; - border: 1px solid #cbd5e1; - border-radius: 10px; - transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; + background: #fafafa; + border: 1px solid #d4d4d4; + border-radius: 4px; + transition: border-color 0.15s; } - .theme-option:hover { - border-color: #93c5fd; - box-shadow: var(--ui-shadow-sm); - transform: translateY(-1px); + border-color: var(--desktop-accent); } - .theme-option.active { - border-color: #2563eb; + border-color: var(--desktop-accent); background: #eff6ff; - box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), var(--ui-shadow-md); -} - -.theme-swatches { - display: flex; - width: 100%; - gap: 0; -} - -.theme-swatches i { - flex: 1; - height: 0.55rem; - border-radius: 0; - box-shadow: none; + box-shadow: 0 0 0 1px var(--desktop-accent); } .theme-swatches i:first-child { - border-radius: 9px 0 0 0; + border-radius: 3px 0 0 0; } - .theme-swatches i:last-child { - border-radius: 0 9px 0 0; + border-radius: 0 3px 0 0; } .theme-option strong, @@ -1671,29 +1707,29 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .select, .input { width: 100%; - padding: 0.52rem 0.65rem; - color: #0f172a; + padding: 0.35rem 0.5rem; + color: #1a1a1a; background: #ffffff; - border: 1px solid #b8c0cc; - border-radius: 6px; - font-size: 0.88rem; - margin-bottom: 0.5rem; - transition: border-color 0.12s ease, box-shadow 0.12s ease; + border: 1px solid #c4c4c4; + border-radius: 4px; + font-size: 0.82rem; + margin-bottom: 0.35rem; + transition: border-color 0.12s; } .select:focus, .input:focus { outline: none; background: #fff; - border-color: #2563eb; - box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16); + border-color: var(--desktop-accent); + box-shadow: 0 0 0 1px var(--desktop-accent); } .field-tip { - margin-top: 0.5rem; - font-size: 0.72rem; - line-height: 1.55; - color: #64748b; + margin-top: 0.3rem; + font-size: 0.7rem; + line-height: 1.4; + color: #6e6e6e; } .folder-pick-btn { @@ -1701,13 +1737,13 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } .folder-path { - margin: 0.5rem 0 0; - padding: 0.5rem 0.6rem; - font-size: 0.76rem; - color: #475569; - background: #f8fafc; - border: 1px solid #d1d5db; - border-radius: 6px; + margin: 0.35rem 0 0; + padding: 0.35rem 0.45rem; + font-size: 0.72rem; + color: #555; + background: #f5f5f5; + border: 1px solid #d4d4d4; + border-radius: 3px; word-break: break-all; } @@ -1725,53 +1761,50 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } .serial-btn { - padding: 0.54rem 0.8rem; - color: #0f172a; - background: #f1f5f9; - border: 1px solid #cbd5e1; - border-radius: 8px; + padding: 0.35rem 0.6rem; + color: #1a1a1a; + background: #f3f3f3; + border: 1px solid #c4c4c4; + border-radius: 4px; font-weight: 600; - transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; + font-size: 0.78rem; + transition: background 0.1s; } - .serial-btn:not(:disabled):hover { - background: #e2e8f0; - border-color: #94a3b8; - transform: translateY(-1px); + background: #e5e5e5; + border-color: #a0a0a0; } - .serial-btn.primary { color: #fff; - background: linear-gradient(180deg, #2563eb, #1d4ed8); - border-color: #1e40af; - box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22); + background: var(--desktop-accent); + border-color: var(--desktop-accent); + box-shadow: none; } - .serial-btn.danger { color: #fff; - background: linear-gradient(180deg, #ef4444, #dc2626); - border-color: #b91c1c; - box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); + background: #d32f2f; + border-color: #b71c1c; + box-shadow: none; } - .serial-btn:disabled { - opacity: 0.5; + opacity: 0.45; cursor: not-allowed; } .secondary-btn { width: 100%; - padding: 0.52rem 0.75rem; - color: #1f2937; - background: #e5e7eb; - border: 1px solid #b8c0cc; - border-radius: 6px; + padding: 0.35rem 0.5rem; + color: #1a1a1a; + background: #f3f3f3; + border: 1px solid #c4c4c4; + border-radius: 4px; font-weight: 600; + font-size: 0.78rem; + transition: background 0.1s; } - .secondary-btn:hover { - background: #f1f5f9; - border-color: #94a3b8; + background: #e5e5e5; + border-color: #a0a0a0; } .audio-preview { @@ -1788,15 +1821,15 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } .round-command-item { - padding: 0.58rem; + padding: 0.4rem 0.5rem; background: #fff; - border: 1px solid #d1d5db; - border-radius: 7px; + border: 1px solid #d4d4d4; + border-radius: 4px; } .round-command-item.warn { - border-color: #fdba74; - background: #fff7ed; + border-color: #e5a050; + background: #fffaf0; } .round-command-head { @@ -1874,10 +1907,10 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } .round-roster-group { - padding: 0.58rem; + padding: 0.4rem 0.5rem; background: #fff; - border: 1px solid #d1d5db; - border-radius: 7px; + border: 1px solid #d4d4d4; + border-radius: 4px; } .round-roster-group h3 { @@ -1930,17 +1963,17 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .roster-list li { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.35rem; min-width: 0; - padding: 0.42rem 0.55rem; - font-size: 0.84rem; - background: #fff; - border: 1px solid #e5e7eb; - border-radius: 6px; + padding: 0.25rem 0.4rem; + font-size: 0.78rem; + background: #fafafa; + border: 1px solid #e0e0e0; + border-radius: 3px; } .roster-list li:last-child { - border-bottom: 1px solid #eef2f7; + border-bottom: 1px solid #e0e0e0; } .roster-list .name { @@ -1985,97 +2018,91 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } .start-error { - color: #e63946; - font-size: 0.85rem; - margin-bottom: 0.75rem; + color: #d32f2f; + font-size: 0.78rem; + margin-bottom: 0.5rem; } .action-row { display: grid; grid-template-columns: 1fr; - gap: 0.65rem; - padding: 0.85rem; + gap: 0.5rem; + padding: 0.6rem; margin-top: 0; - background: linear-gradient(180deg, #eff6ff, #dbeafe); - border: 1px solid rgba(147, 197, 253, 0.65); - border-radius: 10px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); + background: #f0f0f0; + border: 1px solid #d4d4d4; + border-radius: 4px; } .start-btn, .projection-btn { width: 100%; - padding: 0.78rem 1rem; - font-size: 0.98rem; - font-weight: 800; - letter-spacing: 0.04em; + padding: 0.5rem 0.75rem; + font-size: 0.88rem; + font-weight: 700; + letter-spacing: 0.02em; color: #fff; border: 1px solid transparent; - border-radius: 8px; - transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; + border-radius: 4px; + transition: background 0.1s, opacity 0.1s; } .start-btn { - background: linear-gradient(180deg, #f97316, #ea580c); - border-color: #c2410c; - box-shadow: 0 6px 18px rgba(234, 88, 12, 0.28); + background: #d97706; + border-color: #b45309; } .projection-btn { - background: linear-gradient(180deg, #2563eb, #1d4ed8); - border-color: #1e40af; - box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28); + background: var(--desktop-accent); + border-color: #005fb8; } .start-btn:not(.disabled):hover, .projection-btn:not(.disabled):hover { - filter: brightness(1.05); - transform: translateY(-1px); -} - -.start-btn:disabled, -.projection-btn:disabled { - opacity: 0.45; - cursor: not-allowed; + filter: brightness(1.08); } .start-btn.disabled, -.projection-btn.disabled { - background: #94a3b8; - border-color: #64748b; +.projection-btn.disabled, +.start-btn:disabled, +.projection-btn:disabled { + background: #a0a0a0; + border-color: #888; + opacity: 0.55; + cursor: not-allowed; } .empty-preview { - padding: 0.85rem; + padding: 0.6rem; text-align: center; - font-size: 0.85rem; - color: #94a3b8; - background: #fff; - border: 1px dashed #cbd5e1; - border-radius: 7px; + font-size: 0.8rem; + color: #888; + background: #fafafa; + border: 1px dashed #c4c4c4; + border-radius: 4px; } .page-config-modal { position: fixed; inset: 0; z-index: 200; - padding: 1rem; - background: rgba(15, 23, 42, 0.58); + padding: 1.5rem; + background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; } .page-config-shell { - width: min(1280px, 98vw); - max-height: 96vh; + width: min(1280px, 96vw); + max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; - background: #f3f4f6; - border: 1px solid #b8c0cc; - border-radius: 10px; - box-shadow: 0 18px 56px rgba(15, 23, 42, 0.38); + background: #f3f3f3; + border: 1px solid #a0a0a0; + border-radius: 6px; + box-shadow: 0 8px 40px rgba(0,0,0,0.25); } .page-config-header { @@ -2083,38 +2110,40 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { align-items: center; justify-content: space-between; gap: 1rem; - padding: 0.75rem 1rem; - background: linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%); - border-bottom: 1px solid #cbd5e1; + padding: 0.5rem 0.8rem; + background: #e8e8e8; + border-bottom: 1px solid #c4c4c4; + user-select: none; } .page-config-header h2 { - font-size: 1.1rem; - color: #111827; + font-size: 0.95rem; + color: #1a1a1a; } .page-config-header p { - margin-top: 0.25rem; - font-size: 0.78rem; - color: #6b7280; + margin-top: 0.15rem; + font-size: 0.72rem; + color: #6e6e6e; } .modal-close { flex-shrink: 0; - padding: 0.52rem 0.85rem; + padding: 0.3rem 0.6rem; color: #fff; - background: #2563eb; - border: 1px solid #1d4ed8; - border-radius: 6px; - font-weight: 700; + background: var(--desktop-accent); + border: 1px solid #005fb8; + border-radius: 4px; + font-weight: 600; + font-size: 0.78rem; } .page-config-body { min-height: 0; - padding: 0.85rem; + padding: 0.6rem; display: grid; - grid-template-columns: minmax(0, 1fr) 260px; - gap: 1rem; + grid-template-columns: minmax(0, 1fr) 220px; + gap: 0.6rem; overflow: auto; } @@ -2124,8 +2153,8 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { overflow: hidden; background-size: cover; background-position: center; - border-radius: 7px; - border: 1px solid #111827; + border-radius: 4px; + border: 1px solid #888; cursor: crosshair; } @@ -2143,7 +2172,7 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { color: #fff; background: rgba(251, 191, 36, 0.14); border: 2px dashed #fbbf24; - border-radius: 14px; + border-radius: 8px; box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.12); cursor: move; user-select: none; @@ -2215,42 +2244,28 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .page-config-controls { display: grid; - gap: 0.85rem; + gap: 0.5rem; align-content: start; } .page-config-controls section { - padding: 0.75rem; - background: #fff; - border: 1px solid #d1d5db; - border-radius: 7px; + padding: 0.5rem; + background: #fafafa; + border: 1px solid #d4d4d4; + border-radius: 4px; } .page-config-controls h3 { - margin-bottom: 0.6rem; - font-size: 0.9rem; - color: #111827; -} - -.page-config-controls label { - display: grid; - grid-template-columns: auto 1fr auto; - align-items: center; - gap: 0.6rem; - font-size: 0.78rem; - color: #4b5563; -} - -.page-config-controls input[type='range'] { - width: 100%; - accent-color: #f7931e; + margin-bottom: 0.35rem; + font-size: 0.82rem; + color: #1a1a1a; } .page-config-controls p { - margin-top: 0.45rem; - font-size: 0.75rem; - line-height: 1.5; - color: #64748b; + margin-top: 0.3rem; + font-size: 0.7rem; + line-height: 1.4; + color: #6e6e6e; } @media (max-width: 1100px) { @@ -2260,6 +2275,8 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { .preview-panel { position: static; + border-left: none; + border-top: 1px solid #d4d4d4; } } @@ -2289,20 +2306,20 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { @media (max-width: 520px) { .config-page { - padding: 0.5rem; + padding: 0; } .config-card { min-height: calc(100vh - 1rem); - border-radius: 10px; + border-radius: 0; } .config-header { - padding-left: 1rem; + padding-left: 0.6rem; } .config-layout { - padding: 0.6rem; + padding: 0.4rem; } .config-status { @@ -2318,32 +2335,52 @@ function debugTimeupProjectionReport(hypothesisId, location, msg, data = {}) { } } +/* 桌面状态栏 */ +.config-statusbar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + height: var(--desktop-statusbar-height); + padding: 0 0.6rem; + background: #e0e0e0; + border-top: 1px solid #c4c4c4; + font-size: 0.68rem; + color: #555; + user-select: none; +} + +.statusbar-hint { + color: #999; + font-size: 0.65rem; +} + .folder-hint { - margin-top: 1.75rem; - padding-top: 1.25rem; - border-top: 1px dashed #e0e0e0; - font-size: 0.75rem; + margin-top: 1rem; + padding-top: 0.75rem; + border-top: 1px solid #d4d4d4; + font-size: 0.72rem; color: #888; } .folder-hint h3 { - font-size: 0.8rem; + font-size: 0.76rem; color: #555; - margin-bottom: 0.5rem; + margin-bottom: 0.3rem; } .folder-hint pre { - background: #f8f9fa; - padding: 0.75rem; - border-radius: 6px; + background: #f5f5f5; + padding: 0.5rem; + border-radius: 4px; overflow-x: auto; - line-height: 1.45; - margin-bottom: 0.5rem; + line-height: 1.4; + margin-bottom: 0.3rem; } .folder-hint code { - background: #f0f0f0; - padding: 0.1em 0.35em; - border-radius: 4px; + background: #eee; + padding: 0.1em 0.3em; + border-radius: 3px; } diff --git a/src/views/RopeSkippingCounter.vue b/src/views/RopeSkippingCounter.vue index cbf8004..cfc595e 100644 --- a/src/views/RopeSkippingCounter.vue +++ b/src/views/RopeSkippingCounter.vue @@ -781,37 +781,33 @@ function debugCountdownStopCounterReport(hypothesisId, location, msg, data = {})