feat: 优化情景切换功能

This commit is contained in:
2026-06-20 23:24:32 +08:00
parent ed95ce56a8
commit 2fb23852ef
11 changed files with 872 additions and 143 deletions

View File

@@ -1674,6 +1674,54 @@ body {
line-height: 1.4;
}
/* ---- Scenario Hint Card (非空状态顶部提示) ---- */
.chat-panel__scenario-hint {
display: flex;
justify-content: center;
padding: 12px 24px 0;
}
.scenario-hint-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
max-width: 520px;
width: 100%;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
}
.scenario-hint-card__icon {
font-size: 1.8rem;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.scenario-hint-card__text {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.scenario-hint-card__text strong {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
letter-spacing: 0.01em;
}
.scenario-hint-card__text p {
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
}
/* ---- Voice Input Button ---- */
.chat-input__voice {

View File

@@ -106,6 +106,21 @@ export function ChatPanel({
return (
<div className="chat-panel">
<div className="chat-panel__messages" ref={containerRef}>
{/* 情景提示卡片(非空状态 + 非自由对话) */}
{messages.length > 0 && !isFreeChat && (
<div className="chat-panel__scenario-hint">
<div className="scenario-hint-card">
<span className="scenario-hint-card__icon">
{scenarios.find(s => s.id === activeScenario)?.icon}
</span>
<div className="scenario-hint-card__text">
<strong>{t(scenarios.find(s => s.id === activeScenario)?.nameKey || "")}</strong>
<p>{t(`scenario.${activeScenario}.hint`)}</p>
</div>
</div>
</div>
)}
{/* 空状态:情景选择 + 场景卡片 */}
{isEmpty && (
<div className="chat-panel__welcome">

View File

@@ -130,6 +130,7 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
tts_enabled: config.ttsEnabled,
detail_level: config.detailLevel,
language: config.language,
scenario: config.scenario,
},
});
@@ -169,6 +170,7 @@ export function useVisionSession(accessToken?: string | null, conversationId?: s
tts_enabled: next.ttsEnabled,
detail_level: next.detailLevel,
language: next.language,
scenario: next.scenario,
},
});
}

View File

@@ -33,14 +33,19 @@ export const enUS: TranslationMap = {
"scenario.choose": "Choose a scenario",
"scenario.freeChat": "Free Chat",
"scenario.freeChat.desc": "AI visual assistant, chat freely",
"scenario.freeChat.hint": "AI will act as a visual assistant to answer your questions",
"scenario.interviewer": "Mock Interviewer",
"scenario.interviewer.desc": "AI plays interviewer for practice",
"scenario.interviewer.hint": "AI will act as an interviewer, asking professional questions and providing feedback",
"scenario.englishTeacher": "English Tutor",
"scenario.englishTeacher.desc": "AI English tutor, corrects grammar",
"scenario.englishTeacher.hint": "AI will converse in English, correct grammar mistakes, and guide deeper conversations",
"scenario.debate": "Debate Opponent",
"scenario.debate.desc": "AI challenges your viewpoints",
"scenario.debate.hint": "AI will argue against your viewpoints using logic and evidence",
"scenario.interpreter": "Interpreter",
"scenario.interpreter.desc": "Real-time Chinese-English translation",
"scenario.interpreter.hint": "AI will translate your speech in real-time (Chinese-English), without explanations",
// Video indicators
"video.observing": "👁️ Observing",

View File

@@ -33,14 +33,19 @@ export const jaJP: TranslationMap = {
"scenario.choose": "シナリオを選択",
"scenario.freeChat": "フリーチャット",
"scenario.freeChat.desc": "AIビジュアルアシスタントと自由に会話",
"scenario.freeChat.hint": "AIがビジュアルアシスタントとしてあなたの質問に答えます",
"scenario.interviewer": "模擬面接官",
"scenario.interviewer.desc": "AIが面接官として模擬面接を実施",
"scenario.interviewer.hint": "AIが面接官として専門的な質問をし、フィードバックを提供します",
"scenario.englishTeacher": "英語の先生",
"scenario.englishTeacher.desc": "AI英語教師が文法を修正し会話を導く",
"scenario.englishTeacher.hint": "AIが英語で会話し、文法の誤りを修正して深い対話を導きます",
"scenario.debate": "ディベート相手",
"scenario.debate.desc": "AIがあなたの观点に反論し論理的思考を鍛える",
"scenario.debate.hint": "AIが反対の立場から論理と証拠であなたの观点に反論します",
"scenario.interpreter": "同時通訳",
"scenario.interpreter.desc": "リアルタイムで中日相互翻訳",
"scenario.interpreter.hint": "AIがあなたの発言をリアルタイムで翻訳します中日相互翻訳、説明なし",
// Video indicators
"video.observing": "👁️ 観察中",

View File

@@ -33,14 +33,19 @@ export const zhCN: TranslationMap = {
"scenario.choose": "选择对话情景",
"scenario.freeChat": "自由对话",
"scenario.freeChat.desc": "AI 视觉助手,自由聊天",
"scenario.freeChat.hint": "AI 会作为视觉助手回答你的问题",
"scenario.interviewer": "模拟面试官",
"scenario.interviewer.desc": "AI 扮演面试官,进行模拟面试",
"scenario.interviewer.hint": "AI 会扮演面试官,逐步提出专业问题并点评你的回答",
"scenario.englishTeacher": "英语老师",
"scenario.englishTeacher.desc": "AI 英语外教,纠正语法并引导对话",
"scenario.englishTeacher.hint": "AI 会用英语对话,纠正语法错误并引导深入交流",
"scenario.debate": "辩论对手",
"scenario.debate.desc": "AI 反驳你的观点,锻炼逻辑思维",
"scenario.debate.hint": "AI 会站在反方立场,用逻辑和证据反驳你的观点",
"scenario.interpreter": "同声翻译",
"scenario.interpreter.desc": "实时中英互译,口语化翻译",
"scenario.interpreter.hint": "AI 会实时翻译你的话(中英互译),无解释评论",
// Video indicators
"video.observing": "👁️ 观察中",