diff --git a/package-lock.json b/package-lock.json index 93809a2..0f7efbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7177,8 +7177,9 @@ }, "node_modules/vconsole": { "version": "3.15.1", - "resolved": "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.1.tgz", + "resolved": "https://mirrors.huaweicloud.com/repository/npm/vconsole/-/vconsole-3.15.1.tgz", "integrity": "sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.2", "copy-text-to-clipboard": "^3.0.1", diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue index f8b81fe..fbfc401 100644 --- a/src/views/AIchat.vue +++ b/src/views/AIchat.vue @@ -180,12 +180,20 @@ const hasValidData = ref(false) // 创建一个非响应式的对象来存储图表实例 const chartInstancesMap = {}; +// 存储上一次的消息的length +const previousMessagesLength = ref(0); + watch( () => props.messages, async (newVal, oldVal) => { + console.log(newVal, 'newVal') + console.log(oldVal, 'oldVal') + console.log(previousMessagesLength.value, 'previousMessagesLength') + console.log(newVal.length, 'newVal.length') // 添加空值判断 - if (!newVal?.length || newVal === oldVal) return; + if (!newVal?.length || newVal === previousMessagesLength.value) return; + previousMessagesLength.value = newVal.length; if (newVal.length > 0) { console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1]) chatStore.messages.push(newVal[newVal.length - 1]) diff --git a/src/views/homePage.vue b/src/views/homePage.vue index d868743..3eeb31e 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -24,6 +24,9 @@ import voiceNoActive from "../assets/img/homePage/tail/voice-no-active.png"; import sendBtn from "../assets/img/homePage/tail/send.png"; import msgBtn from "../assets/img/homePage/tail/msg.png"; +import VConsole from 'vconsole'; + +const vConsole = new VConsole(); // import { useUserStore } from "../store/userPessionCode.js"; const { getQueryVariable, setActiveTabIndex } = useDataStore() @@ -126,28 +129,32 @@ const sendMessage = async () => { isScrolling.value = false; // 调用 ensureAIchat 确保跳转到 AIchat 页面 ensureAIchat(); + console.log(chatStore.isLoading, 'isLoading.value1111'); if (!message.value) return; if (chatStore.isLoading) return; - chatStore.setLoading(true); - console.log(chatStore.isLoading, 'isLoading.value2222'); - // 发送消息时，设置 isLoading 为 true - messages.value = [ - ...messages.value, - { - sender: "user", - content: message.value, - timestamp: new Date().toISOString(), - } - ]; - - // console.log(messages.value, 'messages.value'); + const messageContent = message.value; // 重置消息输入框 - message.value = ""; + + setTimeout(() => { + console.log("延时后添加消息", messageContent); + // 发送消息时，设置 isLoading 为 true + messages.value = [ + ...messages.value, + { + sender: "user", + content: messageContent, + timestamp: new Date().toISOString(), + } + ]; + console.log(messages.value, 'messages.value'); + }, 200); + + }; // 公告 @@ -219,8 +226,9 @@ watch( async () => { // console.log('activeTab变化了', activeTab.value) isScrolling.value = false; //回复滚动到底部方法 - await nextTick(); // 等待DOM更新 - throttledSmoothScrollToBottom(); + setTimeout(() => { + throttledSmoothScrollToBottom(); + }, 100) // setTimeout(throttledSmoothScrollToBottom, 100); }, { deep: true, immediate: true } @@ -319,6 +327,107 @@ const heightListener = () => { const throttledHeightListener = _.throttle(heightListener, 500, { trailing: false }); +// 优化后的输入框焦点处理方法 +const handleInputFocus = () => { + console.log('设置输入框焦点监听'); + const inputElement = document.querySelector('#input'); + if (!inputElement) return; + + // 判断是否为移动设备 + const isMobileDevice = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test( + navigator.userAgent + ); + + if (isMobileDevice) { + console.log('检测到移动设备，应用键盘适配'); + + // 设置页面视窗 + const meta = document.querySelector('meta[name="viewport"]'); + if (!meta) { + const newMeta = document.createElement('meta'); + newMeta.name = 'viewport'; + newMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; + document.getElementsByTagName('head')[0].appendChild(newMeta); + } else { + meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; + } + + // 初始化页面高度 + updateAppHeight(); + + // 检测是否为iOS设备 + const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent); + + if (isIOS) { + console.log('iOS设备特殊处理'); + // iOS设备特殊处理 + const msgInput = document.querySelector('.msg-input'); + if (msgInput) { + // 记录原始视口高度 + const originalHeight = window.innerHeight; + + // 监听输入框焦点 + msgInput.addEventListener('focus', () => { + console.log('iOS输入框获得焦点'); + // 延迟执行以确保键盘完全弹出 + setTimeout(() => { + // 计算键盘高度 + const keyboardHeight = originalHeight - window.innerHeight; + console.log('键盘高度:', keyboardHeight); + + // 设置页面高度 + document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`); + + // 滚动到底部 + const tabContentElement = document.querySelector('.tab-content'); + if (tabContentElement) { + tabContentElement.scrollTop = tabContentElement.scrollHeight; + } + + // 确保输入框可见 + inputElement.scrollIntoView({ block: 'end', behavior: 'smooth' }); + }, 300); + }); + + // 监听输入框失焦 + msgInput.addEventListener('blur', () => { + console.log('iOS输入框失去焦点'); + // 延迟执行以确保键盘完全收起 + setTimeout(() => { + // 恢复原始高度 + document.documentElement.style.setProperty('--app-height', `${originalHeight}px`); + }, 300); + }); + } + } else { + // Android设备处理 + window.addEventListener('resize', _.debounce(() => { + console.log('窗口大小改变:', window.innerHeight); + updateAppHeight(); + + // 尝试在键盘弹出后滚动到输入框位置 + const msgInput = document.querySelector('.msg-input'); + if (document.activeElement === msgInput) { + setTimeout(() => { + console.log('滚动到输入框位置'); + inputElement.scrollIntoView({ block: 'end', behavior: 'smooth' }); + + const tabContentElement = document.querySelector('.tab-content'); + if (tabContentElement) { + tabContentElement.scrollTop = tabContentElement.scrollHeight; + } + }, 200); + } + }, 100)); + } + } +}; + +function updateAppHeight() { + const vh = window.innerHeight; + document.documentElement.style.setProperty('--app-height', `${vh}px`); +} + onMounted(async () => { const isPhone = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test( @@ -330,7 +439,12 @@ onMounted(async () => { await chatStore.getUserCount(); throttledSmoothScrollToBottom(); throttledHeightListener(); - + + // 添加输入框焦点处理 + handleInputFocus(); + + // 初始化视口高度变量 + updateAppHeight(); }) @@ -371,7 +485,7 @@ onMounted(async () => { - +
@@ -409,7 +523,7 @@ onMounted(async () => {

- 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则 + 活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则