feat(ai-chat): 在流式回答中添加"思考中..."指示,优化操作栏显示逻辑
This commit is contained in:
@@ -198,6 +198,25 @@
|
|||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- PR-AI-STREAMING-TAIL (2026-09-28): AI 流式回答中, 在已显示内容下方追加 "思考中..." 指示
|
||||||
|
仅当消息处于 streaming 状态且非 loading 占位时显示;
|
||||||
|
流式结束 (isStreaming=false) 时自动消失, 与 .ai-actions 操作栏互补呈现 -->
|
||||||
|
<view
|
||||||
|
v-if="message.isStreaming && (message.type === 'text' || message.type === 'markdown')"
|
||||||
|
class="streaming-tail">
|
||||||
|
<view class="typing-dots-inline">
|
||||||
|
<text class="dot"></text>
|
||||||
|
<text class="dot"></text>
|
||||||
|
<text class="dot"></text>
|
||||||
|
</view>
|
||||||
|
<text class="streaming-tail-text">{{ $lang('ai-chat.index.aiThinking') || '思考中' }}</text>
|
||||||
|
<text class="streaming-tail-ellipsis">
|
||||||
|
<text class="ellipsis-dot">.</text>
|
||||||
|
<text class="ellipsis-dot">.</text>
|
||||||
|
<text class="ellipsis-dot">.</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 文件链接 -->
|
<!-- 文件链接 -->
|
||||||
<view v-else-if="message.type === 'file'" class="file-content">
|
<view v-else-if="message.type === 'file'" class="file-content">
|
||||||
@@ -362,7 +381,8 @@
|
|||||||
|
|
||||||
<!-- AI 消息下方操作栏: 复制 / 点赞 / 不喜欢 / 更多 -->
|
<!-- AI 消息下方操作栏: 复制 / 点赞 / 不喜欢 / 更多 -->
|
||||||
<!-- PR-CHAT-UI-CONFIG (2026-09-20): 后端可关闭 ui_enable_feedback (隐藏点赞/点踩/更多), 默认 true -->
|
<!-- PR-CHAT-UI-CONFIG (2026-09-20): 后端可关闭 ui_enable_feedback (隐藏点赞/点踩/更多), 默认 true -->
|
||||||
<view class="ai-actions" v-if="message.role === 'ai' && message.type !== 'loading' && chatUiConfig.ui_enable_feedback">
|
<!-- PR-AI-ACTIONS-AFTER-DONE (2026-09-28): 仅在 AI 完全回答完成后才显示操作栏 (排除流式中), 避免一边打字一边出现复制/点赞按钮的"半成品"感 -->
|
||||||
|
<view class="ai-actions" v-if="message.role === 'ai' && message.type !== 'loading' && !message.isStreaming && chatUiConfig.ui_enable_feedback">
|
||||||
<view class="ai-action-btn" @click="onAiActionCopy(message)">
|
<view class="ai-action-btn" @click="onAiActionCopy(message)">
|
||||||
<text class="iconfont icon-copy">⎘</text>
|
<text class="iconfont icon-copy">⎘</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -4690,6 +4710,56 @@ _handleStreamError(msg) {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// PR-AI-STREAMING-TAIL (2026-09-28): AI 流式回答中追加在内容末尾的"思考中..."指示
|
||||||
|
// 与 .ai-actions 互补: streaming 时只显示 tail, 操作栏等流式结束才显示
|
||||||
|
.streaming-tail {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
padding-top: 4rpx;
|
||||||
|
color: $color-primary;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
.typing-dots-inline {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $color-primary;
|
||||||
|
margin: 0 4rpx;
|
||||||
|
animation: dotPulse 1.5s infinite ease-in-out;
|
||||||
|
|
||||||
|
&:nth-child(2) { animation-delay: 0.2s; }
|
||||||
|
&:nth-child(3) { animation-delay: 0.4s; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.streaming-tail-text {
|
||||||
|
color: $color-primary;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.streaming-tail-ellipsis {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
|
||||||
|
.ellipsis-dot {
|
||||||
|
animation: ellipsisBlink 1.4s infinite ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:nth-child(1) { animation-delay: 0s; }
|
||||||
|
&:nth-child(2) { animation-delay: 0.2s; }
|
||||||
|
&:nth-child(3) { animation-delay: 0.4s; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* AI 消息下方操作栏: 复制 / 点赞 / 不喜欢 / 朗读 / 更多 */
|
/* AI 消息下方操作栏: 复制 / 点赞 / 不喜欢 / 朗读 / 更多 */
|
||||||
.ai-actions {
|
.ai-actions {
|
||||||
margin-top: 12rpx;
|
margin-top: 12rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user