xJourney/wxapp_escort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新了AI页和我的页，一级页面都重构完成。

Browse Source
This commit is contained in:
lik
2026-10-04 21:21:50 +08:00
parent 428fb7c52c
commit f542b1dced
26 changed files with 1482 additions and 1141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/ai/aichat.js
+19
View File
@@ -146,6 +146,25 @@ Page({
this.sendMessage()
},
// 把常见问题清单作为一条 AI 消息铺进会话流（可随时唤起、可重复点选）
showQuickQuestions() {
const questions = this.data.quickQuestions || []
if (!questions.length) return
const questionMessage = {
id: `msg_${++this.messageIdCounter}`,
type: 'ai',
contentType: 'questions',
content: questions,
time: this.formatTime(new Date())
}
const messages = [...this.data.messages, questionMessage]
this.setData({ messages: messages })
this.saveChatHistory(messages)
this.scrollToBottom()
},
sendMessage() {
const content = this.data.inputValue.trim()
if (!content) return
pages/ai/aichat.wxml
+38 -12
View File
@@ -10,11 +10,11 @@
<!-- 欢迎区：空会话时的落点 -->
<view class="welcome-area" wx:if="{{messages.length === 0}}">
<view class="welcome-icon">
<t-icon name="chat" size="72rpx" color="#9B4508" />
<image class="welcome-icon-img" src="/images/ai-ink.png" mode="aspectFit" />
</view>
<text class="welcome-title">AI陪诊助手</text>
<text class="welcome-title">陪诊助手</text>
<text class="welcome-desc">我是您的智能陪诊助手，可以为您解答陪诊相关问题</text>
<view class="quick-questions">
<view class="question-list">
<view
class="quick-item"
wx:for="{{quickQuestions}}"
@@ -48,7 +48,7 @@
</view>
<view class="message-content">
<view class="message-bubble">
<view class="message-bubble" wx:if="{{item.contentType !== 'questions'}}">
<t-chat-markdown
wx:if="{{item.type === 'ai' && item.contentType === 'text'}}"
class="message-markdown"
@@ -64,9 +64,28 @@
data-src="{{item.content}}"
/>
</view>
<!-- 常见问题：由「常见问题」按钮触发，把问题清单直接铺进会话流里。
复用欢迎区的白卡 + chevron 语言，点一下即发送该问题 -->
<view wx:else class="question-list">
<view
class="quick-item"
wx:for="{{item.content}}"
wx:for-item="question"
wx:key="*this"
bindtap="onQuickQuestionTap"
data-question="{{question}}"
>
<text>{{question}}</text>
<t-icon name="chevron-right" size="26rpx" color="#9B4508" />
</view>
</view>
<!-- AI 声明：挂在每条 AI 回复的气泡正下方，替掉原来页面底部那行常驻声明
（它太占底部空间）。放在 .message-content 内，与气泡同宽同左边缘 -->
<text wx:if="{{item.type === 'ai'}}" class="message-note">内容由AI生成，仅供参考</text>
（它太占底部空间）。放在 .message-content 内，与气泡同宽同左边缘。
问题清单由本地生成、非 AI 内容，故不挂声明 -->
<text
wx:if="{{item.type === 'ai' && item.contentType !== 'questions'}}"
class="message-note"
>内容由AI生成，仅供参考</text>
</view>
</view>
@@ -110,11 +129,18 @@
</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>
<!-- 辅助入口：紧贴输入区下方——拇指最容易够到的位置，操作方便。
两者都是低频动作，故做成只描边不填充的暖橙小按钮（圆角与输入框同为 20rpx），
与输入区右侧浅橙底的发送键区分开，不做成裸文字链。
「常见问题」在左、「清空聊天」在右：破坏性动作收在最右端 -->
<view class="tool-bar" wx:if="{{messages.length > 0}}">
<view class="tool-btn" bindtap="showQuickQuestions">
<t-icon name="help-circle" size="26rpx" color="#9B4508" />
<text class="tool-btn-text">常见问题</text>
</view>
<view class="tool-btn" bindtap="clearChat">
<t-icon name="delete" size="26rpx" color="#9B4508" />
<text class="tool-btn-text">清空聊天</text>
</view>
</view>
</view>
pages/ai/aichat.wxss
+44 -19
View File
@@ -18,31 +18,37 @@
background-color: var(--paper);
}
/* ===== 清空入口（在输入区下方）===== */
/* ===== 辅助入口（在输入区下方：常见问题 + 清空聊天）===== */
/* 空心描边小按钮：2rpx 暖橙描边、无填充。
清空是低频破坏性动作，用"只描边"与输入区右侧那个浅橙底发送键区分开；
两者都是低频辅助动作，用"只描边"与输入区右侧那个浅橙底发送键区分开；
描边在纸面上 4.66:1、文字 6.10:1，均过线。
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形，不再有胶囊
容器是 column，靠 align-self: flex-end 右对齐，不必再套一层行容器 */
.clear-btn {
圆角 20rpx 与输入框、发送键、气泡同档——全页统一为圆角矩形，不再有胶囊。
容器是 column，靠 align-self: flex-end 把整行右对齐 */
.tool-bar {
align-self: flex-end;
display: flex;
align-items: center;
gap: 8rpx;
gap: 16rpx;
flex-shrink: 0;
/* 上 12 贴住输入区，右 32 对齐页面页边距；下不留边距，底部空气统一交给容器 */
margin: 12rpx 32rpx 0;
}
.tool-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 10rpx 26rpx;
border-radius: 20rpx;
border: 2rpx solid var(--brand-strong);
transition: transform 0.15s ease;
}
.clear-btn:active {
.tool-btn:active {
transform: scale(0.96);
}
.clear-btn-text {
.tool-btn-text {
font-size: 24rpx;
font-weight: 500;
color: var(--brand-ink);
@@ -64,7 +70,8 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 40rpx;
/* 上方留白收小：消息区本身已有 20rpx 内距，这里 80rpx 会显得图标吊得太低 */
padding: 40rpx 40rpx 80rpx;
text-align: center;
}
@@ -81,6 +88,14 @@
border: 2rpx solid var(--brand-line);
}
/* 空态图标改为 ai-ink.png（暖墨线稿的 AI 气泡）：与头像区的 home-ink.png 同源，
落在浅橙衬底上仍清晰（暖陶土线稿约 6.8:1）。
88rpx 略大于原 t-icon 的 72rpx，因为该图是满画布的气泡轮廓，缩小会显弱 */
.welcome-icon-img {
width: 88rpx;
height: 88rpx;
}
.welcome-title {
margin-bottom: 12rpx;
font-size: 40rpx;
@@ -95,32 +110,42 @@
color: var(--muted);
}
.quick-questions {
/* 常见问题清单：整块收成一张白卡，行与行之间只用横线分隔、不留间隙。
空会话的欢迎区与会话流里由「常见问题」按钮唤起的清单共用同一套语言——
都是一份"可点的清单"，不该一处是散卡、一处才收成块 */
.question-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 20rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 20rpx;
box-shadow: var(--shadow-card);
/* 裁掉行的直角与点按底色，保住卡片自身的圆角 */
overflow: hidden;
}
/* 常见问题：首页白卡语言 + 右侧 chevron 做点击暗示 */
/* 清单行：文字 + 右侧 chevron 做点击暗示 */
.quick-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
padding: 28rpx 28rpx 28rpx 32rpx;
background: var(--white);
border: 2rpx solid var(--line);
border-radius: 20rpx;
box-shadow: var(--shadow-card);
padding: 26rpx 28rpx;
font-size: 28rpx;
color: var(--ink-2);
text-align: left;
transition: transform 0.15s ease;
transition: background 0.15s ease;
}
/* 行分隔线用 --sep（比 --line 深一档，白面上才看得见） */
.quick-item + .quick-item {
border-top: 2rpx solid var(--sep);
}
/* 行嵌在整块里，不能像独立卡那样整体缩放（会撕裂分隔线），
点按反馈改由底色承担 */
.quick-item:active {
transform: scale(0.98);
background: var(--brand-soft);
}