feat: 结束视频后保留对话,支持继续文字聊天

- useVisionSession 新增 stopVideo 回调(停媒体流,保持连接和消息)
- App.tsx 控制区从二态改为三态(initial/video/textOnly)
- 文字对话态显示「重新开始视频」和「结束会话」按钮
- 新增 CSS 样式(video-ended-hint、btn--outline)
- 新增 i18n key(stopVideo/endSession/resumeVideo/video.ended)
- 新增设计方案文档
This commit is contained in:
2026-06-20 13:48:26 +08:00
parent 3dc2015a91
commit ae9a27c300
7 changed files with 385 additions and 4 deletions

View File

@@ -80,6 +80,7 @@ function AppContent() {
isObserving,
startSession,
stopSession,
stopVideo,
interrupt,
isCameraOn,
isMicOn,
@@ -397,9 +398,9 @@ function AppContent() {
</button>
</div>
</>
) : (
) : isCameraOn ? (
<>
{/* 通话态:核心控制工具栏 */}
{/* 视频通话态:核心控制工具栏 */}
<div className="video-controls__toolbar">
<button
className={`btn btn--ctrl ${isCameraOn ? "btn--ctrl-on" : "btn--ctrl-off"}`}
@@ -430,8 +431,8 @@ function AppContent() {
{tr("controls.interrupt")}
</button>
)}
<button className="btn btn--danger" onClick={stopSession}>
{tr("controls.stop")}
<button className="btn btn--danger" onClick={stopVideo}>
{tr("controls.stopVideo")}
</button>
</div>
{/* 通话态模式切换 */}
@@ -456,6 +457,24 @@ function AppContent() {
</button>
</div>
</>
) : (
<>
{/* 文字对话态:视频已结束 */}
<div className="video-controls__text-only">
<div className="video-ended-hint">
<span className="video-ended-hint__title">📹 {tr("video.ended")}</span>
<span className="video-ended-hint__sub">{tr("video.ended.hint")}</span>
</div>
<div className="video-controls__toolbar">
<button className="btn btn--primary" onClick={startSession}>
{tr("controls.resumeVideo")}
</button>
<button className="btn btn--danger btn--outline" onClick={stopSession}>
{tr("controls.endSession")}
</button>
</div>
</div>
</>
)}
</div>
</div>