This commit is contained in:
parent
66aa21085e
commit
7bc3d491b8
|
|
@ -191,31 +191,54 @@ export default {
|
||||||
sendMessage() {
|
sendMessage() {
|
||||||
if (!this.inputMessage.trim() || this.isThinking) return
|
if (!this.inputMessage.trim() || this.isThinking) return
|
||||||
|
|
||||||
|
// 保存用户输入内容
|
||||||
|
const userInput = this.inputMessage
|
||||||
|
|
||||||
// 添加用户消息
|
// 添加用户消息
|
||||||
const userMessage = {
|
const userMessage = {
|
||||||
type: 'user',
|
type: 'user',
|
||||||
content: this.inputMessage,
|
content: userInput,
|
||||||
time: this.getCurrentTime()
|
time: this.getCurrentTime()
|
||||||
}
|
}
|
||||||
this.messageList.push(userMessage)
|
this.messageList.push(userMessage)
|
||||||
|
|
||||||
|
// 清空输入框
|
||||||
|
this.inputMessage = ''
|
||||||
|
|
||||||
// 开始AI思考
|
// 开始AI思考
|
||||||
this.isThinking = true
|
this.isThinking = true
|
||||||
this.scrollToBottom()
|
|
||||||
|
// 确保DOM更新后再滚动到思考状态
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
// 在思考过程中持续滚动，确保思考动画可见
|
||||||
|
setTimeout(() => {
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
}, 200)
|
||||||
|
setTimeout(() => {
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
}, 500)
|
||||||
|
})
|
||||||
|
|
||||||
// 模拟AI回复
|
// 模拟AI回复
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const aiMessage = {
|
const aiMessage = {
|
||||||
type: 'ai',
|
type: 'ai',
|
||||||
content: this.getAIResponse(this.inputMessage),
|
content: this.getAIResponse(userInput),
|
||||||
time: this.getCurrentTime()
|
time: this.getCurrentTime()
|
||||||
}
|
}
|
||||||
this.messageList.push(aiMessage)
|
this.messageList.push(aiMessage)
|
||||||
this.isThinking = false
|
this.isThinking = false
|
||||||
this.scrollToBottom()
|
|
||||||
}, 1500 + Math.random() * 1000) // 1.5-2.5秒随机延迟
|
|
||||||
|
|
||||||
this.inputMessage = ''
|
// AI回复完成后强制滚动到底部
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
// 延迟再次滚动，确保消息完全显示
|
||||||
|
setTimeout(() => {
|
||||||
|
this.forceScrollToBottom()
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
}, 1500 + Math.random() * 1000) // 1.5-2.5秒随机延迟
|
||||||
},
|
},
|
||||||
|
|
||||||
getAIResponse(question) {
|
getAIResponse(question) {
|
||||||
|
|
@ -245,6 +268,17 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 强制滚动到底部，用于确保消息可见
|
||||||
|
forceScrollToBottom() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 使用时间戳确保每次滚动都能触发
|
||||||
|
this.scrollTop = Date.now()
|
||||||
|
setTimeout(() => {
|
||||||
|
this.scrollTop = 999999
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
startVoiceInput() {
|
startVoiceInput() {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '语音功能开发中',
|
title: '语音功能开发中',
|
||||||
|
|
@ -555,10 +589,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-input-area {
|
.chat-input-area {
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
backdrop-filter: blur(20rpx);
|
backdrop-filter: blur(20rpx);
|
||||||
padding: 16rpx 20rpx;
|
padding: 16rpx 20rpx;
|
||||||
//padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|
||||||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -566,48 +598,131 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
.input-wrapper {
|
.input-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
border-radius: 28rpx;
|
border-radius: 28rpx;
|
||||||
padding: 0 20rpx;
|
padding: 0 20rpx;
|
||||||
backdrop-filter: blur(10rpx);
|
backdrop-filter: blur(15rpx);
|
||||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
border: 3rpx solid rgba(255, 255, 255, 0.98);
|
||||||
height: 56rpx;
|
height: 56rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 1rpx rgba(255, 255, 255, 0.4),
|
||||||
|
0 2rpx 8rpx rgba(255, 255, 255, 0.15),
|
||||||
|
0 4rpx 16rpx rgba(255, 255, 255, 0.1),
|
||||||
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: rgba(255, 255, 255, 1);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 2rpx rgba(255, 255, 255, 0.6),
|
||||||
|
0 0 20rpx rgba(255, 255, 255, 0.3),
|
||||||
|
0 4rpx 12rpx rgba(255, 255, 255, 0.2),
|
||||||
|
0 8rpx 24rpx rgba(255, 255, 255, 0.15),
|
||||||
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
}
|
||||||
|
|
||||||
.message-input {
|
.message-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #ffffff;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
font-weight: 400;
|
||||||
|
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-button {
|
.send-button {
|
||||||
padding: 12rpx 20rpx;
|
height: 56rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
background: rgba(200, 200, 200, 0.5);
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
|
||||||
transition: all 0.3s ease;
|
border: 3rpx solid rgba(255, 255, 255, 0.85);
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 1rpx rgba(255, 255, 255, 0.3),
|
||||||
|
0 2rpx 6rpx rgba(255, 255, 255, 0.12),
|
||||||
|
0 4rpx 12rpx rgba(255, 255, 255, 0.08),
|
||||||
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.15);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 21rpx;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%, rgba(255, 255, 255, 0.03) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.96) translateY(1rpx);
|
||||||
|
}
|
||||||
|
|
||||||
.send-text {
|
.send-text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666666;
|
color: rgba(255, 255, 255, 0.9);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-button.active {
|
.send-button.active {
|
||||||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
|
||||||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
border: 3rpx solid rgba(255, 255, 255, 0.98);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 2rpx rgba(255, 255, 255, 0.5),
|
||||||
|
0 0 16rpx rgba(255, 255, 255, 0.25),
|
||||||
|
0 4rpx 10rpx rgba(255, 255, 255, 0.18),
|
||||||
|
0 6rpx 20rpx rgba(255, 255, 255, 0.12),
|
||||||
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.25);
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(255, 255, 255, 0.06) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
.send-text {
|
.send-text {
|
||||||
color: #ffffff;
|
color: rgba(255, 255, 255, 0.98);
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 1rpx 3rpx rgba(255, 255, 255, 0.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue