120 lines
4.3 KiB
Plaintext
120 lines
4.3 KiB
Plaintext
<view class="chat-container">
|
|
<!-- 消息列表区域 -->
|
|
<scroll-view
|
|
class="message-list"
|
|
scroll-y
|
|
scroll-into-view="{{scrollToMessage}}"
|
|
enhanced
|
|
show-scrollbar
|
|
>
|
|
<!-- 欢迎区：空会话时的落点 -->
|
|
<view class="welcome-area" wx:if="{{messages.length === 0}}">
|
|
<view class="welcome-icon">
|
|
<t-icon name="chat" size="72rpx" color="#9B4508" />
|
|
</view>
|
|
<text class="welcome-title">AI陪诊助手</text>
|
|
<text class="welcome-desc">我是您的智能陪诊助手，可以为您解答陪诊相关问题</text>
|
|
<view class="quick-questions">
|
|
<view
|
|
class="quick-item"
|
|
wx:for="{{quickQuestions}}"
|
|
wx:key="index"
|
|
bindtap="onQuickQuestionTap"
|
|
data-question="{{item}}"
|
|
>
|
|
<text>{{item}}</text>
|
|
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 消息：头像在上、气泡在下，时间紧跟头像右侧；用户消息整条靠右 -->
|
|
<view
|
|
class="message-item {{item.type}}"
|
|
wx:for="{{messages}}"
|
|
wx:key="id"
|
|
id="msg-{{item.id}}"
|
|
>
|
|
<view class="message-head">
|
|
<!-- AI：品牌标记（暖墨线稿）；底色与用户侧同构，身份只由图形区分 -->
|
|
<view wx:if="{{item.type === 'ai'}}" class="avatar">
|
|
<image class="avatar-img" src="/images/home-ink.png" mode="aspectFit" />
|
|
</view>
|
|
<!-- 用户：人像图标（暖陶土） -->
|
|
<view wx:else class="avatar">
|
|
<t-icon name="user-1" size="36rpx" color="#9B4508" />
|
|
</view>
|
|
<text class="message-time">{{item.time}}</text>
|
|
</view>
|
|
|
|
<view class="message-content">
|
|
<view class="message-bubble">
|
|
<t-chat-markdown
|
|
wx:if="{{item.type === 'ai' && item.contentType === 'text'}}"
|
|
class="message-markdown"
|
|
content="{{item.content}}"
|
|
/>
|
|
<text wx:elif="{{item.contentType === 'text'}}" class="message-text">{{item.content}}</text>
|
|
<image
|
|
wx:if="{{item.contentType === 'image'}}"
|
|
class="message-image"
|
|
src="{{item.content}}"
|
|
mode="widthFix"
|
|
bindtap="previewImage"
|
|
data-src="{{item.content}}"
|
|
/>
|
|
</view>
|
|
<!-- AI 声明：挂在每条 AI 回复的气泡正下方，替掉原来页面底部那行常驻声明
|
|
（它太占底部空间）。放在 .message-content 内，与气泡同宽同左边缘 -->
|
|
<text wx:if="{{item.type === 'ai'}}" class="message-note">内容由AI生成，仅供参考</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- AI 正在输入 -->
|
|
<view class="message-item ai" wx:if="{{isTyping}}">
|
|
<view class="message-head">
|
|
<view class="avatar">
|
|
<image class="avatar-img" src="/images/home-ink.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
<view class="message-content">
|
|
<view class="message-bubble typing-bubble">
|
|
<view class="typing-indicator">
|
|
<view class="dot"></view>
|
|
<view class="dot"></view>
|
|
<view class="dot"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部留白，确保最新消息可见 -->
|
|
<view style="height: 40rpx;"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 输入区 -->
|
|
<view class="input-area">
|
|
<input
|
|
class="message-input"
|
|
type="text"
|
|
value="{{inputValue}}"
|
|
placeholder="请输入您的问题..."
|
|
placeholder-class="input-placeholder"
|
|
confirm-type="send"
|
|
bindinput="onInputChange"
|
|
bindconfirm="sendMessage"
|
|
focus="{{inputFocus}}"
|
|
/>
|
|
<view class="action-btn send-btn {{inputValue ? 'active' : ''}}" bindtap="sendMessage">
|
|
<t-icon name="send" size="40rpx" color="{{inputValue ? '#FFFFFF' : '#6F655C'}}" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 清空入口：紧贴输入区下方——拇指最容易够到的位置，操作方便。
|
|
低频但破坏性，故做成只描边不填充的暖橙小按钮（圆角与输入框同为 20rpx），
|
|
与输入区右侧浅橙底的发送键区分开，不做成裸文字链 -->
|
|
<view class="clear-btn" wx:if="{{messages.length > 0}}" bindtap="clearChat">
|
|
<t-icon name="delete" size="26rpx" color="#9B4508" />
|
|
<text class="clear-btn-text">清空聊天</text>
|
|
</view>
|
|
</view> |