From 6607ea17036f631673ce3360ea03ebffbec27f1d Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Fri, 28 Mar 2025 13:47:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8B=B9=E6=9E=9C=E6=9A=82=E6=97=B6=E5=85=A8?=
 =?UTF-8?q?=E6=8E=A8=E4=B8=8A=E5=8E=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AIchat.vue   |  14 ++---
 src/views/homePage.vue | 149 +++++++++++++++++++++++++++----------------------
 2 files changed, 89 insertions(+), 74 deletions(-)

diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue
index fbfc401..6e6e6a6 100644
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@@ -186,11 +186,11 @@ 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')
-    // 添加空值判断
+    // console.log(newVal, 'newVal')
+    // console.log(oldVal, 'oldVal')
+    // console.log(previousMessagesLength.value, 'previousMessagesLength')
+    // console.log(newVal.length, 'newVal.length')
+    // // 添加空值判断
     if (!newVal?.length || newVal === previousMessagesLength.value) return;
 
     previousMessagesLength.value = newVal.length;
@@ -208,7 +208,7 @@ watch(
       const params = {
         content: newVal[newVal.length - 1].content,
         userData: {
-          // token: localStorage.getItem('localToken'),
+          token: localStorage.getItem('localToken'),
           // language: "cn",
           // brainPrivilegeState: userStore.brainPerssion,
           // swordPrivilegeState: userStore.swordPerssion,
@@ -218,7 +218,7 @@ watch(
           // aigoldBullPrivilegeS: userStore.aiGnbullPerssion,
           // airadarPrivilegeStat: userStore.airadarPerssion,
           // marketList: "hk,cn,usa,my,sg,vi,in,gb"
-          token: "+SsksARQgUHIbIG3rRnnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w",
+          // token: "+SsksARQgUHIbIG3rRnnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w",
           language: "cn",
           brainPrivilegeState: "1",
           swordPrivilegeState: "1",
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 609d460..416f956 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,6 +1,6 @@
 <script setup>
 // 导入
-import { ref, computed, onMounted, watch, nextTick } from "vue";
+import { ref, computed, onMounted, watch, nextTick, onUnmounted } from "vue";
 import { setHeight } from "../utils/setHeight";
 import { getUserCountAPI } from "../api/AIxiaocaishen";
 import { ElMessage } from 'element-plus'
@@ -24,9 +24,10 @@ 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 VConsole from 'vconsole';
+
+// const vConsole = new VConsole();
 
 // import { useUserStore } from "../store/userPessionCode.js";
 const { getQueryVariable, setActiveTabIndex } = useDataStore()
@@ -334,15 +335,16 @@ 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
   );
-  
+  console.log('是否为移动设备:', isMobileDevice, navigator.userAgent);
+
   if (isMobileDevice) {
     console.log('检测到移动设备，应用键盘适配');
-    
+
     // 设置页面视窗
     const meta = document.querySelector('meta[name="viewport"]');
     if (!meta) {
@@ -353,67 +355,46 @@ const handleInputFocus = () => {
     } 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);
-    
+    const isIOS = /iPhone|iPad|iPod|ios/i.test(navigator.userAgent);
+    console.log('是否为iOS设备:', isIOS);
+
     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);
+      console.log('iOS设备特殊处理开始');
+      // 使用 visualViewport API 监测视口变化
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener('resize', () => {
+          const headerHeight = document.querySelector('.el-header').offsetHeight;
+          const footerHeight = document.querySelector('.el-footer').offsetHeight;
+          const keyboardHeight = window.visualViewport.height; // 获取虚拟键盘高度
+          const totalHeight = headerHeight + footerHeight; // 头部和底部的总高度
+
+          // 计算 el-main 的新高度
+          const newMainHeight = window.innerHeight - totalHeight - keyboardHeight;
+
+          // 设置 el-main 的高度
+          document.querySelector('.el-main').style.height = `${newMainHeight}px`;
         });
       }
+
     } else {
       // Android设备处理
+      console.log('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;
@@ -444,10 +425,10 @@ onMounted(async () => {
   throttledSmoothScrollToBottom();
   // 监听页面高度
   throttledHeightListener();
-  
+
   // 添加输入框焦点处理
   handleInputFocus();
-  
+
   // 初始化视口高度变量
   updateAppHeight();
 })
@@ -594,10 +575,11 @@ onMounted(async () => {
 </style>
 
 <style scoped>
+
 .homepage {
   height: var(--app-height, 100vh);
   margin: 0 auto;
-  background-image: url(src/assets/img/homePage/bk.png);
+  background-image: url(/src/assets/img/homePage/bk.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -609,36 +591,64 @@ onMounted(async () => {
   right: 0;
   bottom: 0;
   width: 100%;
-  /* 添加iOS设备特殊处理 */
   -webkit-overflow-scrolling: touch;
 }
 
+/* iOS处理相关样式 */
+body.ios-device {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* iOS键盘弹出时的样式 */
+@media (max-height: 400px) {
+  body.ios-device .homepage-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+  }
+
+  body.ios-device .el-main {
+    margin-bottom: 120px;
+  }
+}
+
 .homepage .el-container {
   height: 100%;
   flex-direction: column;
   display: flex;
   width: 100%;
-  overflow: hidden; /* 防止容器滚动 */
+  overflow: hidden;
+  /* 防止容器滚动 */
 }
 
 .el-container .el-header {
-  flex-shrink: 0; /* 防止头部压缩 */
+  flex-shrink: 0;
+  /* 防止头部压缩 */
   height: auto;
   min-height: 60px;
   padding: 5px 0;
   position: sticky;
   top: 0;
   z-index: 10;
-  background-color: rgba(255, 255, 255, 0.9);
+  /* background-color: rgba(255, 255, 255, 0.9); */
 }
 
 .el-container .el-main {
-  flex: 1; /* 自动占据剩余空间 */
-  overflow: hidden; /* 主容器不滚动 */
+  flex: 1;
+  /* 自动占据剩余空间 */
+  overflow: hidden;
+  /* 主容器不滚动 */
   display: flex;
   flex-direction: column;
-  min-height: 0; /* 允许内容区域缩小 */
+  min-height: 0;
+  /* 允许内容区域缩小 */
   position: relative;
+  height: auto;
 }
 
 .el-container .el-footer {
@@ -648,11 +658,12 @@ onMounted(async () => {
   position: sticky;
   bottom: 0;
   z-index: 20;
-  background-color: rgba(255, 255, 255, 0.97);
+  background-color: rgba(211, 24, 24, 0);
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
-  /* 添加iOS设备特殊处理 */
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  /* 适配iPhone X及以上的底部安全区域 */
 }
 
 .homepage-head {
@@ -703,7 +714,8 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   flex: 1;
-  min-height: 0; /* 允许内容区域缩小 */
+  min-height: 0;
+  /* 允许内容区域缩小 */
   overflow: hidden;
 }
 
@@ -712,17 +724,20 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   flex: 1;
-  min-height: 0; /* 允许内容区域缩小 */
+  min-height: 0;
+  /* 允许内容区域缩小 */
 }
 
 .tab-section {
-  flex-shrink: 0; /* 禁止伸缩 */
+  flex-shrink: 0;
+  /* 禁止伸缩 */
 }
 
 .tab-content {
   flex: 1;
   overflow-y: auto;
-  min-height: 0; /* 关键：允许内容收缩 */
+  min-height: 0;
+  /* 关键：允许内容收缩 */
 }
 
 .homepage-logo {
@@ -807,7 +822,7 @@ onMounted(async () => {
   top: 50%;
   transform: translateY(-50%);
   width: 24px;
-  z-index: 1;
+  z-index: 999;
 }
 
 .msg-input:deep(.el-textarea__inner) {