XEngineers/CamTalk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles：美化样式 #207

Merged
cfy777 merged 4 commits from feat/styles into main 2026-06-22 19:32:47 +08:00
Conversation 0 Commits 4 Files Changed 3 +153 -121
3 changed files with 153 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
frontend/src/App.css
View File

@@ -241,17 +241,20 @@ body {
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
overflow: hidden; overflow: hidden;
box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4); box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4);
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
} }
.sidebar--collapsed { .sidebar--collapsed {
transform: translateX(-100%); transform: translateX(-100%);
pointer-events: none; pointer-events: none;
visibility: hidden;
} }
.sidebar--open { .sidebar--open {
transform: translateX(0); transform: translateX(0);
pointer-events: auto; pointer-events: auto;
visibility: visible;
transition: transform 0.2s ease-out, visibility 0s linear 0s;
} }
.sidebar__header { .sidebar__header {
@@ -912,6 +915,8 @@ body {
gap: 10px; gap: 10px;
padding: 6px 0; padding: 6px 0;
background: transparent; background: transparent;
max-width: 100%;
align-self: center;
} }
.chat-message--system::before, .chat-message--system::before,
@@ -1389,6 +1394,11 @@ body {
to { opacity: 1; } to { opacity: 1; }
} }
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Scrollbar ---- */ /* ---- Scrollbar ---- */
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -2203,7 +2213,7 @@ body {
} }
/* ============================================================ /* ============================================================
Custom Scenarios Styles Custom Scenarios Styles — 白色商务风格（使用 CSS 变量）
============================================================ */ ============================================================ */
/* Scenario list */ /* Scenario list */
@@ -2219,16 +2229,16 @@ body {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 10px 12px; padding: 10px 12px;
background: rgba(255, 255, 255, 0.03); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.scenario-item:hover { .scenario-item:hover {
background: rgba(255, 255, 255, 0.06); background: var(--color-surface-3);
border-color: rgba(255, 255, 255, 0.15); border-color: var(--color-surface-3);
} }
.scenario-item input[type="radio"] { .scenario-item input[type="radio"] {
@@ -2243,12 +2253,12 @@ body {
.scenario-item__name { .scenario-item__name {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
.scenario-item__desc { .scenario-item__desc {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.5); color: var(--color-text-muted);
margin-top: 2px; margin-top: 2px;
} }
@@ -2281,28 +2291,31 @@ body {
.scenario-action-btn { .scenario-action-btn {
padding: 4px 8px; padding: 4px 8px;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: var(--radius-sm);
font-size: 14px; font-size: 14px;
color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.scenario-action-btn:hover { .scenario-action-btn:hover {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-2);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--color-surface-3);
color: var(--color-text);
} }
.scenario-action-btn--confirm { .scenario-action-btn--confirm {
background: rgba(248, 113, 113, 0.15); background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.3); border-color: rgba(248, 113, 113, 0.2);
color: var(--color-error);
} }
.scenario-empty { .scenario-empty {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
color: rgba(255, 255, 255, 0.4); color: var(--color-text-muted);
font-style: italic; font-style: italic;
} }
@@ -2311,17 +2324,17 @@ body {
margin-left: auto; margin-left: auto;
padding: 4px 12px; padding: 4px 12px;
font-size: 12px; font-size: 12px;
background: rgba(196, 97, 47, 0.15); background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(196, 97, 47, 0.3); border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 999px; border-radius: 999px;
color: #C4612F; color: var(--color-primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.config-create-btn:hover { .config-create-btn:hover {
background: rgba(196, 97, 47, 0.25); background: rgba(59, 130, 246, 0.16);
border-color: rgba(196, 97, 47, 0.5); border-color: rgba(59, 130, 246, 0.4);
} }
.config-group__title { .config-group__title {
@@ -2337,25 +2350,30 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7); background: rgba(10, 10, 15, 0.45);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10000; z-index: 10000;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: fadeIn 0.2s; animation: fadeIn 0.2s;
} }
[data-theme="light"] .modal-overlay {
background: rgba(0, 0, 0, 0.3);
}
.modal { .modal {
background: #1F2421; background: var(--color-surface);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius);
width: 90%; width: 90%;
max-width: 600px; max-width: 600px;
max-height: 85vh; max-height: 85vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); box-shadow: 0 16px 48px rgba(10, 10, 15, 0.25);
animation: slideUp 0.3s; animation: slideUp 0.3s;
} }
@@ -2368,20 +2386,21 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 24px; padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid var(--color-border);
} }
.modal__title { .modal__title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 600;
color: rgba(255, 255, 255, 0.95); color: var(--color-text);
letter-spacing: -0.01em;
} }
.modal__close { .modal__close {
background: transparent; background: transparent;
border: none; border: none;
font-size: 24px; font-size: 20px;
color: rgba(255, 255, 255, 0.6); color: var(--color-text-muted);
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
width: 32px; width: 32px;
@@ -2389,13 +2408,13 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 6px; border-radius: var(--radius-sm);
transition: all 0.2s; transition: all var(--transition-fast);
} }
.modal__close:hover { .modal__close:hover {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-2);
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
.modal__body { .modal__body {
@@ -2409,7 +2428,7 @@ body {
gap: 12px; gap: 12px;
justify-content: flex-end; justify-content: flex-end;
padding-top: 16px; padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid var(--color-border);
margin-top: 8px; margin-top: 8px;
} }
@@ -2424,12 +2443,12 @@ body {
gap: 8px; gap: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 0.85); color: var(--color-text);
margin-bottom: 8px; margin-bottom: 8px;
} }
.form-required { .form-required {
color: #C4612F; color: var(--color-primary);
} }
.form-input, .form-input,
@@ -2437,21 +2456,28 @@ body {
.form-select { .form-select {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
background: rgba(255, 255, 255, 0.05); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
transition: all 0.2s; transition: all var(--transition-fast);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
} }
.form-input:focus, .form-input:focus,
.form-textarea:focus, .form-textarea:focus,
.form-select:focus { .form-select:focus {
outline: none; outline: none;
border-color: rgba(196, 97, 47, 0.5); border-color: var(--color-primary);
background: rgba(255, 255, 255, 0.08); background: var(--color-surface);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
} }
.form-textarea { .form-textarea {
@@ -2465,15 +2491,15 @@ body {
display: block; display: block;
margin-top: 4px; margin-top: 4px;
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.4); color: var(--color-text-muted);
} }
.form-error { .form-error {
padding: 12px; padding: 12px;
background: rgba(248, 113, 113, 0.15); background: rgba(248, 113, 113, 0.08);
border: 1px solid rgba(248, 113, 113, 0.3); border: 1px solid rgba(248, 113, 113, 0.2);
border-radius: 6px; border-radius: var(--radius-sm);
color: #f87171; color: var(--color-error);
font-size: 13px; font-size: 13px;
margin-top: 12px; margin-top: 12px;
} }
@@ -2493,129 +2519,112 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
background: rgba(255, 255, 255, 0.03); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.icon-picker__item:hover { .icon-picker__item:hover {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-3);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--color-surface-3);
transform: scale(1.05); transform: scale(1.05);
} }
.icon-picker__item--active { .icon-picker__item--active {
background: rgba(196, 97, 47, 0.2); background: rgba(59, 130, 246, 0.1);
border-color: rgba(196, 97, 47, 0.5); border-color: rgba(59, 130, 246, 0.4);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
} }
/* Prompt guide */ /* Prompt guide */
.form-guide-btn { .form-guide-btn {
background: transparent; background: transparent;
border: none; border: none;
color: #C4612F; color: var(--color-primary);
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: var(--radius-sm);
margin-left: auto; margin-left: auto;
transition: all 0.2s; transition: all var(--transition-fast);
} }
.form-guide-btn:hover { .form-guide-btn:hover {
background: rgba(196, 97, 47, 0.1); background: rgba(59, 130, 246, 0.06);
} }
.form-guide { .form-guide {
background: rgba(255, 255, 255, 0.03); background: var(--color-surface-2);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-sm);
padding: 16px; padding: 16px;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
color: var(--color-text);
} }
.form-guide strong { .form-guide strong {
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
.form-guide ul { .form-guide ul {
margin: 8px 0; margin: 8px 0;
padding-left: 20px; padding-left: 20px;
color: rgba(255, 255, 255, 0.7); color: var(--color-text-muted);
} }
.form-guide__code { .form-guide__code {
background: rgba(0, 0, 0, 0.3); background: var(--color-surface-3);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
overflow-x: auto; overflow-x: auto;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
color: rgba(255, 255, 255, 0.8); color: var(--color-text);
} }
/* Buttons */ /* Buttons (modal-scoped overrides — only affect modal context) */
.btn { .modal .btn {
padding: 10px 20px; padding: 10px 20px;
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all var(--transition-fast);
border: 1px solid transparent; border: 1px solid transparent;
} }
.btn:disabled { .modal .btn:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.btn--primary { .modal .btn--primary {
background: #C4612F; background: var(--color-primary);
color: white; color: white;
border-color: #C4612F; border-color: var(--color-primary);
} }
.btn--primary:hover:not(:disabled) { .modal .btn--primary:hover:not(:disabled) {
background: #A94E22; background: var(--color-primary-hover);
border-color: #A94E22; border-color: var(--color-primary-hover);
} }
.btn--secondary { .modal .btn--secondary {
background: transparent; background: var(--color-surface-2);
color: rgba(255, 255, 255, 0.7); color: var(--color-text-muted);
border-color: rgba(255, 255, 255, 0.2); border-color: var(--color-border);
} }
.btn--secondary:hover:not(:disabled) { .modal .btn--secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08); background: var(--color-surface-3);
border-color: rgba(255, 255, 255, 0.3); border-color: var(--color-surface-3);
color: rgba(255, 255, 255, 0.9); color: var(--color-text);
} }
/* Animations */ /* Animations — fadeIn & slideUp defined in main animation section above */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

20
frontend/src/App.tsx
View File

@@ -21,6 +21,15 @@ import { loadConfig, loadTheme, saveTheme } from "./lib/storage";
import { I18nContext, parseLocale, t } from "./lib/i18n"; import { I18nContext, parseLocale, t } from "./lib/i18n";
import { renderScenarioIconById } from "./lib/scenarioIcons"; import { renderScenarioIconById } from "./lib/scenarioIcons";
import type { Locale } from "./lib/i18n"; import type { Locale } from "./lib/i18n";
/** SVG 图标 ID → emoji 映射（用于纯文本场景，如系统消息） */
const ICON_ID_TO_EMOJI: Record<string, string> = {
sparkles: "✨", theater: "🎭", palette: "🎨", target: "🎯", film: "🎬",
"book-open": "📖", book: "📚", edit: "✏️", clipboard: "📋", "map-pin": "📍",
search: "🔍", lightbulb: "💡", briefcase: "💼", code: "💻", "graduation-cap": "🎓",
mic: "🎤", music: "🎵", globe: "🌐", heart: "❤️", shield: "🛡️",
zap: "⚡", coffee: "☕", tool: "🔧", "message-circle": "💬",
};
import type { Theme } from "./types"; import type { Theme } from "./types";
import type { UserScenario } from "./lib/api/scenarios"; import type { UserScenario } from "./lib/api/scenarios";
import "./App.css"; import "./App.css";
@@ -228,10 +237,14 @@ function AppContent() {
} }
} }
updateConfig(updates); updateConfig(updates);
// 插入系统提示消息 // 插入系统提示消息（自建情景的 icon 是 SVG ID，需转为 emoji）
const scenarioName = sc const iconText = sc
? `${sc.icon} ${sc.nameKey ? tr(sc.nameKey) : sc.name}` ? (ICON_ID_TO_EMOJI[sc.icon] || sc.icon)
: "";
const displayName = sc
? (sc.nameKey ? tr(sc.nameKey) : sc.name)
: scenarioId; : scenarioId;
const scenarioName = iconText ? `${iconText} ${displayName}` : displayName;
setMessages(prev => [...prev, { setMessages(prev => [...prev, {
id: uuidv4(), id: uuidv4(),
role: "system", role: "system",
@@ -607,6 +620,7 @@ function AppContent() {
currentReply={currentReply} currentReply={currentReply}
connectionStatus={connectionStatus} connectionStatus={connectionStatus}
currentScenario={config.scenario} currentScenario={config.scenario}
allScenarios={allScenarios}
isProcessing={isProcessing} isProcessing={isProcessing}
isVADReady={isVADReady} isVADReady={isVADReady}
vadError={vadError ?? undefined} vadError={vadError ?? undefined}

17
frontend/src/components/ChatPanel/index.tsx
View File

@@ -7,6 +7,7 @@
import { useEffect, useRef, useState, type ReactNode } from "react"; import { useEffect, useRef, useState, type ReactNode } from "react";
import { useI18n } from "../../lib/i18n"; import { useI18n } from "../../lib/i18n";
import { scenarios } from "../../lib/scenarios"; import { scenarios } from "../../lib/scenarios";
import type { ExtendedScenario } from "../../hooks/useScenarios";
import type { ChatMessage } from "../../types"; import type { ChatMessage } from "../../types";
import type { ConnectionStatus } from "../../lib/websocket"; import type { ConnectionStatus } from "../../lib/websocket";
@@ -15,6 +16,7 @@ interface ChatPanelProps {
currentReply?: string; currentReply?: string;
connectionStatus: ConnectionStatus; connectionStatus: ConnectionStatus;
currentScenario?: string; currentScenario?: string;
allScenarios?: ExtendedScenario[];
isProcessing?: boolean; isProcessing?: boolean;
isVADReady?: boolean; isVADReady?: boolean;
vadError?: string | null; vadError?: string | null;
@@ -43,6 +45,7 @@ export function ChatPanel({
currentReply, currentReply,
connectionStatus, connectionStatus,
currentScenario, currentScenario,
allScenarios,
isProcessing, isProcessing,
isVADReady, isVADReady,
vadError, vadError,
@@ -103,6 +106,10 @@ export function ChatPanel({
} }
}; };
// 当前情景对象（优先从 allScenarios 查找，含自建情景；兜底用系统情景）
const scenarioList = allScenarios || scenarios;
const activeScenarioObj = scenarioList.find(sc => sc.id === activeScenario);
return ( return (
<div className="chat-panel"> <div className="chat-panel">
<div className="chat-panel__messages" ref={containerRef}> <div className="chat-panel__messages" ref={containerRef}>
@@ -111,11 +118,13 @@ export function ChatPanel({
<div className="chat-panel__scenario-hint"> <div className="chat-panel__scenario-hint">
<div className="scenario-hint-card"> <div className="scenario-hint-card">
<span className="scenario-hint-card__icon"> <span className="scenario-hint-card__icon">
{scenarios.find(s => s.id === activeScenario)?.icon} {activeScenarioObj?.icon}
</span> </span>
<div className="scenario-hint-card__text"> <div className="scenario-hint-card__text">
<strong>{t(scenarios.find(s => s.id === activeScenario)?.nameKey || "")}</strong> <strong>{activeScenarioObj ? (activeScenarioObj.nameKey ? t(activeScenarioObj.nameKey) : activeScenarioObj.name) : ""}</strong>
<p>{t(`scenario.${activeScenario}.hint`)}</p> {activeScenarioObj && (activeScenarioObj.descKey || activeScenarioObj.description) && (
<p>{activeScenarioObj.descKey ? t(activeScenarioObj.descKey) : activeScenarioObj.description}</p>
)}
</div> </div>
</div> </div>
</div> </div>
@@ -124,7 +133,7 @@ export function ChatPanel({
{/* 空状态：欢迎信息 */} {/* 空状态：欢迎信息 */}
{isEmpty && ( {isEmpty && (
<div className="chat-panel__welcome"> <div className="chat-panel__welcome">
<span className="chat-panel__welcome-icon">{scenarios.find(s => s.id === activeScenario)?.icon || <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>}</span> <span className="chat-panel__welcome-icon">{activeScenarioObj?.icon || <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>}</span>
<p>{isConnected ? t("chat.welcome.prompt") : t("chat.empty.prompt")}</p> <p>{isConnected ? t("chat.welcome.prompt") : t("chat.empty.prompt")}</p>
<span className="chat-panel__welcome-hint">{isConnected ? t("chat.welcome.hint") : t("chat.empty.hint")}</span> <span className="chat-panel__welcome-hint">{isConnected ? t("chat.welcome.hint") : t("chat.empty.hint")}</span>