refactor: 删除实时分析/按需识别/纯聊天三种模式切换

三种模式仅为前端 UI 区分,后端无感知,实际使用中价值不大:
- 纯聊天模式名不副实(VAD 仍附带摄像头帧)
- 实时分析增加 API 成本且体验不佳
- 按需识别已是默认且最自然的交互方式

删除后保留按需识别行为:语音带图 + 手动识别按钮,UI 更简洁。
This commit is contained in:
2026-06-21 16:24:09 +08:00
parent 1079e22699
commit eea5c07eaa
7 changed files with 13 additions and 280 deletions

View File

@@ -24,9 +24,6 @@ import type { Theme } from "./types";
import type { UserScenario } from "./lib/api/scenarios";
import "./App.css";
/** AI 视觉模式 */
type VisionMode = "realtime" | "ondemand" | "chat";
/** 内部组件,确保在 I18nContext.Provider 内部使用 hooks */
function AppContent() {
const { isAuthenticated, isLoading, user, logout, accessToken } = useAuth();
@@ -36,7 +33,6 @@ function AppContent() {
const [theme, setTheme] = useState<Theme>(loadTheme);
const [elapsed, setElapsed] = useState(0);
const [sidebarOpen, setSidebarOpen] = useState(false);
const [visionMode, setVisionMode] = useState<VisionMode>("ondemand");
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
// ---- 自建情景管理 ----
@@ -91,8 +87,6 @@ function AppContent() {
config,
updateConfig,
stats,
mode,
isObserving,
startSession,
stopSession,
stopVideo,
@@ -365,13 +359,13 @@ function AppContent() {
<div className="detail-badge">HD</div>
)}
{/* AI 视觉状态指示 */}
{isConnected && visionMode !== "chat" && (
<div className={`ai-vision-indicator ${isObserving ? "ai-vision-indicator--active" : ""}`}>
{isConnected && (
<div className="ai-vision-indicator">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
</svg>
<span>{isObserving ? tr("video.observing") : "AI"}</span>
<span>AI</span>
</div>
)}
{isSpeaking && (
@@ -427,27 +421,6 @@ function AppContent() {
</select>
</div>
</div>
{/* 模式切换器 */}
<div className="video-controls__mode">
<button
className={`mode-btn ${visionMode === "realtime" ? "mode-btn--active" : ""}`}
onClick={() => setVisionMode("realtime")}
>
{tr("controls.mode.realtime")}
</button>
<button
className={`mode-btn ${visionMode === "ondemand" ? "mode-btn--active" : ""}`}
onClick={() => setVisionMode("ondemand")}
>
{tr("controls.mode.ondemand")}
</button>
<button
className={`mode-btn ${visionMode === "chat" ? "mode-btn--active" : ""}`}
onClick={() => setVisionMode("chat")}
>
{tr("controls.mode.chat")}
</button>
</div>
</>
) : isCameraOn ? (
<>
@@ -467,16 +440,14 @@ function AppContent() {
>
🎤
</button>
{/* 识别画面按钮(按需模式下显示) */}
{visionMode === "ondemand" && (
<button
className="btn--recognize"
onClick={handleRecognize}
disabled={isProcessing}
>
🔍 {tr("controls.recognize")}
</button>
)}
{/* 识别画面按钮 */}
<button
className="btn--recognize"
onClick={handleRecognize}
disabled={isProcessing}
>
🔍 {tr("controls.recognize")}
</button>
{isProcessing && (
<button className="btn btn--warning" onClick={interrupt}>
{tr("controls.interrupt")}
@@ -486,27 +457,6 @@ function AppContent() {
{tr("controls.stopVideo")}
</button>
</div>
{/* 通话态模式切换 */}
<div className="video-controls__mode">
<button
className={`mode-btn ${visionMode === "realtime" ? "mode-btn--active" : ""}`}
onClick={() => setVisionMode("realtime")}
>
{tr("controls.mode.realtime")}
</button>
<button
className={`mode-btn ${visionMode === "ondemand" ? "mode-btn--active" : ""}`}
onClick={() => setVisionMode("ondemand")}
>
{tr("controls.mode.ondemand")}
</button>
<button
className={`mode-btn ${visionMode === "chat" ? "mode-btn--active" : ""}`}
onClick={() => setVisionMode("chat")}
>
{tr("controls.mode.chat")}
</button>
</div>
</>
) : (
<>
@@ -547,9 +497,6 @@ function AppContent() {
</option>
))}
</select>
{isConnected && mode === "observation" && (
<span className="chat-panel-header__mode">{tr("chat.mode.observation")}</span>
)}
{isConnected && stats.queryCount > 0 && (
<span className="chat-panel-header__stats">
{stats.queryCount} {tr("statusbar.recognitions")}