refactor: 代码拆分

package.json

@@ -76,6 +76,7 @@
     "prettier": "^3.7.4",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "sass": "^1.102.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.6"
   },

pnpm-lock.yaml

@@ -33,6 +33,7 @@ specifiers:
   prettier: ^3.7.4
   react: ^19.2.1
   react-dom: ^19.2.1
+  sass: ^1.102.0
   silk-wasm: ^3.7.1
   typescript: ^5.9.3
   vite: ^7.2.6
@@ -71,8 +72,9 @@ devDependencies:
   prettier: 3.7.4
   react: 19.2.1
   react-dom: 19.2.1_react@19.2.1
+  sass: 1.102.0
   typescript: 5.9.3
-  vite: 7.2.7_@types+node@22.19.2
+  vite: 7.2.7_kx7yyowhop237vgn7dp2p54shq
 
 packages:
 
@@ -930,6 +932,132 @@ packages:
       rimraf: 3.0.2
     dev: true
 
+  /@parcel/watcher-android-arm64/2.6.0:
+    resolution: {integrity: sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-arm64/2.6.0:
+    resolution: {integrity: sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-x64/2.6.0:
+    resolution: {integrity: sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-freebsd-x64/2.6.0:
+    resolution: {integrity: sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-glibc/2.6.0:
+    resolution: {integrity: sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-musl/2.6.0:
+    resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-glibc/2.6.0:
+    resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-musl/2.6.0:
+    resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-glibc/2.6.0:
+    resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-musl/2.6.0:
+    resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-arm64/2.6.0:
+    resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-x64/2.6.0:
+    resolution: {integrity: sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+    dev: true
+    optional: true
+
+  /@parcel/watcher/2.6.0:
+    resolution: {integrity: sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==}
+    engines: {node: '>= 10.0.0'}
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.5
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.6.0
+      '@parcel/watcher-darwin-arm64': 2.6.0
+      '@parcel/watcher-darwin-x64': 2.6.0
+      '@parcel/watcher-freebsd-x64': 2.6.0
+      '@parcel/watcher-linux-arm-glibc': 2.6.0
+      '@parcel/watcher-linux-arm-musl': 2.6.0
+      '@parcel/watcher-linux-arm64-glibc': 2.6.0
+      '@parcel/watcher-linux-arm64-musl': 2.6.0
+      '@parcel/watcher-linux-x64-glibc': 2.6.0
+      '@parcel/watcher-linux-x64-musl': 2.6.0
+      '@parcel/watcher-win32-arm64': 2.6.0
+      '@parcel/watcher-win32-x64': 2.6.0
+    dev: true
+    optional: true
+
   /@pkgjs/parseargs/0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1429,7 +1557,7 @@ packages:
       '@rolldown/pluginutils': 1.0.0-beta.53
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.2.7_@types+node@22.19.2
+      vite: 7.2.7_kx7yyowhop237vgn7dp2p54shq
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1882,6 +2010,13 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chokidar/5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+    dependencies:
+      readdirp: 5.0.0
+    dev: true
+
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
@@ -2236,7 +2371,7 @@ packages:
       esbuild: 0.25.12
       magic-string: 0.30.21
       picocolors: 1.1.1
-      vite: 7.2.7_@types+node@22.19.2
+      vite: 7.2.7_kx7yyowhop237vgn7dp2p54shq
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3091,6 +3226,10 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable/5.1.9:
+    resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==}
+    dev: true
+
   /import-fresh/3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -3742,6 +3881,11 @@ packages:
     dev: true
     optional: true
 
+  /node-addon-api/7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+    dev: true
+    optional: true
+
   /node-api-version/0.2.1:
     resolution: {integrity: sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==}
     dependencies:
@@ -3962,6 +4106,12 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /picomatch/4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+    dev: true
+    optional: true
+
   /plist/3.1.0:
     resolution: {integrity: sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==}
     engines: {node: '>=10.4.0'}
@@ -4093,6 +4243,11 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /readdirp/5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+    dev: true
+
   /reflect.getprototypeof/1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -4250,6 +4405,18 @@ packages:
       truncate-utf8-bytes: 1.0.2
     dev: true
 
+  /sass/1.102.0:
+    resolution: {integrity: sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 5.0.0
+      immutable: 5.1.9
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.6.0
+    dev: true
+
   /sax/1.4.3:
     resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
     dev: true
@@ -4784,7 +4951,7 @@ packages:
     dev: true
     optional: true
 
-  /vite/7.2.7_@types+node@22.19.2:
+  /vite/7.2.7_kx7yyowhop237vgn7dp2p54shq:
     resolution: {integrity: sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
@@ -4830,6 +4997,7 @@ packages:
       picomatch: 4.0.3
       postcss: 8.5.6
       rollup: 4.53.3
+      sass: 1.102.0
       tinyglobby: 0.2.15
     optionalDependencies:
       fsevents: 2.3.3

src/renderer/src/components/export/ExportContactPanel.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import type { Contact, SelfInfo } from './exportTypes'
+import { displayName } from './exportUtils'
+
+interface ExportContactPanelProps {
+  contacts: Contact[]
+  filteredContacts: Contact[]
+  activeContact: Contact | null
+  selfInfo: SelfInfo | null
+  dbReady: boolean
+  contactFilter: string
+  contactType: 'all' | 'group' | 'user'
+  onContactFilterChange: (value: string) => void
+  onContactTypeChange: (value: 'all' | 'group' | 'user') => void
+  onSelectContact: (contact: Contact) => void
+  onOpenSettings: () => void
+}
+
+export function ExportContactPanel({
+  contacts,
+  filteredContacts,
+  activeContact,
+  selfInfo,
+  dbReady,
+  contactFilter,
+  contactType,
+  onContactFilterChange,
+  onContactTypeChange,
+  onSelectContact,
+  onOpenSettings
+}: ExportContactPanelProps): React.ReactElement {
+  return (
+    <aside className="export-contact-panel">
+      <div className="export-panel-header">
+        <div className="export-panel-title-row">
+          <h2>选择聊天</h2>
+          <span className="export-count-badge">共 {contacts.length.toLocaleString()} 个</span>
+        </div>
+        <label className="export-search-field">
+          <span aria-hidden>⌕</span>
+          <input
+            value={contactFilter}
+            onChange={(event) => onContactFilterChange(event.target.value)}
+            placeholder="搜索群聊、联系人或 wxid"
+            aria-label="搜索聊天"
+          />
+        </label>
+        <div className="export-filter-tabs" role="tablist" aria-label="聊天类型">
+          {(
+            [
+              ['all', '全部'],
+              ['group', '群聊'],
+              ['user', '联系人']
+            ] as const
+          ).map(([value, label]) => (
+            <button
+              key={value}
+              type="button"
+              className={contactType === value ? 'active' : ''}
+              onClick={() => onContactTypeChange(value)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="export-contact-list">
+        {filteredContacts.map((contact) => {
+          const name = displayName(contact)
+          return (
+            <button
+              key={contact.md5}
+              type="button"
+              className={`export-contact-item ${activeContact?.md5 === contact.md5 ? 'active' : ''}`}
+              onClick={() => onSelectContact(contact)}
+            >
+              <span className="export-contact-avatar">
+                {contact.avatar ? <img src={contact.avatar} alt="" /> : name.slice(0, 1)}
+              </span>
+              <span className="export-contact-copy">
+                <strong>{name}</strong>
+                <small>{contact.type === 'group' ? '群聊' : '联系人'}</small>
+              </span>
+            </button>
+          )
+        })}
+      </div>
+
+      <button type="button" className="export-account-summary" onClick={onOpenSettings}>
+        <span className="export-account-avatar">
+          {selfInfo?.avatar ? (
+            <img src={selfInfo.avatar} alt="" />
+          ) : (
+            (selfInfo?.nickname || '我').slice(0, 1)
+          )}
+        </span>
+        <span>
+          <strong>{selfInfo?.nickname || '当前账号'}</strong>
+          <small className={dbReady ? 'ready' : ''}>
+            {dbReady ? '数据库已连接' : '数据库未连接'}
+          </small>
+        </span>
+      </button>
+    </aside>
+  )
+}

src/renderer/src/components/export/ExportPreviewPanel.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import type { Message } from './exportTypes'
+import type { ExportJobProgress, ExportStatus, SelfInfo } from './exportTypes'
+import { formatPreviewTime } from './exportUtils'
+
+interface ExportPreviewPanelProps {
+  status: ExportStatus
+  previewItems: Message[]
+  previewMediaCount: number
+  previewBytes: number
+  selfInfo: SelfInfo | null
+  progress: ExportJobProgress | null
+  jobId: string
+  onCancel: (jobId: string) => void
+  onReveal: (path: string) => void
+}
+
+export function ExportPreviewPanel({
+  status,
+  previewItems,
+  previewMediaCount,
+  previewBytes,
+  selfInfo,
+  progress,
+  jobId,
+  onCancel,
+  onReveal
+}: ExportPreviewPanelProps): React.ReactElement {
+  return (
+    <aside className={`export-preview-panel ${status !== 'idle' ? `status-${status}` : ''}`}>
+      {status === 'idle' && (
+        <>
+          <div className="export-preview-heading">
+            <strong>导出预览</strong>
+            <span>仅预览最近 20 条</span>
+          </div>
+          <div className="export-message-preview">
+            <div className="export-preview-date">最近消息</div>
+            {(previewItems.length
+              ? previewItems
+              : [
+                  {
+                    id: 'empty',
+                    from: 'user',
+                    content: '导出预览将在这里显示',
+                    type: '文字',
+                    datetime: '',
+                    isSender: false
+                  }
+                ]
+            ).map((message) => (
+              <div
+                key={message.id}
+                className={`export-preview-message ${message.isSender ? 'mine' : ''} ${
+                  message.contentData?.type === 'system' && message.contentData.pat ? 'system' : ''
+                }`}
+              >
+                <span className="export-preview-avatar">
+                  {message.img || (message.isSender && selfInfo?.avatar) ? (
+                    <img src={message.img || selfInfo?.avatar} alt="" />
+                  ) : (
+                    (message.isSender ? '我' : message.name || '友').slice(0, 1)
+                  )}
+                </span>
+                <span className="export-preview-bubble">
+                  <small>
+                    {message.name || (message.isSender ? '我' : '联系人')} ·{' '}
+                    {formatPreviewTime(message)}
+                  </small>
+                  {message.content || `[${message.type}]`}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="export-preview-stats export-preview-real-stats">
+            <span>
+              预览消息<strong>{previewItems.length}</strong>
+            </span>
+            <span>
+              媒体预览<strong>{previewMediaCount}</strong>
+            </span>
+            <span>
+              预估文本大小
+              <strong>
+                {previewBytes < 1024
+                  ? `${previewBytes} B`
+                  : `${(previewBytes / 1024).toFixed(1)} KB`}
+              </strong>
+            </span>
+          </div>
+          <div className="export-preview-stats">
+            <span>
+              消息总数<strong>待统计</strong>
+            </span>
+            <span>
+              媒体文件<strong>待统计</strong>
+            </span>
+            <span>
+              预计大小<strong>待统计</strong>
+            </span>
+          </div>
+        </>
+      )}
+      {status === 'running' && (
+        <div className="export-job-state">
+          <h2>正在导出</h2>
+          <p>导出任务在后台运行，不影响档案浏览。</p>
+          <ol>
+            <li className="done">准备导出</li>
+            <li className="current">
+              {progress?.phase === 'writing' ? '生成档案' : '分批读取聊天记录'}
+            </li>
+            <li>解析消息内容</li>
+            <li>处理媒体资源</li>
+            <li>生成档案</li>
+          </ol>
+          <div className="export-progress-bar" aria-label="导出进度">
+            <span style={{ width: `${progress?.percent ?? 0}%` }} />
+          </div>
+          <strong>
+            {progress?.phase === 'writing'
+              ? `正在写入 ${progress.processed.toLocaleString()} 条消息... ${progress.percent ?? 0}%`
+              : `正在读取消息... ${progress?.percent ?? 0}%`}
+          </strong>
+          <button type="button" className="export-cancel-button" onClick={() => onCancel(jobId)}>
+            取消导出
+          </button>
+        </div>
+      )}
+      {status === 'completed' && (
+        <div className="export-job-state completed">
+          <div className="export-success-icon">✓</div>
+          <h2>导出完成</h2>
+          <p>聊天档案已成功保存。</p>
+          <div className="export-complete-summary">
+            <span>
+              导出消息<strong>{progress?.processed.toLocaleString() || '已完成'}</strong>
+            </span>
+            <span>
+              媒体资源<strong>按设置处理</strong>
+            </span>
+            <span>
+              输出位置<strong>已保存</strong>
+            </span>
+          </div>
+          <button
+            type="button"
+            className="export-primary-button"
+            onClick={() => progress?.outputPath && onReveal(progress.outputPath)}
+          >
+            打开档案
+          </button>
+          <button
+            type="button"
+            className="export-open-folder-button"
+            onClick={() => progress?.outputPath && onReveal(progress.outputPath)}
+          >
+            在文件夹中显示
+          </button>
+        </div>
+      )}
+    </aside>
+  )
+}

src/renderer/src/components/export/ExportTaskCenter.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import type { ExportTaskRecord } from './exportTypes'
+
+interface ExportTaskCenterProps {
+  open: boolean
+  taskCount: number
+  tasks: ExportTaskRecord[]
+  onToggle: () => void
+  onCancel: (jobId: string) => void
+}
+
+export function ExportTaskCenter({
+  open,
+  taskCount,
+  tasks,
+  onToggle,
+  onCancel
+}: ExportTaskCenterProps): React.ReactElement {
+  return (
+    <>
+      <button type="button" className="export-task-center-button" onClick={onToggle}>
+        任务中心{taskCount > 0 ? ` (${taskCount})` : ''}
+      </button>
+      {open && (
+        <section className="export-task-center">
+          <div className="export-section-heading">
+            <h3>导出任务</h3>
+            <span>{tasks.length} 条记录</span>
+          </div>
+          {tasks.length === 0 ? (
+            <p>暂无导出记录</p>
+          ) : (
+            tasks.map((task) => (
+              <div className="export-task-row" key={task.jobId}>
+                <span>
+                  <strong>{task.contactName}</strong>
+                  <small>
+                    {task.format.toUpperCase()} · {task.progress.phase}
+                  </small>
+                </span>
+                <span className="export-task-progress">
+                  <i style={{ width: `${task.progress.percent ?? 0}%` }} />
+                  <b>{task.progress.percent ?? 0}%</b>
+                </span>
+                {task.status === 'running' && (
+                  <button type="button" onClick={() => onCancel(task.jobId)}>
+                    取消
+                  </button>
+                )}
+              </div>
+            ))
+          )}
+        </section>
+      )}
+    </>
+  )
+}

src/renderer/src/components/export/ExportWorkspace.tsx

@@ -1,75 +1,21 @@
 import React, { useMemo, useState } from 'react'
-import type { Contact, Message } from '../../../../shared/types'
+import type { Message } from '../../../../shared/types'
 import type {
   ExportJobProgress,
   ExportMessageKind,
   ExportNameMode
 } from '../../../../shared/export'
-import type { ExportRequest, ExportResult, ExportTaskRecord } from '../../../../shared/export'
+import { ExportContactPanel } from './ExportContactPanel'
-
+import { ExportPreviewPanel } from './ExportPreviewPanel'
-type ExportRange = 'today' | 'threeDays' | 'sevenDays' | 'custom'
+import { ExportTaskCenter } from './ExportTaskCenter'
-type ExportFormat = 'html' | 'csv' | 'json' | 'markdown'
+import type {
-type ExportStatus = 'idle' | 'running' | 'completed'
+  ExportFormat,
-
+  ExportRange,
-interface GroupMemberName {
+  ExportStatus,
-  wxid: string
+  ExportWorkspaceProps,
-  nickname: string
+  GroupMemberName
-  groupNickname: string
+} from './exportTypes'
-  wechatNickname: string
+import { displayName, formatLabels, formatOrder, messageKinds } from './exportUtils'
-  remark: string
-  avatar: string
-}
-
-interface SelfInfo {
-  wxid: string
-  nickname: string
-  avatar?: string
-  accountRoot: string
-}
-
-interface ExportWorkspaceProps {
-  contacts: Contact[]
-  selectedContact: Contact | null
-  previewMessages: Message[]
-  selfInfo: SelfInfo | null
-  dbReady: boolean
-  onSelectContact: (contact: Contact) => void
-  onOpenSettings: () => void
-  exportTasks: ExportTaskRecord[]
-  onStartExport: (request: ExportRequest) => Promise<ExportResult>
-  onCancelExport: (jobId: string) => Promise<void>
-}
-
-const messageKinds = [
-  ['text', '文字'],
-  ['image', '图片'],
-  ['video', '视频'],
-  ['voice', '语音'],
-  ['sticker', '表情包'],
-  ['share', '链接与分享'],
-  ['location', '位置'],
-  ['system', '系统消息']
-] as const
-
-const formatLabels: Record<ExportFormat, { label: string; hint?: string }> = {
-  html: { label: 'HTML', hint: '推荐' },
-  csv: { label: 'CSV' },
-  json: { label: 'JSON' },
-  markdown: { label: 'Markdown' }
-}
-const formatOrder: ExportFormat[] = ['csv', 'html', 'json', 'markdown']
-
-function displayName(contact: Contact | null): string {
-  return contact?.m_nsNickName || contact?.m_nsUsrName || '未选择会话'
-}
-
-function formatPreviewTime(message: Message): string {
-  if (!message.createTime) return message.datetime || ''
-  return new Date(message.createTime * 1000).toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
 
 export function ExportWorkspace({
   contacts,
@@ -313,97 +259,29 @@ export function ExportWorkspace({
 
   return (
     <div className="export-workspace">
-      <aside className="export-contact-panel">
+      <ExportContactPanel
-        <div className="export-panel-header">
+        contacts={contacts}
-          <div className="export-panel-title-row">
+        filteredContacts={filteredContacts}
-            <h2>选择聊天</h2>
+        activeContact={activeContact}
-            <span className="export-count-badge">共 {contacts.length.toLocaleString()} 个</span>
+        selfInfo={selfInfo}
-          </div>
+        dbReady={dbReady}
-          <label className="export-search-field">
+        contactFilter={contactFilter}
-            <span aria-hidden>⌕</span>
+        contactType={contactType}
-            <input
+        onContactFilterChange={setContactFilter}
-              value={contactFilter}
+        onContactTypeChange={setContactType}
-              onChange={(event) => setContactFilter(event.target.value)}
+        onSelectContact={onSelectContact}
-              placeholder="搜索群聊、联系人或 wxid"
+        onOpenSettings={onOpenSettings}
-              aria-label="搜索聊天"
+      />
-            />
-          </label>
-          <div className="export-filter-tabs" role="tablist" aria-label="聊天类型">
-            {(
-              [
-                ['all', '全部'],
-                ['group', '群聊'],
-                ['user', '联系人']
-              ] as const
-            ).map(([value, label]) => (
-              <button
-                key={value}
-                type="button"
-                className={contactType === value ? 'active' : ''}
-                onClick={() => setContactType(value)}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="export-contact-list">
-          {filteredContacts.map((contact) => {
-            const name = displayName(contact)
-            return (
-              <button
-                key={contact.md5}
-                type="button"
-                className={`export-contact-item ${activeContact?.md5 === contact.md5 ? 'active' : ''}`}
-                onClick={() => onSelectContact(contact)}
-              >
-                <span className="export-contact-avatar">
-                  {contact.avatar ? <img src={contact.avatar} alt="" /> : name.slice(0, 1)}
-                </span>
-                <span className="export-contact-copy">
-                  <strong>{name}</strong>
-                  <small>{contact.type === 'group' ? '群聊' : '联系人'}</small>
-                </span>
-              </button>
-            )
-          })}
-        </div>
-
-        <button type="button" className="export-account-summary" onClick={onOpenSettings}>
-          <span className="export-account-avatar">
-            {selfInfo?.avatar ? (
-              <img src={selfInfo.avatar} alt="" />
-            ) : (
-              (selfInfo?.nickname || '我').slice(0, 1)
-            )}
-          </span>
-          <span>
-            <strong>{selfInfo?.nickname || '当前账号'}</strong>
-            <small className={dbReady ? 'ready' : ''}>
-              {dbReady ? '数据库已连接' : '数据库未连接'}
-            </small>
-          </span>
-        </button>
-      </aside>
 
       <main className="export-config-panel">
         <div className="export-config-scroll">
-          <button type="button" className="export-task-center-button" onClick={() => setTaskCenterOpen((open) => !open)}>
+          <ExportTaskCenter
-            任务中心{taskCount > 0 ? ` (${taskCount})` : ''}
+            open={taskCenterOpen}
-          </button>
+            taskCount={taskCount}
-          {taskCenterOpen && (
+            tasks={exportTasks}
-            <section className="export-task-center">
+            onToggle={() => setTaskCenterOpen((open) => !open)}
-              <div className="export-section-heading"><h3>导出任务</h3><span>{exportTasks.length} 条记录</span></div>
+            onCancel={(taskJobId) => void onCancelExport(taskJobId)}
-              {exportTasks.length === 0 ? <p>暂无导出记录</p> : exportTasks.map((task) => (
+          />
-                <div className="export-task-row" key={task.jobId}>
-                  <span><strong>{task.contactName}</strong><small>{task.format.toUpperCase()} · {task.progress.phase}</small></span>
-                  <span className="export-task-progress"><i style={{ width: `${task.progress.percent ?? 0}%` }} /><b>{task.progress.percent ?? 0}%</b></span>
-                  {task.status === 'running' && <button type="button" onClick={() => void onCancelExport(task.jobId)}>取消</button>}
-                </div>
-              ))}
-            </section>
-          )}
           <header className="export-config-header">
             <span className="export-chat-avatar">
               {activeContact?.avatar ? (
@@ -678,145 +556,20 @@ export function ExportWorkspace({
         </footer>
       </main>
 
-      <aside className={`export-preview-panel ${status !== 'idle' ? `status-${status}` : ''}`}>
+      <ExportPreviewPanel
-        {status === 'idle' && (
+        status={status}
-          <>
+        previewItems={previewItems}
-            <div className="export-preview-heading">
+        previewMediaCount={previewMediaCount}
-              <strong>导出预览</strong>
+        previewBytes={previewBytes}
-              <span>仅预览最近 20 条</span>
+        selfInfo={selfInfo}
-            </div>
+        progress={progress}
-            <div className="export-message-preview">
+        jobId={jobId}
-              <div className="export-preview-date">最近消息</div>
+        onCancel={(exportJobId) => {
-              {(previewItems.length
+          void window.api.cancelExport(exportJobId)
-                ? previewItems
+          setStatus('idle')
-                : [
+        }}
-                    {
+        onReveal={(path) => void window.api.revealExport(path)}
-                      id: 'empty',
+      />
-                      from: 'user',
-                      content: '导出预览将在这里显示',
-                      type: '文字',
-                      datetime: '',
-                      isSender: false
-                    }
-                  ]
-              ).map((message) => (
-                <div
-                  key={message.id}
-                  className={`export-preview-message ${message.isSender ? 'mine' : ''} ${
-                    message.contentData?.type === 'system' && message.contentData.pat ? 'system' : ''
-                  }`}
-                >
-                  <span className="export-preview-avatar">
-                    {message.img || (message.isSender && selfInfo?.avatar) ? (
-                      <img src={message.img || selfInfo?.avatar} alt="" />
-                    ) : (
-                      (message.isSender ? '我' : message.name || '友').slice(0, 1)
-                    )}
-                  </span>
-                  <span className="export-preview-bubble">
-                    <small>
-                      {message.name || (message.isSender ? '我' : '联系人')} ·{' '}
-                      {formatPreviewTime(message)}
-                    </small>
-                    {message.content || `[${message.type}]`}
-                  </span>
-                </div>
-              ))}
-            </div>
-            <div className="export-preview-stats export-preview-real-stats">
-              <span>
-                预览消息<strong>{previewItems.length}</strong>
-              </span>
-              <span>
-                媒体预览<strong>{previewMediaCount}</strong>
-              </span>
-              <span>
-                预估文本大小<strong>{previewBytes < 1024 ? `${previewBytes} B` : `${(previewBytes / 1024).toFixed(1)} KB`}</strong>
-              </span>
-            </div>
-            <div className="export-preview-stats">
-              <span>
-                消息总数<strong>待统计</strong>
-              </span>
-              <span>
-                媒体文件<strong>待统计</strong>
-              </span>
-              <span>
-                预计大小<strong>待统计</strong>
-              </span>
-            </div>
-          </>
-        )}
-        {status === 'running' && (
-          <div className="export-job-state">
-            <h2>正在导出</h2>
-            <p>导出任务在后台运行，不影响档案浏览。</p>
-            <ol>
-              <li className="done">准备导出</li>
-              <li className="current">
-                {progress?.phase === 'writing' ? '生成档案' : '分批读取聊天记录'}
-              </li>
-              <li>解析消息内容</li>
-              <li>处理媒体资源</li>
-              <li>生成档案</li>
-            </ol>
-            <div className="export-progress-bar" aria-label="导出进度">
-              <span style={{ width: `${progress?.percent ?? 0}%` }} />
-            </div>
-            <strong>
-              {progress?.phase === 'writing'
-                ? `正在写入 ${progress.processed.toLocaleString()} 条消息... ${progress.percent ?? 0}%`
-                : `正在读取消息... ${progress?.percent ?? 0}%`}
-            </strong>
-            <button
-              type="button"
-              className="export-cancel-button"
-              onClick={() => {
-                void window.api.cancelExport(jobId)
-                setStatus('idle')
-              }}
-            >
-              取消导出
-            </button>
-          </div>
-        )}
-        {status === 'completed' && (
-          <div className="export-job-state completed">
-            <div className="export-success-icon">✓</div>
-            <h2>导出完成</h2>
-            <p>聊天档案已成功保存。</p>
-            <div className="export-complete-summary">
-              <span>
-                导出消息<strong>{progress?.processed.toLocaleString() || '已完成'}</strong>
-              </span>
-              <span>
-                媒体资源<strong>按设置处理</strong>
-              </span>
-              <span>
-                输出位置<strong>已保存</strong>
-              </span>
-            </div>
-            <button
-              type="button"
-              className="export-primary-button"
-              onClick={() =>
-                progress?.outputPath && void window.api.revealExport(progress.outputPath)
-              }
-            >
-              打开档案
-            </button>
-            <button
-              type="button"
-              className="export-open-folder-button"
-              onClick={() =>
-                progress?.outputPath && void window.api.revealExport(progress.outputPath)
-              }
-            >
-              在文件夹中显示
-            </button>
-          </div>
-        )}
-      </aside>
     </div>
   )
 }

src/renderer/src/components/export/exportTypes.ts

@@ -0,0 +1,44 @@
+import type { Contact, Message } from '../../../../shared/types'
+import type {
+  ExportJobProgress,
+  ExportMessageKind,
+  ExportNameMode,
+  ExportRequest,
+  ExportResult,
+  ExportTaskRecord
+} from '../../../../shared/export'
+
+export type ExportRange = 'today' | 'threeDays' | 'sevenDays' | 'custom'
+export type ExportFormat = 'html' | 'csv' | 'json' | 'markdown'
+export type ExportStatus = 'idle' | 'running' | 'completed'
+
+export interface GroupMemberName {
+  wxid: string
+  nickname: string
+  groupNickname: string
+  wechatNickname: string
+  remark: string
+  avatar: string
+}
+
+export interface SelfInfo {
+  wxid: string
+  nickname: string
+  avatar?: string
+  accountRoot: string
+}
+
+export interface ExportWorkspaceProps {
+  contacts: Contact[]
+  selectedContact: Contact | null
+  previewMessages: Message[]
+  selfInfo: SelfInfo | null
+  dbReady: boolean
+  onSelectContact: (contact: Contact) => void
+  onOpenSettings: () => void
+  exportTasks: ExportTaskRecord[]
+  onStartExport: (request: ExportRequest) => Promise<ExportResult>
+  onCancelExport: (jobId: string) => Promise<void>
+}
+
+export type { Contact, ExportJobProgress, ExportMessageKind, Message, ExportNameMode, ExportTaskRecord }

src/renderer/src/components/export/exportUtils.ts

@@ -0,0 +1,77 @@
+import type { Contact, Message } from '../../../../shared/types'
+import type { ExportFormat, GroupMemberName } from './exportTypes'
+
+export const messageKinds = [
+  ['text', '文字'],
+  ['image', '图片'],
+  ['video', '视频'],
+  ['voice', '语音'],
+  ['sticker', '表情包'],
+  ['share', '链接与分享'],
+  ['location', '位置'],
+  ['system', '系统消息']
+] as const
+
+export const formatLabels: Record<ExportFormat, { label: string; hint?: string }> = {
+  html: { label: 'HTML', hint: '推荐' },
+  csv: { label: 'CSV' },
+  json: { label: 'JSON' },
+  markdown: { label: 'Markdown' }
+}
+
+export const formatOrder: ExportFormat[] = ['csv', 'html', 'json', 'markdown']
+
+export function displayName(contact: Contact | null): string {
+  return contact?.m_nsNickName || contact?.m_nsUsrName || '未选择会话'
+}
+
+export function formatPreviewTime(message: Message): string {
+  if (!message.createTime) return message.datetime || ''
+  return new Date(message.createTime * 1000).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+export function buildNameMap(
+  activeContact: Contact | null,
+  groupMembers: GroupMemberName[],
+  nameMode: string,
+  selfInfo: { wxid: string; nickname: string } | null
+): Record<string, string> {
+  const map: Record<string, string> = {}
+  if (activeContact?.type === 'group') {
+    for (const member of groupMembers) {
+      const value =
+        nameMode === 'groupNickname'
+          ? member.groupNickname || member.nickname || member.wxid
+          : nameMode === 'remark'
+            ? member.remark || member.wechatNickname || member.wxid
+            : member.wechatNickname || member.wxid
+      map[member.wxid] = value
+    }
+  } else if (activeContact) {
+    map[activeContact.m_nsUsrName] =
+      nameMode === 'remark'
+        ? activeContact.remark || activeContact.m_nsNickName || activeContact.m_nsUsrName
+        : activeContact.wechatNickname || activeContact.m_nsUsrName
+  }
+  if (selfInfo?.wxid) map[selfInfo.wxid] = selfInfo.nickname || selfInfo.wxid
+  return map
+}
+
+export function buildAvatarUrls(
+  activeContact: Contact | null,
+  groupMembers: GroupMemberName[],
+  selfInfo: { wxid: string; avatar?: string } | null
+): Record<string, string> {
+  const map: Record<string, string> = {}
+  if (activeContact?.m_nsUsrName && activeContact.avatar) {
+    map[activeContact.m_nsUsrName] = activeContact.avatar
+  }
+  for (const member of groupMembers) {
+    if (member.avatar) map[member.wxid] = member.avatar
+  }
+  if (selfInfo?.wxid && selfInfo.avatar) map[selfInfo.wxid] = selfInfo.avatar
+  return map
+}

src/renderer/src/components/search/AISearchWorkspace.tsx

@@ -1,479 +1,47 @@
 import React, { useMemo, useRef, useState } from 'react'
-import type { AIRuntimeModelConfig } from '../../../../shared/ai-provider'
 import type { Contact, Message } from '../../../../shared/types'
 import { SearchIcon } from '../chat/icons'
 
-type SearchStage = 'idle' | 'loading' | 'result' | 'insufficient'
+import type {
-type SearchScope = 'global' | 'conversation'
+  AISearchCacheRecord,
-type SearchRange = 'today' | '7d' | '30d' | 'all'
+  AISearchWorkspaceProps,
-type SearchIntent = 'general' | 'topic' | 'participants' | 'mixed'
+  EvidenceItem,
-
+  GroupMemberName,
-interface EvidenceItem {
+  SearchPassSummary,
-  contact: Contact
+  SearchRange,
-  message: Message
+  SearchScope,
-}
+  SearchStage,
-
+  SenderDirectory
-interface AISearchCacheRecord {
+} from './searchTypes'
-  version: 1
+import {
-  key: string
+  RANGE_LABELS,
-  createdAt: number
+  SEARCH_CACHE_KEY,
-  answer: string
+  SEARCH_HISTORY_KEY,
-  evidence: EvidenceItem[]
+  buildLocalSearchPlan,
-  senderNames: Record<string, string>
+  buildSearchCacheKey,
-  messageCount: number
+  compactCacheItem,
-}
+  currentTimestamp,
-
+  evidenceIdentity,
-interface GroupMemberName {
+  formatMemberName,
-  wxid: string
+  formatMessageDate,
-  nickname?: string
+  formatMessageTime,
-  groupNickname?: string
+  getRangeStart,
-  remark?: string
+  includesSearchAlias,
-  wechatNickname?: string
+  messageDateKey,
-}
+  messageIdentity,
-
+  messageText,
-interface SenderDirectory {
+  mergeSearchPlans,
-  displayNames: Record<string, string>
+  normalizeSearchText,
-  aliases: Record<string, string[]>
+  parseSearchCacheKey,
-}
+  parseSearchPlanResponse,
-
+  readSearchCache,
-interface SearchQueryPlan {
+  readSearchCacheByQuery,
-  intent: SearchIntent
+  selectEvenly,
-  keywords: string[]
+  selectEvidenceByDate,
-  variants: string[]
+  senderName,
-  source: 'local' | 'ai' | 'hybrid'
+  writeSearchCache
-}
+} from './searchUtils'
-
+import { renderMarkdown } from './searchMarkdown'
-interface SearchPassSummary {
-  label: string
-  keywords: string[]
-  messageCount: number
-}
-
-interface AISearchWorkspaceProps {
-  contacts: Contact[]
-  selectedContact: Contact | null
-  dbReady: boolean
-  aiModelConfig: AIRuntimeModelConfig
-  onSelectContact: (contact: Contact) => void
-  onOpenEvidence: (contact: Contact, createTime?: number) => void
-  onOpenAISettings: () => void
-  onNotice: (message: string) => void
-}
-
-const RANGE_LABELS: Record<SearchRange, string> = {
-  today: '今天',
-  '7d': '近 7 天',
-  '30d': '近 30 天',
-  all: '全部历史'
-}
-
-const SEARCH_CACHE_KEY = 'wxe_ai_search_cache_v8'
-const SEARCH_HISTORY_KEY = 'wxe_ai_search_history_v1'
-const SEARCH_CACHE_LIMIT = 20
-const currentTimestamp = (): number => Date.now()
-
-const SEARCH_INTENT_PHRASES = [
-  '全局搜一下',
-  '全局搜索',
-  '搜索一下',
-  '搜一下',
-  '查询一下',
-  '查一下',
-  '找一下',
-  '我和谁聊过',
-  '谁和我聊过',
-  '哪些人和我聊过',
-  '最近讨论了什么',
-  '最近聊了什么',
-  '最近说了什么',
-  '讨论了什么',
-  '讨论什么',
-  '聊了什么',
-  '聊些什么',
-  '说了什么',
-  '说些什么',
-  '最近讨论',
-  '最近聊天',
-  '这个话题',
-  '相关话题',
-  '的聊天',
-  '的内容',
-  '的记录',
-  '关于',
-  '聊天',
-  '记录',
-  '聊天记录',
-  '帮我',
-  '请问'
-].sort((left, right) => right.length - left.length)
-
-const SEARCH_STOP_WORDS = new Set([
-  '我',
-  '谁',
-  '什么',
-  '哪些',
-  '哪个',
-  '人',
-  '和',
-  '聊过',
-  '说过',
-  '提到',
-  '讨论',
-  '聊天',
-  '记录',
-  '说',
-  '聊',
-  '话题',
-  '内容',
-  '相关',
-  '最近',
-  '一下'
-])
-
-const messageText = (message: Message): string =>
-  String(message.content || '').trim() || `[${message.type || '消息'}]`
-
-const normalizeSearchText = (value: string): string => value.toLowerCase().replace(/\s+/g, '')
-
-const includesSearchAlias = (query: string, alias: string): boolean => {
-  const normalizedAlias = normalizeSearchText(alias.trim())
-  return Boolean(normalizedAlias) && normalizeSearchText(query).includes(normalizedAlias)
-}
-
-const extractSearchKeywords = (query: string): string[] => {
-  const cleanedQuery = SEARCH_INTENT_PHRASES.reduce(
-    (value, phrase) => value.split(phrase).join(' '),
-    query.toLowerCase()
-  )
-  const tokens = cleanedQuery
-    .split(/[\s,，。！？!?、:：;；"“”‘’()（）[\]【】]+/)
-    .map((token) => token.trim())
-    .filter((token) => token.length >= 2 && !SEARCH_STOP_WORDS.has(token))
-  return Array.from(new Set(tokens))
-}
-
-const getFuzzySearchKeywords = (keywords: string[]): string[] =>
-  Array.from(
-    new Set(
-      keywords.flatMap((keyword) => {
-        const variants = [keyword]
-        if (/^[\u4e00-\u9fff]+$/.test(keyword) && keyword.length > 2) {
-          variants.push(keyword.slice(-2))
-        }
-        return variants
-      })
-    )
-  )
-
-const normalizeSearchTerms = (terms: unknown): string[] => {
-  if (!Array.isArray(terms)) return []
-  return Array.from(
-    new Set(
-      terms
-        .filter((term): term is string => typeof term === 'string')
-        .map((term) => term.trim())
-        .filter((term) => term.length >= 2 && term.length <= 32)
-    )
-  ).slice(0, 16)
-}
-
-const buildLocalSearchPlan = (query: string): SearchQueryPlan => {
-  const keywords = extractSearchKeywords(query)
-  const asksParticipants = /我和谁|谁和我|哪些人|哪个人|哪些联系人/.test(query)
-  const intent: SearchIntent = asksParticipants
-    ? keywords.length
-      ? 'mixed'
-      : 'participants'
-    : keywords.length
-      ? 'topic'
-      : 'general'
-  return {
-    intent,
-    keywords,
-    variants: getFuzzySearchKeywords(keywords),
-    source: 'local'
-  }
-}
-
-const parseSearchPlanResponse = (value: string): Partial<SearchQueryPlan> | null => {
-  const jsonMatch = value.match(/\{[\s\S]*\}/)
-  if (!jsonMatch) return null
-  try {
-    const parsed = JSON.parse(jsonMatch[0]) as Record<string, unknown>
-    const intent = ['general', 'topic', 'participants', 'mixed'].includes(String(parsed.intent))
-      ? (parsed.intent as SearchIntent)
-      : undefined
-    return {
-      intent,
-      keywords: normalizeSearchTerms(parsed.keywords),
-      variants: normalizeSearchTerms(parsed.variants)
-    }
-  } catch {
-    return null
-  }
-}
-
-const mergeSearchPlans = (
-  localPlan: SearchQueryPlan,
-  aiPlan: Partial<SearchQueryPlan> | null
-): SearchQueryPlan => {
-  if (!aiPlan) return localPlan
-  const keywords = normalizeSearchTerms([...(localPlan.keywords || []), ...(aiPlan.keywords || [])])
-  const variants = normalizeSearchTerms([
-    ...getFuzzySearchKeywords(keywords),
-    ...(localPlan.variants || []),
-    ...(aiPlan.variants || [])
-  ])
-  return {
-    intent: aiPlan.intent || localPlan.intent,
-    keywords,
-    variants,
-    source: 'hybrid'
-  }
-}
-
-const messageIdentity = (message: Message): string =>
-  message.localId
-    ? `local:${message.localId}`
-    : message.id || `${message.createTime}:${message.content}`
-
-const evidenceIdentity = ({ contact, message }: EvidenceItem): string =>
-  `${contact.md5}:${messageIdentity(message)}`
-
-const formatMessageTime = (message: Message): string => {
-  if (message.datetime) return message.datetime
-  if (message.createTime) return new Date(message.createTime * 1000).toLocaleString('zh-CN')
-  return '未知时间'
-}
-
-const getRangeStart = (range: SearchRange): number | undefined => {
-  if (range === 'all') return undefined
-  if (range === 'today') {
-    const now = new Date()
-    return Math.floor(new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() / 1000)
-  }
-  const days = range === '7d' ? 7 : 30
-  return Math.floor(Date.now() / 1000) - days * 86400
-}
-
-const messageDateKey = (message: Message): string => {
-  if (!message.createTime) return 'unknown'
-  const date = new Date(message.createTime * 1000)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
-
-const formatMessageDate = (dateKey: string): string => {
-  if (dateKey === 'unknown') return '--/--'
-  const [, month, day] = dateKey.split('-')
-  return `${month}/${day}`
-}
-
-const selectEvenly = <T,>(items: T[], count: number): T[] => {
-  if (count >= items.length) return items
-  if (count <= 0) return []
-  if (count === 1) return [items[items.length - 1]]
-  return Array.from({ length: count }, (_item, index) => {
-    const itemIndex = Math.round((index * (items.length - 1)) / (count - 1))
-    return items[itemIndex]
-  })
-}
-
-const selectEvidenceByDate = (items: EvidenceItem[], maxItems: number): EvidenceItem[] => {
-  const buckets = new Map<string, EvidenceItem[]>()
-  items.forEach((item) => {
-    const key = messageDateKey(item.message)
-    const bucket = buckets.get(key) || []
-    bucket.push(item)
-    buckets.set(key, bucket)
-  })
-  const entries = Array.from(buckets.entries()).sort(([left], [right]) => left.localeCompare(right))
-  const targetCount = Math.min(maxItems, items.length)
-  const counts = entries.map(() => 0)
-  let remaining = targetCount
-  while (remaining > 0) {
-    let bestIndex = -1
-    let bestRemaining = 0
-    entries.forEach(([, bucket], index) => {
-      const available = bucket.length - counts[index]
-      if (available > bestRemaining) {
-        bestIndex = index
-        bestRemaining = available
-      }
-    })
-    if (bestIndex < 0) break
-    counts[bestIndex] += 1
-    remaining -= 1
-  }
-  return entries
-    .flatMap((entry, index) => selectEvenly(entry[1], counts[index]))
-    .sort((left, right) => (left.message.createTime || 0) - (right.message.createTime || 0))
-}
-
-const looksLikeUserId = (value: string): boolean =>
-  value.startsWith('wxid_') || value.includes('@chatroom') || /^\d{6,}$/.test(value)
-
-const formatMemberName = (member: GroupMemberName): string =>
-  member.groupNickname || member.wechatNickname || member.nickname || member.remark || member.wxid
-
-const senderName = (message: Message, contact: Contact, names: Record<string, string>): string => {
-  const identifiers = [message.senderId, message.from, message.name].filter(
-    (value): value is string => Boolean(value?.trim())
-  )
-  const mappedName = identifiers.map((value) => names[value]).find(Boolean)
-  if (mappedName) return mappedName
-  if (message.name && !looksLikeUserId(message.name)) return message.name
-  if (message.isSender) return '我'
-  return contact.type === 'user' ? contact.m_nsNickName || '联系人' : '群成员'
-}
-
-const compactCacheItem = ({ contact, message }: EvidenceItem): EvidenceItem => ({
-  contact: {
-    md5: contact.md5,
-    m_nsUsrName: contact.m_nsUsrName,
-    m_nsNickName: contact.m_nsNickName,
-    type: contact.type,
-    avatar: contact.avatar
-  },
-  message: {
-    id: message.id,
-    from: message.from,
-    type: message.type,
-    datetime: message.datetime,
-    content: message.content,
-    isSender: message.isSender,
-    name: message.name,
-    senderId: message.senderId,
-    localId: message.localId,
-    serverId: message.serverId,
-    createTime: message.createTime
-  }
-})
-
-const buildSearchCacheKey = (
-  scope: SearchScope,
-  contactMd5: string,
-  range: SearchRange,
-  query: string
-): string => JSON.stringify([scope, contactMd5, range, query.trim().toLowerCase()])
-
-const parseSearchCacheKey = (
-  key: string
-): { scope: SearchScope; contactMd5: string; range: SearchRange; query: string } | null => {
-  try {
-    const parts = JSON.parse(key) as unknown
-    if (
-      !Array.isArray(parts) ||
-      !['global', 'conversation'].includes(String(parts[0])) ||
-      !['today', '7d', '30d', 'all'].includes(String(parts[2])) ||
-      typeof parts[3] !== 'string'
-    ) {
-      return null
-    }
-    return {
-      scope: parts[0] as SearchScope,
-      contactMd5: typeof parts[1] === 'string' ? parts[1] : '',
-      range: parts[2] as SearchRange,
-      query: parts[3]
-    }
-  } catch {
-    return null
-  }
-}
-
-const readSearchCache = (key: string): AISearchCacheRecord | null => {
-  try {
-    const records = JSON.parse(
-      localStorage.getItem(SEARCH_CACHE_KEY) || '[]'
-    ) as AISearchCacheRecord[]
-    const record = records.find((item) => item.version === 1 && item.key === key)
-    return record || null
-  } catch {
-    return null
-  }
-}
-
-const readSearchCacheByQuery = (
-  query: string
-): { record: AISearchCacheRecord; location: ReturnType<typeof parseSearchCacheKey> } | null => {
-  try {
-    const records = JSON.parse(
-      localStorage.getItem(SEARCH_CACHE_KEY) || '[]'
-    ) as AISearchCacheRecord[]
-    const normalizedQuery = query.trim().toLowerCase()
-    for (const record of records) {
-      const location = parseSearchCacheKey(record.key)
-      if (record.version === 1 && location?.query === normalizedQuery) {
-        return { record, location }
-      }
-    }
-    return null
-  } catch {
-    return null
-  }
-}
-
-const writeSearchCache = (record: AISearchCacheRecord): void => {
-  try {
-    const records = JSON.parse(
-      localStorage.getItem(SEARCH_CACHE_KEY) || '[]'
-    ) as AISearchCacheRecord[]
-    const nextRecords = [record, ...records.filter((item) => item.key !== record.key)].slice(
-      0,
-      SEARCH_CACHE_LIMIT
-    )
-    localStorage.setItem(SEARCH_CACHE_KEY, JSON.stringify(nextRecords))
-  } catch {
-    // A large message result must not break the search itself.
-  }
-}
-
-const inlineMarkdown = (value: string, keyPrefix: string): React.ReactNode[] =>
-  value.split(/(\*\*.*?\*\*|`.*?`|\*.*?\*)/g).map((part, index) => {
-    const key = `${keyPrefix}-${index}`
-    if (part.startsWith('**') && part.endsWith('**')) {
-      return <strong key={key}>{part.slice(2, -2)}</strong>
-    }
-    if (part.startsWith('`') && part.endsWith('`')) {
-      return <code key={key}>{part.slice(1, -1)}</code>
-    }
-    if (part.startsWith('*') && part.endsWith('*')) {
-      return <em key={key}>{part.slice(1, -1)}</em>
-    }
-    return <React.Fragment key={key}>{part}</React.Fragment>
-  })
-
-const renderMarkdown = (value: string): React.ReactNode =>
-  value.split(/\r?\n/).map((line, index) => {
-    const key = `markdown-${index}`
-    if (!line.trim()) return <div key={key} className="ai-search-markdown-spacer" />
-    const heading = /^(#{1,3})\s+(.+)$/.exec(line)
-    if (heading) {
-      const Heading = `h${heading[1].length}` as 'h1' | 'h2' | 'h3'
-      return <Heading key={key}>{inlineMarkdown(heading[2], key)}</Heading>
-    }
-    const bullet = /^\s*[-*]\s+(.+)$/.exec(line)
-    if (bullet) {
-      return (
-        <div key={key} className="ai-search-markdown-list-item">
-          <span aria-hidden>•</span>
-          <span>{inlineMarkdown(bullet[1], key)}</span>
-        </div>
-      )
-    }
-    const numbered = /^\s*\d+[.)]\s+(.+)$/.exec(line)
-    if (numbered) {
-      return (
-        <div key={key} className="ai-search-markdown-list-item">
-          <span aria-hidden>{line.trim().match(/^\d+/)?.[0]}.</span>
-          <span>{inlineMarkdown(numbered[1], key)}</span>
-        </div>
-      )
-    }
-    return <p key={key}>{inlineMarkdown(line, key)}</p>
-  })
 
 export function AISearchWorkspace({
   contacts,

src/renderer/src/components/search/searchMarkdown.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+const inlineMarkdown = (value: string, keyPrefix: string): React.ReactNode[] =>
+  value.split(/(\*\*.*?\*\*|`.*?`|\*.*?\*)/g).map((part, index) => {
+    const key = `${keyPrefix}-${index}`
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return <strong key={key}>{part.slice(2, -2)}</strong>
+    }
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return <code key={key}>{part.slice(1, -1)}</code>
+    }
+    if (part.startsWith('*') && part.endsWith('*')) {
+      return <em key={key}>{part.slice(1, -1)}</em>
+    }
+    return <React.Fragment key={key}>{part}</React.Fragment>
+  })
+
+export const renderMarkdown = (value: string): React.ReactNode =>
+  value.split(/\r?\n/).map((line, index) => {
+    const key = `markdown-${index}`
+    if (!line.trim()) return <div key={key} className="ai-search-markdown-spacer" />
+    const heading = /^(#{1,3})\s+(.+)$/.exec(line)
+    if (heading) {
+      const Heading = `h${heading[1].length}` as 'h1' | 'h2' | 'h3'
+      return <Heading key={key}>{inlineMarkdown(heading[2], key)}</Heading>
+    }
+    const bullet = /^\s*[-*]\s+(.+)$/.exec(line)
+    if (bullet) {
+      return (
+        <div key={key} className="ai-search-markdown-list-item">
+          <span aria-hidden>•</span>
+          <span>{inlineMarkdown(bullet[1], key)}</span>
+        </div>
+      )
+    }
+    const numbered = /^\s*\d+[.)]\s+(.+)$/.exec(line)
+    if (numbered) {
+      return (
+        <div key={key} className="ai-search-markdown-list-item">
+          <span aria-hidden>{line.trim().match(/^\d+/)?.[0]}.</span>
+          <span>{inlineMarkdown(numbered[1], key)}</span>
+        </div>
+      )
+    }
+    return <p key={key}>{inlineMarkdown(line, key)}</p>
+  })

src/renderer/src/components/search/searchTypes.ts

@@ -0,0 +1,59 @@
+import type { AIRuntimeModelConfig } from '../../../../shared/ai-provider'
+import type { Contact, Message } from '../../../../shared/types'
+
+export type SearchStage = 'idle' | 'loading' | 'result' | 'insufficient'
+export type SearchScope = 'global' | 'conversation'
+export type SearchRange = 'today' | '7d' | '30d' | 'all'
+export type SearchIntent = 'general' | 'topic' | 'participants' | 'mixed'
+
+export interface EvidenceItem {
+  contact: Contact
+  message: Message
+}
+
+export interface AISearchCacheRecord {
+  version: 1
+  key: string
+  createdAt: number
+  answer: string
+  evidence: EvidenceItem[]
+  senderNames: Record<string, string>
+  messageCount: number
+}
+
+export interface GroupMemberName {
+  wxid: string
+  nickname?: string
+  groupNickname?: string
+  remark?: string
+  wechatNickname?: string
+}
+
+export interface SenderDirectory {
+  displayNames: Record<string, string>
+  aliases: Record<string, string[]>
+}
+
+export interface SearchQueryPlan {
+  intent: SearchIntent
+  keywords: string[]
+  variants: string[]
+  source: 'local' | 'ai' | 'hybrid'
+}
+
+export interface SearchPassSummary {
+  label: string
+  keywords: string[]
+  messageCount: number
+}
+
+export interface AISearchWorkspaceProps {
+  contacts: Contact[]
+  selectedContact: Contact | null
+  dbReady: boolean
+  aiModelConfig: AIRuntimeModelConfig
+  onSelectContact: (contact: Contact) => void
+  onOpenEvidence: (contact: Contact, createTime?: number) => void
+  onOpenAISettings: () => void
+  onNotice: (message: string) => void
+}

src/renderer/src/components/search/searchUtils.ts

@@ -0,0 +1,372 @@
+import type { Contact, Message } from '../../../../shared/types'
+import type { AISearchCacheRecord, EvidenceItem, GroupMemberName, SearchIntent, SearchQueryPlan, SearchRange, SearchScope } from './searchTypes'
+
+export const RANGE_LABELS: Record<SearchRange, string> = {
+  today: '今天',
+  '7d': '近 7 天',
+  '30d': '近 30 天',
+  all: '全部历史'
+}
+
+export const SEARCH_CACHE_KEY = 'wxe_ai_search_cache_v8'
+export const SEARCH_HISTORY_KEY = 'wxe_ai_search_history_v1'
+export const SEARCH_CACHE_LIMIT = 20
+export const currentTimestamp = (): number => Date.now()
+
+const SEARCH_INTENT_PHRASES = [
+  '全局搜一下',
+  '全局搜索',
+  '搜索一下',
+  '搜一下',
+  '查询一下',
+  '查一下',
+  '找一下',
+  '我和谁聊过',
+  '谁和我聊过',
+  '哪些人和我聊过',
+  '最近讨论了什么',
+  '最近聊了什么',
+  '最近说了什么',
+  '讨论了什么',
+  '讨论什么',
+  '聊了什么',
+  '聊些什么',
+  '说了什么',
+  '说些什么',
+  '最近讨论',
+  '最近聊天',
+  '这个话题',
+  '相关话题',
+  '的聊天',
+  '的内容',
+  '的记录',
+  '关于',
+  '聊天',
+  '记录',
+  '聊天记录',
+  '帮我',
+  '请问'
+].sort((left, right) => right.length - left.length)
+
+const SEARCH_STOP_WORDS = new Set([
+  '我',
+  '谁',
+  '什么',
+  '哪些',
+  '哪个',
+  '人',
+  '和',
+  '聊过',
+  '说过',
+  '提到',
+  '讨论',
+  '聊天',
+  '记录',
+  '说',
+  '聊',
+  '话题',
+  '内容',
+  '相关',
+  '最近',
+  '一下'
+])
+
+export const messageText = (message: Message): string =>
+  String(message.content || '').trim() || `[${message.type || '消息'}]`
+
+export const normalizeSearchText = (value: string): string => value.toLowerCase().replace(/\s+/g, '')
+
+export const includesSearchAlias = (query: string, alias: string): boolean => {
+  const normalizedAlias = normalizeSearchText(alias.trim())
+  return Boolean(normalizedAlias) && normalizeSearchText(query).includes(normalizedAlias)
+}
+
+const extractSearchKeywords = (query: string): string[] => {
+  const cleanedQuery = SEARCH_INTENT_PHRASES.reduce(
+    (value, phrase) => value.split(phrase).join(' '),
+    query.toLowerCase()
+  )
+  const tokens = cleanedQuery
+    .split(/[\s,，。！？!?、:：;；"“”‘’()（）[\]【】]+/)
+    .map((token) => token.trim())
+    .filter((token) => token.length >= 2 && !SEARCH_STOP_WORDS.has(token))
+  return Array.from(new Set(tokens))
+}
+
+const getFuzzySearchKeywords = (keywords: string[]): string[] =>
+  Array.from(
+    new Set(
+      keywords.flatMap((keyword) => {
+        const variants = [keyword]
+        if (/^[\u4e00-\u9fff]+$/.test(keyword) && keyword.length > 2) {
+          variants.push(keyword.slice(-2))
+        }
+        return variants
+      })
+    )
+  )
+
+const normalizeSearchTerms = (terms: unknown): string[] => {
+  if (!Array.isArray(terms)) return []
+  return Array.from(
+    new Set(
+      terms
+        .filter((term): term is string => typeof term === 'string')
+        .map((term) => term.trim())
+        .filter((term) => term.length >= 2 && term.length <= 32)
+    )
+  ).slice(0, 16)
+}
+
+export const buildLocalSearchPlan = (query: string): SearchQueryPlan => {
+  const keywords = extractSearchKeywords(query)
+  const asksParticipants = /我和谁|谁和我|哪些人|哪个人|哪些联系人/.test(query)
+  const intent: SearchIntent = asksParticipants
+    ? keywords.length
+      ? 'mixed'
+      : 'participants'
+    : keywords.length
+      ? 'topic'
+      : 'general'
+  return {
+    intent,
+    keywords,
+    variants: getFuzzySearchKeywords(keywords),
+    source: 'local'
+  }
+}
+
+export const parseSearchPlanResponse = (value: string): Partial<SearchQueryPlan> | null => {
+  const jsonMatch = value.match(/\{[\s\S]*\}/)
+  if (!jsonMatch) return null
+  try {
+    const parsed = JSON.parse(jsonMatch[0]) as Record<string, unknown>
+    const intent = ['general', 'topic', 'participants', 'mixed'].includes(String(parsed.intent))
+      ? (parsed.intent as SearchIntent)
+      : undefined
+    return {
+      intent,
+      keywords: normalizeSearchTerms(parsed.keywords),
+      variants: normalizeSearchTerms(parsed.variants)
+    }
+  } catch {
+    return null
+  }
+}
+
+export const mergeSearchPlans = (
+  localPlan: SearchQueryPlan,
+  aiPlan: Partial<SearchQueryPlan> | null
+): SearchQueryPlan => {
+  if (!aiPlan) return localPlan
+  const keywords = normalizeSearchTerms([...(localPlan.keywords || []), ...(aiPlan.keywords || [])])
+  const variants = normalizeSearchTerms([
+    ...getFuzzySearchKeywords(keywords),
+    ...(localPlan.variants || []),
+    ...(aiPlan.variants || [])
+  ])
+  return {
+    intent: aiPlan.intent || localPlan.intent,
+    keywords,
+    variants,
+    source: 'hybrid'
+  }
+}
+
+export const messageIdentity = (message: Message): string =>
+  message.localId
+    ? `local:${message.localId}`
+    : message.id || `${message.createTime}:${message.content}`
+
+export const evidenceIdentity = ({ contact, message }: EvidenceItem): string =>
+  `${contact.md5}:${messageIdentity(message)}`
+
+export const formatMessageTime = (message: Message): string => {
+  if (message.datetime) return message.datetime
+  if (message.createTime) return new Date(message.createTime * 1000).toLocaleString('zh-CN')
+  return '未知时间'
+}
+
+export const getRangeStart = (range: SearchRange): number | undefined => {
+  if (range === 'all') return undefined
+  if (range === 'today') {
+    const now = new Date()
+    return Math.floor(new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() / 1000)
+  }
+  const days = range === '7d' ? 7 : 30
+  return Math.floor(Date.now() / 1000) - days * 86400
+}
+
+export const messageDateKey = (message: Message): string => {
+  if (!message.createTime) return 'unknown'
+  const date = new Date(message.createTime * 1000)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+export const formatMessageDate = (dateKey: string): string => {
+  if (dateKey === 'unknown') return '--/--'
+  const [, month, day] = dateKey.split('-')
+  return `${month}/${day}`
+}
+
+export const selectEvenly = <T,>(items: T[], count: number): T[] => {
+  if (count >= items.length) return items
+  if (count <= 0) return []
+  if (count === 1) return [items[items.length - 1]]
+  return Array.from({ length: count }, (_item, index) => {
+    const itemIndex = Math.round((index * (items.length - 1)) / (count - 1))
+    return items[itemIndex]
+  })
+}
+
+export const selectEvidenceByDate = (items: EvidenceItem[], maxItems: number): EvidenceItem[] => {
+  const buckets = new Map<string, EvidenceItem[]>()
+  items.forEach((item) => {
+    const key = messageDateKey(item.message)
+    const bucket = buckets.get(key) || []
+    bucket.push(item)
+    buckets.set(key, bucket)
+  })
+  const entries = Array.from(buckets.entries()).sort(([left], [right]) => left.localeCompare(right))
+  const targetCount = Math.min(maxItems, items.length)
+  const counts = entries.map(() => 0)
+  let remaining = targetCount
+  while (remaining > 0) {
+    let bestIndex = -1
+    let bestRemaining = 0
+    entries.forEach(([, bucket], index) => {
+      const available = bucket.length - counts[index]
+      if (available > bestRemaining) {
+        bestIndex = index
+        bestRemaining = available
+      }
+    })
+    if (bestIndex < 0) break
+    counts[bestIndex] += 1
+    remaining -= 1
+  }
+  return entries
+    .flatMap((entry, index) => selectEvenly(entry[1], counts[index]))
+    .sort((left, right) => (left.message.createTime || 0) - (right.message.createTime || 0))
+}
+
+const looksLikeUserId = (value: string): boolean =>
+  value.startsWith('wxid_') || value.includes('@chatroom') || /^\d{6,}$/.test(value)
+
+export const formatMemberName = (member: GroupMemberName): string =>
+  member.groupNickname || member.wechatNickname || member.nickname || member.remark || member.wxid
+
+export const senderName = (message: Message, contact: Contact, names: Record<string, string>): string => {
+  const identifiers = [message.senderId, message.from, message.name].filter(
+    (value): value is string => Boolean(value?.trim())
+  )
+  const mappedName = identifiers.map((value) => names[value]).find(Boolean)
+  if (mappedName) return mappedName
+  if (message.name && !looksLikeUserId(message.name)) return message.name
+  if (message.isSender) return '我'
+  return contact.type === 'user' ? contact.m_nsNickName || '联系人' : '群成员'
+}
+
+export const compactCacheItem = ({ contact, message }: EvidenceItem): EvidenceItem => ({
+  contact: {
+    md5: contact.md5,
+    m_nsUsrName: contact.m_nsUsrName,
+    m_nsNickName: contact.m_nsNickName,
+    type: contact.type,
+    avatar: contact.avatar
+  },
+  message: {
+    id: message.id,
+    from: message.from,
+    type: message.type,
+    datetime: message.datetime,
+    content: message.content,
+    isSender: message.isSender,
+    name: message.name,
+    senderId: message.senderId,
+    localId: message.localId,
+    serverId: message.serverId,
+    createTime: message.createTime
+  }
+})
+
+export const buildSearchCacheKey = (
+  scope: SearchScope,
+  contactMd5: string,
+  range: SearchRange,
+  query: string
+): string => JSON.stringify([scope, contactMd5, range, query.trim().toLowerCase()])
+
+export const parseSearchCacheKey = (
+  key: string
+): { scope: SearchScope; contactMd5: string; range: SearchRange; query: string } | null => {
+  try {
+    const parts = JSON.parse(key) as unknown
+    if (
+      !Array.isArray(parts) ||
+      !['global', 'conversation'].includes(String(parts[0])) ||
+      !['today', '7d', '30d', 'all'].includes(String(parts[2])) ||
+      typeof parts[3] !== 'string'
+    ) {
+      return null
+    }
+    return {
+      scope: parts[0] as SearchScope,
+      contactMd5: typeof parts[1] === 'string' ? parts[1] : '',
+      range: parts[2] as SearchRange,
+      query: parts[3]
+    }
+  } catch {
+    return null
+  }
+}
+
+export const readSearchCache = (key: string): AISearchCacheRecord | null => {
+  try {
+    const records = JSON.parse(
+      localStorage.getItem(SEARCH_CACHE_KEY) || '[]'
+    ) as AISearchCacheRecord[]
+    const record = records.find((item) => item.version === 1 && item.key === key)
+    return record || null
+  } catch {
+    return null
+  }
+}
+
+export const readSearchCacheByQuery = (
+  query: string
+): { record: AISearchCacheRecord; location: ReturnType<typeof parseSearchCacheKey> } | null => {
+  try {
+    const records = JSON.parse(
+      localStorage.getItem(SEARCH_CACHE_KEY) || '[]'
+    ) as AISearchCacheRecord[]
+    const normalizedQuery = query.trim().toLowerCase()
+    for (const record of records) {
+      const location = parseSearchCacheKey(record.key)
+      if (record.version === 1 && location?.query === normalizedQuery) {
+        return { record, location }
+      }
+    }
+    return null
+  } catch {
+    return null
+  }
+}
+
+export const writeSearchCache = (record: AISearchCacheRecord): void => {
+  try {
+    const records = JSON.parse(
+      localStorage.getItem(SEARCH_CACHE_KEY) || '[]'
+    ) as AISearchCacheRecord[]
+    const nextRecords = [record, ...records.filter((item) => item.key !== record.key)].slice(
+      0,
+      SEARCH_CACHE_LIMIT
+    )
+    localStorage.setItem(SEARCH_CACHE_KEY, JSON.stringify(nextRecords))
+  } catch {
+    // A large message result must not break the search itself.
+  }
+}

src/renderer/src/main.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './styles/tokens.css'
+import './styles/index.scss'
-import './assets/main.css'
-import './styles/search.css'
-import './styles/archive.css'
-import './styles/settings-advanced.css'
 
 window.addEventListener('error', (event) => {
   void window.api

src/renderer/src/styles/api.scss

@@ -0,0 +1,769 @@
+@media (max-width: 700px) {
+  .settings-account-overview {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .settings-account-actions {
+    grid-row: auto;
+    grid-column: 1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .settings-account-root {
+    grid-column: 1;
+  }
+  .database-key-status-card dl,
+  .database-key-diagnostics dl {
+    grid-template-columns: 1fr;
+  }
+  .database-key-auto-heading {
+    flex-direction: column;
+  }
+  .database-key-phases {
+    grid-template-columns: 1fr;
+  }
+  .database-key-phases li {
+    padding: 0 0 0 28px;
+    text-align: left;
+  }
+  .database-key-phases li::before {
+    top: -2px;
+    left: 0;
+    transform: none;
+  }
+  .image-decrypt-status dl,
+  .image-key-grid {
+    grid-template-columns: 1fr;
+  }
+  .image-decrypt-status .image-decrypt-wide {
+    grid-column: 1;
+  }
+  .image-auto-heading {
+    flex-direction: column;
+  }
+  .image-auto-phases {
+    grid-template-columns: 1fr;
+  }
+  .image-auto-phases li {
+    padding: 0 0 0 28px;
+    text-align: left;
+  }
+  .image-auto-phases li::before {
+    top: -2px;
+    left: 0;
+    transform: none;
+  }
+  .image-auto-success {
+    grid-template-columns: 1fr;
+  }
+  .image-auto-success button {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: start;
+  }
+  .image-resource-checks > div {
+    align-items: flex-start;
+  }
+  .image-resource-checks small {
+    white-space: normal;
+    text-align: right;
+  }
+  .ai-provider-card dl,
+  .ai-provider-form-grid,
+  .ai-provider-advanced > div {
+    grid-template-columns: 1fr;
+  }
+  .ai-provider-form-grid .wide,
+  .ai-provider-advanced .wide {
+    grid-column: 1;
+  }
+  .ai-model-row {
+    grid-template-columns: 1fr;
+  }
+}
+.api-center-layout > * {
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+.api-section-heading h2,
+.api-introduction h2,
+.api-integrations h2,
+.api-runtime-title h2 {
+  margin: 0;
+  color: var(--wxex-text-primary);
+  font: 700 17px/24px var(--wxex-font);
+}
+.ready-text {
+  color: var(--wxex-success);
+}
+.api-main {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--wxex-bg-main);
+}
+.api-main-scroll {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 22px 28px 36px;
+}
+.api-workspace-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--wxex-border);
+}
+.api-title-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.api-title-line h1 {
+  margin: 0;
+  color: var(--wxex-text-primary);
+  font: 700 22px/30px var(--wxex-font);
+}
+.api-workspace-heading p {
+  margin: 4px 0 0;
+  color: var(--wxex-text-secondary);
+  font: 13px/19px var(--wxex-font);
+}
+.api-skill-status,
+.api-version {
+  padding: 2px 7px;
+  border-radius: 5px;
+  font: 700 11px/17px var(--wxex-font);
+}
+.api-skill-status.ready {
+  color: var(--wxex-brand);
+  background: var(--wxex-brand-soft);
+}
+.api-skill-status.error {
+  color: var(--wxex-danger);
+  background: #fff1f1;
+}
+.api-version {
+  color: var(--wxex-text-muted);
+  background: var(--wxex-bg-app);
+}
+.api-header-actions,
+.api-tester-actions,
+.api-runtime-actions,
+.api-skill-file-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.api-header-actions button,
+.api-tester-actions button,
+.api-runtime-actions button,
+.api-endpoint-row button,
+.api-response-summary + pre + p + button,
+.api-skill-file-actions button {
+  min-height: 32px;
+  padding: 0 11px;
+  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: 600 12px/18px var(--wxex-font);
+}
+.api-header-actions button:hover,
+.api-tester-actions button:hover,
+.api-runtime-actions button:hover,
+.api-endpoint-row button:hover,
+.api-skill-file-actions button:hover {
+  border-color: var(--wxex-brand);
+  color: var(--wxex-brand);
+}
+.api-primary-button {
+  border-color: var(--wxex-brand) !important;
+  background: var(--wxex-brand) !important;
+  color: #fff !important;
+}
+.api-primary-button:hover:not(:disabled),
+.api-primary-button:focus-visible,
+.api-primary-button:active {
+  background: var(--wxex-brand-hover) !important;
+  color: #fff !important;
+}
+.api-primary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.api-trust-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+  padding: 10px 12px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: #f5f8f6;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-trust-bar i {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--wxex-text-muted);
+}
+.api-introduction {
+  margin-top: 24px;
+  padding: 18px 20px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-lg);
+  background: var(--wxex-bg-elevated);
+}
+.api-introduction p {
+  margin: 10px 0 16px;
+  color: var(--wxex-text-secondary);
+  font: 13px/20px var(--wxex-font);
+}
+.api-flow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px;
+  border: 1px dashed var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-flow span,
+.api-flow strong {
+  padding: 7px 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 5px;
+  background: #fff;
+  white-space: nowrap;
+}
+.api-flow strong {
+  color: var(--wxex-brand);
+  background: var(--wxex-brand-soft);
+}
+.api-flow b {
+  color: var(--wxex-text-muted);
+  font-size: 17px;
+}
+.api-endpoint-catalog,
+.api-request-tester {
+  margin-top: 26px;
+}
+.skill-install-flow {
+  margin-top: 26px;
+  padding: 18px 20px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-lg);
+  background: var(--wxex-bg-elevated);
+}
+.skill-flow-steps {
+  display: grid;
+  gap: 16px;
+  margin-top: 16px;
+}
+.skill-flow-steps > section {
+  position: relative;
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  gap: 10px;
+  color: var(--wxex-text-muted);
+}
+.skill-flow-steps > section:not(:last-child)::after {
+  position: absolute;
+  top: 28px;
+  left: 12px;
+  bottom: -16px;
+  width: 1px;
+  background: var(--wxex-border);
+  content: '';
+}
+.skill-flow-steps > section > b {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border: 1px solid var(--wxex-border);
+  border-radius: 50%;
+  background: var(--wxex-bg-elevated);
+  font: 700 12px/1 var(--wxex-font);
+}
+.skill-flow-steps > section.active > b,
+.skill-flow-steps > section.done > b {
+  border-color: var(--wxex-brand);
+  background: var(--wxex-brand);
+  color: #fff;
+}
+.skill-flow-steps h3 {
+  margin: 1px 0 5px;
+  color: var(--wxex-text-primary);
+  font: 700 14px/20px var(--wxex-font);
+}
+.skill-flow-steps p {
+  margin: 3px 0;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.skill-flow-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+.skill-flow-actions button,
+.api-skill-details button {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-sm);
+  background: #fff;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 600 12px/18px var(--wxex-font);
+}
+.skill-flow-actions button:disabled,
+.api-skill-details button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.skill-target-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+.skill-target-selector button {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-sm);
+  background: #fff;
+  color: var(--wxex-text-secondary);
+  cursor: pointer;
+  font: 600 12px/18px var(--wxex-font);
+}
+.skill-target-selector button.active {
+  border-color: var(--wxex-brand);
+  background: var(--wxex-brand-soft);
+  color: var(--wxex-brand);
+}
+.api-skill-details {
+  margin-top: 16px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+}
+.api-skill-details summary {
+  padding: 12px 14px;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 700 13px/18px var(--wxex-font);
+}
+.api-skill-details > dl,
+.api-skill-details > div {
+  margin: 0;
+  padding: 0 14px 14px;
+}
+.api-skill-details dl div {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 8px;
+  padding: 4px 0;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-skill-details dd {
+  margin: 0;
+  color: var(--wxex-text-primary);
+}
+.api-skill-more {
+  position: relative;
+}
+.api-skill-more summary {
+  display: grid;
+  min-height: 32px;
+  place-items: center;
+  padding: 0 11px;
+  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: 600 12px/18px var(--wxex-font);
+  list-style: none;
+}
+.api-skill-more[open] > button {
+  position: absolute;
+  z-index: 2;
+  top: 36px;
+  right: 0;
+  width: 170px;
+  padding: 9px 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-sm);
+  background: #fff;
+  color: var(--wxex-text-primary);
+  box-shadow: var(--wxex-shadow-popover);
+  font: 12px/18px var(--wxex-font);
+  text-align: left;
+}
+.api-section-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.api-section-heading > span {
+  color: var(--wxex-text-muted);
+  font: 12px/18px var(--wxex-font);
+}
+.api-endpoint-table {
+  margin-top: 12px;
+  overflow: hidden;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+}
+.api-endpoint-head,
+.api-endpoint-row {
+  display: grid;
+  grid-template-columns: 72px minmax(128px, 1.1fr) minmax(150px, 1.2fr) 90px;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 14px;
+}
+.api-endpoint-head {
+  background: #f1f4f2;
+  color: var(--wxex-text-secondary);
+  font: 700 12px/18px var(--wxex-font);
+}
+.api-endpoint-row {
+  min-height: 54px;
+  border-top: 1px solid var(--wxex-border);
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-endpoint-row.active {
+  background: #f7faf8;
+}
+.api-endpoint-row code {
+  color: var(--wxex-text-primary);
+  font:
+    12px/18px ui-monospace,
+    monospace;
+}
+.api-endpoint-row small {
+  display: block;
+  color: var(--wxex-text-muted);
+}
+.api-endpoint-row > span:last-child {
+  display: flex;
+  gap: 4px;
+}
+.api-endpoint-row button {
+  min-height: 26px;
+  padding: 0 7px;
+  font-size: 11px;
+}
+.api-method {
+  display: inline-block;
+  color: var(--wxex-brand);
+  font:
+    700 11px/18px ui-monospace,
+    monospace;
+}
+.api-method.post {
+  color: var(--wxex-ai);
+}
+.api-request-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 12px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: #f5f8f6;
+  overflow: hidden;
+}
+.api-request-meta code {
+  overflow: hidden;
+  color: var(--wxex-text-primary);
+  font:
+    12px/18px ui-monospace,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.api-param-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.api-param-grid label,
+.api-json-input {
+  display: grid;
+  gap: 5px;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-param-grid label span b {
+  margin-left: 5px;
+  color: var(--wxex-danger);
+  font-size: 11px;
+}
+.api-param-grid input,
+.api-json-input textarea {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-sm);
+  outline: none;
+  background: #fff;
+  color: var(--wxex-text-primary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-param-grid input {
+  height: 34px;
+  padding: 0 9px;
+}
+.api-json-input {
+  margin-top: 10px;
+}
+.api-json-input textarea {
+  min-height: 180px;
+  padding: 10px;
+  resize: vertical;
+  font-family: ui-monospace, monospace;
+}
+.api-tester-actions {
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+.api-inline-error {
+  margin: 10px 0 0;
+  padding: 8px 10px;
+  border: 1px solid rgba(200, 90, 90, 0.35);
+  border-radius: var(--wxex-radius-sm);
+  background: #fff4f4;
+  color: var(--wxex-danger);
+  font: 12px/18px var(--wxex-font);
+}
+.api-runtime-panel {
+  border-left: 1px solid var(--wxex-border);
+  background: var(--wxex-bg-main);
+  overflow: hidden;
+}
+.api-runtime-scroll {
+  height: 100%;
+  overflow-y: auto;
+}
+.api-runtime-scroll section {
+  padding: 18px 16px;
+  border-bottom: 1px solid var(--wxex-border);
+}
+.api-runtime-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.api-runtime-title > span {
+  font: 700 12px/18px var(--wxex-font);
+}
+.api-runtime-title .ready {
+  color: var(--wxex-success);
+}
+.api-runtime-title .stopped {
+  color: var(--wxex-text-muted);
+}
+.api-runtime-scroll h3 {
+  margin: 0 0 12px;
+  color: var(--wxex-text-primary);
+  font: 700 14px/20px var(--wxex-font);
+}
+.api-runtime-scroll dl {
+  margin: 14px 0;
+}
+.api-runtime-scroll dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 5px 0;
+  font: 12px/18px var(--wxex-font);
+}
+.api-runtime-scroll dt {
+  color: var(--wxex-text-secondary);
+}
+.api-runtime-scroll dd {
+  margin: 0;
+  color: var(--wxex-text-primary);
+  text-align: right;
+}
+.warning-text {
+  color: var(--wxex-warning);
+}
+.api-runtime-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.api-runtime-actions button {
+  min-height: 30px;
+  padding: 0 6px;
+}
+.api-security-warning {
+  margin: 12px 16px;
+  padding: 9px 10px;
+  border-left: 3px solid var(--wxex-warning);
+  background: #fff8ec;
+  color: #915d1e;
+  font: 12px/18px var(--wxex-font);
+}
+.api-response-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--wxex-text-primary);
+  font:
+    12px/18px ui-monospace,
+    monospace;
+}
+.api-runtime-scroll pre {
+  max-height: 180px;
+  overflow: auto;
+  margin: 10px 0 8px;
+  padding: 10px;
+  border-radius: var(--wxex-radius-sm);
+  background: #1f2824;
+  color: #cde7dc;
+  font:
+    11px/16px ui-monospace,
+    monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.api-response-meta,
+.api-empty-text {
+  margin: 0 0 9px;
+  color: var(--wxex-text-muted);
+  font: 11px/17px var(--wxex-font);
+}
+.api-history {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.api-history li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--wxex-border);
+}
+.api-history span {
+  overflow: hidden;
+  color: var(--wxex-text-primary);
+  font:
+    11px/17px ui-monospace,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.api-history b {
+  font: 700 11px/17px var(--wxex-font);
+}
+.api-history small {
+  grid-column: 1 / -1;
+  color: var(--wxex-text-muted);
+  font: 11px/16px var(--wxex-font);
+}
+.api-privacy {
+  background: #f5f8f6;
+}
+.api-privacy p {
+  margin: 0;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.api-markdown-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(32, 39, 36, 0.24);
+}
+.api-markdown-overlay > div {
+  display: flex;
+  width: min(820px, 100%);
+  flex-direction: column;
+  min-height: 0;
+  padding: 14px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-lg);
+  background: #fff;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
+}
+.api-markdown-overlay header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.api-markdown-overlay header > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.api-markdown-overlay header span {
+  color: var(--wxex-text-muted);
+  font: 12px/18px var(--wxex-font);
+}
+.api-markdown-overlay button {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-sm);
+  background: #fff;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+}
+.api-markdown-overlay pre,
+.skill-markdown-preview {
+  min-height: 0;
+  overflow: auto;
+  margin: 14px 0 0;
+  white-space: pre-wrap;
+  color: var(--wxex-text-primary);
+  font: 12px/19px var(--wxex-font);
+}
+.skill-markdown-preview h1 {
+  font-size: 20px;
+}
+.skill-markdown-preview h2 {
+  margin-top: 18px;
+  font-size: 16px;
+}
+.skill-markdown-preview p {
+  margin: 6px 0;
+}
+.skill-markdown-preview li {
+  margin-left: 18px;
+}

src/renderer/src/styles/archive.scss

@@ -1,10 +1,10 @@
 .archive-jump-target-group {
   z-index: 2;
-}
 
-.archive-jump-message {
+  .archive-jump-message {
-  z-index: 1;
+    z-index: 1;
-  animation: archive-jump-flash 0.72s ease-in-out 2;
+    animation: archive-jump-flash 0.72s ease-in-out 2;
+  }
 }
 
 @keyframes archive-jump-flash {
@@ -20,9 +20,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .archive-jump-message {
+  .archive-jump-target-group {
-    outline: 3px solid rgba(38, 128, 103, 0.58);
+    .archive-jump-message {
-    outline-offset: 5px;
+      outline: 3px solid rgba(38, 128, 103, 0.58);
-    animation: none;
+      outline-offset: 5px;
+      animation: none;
+    }
   }
 }

src/renderer/src/styles/conversation.scss

@@ -0,0 +1,523 @@
+.conversation-sidebar {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex: 0 0 auto;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--wxex-border);
+  background: var(--wxex-bg-sidebar);
+  color: var(--wxex-text-primary);
+}
+
+.conversation-sidebar-header {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 16px 14px 12px;
+  border-bottom: 1px solid var(--wxex-border);
+  -webkit-app-region: drag;
+}
+
+.conversation-sidebar-title-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+
+  h2 {
+    margin: 0;
+    color: var(--wxex-text-primary);
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+  }
+
+  span {
+    color: var(--wxex-text-muted);
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+  }
+}
+
+.conversation-search {
+  box-sizing: border-box;
+  display: flex;
+  height: 34px;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  padding: 0 10px;
+  color: var(--wxex-text-muted);
+  -webkit-app-region: no-drag;
+
+  &:focus-within {
+    border-color: rgba(36, 122, 99, 0.58);
+    color: var(--wxex-brand);
+  }
+
+  input {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--wxex-text-primary);
+    font: 13px/18px var(--wxex-font);
+
+    &::placeholder {
+      color: var(--wxex-text-muted);
+    }
+  }
+}
+
+.conversation-search-icon {
+  width: 17px;
+  height: 17px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+}
+
+.conversation-search-icon svg {
+  width: 17px;
+  height: 17px;
+}
+
+.conversation-search-icon circle,
+.conversation-search-icon path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.conversation-date-range {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 10px;
+  -webkit-app-region: no-drag;
+}
+
+.conversation-date-range-button {
+  box-sizing: border-box;
+  height: 30px;
+  min-width: 0;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-text-secondary);
+  cursor: pointer;
+  font: 12px/16px var(--wxex-font);
+  white-space: nowrap;
+
+  &:hover {
+    border-color: rgba(36, 122, 99, 0.28);
+    color: var(--wxex-text-primary);
+  }
+
+  &.active {
+    border-color: var(--wxex-brand);
+    background: var(--wxex-brand);
+    color: #ffffff;
+    font-weight: 600;
+  }
+}
+
+.conversation-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 8px 12px;
+}
+
+.conversation-virtual-content {
+  position: relative;
+  width: 100%;
+}
+
+.conversation-virtual-row {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.conversation-section + .conversation-section {
+  margin-top: 6px;
+}
+
+.conversation-section-header {
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  border-radius: var(--wxex-radius-sm);
+  background: transparent;
+  color: var(--wxex-text-secondary);
+  cursor: pointer;
+  font: 600 12px/16px var(--wxex-font);
+  padding: 0 8px;
+  text-align: left;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.48);
+    color: var(--wxex-text-primary);
+  }
+}
+
+.conversation-section-chevron {
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  path {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+
+.conversation-section-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conversation-section-list {
+  position: relative;
+  overflow: visible;
+}
+
+.export-config-scroll > .export-section:not(.export-format-top):has(.export-format-grid) {
+  display: none;
+}
+
+.conversation-section-virtual-content {
+  position: relative;
+  width: 100%;
+}
+
+.conversation-section-virtual-row {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 58px;
+}
+
+.conversation-section-empty {
+  padding: 10px 12px 12px 28px;
+  color: var(--wxex-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.conversation-item {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 0;
+  border-radius: var(--wxex-radius-md);
+  background: transparent;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font-family: var(--wxex-font);
+  padding: 8px 10px 8px 13px;
+  text-align: left;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.56);
+  }
+
+  &.active {
+    background: var(--wxex-brand-soft);
+
+    .conversation-item-active-mark {
+      background: var(--wxex-brand);
+    }
+  }
+}
+
+.conversation-item-active-mark {
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: 0;
+  width: 3px;
+  border-radius: 0 999px 999px 0;
+  background: transparent;
+}
+
+.conversation-item-avatar {
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  overflow: hidden;
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-brand);
+  font-size: 14px;
+  font-weight: 700;
+
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+}
+
+.conversation-item-body {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.conversation-item-name {
+  overflow: hidden;
+  color: var(--wxex-text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conversation-item-meta {
+  overflow: hidden;
+  color: var(--wxex-text-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.conversation-sidebar-account {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  border-top: 1px solid var(--wxex-border);
+  padding: 10px;
+}
+
+.conversation-sidebar-account .account-summary {
+  min-height: 58px;
+  padding: 8px;
+}
+
+.conversation-sidebar-account .account-summary-text {
+  flex: 1;
+}
+
+.sidebar {
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  flex-shrink: 0;
+  /* Prevent shrinking */
+}
+
+.sidebar-header {
+  flex: 0 0 auto;
+  padding: 10px;
+  border-bottom: 1px solid var(--border-color);
+  -webkit-app-region: drag;
+}
+
+.sidebar-footer {
+  padding: 10px;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.sidebar-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #666;
+
+  &:hover {
+    color: #333;
+  }
+}
+
+.sidebar-status {
+  color: #07c160;
+  font-size: 12px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  -webkit-app-region: no-drag;
+}
+
+.date-range-selector {
+  display: flex;
+  gap: 5px;
+  margin-top: 8px;
+  justify-content: space-between;
+}
+
+.range-btn {
+  padding: 2px 6px;
+  font-size: 10px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  color: #666;
+  flex: 1;
+  text-align: center;
+
+  &.active {
+    background: #07c160;
+    color: #fff;
+    border-color: #07c160;
+  }
+}
+
+.contact-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.section-header {
+  padding: 8px 10px;
+  background-color: #f0f0f0;
+  font-size: 12px;
+  color: #666;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  user-select: none;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+
+  .arrow {
+    margin-right: 5px;
+    font-size: 10px;
+    width: 12px;
+  }
+}
+
+.section-empty {
+  padding: 10px 14px 12px 27px;
+  color: #888;
+  font-size: 12px;
+}
+
+.contact-item {
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--sidebar-hover);
+  }
+
+  &.active {
+    background-color: var(--sidebar-active);
+  }
+}
+
+.contact-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #ccc;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #fff;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.message-avatar {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.contact-info {
+  flex: 1;
+  overflow: hidden;
+}
+
+.contact-name {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.resizer {
+  width: 4px;
+  cursor: col-resize;
+  background-color: transparent;
+  border-right: 1px solid transparent;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s;
+  z-index: 10;
+}
+
+.resizer:hover,
+.resizer:active {
+  border-color: rgba(36, 122, 99, 0.22);
+  background-color: rgba(36, 122, 99, 0.06);
+}

src/renderer/src/styles/export.scss

@@ -0,0 +1,951 @@
+/* Export workspace */
+.export-workspace {
+  display: grid;
+  grid-template-columns: 292px minmax(520px, 1fr) 360px;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  background: var(--wxex-bg-main);
+}
+
+.export-contact-panel,
+.export-config-panel,
+.export-preview-panel {
+  min-width: 0;
+  min-height: 0;
+  background: var(--wxex-bg-elevated);
+}
+
+.export-contact-panel {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--wxex-border);
+  background: var(--wxex-bg-sidebar);
+}
+
+.export-panel-header {
+  padding: 20px 16px 12px;
+  border-bottom: 1px solid var(--wxex-border);
+}
+
+.export-panel-title-row,
+.export-section-heading,
+.export-preview-heading,
+.export-action-bar,
+.export-target-path,
+.export-media-master,
+.export-account-summary {
+  display: flex;
+  align-items: center;
+}
+
+.export-panel-title-row {
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 14px;
+
+  h2 {
+    margin: 0;
+    color: var(--wxex-text-primary);
+    font-size: 17px;
+    font-weight: 700;
+  }
+}
+
+.export-count-badge {
+  padding: 3px 8px;
+  border-radius: 5px;
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-text-secondary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.export-search-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 7px;
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-text-muted);
+
+  input {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--wxex-text-primary);
+    font: 13px/20px var(--wxex-font);
+  }
+}
+
+.export-filter-tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3px;
+  margin-top: 12px;
+  padding: 3px;
+  border-radius: 7px;
+  background: #e3e9e5;
+
+  button {
+    border: 0;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--wxex-text-secondary);
+    cursor: pointer;
+    font: 600 12px/30px var(--wxex-font);
+
+    &.active {
+      background: var(--wxex-bg-elevated);
+      color: var(--wxex-brand);
+      box-shadow: 0 1px 2px rgba(32, 39, 36, 0.06);
+    }
+  }
+}
+
+.export-contact-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 0;
+}
+
+.export-contact-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 10px;
+  padding: 11px 16px;
+  border: 0;
+  border-left: 3px solid transparent;
+  background: transparent;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.58);
+  }
+
+  &.active {
+    border-left-color: var(--wxex-brand);
+    background: var(--wxex-brand-soft);
+  }
+}
+
+.export-contact-avatar,
+.export-account-avatar,
+.export-chat-avatar,
+.export-preview-avatar {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  overflow: hidden;
+  background: var(--wxex-brand-soft);
+  color: var(--wxex-brand);
+  font-weight: 700;
+}
+
+.export-contact-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 8px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.export-contact-copy,
+.export-account-summary > span:last-child {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+
+  strong {
+    overflow: hidden;
+    color: var(--wxex-text-primary);
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  small {
+    color: var(--wxex-text-muted);
+    font-size: 11px;
+  }
+}
+
+.export-account-summary {
+  small.ready {
+    color: var(--wxex-success);
+  }
+}
+
+.export-account-summary {
+  gap: 9px;
+  padding: 14px 16px;
+  border: 0;
+  border-top: 1px solid var(--wxex-border);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.export-account-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.export-config-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--wxex-bg-main);
+}
+
+.export-config-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 24px 28px 28px;
+}
+
+.export-config-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 26px;
+
+  h1 {
+    margin: 0;
+    color: var(--wxex-text-primary);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
+
+  p {
+    margin: 2px 0 0;
+    color: var(--wxex-text-secondary);
+    font-size: 13px;
+  }
+}
+.export-chat-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 10px;
+  font-size: 22px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.export-section {
+  margin-bottom: 25px;
+
+  h3 {
+    margin: 0 0 12px;
+    color: var(--wxex-text-primary);
+    font-size: 12px;
+    font-weight: 700;
+  }
+}
+.export-section-heading {
+  justify-content: space-between;
+  gap: 12px;
+
+  span {
+    color: var(--wxex-brand);
+    font-size: 12px;
+  }
+}
+
+.export-range-toggle {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+
+  button {
+    border: 0;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--wxex-text-secondary);
+    cursor: pointer;
+    font: 600 12px/30px var(--wxex-font);
+    border: 1px solid var(--wxex-border);
+    background: var(--wxex-bg-elevated);
+    line-height: 36px;
+
+    &.active {
+      border-color: var(--wxex-brand);
+      background: var(--wxex-brand);
+      color: #fff;
+      box-shadow: none;
+    }
+  }
+}
+
+.export-date-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #f0f3f0;
+
+  label {
+    display: grid;
+    gap: 5px;
+    color: var(--wxex-text-secondary);
+    font-size: 11px;
+  }
+
+  input {
+    width: 100%;
+    min-width: 0;
+    padding: 8px 9px;
+    border: 1px solid var(--wxex-border);
+    border-radius: 6px;
+    background: #fff;
+    color: var(--wxex-text-primary);
+    font: 13px/20px var(--wxex-font);
+  }
+}
+
+.export-kind-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px 20px;
+  padding: 14px;
+  border-radius: 8px;
+  background: #f0f3f0;
+}
+.export-check-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  color: var(--wxex-text-primary);
+  font-size: 12px;
+  cursor: pointer;
+
+  input {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--wxex-brand);
+  }
+
+  &.unsupported {
+    color: var(--wxex-text-muted);
+    cursor: not-allowed;
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+}
+.export-unsupported-hint {
+  display: inline-grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  border: 1px solid #c57923;
+  border-radius: 50%;
+  color: #a85e13;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+.export-name-mode-grid {
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 8px;
+  background: #f0f3f0;
+}
+.export-name-mode-option {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1;
+  min-height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--wxex-text-primary);
+  font-size: 12px;
+  cursor: pointer;
+
+  input {
+    accent-color: var(--wxex-brand);
+  }
+}
+
+.export-media-master {
+  justify-content: space-between;
+  gap: 12px;
+  padding: 13px 14px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--wxex-text-primary);
+  font-size: 12px;
+
+  input {
+    width: 17px;
+    height: 17px;
+    accent-color: var(--wxex-brand);
+  }
+}
+.export-media-options {
+  display: grid;
+  gap: 2px;
+  margin-top: 8px;
+  padding: 9px 13px;
+  border-radius: 8px;
+  background: #f0f3f0;
+
+  &.disabled {
+    opacity: 0.52;
+  }
+}
+.export-resource-statuses {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 9px;
+
+  span {
+    padding: 3px 7px;
+    border-radius: 4px;
+    background: var(--wxex-brand-soft);
+    color: var(--wxex-success);
+    font-size: 10px;
+  }
+}
+.export-helper-text {
+  margin: 9px 0 0;
+  color: var(--wxex-text-muted);
+  font-size: 11px;
+}
+
+.export-format-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+
+  button {
+    min-height: 78px;
+    border: 1px solid var(--wxex-border);
+    border-radius: 8px;
+    background: #fff;
+    color: var(--wxex-text-primary);
+    cursor: pointer;
+
+    &.active {
+      border: 2px solid var(--wxex-brand);
+      background: #f2f8f5;
+    }
+  }
+
+  strong {
+    display: block;
+    font-size: 13px;
+  }
+
+  small {
+    display: block;
+    margin-top: 6px;
+    color: var(--wxex-success);
+    font-size: 10px;
+  }
+}
+.export-html-options {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 11px 13px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 8px;
+  background: #f0f3f0;
+  color: var(--wxex-text-primary);
+  font-size: 12px;
+
+  input {
+    accent-color: var(--wxex-brand);
+  }
+}
+
+.export-save-section {
+  display: grid;
+  gap: 12px;
+
+  > label {
+    display: grid;
+    gap: 5px;
+    color: var(--wxex-text-secondary);
+    font-size: 11px;
+
+    input {
+      width: 100%;
+      min-width: 0;
+      padding: 8px 9px;
+      border: 1px solid var(--wxex-border);
+      border-radius: 6px;
+      outline: 0;
+      background: #fff;
+      color: var(--wxex-text-primary);
+      font: 13px/20px var(--wxex-font);
+    }
+  }
+}
+.export-target-path {
+  gap: 10px;
+  padding: 9px 10px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--wxex-text-secondary);
+  font-size: 11px;
+
+  strong {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--wxex-text-primary);
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  button {
+    padding: 5px 8px;
+    border: 1px solid var(--wxex-border);
+    border-radius: 5px;
+    background: #fff;
+    color: var(--wxex-text-primary);
+    cursor: pointer;
+    font: 11px var(--wxex-font);
+  }
+}
+
+.export-action-bar {
+  flex: 0 0 58px;
+  gap: 8px;
+  padding: 0 22px;
+  border-top: 1px solid var(--wxex-border);
+  background: #fff;
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+}
+.export-ready-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--wxex-success);
+
+  &.completed {
+    background: var(--wxex-brand);
+  }
+}
+.export-target-summary {
+  flex: 1;
+  min-width: 0;
+  margin-left: 14px;
+  overflow: hidden;
+  color: var(--wxex-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.export-reset-button {
+  border: 0;
+  background: transparent;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 600 12px var(--wxex-font);
+}
+.export-primary-button {
+  min-width: 132px;
+  padding: 10px 16px;
+  border: 0;
+  border-radius: 7px;
+  background: var(--wxex-brand);
+  color: #fff;
+  cursor: pointer;
+  font: 700 12px var(--wxex-font);
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+}
+
+.export-preview-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-left: 1px solid var(--wxex-border);
+  background: #fbfcfb;
+}
+.export-preview-heading {
+  justify-content: space-between;
+  flex: 0 0 52px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--wxex-border);
+  color: var(--wxex-text-primary);
+  font-size: 12px;
+
+  span {
+    color: var(--wxex-text-muted);
+    font-size: 11px;
+  }
+}
+.export-message-preview {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px 14px;
+}
+.export-preview-date {
+  width: fit-content;
+  margin: 0 auto 18px;
+  padding: 4px 9px;
+  border-radius: 10px;
+  background: #e9eeeb;
+  color: var(--wxex-text-secondary);
+  font-size: 10px;
+}
+.export-preview-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: min(100%, 620px);
+  margin: 0 auto 15px;
+
+  &.mine {
+    flex-direction: row-reverse;
+
+    .export-preview-bubble {
+      background: #95ec69;
+    }
+  }
+
+  &.system {
+    justify-content: center;
+    flex-direction: row;
+
+    .export-preview-avatar {
+      display: none;
+    }
+
+    .export-preview-bubble {
+      max-width: 92%;
+      padding: 5px 10px;
+      border: 0;
+      border-radius: 5px;
+      background: #e9eeeb;
+      color: var(--wxex-text-muted);
+      font-size: 11px;
+      text-align: center;
+      box-shadow: none;
+
+      small {
+        display: none;
+      }
+    }
+  }
+}
+.export-preview-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  font-size: 11px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.export-preview-bubble {
+  max-width: 78%;
+  padding: 9px 10px;
+  border-radius: 8px;
+  background: #fff;
+  color: var(--wxex-text-primary);
+  font-size: 12px;
+  line-height: 18px;
+  box-shadow: 0 1px 2px rgba(32, 39, 36, 0.05);
+
+  small {
+    display: block;
+    margin-bottom: 3px;
+    color: var(--wxex-text-muted);
+    font-size: 10px;
+  }
+}
+.export-preview-stats {
+  flex: 0 0 auto;
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+  border-top: 1px solid var(--wxex-border);
+}
+
+.export-task-center-button {
+  align-self: flex-start;
+  margin: 0 0 12px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 6px;
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-brand);
+  cursor: pointer;
+  padding: 7px 11px;
+  font: 600 12px/18px var(--wxex-font);
+}
+
+.export-task-center {
+  margin: 0 0 18px;
+  padding: 12px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 8px;
+  background: var(--wxex-bg-elevated);
+}
+
+.export-task-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 0;
+  border-top: 1px solid var(--wxex-border);
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+
+  &:first-of-type {
+    margin-top: 8px;
+  }
+
+  > span:first-child {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  strong,
+  small {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  strong {
+    color: var(--wxex-text-primary);
+  }
+
+  button {
+    border: 1px solid var(--wxex-border);
+    border-radius: 5px;
+    background: transparent;
+    color: var(--wxex-text-secondary);
+    cursor: pointer;
+    padding: 4px 8px;
+  }
+}
+
+.export-task-progress {
+  position: relative;
+  width: 110px;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--wxex-border);
+
+  i {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--wxex-brand);
+  }
+
+  b {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    color: var(--wxex-text-muted);
+    font-size: 10px;
+    font-weight: 500;
+  }
+}
+.export-preview-panel .export-preview-stats:not(.export-preview-real-stats) {
+  display: none;
+}
+.export-preview-stats span,
+.export-complete-summary span {
+  display: flex;
+  justify-content: space-between;
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+}
+.export-preview-stats strong,
+.export-complete-summary strong {
+  color: var(--wxex-text-primary);
+  font-weight: 600;
+}
+
+.export-job-state {
+  display: grid;
+  align-content: center;
+  gap: 12px;
+  height: 100%;
+  padding: 28px;
+  text-align: center;
+
+  h2 {
+    margin: 0;
+    color: var(--wxex-text-primary);
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 0;
+    color: var(--wxex-text-secondary);
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  ol {
+    display: grid;
+    gap: 10px;
+    margin: 8px 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+  }
+
+  li {
+    color: var(--wxex-text-muted);
+    font-size: 12px;
+
+    &::before {
+      display: inline-grid;
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      place-items: center;
+      border: 1px solid var(--wxex-border);
+      border-radius: 50%;
+      content: '';
+      vertical-align: -3px;
+    }
+
+    &.done {
+      color: var(--wxex-success);
+
+      &::before {
+        border-color: var(--wxex-success);
+        background: var(--wxex-success);
+        content: '✓';
+        color: #fff;
+        font-size: 10px;
+      }
+    }
+
+    &.current {
+      color: var(--wxex-text-primary);
+      font-weight: 600;
+
+      &::before {
+        border-color: var(--wxex-brand);
+        background: var(--wxex-brand);
+        box-shadow: inset 0 0 0 4px #fff;
+      }
+    }
+  }
+
+  > strong {
+    color: var(--wxex-text-secondary);
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+.export-progress-bar {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #e2e9e4;
+
+  span {
+    display: block;
+    height: 100%;
+    border-radius: 4px;
+    background: var(--wxex-brand);
+    transition: width 0.2s ease;
+  }
+}
+.export-job-state > strong {
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+}
+.export-cancel-button,
+.export-open-folder-button {
+  padding: 10px 14px;
+  border: 1px solid var(--wxex-border);
+  border-radius: 7px;
+  background: #fff;
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 600 12px var(--wxex-font);
+}
+.export-success-icon {
+  width: 58px;
+  height: 58px;
+  margin: 0 auto 4px;
+  border: 5px solid var(--wxex-brand-soft);
+  border-radius: 50%;
+  background: #fff;
+  color: var(--wxex-brand);
+  font-size: 30px;
+  line-height: 48px;
+}
+.export-complete-summary {
+  display: grid;
+  gap: 12px;
+  margin: 12px 0;
+  padding: 14px;
+  border-radius: 8px;
+  background: #eef3ef;
+  text-align: left;
+}
+
+@media (max-width: 1100px) {
+  .export-workspace {
+    grid-template-columns: 248px minmax(460px, 1fr);
+  }
+  .export-preview-panel {
+    display: none;
+  }
+}

src/renderer/src/styles/foundation.scss

@@ -0,0 +1,348 @@
+:root {
+  --bg-color: #f5f5f5;
+  --sidebar-bg: #e7e7e7;
+  --sidebar-hover: #d6d6d6;
+  --sidebar-active: #c6c6c6;
+  --chat-bg: #f5f5f5;
+  --message-bg-user: #95ec69;
+  --message-bg-other: #ffffff;
+  --text-color: #000000;
+  --border-color: #dcdcdc;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--wxex-font);
+  background-color: var(--wxex-bg-app);
+  color: var(--wxex-text-primary);
+  height: 100vh;
+  overflow: hidden;
+}
+
+#root {
+  height: 100%;
+  display: flex;
+}
+
+.app-shell {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--wxex-bg-app);
+}
+
+.app-primary-rail {
+  box-sizing: border-box;
+  width: var(--wxex-nav-width);
+  flex: 0 0 var(--wxex-nav-width);
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid var(--wxex-border);
+  background: var(--wxex-bg-sidebar);
+  padding: 12px 8px;
+  overflow: hidden;
+  -webkit-app-region: drag;
+}
+
+.app-brand {
+  box-sizing: border-box;
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  -webkit-app-region: no-drag;
+
+  img {
+    display: block;
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+  }
+}
+
+.primary-navigation {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  margin-top: 18px;
+  -webkit-app-region: no-drag;
+}
+
+.primary-nav-item {
+  width: 100%;
+  height: 58px;
+  flex: 0 0 58px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 0;
+  border-radius: var(--wxex-radius-md);
+  background: transparent;
+  color: var(--wxex-text-secondary);
+  cursor: pointer;
+  font-family: var(--wxex-font);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.46);
+    color: var(--wxex-text-primary);
+  }
+
+  &.active {
+    background: var(--wxex-brand-soft);
+    color: var(--wxex-brand);
+  }
+}
+
+.primary-nav-mark {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  path,
+  circle {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+
+.primary-nav-label {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.app-rail-account {
+  box-sizing: border-box;
+  width: 100%;
+  flex: 0 0 auto;
+  -webkit-app-region: no-drag;
+}
+
+.account-summary {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 0;
+  border-radius: var(--wxex-radius-md);
+  background: transparent;
+  color: var(--wxex-text-primary);
+  font-family: var(--wxex-font);
+  text-align: left;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.72);
+  }
+}
+
+.account-summary.compact {
+  justify-content: center;
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.account-summary-avatar {
+  box-sizing: border-box;
+  position: relative;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-brand);
+  font-size: 14px;
+  font-weight: 700;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.account-summary-status {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  width: 9px;
+  height: 9px;
+  border: 2px solid var(--wxex-bg-elevated);
+  border-radius: 999px;
+  background: var(--wxex-text-muted);
+
+  &.ready {
+    background: var(--wxex-success);
+  }
+}
+
+.account-summary:not(.compact) .account-summary-avatar .account-summary-status {
+  display: none;
+}
+
+.account-summary-text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.account-summary-name {
+  overflow: hidden;
+  color: var(--wxex-text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-summary-meta {
+  overflow: hidden;
+  color: var(--wxex-text-muted);
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-summary-state {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-summary-state-dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--wxex-text-muted);
+
+  &.ready {
+    background: var(--wxex-success);
+  }
+}
+
+.account-summary-settings {
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: var(--wxex-radius-sm);
+  background: transparent;
+  color: var(--wxex-text-muted);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--wxex-brand-soft);
+    color: var(--wxex-brand);
+  }
+
+  svg {
+    width: 17px;
+    height: 17px;
+  }
+
+  path {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+
+.app-shell-main {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  padding-top: var(--wxex-shell-content-top);
+  background: var(--wxex-bg-main);
+}
+
+.app-page-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  color: var(--wxex-text-secondary);
+  text-align: center;
+
+  h2 {
+    margin: 0 0 8px;
+    color: var(--wxex-text-primary);
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+  }
+
+  p {
+    margin: 0;
+    font-size: 13px;
+    line-height: 20px;
+  }
+}
+.app-page-placeholder-eyebrow {
+  margin-bottom: 8px;
+  color: var(--wxex-brand);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+
+.app-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  align-items: stretch;
+  overflow: hidden;
+}

src/renderer/src/styles/index.scss

@@ -0,0 +1,16 @@
+@use './_tokens';
+@use './_base';
+
+@use './foundation';
+@use './conversation';
+@use './chat';
+@use './rich-message';
+@use './shell-overlays';
+@use './reports-core';
+@use './settings';
+@use './api';
+@use './reports-templates';
+@use './export';
+@use './search';
+@use './archive';
+@use './settings-advanced';

src/renderer/src/styles/reports-templates.scss

@@ -0,0 +1,821 @@
+@media (max-width: 1100px) {
+  .api-center-layout {
+    grid-template-columns: minmax(0, 1fr) 280px;
+  }
+  .api-main-scroll {
+    padding: 18px;
+  }
+  .api-header-actions {
+    max-width: 260px;
+    justify-content: flex-end;
+  }
+  .api-endpoint-head,
+  .api-endpoint-row {
+    grid-template-columns: 56px minmax(110px, 1fr) minmax(100px, 1fr) 78px;
+    gap: 7px;
+    padding: 10px;
+  }
+  .api-flow {
+    overflow-x: auto;
+    justify-content: flex-start;
+  }
+}
+
+.report-history-list-title {
+  padding: 4px 4px 8px;
+  color: var(--wxex-text-secondary);
+  font: 700 13px/18px var(--wxex-font);
+}
+
+.report-history-group {
+  margin: 0 0 10px;
+}
+
+.report-history-group h3 {
+  margin: 0;
+  padding: 6px 4px;
+  color: var(--wxex-text-muted);
+  font: 700 12px/16px var(--wxex-font);
+}
+
+.report-history-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  gap: 10px;
+  padding: 10px 54px 10px 12px;
+  border: 0;
+  border-radius: var(--wxex-radius-md);
+  background: transparent;
+  color: var(--wxex-text-primary);
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--wxex-font);
+}
+
+.report-history-item:hover {
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.report-history-item.active {
+  background: var(--wxex-brand-soft);
+  color: var(--wxex-brand);
+}
+
+.report-history-item.active::before {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 3px;
+  border-radius: 4px;
+  background: var(--wxex-brand);
+  content: '';
+}
+
+.report-history-avatar {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-brand);
+  font: 700 14px/1 var(--wxex-font);
+}
+
+.report-history-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.report-history-text {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 2px;
+}
+
+.report-history-text b,
+.report-history-text small,
+.report-history-text em {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-history-text b {
+  color: inherit;
+  font: 600 13px/18px var(--wxex-font);
+}
+
+.report-history-text small,
+.report-history-text em {
+  color: var(--wxex-text-muted);
+  font: normal 12px/16px var(--wxex-font);
+}
+
+.report-history-delete {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  display: grid;
+  width: 38px;
+  height: 26px;
+  place-items: center;
+  border: 1px solid rgba(198, 72, 72, 0.22);
+  border-radius: var(--wxex-radius-sm);
+  background: rgba(198, 72, 72, 0.06);
+  color: #a64242;
+  cursor: pointer;
+  font: 600 12px/16px var(--wxex-font);
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: opacity 0.12s ease;
+}
+
+.report-history-item:hover .report-history-delete,
+.report-history-delete:focus {
+  opacity: 1;
+}
+
+.report-history-empty {
+  display: grid;
+  gap: 10px;
+  padding: 18px 8px;
+  color: var(--wxex-text-muted);
+  font: 13px/18px var(--wxex-font);
+}
+
+.report-history-empty button,
+.report-center-empty button {
+  justify-self: start;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--wxex-brand);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-brand);
+  color: #fff;
+  cursor: pointer;
+  font: 600 13px/18px var(--wxex-font);
+}
+
+.report-history-account {
+  flex: 0 0 auto;
+  padding: 12px;
+  border-top: 1px solid var(--wxex-border);
+}
+
+.report-delete-confirm {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: grid;
+  place-items: center;
+  background: rgba(32, 39, 36, 0.28);
+}
+
+.report-delete-confirm-card {
+  display: grid;
+  width: min(360px, calc(100vw - 48px));
+  gap: 12px;
+  padding: 18px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-lg);
+  background: var(--wxex-bg-main);
+  box-shadow: var(--wxex-shadow-popover);
+}
+
+.report-delete-confirm-card h2 {
+  margin: 0;
+  color: var(--wxex-text-primary);
+  font: 700 18px/24px var(--wxex-font);
+}
+
+.report-delete-confirm-card p {
+  margin: 0;
+  color: var(--wxex-text-secondary);
+  font: 13px/20px var(--wxex-font);
+}
+
+.report-delete-confirm-card > div {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.report-delete-confirm-card button {
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 600 13px/18px var(--wxex-font);
+}
+
+.report-delete-confirm-card button.danger {
+  border-color: #a64242;
+  background: #a64242;
+  color: #fff;
+}
+
+.report-delete-error {
+  color: #a64242 !important;
+}
+
+.report-viewer {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background: #f2f1ee;
+}
+
+.report-viewer-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 22px 12px;
+  border-bottom: 1px solid var(--wxex-border);
+  background: var(--wxex-bg-main);
+}
+
+.report-viewer-header h1 {
+  font: 700 20px/27px var(--wxex-font);
+}
+
+.report-viewer-toolbar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.report-viewer-toolbar button,
+.report-zoom-bar button,
+.report-more-popover button,
+.report-settings-section button {
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  color: var(--wxex-text-primary);
+  cursor: pointer;
+  font: 600 13px/18px var(--wxex-font);
+}
+
+.report-viewer-toolbar button.primary {
+  border-color: var(--wxex-ai);
+  background: var(--wxex-ai);
+  color: #fff;
+}
+
+.report-viewer-toolbar button:disabled {
+  color: var(--wxex-text-muted);
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+
+.report-more-menu {
+  position: relative;
+}
+
+.report-more-popover {
+  position: absolute;
+  top: 38px;
+  right: 0;
+  z-index: 8;
+  min-width: 128px;
+  padding: 6px;
+  border: 1px solid var(--wxex-border);
+  border-radius: var(--wxex-radius-md);
+  background: var(--wxex-bg-elevated);
+  box-shadow: var(--wxex-shadow-popover);
+}
+
+.report-more-popover button {
+  width: 100%;
+  border: 0;
+  text-align: left;
+}
+
+.report-viewer-status {
+  flex: 0 0 auto;
+  padding: 8px 22px;
+  border-bottom: 1px solid var(--wxex-border);
+  background: var(--wxex-ai-soft);
+  color: var(--wxex-ai);
+  font: 12px/18px var(--wxex-font);
+}
+
+.report-viewer-stage {
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  padding: 22px;
+}
+
+.report-canvas {
+  width: max-content;
+  margin: 0 auto;
+  padding: 0;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(32, 39, 36, 0.14);
+}
+
+.report-canvas img {
+  display: block;
+  max-width: none;
+  height: auto;
+}
+
+.report-zoom-bar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 48px;
+  border-top: 1px solid var(--wxex-border);
+  background: var(--wxex-bg-main);
+}
+
+.report-zoom-bar span {
+  min-width: 48px;
+  color: var(--wxex-text-secondary);
+  text-align: center;
+  font: 12px/18px var(--wxex-font);
+}
+
+.report-center-empty {
+  display: grid;
+  align-self: center;
+  justify-self: center;
+  max-width: 360px;
+  gap: 12px;
+  margin: auto;
+  color: var(--wxex-text-secondary);
+  text-align: center;
+}
+
+.report-center-empty-icon {
+  display: grid;
+  width: 54px;
+  height: 54px;
+  place-items: center;
+  justify-self: center;
+  border: 1px solid rgba(104, 110, 220, 0.18);
+  border-radius: 18px;
+  background: var(--wxex-ai-soft);
+  color: var(--wxex-ai);
+}
+
+.report-center-empty-icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.report-center-empty-icon path {
+  fill: currentColor;
+}
+
+.report-center-empty h2 {
+  margin: 0;
+  color: var(--wxex-text-primary);
+  font: 700 18px/24px var(--wxex-font);
+}
+
+.report-center-empty p {
+  margin: 0;
+  font: 13px/20px var(--wxex-font);
+}
+
+.report-center-empty button {
+  justify-self: center;
+}
+
+.report-settings-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  overflow-y: auto;
+  border-left: 1px solid var(--wxex-border);
+  background: #f7f9f8;
+}
+
+.report-settings-panel header {
+  flex: 0 0 auto;
+  padding: 20px 18px 14px;
+  border-bottom: 1px solid var(--wxex-border);
+}
+
+.report-settings-panel header h2 {
+  font: 700 16px/22px var(--wxex-font);
+}
+
+.report-settings-section {
+  margin: 0;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--wxex-border);
+}
+
+.report-settings-section h3 {
+  margin: 0 0 8px;
+  color: var(--wxex-text-primary);
+  font: 700 14px/20px var(--wxex-font);
+}
+
+.report-settings-section p,
+.report-settings-section code {
+  margin: 0 0 10px;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+
+.report-settings-section code {
+  display: block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  padding: 8px;
+  border-radius: var(--wxex-radius-sm);
+  background: var(--wxex-bg-elevated);
+}
+
+.report-settings-section.muted {
+  color: var(--wxex-text-muted);
+}
+
+.report-export-list {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.report-export-list div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+
+.report-export-list b {
+  min-width: 0;
+  color: var(--wxex-text-primary);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.report-generation-log {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.report-generation-log li {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 8px;
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+
+.report-generation-log li > span {
+  color: var(--wxex-brand);
+  font-weight: 700;
+}
+
+.report-generation-log b,
+.report-generation-log time,
+.report-generation-log small {
+  display: block;
+}
+
+.report-generation-log b {
+  color: var(--wxex-text-primary);
+  font-weight: 600;
+}
+
+.report-generation-log time {
+  color: var(--wxex-text-muted);
+  font-size: 11px;
+}
+
+.report-generation-log small {
+  color: var(--wxex-text-secondary);
+  font: 600 11px/16px var(--wxex-font);
+}
+
+@media (max-width: 1120px) {
+  .report-center-page {
+    grid-template-columns: 268px minmax(360px, 1fr) 280px;
+  }
+
+  .report-viewer-header {
+    flex-direction: column;
+  }
+}
+
+/* ============================================================ */
+/* 日报模板选择器 + 预览器                                       */
+/* ============================================================ */
+.report-section-desc {
+  margin: 0 0 12px;
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.report-template-list {
+  display: grid;
+  gap: 10px;
+}
+
+.report-template-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1.5px solid var(--wxex-border);
+  border-radius: 12px;
+  background: #fff;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.report-template-item.active {
+  border-color: var(--wxex-primary, #07c160);
+  background: #f0fbf3;
+}
+
+.report-template-item.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.report-template-item > label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.report-template-item input[type='radio'] {
+  accent-color: var(--wxex-primary, #07c160);
+}
+
+.report-template-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.report-template-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--wxex-text-primary, #1f2933);
+}
+
+.report-template-tagline {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--wxex-text-secondary, #485465);
+  line-height: 1.5;
+}
+
+.report-template-preview-btn {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 8px;
+  border: 1px solid var(--wxex-border);
+  background: #fff;
+  color: var(--wxex-text-primary, #1f2933);
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+}
+
+.report-template-preview-btn:hover {
+  background: var(--wxex-primary, #07c160);
+  color: #fff;
+  border-color: var(--wxex-primary, #07c160);
+}
+
+/* 预览遮罩 */
+.report-template-preview-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  padding: 20px;
+}
+
+.report-template-preview-card {
+  background: #f3f5f7;
+  border-radius: 18px;
+  padding: 18px;
+  width: min(380px, 100%);
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 16px 60px rgba(15, 23, 42, 0.25);
+}
+
+.report-template-preview-card h4 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.report-template-preview-card p.muted {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--wxex-text-secondary, #485465);
+  line-height: 1.5;
+}
+
+.report-template-preview-frame {
+  display: grid;
+  gap: 8px;
+  background: #fff;
+  border-radius: 14px;
+  padding: 12px;
+  border: 1px solid var(--wxex-border);
+}
+
+.fake-card {
+  background: #f7faf9;
+  border-radius: 10px;
+  padding: 10px 12px;
+}
+
+.fake-hero {
+  background: linear-gradient(135deg, #edf9f1 0%, #f7fbf8 100%);
+}
+
+.fake-title {
+  font-size: 14px;
+  font-weight: 800;
+  color: #076c39;
+}
+
+.fake-sub {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #485465;
+}
+
+.fake-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fake-bar {
+  width: 4px;
+  height: 14px;
+  border-radius: 2px;
+  background: var(--wxex-primary, #07c160);
+}
+
+.fake-section-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #1f2933;
+}
+
+.report-template-preview-close {
+  margin-top: 14px;
+  width: 100%;
+  padding: 10px;
+  border-radius: 10px;
+  border: none;
+  background: var(--wxex-primary, #07c160);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.settings-auto-login-card {
+  padding: 18px 20px;
+}
+.settings-auto-login-card label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  cursor: pointer;
+}
+.settings-auto-login-card label > span {
+  display: grid;
+  gap: 4px;
+}
+.settings-auto-login-card b {
+  color: var(--wxex-text-primary);
+  font: 700 13px/19px var(--wxex-font);
+}
+.settings-auto-login-card small {
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.settings-auto-login-card input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--wxex-brand);
+}
+.settings-recall-card {
+  padding: 18px 20px;
+}
+.settings-recall-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
+  gap: 18px;
+  align-items: center;
+}
+.settings-recall-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-width: 0;
+  cursor: pointer;
+}
+.settings-recall-option span {
+  display: grid;
+  gap: 4px;
+}
+.settings-recall-option b {
+  color: var(--wxex-text-primary);
+  font: 700 13px/19px var(--wxex-font);
+}
+.settings-recall-option small {
+  color: var(--wxex-text-secondary);
+  font: 12px/18px var(--wxex-font);
+}
+.settings-recall-option input {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  accent-color: var(--wxex-brand);
+}
+.settings-recall-notice {
+  display: grid;
+  gap: 3px;
+  padding-left: 14px;
+  border-left: 2px solid #e5b45f;
+  color: #765326;
+  font: 12px/18px var(--wxex-font);
+}
+.settings-recall-notice strong {
+  font-weight: 700;
+}
+.settings-recall-notice span {
+  color: #8a6a3e;
+}
+.api-upload-test-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0;
+}
+.api-upload-test-row button {
+  min-height: 32px;
+  padding: 0 12px;
+  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: 600 12px/18px var(--wxex-font);
+}
+.api-upload-test-row span {
+  color: var(--wxex-text-muted);
+  font: 11px/17px var(--wxex-font);
+}
+

src/renderer/src/styles/rich-message.scss

@@ -0,0 +1,331 @@
+/* Voice Player */
+.voice-message {
+  cursor: pointer;
+  user-select: none;
+}
+
+.voice-loading {
+  opacity: 0.6;
+}
+
+.voice-error {
+  opacity: 1;
+}
+
+.voice-loading-text {
+  font-size: 12px;
+  color: var(--wxex-text-muted);
+}
+
+.voice-error-text {
+  color: var(--wxex-text-secondary);
+}
+
+.voice-duration {
+  font-size: 12px;
+  margin-left: 4px;
+  min-width: 32px;
+}
+
+.voice-icon.playing {
+  background: rgba(36, 122, 99, 0.18);
+}
+
+/* Rich Message Bubbles */
+.location-message {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  min-width: 180px;
+  max-width: 280px;
+
+  .location-icon {
+    box-sizing: border-box;
+    min-width: 34px;
+    padding: 4px 6px;
+    border-radius: var(--wxex-radius-sm);
+    background: var(--wxex-brand-soft);
+    color: var(--wxex-brand);
+    font-size: 12px;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  .location-info {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .location-name {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .location-label {
+    font-size: 12px;
+    color: var(--wxex-text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .location-coords {
+    font-size: 11px;
+    color: var(--wxex-text-muted);
+    margin-top: 2px;
+  }
+}
+
+.wechat-message-row.mine {
+  .location-message {
+    flex-direction: row-reverse;
+  }
+}
+
+.card-message {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 160px;
+  max-width: 240px;
+}
+
+.card-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background: #07c160;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.card-info {
+  flex: 1;
+  overflow: hidden;
+}
+
+.card-nickname {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-username {
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    color: #07c160;
+  }
+}
+
+.share-message {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  cursor: pointer;
+  min-width: 180px;
+  max-width: 280px;
+}
+
+.share-appname {
+  font-size: 11px;
+  color: #999;
+}
+
+.share-title {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.share-desc {
+  font-size: 12px;
+  color: #666;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.share-url {
+  font-size: 11px;
+  color: #999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mini-program-message {
+  width: min(280px, 48vw);
+  overflow: hidden;
+  color: var(--wxex-text-primary);
+}
+
+.mini-program-title {
+  margin-bottom: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  word-break: break-word;
+}
+
+.mini-program-description {
+  margin: -4px 0 8px;
+  color: var(--wxex-text-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.mini-program-preview {
+  .image-bubble,
+  .image-content {
+    width: 100%;
+    max-width: 100%;
+    max-height: 220px;
+    border-radius: 4px;
+  }
+
+  .image-content {
+    object-fit: cover;
+  }
+
+  .image-actions {
+    display: none;
+  }
+
+  .image-content.image-fallback {
+    width: 64px;
+    height: 64px;
+    margin: 28px auto;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+}
+
+.mini-program-inline-image {
+  display: block;
+  width: 100%;
+  max-height: 220px;
+  border-radius: 4px;
+  object-fit: cover;
+  cursor: zoom-in;
+}
+
+.mini-program-icon {
+  display: block;
+  width: 52px;
+  height: 52px;
+  margin: 8px 0;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.mini-program-footer {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 8px;
+  padding-top: 7px;
+  border-top: 1px solid var(--wxex-border);
+  color: var(--wxex-text-muted);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.red-packet-message {
+  width: min(280px, 48vw);
+  overflow: hidden;
+  border-radius: 6px;
+  background: #fa9d3b;
+  color: #fff;
+
+  &.is-clickable {
+    cursor: pointer;
+  }
+}
+
+.red-packet-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 72px;
+  padding: 12px 14px;
+}
+
+.red-packet-icon {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  place-items: center;
+  border: 2px solid rgba(255, 239, 170, 0.92);
+  border-radius: 50%;
+  color: #fff1a8;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.red-packet-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.red-packet-copy strong {
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 21px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.red-packet-copy small {
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.red-packet-footer {
+  padding: 5px 14px;
+  background: #fff;
+  color: var(--wxex-text-muted);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+.voip-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.voip-icon {
+  box-sizing: border-box;
+  padding: 3px 6px;
+  border-radius: var(--wxex-radius-sm);
+  background: var(--wxex-brand-soft);
+  color: var(--wxex-brand);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.voip-status {
+  font-size: 13px;
+}

src/renderer/src/styles/search.scss

@@ -21,24 +21,21 @@
   padding: 14px 22px 12px;
   border-bottom: 1px solid var(--wxex-border);
   background: rgba(250, 251, 250, 0.94);
-}
 
-.ai-search-header h1,
+  h1 {
-.ai-search-header p {
+    margin: 0;
-  margin: 0;
+    color: var(--wxex-text-primary);
-}
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
 
-.ai-search-header h1 {
+  p {
-  color: var(--wxex-text-primary);
+    margin: 0;
-  font-size: 20px;
+    color: var(--wxex-text-secondary);
-  font-weight: 700;
+    font-size: 12px;
-  line-height: 28px;
+    line-height: 18px;
-}
+  }
-
-.ai-search-header p {
-  color: var(--wxex-text-secondary);
-  font-size: 12px;
-  line-height: 18px;
 }
 
 .ai-search-kicker {
@@ -57,28 +54,36 @@
   color: var(--wxex-text-secondary);
   font-size: 12px;
   line-height: 18px;
-}
 
-.ai-search-model-status > span:first-child {
+  > span:first-child {
-  width: 8px;
+    width: 8px;
-  height: 8px;
+    height: 8px;
-  flex: 0 0 auto;
+    flex: 0 0 auto;
-  border-radius: 50%;
+    border-radius: 50%;
-  background: var(--wxex-text-muted);
+    background: var(--wxex-text-muted);
-}
+  }
 
-.ai-search-model-status > span.ready {
+  > span {
-  background: var(--wxex-success);
+    &.ready {
-}
+      background: var(--wxex-success);
+    }
 
-.ai-search-model-status > span.warning {
+    &.warning {
-  background: var(--wxex-warning);
+      background: var(--wxex-warning);
-}
+    }
+  }
 
-.ai-search-model-status > span:nth-child(2) {
+  > span:nth-child(2) {
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
-  white-space: nowrap;
+    white-space: nowrap;
+  }
+
+  button {
+    padding: 5px 8px;
+    color: var(--wxex-brand);
+    white-space: nowrap;
+  }
 }
 
 .ai-search-model-status button,
@@ -93,12 +98,6 @@
   font: inherit;
 }
 
-.ai-search-model-status button {
-  padding: 5px 8px;
-  color: var(--wxex-brand);
-  white-space: nowrap;
-}
-
 .ai-search-grid {
   display: grid;
   flex: 1;
@@ -134,25 +133,26 @@
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 14px;
-}
 
-.ai-search-panel-heading div {
+  div {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  gap: 2px;
+    gap: 2px;
-}
+  }
 
-.ai-search-panel-heading span:first-child {
+  span:first-child {
-  color: var(--wxex-text-muted);
+    color: var(--wxex-text-muted);
-  font-size: 10px;
+    font-size: 10px;
-  line-height: 15px;
+    line-height: 15px;
-}
+  }
+
+  strong {
+    color: var(--wxex-text-primary);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 20px;
+  }
 
-.ai-search-panel-heading strong {
-  color: var(--wxex-text-primary);
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 20px;
 }
 
 .ai-search-local-badge,
@@ -179,33 +179,17 @@
   padding: 3px;
   border-radius: var(--wxex-radius-sm);
   background: var(--wxex-bg-elevated);
-}
 
-.ai-search-scope-toggle button,
+  button {
-.ai-search-range-grid button,
+    padding: 7px 4px;
-.ai-search-history button {
+    font-size: 11px;
-  border: 0;
-  border-radius: var(--wxex-radius-sm);
-  background: transparent;
-  color: var(--wxex-text-secondary);
-  cursor: pointer;
-  font: inherit;
-}
 
-.ai-search-scope-toggle button {
+    &.active {
-  padding: 7px 4px;
+      background: var(--wxex-brand);
-  font-size: 11px;
+      color: #fff;
-}
+      font-weight: 700;
-
+    }
-.ai-search-scope-toggle button.active,
+  }
-.ai-search-range-grid button.active {
-  background: var(--wxex-brand);
-  color: var(--wxex-brand);
-  font-weight: 700;
-}
-
-.ai-search-scope-toggle button.active {
-  color: #fff;
 }
 
 .ai-search-scope-help {
@@ -235,24 +219,24 @@
   border: 1px solid var(--wxex-border);
   border-radius: var(--wxex-radius-sm);
   background: var(--wxex-bg-elevated);
-}
 
-.ai-search-filter-input svg {
+  svg {
-  width: 15px;
+    width: 15px;
-  height: 15px;
+    height: 15px;
-  flex: 0 0 auto;
+    flex: 0 0 auto;
-  color: var(--wxex-text-muted);
+    color: var(--wxex-text-muted);
-}
+  }
 
-.ai-search-filter-input input {
+  input {
-  width: 100%;
+    width: 100%;
-  min-width: 0;
+    min-width: 0;
-  border: 0;
+    border: 0;
-  outline: 0;
+    outline: 0;
-  background: transparent;
+    background: transparent;
-  color: var(--wxex-text-primary);
+    color: var(--wxex-text-primary);
-  font: inherit;
+    font: inherit;
-  font-size: 11px;
+    font-size: 11px;
+  }
 }
 
 .ai-search-contact-list {
@@ -277,11 +261,11 @@
   cursor: pointer;
   font: inherit;
   text-align: left;
-}
 
-.ai-search-contact:hover,
+  &:hover,
-.ai-search-contact.active {
+  &.active {
-  background: var(--wxex-brand-soft);
+    background: var(--wxex-brand-soft);
+  }
 }
 
 .ai-search-contact-avatar {
@@ -296,12 +280,12 @@
   color: var(--wxex-brand);
   font-size: 12px;
   font-weight: 700;
-}
 
-.ai-search-contact-avatar img {
+  img {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
-  object-fit: cover;
+    object-fit: cover;
+  }
 }
 
 .ai-search-contact > span:last-child {
@@ -337,6 +321,31 @@
   background: var(--wxex-bg-elevated);
   grid-template-columns: 1fr 1fr;
   margin-bottom: 16px;
+
+  button {
+    border: 0;
+    border-radius: var(--wxex-radius-sm);
+    background: transparent;
+    color: var(--wxex-text-secondary);
+    cursor: pointer;
+    font: inherit;
+    min-height: 34px;
+    padding: 7px 4px;
+    border: 1px solid transparent;
+    font-size: 11px;
+
+    &:hover {
+      border-color: var(--wxex-brand);
+      color: var(--wxex-brand);
+    }
+
+    &.active {
+      border-color: var(--wxex-brand);
+      background: var(--wxex-brand);
+      color: #fff;
+      box-shadow: 0 1px 3px rgba(34, 89, 74, 0.2);
+    }
+  }
 }
 
 .ai-search-field-heading {
@@ -356,26 +365,6 @@
   font-weight: 700;
 }
 
-.ai-search-range-grid button {
-  min-height: 34px;
-  padding: 7px 4px;
-  border: 1px solid transparent;
-  font-size: 11px;
-}
-
-.ai-search-range-grid button:hover {
-  border-color: var(--wxex-brand);
-  color: var(--wxex-brand);
-}
-
-.ai-search-range-grid button.active,
-.ai-search-range-grid button.active:hover {
-  border-color: var(--wxex-brand);
-  background: var(--wxex-brand);
-  color: #fff;
-  box-shadow: 0 1px 3px rgba(34, 89, 74, 0.2);
-}
-
 .ai-search-filter-note {
   display: flex;
   gap: 6px;
@@ -386,28 +375,34 @@
   color: var(--wxex-text-secondary);
   font-size: 10px;
   line-height: 16px;
-}
 
-.ai-search-filter-note span {
+  span {
-  color: var(--wxex-success);
+    color: var(--wxex-success);
+  }
 }
 
 .ai-search-history {
   margin-top: 18px;
-}
 
-.ai-search-history button {
+  button {
-  min-width: 0;
+    min-width: 0;
-  padding: 5px 0;
+    padding: 5px 0;
-  overflow: hidden;
+    overflow: hidden;
-  text-align: left;
+    border: 0;
-  text-overflow: ellipsis;
+    border-radius: var(--wxex-radius-sm);
-  white-space: nowrap;
+    background: transparent;
-  font-size: 10px;
+    color: var(--wxex-text-secondary);
-}
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
 
-.ai-search-history button:hover {
+    &:hover {
-  color: var(--wxex-brand);
+      color: var(--wxex-brand);
+    }
+  }
 }
 
 .ai-search-history-item {
@@ -415,10 +410,10 @@
   align-items: center;
   gap: 5px;
   min-width: 0;
-}
 
-.ai-search-history-item > button:first-child {
+  > button:first-child {
-  flex: 1;
+    flex: 1;
+  }
 }
 
 .ai-search-history-delete {
@@ -434,11 +429,11 @@
   font-size: 16px !important;
   line-height: 18px;
   text-align: center !important;
-}
 
-.ai-search-history-delete:hover {
+  &:hover {
-  background: var(--wxex-brand-soft);
+    background: var(--wxex-brand-soft);
-  color: var(--wxex-danger, #b34d46) !important;
+    color: var(--wxex-danger, #b34d46) !important;
+  }
 }
 
 .ai-search-main {
@@ -468,6 +463,22 @@
   padding: 48px 24px;
   flex-direction: column;
   text-align: center;
+
+  h2 {
+    margin: 7px 0 8px;
+    color: var(--wxex-text-primary);
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 26px;
+  }
+
+  p {
+    max-width: 440px;
+    margin: 0;
+    color: var(--wxex-text-secondary);
+    font-size: 12px;
+    line-height: 20px;
+  }
 }
 
 .ai-search-empty-mark {
@@ -482,24 +493,18 @@
   font-size: 28px;
 }
 
-.ai-search-empty h2,
+.ai-search-insufficient {
-.ai-search-loading h2,
+  button {
-.ai-search-insufficient h2 {
+    margin-top: 20px;
-  margin: 7px 0 8px;
+    padding: 8px 12px;
-  color: var(--wxex-text-primary);
+    font-size: 11px;
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 26px;
-}
 
-.ai-search-empty p,
+    &.primary {
-.ai-search-loading p,
+      border-color: var(--wxex-brand);
-.ai-search-insufficient p {
+      background: var(--wxex-brand);
-  max-width: 440px;
+      color: #fff;
-  margin: 0;
+    }
-  color: var(--wxex-text-secondary);
+  }
-  font-size: 12px;
-  line-height: 20px;
 }
 
 .ai-search-prompts {
@@ -508,22 +513,22 @@
   justify-content: center;
   gap: 7px;
   margin-top: 22px;
-}
 
-.ai-search-prompts button {
+  button {
-  padding: 7px 10px;
+    padding: 7px 10px;
-  border: 1px solid var(--wxex-border);
+    border: 1px solid var(--wxex-border);
-  border-radius: 999px;
+    border-radius: 999px;
-  background: var(--wxex-bg-elevated);
+    background: var(--wxex-bg-elevated);
-  color: var(--wxex-text-secondary);
+    color: var(--wxex-text-secondary);
-  cursor: pointer;
+    cursor: pointer;
-  font: inherit;
+    font: inherit;
-  font-size: 11px;
+    font-size: 11px;
-}
 
-.ai-search-prompts button:hover {
+    &:hover {
-  border-color: var(--wxex-brand);
+      border-color: var(--wxex-brand);
-  color: var(--wxex-brand);
+      color: var(--wxex-brand);
+    }
+  }
 }
 
 .ai-search-spinner {
@@ -550,14 +555,15 @@
   color: var(--wxex-text-muted);
   font-size: 11px;
   text-align: left;
-}
 
-.ai-search-loading-steps .done {
+  .done {
-  color: var(--wxex-success);
+    color: var(--wxex-success);
-}
+  }
-.ai-search-loading-steps .active {
+
-  color: var(--wxex-brand);
+  .active {
-  font-weight: 700;
+    color: var(--wxex-brand);
+    font-weight: 700;
+  }
 }
 
 .ai-search-result {
@@ -573,21 +579,21 @@
   gap: 18px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--wxex-border);
-}
 
-.ai-search-result-header h2 {
+  h2 {
-  margin: 6px 0 5px;
+    margin: 6px 0 5px;
-  color: var(--wxex-text-primary);
+    color: var(--wxex-text-primary);
-  font-size: 18px;
+    font-size: 18px;
-  font-weight: 700;
+    font-weight: 700;
-  line-height: 26px;
+    line-height: 26px;
-}
+  }
 
-.ai-search-result-header p {
+  p {
-  margin: 0;
+    margin: 0;
-  color: var(--wxex-text-muted);
+    color: var(--wxex-text-muted);
-  font-size: 11px;
+    font-size: 11px;
-  line-height: 16px;
+    line-height: 16px;
+  }
 }
 
 .ai-search-result-actions {
@@ -596,19 +602,17 @@
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 6px;
-}
 
-.ai-search-result-actions button {
+  button {
-  padding: 7px 9px;
+    padding: 7px 9px;
-  font-size: 11px;
+    font-size: 11px;
-}
 
-.ai-search-result-actions button.primary,
+    &.primary {
-.ai-search-composer button.primary,
+      border-color: var(--wxex-brand);
-.ai-search-insufficient button.primary {
+      background: var(--wxex-brand);
-  border-color: var(--wxex-brand);
+      color: #fff;
-  background: var(--wxex-brand);
+    }
-  color: #fff;
+  }
 }
 
 .ai-search-summary-block {
@@ -656,12 +660,6 @@
   font-weight: 700;
 }
 
-.ai-search-insufficient button {
-  margin-top: 20px;
-  padding: 8px 12px;
-  font-size: 11px;
-}
-
 .ai-search-composer {
   padding: 12px 18px 14px;
   border-top: 1px solid var(--wxex-border);
@@ -678,13 +676,16 @@
   line-height: 15px;
 }
 
-.ai-search-composer-meta strong {
+.ai-search-composer-meta {
-  color: var(--wxex-brand);
+  strong {
-  font-weight: 700;
+    color: var(--wxex-brand);
-}
+    font-weight: 700;
-.ai-search-composer-meta em {
+  }
-  font-style: normal;
+
-  color: var(--wxex-text-secondary);
+  em {
+    font-style: normal;
+    color: var(--wxex-text-secondary);
+  }
 }
 
 .ai-search-composer-row {
@@ -692,41 +693,50 @@
   align-items: flex-end;
   gap: 8px;
   margin-top: 7px;
-}
 
-.ai-search-composer textarea {
+  textarea {
-  width: 100%;
+    width: 100%;
-  min-width: 0;
+    min-width: 0;
-  resize: none;
+    resize: none;
-  padding: 9px 10px;
+    padding: 9px 10px;
-  border: 1px solid var(--wxex-border);
+    border: 1px solid var(--wxex-border);
-  border-radius: var(--wxex-radius-sm);
+    border-radius: var(--wxex-radius-sm);
-  outline: 0;
+    outline: 0;
-  background: var(--wxex-bg-main);
+    background: var(--wxex-bg-main);
-  color: var(--wxex-text-primary);
+    color: var(--wxex-text-primary);
-  font: inherit;
+    font: inherit;
-  font-size: 12px;
+    font-size: 12px;
-  line-height: 18px;
+    line-height: 18px;
-}
 
-.ai-search-composer textarea:focus {
+    &:focus {
-  border-color: var(--wxex-brand);
+      border-color: var(--wxex-brand);
-}
+    }
-.ai-search-composer button {
+  }
-  display: flex;
+
-  align-items: center;
+  button {
-  gap: 8px;
+    display: flex;
-  padding: 9px 13px;
+    align-items: center;
-  white-space: nowrap;
+    gap: 8px;
-  font-size: 11px;
+    padding: 9px 13px;
-}
+    white-space: nowrap;
-.ai-search-composer button span {
+    font-size: 11px;
-  font-size: 16px;
+
-  line-height: 12px;
+    span {
-}
+      font-size: 16px;
-.ai-search-composer button:disabled {
+      line-height: 12px;
-  opacity: 0.6;
+    }
-  cursor: wait;
+
+    &.primary {
+      border-color: var(--wxex-brand);
+      background: var(--wxex-brand);
+      color: #fff;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: wait;
+    }
+  }
 }
 .ai-search-composer-foot {
   justify-content: space-between;

src/renderer/src/styles/settings-advanced.css

@@ -1,46 +0,0 @@
-.settings-debug-card {
-  display: grid;
-  gap: 14px;
-}
-
-.settings-debug-card > label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-}
-
-.settings-debug-card > label > span {
-  display: grid;
-  gap: 5px;
-}
-
-.settings-debug-card b {
-  color: var(--wxex-text-primary);
-  font-size: 13px;
-}
-
-.settings-debug-card small {
-  color: var(--wxex-text-secondary);
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.settings-debug-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-top: 12px;
-  border-top: 1px solid var(--wxex-border);
-}
-
-.settings-debug-actions button {
-  padding: 7px 10px;
-  border: 1px solid var(--wxex-border);
-  border-radius: var(--wxex-radius-sm);
-  background: var(--wxex-bg-elevated);
-  color: var(--wxex-brand);
-  cursor: pointer;
-  font: inherit;
-  font-size: 11px;
-}

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

@@ -0,0 +1,46 @@
+.settings-debug-card {
+  display: grid;
+  gap: 14px;
+
+  > label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+
+    > span {
+      display: grid;
+      gap: 5px;
+    }
+  }
+
+  b {
+    color: var(--wxex-text-primary);
+    font-size: 13px;
+  }
+
+  small {
+    color: var(--wxex-text-secondary);
+    font-size: 11px;
+    line-height: 18px;
+  }
+}
+
+.settings-debug-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid var(--wxex-border);
+
+  button {
+    padding: 7px 10px;
+    border: 1px solid var(--wxex-border);
+    border-radius: var(--wxex-radius-sm);
+    background: var(--wxex-bg-elevated);
+    color: var(--wxex-brand);
+    cursor: pointer;
+    font: inherit;
+    font-size: 11px;
+  }
+}

src/renderer/src/styles/shell-overlays.scss

@@ -0,0 +1,446 @@
+/* Sidebar 自助卡片 + 入口 */
+.sidebar-footer {
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  background-color: #f3f4f5;
+  transition: background-color 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    background-color: #e6e9eb;
+  }
+}
+
+.sidebar-self-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  background-color: #07c160;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.sidebar-self-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.sidebar-self-nickname {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1f2429;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-self-wxid {
+  font-size: 11px;
+  color: #8a9298;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-self-arrow {
+  color: #8a9298;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+/* 启动自动连接 Splash */
+.boot-splash {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  background: linear-gradient(180deg, #f5f7f8 0%, #eceff1 100%);
+  z-index: 2000;
+  animation: boot-splash-fade-in 0.2s ease-out;
+}
+
+@keyframes boot-splash-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.boot-splash-spinner {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 3px solid rgba(7, 193, 96, 0.18);
+  border-top-color: #07c160;
+  animation: boot-splash-spin 0.9s linear infinite;
+}
+
+@keyframes boot-splash-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.boot-splash-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1f2429;
+}
+
+.boot-splash-subtitle {
+  font-size: 12px;
+  color: #6f767c;
+}
+
+.boot-splash-detail {
+  min-height: 18px;
+  font-size: 12px;
+  color: #8a9298;
+}
+
+.boot-splash-progress {
+  width: min(320px, 72vw);
+  height: 6px;
+  margin-top: 2px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(7, 193, 96, 0.12);
+}
+
+.boot-splash-progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: #07c160;
+  transition: width 0.18s ease-out;
+}
+
+/* 设置面板 */
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 21, 26, 0.45);
+  backdrop-filter: blur(2px);
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: settings-fade-in 0.16s ease-out;
+}
+
+@keyframes settings-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.settings-modal {
+  width: min(560px, 92vw);
+  max-height: 84vh;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 24px 60px rgba(15, 21, 26, 0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: settings-pop-in 0.18s ease-out;
+}
+
+@keyframes settings-pop-in {
+  from {
+    transform: translateY(8px) scale(0.98);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 22px;
+  border-bottom: 1px solid #ececec;
+
+  h2 {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 600;
+    color: #1f2429;
+  }
+}
+
+.settings-close {
+  background: transparent;
+  border: 0;
+  color: #7d858a;
+  font-size: 26px;
+  line-height: 1;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: #f0f2f4;
+    color: #1f2429;
+  }
+}
+
+.settings-body {
+  padding: 12px 22px 22px;
+  overflow-y: auto;
+}
+
+.settings-section {
+  margin-top: 14px;
+  padding: 14px 16px;
+  border-radius: 10px;
+  background: #fafbfc;
+  border: 1px solid #ececec;
+}
+
+.settings-section:first-child {
+  margin-top: 6px;
+}
+
+.settings-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6f767c;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+.settings-row:first-child {
+  margin-top: 0;
+}
+
+.settings-input {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 11px;
+  border: 1px solid #d4d9dc;
+  border-radius: 6px;
+  background: #fff;
+  font-size: 13px;
+  color: #1f2429;
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.settings-input:focus {
+  border-color: #07c160;
+  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
+}
+
+.settings-input-half {
+  flex: 0 1 140px;
+}
+
+.settings-input-quarter {
+  flex: 0 1 90px;
+}
+
+.settings-btn {
+  padding: 7px 14px;
+  border: 1px solid #d4d9dc;
+  border-radius: 6px;
+  background: #fff;
+  color: #30383d;
+  cursor: pointer;
+  font-size: 13px;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: #07c160;
+    color: #078f49;
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.settings-btn-primary {
+  background: #07c160;
+  color: #fff;
+  border-color: #07c160;
+
+  &:hover:not(:disabled) {
+    background: #06ad56;
+    color: #fff;
+    border-color: #06ad56;
+  }
+}
+
+.settings-hint {
+  margin-top: 10px;
+  font-size: 11px;
+  color: #8a9298;
+  line-height: 1.6;
+}
+
+.settings-hint code {
+  background: #eef0f2;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 10.5px;
+}
+
+.settings-status {
+  font-size: 12px;
+  color: #59636a;
+}
+
+.settings-status.ok {
+  color: #078f49;
+}
+
+.settings-status.fail {
+  color: #c73737;
+}
+
+.settings-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #30383d;
+
+  input {
+    width: 16px;
+    height: 16px;
+    accent-color: #07c160;
+    cursor: pointer;
+  }
+}
+
+.settings-self {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.settings-self-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 10px;
+  background: #07c160;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  font-weight: 500;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.settings-self-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.settings-self-nickname {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2429;
+}
+
+.settings-self-wxid {
+  font-size: 12px;
+  color: #6f767c;
+  margin-top: 2px;
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.settings-self-account {
+  font-size: 11px;
+  color: #8a9298;
+  margin-top: 2px;
+  word-break: break-all;
+}
+
+.settings-self-empty {
+  font-size: 13px;
+  color: #8a9298;
+}
+
+.settings-path {
+  display: inline-block;
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  background: #eef0f2;
+  padding: 3px 7px;
+  border-radius: 4px;
+  color: #30383d;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+.app-toast {
+  position: fixed;
+  top: 18px;
+  left: calc(var(--wxex-nav-width) + 50%);
+  z-index: 40;
+  transform: translateX(-50%);
+  padding: 9px 14px;
+  border: 1px solid rgba(198, 134, 53, 0.35);
+  border-radius: var(--wxex-radius-md);
+  background: #fff9ef;
+  color: #7b4b14;
+  font: 13px/18px var(--wxex-font);
+  box-shadow: var(--wxex-shadow-popover);
+}