fix: 更新标题栏样式以支持右侧内容并优化侧边栏布局

src/components/TitleBar.scss

@@ -20,6 +20,7 @@
   }
 
   &.variant-standalone {
+    --title-bar-right-safe: var(--window-controls-right-safe);
     height: var(--window-chrome-height);
     min-height: var(--window-chrome-height);
     display: flex;
@@ -27,14 +28,14 @@
     justify-content: space-between;
     gap: var(--window-toolbar-gap);
     padding-left: 16px;
-    padding-right: var(--window-controls-right-safe);
+    padding-right: var(--title-bar-right-safe);
   }
 
   &.variant-standalone.is-mac {
     display: grid;
     grid-template-columns: calc(var(--window-controls-left-safe) - 16px) minmax(0, 1fr) auto;
     padding-left: 16px;
-    padding-right: var(--window-controls-right-safe);
+    padding-right: var(--title-bar-right-safe);
   }
 }
 

src/components/TitleBar.tsx

@@ -7,17 +7,21 @@ import { useThemeStore } from '../stores/themeStore'
 import './TitleBar.scss'
 
 interface TitleBarProps {
+  className?: string
   rightContent?: ReactNode
   title?: string
   variant?: 'app' | 'standalone'
 }
 
-function TitleBar({ rightContent, title, variant = 'app' }: TitleBarProps) {
+function TitleBar({ className, rightContent, title, variant = 'app' }: TitleBarProps) {
   const storeRightContent = useTitleBarStore(state => state.rightContent)
   const displayContent = rightContent ?? storeRightContent
   const isUpdating = useUpdateStatusStore(state => state.isUpdating)
   const appIcon = useThemeStore(state => state.appIcon)
   const { isMac } = usePlatformInfo()
+  const titleBarClassName = ['title-bar', `variant-${variant}`, isMac ? 'is-mac' : 'is-win', className]
+    .filter(Boolean)
+    .join(' ')
 
   const updateStatusNode = isUpdating ? (
     <div className="update-status">
@@ -38,7 +42,7 @@ function TitleBar({ rightContent, title, variant = 'app' }: TitleBarProps) {
   )
 
   return (
-    <div className={`title-bar variant-${variant} ${isMac ? 'is-mac' : 'is-win'}`}>
+    <div className={titleBarClassName}>
       <div className="title-bar-left">
         {isMac ? (
           <div className="title-bar-traffic-spacer" aria-hidden="true" />

src/pages/BrowserWindowPage.tsx

@@ -74,7 +74,7 @@ const BrowserWindowPage = () => {
 
     return (
         <div className="browser-window" style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: '#fff' }}>
-            <TitleBar title={pageTitle} variant="standalone" />
+            <TitleBar className="browser-window-title-bar" title={pageTitle} variant="standalone" />
 
             {/* 简单的进度条 */}
             {isLoading && (

src/pages/ChatHistoryPage.tsx

@@ -153,7 +153,7 @@ export default function ChatHistoryPage() {
 
     return (
         <div className="chat-history-page">
-            <TitleBar title={title} variant="standalone" />
+            <TitleBar className="chat-history-title-bar" title={title} variant="standalone" />
             <div className="history-list">
                 {loading ? (
                     <div className="status-msg">加载中...</div>

src/pages/MomentsWindow.scss

@@ -16,6 +16,7 @@
 
 .sns-sidebar {
   width: 280px;
+  min-width: 280px;
   background: var(--bg-secondary);
   border-right: 1px solid var(--border-color);
   display: flex;
@@ -23,9 +24,9 @@
   transition: width 0.3s ease, transform 0.3s ease;
 
   &.closed {
-    width: 0;
+    width: 56px;
+    min-width: 56px;
     overflow: hidden;
-    border-right: none;
   }
 
   h3 {
@@ -36,6 +37,100 @@
   }
 }
 
+.sidebar-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+  min-height: 56px;
+}
+
+.sidebar-toolbar-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.sidebar-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-tool-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background: var(--hover-bg);
+    color: var(--text-primary);
+    border-color: rgba(var(--accent-rgb), 0.25);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  &.active {
+    color: var(--accent-color);
+    border-color: rgba(var(--accent-rgb), 0.28);
+    background: rgba(var(--accent-rgb), 0.08);
+  }
+
+  &[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    top: 50%;
+    left: calc(100% + 8px);
+    transform: translateY(-50%);
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    background: var(--tooltip-bg, rgba(0, 0, 0, 0.75));
+    color: var(--tooltip-color, #fff);
+    z-index: 999;
+  }
+
+  &:hover:not(:disabled)::after {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
+
+.sns-sidebar.closed {
+  .sidebar-toolbar {
+    padding: 12px 8px;
+    justify-content: center;
+  }
+
+  .sidebar-toolbar-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
 .filter-content {
   flex: 1;
   overflow-y: auto;
@@ -1339,14 +1434,12 @@
   }
 }
 
-html[data-window-platform="darwin"] .moments-window .title-actions {
-  gap: 6px;
+.moments-title-bar.is-win {
+  --title-bar-right-safe: calc(var(--window-controls-right-safe) + 12px);
 }
 
-@media (max-width: 1180px) {
-  html[data-window-platform="darwin"] .moments-window .title-actions .divider {
-    display: none;
-  }
+html[data-window-platform="darwin"] .moments-window .title-actions {
+  gap: 6px;
 }
 
 @media (max-width: 1040px) {
@@ -1362,11 +1455,6 @@ html[data-window-platform="darwin"] .moments-window .title-actions {
   }
 }
 
-.icon-btn {
-  width: 30px;
-  height: 30px;
-}
-
 
 // Modal and dialogs
 .modal-overlay {

src/pages/MomentsWindow.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { Loader2, RefreshCw, Search, Calendar, User, X, Filter, AlertTriangle, Play, Download, Heart, Copy, Link, Music, FileDown, ArrowUp } from 'lucide-react'
+import { Loader2, RefreshCw, Search, Calendar, User, X, Filter, AlertTriangle, Play, Download, Heart, Copy, Link, Music, FileDown, ArrowUp, ChevronLeft, ChevronRight } from 'lucide-react'
 import { ImagePreview } from '../components/ImagePreview'
 import { LivePhotoIcon } from '../components/LivePhotoIcon'
 import { parseWechatEmoji, parseWechatEmojiHtml } from '../utils/wechatEmoji'
@@ -1534,6 +1534,7 @@ document.querySelectorAll('.vi video').forEach(function(v) {
   return (
     <div className="moments-window">
       <TitleBar
+        className="moments-title-bar"
         title="朋友圈"
         variant="standalone"
         rightContent={
@@ -1542,17 +1543,6 @@ document.querySelectorAll('.vi video').forEach(function(v) {
               <FileDown size={14} />
               <span>导出</span>
             </button>
-            <div className="divider"></div>
-            <button
-              className={`icon-btn ${isSidebarOpen ? 'active' : ''}`}
-              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-              data-tooltip={isSidebarOpen ? "收起筛选" : "打开筛选"}
-            >
-              <Filter size={16} />
-            </button>
-            <button onClick={() => loadPosts({ reset: true })} disabled={isLoading} className="refresh-btn" data-tooltip="刷新">
-              <RefreshCw size={16} className={isLoading ? 'spinning' : ''} />
-            </button>
           </div>
         }
       />
@@ -1560,101 +1550,133 @@ document.querySelectorAll('.vi video').forEach(function(v) {
       <div className="moments-container">
         {/* 侧边栏 (左侧) */}
         <aside className={`sns-sidebar ${isSidebarOpen ? 'open' : 'closed'}`}>
-          <div className="filter-content custom-scrollbar">
-            {/* 1. 搜索 */}
-            <div className="filter-card">
-              <div className="filter-section">
-                <label><Search size={14} /> 关键词搜索</label>
-                <div className="search-input-wrapper">
-                  <Search size={14} className="input-icon" />
-                  <input
-                    type="text"
-                    placeholder="搜索动态内容..."
-                    value={searchKeyword}
-                    onChange={e => setSearchKeyword(e.target.value)}
-                  />
-                  {searchKeyword && (
-                    <button className="clear-input" onClick={() => setSearchKeyword('')}>
-                      <X size={14} />
-                    </button>
-                  )}
+          <div className="sidebar-toolbar">
+            {isSidebarOpen && (
+              <div className="sidebar-toolbar-title">
+                <Filter size={14} />
+                <span>筛选</span>
+              </div>
+            )}
+            <div className="sidebar-toolbar-actions">
+              <button
+                className="sidebar-tool-btn"
+                onClick={() => loadPosts({ reset: true })}
+                disabled={isLoading}
+                data-tooltip="刷新"
+                aria-label="刷新朋友圈"
+              >
+                <RefreshCw size={16} className={isLoading ? 'spinning' : ''} />
+              </button>
+              <button
+                className={`sidebar-tool-btn sidebar-toggle-btn ${isSidebarOpen ? 'active' : ''}`}
+                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                data-tooltip={isSidebarOpen ? '收起筛选' : '展开筛选'}
+                aria-label={isSidebarOpen ? '收起筛选' : '展开筛选'}
+              >
+                {isSidebarOpen ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
+              </button>
+            </div>
+          </div>
+
+          {isSidebarOpen && (
+            <>
+              <div className="filter-content custom-scrollbar">
+                {/* 1. 搜索 */}
+                <div className="filter-card">
+                  <div className="filter-section">
+                    <label><Search size={14} /> 关键词搜索</label>
+                    <div className="search-input-wrapper">
+                      <Search size={14} className="input-icon" />
+                      <input
+                        type="text"
+                        placeholder="搜索动态内容..."
+                        value={searchKeyword}
+                        onChange={e => setSearchKeyword(e.target.value)}
+                      />
+                      {searchKeyword && (
+                        <button className="clear-input" onClick={() => setSearchKeyword('')}>
+                          <X size={14} />
+                        </button>
+                      )}
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
 
-            {/* 2. 日期 */}
-            <div className="filter-card jump-date-card">
-              <div className="filter-section">
-                <label><Calendar size={14} /> 时间跳转</label>
-                <button className={`jump-date-btn ${jumpTargetDate ? 'active' : ''}`} onClick={() => setShowJumpDialog(true)}>
-                  <span className="text">
-                    {jumpTargetDate ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : '选择跳转日期...'}
-                  </span>
-                  <Calendar size={14} className="icon" />
-                </button>
-                {jumpTargetDate && (
-                  <button className="clear-jump-date-inline" onClick={() => setJumpTargetDate(undefined)}>
-                    返回最新动态
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* 3. 联系人 */}
-            <div className="filter-card contact-card">
-              <div className="contact-filter-section">
-                <div className="section-header">
-                  <label><User size={14} /> 联系人</label>
-                  <div className="header-actions">
-                    {selectedUsernames.length > 0 && (
-                      <button className="clear-selection-btn" onClick={() => setSelectedUsernames([])}>清除</button>
-                    )}
-                    {selectedUsernames.length > 0 && (
-                      <span className="selected-count">{selectedUsernames.length}</span>
+                {/* 2. 日期 */}
+                <div className="filter-card jump-date-card">
+                  <div className="filter-section">
+                    <label><Calendar size={14} /> 时间跳转</label>
+                    <button className={`jump-date-btn ${jumpTargetDate ? 'active' : ''}`} onClick={() => setShowJumpDialog(true)}>
+                      <span className="text">
+                        {jumpTargetDate ? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : '选择跳转日期...'}
+                      </span>
+                      <Calendar size={14} className="icon" />
+                    </button>
+                    {jumpTargetDate && (
+                      <button className="clear-jump-date-inline" onClick={() => setJumpTargetDate(undefined)}>
+                        返回最新动态
+                      </button>
                     )}
                   </div>
                 </div>
-                <div className="contact-search">
-                  <Search size={12} className="search-icon" />
-                  <input
-                    type="text"
-                    placeholder="搜索好友..."
-                    value={contactSearch}
-                    onChange={e => setContactSearch(e.target.value)}
-                  />
-                  {contactSearch && (
-                    <X size={12} className="clear-search-icon" onClick={() => setContactSearch('')} />
-                  )}
-                </div>
-                <div className="contact-list custom-scrollbar">
-                  {filteredContacts.map(contact => (
-                    <div
-                      key={contact.username}
-                      className={`contact-item ${selectedUsernames.includes(contact.username) ? 'active' : ''}`}
-                      onClick={() => toggleUserSelection(contact.username)}
-                    >
-                      <div className="avatar-wrapper">
-                        {contact.avatarUrl ? <img src={contact.avatarUrl} alt="" /> : <div className="avatar-placeholder">{contact.displayName[0]}</div>}
-                        {selectedUsernames.includes(contact.username) && (
-                          <div className="active-badge"></div>
+
+                {/* 3. 联系人 */}
+                <div className="filter-card contact-card">
+                  <div className="contact-filter-section">
+                    <div className="section-header">
+                      <label><User size={14} /> 联系人</label>
+                      <div className="header-actions">
+                        {selectedUsernames.length > 0 && (
+                          <button className="clear-selection-btn" onClick={() => setSelectedUsernames([])}>清除</button>
+                        )}
+                        {selectedUsernames.length > 0 && (
+                          <span className="selected-count">{selectedUsernames.length}</span>
                         )}
                       </div>
-                      <span className="contact-name">{contact.displayName}</span>
                     </div>
-                  ))}
-                  {filteredContacts.length === 0 && (
-                    <div className="empty-contacts">无可显示联系人</div>
-                  )}
+                    <div className="contact-search">
+                      <Search size={12} className="search-icon" />
+                      <input
+                        type="text"
+                        placeholder="搜索好友..."
+                        value={contactSearch}
+                        onChange={e => setContactSearch(e.target.value)}
+                      />
+                      {contactSearch && (
+                        <X size={12} className="clear-search-icon" onClick={() => setContactSearch('')} />
+                      )}
+                    </div>
+                    <div className="contact-list custom-scrollbar">
+                      {filteredContacts.map(contact => (
+                        <div
+                          key={contact.username}
+                          className={`contact-item ${selectedUsernames.includes(contact.username) ? 'active' : ''}`}
+                          onClick={() => toggleUserSelection(contact.username)}
+                        >
+                          <div className="avatar-wrapper">
+                            {contact.avatarUrl ? <img src={contact.avatarUrl} alt="" /> : <div className="avatar-placeholder">{contact.displayName[0]}</div>}
+                            {selectedUsernames.includes(contact.username) && (
+                              <div className="active-badge"></div>
+                            )}
+                          </div>
+                          <span className="contact-name">{contact.displayName}</span>
+                        </div>
+                      ))}
+                      {filteredContacts.length === 0 && (
+                        <div className="empty-contacts">无可显示联系人</div>
+                      )}
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
-          <div className="sidebar-footer">
-            <button className="clear-btn" onClick={clearFilters}>
-              <RefreshCw size={14} />
-              重置所有筛选
-            </button>
-          </div>
+              <div className="sidebar-footer">
+                <button className="clear-btn" onClick={clearFilters}>
+                  <RefreshCw size={14} />
+                  重置所有筛选
+                </button>
+              </div>
+            </>
+          )}
         </aside>
 
         {/* 主内容区 */}