71 lines
2.7 KiB
JavaScript
71 lines
2.7 KiB
JavaScript
/**
|
||
* 动态监测聊天输入框高度变化
|
||
* 当输入框高度变化时（如多行文本扩展），自动更新CSS变量
|
||
*/
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取聊天输入框容器
|
||
const chatInputContainer = document.getElementById('chatModeInput');
|
||
|
||
if (!chatInputContainer) {
|
||
console.log('Chat input container not found, will retry when chat mode is activated');
|
||
return;
|
||
}
|
||
|
||
// 创建 ResizeObserver 监测高度变化
|
||
const resizeObserver = new ResizeObserver(entries => {
|
||
for (let entry of entries) {
|
||
const height = entry.contentRect.height;
|
||
|
||
// 更新CSS变量
|
||
document.documentElement.style.setProperty('--chat-input-height', height + 'px');
|
||
|
||
// 调试信息
|
||
console.log('Chat input height updated:', height + 'px');
|
||
}
|
||
});
|
||
|
||
// 开始观察
|
||
resizeObserver.observe(chatInputContainer);
|
||
|
||
// 初始设置高度
|
||
const initialHeight = chatInputContainer.offsetHeight;
|
||
if (initialHeight > 0) {
|
||
document.documentElement.style.setProperty('--chat-input-height', initialHeight + 'px');
|
||
}
|
||
|
||
// 监听聊天模式切换
|
||
const observer = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function(mutation) {
|
||
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
||
// 检查是否进入聊天模式
|
||
if (document.body.classList.contains('chat-mode')) {
|
||
// 重新计算高度
|
||
setTimeout(() => {
|
||
const chatInput = document.getElementById('chatModeInput');
|
||
if (chatInput) {
|
||
const height = chatInput.offsetHeight;
|
||
document.documentElement.style.setProperty('--chat-input-height', height + 'px');
|
||
}
|
||
}, 100);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 观察body的class变化
|
||
observer.observe(document.body, { attributes: true });
|
||
});
|
||
|
||
// 处理窗口大小变化
|
||
window.addEventListener('resize', function() {
|
||
const chatInputContainer = document.getElementById('chatModeInput');
|
||
if (chatInputContainer && document.body.classList.contains('chat-mode')) {
|
||
const height = chatInputContainer.offsetHeight;
|
||
document.documentElement.style.setProperty('--chat-input-height', height + 'px');
|
||
}
|
||
});
|
||
})(); |