feat: 设置功能

src/renderer/src/App.tsx

@@ -256,6 +256,17 @@ function App(): React.ReactElement {
   const [bootState, setBootState] = useState<'loading' | 'connecting' | 'login'>('loading')
   const [autoConnectSource, setAutoConnectSource] = useState<'env' | 'saved' | null>(null)
   const [startupProgress, setStartupProgress] = useState<StartupProgress | null>(null)
+  const [appearanceSettings, setAppearanceSettings] = React.useState<{
+    theme: 'system' | 'light' | 'dark'
+    compactMode: boolean
+    showStartupProgress: boolean
+  }>({ theme: 'system', compactMode: false, showStartupProgress: true })
+  const handleAppearanceChange = React.useCallback(
+    (settings: { theme: 'system' | 'light' | 'dark'; compactMode: boolean }) => {
+      setAppearanceSettings((current) => ({ ...current, ...settings }))
+    },
+    []
+  )
   const currentGroupSnapshotRef = React.useRef<GroupSnapshot | null>(null)
   const syntheticGroupMessagesRef = React.useRef<Record<string, Message[]>>({})
   const groupMemberMetaRef = React.useRef<Record<string, Map<string, GroupMemberMeta>>>({})
@@ -268,6 +279,15 @@ function App(): React.ReactElement {
     const timer = window.setTimeout(() => setReportNotice(''), 3200)
     return () => window.clearTimeout(timer)
   }, [reportNotice])
+  React.useEffect(() => {
+    void window.api.getSettings().then((result) => {
+      setAppearanceSettings({
+        theme: result.settings.appearanceTheme,
+        compactMode: result.settings.compactMode,
+        showStartupProgress: result.settings.showStartupProgress
+      })
+    })
+  }, [])
   React.useEffect(() => {
     const loadAIConfig = async (): Promise<void> => {
       try {
@@ -1493,6 +1513,7 @@ function App(): React.ReactElement {
             onAIRuntimeChange={(config: AIRuntimeModelConfig) => setAiModelConfig(config)}
             onNotice={setReportNotice}
             onOpenSettings={openSettings}
+            onAppearanceChange={handleAppearanceChange}
           />
         )
       case 'search':
@@ -1579,7 +1600,7 @@ function App(): React.ReactElement {
           : '使用上次安全保存的密钥'
         : 'WechatExplorer')
     return (
-      <div className="boot-splash">
+      <div className={`boot-splash ${appearanceSettings.showStartupProgress ? '' : 'is-quiet'}`}>
         <div className="boot-splash-spinner" aria-hidden />
         <div className="boot-splash-title">{title}</div>
         <div className="boot-splash-subtitle">{subtitle}</div>
@@ -1630,6 +1651,8 @@ function App(): React.ReactElement {
       dbReady={isDatabaseConnected}
       onPageChange={handlePageChange}
       onOpenSettings={openSettings}
+      appearanceTheme={appearanceSettings.theme}
+      compactMode={appearanceSettings.compactMode}
     >
       {reportNotice && <div className="app-toast">{reportNotice}</div>}
       {renderCurrentWorkspace()}

src/renderer/src/components/layout/AppShell.tsx

@@ -17,6 +17,8 @@ interface AppShellProps {
   dbReady: boolean
   onPageChange: (page: AppPage) => void
   onOpenSettings: () => void
+  appearanceTheme?: 'system' | 'light' | 'dark'
+  compactMode?: boolean
   children: React.ReactNode
 }
 
@@ -34,12 +36,14 @@ export function AppShell({
   dbReady,
   onPageChange,
   onOpenSettings,
+  appearanceTheme = 'system',
+  compactMode = false,
   children
 }: AppShellProps): React.ReactElement {
   const activeItem = PRIMARY_NAV_ITEMS.find((item) => item.id === activePage)
 
   return (
-    <div className="app-shell">
+    <div className={`app-shell theme-${appearanceTheme} ${compactMode ? 'is-compact' : ''}`}>
       <aside className="app-primary-rail">
         <BrandLogo />
         <PrimaryNavigation activePage={activePage} onPageChange={onPageChange} />

src/renderer/src/features/settings/SettingsWorkspace.tsx

@@ -8,6 +8,9 @@ import { ImageDecryptionPage } from './pages/ImageDecryptionPage'
 import { AIModelPage } from './pages/AIModelPage'
 import { RecallProtectionPage } from './pages/RecallProtectionPage'
 import { AdvancedPage } from './pages/AdvancedPage'
+import { CacheCleanupPage } from './pages/CacheCleanupPage'
+import { AppearancePage } from './pages/AppearancePage'
+import { AboutPage } from './pages/AboutPage'
 import type { Contact } from '../../../../shared/types'
 import type { AIRuntimeModelConfig } from '../../../../shared/ai-provider'
 
@@ -25,7 +28,8 @@ export function SettingsWorkspace({
   onReturnToLogin,
   onAIRuntimeChange,
   onNotice,
-  onOpenSettings
+  onOpenSettings,
+  onAppearanceChange
 }: {
   selectedCategory: SettingsCategoryId
   onCategoryChange: (id: SettingsCategoryId) => void
@@ -41,6 +45,7 @@ export function SettingsWorkspace({
   onAIRuntimeChange: (config: AIRuntimeModelConfig) => void
   onNotice: (message: string) => void
   onOpenSettings: () => void
+  onAppearanceChange: (settings: { theme: 'system' | 'light' | 'dark'; compactMode: boolean }) => void
 }): React.ReactElement {
   return (
     <div className="settings-workspace">
@@ -89,13 +94,25 @@ export function SettingsWorkspace({
       <div className={`settings-page-panel ${selectedCategory === 'advanced' ? 'active' : ''}`}>
         <AdvancedPage onNotice={onNotice} />
       </div>
+      <div className={`settings-page-panel ${selectedCategory === 'cache-cleanup' ? 'active' : ''}`}>
+        <CacheCleanupPage onNotice={onNotice} />
+      </div>
+      <div className={`settings-page-panel ${selectedCategory === 'appearance' ? 'active' : ''}`}>
+        <AppearancePage onNotice={onNotice} onAppearanceChange={onAppearanceChange} />
+      </div>
+      <div className={`settings-page-panel ${selectedCategory === 'about' ? 'active' : ''}`}>
+        <AboutPage onNotice={onNotice} />
+      </div>
       {![
         'account-database',
         'database-key',
         'image-key',
         'ai-model',
         'recall-protection',
-        'advanced'
+        'advanced',
+        'cache-cleanup',
+        'appearance',
+        'about'
       ].includes(selectedCategory) && (
         <div className="settings-page-panel active">
           <SettingsEmptyState label={SETTINGS_CATEGORY_LABELS[selectedCategory]} />

src/renderer/src/features/settings/pages/AboutPage.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { AppUpdateState } from '../../../../../shared/app-update'
+
+const REPOSITORY_URL = 'https://github.com/Wxw-Gu/WechatExplorer'
+const RELEASES_URL = `${REPOSITORY_URL}/releases`
+
+function formatBytes(value?: number): string {
+  if (!value) return ''
+  if (value < 1024 * 1024) return `${Math.round(value / 1024)} KB/s`
+  return `${(value / 1024 / 1024).toFixed(1)} MB/s`
+}
+
+export function AboutPage({ onNotice }: { onNotice: (message: string) => void }): React.ReactElement {
+  const [update, setUpdate] = useState<AppUpdateState>({ status: 'idle', currentVersion: '读取中...' })
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    void window.api.getAppUpdateState().then((state) => active && setUpdate(state))
+    const unsubscribe = window.api.onAppUpdateState((state) => {
+      if (active) setUpdate(state)
+    })
+    return () => {
+      active = false
+      unsubscribe()
+    }
+  }, [])
+
+  const action = useMemo(() => {
+    if (update.status === 'downloaded') return '重启并安装'
+    if (update.status === 'available') return '下载更新'
+    if (update.status === 'checking' || update.status === 'downloading') return '处理中...'
+    return '检查更新'
+  }, [update.status])
+
+  const runUpdate = async (): Promise<void> => {
+    setBusy(true)
+    try {
+      if (update.status === 'downloaded') {
+        const result = await window.api.installAppUpdate()
+        if (!result.success) onNotice(result.error || '更新安装失败')
+      } else if (update.status === 'available') {
+        await window.api.downloadAppUpdate()
+      } else {
+        await window.api.checkAppUpdate()
+      }
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="settings-page">
+      <header className="settings-page-header">
+        <div>
+          <h1>关于</h1>
+          <p>WechatExplorer 本地微信聊天记录工作台。</p>
+        </div>
+      </header>
+      <div className="settings-page-scroll">
+        <div className="settings-page-content">
+          <section className="settings-card about-identity-card">
+            <div><span className="settings-card-kicker">当前版本</span><strong>WechatExplorer</strong><small>v{update.currentVersion}</small></div>
+            <a href={REPOSITORY_URL} target="_blank" rel="noreferrer">GitHub 仓库</a>
+          </section>
+
+          <h2 className="settings-section-heading">软件更新</h2>
+          <section className={`settings-card update-card status-${update.status}`}>
+            <div className="update-card-copy">
+              <strong>{update.status === 'available' || update.status === 'downloaded' ? `发现 v${update.version}` : update.message || '检查 GitHub Releases 获取最新版本'}</strong>
+              <span>
+                {update.status === 'downloading'
+                  ? `正在下载 ${Math.round(update.percent || 0)}% · ${formatBytes(update.bytesPerSecond)}`
+                  : '会根据当前系统和 CPU 自动选择对应安装包，安装前会等待你的确认。'}
+              </span>
+              {update.status === 'downloading' && <div className="update-progress"><i style={{ width: `${update.percent || 0}%` }} /></div>}
+            </div>
+            <button type="button" className="settings-primary-button" disabled={busy || update.status === 'checking' || update.status === 'downloading'} onClick={() => void runUpdate()}>{action}</button>
+          </section>
+
+          <h2 className="settings-section-heading">支持</h2>
+          <section className="settings-card about-links-card">
+            <a href={RELEASES_URL} target="_blank" rel="noreferrer">查看历史版本与更新说明</a>
+            <button type="button" onClick={() => void window.api.revealAppLog()}>打开诊断日志目录</button>
+          </section>
+          <p className="settings-footnote">聊天数据、密钥和 AI 配置均保留在本机，更新不会上传这些内容。</p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/features/settings/pages/AppearancePage.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+
+export type AppearanceTheme = 'system' | 'light' | 'dark'
+
+export function AppearancePage({
+  onNotice,
+  onAppearanceChange
+}: {
+  onNotice: (message: string) => void
+  onAppearanceChange: (settings: { theme: AppearanceTheme; compactMode: boolean }) => void
+}): React.ReactElement {
+  const [theme, setTheme] = useState<AppearanceTheme>('system')
+  const [compactMode, setCompactMode] = useState(false)
+  const [showStartupProgress, setShowStartupProgress] = useState(true)
+
+  useEffect(() => {
+    let active = true
+    void window.api.getSettings().then((result) => {
+      if (!active) return
+      setTheme(result.settings.appearanceTheme)
+      setCompactMode(result.settings.compactMode)
+      setShowStartupProgress(result.settings.showStartupProgress)
+      onAppearanceChange({ theme: result.settings.appearanceTheme, compactMode: result.settings.compactMode })
+    })
+    return () => {
+      active = false
+    }
+  }, [onAppearanceChange])
+
+  const save = async (patch: {
+    appearanceTheme?: AppearanceTheme
+    compactMode?: boolean
+    showStartupProgress?: boolean
+  }): Promise<void> => {
+    const result = await window.api.setSettings(patch)
+    setTheme(result.settings.appearanceTheme)
+    setCompactMode(result.settings.compactMode)
+    setShowStartupProgress(result.settings.showStartupProgress)
+    onAppearanceChange({ theme: result.settings.appearanceTheme, compactMode: result.settings.compactMode })
+    onNotice('外观设置已保存')
+  }
+
+  return (
+    <div className="settings-page">
+      <header className="settings-page-header">
+        <div>
+          <h1>外观与行为</h1>
+          <p>调整工作区的显示方式和启动体验。</p>
+        </div>
+      </header>
+      <div className="settings-page-scroll">
+        <div className="settings-page-content">
+          <h2 className="settings-section-heading">显示主题</h2>
+          <section className="settings-card settings-option-card">
+            <div className="settings-choice-grid">
+              {([
+                ['system', '跟随系统', '根据 macOS 或 Windows 外观自动切换'],
+                ['light', '浅色', '保持当前清爽的浅色工作区'],
+                ['dark', '深色', '降低夜间浏览时的亮度']
+              ] as const).map(([value, label, hint]) => (
+                <label className={`settings-choice ${theme === value ? 'active' : ''}`} key={value}>
+                  <input type="radio" name="appearance-theme" checked={theme === value} onChange={() => void save({ appearanceTheme: value })} />
+                  <span><b>{label}</b><small>{hint}</small></span>
+                </label>
+              ))}
+            </div>
+          </section>
+
+          <h2 className="settings-section-heading">工作区行为</h2>
+          <section className="settings-card settings-toggle-list">
+            <label className="settings-toggle-row">
+              <span><b>紧凑布局</b><small>减少导航栏和列表的留白，适合较小窗口。</small></span>
+              <input type="checkbox" checked={compactMode} onChange={(event) => void save({ compactMode: event.target.checked })} />
+            </label>
+            <label className="settings-toggle-row">
+              <span><b>显示启动进度</b><small>启动或自动连接数据库时显示详细进度。</small></span>
+              <input type="checkbox" checked={showStartupProgress} onChange={(event) => void save({ showStartupProgress: event.target.checked })} />
+            </label>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/features/settings/pages/CacheCleanupPage.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { CacheSummary } from '../../../../../shared/cache'
+
+const SEARCH_CACHE_KEYS = ['wxe_ai_search_cache_v8', 'wxe_ai_search_history_v1', 'wxe_export_tasks']
+
+function formatBytes(value: number): string {
+  if (value < 1024) return `${value} B`
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`
+  if (value < 1024 * 1024 * 1024) return `${(value / 1024 / 1024).toFixed(1)} MB`
+  return `${(value / 1024 / 1024 / 1024).toFixed(1)} GB`
+}
+
+export function CacheCleanupPage({ onNotice }: { onNotice: (message: string) => void }): React.ReactElement {
+  const [summary, setSummary] = useState<CacheSummary | null>(null)
+  const [busyScope, setBusyScope] = useState<'bootstrap' | 'electron' | 'all' | 'local' | null>(null)
+
+  const refresh = useCallback(async (): Promise<void> => {
+    setSummary(await window.api.getCacheSummary())
+  }, [])
+
+  useEffect(() => {
+    void refresh()
+  }, [refresh])
+
+  const clearLocal = (): void => {
+    setBusyScope('local')
+    for (const key of SEARCH_CACHE_KEYS) localStorage.removeItem(key)
+    setBusyScope(null)
+    onNotice('已清理检索和导出本地缓存')
+  }
+
+  const clear = async (scope: 'bootstrap' | 'electron' | 'all'): Promise<void> => {
+    setBusyScope(scope)
+    try {
+      if (scope === 'all') {
+        for (const key of SEARCH_CACHE_KEYS) localStorage.removeItem(key)
+      }
+      setSummary(await window.api.clearCache(scope))
+      onNotice(scope === 'all' ? '已清理全部可恢复缓存和检索记录' : '缓存已清理')
+    } finally {
+      setBusyScope(null)
+    }
+  }
+
+  return (
+    <div className="settings-page">
+      <header className="settings-page-header">
+        <div>
+          <h1>缓存与清理</h1>
+          <p>管理本地加速数据，不会删除微信原始聊天记录或数据库密钥。</p>
+        </div>
+        <button type="button" className="settings-header-action" onClick={() => void refresh()}>
+          刷新占用
+        </button>
+      </header>
+      <div className="settings-page-scroll">
+        <div className="settings-page-content">
+          <section className="settings-card cache-overview-card">
+            <div>
+              <span className="settings-card-kicker">可恢复缓存</span>
+              <strong>{formatBytes(summary?.totalBytes || 0)}</strong>
+              <small>清理后首次打开档案可能需要重新读取。</small>
+            </div>
+            <button
+              type="button"
+              className="settings-danger-button"
+              disabled={busyScope !== null}
+              onClick={() => void clear('all')}
+            >
+              {busyScope === 'all' ? '清理中...' : '清理全部'}
+            </button>
+          </section>
+
+          <h2 className="settings-section-heading">缓存分类</h2>
+          <div className="settings-cache-list">
+            {summary?.items.map((item) => (
+              <section className="settings-card settings-cache-item" key={item.id}>
+                <div>
+                  <h3>{item.label}</h3>
+                  <p>{item.description}</p>
+                  <small>{formatBytes(item.sizeBytes)} · {item.fileCount} 个文件</small>
+                </div>
+                <button
+                  type="button"
+                  disabled={busyScope !== null}
+                  onClick={() => void clear(item.id)}
+                >
+                  {busyScope === item.id ? '清理中...' : '清理'}
+                </button>
+              </section>
+            ))}
+            <section className="settings-card settings-cache-item">
+              <div>
+                <h3>检索与导出记录</h3>
+                <p>清理最近提问、检索结果和导出任务列表，不影响聊天数据库。</p>
+                <small>浏览器本地缓存</small>
+              </div>
+              <button type="button" disabled={busyScope !== null} onClick={clearLocal}>
+                {busyScope === 'local' ? '清理中...' : '清理'}
+              </button>
+            </section>
+          </div>
+
+          <div className="settings-inline-note">
+            <strong>说明</strong>
+            <span>缓存没有过期时间，只有在这里手动清理，或应用检测到格式需要迁移时才会被替换。</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/styles/index.scss

@@ -14,3 +14,5 @@
 @use './search';
 @use './archive';
 @use './settings-advanced';
+@use './settings-preferences';
+@use './theme';

src/renderer/src/styles/settings-preferences.scss

@@ -0,0 +1,334 @@
+.settings-header-action,
+.settings-primary-button,
+.settings-danger-button,
+.settings-cache-item > button,
+.about-links-card button {
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-sm);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 12px/18px var(--wxex-font);
+  padding: 8px 12px;
+
+  &:hover:not(:disabled) {
+    border-color: var(--wxex-brand);
+    color: var(--wxex-brand);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+.settings-primary-button {
+  border-color: var(--wxex-brand);
+  background: var(--wxex-brand);
+  color: #fff;
+  font-weight: 600;
+
+  &:hover:not(:disabled) {
+    background: var(--wxex-brand-hover);
+    color: #fff;
+  }
+}
+
+.settings-danger-button {
+  color: var(--wxex-danger);
+
+  &:hover:not(:disabled) {
+    border-color: var(--wxex-danger);
+    color: var(--wxex-danger);
+  }
+}
+
+.settings-card-kicker {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--wxex-text-muted);
+  font-size: 11px;
+}
+
+.cache-overview-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+
+  strong {
+    display: block;
+    color: var(--wxex-text-primary);
+    font-size: 24px;
+    line-height: 30px;
+  }
+
+  small {
+    display: block;
+    margin-top: 4px;
+    color: var(--wxex-text-secondary);
+    font-size: 11px;
+  }
+}
+
+.settings-cache-list {
+  display: grid;
+  gap: 10px;
+}
+
+.settings-cache-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+
+  h3 {
+    margin: 0;
+    color: var(--wxex-text-primary);
+    font-size: 14px;
+  }
+
+  p {
+    margin: 5px 0 4px;
+    color: var(--wxex-text-secondary);
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  small {
+    color: var(--wxex-text-muted);
+    font-size: 11px;
+  }
+}
+
+.settings-inline-note,
+.settings-footnote {
+  color: var(--wxex-text-muted);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.settings-inline-note {
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+
+  strong {
+    color: var(--wxex-text-secondary);
+  }
+}
+
+.settings-option-card {
+  padding: 12px;
+}
+
+.settings-choice-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.settings-choice {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-main);
+  cursor: pointer;
+
+  input {
+    margin: 2px 0 0;
+    accent-color: var(--wxex-brand);
+  }
+
+  span {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  b {
+    color: var(--wxex-text-primary);
+    font-size: 12px;
+  }
+
+  small {
+    color: var(--wxex-text-muted);
+    font-size: 10px;
+    line-height: 15px;
+  }
+
+  &.active {
+    border-color: var(--wxex-brand);
+    background: var(--wxex-brand-soft);
+  }
+}
+
+.settings-toggle-list {
+  display: grid;
+  gap: 0;
+  padding: 0 18px;
+}
+
+.settings-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--wxex-border);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  span {
+    display: grid;
+    gap: 4px;
+  }
+
+  b {
+    color: var(--wxex-text-primary);
+    font-size: 13px;
+  }
+
+  small {
+    color: var(--wxex-text-secondary);
+    font-size: 11px;
+  }
+
+  input {
+    width: 17px;
+    height: 17px;
+    flex: 0 0 auto;
+    accent-color: var(--wxex-brand);
+  }
+}
+
+.about-identity-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+
+  > div {
+    display: grid;
+    flex: 1;
+    gap: 2px;
+  }
+
+  strong {
+    color: var(--wxex-text-primary);
+    font-size: 18px;
+  }
+
+  small {
+    color: var(--wxex-text-secondary);
+    font-size: 12px;
+  }
+
+  a {
+    color: var(--wxex-brand);
+    font-size: 12px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.update-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+
+  &.status-error {
+    border-color: rgba(200, 90, 90, 0.42);
+  }
+
+  &.status-downloaded {
+    border-color: rgba(46, 139, 104, 0.42);
+  }
+}
+
+.update-card-copy {
+  display: grid;
+  flex: 1;
+  gap: 5px;
+  min-width: 0;
+
+  strong {
+    color: var(--wxex-text-primary);
+    font-size: 13px;
+  }
+
+  span {
+    color: var(--wxex-text-secondary);
+    font-size: 11px;
+    line-height: 17px;
+  }
+}
+
+.update-progress {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--wxex-border);
+
+  i {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--wxex-brand);
+    transition: width 0.2s ease;
+  }
+}
+
+.about-links-card {
+  display: grid;
+  gap: 12px;
+
+  a {
+    color: var(--wxex-brand);
+    font-size: 12px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.app-shell {
+  &.is-compact {
+    --wxex-nav-width: 68px;
+    --wxex-shell-content-top: 8px;
+  }
+
+}
+
+.boot-splash.is-quiet {
+  .boot-splash-title,
+  .boot-splash-subtitle,
+  .boot-splash-detail,
+  .boot-splash-progress {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .settings-choice-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cache-overview-card,
+  .settings-cache-item,
+  .update-card {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

src/renderer/src/styles/theme.scss

@@ -0,0 +1,259 @@
+@mixin dark-theme {
+  --wxex-bg-app: #171b1a;
+  --wxex-bg-main: #1e2422;
+  --wxex-bg-sidebar: #202925;
+  --wxex-bg-elevated: #27302d;
+  --wxex-text-primary: #edf4f0;
+  --wxex-text-secondary: #b2c0b9;
+  --wxex-text-muted: #81918a;
+  --wxex-border: #394640;
+  --wxex-brand-soft: #26483c;
+
+  .conversation-section-header:hover,
+  .conversation-item:hover,
+  .report-source-item:hover,
+  .report-history-item:hover {
+    background: var(--wxex-brand-soft);
+  }
+
+  .chat-window,
+  .chat-archive-header,
+  .chat-status-bar,
+  .ai-report-workspace,
+  .ai-report-footer,
+  .report-viewer,
+  .settings-workspace,
+  .settings-page-header,
+  .api-center-layout,
+  .export-workspace,
+  .ai-search-workspace {
+    background: var(--wxex-bg-main);
+    color: var(--wxex-text-primary);
+  }
+
+  .data-trust-bar {
+    background: var(--wxex-bg-sidebar);
+  }
+
+  .wechat-message-list {
+    background: #161c19;
+  }
+
+  .message-bubble,
+  .wechat-message-row.other .quoted-message,
+  .message-loading-pill {
+    border-color: var(--wxex-border);
+    background: var(--wxex-bg-elevated);
+    color: var(--wxex-text-primary);
+  }
+
+  .wechat-system-message {
+    background: rgba(39, 48, 45, 0.9);
+    color: var(--wxex-text-secondary);
+  }
+
+  .wechat-system-message-meta,
+  .message-sender-name,
+  .message-hover-time,
+  .message-accessible-sender {
+    color: var(--wxex-text-muted);
+  }
+
+  .wechat-message-row.mine .message-bubble {
+    border-color: rgba(80, 190, 151, 0.3);
+    background: #24513f;
+    color: #f2faf6;
+  }
+
+  .wechat-message-row.mine .quoted-message {
+    background: rgba(12, 26, 21, 0.32);
+    color: #d7e7df;
+  }
+
+  .message-bubble a,
+  .message-bubble code,
+  .message-bubble pre {
+    color: inherit;
+  }
+
+  .settings-sidebar,
+  .settings-sidebar-account,
+  .report-source-sidebar,
+  .report-history-sidebar {
+    background: var(--wxex-bg-sidebar);
+    border-color: var(--wxex-border);
+  }
+
+  .settings-sidebar header,
+  .settings-page-header,
+  .report-source-header,
+  .report-history-header,
+  .report-settings-panel header,
+  .report-viewer-header {
+    border-color: var(--wxex-border);
+  }
+
+  .settings-sidebar header h1,
+  .settings-sidebar-list button,
+  .settings-sidebar-list button.active,
+  .settings-page-header h1,
+  .settings-section-heading,
+  .settings-card,
+  .settings-card strong,
+  .settings-cache-item h3,
+  .settings-toggle-row b,
+  .settings-choice b,
+  .settings-workspace h1,
+  .settings-workspace h2,
+  .settings-workspace h3,
+  .settings-workspace h4,
+  .settings-workspace strong,
+  .settings-workspace b,
+  .settings-workspace button,
+  .settings-workspace label,
+  .settings-workspace dt,
+  .settings-workspace dd,
+  .settings-workspace span,
+  .settings-workspace p,
+  .settings-workspace small,
+  .settings-workspace code,
+  .settings-workspace a {
+    color: var(--wxex-text-primary);
+  }
+
+  .settings-workspace p,
+  .settings-workspace small,
+  .settings-workspace span,
+  .settings-workspace code,
+  .settings-workspace .settings-inline-note,
+  .settings-workspace .settings-footnote {
+    color: var(--wxex-text-secondary);
+  }
+
+  .settings-workspace .settings-card,
+  .settings-workspace .settings-choice,
+  .settings-workspace .settings-search,
+  .settings-workspace input,
+  .settings-workspace textarea,
+  .settings-workspace select,
+  .settings-workspace .settings-sidebar-list button.active {
+    border-color: var(--wxex-border);
+    background: var(--wxex-bg-elevated);
+    color: var(--wxex-text-primary);
+  }
+
+  .settings-workspace input::placeholder,
+  .settings-workspace textarea::placeholder {
+    color: var(--wxex-text-muted);
+  }
+
+  .settings-workspace .settings-choice.active,
+  .settings-workspace .settings-status-badge,
+  .settings-workspace .settings-privacy-notice,
+  .settings-workspace .settings-inline-note {
+    background: var(--wxex-brand-soft);
+  }
+
+  .settings-workspace .settings-privacy-notice,
+  .settings-workspace .settings-privacy-notice strong,
+  .settings-workspace .settings-privacy-notice p,
+  .settings-workspace .settings-privacy-notice svg {
+    color: #c5eadb;
+    stroke: #72d0af;
+  }
+
+  .settings-workspace .settings-connection-text.success,
+  .settings-workspace [class*='success'],
+  .settings-workspace [class*='success'] * {
+    color: #72d0af !important;
+  }
+
+  .settings-workspace [class*='error'],
+  .settings-workspace [class*='error'] * {
+    color: #ff9b96 !important;
+  }
+
+  .report-settings-panel {
+    background: var(--wxex-bg-sidebar);
+    color: var(--wxex-text-primary);
+  }
+
+  .report-settings-section,
+  .report-settings-section h3,
+  .report-settings-section p,
+  .report-settings-section code,
+  .report-export-list div,
+  .report-generation-log li,
+  .report-generation-log b,
+  .report-generation-log small,
+  .report-info-panel {
+    color: var(--wxex-text-primary);
+  }
+
+  .report-settings-section p,
+  .report-settings-section code,
+  .report-export-list div,
+  .report-generation-log li,
+  .report-generation-log small {
+    color: var(--wxex-text-secondary);
+  }
+
+  .report-settings-section code,
+  .report-timeout-section input,
+  .report-check-row,
+  .report-readonly-modules span,
+  .report-result-preview {
+    border-color: var(--wxex-border);
+    background: var(--wxex-bg-elevated);
+    color: var(--wxex-text-primary);
+  }
+
+  .report-result-preview {
+    background: #161c19;
+  }
+
+  .report-history-item,
+  .report-source-item,
+  .report-history-text b,
+  .report-history-text small,
+  .report-history-text em {
+    color: var(--wxex-text-primary);
+  }
+
+  .report-history-text small,
+  .report-history-text em,
+  .report-history-list-title,
+  .report-history-group h3 {
+    color: var(--wxex-text-muted);
+  }
+
+  .search-workspace,
+  .ai-search-scope-panel,
+  .ai-search-main,
+  .ai-search-evidence-panel,
+  .export-config-panel,
+  .export-preview-panel,
+  .api-main,
+  .api-runtime-panel {
+    background: var(--wxex-bg-main);
+    color: var(--wxex-text-primary);
+  }
+
+  .ai-search-scope-panel,
+  .ai-search-evidence-panel,
+  .export-config-panel,
+  .export-preview-panel,
+  .api-runtime-panel {
+    border-color: var(--wxex-border);
+  }
+}
+
+.app-shell.theme-dark {
+  @include dark-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+  .app-shell.theme-system {
+    @include dark-theme;
+  }
+}