Blizzard
94 lines
3.5 KiB
Plaintext
94 lines
3.5 KiB
Plaintext
<!--pages/wiki/chat/index.wxml-->
|
|
<view class="chat-page">
|
|
<!-- Messages Area -->
|
|
<scroll-view
|
|
class="chat-messages"
|
|
scroll-y
|
|
scroll-into-view="{{scrollAnchor}}"
|
|
enhanced
|
|
show-scrollbar="{{false}}"
|
|
scroll-with-animation
|
|
>
|
|
<!-- Welcome -->
|
|
<view class="welcome" wx:if="{{messages.length === 0}}">
|
|
<view class="welcome-glow"></view>
|
|
<view class="welcome-icon anim-float">🌿</view>
|
|
<view class="welcome-title">植物AI百科</view>
|
|
<view class="welcome-sub">基于知识库的智能问答助手</view>
|
|
<view class="history-entry" bindtap="goToHistory">
|
|
<t-icon name="time" size="32rpx" color="#558B2F" />
|
|
<text>查看问答历史</text>
|
|
</view>
|
|
<view class="quick-grid">
|
|
<view class="quick-card" bindtap="onQuickAsk" data-q="龟背竹怎么养护？">
|
|
<text class="qc-emoji">🌱</text>
|
|
<text class="qc-text">龟背竹怎么养护？</text>
|
|
</view>
|
|
<view class="quick-card" bindtap="onQuickAsk" data-q="哪些植物适合室内？">
|
|
<text class="qc-emoji">🏠</text>
|
|
<text class="qc-text">哪些植物适合室内？</text>
|
|
</view>
|
|
<view class="quick-card" bindtap="onQuickAsk" data-q="多肉浇水注意什么？">
|
|
<text class="qc-emoji">💧</text>
|
|
<text class="qc-text">多肉浇水注意什么？</text>
|
|
</view>
|
|
<view class="quick-card" bindtap="onQuickAsk" data-q="植物叶子发黄怎么办？">
|
|
<text class="qc-emoji">🍂</text>
|
|
<text class="qc-text">叶子发黄怎么办？</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Chat Bubbles -->
|
|
<block wx:for="{{messages}}" wx:key="id">
|
|
<view id="msg-{{item.id}}" class="msg-row {{item.role}}">
|
|
<!-- AI avatar -->
|
|
<view wx:if="{{item.role === 'ai'}}" class="ai-avatar-wrap">
|
|
<text class="ai-avatar-emoji">🌱</text>
|
|
</view>
|
|
|
|
<view class="msg-bubble {{item.role}}">
|
|
<!-- AI: typing state -->
|
|
<view wx:if="{{item.role === 'ai' && !item.content}}" class="typing-wrap">
|
|
<view class="typing-dots">
|
|
<view class="dot"></view>
|
|
<view class="dot"></view>
|
|
<view class="dot"></view>
|
|
</view>
|
|
<text class="typing-label">思考中...</text>
|
|
</view>
|
|
<text wx:elif="{{item.role === 'ai'}}" class="ai-text" user-select>{{item.content}}</text>
|
|
<!-- User text -->
|
|
<text wx:else class="msg-text" user-select>{{item.content}}</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<view style="height: 32rpx;" id="scroll-bottom"></view>
|
|
</scroll-view>
|
|
|
|
<!-- Input -->
|
|
<view class="input-area">
|
|
<view class="input-row">
|
|
<input
|
|
class="chat-input"
|
|
placeholder="{{isTyping ? 'AI正在回答中...' : '问我任何植物相关的问题...'}}"
|
|
value="{{inputValue}}"
|
|
bindinput="onInput"
|
|
bindconfirm="onSend"
|
|
confirm-type="send"
|
|
disabled="{{isTyping}}"
|
|
adjust-position="{{true}}"
|
|
cursor-spacing="20"
|
|
/>
|
|
<view class="send-btn {{inputValue && !isTyping ? 'active' : ''}}" bindtap="onSend">
|
|
<t-icon name="arrow-up" size="36rpx" color="#fff" />
|
|
</view>
|
|
</view>
|
|
<view class="quota-bar" wx:if="{{quotaLimit > 0}}">
|
|
<text class="quota-text {{quotaRemaining <= 2 ? 'warn' : ''}}">今日剩余 {{quotaRemaining}}/{{quotaLimit}} 次</text>
|
|
</view>
|
|
<view class="safe-bottom"></view>
|
|
</view>
|
|
</view>
|