LIMUXI/zlqy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile . themes

Browse Source
This commit is contained in:
limuxi
2026-03-05 12:57:55 +08:00
parent b5b9f7db06
commit c325007897
62 changed files with 835 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/chat.html
View File

@@ -80,9 +80,9 @@
</div>
</div>
<!-- 聊天视图 -->
<div id="chatView" class="flex-1 flex-col hidden z-10 relative">
<div id="chatView" class="flex-1 hidden z-10 relative h-full">
<!-- 顶栏 -->
<div id="chatHeader" class="px-6 py-4 border-b border-white/10 flex items-center justify-between bg-slate-800/60 backdrop-blur-xl sticky top-0 z-20">
<div id="chatHeader" class="px-6 py-4 border-b border-white/10 flex items-center justify-between bg-slate-800/60 backdrop-blur-xl flex-shrink-0 z-20">
<div class="flex items-center gap-3">
<button onclick="mobileBack()" class="sm:hidden w-8 h-8 rounded-lg bg-slate-700/50 text-slate-300 flex items-center justify-center mr-1 border border-white/10" aria-label="返回">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
@@ -114,9 +114,9 @@
</div>
</div>
<!-- 消息区域 -->
<div id="messageArea" class="flex-1 overflow-y-auto hide-scrollbar px-6 py-4 space-y-5" onscroll="handleScroll()"></div>
<div id="messageArea" class="flex-1 overflow-y-auto px-6 py-4 space-y-5" style="overflow-anchor: none;" onscroll="handleScroll()"></div>
<!-- 引用回复预览 -->
<div id="replyPreview" class="px-4 py-3 bg-cyan-500/10 backdrop-blur-md border-t border-cyan-500/30 hidden flex items-center justify-between shadow-inner">
<div id="replyPreview" class="px-4 py-3 bg-cyan-500/10 backdrop-blur-md border-t border-cyan-500/30 hidden flex items-center justify-between shadow-inner flex-shrink-0">
<div class="flex items-center gap-2 overflow-hidden">
<div class="w-1 h-4 bg-cyan-400 rounded-full"></div>
<div class="text-sm font-medium text-cyan-300 truncate"><span id="replyToText"></span></div>
@@ -126,7 +126,7 @@
</button>
</div>
<!-- 输入区域 -->
<div class="p-4 bg-slate-800/80 backdrop-blur-xl border-t border-white/10 shadow-[0_-4px_20px_-15px_rgba(0,0,0,0.3)]">
<div class="p-4 bg-slate-800/80 backdrop-blur-xl border-t border-white/10 shadow-[0_-4px_20px_-15px_rgba(0,0,0,0.3)] flex-shrink-0 relative">
<!-- Emoji 面板 -->
<div id="emojiPanel" class="hidden absolute bottom-[calc(100%+10px)] left-4 p-3 futuristic-card-dark backdrop-blur-xl rounded-2xl shadow-xl max-h-48 overflow-y-auto w-64 z-50">
<div class="flex flex-wrap gap-2 justify-center" id="emojiGrid"></div>
@@ -162,7 +162,7 @@
</div>
<div class="flex-1 futuristic-card-dark rounded-2xl shadow-sm focus-within:ring-2 focus-within:ring-cyan-500/30 focus-within:border-cyan-400/50 transition-all overflow-hidden">
<textarea id="msgInput" rows="1" placeholder="输入消息... (Enter发送, Shift+Enter换行)" class="flex-1 w-full px-4 py-3.5 text-sm bg-transparent text-white placeholder-slate-500 border-none focus:outline-none focus:ring-0 resize-none max-h-32 min-h-[48px] hide-scrollbar" oninput="handleTyping(); this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';"></textarea>
<textarea id="msgInput" rows="1" placeholder="输入消息... (Enter发送, Shift+Enter换行)" class="flex-1 w-full px-4 py-3.5 text-sm bg-transparent text-white placeholder-slate-500 border-none focus:outline-none focus:ring-0 resize-none max-h-32 min-h-[48px] hide-scrollbar" oninput="handleTyping(); this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';" onkeydown="handleInputKey(event)"></textarea>
</div>
<button onclick="sendMessage()" class="btn-futuristic w-12 h-12 rounded-2xl flex items-center justify-center hover:shadow-lg hover:shadow-cyan-500/30 transform hover:-translate-y-0.5 transition-all flex-shrink-0 group">
@@ -703,7 +703,10 @@ async function loadMessages(roomId, beforeId) {
if (!beforeId) {
area.innerHTML = '';
data.messages.forEach(m => area.appendChild(createMsgEl(m)));
area.scrollTop = area.scrollHeight;
// 确保滚动到底部
setTimeout(() => {
area.scrollTop = area.scrollHeight;
}, 100);
} else {
const oldH = area.scrollHeight;
data.messages.forEach((m, i) => area.insertBefore(createMsgEl(m), area.children[i]));
@@ -813,6 +816,7 @@ function sendMessage() {
reply_to_id: replyToId, mentions: mentionsStr
});
input.value = '';
input.style.height = 'auto';
mentionMembers = [];
cancelReply();
document.getElementById('emojiPanel').classList.add('hidden');
@@ -1337,8 +1341,14 @@ async function stopRecording() {
socket.on('new_message', (msg) => {
if (msg.room_id === currentRoomId) {
const area = document.getElementById('messageArea');
const wasAtBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 100;
area.appendChild(createMsgEl(msg));
area.scrollTop = area.scrollHeight;
// 如果用户在底部或者是自己发的消息，自动滚动到底部
if (wasAtBottom || msg.sender_id === currentUser.id) {
setTimeout(() => {
area.scrollTop = area.scrollHeight;
}, 50);
}
markRead(currentRoomId);
}
// 更新会话列表