modified chat theme

templates/chat.html

@@ -4,7 +4,7 @@
 {% block content %}
 <div id="chatApp" class="flex bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/50 overflow-hidden" style="height:calc(100vh - 120px);min-height:500px;">
     <!-- 左侧面板 -->
-    <div class="w-80 border-r border-slate-200/60 bg-white/50 flex flex-col flex-shrink-0 relative z-10">
+    <div id="leftPanel" class="w-full sm:w-80 border-r border-slate-200/60 bg-white/50 flex flex-col flex-shrink-0 relative z-10">
         <!-- Tab 切换：聊天 / 通知 -->
         <div class="flex p-3 gap-2 bg-white/40 border-b border-slate-200/50 backdrop-blur-md sticky top-0 z-20">
             <button id="tabChat" onclick="switchTab('chat')" class="flex-1 px-4 py-2 text-sm font-bold text-white bg-gradient-to-r from-indigo-500 to-purple-500 rounded-xl shadow-md transition-all duration-300">💬 聊天</button>
@@ -43,7 +43,7 @@
         </div>
     </div>
     <!-- 右侧聊天区 -->
-    <div class="flex-1 flex flex-col bg-[url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%236366f1\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] relative">
+    <div id="rightPanel" class="flex-1 flex flex-col hidden sm:flex bg-[url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%236366f1\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] relative">
         <div class="absolute inset-0 bg-gradient-to-br from-white/90 to-white/50 backdrop-blur-[2px] z-0"></div>
         <!-- 未选中状态 -->
         <div id="emptyState" class="flex-1 flex items-center justify-center z-10">
@@ -59,6 +59,9 @@
         <!-- 通知详情视图 -->
         <div id="notifDetailView" class="flex-1 flex-col hidden z-10 bg-white/80 backdrop-blur-md">
             <div class="px-6 py-4 border-b border-slate-200/60 flex items-center gap-4 bg-white/50 sticky top-0 backdrop-blur-xl">
+                <button onclick="mobileBack()" class="sm:hidden w-8 h-8 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center flex-shrink-0" 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>
+                </button>
                 <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-2xl shadow-sm border border-white" id="notifDetailIconContainer">
                     <span id="notifDetailIcon"></span>
                 </div>
@@ -81,6 +84,9 @@
             <!-- 顶栏 -->
             <div id="chatHeader" class="px-6 py-4 border-b border-slate-200/60 flex items-center justify-between bg-white/60 backdrop-blur-xl sticky top-0 z-20">
                 <div class="flex items-center gap-3">
+                    <button onclick="mobileBack()" class="sm:hidden w-8 h-8 rounded-lg bg-slate-100 text-slate-600 flex items-center justify-center mr-1" 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>
+                    </button>
                     <div id="chatAvatarContainer" class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center text-indigo-600 font-bold shadow-sm overflow-hidden">
                         <!-- 头像动态插入 -->
                     </div>
@@ -291,6 +297,24 @@ let recordingInterval = null;
 let searchTimer = null;
 let mentionMembers = [];
 
+function isMobile() { return window.innerWidth < 640; }
+
+function mobileBack() {
+    if (!isMobile()) return;
+    document.getElementById('rightPanel').classList.add('hidden');
+    document.getElementById('rightPanel').classList.remove('flex');
+    document.getElementById('leftPanel').classList.remove('hidden');
+    document.getElementById('leftPanel').classList.add('flex');
+}
+
+function mobileShowRight() {
+    if (!isMobile()) return;
+    document.getElementById('leftPanel').classList.add('hidden');
+    document.getElementById('leftPanel').classList.remove('flex');
+    document.getElementById('rightPanel').classList.remove('hidden');
+    document.getElementById('rightPanel').classList.add('flex');
+}
+
 const EMOJIS = ['😀','😂','😍','🥰','😎','🤔','😅','😭','😤','👍','👎','❤️','🔥','🎉','👏','🙏','💪','😊','🥺','😢','😡','🤣','😘','🤗','😱','💯','✅','❌','⭐','🌟'];
 
 // ========== 初始化 ==========
@@ -487,6 +511,7 @@ function showNotifDetail(nid) {
     const detail = document.getElementById('notifDetailView');
     detail.classList.remove('hidden');
     detail.classList.add('flex');
+    mobileShowRight();
 
     const typeLabels = {
         'teacher_application': '教师申请', 'teacher_result': '教师审核结果',
@@ -608,6 +633,7 @@ async function selectRoom(roomId) {
     const cv = document.getElementById('chatView');
     cv.classList.remove('hidden');
     cv.classList.add('flex');
+    mobileShowRight();
     const room = rooms.find(r => r.id === roomId);
     if (room) {
         document.getElementById('chatName').textContent = room.name || '聊天';