苹果暂时全推上去

2 months ago · 6607ea1703
2 changed files with 89 additions and 74 deletions
--- 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",
--- 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) {