|
@ -1,6 +1,6 @@ |
|
|
<script setup> |
|
|
<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 { setHeight } from "../utils/setHeight"; |
|
|
import { getUserCountAPI } from "../api/AIxiaocaishen"; |
|
|
import { getUserCountAPI } from "../api/AIxiaocaishen"; |
|
|
import { ElMessage } from 'element-plus' |
|
|
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 sendBtn from "../assets/img/homePage/tail/send.png"; |
|
|
import msgBtn from "../assets/img/homePage/tail/msg.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"; |
|
|
// import { useUserStore } from "../store/userPessionCode.js"; |
|
|
const { getQueryVariable, setActiveTabIndex } = useDataStore() |
|
|
const { getQueryVariable, setActiveTabIndex } = useDataStore() |
|
@ -334,15 +335,16 @@ const handleInputFocus = () => { |
|
|
console.log('设置输入框焦点监听'); |
|
|
console.log('设置输入框焦点监听'); |
|
|
const inputElement = document.querySelector('#input'); |
|
|
const inputElement = document.querySelector('#input'); |
|
|
if (!inputElement) return; |
|
|
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( |
|
|
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 |
|
|
navigator.userAgent |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
console.log('是否为移动设备:', isMobileDevice, navigator.userAgent); |
|
|
|
|
|
|
|
|
if (isMobileDevice) { |
|
|
if (isMobileDevice) { |
|
|
console.log('检测到移动设备,应用键盘适配'); |
|
|
console.log('检测到移动设备,应用键盘适配'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 设置页面视窗 |
|
|
// 设置页面视窗 |
|
|
const meta = document.querySelector('meta[name="viewport"]'); |
|
|
const meta = document.querySelector('meta[name="viewport"]'); |
|
|
if (!meta) { |
|
|
if (!meta) { |
|
@ -353,67 +355,46 @@ const handleInputFocus = () => { |
|
|
} else { |
|
|
} else { |
|
|
meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; |
|
|
meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化页面高度 |
|
|
// 初始化页面高度 |
|
|
updateAppHeight(); |
|
|
updateAppHeight(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 检测是否为iOS设备 |
|
|
// 检测是否为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) { |
|
|
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 { |
|
|
} else { |
|
|
// Android设备处理 |
|
|
// Android设备处理 |
|
|
|
|
|
console.log('Android设备处理'); |
|
|
window.addEventListener('resize', _.debounce(() => { |
|
|
window.addEventListener('resize', _.debounce(() => { |
|
|
console.log('窗口大小改变:', window.innerHeight); |
|
|
console.log('窗口大小改变:', window.innerHeight); |
|
|
updateAppHeight(); |
|
|
updateAppHeight(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 尝试在键盘弹出后滚动到输入框位置 |
|
|
// 尝试在键盘弹出后滚动到输入框位置 |
|
|
const msgInput = document.querySelector('.msg-input'); |
|
|
const msgInput = document.querySelector('.msg-input'); |
|
|
if (document.activeElement === msgInput) { |
|
|
if (document.activeElement === msgInput) { |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
console.log('滚动到输入框位置'); |
|
|
console.log('滚动到输入框位置'); |
|
|
inputElement.scrollIntoView({ block: 'end', behavior: 'smooth' }); |
|
|
inputElement.scrollIntoView({ block: 'end', behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tabContentElement = document.querySelector('.tab-content'); |
|
|
const tabContentElement = document.querySelector('.tab-content'); |
|
|
if (tabContentElement) { |
|
|
if (tabContentElement) { |
|
|
tabContentElement.scrollTop = tabContentElement.scrollHeight; |
|
|
tabContentElement.scrollTop = tabContentElement.scrollHeight; |
|
@ -444,10 +425,10 @@ onMounted(async () => { |
|
|
throttledSmoothScrollToBottom(); |
|
|
throttledSmoothScrollToBottom(); |
|
|
// 监听页面高度 |
|
|
// 监听页面高度 |
|
|
throttledHeightListener(); |
|
|
throttledHeightListener(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 添加输入框焦点处理 |
|
|
// 添加输入框焦点处理 |
|
|
handleInputFocus(); |
|
|
handleInputFocus(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化视口高度变量 |
|
|
// 初始化视口高度变量 |
|
|
updateAppHeight(); |
|
|
updateAppHeight(); |
|
|
}) |
|
|
}) |
|
@ -594,10 +575,11 @@ onMounted(async () => { |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
|
|
|
|
|
|
.homepage { |
|
|
.homepage { |
|
|
height: var(--app-height, 100vh); |
|
|
height: var(--app-height, 100vh); |
|
|
margin: 0 auto; |
|
|
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-size: 100% 100%; |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
background-position: center; |
|
|
background-position: center; |
|
@ -609,36 +591,64 @@ onMounted(async () => { |
|
|
right: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
/* 添加iOS设备特殊处理 */ |
|
|
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
-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 { |
|
|
.homepage .el-container { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
display: flex; |
|
|
display: flex; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
overflow: hidden; /* 防止容器滚动 */ |
|
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
/* 防止容器滚动 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.el-container .el-header { |
|
|
.el-container .el-header { |
|
|
flex-shrink: 0; /* 防止头部压缩 */ |
|
|
|
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
/* 防止头部压缩 */ |
|
|
height: auto; |
|
|
height: auto; |
|
|
min-height: 60px; |
|
|
min-height: 60px; |
|
|
padding: 5px 0; |
|
|
padding: 5px 0; |
|
|
position: sticky; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
top: 0; |
|
|
z-index: 10; |
|
|
z-index: 10; |
|
|
background-color: rgba(255, 255, 255, 0.9); |
|
|
|
|
|
|
|
|
/* background-color: rgba(255, 255, 255, 0.9); */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.el-container .el-main { |
|
|
.el-container .el-main { |
|
|
flex: 1; /* 自动占据剩余空间 */ |
|
|
|
|
|
overflow: hidden; /* 主容器不滚动 */ |
|
|
|
|
|
|
|
|
flex: 1; |
|
|
|
|
|
/* 自动占据剩余空间 */ |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
/* 主容器不滚动 */ |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
min-height: 0; /* 允许内容区域缩小 */ |
|
|
|
|
|
|
|
|
min-height: 0; |
|
|
|
|
|
/* 允许内容区域缩小 */ |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
height: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.el-container .el-footer { |
|
|
.el-container .el-footer { |
|
@ -648,11 +658,12 @@ onMounted(async () => { |
|
|
position: sticky; |
|
|
position: sticky; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
z-index: 20; |
|
|
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); |
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); |
|
|
/* 添加iOS设备特殊处理 */ |
|
|
|
|
|
-webkit-transform: translateZ(0); |
|
|
-webkit-transform: translateZ(0); |
|
|
transform: translateZ(0); |
|
|
transform: translateZ(0); |
|
|
|
|
|
padding-bottom: env(safe-area-inset-bottom, 0); |
|
|
|
|
|
/* 适配iPhone X及以上的底部安全区域 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.homepage-head { |
|
|
.homepage-head { |
|
@ -703,7 +714,8 @@ onMounted(async () => { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
min-height: 0; /* 允许内容区域缩小 */ |
|
|
|
|
|
|
|
|
min-height: 0; |
|
|
|
|
|
/* 允许内容区域缩小 */ |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -712,17 +724,20 @@ onMounted(async () => { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
min-height: 0; /* 允许内容区域缩小 */ |
|
|
|
|
|
|
|
|
min-height: 0; |
|
|
|
|
|
/* 允许内容区域缩小 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tab-section { |
|
|
.tab-section { |
|
|
flex-shrink: 0; /* 禁止伸缩 */ |
|
|
|
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
/* 禁止伸缩 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tab-content { |
|
|
.tab-content { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
overflow-y: auto; |
|
|
min-height: 0; /* 关键:允许内容收缩 */ |
|
|
|
|
|
|
|
|
min-height: 0; |
|
|
|
|
|
/* 关键:允许内容收缩 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.homepage-logo { |
|
|
.homepage-logo { |
|
@ -807,7 +822,7 @@ onMounted(async () => { |
|
|
top: 50%; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
transform: translateY(-50%); |
|
|
width: 24px; |
|
|
width: 24px; |
|
|
z-index: 1; |
|
|
|
|
|
|
|
|
z-index: 999; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.msg-input:deep(.el-textarea__inner) { |
|
|
.msg-input:deep(.el-textarea__inner) { |
|
|