diff --git a/frontend/index.html b/frontend/index.html index 0fca6f0..bbbb74b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,10 +1,11 @@ - + - frontend + + CamTalk — AI 视觉对话助手
diff --git a/frontend/src/App.css b/frontend/src/App.css index 330c48c..fdfb826 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,33 +1,41 @@ /* ============================================================ CamTalk — Web 端应用样式 双栏布局：左侧视频面板 + 右侧聊天面板 + + 设计方向：深色科技极简，Ethereal Glass 美学 + 字体：Inter 优先，系统字体栈兜底 + 颜色：冷灰体系，单一蓝色强调色 ============================================================ */ :root { - --color-primary: #2563eb; - --color-primary-hover: #1d4ed8; - --color-bg: #0b0f1a; - --color-surface: #151b2b; - --color-surface-2: #1c2438; - --color-text: #e2e8f0; - --color-text-muted: #64748b; - --color-border: #1e293b; - --color-success: #22c55e; - --color-warning: #f59e0b; - --color-error: #ef4444; - --radius: 10px; - --radius-sm: 6px; + --color-primary: #3b82f6; + --color-primary-hover: #2563eb; + --color-bg: #0a0a0f; + --color-surface: #111118; + --color-surface-2: #1a1a24; + --color-surface-3: #22222e; + --color-text: #d4d4dc; + --color-text-muted: #5a5a6e; + --color-border: #1f1f2a; + --color-success: #34d399; + --color-warning: #fbbf24; + --color-error: #f87171; + --radius: 12px; + --radius-sm: 8px; + --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); + --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="light"] { --color-primary: #2563eb; --color-primary-hover: #1d4ed8; - --color-bg: #f1f5f9; + --color-bg: #f4f4f8; --color-surface: #ffffff; - --color-surface-2: #f8fafc; - --color-text: #0f172a; - --color-text-muted: #64748b; - --color-border: #e2e8f0; + --color-surface-2: #f0f0f5; + --color-surface-3: #e8e8ee; + --color-text: #111118; + --color-text-muted: #6b6b80; + --color-border: #dddde5; --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; @@ -44,9 +52,12 @@ html, body, #root { } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; + font-variant-numeric: tabular-nums; background: var(--color-bg); color: var(--color-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } /* ---- App Shell ---- */ @@ -64,11 +75,14 @@ body { display: flex; align-items: center; justify-content: space-between; - padding: 0 20px; - height: 48px; + padding: 0 24px; + height: 56px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); + box-shadow: 0 1px 8px rgba(10, 10, 15, 0.3); flex-shrink: 0; + position: relative; + z-index: 10; } .header__left { @@ -78,14 +92,17 @@ body { } .header__title { - font-size: 1.2rem; - font-weight: 700; + font-size: 1.15rem; + font-weight: 600; + letter-spacing: -0.02em; color: var(--color-text); } .header__subtitle { - font-size: 0.8rem; + font-size: 0.78rem; + font-weight: 400; color: var(--color-text-muted); + letter-spacing: 0.01em; } .header__right { @@ -95,30 +112,34 @@ body { } .header__stats { - font-size: 0.75rem; + font-size: 0.72rem; color: var(--color-text-muted); - padding: 4px 10px; + padding: 4px 12px; background: var(--color-surface-2); - border-radius: 12px; + border-radius: 20px; + font-weight: 500; + letter-spacing: 0.01em; } .badge { - font-size: 0.75rem; - padding: 3px 10px; - border-radius: 12px; + font-size: 0.72rem; + padding: 4px 12px; + border-radius: 20px; font-weight: 500; + letter-spacing: 0.01em; + transition: all var(--transition-fast); } .badge--connected { color: var(--color-success); - background: rgba(34, 197, 94, 0.1); - border: 1px solid rgba(34, 197, 94, 0.3); + background: rgba(52, 211, 153, 0.08); + border: 1px solid rgba(52, 211, 153, 0.2); } .badge--connecting { color: var(--color-warning); - background: rgba(245, 158, 11, 0.1); - border: 1px solid rgba(245, 158, 11, 0.3); + background: rgba(251, 191, 36, 0.08); + border: 1px solid rgba(251, 191, 36, 0.2); } .badge--disconnected { @@ -132,10 +153,13 @@ body { border: none; font-size: 1.1rem; cursor: pointer; - padding: 6px; + padding: 8px; border-radius: var(--radius-sm); - transition: background 0.15s; + transition: all var(--transition-fast); color: var(--color-text-muted); + display: inline-flex; + align-items: center; + justify-content: center; } .btn-icon:hover { @@ -143,6 +167,10 @@ body { color: var(--color-text); } +.btn-icon:active { + transform: scale(0.92); +} + .lang-group { display: flex; gap: 2px; @@ -158,9 +186,9 @@ body { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; - border-radius: 4px; + border-radius: 6px; cursor: pointer; - transition: all 0.15s; + transition: all var(--transition-fast); } .lang-btn:hover { @@ -187,8 +215,8 @@ body { flex-shrink: 0; display: flex; flex-direction: column; - padding: 16px; - gap: 12px; + padding: 20px; + gap: 14px; } .video-container { @@ -198,6 +226,11 @@ body { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); + transition: border-color var(--transition-fast); +} + +.video-container:hover { + border-color: var(--color-surface-3); } .video-container .video-preview { @@ -210,7 +243,7 @@ body { width: 100%; height: 100%; object-fit: cover; - background: #1a1a2e; + background: #12121a; } .video-placeholder { @@ -220,14 +253,15 @@ body { flex-direction: column; align-items: center; justify-content: center; - gap: 8px; + gap: 10px; color: var(--color-text-muted); font-size: 0.82rem; + font-weight: 400; } .video-placeholder__icon { - font-size: 2.4rem; - opacity: 0.2; + font-size: 2.2rem; + opacity: 0.15; margin-bottom: 4px; } @@ -235,14 +269,15 @@ body { position: absolute; bottom: 16px; left: 16px; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(8px); + background: rgba(10, 10, 15, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); color: var(--color-success); padding: 6px 14px; border-radius: var(--radius-sm); - font-size: 0.8rem; + font-size: 0.78rem; font-weight: 500; - animation: pulse 1.5s ease-in-out infinite; + animation: pulse 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; } .live-badge { @@ -252,22 +287,23 @@ body { display: flex; align-items: center; gap: 6px; - background: rgba(0, 0, 0, 0.75); - backdrop-filter: blur(8px); + background: rgba(10, 10, 15, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); color: white; - padding: 4px 12px; + padding: 5px 12px; border-radius: var(--radius-sm); - font-size: 0.75rem; + font-size: 0.72rem; font-weight: 600; - letter-spacing: 0.5px; + letter-spacing: 0.04em; } .live-badge__dot { - width: 8px; - height: 8px; + width: 7px; + height: 7px; border-radius: 50%; background: var(--color-success); - animation: pulse 1.5s ease-in-out infinite; + animation: pulse 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; } .video-indicator--loading { color: var(--color-warning); } @@ -278,45 +314,49 @@ body { position: absolute; top: 12px; right: 12px; - background: rgba(37, 99, 235, 0.85); - backdrop-filter: blur(8px); + background: rgba(59, 130, 246, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); color: white; padding: 3px 10px; border-radius: var(--radius-sm); - font-size: 0.7rem; + font-size: 0.68rem; font-weight: 700; - letter-spacing: 0.5px; + letter-spacing: 0.06em; } .observation-badge { position: absolute; top: 12px; left: 12px; - background: rgba(34, 197, 94, 0.85); - backdrop-filter: blur(8px); + background: rgba(52, 211, 153, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); color: white; padding: 3px 10px; border-radius: var(--radius-sm); - font-size: 0.7rem; + font-size: 0.68rem; font-weight: 700; - animation: pulse 2s ease-in-out infinite; + letter-spacing: 0.04em; + animation: pulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; } .video-overlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.35); + background: rgba(10, 10, 15, 0.4); display: flex; align-items: center; justify-content: center; - backdrop-filter: blur(2px); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); } .video-overlay__spinner { width: 36px; height: 36px; - border: 3px solid rgba(255, 255, 255, 0.2); - border-top-color: white; + border: 2.5px solid rgba(255, 255, 255, 0.15); + border-top-color: rgba(255, 255, 255, 0.8); border-radius: 50%; animation: spin 0.8s linear infinite; } @@ -327,53 +367,66 @@ body { flex-shrink: 0; display: flex; justify-content: center; - padding: 4px 0; + padding: 6px 0; } .video-controls__row { display: flex; - gap: 6px; + gap: 8px; flex-wrap: wrap; justify-content: center; } .btn--ctrl { - padding: 6px 12px; + padding: 7px 14px; font-size: 0.78rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-muted); cursor: pointer; - transition: all 0.15s; + transition: all var(--transition-fast); white-space: nowrap; } .btn--ctrl:hover { - background: var(--color-border); + background: var(--color-surface-3); color: var(--color-text); + border-color: var(--color-surface-3); +} + +.btn--ctrl:active { + transform: translateY(1px); } .btn--ctrl-on { - background: rgba(34, 197, 94, 0.15); + background: rgba(52, 211, 153, 0.1); color: var(--color-success); - border-color: rgba(34, 197, 94, 0.3); + border-color: rgba(52, 211, 153, 0.25); +} + +.btn--ctrl-on:hover { + background: rgba(52, 211, 153, 0.18); } .btn--ctrl-off { - background: rgba(239, 68, 68, 0.1); + background: rgba(248, 113, 113, 0.08); color: var(--color-error); - border-color: rgba(239, 68, 68, 0.2); + border-color: rgba(248, 113, 113, 0.18); +} + +.btn--ctrl-off:hover { + background: rgba(248, 113, 113, 0.15); } .btn--speaking { - animation: micPulse 0.8s ease-in-out infinite; - box-shadow: 0 0 12px rgba(34, 197, 94, 0.5); + animation: micPulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; + box-shadow: 0 0 12px rgba(52, 211, 153, 0.4); } @keyframes micPulse { - 0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); transform: scale(1); } - 50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.8); transform: scale(1.05); } + 0%, 100% { box-shadow: 0 0 8px rgba(52, 211, 153, 0.3); transform: scale(1); } + 50% { box-shadow: 0 0 18px rgba(52, 211, 153, 0.7); transform: scale(1.04); } } /* ---- 右侧聊天面板 ---- */ @@ -391,21 +444,23 @@ body { display: flex; align-items: center; justify-content: space-between; - padding: 12px 16px; + padding: 14px 24px; font-weight: 600; - font-size: 0.85rem; + font-size: 0.82rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; color: var(--color-text-muted); + letter-spacing: -0.01em; } .chat-panel-header__mode { - font-size: 0.7rem; + font-size: 0.68rem; font-weight: 500; color: var(--color-success); - background: rgba(34, 197, 94, 0.1); - padding: 2px 8px; - border-radius: 10px; + background: rgba(52, 211, 153, 0.08); + padding: 3px 10px; + border-radius: 12px; + letter-spacing: 0.02em; } .chat-panel-body { @@ -420,32 +475,57 @@ body { .chat-panel { flex: 1; overflow-y: auto; - padding: 12px 16px; + padding: 16px 24px; display: flex; flex-direction: column; - gap: 10px; + gap: 12px; } .chat-panel--empty { display: flex; + flex-direction: column; align-items: center; justify-content: center; flex: 1; + gap: 12px; color: var(--color-text-muted); font-size: 0.85rem; } +.chat-panel--empty-icon { + font-size: 2.4rem; + opacity: 0.12; + margin-bottom: 4px; +} + +.chat-panel--empty-hint { + font-size: 0.75rem; + opacity: 0.6; + max-width: 240px; + text-align: center; + line-height: 1.5; +} + .chat-message { - padding: 10px 14px; + padding: 12px 16px; border-radius: var(--radius-sm); background: var(--color-surface-2); - max-width: 92%; + max-width: min(92%, 65ch); + transition: background var(--transition-fast); +} + +.chat-message:hover { + background: var(--color-surface-3); } .chat-message--user { border-left: 2px solid var(--color-primary); align-self: flex-end; - background: rgba(37, 99, 235, 0.08); + background: rgba(59, 130, 246, 0.06); +} + +.chat-message--user:hover { + background: rgba(59, 130, 246, 0.1); } .chat-message--assistant { @@ -457,24 +537,27 @@ body { } .chat-message__role { - font-size: 0.65rem; + font-size: 0.62rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.08em; color: var(--color-text-muted); - margin-bottom: 3px; + margin-bottom: 4px; } .chat-message__content { font-size: 0.82rem; - line-height: 1.55; + line-height: 1.65; white-space: pre-wrap; + max-width: 65ch; } .chat-message__meta { - margin-top: 6px; - font-size: 0.65rem; + margin-top: 8px; + font-size: 0.62rem; color: var(--color-text-muted); + font-weight: 400; + letter-spacing: 0.01em; } /* ---- Streaming Cursor ---- */ @@ -483,22 +566,24 @@ body { display: inline; animation: blink 0.8s step-end infinite; color: var(--color-success); + font-weight: 300; } /* ---- System Message ---- */ .system-message { text-align: center; - padding: 8px 16px; - margin: 0 20px; + padding: 10px 16px; + margin: 0 24px; border-radius: var(--radius-sm); - font-size: 0.8rem; + font-size: 0.78rem; + font-weight: 500; } .system-message--warning { - background: rgba(245, 158, 11, 0.1); + background: rgba(251, 191, 36, 0.08); color: var(--color-warning); - border: 1px solid rgba(245, 158, 11, 0.2); + border: 1px solid rgba(251, 191, 36, 0.15); } /* ---- Drawer (Config Panel) ---- */ @@ -507,9 +592,10 @@ body { position: fixed; inset: 0; z-index: 100; - background: rgba(0, 0, 0, 0.4); - backdrop-filter: blur(2px); - animation: fadeIn 0.2s ease; + background: rgba(10, 10, 15, 0.5); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + animation: fadeIn 0.25s var(--transition-smooth); } .drawer { @@ -522,22 +608,23 @@ body { border-left: 1px solid var(--color-border); display: flex; flex-direction: column; - animation: slideInRight 0.25s ease; - box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3); + animation: slideInRight 0.35s var(--transition-smooth); + box-shadow: -8px 0 40px rgba(10, 10, 15, 0.5); } .drawer__header { display: flex; align-items: center; justify-content: space-between; - padding: 14px 16px; + padding: 16px 20px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .drawer__title { font-weight: 600; - font-size: 0.9rem; + font-size: 0.88rem; + letter-spacing: -0.01em; } .drawer__close { @@ -546,9 +633,12 @@ body { color: var(--color-text-muted); cursor: pointer; font-size: 1rem; - padding: 4px 8px; + padding: 6px 8px; border-radius: var(--radius-sm); - transition: all 0.15s; + transition: all var(--transition-fast); + display: inline-flex; + align-items: center; + justify-content: center; } .drawer__close:hover { @@ -556,26 +646,30 @@ body { color: var(--color-text); } +.drawer__close:active { + transform: scale(0.92); +} + .drawer__body { flex: 1; overflow-y: auto; - padding: 16px; + padding: 20px; } /* ---- Config Group ---- */ .config-group { - margin-bottom: 20px; + margin-bottom: 24px; } .config-group__title { - font-size: 0.7rem; + font-size: 0.68rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.8px; + letter-spacing: 0.1em; color: var(--color-text-muted); - margin-bottom: 12px; - padding-bottom: 8px; + margin-bottom: 14px; + padding-bottom: 10px; border-bottom: 1px solid var(--color-border); } @@ -583,16 +677,23 @@ body { display: flex; align-items: center; justify-content: space-between; - padding: 10px 0; + padding: 10px 8px; + margin: 0 -8px; font-size: 0.82rem; color: var(--color-text); cursor: pointer; + border-radius: var(--radius-sm); + transition: background var(--transition-fast); +} + +.config-row:hover { + background: var(--color-surface-2); } .config-row__info { display: flex; flex-direction: column; - gap: 2px; + gap: 3px; } .config-row__label { @@ -601,8 +702,9 @@ body { } .config-row__desc { - font-size: 0.72rem; + font-size: 0.7rem; color: var(--color-text-muted); + line-height: 1.4; } .config-row select, @@ -611,23 +713,36 @@ body { color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); - padding: 5px 10px; - font-size: 0.8rem; + padding: 6px 10px; + font-size: 0.78rem; cursor: pointer; + transition: all var(--transition-fast); +} + +.config-row select:hover, +.config-row input[type="checkbox"]:hover { + border-color: var(--color-surface-3); +} + +.config-row select:focus, +.config-row input[type="checkbox"]:focus { + outline: 2px solid rgba(59, 130, 246, 0.4); + outline-offset: 1px; } .config-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; + accent-color: var(--color-primary); } /* ---- Toast ---- */ .toast-container { position: fixed; - top: 68px; - right: 20px; + top: 72px; + right: 24px; z-index: 1000; display: flex; flex-direction: column; @@ -637,16 +752,30 @@ body { .toast { padding: 10px 16px; border-radius: var(--radius-sm); - font-size: 0.82rem; + font-size: 0.8rem; + font-weight: 500; cursor: pointer; - animation: slideIn 0.3s ease-out; + animation: slideIn 0.35s var(--transition-smooth); max-width: 320px; - backdrop-filter: blur(8px); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + box-shadow: 0 8px 32px rgba(10, 10, 15, 0.4); } -.toast--error { background: rgba(239, 68, 68, 0.9); color: white; } -.toast--warning { background: rgba(245, 158, 11, 0.9); color: #000; } -.toast--info { background: rgba(37, 99, 235, 0.9); color: white; } +.toast--error { + background: rgba(248, 113, 113, 0.92); + color: white; +} + +.toast--warning { + background: rgba(251, 191, 36, 0.92); + color: #111; +} + +.toast--info { + background: rgba(59, 130, 246, 0.92); + color: white; +} /* ---- Buttons ---- */ @@ -654,18 +783,23 @@ body { padding: 8px 20px; border: none; border-radius: var(--radius-sm); - font-size: 0.85rem; + font-size: 0.82rem; font-weight: 600; cursor: pointer; - transition: all 0.15s; + transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 6px; + letter-spacing: 0.01em; +} + +.btn:active { + transform: translateY(1px); } .btn--lg { padding: 12px 32px; - font-size: 0.95rem; + font-size: 0.92rem; border-radius: var(--radius); } @@ -685,43 +819,46 @@ body { } .btn--secondary:hover { - background: var(--color-border); + background: var(--color-surface-3); + border-color: var(--color-surface-3); } .btn--warning { background: var(--color-warning); - color: #000; + color: #111; } -.btn--warning:hover { opacity: 0.9; } +.btn--warning:hover { + opacity: 0.9; +} .btn--danger { - background: rgba(239, 68, 68, 0.15); + background: rgba(248, 113, 113, 0.1); color: var(--color-error); - border: 1px solid rgba(239, 68, 68, 0.3); + border: 1px solid rgba(248, 113, 113, 0.2); } .btn--danger:hover { - background: rgba(239, 68, 68, 0.25); + background: rgba(248, 113, 113, 0.18); } .btn--active { background: var(--color-primary); color: white; - box-shadow: 0 0 12px rgba(37, 99, 235, 0.4); - animation: pulseBtn 2s ease-in-out infinite; + box-shadow: 0 0 12px rgba(59, 130, 246, 0.35); + animation: pulseBtn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; } /* ---- Animations ---- */ @keyframes pulse { 0%, 100% { opacity: 1; } - 50% { opacity: 0.6; } + 50% { opacity: 0.55; } } @keyframes pulseBtn { - 0%, 100% { box-shadow: 0 0 12px rgba(37, 99, 235, 0.4); } - 50% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.7); } + 0%, 100% { box-shadow: 0 0 12px rgba(59, 130, 246, 0.35); } + 50% { box-shadow: 0 0 22px rgba(59, 130, 246, 0.6); } } @keyframes blink { @@ -734,7 +871,7 @@ body { } @keyframes slideIn { - from { opacity: 0; transform: translateX(20px); } + from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @@ -751,7 +888,7 @@ body { /* ---- Scrollbar ---- */ ::-webkit-scrollbar { - width: 6px; + width: 4px; } ::-webkit-scrollbar-track { @@ -760,7 +897,7 @@ body { ::-webkit-scrollbar-thumb { background: var(--color-border); - border-radius: 3px; + border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ffd567b..0ef33b5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -108,8 +108,12 @@ function App() { className="btn-icon" onClick={() => setShowConfig((v) => !v)} title="设置" + aria-label="设置" > - ⚙️ + + + + @@ -161,8 +165,11 @@ function App() { )} {!isConnected && !stream && (
- 📷 - 点击右侧按钮开始对话 + + + + + 点击下方按钮开始对话
)} diff --git a/frontend/src/components/ChatPanel/index.tsx b/frontend/src/components/ChatPanel/index.tsx index bed57de..0e6ce3a 100644 --- a/frontend/src/components/ChatPanel/index.tsx +++ b/frontend/src/components/ChatPanel/index.tsx @@ -44,13 +44,17 @@ export function ChatPanel({ messages, currentReply, connectionStatus }: ChatPane if (connectionStatus !== "connected") { return (
+ 💬

点击下方按钮开始对话

+ 连接后可通过摄像头和麦克风与 AI 交互
); } return (
+ 🎙️

对着摄像头说话即可

+ AI 会自动识别你的语音并分析画面
); }