支持折叠的群聊判定

src/components/GlobalSessionMonitor.tsx

@@ -97,6 +97,10 @@ export function GlobalSessionMonitor() {
             if (!isCurrentSession && (!oldSession || newSession.lastTimestamp > oldSession.lastTimestamp)) {
                 // 这是新消息事件
 
+                // 免打扰、折叠群、折叠入口不弹通知
+                if (newSession.isMuted || newSession.isFolded) continue
+                if (newSession.username.toLowerCase().includes('placeholder_foldgroup')) continue
+
                 // 1. 群聊过滤自己发送的消息
                 if (newSession.username.includes('@chatroom')) {
                     // 如果是自己发的消息，不弹通知

src/pages/ChatPage.scss

@@ -866,6 +866,73 @@
   }
 }
 
+// Header 双 panel 滑动动画
+.session-header-viewport {
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+
+  .session-header-panel {
+    flex: 0 0 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 16px 16px 12px;
+    min-height: 56px;
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .main-header {
+    transform: translateX(0);
+    justify-content: space-between;
+  }
+
+  .folded-header {
+    transform: translateX(0);
+  }
+
+  &.folded {
+    .main-header { transform: translateX(-100%); }
+    .folded-header { transform: translateX(-100%); }
+  }
+}
+
+.folded-view-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  .back-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--bg-hover);
+    }
+  }
+
+  .folded-view-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
 @keyframes searchExpand {
   from {
     opacity: 0;
@@ -3863,4 +3930,135 @@
       overflow: hidden;
     }
   }
+}
+
+// 折叠群视图 header
+.folded-view-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+  width: 100%;
+
+  .back-btn {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    &:hover {
+      color: var(--text-primary);
+    }
+  }
+
+  .folded-view-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+}
+
+// 双 panel 滑动容器
+.session-list-viewport {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  // 两个 panel 并排，宽度各 100%，通过 translateX 切换
+  width: 100%;
+
+  .session-list-panel {
+    flex: 0 0 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  // 默认：main 在视口内，folded 在右侧外
+  .main-panel {
+    transform: translateX(0);
+  }
+  .folded-panel {
+    transform: translateX(0);
+  }
+
+  // 切换到折叠群视图：两个 panel 同时左移 100%
+  &.folded {
+    .main-panel {
+      transform: translateX(-100%);
+    }
+    .folded-panel {
+      transform: translateX(-100%);
+    }
+  }
+
+  .session-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}
+
+// 免打扰标识
+.session-item {
+  &.muted {
+    .session-name {
+      color: var(--text-secondary);
+    }
+  }
+
+  .session-badges {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+
+    .mute-icon {
+      color: var(--text-tertiary, #aaa);
+      opacity: 0.7;
+    }
+
+    .unread-badge.muted {
+      background: var(--text-tertiary, #aaa);
+      box-shadow: none;
+    }
+  }
+}
+
+// 折叠群入口样式
+.session-item.fold-entry {
+  background: var(--card-inner-bg, rgba(0,0,0,0.03));
+
+  .fold-entry-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background: var(--primary-color, #07c160);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: #fff;
+  }
+
+  .session-name {
+    font-weight: 500;
+  }
 }

src/pages/ChatPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { Search, MessageSquare, AlertCircle, Loader2, RefreshCw, X, ChevronDown, Info, Calendar, Database, Hash, Play, Pause, Image as ImageIcon, Link, Mic, CheckCircle, Copy, Check, CheckSquare, Download, BarChart3, Edit2, Trash2 } from 'lucide-react'
+import { Search, MessageSquare, AlertCircle, Loader2, RefreshCw, X, ChevronDown, ChevronLeft, Info, Calendar, Database, Hash, Play, Pause, Image as ImageIcon, Link, Mic, CheckCircle, Copy, Check, CheckSquare, Download, BarChart3, Edit2, Trash2, BellOff, Users, FolderClosed } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { createPortal } from 'react-dom'
 import { useChatStore } from '../stores/chatStore'
@@ -178,15 +178,38 @@ const SessionItem = React.memo(function SessionItem({
   onSelect: (session: ChatSession) => void
   formatTime: (timestamp: number) => string
 }) {
-  // 缓存格式化的时间
   const timeText = useMemo(() =>
     formatTime(session.lastTimestamp || session.sortTimestamp),
     [formatTime, session.lastTimestamp, session.sortTimestamp]
   )
 
+  const isFoldEntry = session.username.toLowerCase().includes('placeholder_foldgroup')
+
+  // 折叠入口：专属名称和图标
+  if (isFoldEntry) {
+    return (
+      <div
+        className={`session-item fold-entry`}
+        onClick={() => onSelect(session)}
+      >
+        <div className="fold-entry-avatar">
+          <FolderClosed size={22} />
+        </div>
+        <div className="session-info">
+          <div className="session-top">
+            <span className="session-name">折叠的群聊</span>
+          </div>
+          <div className="session-bottom">
+            <span className="session-summary">{session.summary || ''}</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div
-      className={`session-item ${isActive ? 'active' : ''}`}
+      className={`session-item ${isActive ? 'active' : ''} ${session.isMuted ? 'muted' : ''}`}
       onClick={() => onSelect(session)}
     >
       <Avatar
@@ -202,17 +225,19 @@ const SessionItem = React.memo(function SessionItem({
         </div>
         <div className="session-bottom">
           <span className="session-summary">{session.summary || '暂无消息'}</span>
-          {session.unreadCount > 0 && (
-            <span className="unread-badge">
-              {session.unreadCount > 99 ? '99+' : session.unreadCount}
-            </span>
-          )}
+          <div className="session-badges">
+            {session.isMuted && <BellOff size={12} className="mute-icon" />}
+            {session.unreadCount > 0 && (
+              <span className={`unread-badge ${session.isMuted ? 'muted' : ''}`}>
+                {session.unreadCount > 99 ? '99+' : session.unreadCount}
+              </span>
+            )}
+          </div>
         </div>
       </div>
     </div>
   )
 }, (prevProps, nextProps) => {
-  // 自定义比较：只在关键属性变化时重渲染
   return (
     prevProps.session.username === nextProps.session.username &&
     prevProps.session.displayName === nextProps.session.displayName &&
@@ -221,6 +246,7 @@ const SessionItem = React.memo(function SessionItem({
     prevProps.session.unreadCount === nextProps.session.unreadCount &&
     prevProps.session.lastTimestamp === nextProps.session.lastTimestamp &&
     prevProps.session.sortTimestamp === nextProps.session.sortTimestamp &&
+    prevProps.session.isMuted === nextProps.session.isMuted &&
     prevProps.isActive === nextProps.isActive
   )
 })
@@ -288,6 +314,7 @@ function ChatPage(_props: ChatPageProps) {
   const [copiedField, setCopiedField] = useState<string | null>(null)
   const [highlightedMessageKeys, setHighlightedMessageKeys] = useState<string[]>([])
   const [isRefreshingSessions, setIsRefreshingSessions] = useState(false)
+  const [foldedView, setFoldedView] = useState(false) // 是否在"折叠的群聊"视图
   const [hasInitialMessages, setHasInitialMessages] = useState(false)
   const [noMessageTable, setNoMessageTable] = useState(false)
   const [fallbackDisplayName, setFallbackDisplayName] = useState<string | null>(null)
@@ -995,6 +1022,11 @@ function ChatPage(_props: ChatPageProps) {
 
   // 选择会话
   const handleSelectSession = (session: ChatSession) => {
+    // 点击折叠群入口，切换到折叠群视图
+    if (session.username.toLowerCase().includes('placeholder_foldgroup')) {
+      setFoldedView(true)
+      return
+    }
     if (session.username === currentSessionId) return
     setCurrentSession(session.username)
     setCurrentOffset(0)
@@ -1011,27 +1043,11 @@ function ChatPage(_props: ChatPageProps) {
   // 搜索过滤
   const handleSearch = (keyword: string) => {
     setSearchKeyword(keyword)
-    if (!Array.isArray(sessions)) {
-      setFilteredSessions([])
-      return
-    }
-    if (!keyword.trim()) {
-      setFilteredSessions(sessions)
-      return
-    }
-    const lower = keyword.toLowerCase()
-    const filtered = sessions.filter(s =>
-      s.displayName?.toLowerCase().includes(lower) ||
-      s.username.toLowerCase().includes(lower) ||
-      s.summary.toLowerCase().includes(lower)
-    )
-    setFilteredSessions(filtered)
   }
 
   // 关闭搜索框
   const handleCloseSearch = () => {
     setSearchKeyword('')
-    setFilteredSessions(Array.isArray(sessions) ? sessions : [])
   }
 
   // 滚动加载更多 + 显示/隐藏回到底部按钮（优化：节流，避免频繁执行）
@@ -1303,23 +1319,40 @@ function ChatPage(_props: ChatPageProps) {
     searchKeywordRef.current = searchKeyword
   }, [searchKeyword])
 
+  // 普通视图：隐藏 isFolded 的群，保留 placeholder_foldgroup 入口
   useEffect(() => {
     if (!Array.isArray(sessions)) {
       setFilteredSessions([])
       return
     }
+    const visible = sessions.filter(s => {
+      if (s.isFolded && !s.username.toLowerCase().includes('placeholder_foldgroup')) return false
+      return true
+    })
     if (!searchKeyword.trim()) {
-      setFilteredSessions(sessions)
+      setFilteredSessions(visible)
       return
     }
     const lower = searchKeyword.toLowerCase()
-    const filtered = sessions.filter(s =>
+    setFilteredSessions(visible.filter(s =>
+      s.displayName?.toLowerCase().includes(lower) ||
+      s.username.toLowerCase().includes(lower) ||
+      s.summary.toLowerCase().includes(lower)
+    ))
+  }, [sessions, searchKeyword, setFilteredSessions])
+
+  // 折叠群列表（独立计算，供折叠 panel 使用）
+  const foldedSessions = useMemo(() => {
+    if (!Array.isArray(sessions)) return []
+    const folded = sessions.filter(s => s.isFolded)
+    if (!searchKeyword.trim() || !foldedView) return folded
+    const lower = searchKeyword.toLowerCase()
+    return folded.filter(s =>
       s.displayName?.toLowerCase().includes(lower) ||
       s.username.toLowerCase().includes(lower) ||
       s.summary.toLowerCase().includes(lower)
     )
-    setFilteredSessions(filtered)
-  }, [sessions, searchKeyword, setFilteredSessions])
+  }, [sessions, searchKeyword, foldedView])
 
 
   // 格式化会话时间（相对时间）- 使用 useMemo 缓存，避免每次渲染都计算
@@ -1984,26 +2017,41 @@ function ChatPage(_props: ChatPageProps) {
         ref={sidebarRef}
         style={{ width: sidebarWidth, minWidth: sidebarWidth, maxWidth: sidebarWidth }}
       >
-        <div className="session-header">
-          <div className="search-row">
-            <div className="search-box expanded">
-              <Search size={14} />
-              <input
-                ref={searchInputRef}
-                type="text"
-                placeholder="搜索"
-                value={searchKeyword}
-                onChange={(e) => handleSearch(e.target.value)}
-              />
-              {searchKeyword && (
-                <button className="close-search" onClick={handleCloseSearch}>
-                  <X size={12} />
-                </button>
-              )}
+        <div className={`session-header session-header-viewport ${foldedView ? 'folded' : ''}`}>
+          {/* 普通 header */}
+          <div className="session-header-panel main-header">
+            <div className="search-row">
+              <div className="search-box expanded">
+                <Search size={14} />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  placeholder="搜索"
+                  value={searchKeyword}
+                  onChange={(e) => handleSearch(e.target.value)}
+                />
+                {searchKeyword && (
+                  <button className="close-search" onClick={handleCloseSearch}>
+                    <X size={12} />
+                  </button>
+                )}
+              </div>
+              <button className="icon-btn refresh-btn" onClick={handleRefresh} disabled={isLoadingSessions || isRefreshingSessions}>
+                <RefreshCw size={16} className={(isLoadingSessions || isRefreshingSessions) ? 'spin' : ''} />
+              </button>
+            </div>
+          </div>
+          {/* 折叠群 header */}
+          <div className="session-header-panel folded-header">
+            <div className="folded-view-header">
+              <button className="icon-btn back-btn" onClick={() => setFoldedView(false)}>
+                <ChevronLeft size={18} />
+              </button>
+              <span className="folded-view-title">
+                <Users size={14} />
+                折叠的群聊
+              </span>
             </div>
-            <button className="icon-btn refresh-btn" onClick={handleRefresh} disabled={isLoadingSessions || isRefreshingSessions}>
-              <RefreshCw size={16} className={(isLoadingSessions || isRefreshingSessions) ? 'spin' : ''} />
-            </button>
           </div>
         </div>
 
@@ -2018,7 +2066,6 @@ function ChatPage(_props: ChatPageProps) {
         {/* ... (previous content) ... */}
         {isLoadingSessions ? (
           <div className="loading-sessions">
-            {/* ... (skeleton items) ... */}
             {[1, 2, 3, 4, 5].map(i => (
               <div key={i} className="skeleton-item">
                 <div className="skeleton-avatar" />
@@ -2029,36 +2076,65 @@ function ChatPage(_props: ChatPageProps) {
               </div>
             ))}
           </div>
-        ) : Array.isArray(filteredSessions) && filteredSessions.length > 0 ? (
-          <div
-            className="session-list"
-            ref={sessionListRef}
-            onScroll={() => {
-              isScrollingRef.current = true
-              if (sessionScrollTimeoutRef.current) {
-                clearTimeout(sessionScrollTimeoutRef.current)
-              }
-              sessionScrollTimeoutRef.current = window.setTimeout(() => {
-                isScrollingRef.current = false
-                sessionScrollTimeoutRef.current = null
-              }, 200)
-            }}
-          >
-            {filteredSessions.map(session => (
-              <SessionItem
-                key={session.username}
-                session={session}
-                isActive={currentSessionId === session.username}
-                onSelect={handleSelectSession}
-                formatTime={formatSessionTime}
-              />
-            ))}
-          </div>
         ) : (
-          <div className="empty-sessions">
-            <MessageSquare />
-            <p>暂无会话</p>
-            <p className="hint">请先在数据管理页面解密数据库</p>
+          <div className={`session-list-viewport ${foldedView ? 'folded' : ''}`}>
+            {/* 普通会话列表 */}
+            <div className="session-list-panel main-panel">
+              {Array.isArray(filteredSessions) && filteredSessions.length > 0 ? (
+                <div
+                  className="session-list"
+                  ref={sessionListRef}
+                  onScroll={() => {
+                    isScrollingRef.current = true
+                    if (sessionScrollTimeoutRef.current) {
+                      clearTimeout(sessionScrollTimeoutRef.current)
+                    }
+                    sessionScrollTimeoutRef.current = window.setTimeout(() => {
+                      isScrollingRef.current = false
+                      sessionScrollTimeoutRef.current = null
+                    }, 200)
+                  }}
+                >
+                  {filteredSessions.map(session => (
+                    <SessionItem
+                      key={session.username}
+                      session={session}
+                      isActive={currentSessionId === session.username}
+                      onSelect={handleSelectSession}
+                      formatTime={formatSessionTime}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className="empty-sessions">
+                  <MessageSquare />
+                  <p>暂无会话</p>
+                  <p className="hint">请先在数据管理页面解密数据库</p>
+                </div>
+              )}
+            </div>
+
+            {/* 折叠群列表 */}
+            <div className="session-list-panel folded-panel">
+              {foldedSessions.length > 0 ? (
+                <div className="session-list">
+                  {foldedSessions.map(session => (
+                    <SessionItem
+                      key={session.username}
+                      session={session}
+                      isActive={currentSessionId === session.username}
+                      onSelect={handleSelectSession}
+                      formatTime={formatSessionTime}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className="empty-sessions">
+                  <Users size={32} />
+                  <p>没有折叠的群聊</p>
+                </div>
+              )}
+            </div>
           </div>
         )}
 

src/types/models.ts

@@ -12,6 +12,8 @@ export interface ChatSession {
   lastMsgSender?: string
   lastSenderDisplayName?: string
   selfWxid?: string // Helper field to avoid extra API calls
+  isFolded?: boolean  // 是否已折叠进"折叠的群聊"
+  isMuted?: boolean   // 是否开启免打扰
 }
 
 // 联系人