Skip to content

Commit b520964

Browse files
MrjingMrjing
committed
fix: 继续优化scroll-view 高度设置
1 parent d8fd3de commit b520964

File tree

2 files changed

+93
-124
lines changed

2 files changed

+93
-124
lines changed

‎apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.js‎

Lines changed: 2 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,6 @@ Component({
4343
showFeatureList: showWebSearchSwitch,
4444
});
4545
},
46-
showTools: function () {
47-
wx.nextTick(() => this.calcScrollHeight())
48-
},
49-
showFileList: function () {
50-
wx.nextTick(() => this.calcScrollHeight())
51-
},
52-
showFeatureList: function () {
53-
wx.nextTick(() => this.calcScrollHeight())
54-
},
5546
},
5647

5748
data: {
@@ -93,7 +84,7 @@ Component({
9384
feedbackType: "",
9485
textareaHeight: 50,
9586
defaultErrorMsg: "网络繁忙，请稍后重试!",
96-
curScrollHeight: 0
87+
curScrollHeight: 0,
9788
},
9889
attached: async function () {
9990
const chatMode = this.data.chatMode;
@@ -151,30 +142,8 @@ Component({
151142
this.setData({
152143
contentHeightInScrollViewTop: topHeight,
153144
});
154-
this.calcScrollHeight()
155145
},
156146
methods: {
157-
calcScrollHeight: async function () {
158-
// windowHeight - topHeight - footerHeight
159-
const topAndFooterHeight = await new Promise((resolve) => {
160-
const query = wx.createSelectorQuery().in(this);
161-
query
162-
.selectAll(".agent-ui >>> .navBar, .agent-ui >>> .footer")
163-
.boundingClientRect((rects) => {
164-
let totalHeight = 0;
165-
rects.forEach((rect) => {
166-
totalHeight += rect.height;
167-
});
168-
// console.log('top height', totalHeight);
169-
resolve(totalHeight);
170-
})
171-
.exec();
172-
});
173-
// console.log('this.data.windowInfo.windowHeight - topAndFooterHeight', this.data.windowInfo.windowHeight - topAndFooterHeight)
174-
this.setData({
175-
curScrollHeight: this.data.windowInfo.windowHeight - topAndFooterHeight
176-
})
177-
},
178147
showErrorMsg: function (e) {
179148
const { content } = e.currentTarget.dataset;
180149
console.log("content", content);
@@ -195,7 +164,6 @@ Component({
195164
self.setData({
196165
textareaHeight: res.height,
197166
});
198-
self.calcScrollHeight()
199167
} else {
200168
console.log("未找到指定元素");
201169
}
@@ -997,11 +965,10 @@ Component({
997965
}
998966
return;
999967
}
1000-
1001968
// 只有当内容高度接近scroll 区域视口高度时才开始增加 scrollTop
1002969
// const clientHeight =
1003970
// this.data.windowInfo.windowHeight - this.data.footerHeight - (this.data.chatMode === "bot" ? 40 : 0); // 视口高度
1004-
const clientHeight = this.data.curScrollHeight
971+
const clientHeight = this.data.curScrollHeight; // TODO:
1005972
const contentHeight =
1006973
(await this.calculateContentHeight()) +
1007974
(this.data.contentHeightInScrollViewTop || (await this.calculateContentInTop())); // 内容总高度

‎apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.wxml‎

Lines changed: 91 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6,103 +6,105 @@
66
<text class="bot-name">{{bot.name}}</text>
77
</view>
88
</view>
9-
<!-- 聊天对话区 -->
10-
<scroll-view bindwheel="onWheel" enhanced="{{true}}" bindscroll="onScroll" binddragstart="handleScrollStart" class="main" style="height: {{curScrollHeight}}px;" scroll-y="{{true}}" scroll-top="{{viewTop}}" scroll-into-view="{{ scrollTo }}" lower-threshold="1" bindscrolltolower="handleScrollToLower" show-scrollbar="{{false}}" refresher-enabled="{{showPullRefresh}}" refresher-threshold="{{80}}" bindrefresherrefresh="handelRefresh" refresher-triggered="{{triggered}}" bounces="{{false}}">
11-
<view wx:if="{{chatMode === 'bot' && showPullRefresh}}" class="tips">
12-
{{refreshText}}
13-
</view>
14-
<view wx:if="{{chatMode === 'model'}}" class="nav">
15-
<image src="{{bot.avatar||modelConfig.logo}}" mode="aspectFill" class="avatar" />
16-
<view style="line-height: 47px; font-size: 20px; font-weight: 500;">{{chatMode==='bot'?bot.name:modelConfig.modelProvider}}</view>
17-
<view style="line-height: 26px;padding: 0px 16px; font-size: 32rpx;">{{chatMode==='bot'?"":modelConfig.welcomeMsg}}</view>
18-
</view>
19-
<block wx:for="{{chatRecords}}" wx:key="record_id">
20-
<!-- 系统聊天 -->
21-
<view class="system" style="padding-left: {{showBotAvatar?80:0}}rpx;" wx:if="{{item.role==='assistant'}}">
22-
<view class="avatar-left" wx:if="{{showBotAvatar}}">
23-
<image src="{{chatMode==='bot'?bot.avatar:modelConfig.logo}}" mode="aspectFill" style="width: 56rpx;height: 56rpx; border-radius: 28rpx;" />
24-
</view>
25-
<view>
26-
<!-- 最后一条消息，并且是发送状态显示发送中 -->
27-
<block wx:if="{{(chatRecords.length-1)===index&&chatStatus===1}}">
28-
<view style="display: flex;align-items: center; gap: 4px; font-size: 32rpx;line-height: 1.8;">
29-
<image src="./imgs/loading.svg" mode="aspectFill" style="width: 14px;height: 14px;" /> 请稍等，正在卖力思考中 🤔
30-
</view>
31-
</block>
32-
<block wx:else>
33-
<!-- 数据库检索 -->
34-
<view wx:if="{{item.db_len}}" style="border-radius: 8px;margin-bottom: 12px;background-color: #f5f5f5;padding: 18rpx 26rpx;display: inline-block;opacity: 0.7;font-size: 14px;">
35-
已匹配 {{item.db_len}} 张数据表
36-
</view>
37-
<!-- 联网搜索 -->
38-
<FoldedCard wx:if="{{item.search_info}}" initStatus="{{false}}" showBgColor="{{true}}">
39-
<view slot="title" style="opacity: 0.7;font-size: 14px;display: flex; align-items: center; gap: 8px;">
40-
<image src="./imgs/search.svg" mode="aspectFill" style="width: 36rpx;height: 36rpx;" />
41-
<text>已参考 {{item.search_info.search_results.length}} 个网页</text>
42-
</view>
43-
<view slot="content" class="link-box">
44-
<block wx:for="{{item.search_info.search_results}}" wx:key="index">
45-
<view bind:tap="copyUrl" data-url="{{item.url}}" style="margin-bottom: 3px; font-size: 14px;color: rgb(0, 82, 217); line-height: 24px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"> {{index+1}}.{{item.title}}</view>
46-
</block>
9+
<view style="height: 100%;overflow: auto">
10+
<!-- 聊天对话区 -->
11+
<scroll-view bindwheel="onWheel" enhanced="{{true}}" bindscroll="onScroll" binddragstart="handleScrollStart" class="main" style="height: 100%;" scroll-y="{{true}}" scroll-top="{{viewTop}}" scroll-into-view="{{ scrollTo }}" lower-threshold="1" bindscrolltolower="handleScrollToLower" show-scrollbar="{{false}}" refresher-enabled="{{showPullRefresh}}" refresher-threshold="{{80}}" bindrefresherrefresh="handelRefresh" refresher-triggered="{{triggered}}" bounces="{{false}}">
12+
<view wx:if="{{chatMode === 'bot' && showPullRefresh}}" class="tips">
13+
{{refreshText}}
14+
</view>
15+
<view wx:if="{{chatMode === 'model'}}" class="nav">
16+
<image src="{{bot.avatar||modelConfig.logo}}" mode="aspectFill" class="avatar" />
17+
<view style="line-height: 47px; font-size: 20px; font-weight: 500;">{{chatMode==='bot'?bot.name:modelConfig.modelProvider}}</view>
18+
<view style="line-height: 26px;padding: 0px 16px; font-size: 32rpx;">{{chatMode==='bot'?"":modelConfig.welcomeMsg}}</view>
19+
</view>
20+
<block wx:for="{{chatRecords}}" wx:key="record_id">
21+
<!-- 系统聊天 -->
22+
<view class="system" style="padding-left: {{showBotAvatar?80:0}}rpx;" wx:if="{{item.role==='assistant'}}">
23+
<view class="avatar-left" wx:if="{{showBotAvatar}}">
24+
<image src="{{chatMode==='bot'?bot.avatar:modelConfig.logo}}" mode="aspectFill" style="width: 56rpx;height: 56rpx; border-radius: 28rpx;" />
25+
</view>
26+
<view>
27+
<!-- 最后一条消息，并且是发送状态显示发送中 -->
28+
<block wx:if="{{(chatRecords.length-1)===index&&chatStatus===1}}">
29+
<view style="display: flex;align-items: center; gap: 4px; font-size: 32rpx;line-height: 1.8;">
30+
<image src="./imgs/loading.svg" mode="aspectFill" style="width: 14px;height: 14px;" /> 请稍等，正在卖力思考中 🤔
4731
</view>
48-
</FoldedCard>
49-
<!-- 知识库 -->
50-
<view wx:if="{{item.knowledge_base&&item.knowledge_base.length}}" style="border-radius: 8px;margin-bottom: 12px;background-color: #f5f5f5;padding: 18rpx 26rpx;display: inline-block;opacity: 0.7;font-size: 14px;">
51-
已参考 {{item.knowledge_base.length}} 个知识库
52-
</view>
53-
<!-- 推理过程 -->
54-
<FoldedCard wx:if="{{!!item.reasoning_content}}" initStatus="{{true}}" showBgColor="{{false}}">
55-
<view slot="title" style="opacity: 0.7;font-size: 14px; display: flex; align-items: center; gap: 8px;">
56-
<image src="./imgs/system-sum.svg" mode="aspectFill" style="width: 36rpx;height: 36rpx;" />
57-
<block wx:if="{{item.pauseThinking}}">
58-
已停止思考
59-
</block>
60-
<block wx:else>
61-
<text>{{item.reasoning_content&&!item.content?"思考中...":"已深度思考（用时"+item.thinkingTime+"秒）"}}</text>
62-
</block>
32+
</block>
33+
<block wx:else>
34+
<!-- 数据库检索 -->
35+
<view wx:if="{{item.db_len}}" style="border-radius: 8px;margin-bottom: 12px;background-color: #f5f5f5;padding: 18rpx 26rpx;display: inline-block;opacity: 0.7;font-size: 14px;">
36+
已匹配 {{item.db_len}} 张数据表
6337
</view>
64-
<view style="padding-left: 25rpx;margin-top: 28rpx; border-left: rgb(165, 164, 164) solid 2px; opacity: 0.7;" slot="content">
65-
<markdownPreview markdown="{{item.reasoning_content||''}}" fontSize="{{28}}"></markdownPreview>
38+
<!-- 联网搜索 -->
39+
<FoldedCard wx:if="{{item.search_info}}" initStatus="{{false}}" showBgColor="{{true}}">
40+
<view slot="title" style="opacity: 0.7;font-size: 14px;display: flex; align-items: center; gap: 8px;">
41+
<image src="./imgs/search.svg" mode="aspectFill" style="width: 36rpx;height: 36rpx;" />
42+
<text>已参考 {{item.search_info.search_results.length}} 个网页</text>
43+
</view>
44+
<view slot="content" class="link-box">
45+
<block wx:for="{{item.search_info.search_results}}" wx:key="index">
46+
<view bind:tap="copyUrl" data-url="{{item.url}}" style="margin-bottom: 3px; font-size: 14px;color: rgb(0, 82, 217); line-height: 24px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"> {{index+1}}.{{item.title}}</view>
47+
</block>
48+
</view>
49+
</FoldedCard>
50+
<!-- 知识库 -->
51+
<view wx:if="{{item.knowledge_base&&item.knowledge_base.length}}" style="border-radius: 8px;margin-bottom: 12px;background-color: #f5f5f5;padding: 18rpx 26rpx;display: inline-block;opacity: 0.7;font-size: 14px;">
52+
已参考 {{item.knowledge_base.length}} 个知识库
6653
</view>
67-
</FoldedCard>
68-
<markdownPreview markdown="{{item.content||''}}"></markdownPreview>
69-
<!-- 下面的按钮 -->
70-
<view style="display: flex; gap: 10px;justify-content: flex;" wx:if="{{!item.hiddenBtnGround}}">
71-
<image wx:if="{{item.error}}" mode="widthFix" bind:tap="showErrorMsg" src='./imgs/error-circle.svg' style="width: 36rpx; height: 36rpx;" data-content="{{item.error}}" />
72-
<image mode="widthFix" bind:tap="copyChatRecord" src='./imgs/copy.svg' style="width: 36rpx; height: 36rpx;" data-content="{{item.content}}" />
73-
<block wx:if="{{!item.error}}">
74-
<button class="share_btn" open-type="share">
75-
<image mode="widthFix" src='./imgs/share.svg' style="width: 36rpx; height: 36rpx;vertical-align: top;" bind:tap="share" />
76-
</button>
77-
<block wx:if="{{chatMode=== 'bot'}}">
78-
<image mode="widthFix" bind:tap="openFeedback" data-feedbackType="upvote" data-feedbackRecordId="{{item.record_id}}" src='./imgs/thumb-up.svg' style="width: 36rpx; height: 36rpx;" />
79-
<image mode="widthFix" bind:tap="openFeedback" data-feedbackType="downvote" data-feedbackRecordId="{{item.record_id}}" src='./imgs/thumb-down.svg' style="width: 36rpx; height: 36rpx;" />
54+
<!-- 推理过程 -->
55+
<FoldedCard wx:if="{{!!item.reasoning_content}}" initStatus="{{true}}" showBgColor="{{false}}">
56+
<view slot="title" style="opacity: 0.7;font-size: 14px; display: flex; align-items: center; gap: 8px;">
57+
<image src="./imgs/system-sum.svg" mode="aspectFill" style="width: 36rpx;height: 36rpx;" />
58+
<block wx:if="{{item.pauseThinking}}">
59+
已停止思考
60+
</block>
61+
<block wx:else>
62+
<text>{{item.reasoning_content&&!item.content?"思考中...":"已深度思考（用时"+item.thinkingTime+"秒）"}}</text>
63+
</block>
64+
</view>
65+
<view style="padding-left: 25rpx;margin-top: 28rpx; border-left: rgb(165, 164, 164) solid 2px; opacity: 0.7;" slot="content">
66+
<markdownPreview markdown="{{item.reasoning_content||''}}" fontSize="{{28}}"></markdownPreview>
67+
</view>
68+
</FoldedCard>
69+
<markdownPreview markdown="{{item.content||''}}"></markdownPreview>
70+
<!-- 下面的按钮 -->
71+
<view style="display: flex; gap: 10px;justify-content: flex;" wx:if="{{!item.hiddenBtnGround}}">
72+
<image wx:if="{{item.error}}" mode="widthFix" bind:tap="showErrorMsg" src='./imgs/error-circle.svg' style="width: 36rpx; height: 36rpx;" data-content="{{item.error}}" />
73+
<image mode="widthFix" bind:tap="copyChatRecord" src='./imgs/copy.svg' style="width: 36rpx; height: 36rpx;" data-content="{{item.content}}" />
74+
<block wx:if="{{!item.error}}">
75+
<button class="share_btn" open-type="share">
76+
<image mode="widthFix" src='./imgs/share.svg' style="width: 36rpx; height: 36rpx;vertical-align: top;" bind:tap="share" />
77+
</button>
78+
<block wx:if="{{chatMode=== 'bot'}}">
79+
<image mode="widthFix" bind:tap="openFeedback" data-feedbackType="upvote" data-feedbackRecordId="{{item.record_id}}" src='./imgs/thumb-up.svg' style="width: 36rpx; height: 36rpx;" />
80+
<image mode="widthFix" bind:tap="openFeedback" data-feedbackType="downvote" data-feedbackRecordId="{{item.record_id}}" src='./imgs/thumb-down.svg' style="width: 36rpx; height: 36rpx;" />
81+
</block>
8082
</block>
81-
</block>
82-
</view>
83-
</block>
83+
</view>
84+
</block>
85+
</view>
8486
</view>
85-
</view>
86-
<!-- 用户输入 -->
87-
<view class="userContent" wx:if="{{item.role==='user'}}">
88-
<view class="user" style="padding-left: {{showBotAvatar?80:0}}rpx;">
89-
<view class="user_content">
90-
{{item.content}}
87+
<!-- 用户输入 -->
88+
<view class="userContent" wx:if="{{item.role==='user'}}">
89+
<view class="user" style="padding-left: {{showBotAvatar?80:0}}rpx;">
90+
<view class="user_content">
91+
{{item.content}}
92+
</view>
93+
</view>
94+
<view class="fileBar">
95+
<chatFile enableDel="{{false}}" wx:for="{{item.fileList}}" wx:for-item="innerItem" wx:key="tempPath" fileData="{{innerItem}}" bind:removeChild="handleRemoveChild" bind:changeChild="handleChangeChild"></chatFile>
9196
</view>
9297
</view>
93-
<view class="fileBar">
94-
<chatFile enableDel="{{false}}" wx:for="{{item.fileList}}" wx:for-item="innerItem" wx:key="tempPath" fileData="{{innerItem}}" bind:removeChild="handleRemoveChild" bind:changeChild="handleChangeChild"></chatFile>
98+
</block>
99+
<!-- 推荐问题 -->
100+
<block wx:for="{{questions}}" wx:key="item">
101+
<view class="questions" style="padding-left: {{showBotAvatar?80:0}}rpx;">
102+
<view class="question_content" bind:tap="handleSendMessage" data-message="{{item}}">{{item}}</view>
95103
</view>
96-
</view>
97-
</block>
98-
<!-- 推荐问题 -->
99-
<block wx:for="{{questions}}" wx:key="item">
100-
<view class="questions" style="padding-left: {{showBotAvatar?80:0}}rpx;">
101-
<view class="question_content" bind:tap="handleSendMessage" data-message="{{item}}">{{item}}</view>
102-
</view>
103-
</block>
104-
<view id="scroll-bottom" style="width: 100%;height: 20px;"></view>
105-
</scroll-view>
104+
</block>
105+
<view id="scroll-bottom" style="width: 100%;height: 20px;"></view>
106+
</scroll-view>
107+
</view>
106108
<!-- 底部输入区 -->
107109
<view class="footer">
108110
<view class="feature_list" wx:if="{{showFeatureList}}">

0 commit comments

Comments
 (0)
⚡