feat(mobile): make 转文字 transcript collapsible both ways

客户追加:转文字展开后应可收回。实现双向收口:
- 「转文字」chip 常驻并变为开关(展开后显示「收起」)
- 展开内容底部增加「收起全文 ▲」——长文读到底部无需回滚到顶部
红点语义不变(仅播放清除);TTS 不可用的纯文本气泡不受影响。
验证:本地展开⇄收起往返(chip 与底部链接各一次)通过;已发布
(备份 h5-before-$TS)。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-18 05:05:48 +08:00
co-authored by Claude Fable 5
parent f7eff14342
commit a7f0305bcb
+19 -1
View File
@@ -53,7 +53,9 @@
<text class="voice-duration">{{ voiceLabel(msg) }}</text>
</view>
<view v-if="msg.unread" class="voice-dot" />
<button v-if="!msg.transcriptOpen" class="transcript-toggle" @click="msg.transcriptOpen = true">转文字</button>
<button class="transcript-toggle" @click="msg.transcriptOpen = !msg.transcriptOpen">
{{ msg.transcriptOpen ? '收起' : '转文字' }}
</button>
</view>
<view v-if="msg.voiceStatus === 'unavailable' || msg.transcriptOpen" class="bubble master transcript-bubble">
@@ -109,6 +111,10 @@
<text v-if="snippet.fragmentId" class="citation-meta">片段 #{{ snippet.fragmentId }}</text>
</view>
</view>
<view v-if="msg.voiceStatus !== 'unavailable'" class="transcript-collapse" @click="msg.transcriptOpen = false">
<text class="transcript-collapse-text">收起全文 ▲</text>
</view>
</view>
</view>
</view>
@@ -2171,4 +2177,16 @@ onUnload(() => {
padding: 5px 0;
font-size: 13px;
}
.transcript-collapse {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed #eceff2;
text-align: center;
}
.transcript-collapse-text {
color: #98a1ad;
font-size: 12px;
}
</style>