Fix(AI):[#3600]键盘弹出后,开启新对话,及键盘底部会被遮挡一部分

This commit is contained in:
lifizer
2025-04-07 22:57:59 +08:00
parent 230e163c53
commit 67c94d814c
5 changed files with 37 additions and 12 deletions
+8 -2
View File
@@ -141,10 +141,16 @@ export default {
}, },
methods: { methods: {
promptInputFocusHandle() { promptInputFocusHandle() {
this.inputOnFocus = true setTimeout(() => {
this.inputOnFocus = true
this.$emit('focus', 1)
}, 200)
}, },
promptInputBlurHandle() { promptInputBlurHandle() {
this.inputOnFocus = false setTimeout(() => {
this.inputOnFocus = false
this.$emit('focus', 0)
}, 200)
}, },
toggleInputModel() { toggleInputModel() {
if (!this.token) { if (!this.token) {
+4
View File
@@ -21,6 +21,7 @@ export const chatMixins = {
statusBarHeight: 20, statusBarHeight: 20,
fileHttpStr: Object.freeze(VUE_APP_API_URL + settings.sysPrefix), fileHttpStr: Object.freeze(VUE_APP_API_URL + settings.sysPrefix),
optionsFrom: '', optionsFrom: '',
onFocus: false,
loading: false, loading: false,
chatNumber: '', chatNumber: '',
infoResData: {}, infoResData: {},
@@ -86,6 +87,9 @@ export const chatMixins = {
createdCallbak() { createdCallbak() {
console.log('页面初始话回调') console.log('页面初始话回调')
}, },
inputFocusHandle(value) {
this.onFocus = value === 1
},
historyViewHandle() { historyViewHandle() {
console.log(this.$refs.historyView) console.log(this.$refs.historyView)
this.$refs.historyView.showView() this.$refs.historyView.showView()
+7 -1
View File
@@ -130,7 +130,12 @@
<view id="bottom_postion" class="bottom-postion" /> <view id="bottom_postion" class="bottom-postion" />
</view> </view>
</view> </view>
<view class="page-to-bottom"> <view
:class="{
'focus': onFocus
}"
class="page-to-bottom"
>
<image <image
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading" v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
:src="webUrl + '/aiChat/down.png'" :src="webUrl + '/aiChat/down.png'"
@@ -144,6 +149,7 @@
:loading="loading" :loading="loading"
@send="streamReq" @send="streamReq"
@history="historyViewHandle" @history="historyViewHandle"
@focus="inputFocusHandle"
/> />
<AiHistoryList <AiHistoryList
ref="historyView" ref="historyView"
+13 -7
View File
@@ -181,7 +181,12 @@
<view id="bottom_postion" class="bottom-postion" /> <view id="bottom_postion" class="bottom-postion" />
</view> </view>
</view> </view>
<view class="page-to-bottom"> <view
:class="{
'focus': onFocus
}"
class="page-to-bottom"
>
<view <view
v-if="chatNumber" v-if="chatNumber"
class="new-chat" class="new-chat"
@@ -208,6 +213,7 @@
@send="streamReq" @send="streamReq"
@add="createNewHandle" @add="createNewHandle"
@history="historyViewHandle" @history="historyViewHandle"
@focus="inputFocusHandle"
/> />
<AiHistoryList <AiHistoryList
ref="historyView" ref="historyView"
@@ -318,7 +324,7 @@ export default {
padding: 30rpx; padding: 30rpx;
margin: 0 0 0 40rpx; margin: 0 0 0 40rpx;
border-radius: 20rpx; border-radius: 20rpx;
font-size: 24rpx; font-size: 28rpx;
background-color: #fff; background-color: #fff;
box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1); box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1);
.trangle { .trangle {
@@ -354,7 +360,7 @@ export default {
text-align: center; text-align: center;
line-height: 46rpx; line-height: 46rpx;
color: #fff; color: #fff;
font-size: 26rpx; font-size: 28rpx;
background-color: #3D4CF1; background-color: #3D4CF1;
} }
.icon { .icon {
@@ -375,11 +381,11 @@ export default {
.list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
height: 40rpx; height: 48rpx;
padding: 0 12rpx; padding: 0 18rpx;
margin: 0 30rpx 30rpx 0; margin: 0 30rpx 30rpx 0;
border-radius: 20rpx; border-radius: 24rpx;
font-size: 24rpx; font-size: 28rpx;
color: #666; color: #666;
background: rgba(255,255,255,0.39); background: rgba(255,255,255,0.39);
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1); box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
+5 -2
View File
@@ -97,6 +97,10 @@ page {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 0 24rpx; padding: 0 24rpx;
transition: all 0.2s;
&.focus {
transform: translateY(-40rpx);
}
.new-chat { .new-chat {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -132,7 +136,7 @@ page {
padding: 24rpx 24rpx 48rpx 24rpx; padding: 24rpx 24rpx 48rpx 24rpx;
transition: all 0.2s; transition: all 0.2s;
&.focus { &.focus {
transform: translateY(-48rpx); transform: translateY(-40rpx);
} }
.bottom-body { .bottom-body {
position: relative; position: relative;
@@ -329,7 +333,6 @@ page {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
margin: 0 0 8rpx 0; margin: 0 0 8rpx 0;
border-radius: 50%;
} }
.item-left { .item-left {
display: flex; display: flex;