feat: 设置功能

README.md

@@ -1,7 +1,7 @@
 # WechatExplorer
 
-macOS / Windows 微信聊天记录查看，AI 一键生成群聊总结。
-是一个基于 Electron + React + TypeScript 开发的微信聊天记录查看与分析工具。它支持查看解密后的微信数据库内容，提供聊天记录搜索、导出以及 AI 智能总结功能。
+macOS / Windows 微信聊天记录查看与 AI 分析工具。
+是一个基于 Electron + React + TypeScript 开发的本地微信聊天记录查看与分析工具。它支持查看解密后的微信数据库内容，提供 AI 智能检索、群聊总结和多格式聊天记录导出功能。
 
 ## 项目说明
 
@@ -14,8 +14,8 @@ macOS / Windows 微信聊天记录查看，AI 一键生成群聊总结。
 ## ✨ 功能特性
 
 - **聊天记录查看**: 浏览微信好友和群聊的聊天记录，支持头像显示。
-- **全局搜索**: 快速搜索聊天内容。
-- **消息防撤回**: 高亮查看对方已撤回消息
+- **AI 智能检索**: 支持全局搜索、指定会话搜索和自然语言提问，帮助快速定位聊天主题与相关证据。
+- **消息防撤回**: 可在设置中开启，归档并高亮查看对方已撤回消息。
 - **AI 智能总结**: 支持多模型服务配置（DeepSeek/GPT-4o/Claude/Moonshot），一键总结群聊精华内容，生成话题报告。
 - **群聊日报生成**: 支持围绕群聊内容生成日报，通常会覆盖以下模块中的部分或全部内容：
   - **今日讨论热点**: 梳理群内主要话题，支持热度标签。
@@ -29,7 +29,8 @@ macOS / Windows 微信聊天记录查看，AI 一键生成群聊总结。
   - **群内数据可视化**: 消息热度条形图、话唠榜 TOP5、活跃时间线。
   - **词云/关键词**: 可视化展示群聊关键词。
 - **图片生成**: 将 AI 总结的内容生成精美图片，方便分享。
-- **数据导出**: 支持导出聊天记录为 CSV 文件（今日、昨日、近7天或全部）。
+- **数据导出**: 支持将聊天记录导出为 HTML、CSV、JSON 和 Markdown，支持按时间范围导出并打开文件所在文件夹。
+- **诊断日志**: 可在设置的高级选项中控制诊断日志，方便排查运行异常。
 - **安全隐私**: 所有数据仅在本地处理，AI 功能需自行配置 API Key。
 
 ## 📸 预览
@@ -46,6 +47,10 @@ macOS / Windows 微信聊天记录查看，AI 一键生成群聊总结。
 
 <img src="./public/software-1.png" alt="AI 群聊日报页面" />
 
+### 检索界面
+
+<img src="./public/ai-search.png" alt="检索页面" />
+
 ### 本地 API 与 Reader Skill
 
 <img src="./public/software-2.png" alt="本地 API 与 Reader Skill 页面" />

electron-builder.yml

@@ -68,4 +68,4 @@ publish:
   provider: github
   owner: Wxw-Gu
   repo: WechatExplorer
-  releaseType: draft
+  releaseType: release

index.js

@@ -0,0 +1,139 @@
+"use strict";
+const electron = require("electron");
+const preload = require("@electron-toolkit/preload");
+const api = {
+  writeAppLog: (entry) => electron.ipcRenderer.invoke("app-log:write", entry),
+  getAppLogPath: () => electron.ipcRenderer.invoke("app-log:getPath"),
+  revealAppLog: () => electron.ipcRenderer.invoke("app-log:reveal"),
+  getAppUpdateState: () => electron.ipcRenderer.invoke("app-update:getState"),
+  checkAppUpdate: () => electron.ipcRenderer.invoke("app-update:check"),
+  downloadAppUpdate: () => electron.ipcRenderer.invoke("app-update:download"),
+  installAppUpdate: () => electron.ipcRenderer.invoke("app-update:install"),
+  onAppUpdateState: (callback) => {
+    const listener = (_event, state) => callback(state);
+    electron.ipcRenderer.on("app-update:state", listener);
+    return () => electron.ipcRenderer.removeListener("app-update:state", listener);
+  },
+  getCacheSummary: () => electron.ipcRenderer.invoke("cache:getSummary"),
+  clearCache: (scope) => electron.ipcRenderer.invoke("cache:clear", scope),
+  initDb: (key) => electron.ipcRenderer.invoke("db:init", key),
+  getBootstrapCache: () => electron.ipcRenderer.invoke("db:getBootstrapCache"),
+  getStartupCache: () => electron.ipcRenderer.invoke("db:getStartupCache"),
+  getContacts: (filter) => electron.ipcRenderer.invoke("db:getContacts", filter),
+  getContactAvatars: (usernames) => electron.ipcRenderer.invoke("db:getContactAvatars", usernames),
+  getCachedMessages: (userMd5, startTime, endTime) => electron.ipcRenderer.invoke("db:getCachedMessages", userMd5, startTime, endTime),
+  getCachedMessagePage: (userMd5, startTime, endTime) => electron.ipcRenderer.invoke("db:getCachedMessagePage", userMd5, startTime, endTime),
+  getMessages: (userMd5, startTime, endTime, options) => electron.ipcRenderer.invoke("db:getMessages", userMd5, startTime, endTime, options),
+  getGroupSnapshot: (userMd5) => electron.ipcRenderer.invoke("db:getGroupSnapshot", userMd5),
+  search: (keyword) => electron.ipcRenderer.invoke("db:search", keyword),
+  aiChat: (messages, options) => electron.ipcRenderer.invoke("ai:chat", messages, options),
+  listAIProviders: () => electron.ipcRenderer.invoke("ai:listProviders"),
+  getAIRuntimeConfig: () => electron.ipcRenderer.invoke("ai:getRuntimeConfig"),
+  saveAIProvider: (provider) => electron.ipcRenderer.invoke("ai:saveProvider", provider),
+  deleteAIProvider: (providerId) => electron.ipcRenderer.invoke("ai:deleteProvider", providerId),
+  setDefaultAIProvider: (providerId) => electron.ipcRenderer.invoke("ai:setDefaultProvider", providerId),
+  testAIProvider: (providerId) => electron.ipcRenderer.invoke("ai:testProvider", providerId),
+  testAIVision: (request) => electron.ipcRenderer.invoke("ai:testVision", request),
+  migrateLegacyAIConfig: (config) => electron.ipcRenderer.invoke("ai:migrateLegacy", config),
+  copyImage: (base64String) => electron.ipcRenderer.invoke("copy-image", base64String),
+  getVoiceData: (sessionId, localId, createTime, svrId) => electron.ipcRenderer.invoke("db:getVoiceData", sessionId, localId, createTime, svrId),
+  parseMessage: (content, messageType) => electron.ipcRenderer.invoke("db:parseMessage", content, messageType),
+  getImage: (imageMd5, imageDatNameOrThumb, sessionId, options) => electron.ipcRenderer.invoke("db:getImage", imageMd5, imageDatNameOrThumb, sessionId, options),
+  getVideo: (hashes) => electron.ipcRenderer.invoke("db:getVideo", hashes),
+  getSticker: (cdnUrl, md5) => electron.ipcRenderer.invoke("db:getSticker", cdnUrl, md5),
+  startExport: (request) => electron.ipcRenderer.invoke("export:start", request),
+  cancelExport: (jobId) => electron.ipcRenderer.invoke("export:cancel", jobId),
+  revealExport: (path) => electron.ipcRenderer.invoke("export:reveal", path),
+  onExportProgress: (callback) => {
+    const listener = (_event, progress) => callback(progress);
+    electron.ipcRenderer.on("export:progress", listener);
+    return () => electron.ipcRenderer.removeListener("export:progress", listener);
+  },
+  exportGroupReport: (request) => electron.ipcRenderer.invoke("report:export", request),
+  listGeneratedReports: () => electron.ipcRenderer.invoke("report:listGenerated"),
+  saveGeneratedReport: (request) => electron.ipcRenderer.invoke("report:saveGenerated", request),
+  deleteGeneratedReport: (reportId) => electron.ipcRenderer.invoke("report:deleteGenerated", reportId),
+  revealGroupReport: (filePath) => electron.ipcRenderer.invoke("report:reveal", filePath),
+  getSavedDbKey: () => electron.ipcRenderer.invoke("key:getSavedDbKey"),
+  getDatabaseKeyEnvironment: () => electron.ipcRenderer.invoke("key:getEnvironment"),
+  readDatabaseKeyClipboard: () => electron.ipcRenderer.invoke("key:readClipboardDbKey"),
+  autoGetDbKey: (options) => electron.ipcRenderer.invoke("key:autoGetDbKey", options),
+  autoGetImageKey: (options) => electron.ipcRenderer.invoke("key:autoGetImageKey", options),
+  getImageKeyConfig: () => electron.ipcRenderer.invoke("image:getConfig"),
+  getImageDecryptionStatus: () => electron.ipcRenderer.invoke("image:getStatus"),
+  saveImageKeyConfig: (request) => electron.ipcRenderer.invoke("image:saveConfig", request),
+  testImageDecryption: (request) => electron.ipcRenderer.invoke("image:testConfig", request),
+  clearImageKeyConfig: () => electron.ipcRenderer.invoke("image:clearConfig"),
+  pasteAndSaveDbKey: () => electron.ipcRenderer.invoke("key:pasteAndSaveDbKey"),
+  saveDbKey: (key) => electron.ipcRenderer.invoke("key:saveDbKey", key),
+  clearSavedDbKey: () => electron.ipcRenderer.invoke("key:clearSavedDbKey"),
+  onWcdbChange: (callback) => {
+    const listener = (_event, payload) => callback(payload);
+    electron.ipcRenderer.on("wcdb-change", listener);
+    return () => electron.ipcRenderer.removeListener("wcdb-change", listener);
+  },
+  onDbKeyStatus: (callback) => {
+    const listener = (_event, payload) => callback(payload);
+    electron.ipcRenderer.on("key:dbKeyStatus", listener);
+    return () => electron.ipcRenderer.removeListener("key:dbKeyStatus", listener);
+  },
+  onImageKeyStatus: (callback) => {
+    const listener = (_event, payload) => callback(payload);
+    electron.ipcRenderer.on("key:imageKeyStatus", listener);
+    return () => electron.ipcRenderer.removeListener("key:imageKeyStatus", listener);
+  },
+  getSettings: () => electron.ipcRenderer.invoke("settings:get"),
+  setSettings: (patch) => electron.ipcRenderer.invoke("settings:set", patch),
+  getSelf: () => electron.ipcRenderer.invoke("settings:getSelf"),
+  testConnection: (key, accountRoot) => electron.ipcRenderer.invoke("db:testConnection", key, accountRoot),
+  reopenWithRoot: (accountRoot) => electron.ipcRenderer.invoke("db:reopenWithRoot", accountRoot),
+  selectDbRoot: () => electron.ipcRenderer.invoke("settings:selectDbRoot"),
+  openAccountRoot: () => electron.ipcRenderer.invoke("settings:openAccountRoot"),
+  disconnectDb: (options) => electron.ipcRenderer.invoke("db:disconnect", options),
+  apiStatus: () => electron.ipcRenderer.invoke("api:getStatus"),
+  apiStart: (host, port) => electron.ipcRenderer.invoke("api:start", host, port),
+  apiStop: () => electron.ipcRenderer.invoke("api:stop"),
+  apiToggle: (enabled) => electron.ipcRenderer.invoke("api:toggle", enabled),
+  getReaderSkillStatus: () => electron.ipcRenderer.invoke("api:skillStatus"),
+  readReaderSkill: () => electron.ipcRenderer.invoke("api:readSkill"),
+  revealReaderSkill: () => electron.ipcRenderer.invoke("api:revealSkill"),
+  openReaderSkillGithub: () => electron.ipcRenderer.invoke("api:openSkillGithub"),
+  testLocalApiRequest: (request) => electron.ipcRenderer.invoke("api:testLocalRequest", request),
+  copyText: (text) => electron.ipcRenderer.invoke("api:copyText", text),
+  // ============================================================
+  // AI 图片理解基础设施(ImageInsightService)
+  // ============================================================
+  imageListCandidates: (query) => electron.ipcRenderer.invoke("image:listCandidates", query),
+  imageAnalyze: (request) => electron.ipcRenderer.invoke("image:analyze", request),
+  getImageInsight: (imageHash) => electron.ipcRenderer.invoke("image:getInsight", imageHash),
+  listImageInsights: (sessionId, limit) => electron.ipcRenderer.invoke("image:listInsights", sessionId, limit),
+  getAgentHubStatus: () => electron.ipcRenderer.invoke("agent-hub:getStatus"),
+  getAgentHubLogs: () => electron.ipcRenderer.invoke("agent-hub:getLogs"),
+  clearAgentHubLogs: () => electron.ipcRenderer.invoke("agent-hub:clearLogs"),
+  startAgentHubLogin: () => electron.ipcRenderer.invoke("agent-hub:startLogin"),
+  cancelAgentHubLogin: () => electron.ipcRenderer.invoke("agent-hub:cancelLogin"),
+  reconnectAgentHub: () => electron.ipcRenderer.invoke("agent-hub:reconnect"),
+  disconnectAgentHub: () => electron.ipcRenderer.invoke("agent-hub:disconnect"),
+  selectAgentHubTestImage: () => electron.ipcRenderer.invoke("agent-hub:selectTestImage"),
+  onAgentHubStatus: (callback) => {
+    const listener = (_event, status) => callback(status);
+    electron.ipcRenderer.on("agent-hub:status", listener);
+    return () => electron.ipcRenderer.removeListener("agent-hub:status", listener);
+  },
+  onAgentHubLog: (callback) => {
+    const listener = (_event, entry) => callback(entry);
+    electron.ipcRenderer.on("agent-hub:log", listener);
+    return () => electron.ipcRenderer.removeListener("agent-hub:log", listener);
+  }
+};
+if (process.contextIsolated) {
+  try {
+    electron.contextBridge.exposeInMainWorld("electron", preload.electronAPI);
+    electron.contextBridge.exposeInMainWorld("api", api);
+  } catch (error) {
+    console.error(error);
+  }
+} else {
+  window.electron = preload.electronAPI;
+  window.api = api;
+}

package.json

@@ -48,6 +48,7 @@
     "@electron-toolkit/utils": "^4.0.0",
     "@koromix/koffi-win32-x64": "3.1.0",
     "@tanstack/react-virtual": "^3.14.6",
+    "electron-updater": "^6.6.2",
     "fs-extra": "^11.3.2",
     "fzstd": "^0.1.1",
     "jsonrepair": "^3.15.0",
@@ -76,6 +77,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

@@ -20,6 +20,7 @@ specifiers:
   '@vitejs/plugin-react': ^5.1.1
   electron: ^43.0.0
   electron-builder: ^26.0.12
+  electron-updater: ^6.6.2
   electron-vite: ^5.0.0
   eslint: ^9.39.1
   eslint-plugin-react: ^7.37.5
@@ -33,6 +34,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
@@ -43,6 +45,7 @@ dependencies:
   '@electron-toolkit/utils': 4.0.0_electron@43.1.0
   '@koromix/koffi-win32-x64': 3.1.0
   '@tanstack/react-virtual': 3.14.6_bokjwhiew3ov3ffvbmafuwoalq
+  electron-updater: 6.8.9
   fs-extra: 11.3.2
   fzstd: 0.1.1
   jsonrepair: 3.15.0
@@ -71,8 +74,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 +934,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 +1559,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
@@ -1577,7 +1707,6 @@ packages:
 
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-    dev: true
 
   /array-buffer-byte-length/1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
@@ -1766,6 +1895,16 @@ packages:
       - supports-color
     dev: true
 
+  /builder-util-runtime/9.7.0:
+    resolution: {integrity: sha512-g/kR520giAFYkSXTzcmF3kqQq7wi8F6N6SzeDgZrqTBN+VHdmgWOyTdD1yD7AATDId/yXLvuP34CxW46/BwCdw==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      debug: 4.4.3
+      sax: 1.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /builder-util/26.0.11:
     resolution: {integrity: sha512-xNjXfsldUEe153h1DraD0XvDOpqGR0L5eKFkdReB7eFW5HqysDZFfly4rckda6y9dF39N3pkPlOblcfHKGw+uA==}
     dependencies:
@@ -1882,6 +2021,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'}
@@ -2219,6 +2365,21 @@ packages:
     resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
     dev: true
 
+  /electron-updater/6.8.9:
+    resolution: {integrity: sha512-ZhVxM9iGONUpZGI1FxdMRgJjUFXi7AYGVa5PwKlO1tV1/4zDxQmfKpXOHVztKrd6L9rLcFjERvi1Mf2vxyTkig==}
+    dependencies:
+      builder-util-runtime: 9.7.0
+      fs-extra: 10.1.0
+      js-yaml: 4.1.1
+      lazy-val: 1.0.5
+      lodash.escaperegexp: 4.1.2
+      lodash.isequal: 4.5.0
+      semver: 7.7.3
+      tiny-typed-emitter: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /electron-vite/5.0.0_vite@7.2.7:
     resolution: {integrity: sha512-OHp/vjdlubNlhNkPkL/+3JD34ii5ov7M0GpuXEVdQeqdQ3ulvVR7Dg/rNBLfS5XPIFwgoBLDf9sjjrL+CuDyRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2236,7 +2397,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
@@ -2739,7 +2900,6 @@ packages:
       graceful-fs: 4.2.11
       jsonfile: 6.2.0
       universalify: 2.0.1
-    dev: true
 
   /fs-extra/11.3.2:
     resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
@@ -3091,6 +3251,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'}
@@ -3400,7 +3564,6 @@ packages:
     hasBin: true
     dependencies:
       argparse: 2.0.1
-    dev: true
 
   /jsesc/3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
@@ -3475,7 +3638,6 @@ packages:
 
   /lazy-val/1.0.5:
     resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
-    dev: true
 
   /levn/0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
@@ -3492,6 +3654,15 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash.escaperegexp/4.1.2:
+    resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==}
+    dev: false
+
+  /lodash.isequal/4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
+    dev: false
+
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -3742,6 +3913,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 +4138,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 +4275,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,9 +4437,20 @@ 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
 
   /scheduler/0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
@@ -4600,6 +4798,10 @@ packages:
       semver: 5.7.2
     dev: true
 
+  /tiny-typed-emitter/2.1.0:
+    resolution: {integrity: sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA==}
+    dev: false
+
   /tinyglobby/0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -4784,7 +4986,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 +5032,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/main/app-logger.ts

@@ -2,6 +2,7 @@ import { app, shell } from 'electron'
 import fs from 'fs-extra'
 import path from 'path'
 import type { AppLogEntry } from '../shared/app-log'
+import { isPackagedRuntime } from './runtime-mode'
 
 const MAX_LOG_BYTES = 5 * 1024 * 1024
 const REDACTED_KEY = /(?:api[-_]?key|authorization|token|secret|password|database[-_]?key)/i
@@ -52,14 +53,14 @@ export class AppLogger {
       this.rotateIfNeeded()
       const record = {
         timestamp: new Date().toISOString(),
-        mode: app.isPackaged ? 'packaged' : 'development',
+        mode: isPackagedRuntime() ? 'packaged' : 'development',
         level: entry.level,
         scope: String(entry.scope || 'app').slice(0, 80),
         message: String(entry.message || '').slice(0, 500),
         details: sanitize(entry.details || {})
       }
       fs.appendFileSync(this.logPath, `${JSON.stringify(record)}\n`, { encoding: 'utf8' })
-      if (!app.isPackaged) {
+      if (!isPackagedRuntime()) {
         const method =
           entry.level === 'error'
             ? console.error

src/main/index.ts

@@ -76,6 +76,9 @@ import { installSafeConsole } from './safe-log'
 import { agentHubService } from './services/agent-hub-service'
 import { appLogger } from './app-logger'
 import type { AppLogEntry } from '../shared/app-log'
+import { appUpdateService } from './services/app-update-service'
+import { clearCache, getCacheSummary } from './services/cache-service'
+import type { CacheClearScope } from './services/cache-service'
 import { configureRecallArchive, RecallArchiveMonitor } from './services/recall-archive-service'
 import { VideoAssetService } from './video-asset-service'
 import { cancelExport, revealExport, runExport } from './export-service'
@@ -349,6 +352,17 @@ app.whenReady().then(async () => {
   ipcMain.handle('app-log:write', (_, entry: AppLogEntry) => appLogger.write(entry))
   ipcMain.handle('app-log:getPath', () => appLogger.logPath)
   ipcMain.handle('app-log:reveal', () => appLogger.reveal())
+  ipcMain.handle('app-update:getState', () => appUpdateService.getState())
+  ipcMain.handle('app-update:check', () => appUpdateService.check())
+  ipcMain.handle('app-update:download', () => appUpdateService.download())
+  ipcMain.handle('app-update:install', () => appUpdateService.install())
+  ipcMain.handle('cache:getSummary', () => getCacheSummary())
+  ipcMain.handle('cache:clear', async (_, scope: CacheClearScope) => {
+    const allowedScopes: CacheClearScope[] = ['bootstrap', 'electron', 'all']
+    if (!allowedScopes.includes(scope)) return getCacheSummary()
+    imageDecryptService = null
+    return clearCache(scope)
+  })
 
   ipcMain.handle('db:init', async (_, key: string) => {
     if (dbInitInFlight) return dbInitInFlight

src/main/runtime-mode.ts

@@ -0,0 +1,12 @@
+import { app } from 'electron'
+import { existsSync } from 'fs'
+import { join } from 'path'
+
+export function isPackagedRuntime(): boolean {
+  if (app.isPackaged) return true
+
+  return (
+    existsSync(join(process.resourcesPath, 'app.asar')) &&
+    existsSync(join(process.resourcesPath, 'app-update.yml'))
+  )
+}

src/main/services/agent-hub-service.ts

@@ -15,6 +15,7 @@ import type {
 import type { AppSettings } from './settings-store'
 import { generateAgentGroupReport } from './agent-group-report-service'
 import { AIProviderService } from './ai-provider-service'
+import { isPackagedRuntime } from '../runtime-mode'
 import {
   getGroupSnapshot,
   isReady,
@@ -68,7 +69,7 @@ const agentAIProvider = new AIProviderService()
 function resolveBundledBinary(
   resourceSegments: string[],
   executable: string,
-  packaged = app.isPackaged,
+  packaged = isPackagedRuntime(),
   platform = process.platform,
   arch = process.arch
 ): string {
@@ -80,7 +81,7 @@ function resolveBundledBinary(
 }
 
 export function resolveWechatConnectorBinaryPath(
-  packaged = app.isPackaged,
+  packaged = isPackagedRuntime(),
   platform = process.platform,
   arch = process.arch
 ): string {

src/main/services/app-update-service.ts

@@ -0,0 +1,120 @@
+import { app, BrowserWindow } from 'electron'
+import { autoUpdater, type ProgressInfo } from 'electron-updater'
+import type { AppUpdateCheckResult, AppUpdateState } from '../../shared/app-update'
+import { isPackagedRuntime } from '../runtime-mode'
+
+export class AppUpdateService {
+  private state: AppUpdateState = {
+    status: 'idle',
+    currentVersion: app.getVersion()
+  }
+
+  constructor() {
+    autoUpdater.autoDownload = false
+    autoUpdater.autoInstallOnAppQuit = true
+    autoUpdater.on('checking-for-update', () => this.setState({ status: 'checking' }))
+    autoUpdater.on('update-available', (info) =>
+      this.setState({ status: 'available', version: info.version, message: '发现新版本' })
+    )
+    autoUpdater.on('update-not-available', () =>
+      this.setState({ status: 'not-available', message: '当前已是最新版本' })
+    )
+    autoUpdater.on('download-progress', (progress: ProgressInfo) =>
+      this.setState({
+        status: 'downloading',
+        percent: progress.percent,
+        transferred: progress.transferred,
+        total: progress.total,
+        bytesPerSecond: progress.bytesPerSecond
+      })
+    )
+    autoUpdater.on('update-downloaded', (info) =>
+      this.setState({
+        status: 'downloaded',
+        version: info.version,
+        percent: 100,
+        message: '更新已下载'
+      })
+    )
+    autoUpdater.on('error', (error) =>
+      this.setState({ status: 'error', message: error.message || '更新失败' })
+    )
+  }
+
+  getState(): AppUpdateState {
+    return { ...this.state, currentVersion: app.getVersion() }
+  }
+
+  async check(): Promise<AppUpdateCheckResult> {
+    if (!isPackagedRuntime()) {
+      const state = this.setState({
+        status: 'unsupported',
+        message: '开发模式不执行安装包更新，请在正式安装包中检查更新'
+      })
+      return { success: false, state }
+    }
+    try {
+      const result = await autoUpdater.checkForUpdates()
+      if (result?.updateInfo.version) {
+        this.setState({
+          status: 'available',
+          version: result.updateInfo.version,
+          message: '发现新版本'
+        })
+      }
+      return { success: true, state: this.getState() }
+    } catch (error) {
+      const state = this.setState({
+        status: 'error',
+        message: error instanceof Error ? error.message : String(error)
+      })
+      return { success: false, state }
+    }
+  }
+
+  async download(): Promise<AppUpdateCheckResult> {
+    if (!isPackagedRuntime()) {
+      const state = this.setState({ status: 'unsupported', message: '开发模式不能下载更新' })
+      return { success: false, state }
+    }
+    try {
+      this.setState({ status: 'downloading', percent: 0 })
+      await autoUpdater.downloadUpdate()
+      return { success: true, state: this.getState() }
+    } catch (error) {
+      const state = this.setState({
+        status: 'error',
+        message: error instanceof Error ? error.message : String(error)
+      })
+      return { success: false, state }
+    }
+  }
+
+  install(): { success: boolean; error?: string } {
+    if (this.state.status !== 'downloaded') {
+      return { success: false, error: '更新包尚未下载完成' }
+    }
+    autoUpdater.quitAndInstall()
+    return { success: true }
+  }
+
+  handleState(callback: (state: AppUpdateState) => void): () => void {
+    this.listeners.add(callback)
+    callback(this.getState())
+    return () => this.listeners.delete(callback)
+  }
+
+  private listeners = new Set<(state: AppUpdateState) => void>()
+
+  private setState(patch: Partial<AppUpdateState>): AppUpdateState {
+    this.state = { ...this.state, ...patch, currentVersion: app.getVersion() }
+    const state = this.getState()
+    for (const window of BrowserWindow.getAllWindows()) {
+      if (!window.isDestroyed()) window.webContents.send('app-update:state', state)
+    }
+    for (const listener of this.listeners) listener(state)
+    return state
+  }
+}
+
+export const appUpdateService = new AppUpdateService()

src/main/services/bootstrap-cache.ts

@@ -369,6 +369,13 @@ export function flushBootstrapCacheWritesSync(): void {
   }
 }
 
+export function clearBootstrapCache(): void {
+  for (const timer of writeTimers.values()) clearTimeout(timer)
+  writeTimers.clear()
+  writeQueues.clear()
+  memoryCache.clear()
+}
+
 export function saveCachedMessages(
   accountRoot: string,
   userMd5: string,

src/main/services/cache-service.ts

@@ -0,0 +1,73 @@
+import { app, session } from 'electron'
+import fs from 'fs-extra'
+import path from 'path'
+import { clearBootstrapCache } from './bootstrap-cache'
+import type { CacheClearScope, CacheSummary, CacheSummaryItem } from '../../shared/cache'
+
+export type { CacheClearScope } from '../../shared/cache'
+
+const BOOTSTRAP_CACHE_DIR = path.join(app.getPath('userData'), 'cache', 'bootstrap')
+
+function inspectDirectory(directory: string): { sizeBytes: number; fileCount: number } {
+  if (!fs.existsSync(directory)) return { sizeBytes: 0, fileCount: 0 }
+  let sizeBytes = 0
+  let fileCount = 0
+  const visit = (current: string): void => {
+    let entries: fs.Dirent[]
+    try {
+      entries = fs.readdirSync(current, { withFileTypes: true })
+    } catch {
+      return
+    }
+    for (const entry of entries) {
+      const target = path.join(current, entry.name)
+      if (entry.isDirectory()) {
+        visit(target)
+      } else if (entry.isFile()) {
+        try {
+          sizeBytes += fs.statSync(target).size
+          fileCount += 1
+        } catch {
+          // A cache file can disappear while it is being inspected.
+        }
+      }
+    }
+  }
+  visit(directory)
+  return { sizeBytes, fileCount }
+}
+
+export function getCacheSummary(): CacheSummary {
+  const bootstrap = inspectDirectory(BOOTSTRAP_CACHE_DIR)
+  const electron = inspectDirectory(path.join(app.getPath('userData'), 'Cache'))
+  const items: CacheSummaryItem[] = [
+    {
+      id: 'bootstrap',
+      label: '启动与聊天缓存',
+      description: '联系人、头像、群成员和最近聊天记录的本地副本。',
+      ...bootstrap
+    },
+    {
+      id: 'electron',
+      label: '应用临时缓存',
+      description: 'Electron 页面资源缓存，清理后会自动重新生成。',
+      ...electron
+    }
+  ]
+  return {
+    items,
+    totalBytes: items.reduce((total, item) => total + item.sizeBytes, 0),
+    updatedAt: Date.now()
+  }
+}
+
+export async function clearCache(scope: CacheClearScope): Promise<CacheSummary> {
+  if (scope === 'bootstrap' || scope === 'all') {
+    clearBootstrapCache()
+    await fs.remove(BOOTSTRAP_CACHE_DIR)
+  }
+  if (scope === 'electron' || scope === 'all') {
+    await session.defaultSession.clearCache()
+  }
+  return getCacheSummary()
+}

src/main/services/settings-store.ts

@@ -32,6 +32,9 @@ export interface AppSettings {
   debugEnabled: boolean
   autoLogin: boolean
   autoLoginPreferenceSet: boolean
+  appearanceTheme: 'system' | 'light' | 'dark'
+  compactMode: boolean
+  showStartupProgress: boolean
 }
 
 function getDefaultDbRoot(): string {
@@ -112,7 +115,10 @@ const DEFAULT_SETTINGS: AppSettings = {
       .trim()
       .toLowerCase()
   ),
-  autoLoginPreferenceSet: false
+  autoLoginPreferenceSet: false,
+  appearanceTheme: 'system',
+  compactMode: false,
+  showStartupProgress: true
 }
 
 const SETTINGS_FILE = path.join(

src/main/services/skill-resource-service.ts

@@ -1,6 +1,7 @@
 import { app, shell } from 'electron'
 import { existsSync, promises as fs } from 'fs'
 import { dirname, join } from 'path'
+import { isPackagedRuntime } from '../runtime-mode'
 
 const SKILL_RELATIVE_PATH = join('skill', 'wechatexplorer-reader', 'SKILL.md')
 const GITHUB_URL =
@@ -23,7 +24,7 @@ function getSkillCandidates(): { path: string; source: 'development' | 'bundled'
     join(dirname(app.getAppPath()), SKILL_RELATIVE_PATH),
     join(dirname(process.execPath), 'resources', SKILL_RELATIVE_PATH)
   ]
-  return app.isPackaged
+  return isPackagedRuntime()
     ? bundledPaths.map((path) => ({ path, source: 'bundled' as const }))
     : [
         { path: developmentPath, source: 'development' as const },

src/main/voice-service.ts

@@ -2,6 +2,7 @@ import { app } from 'electron'
 import { join } from 'path'
 import { existsSync } from 'fs'
 import { Wcdb4Client } from './wcdb4-client'
+import { isPackagedRuntime } from './runtime-mode'
 
 export class VoiceService {
   private wcdb4Client: Wcdb4Client
@@ -101,7 +102,7 @@ export class VoiceService {
   private async decodeSilkToPcm(silkData: Buffer, sampleRate: number): Promise<Buffer | null> {
     try {
       let wasmPath: string
-      if (app.isPackaged) {
+      if (isPackagedRuntime()) {
         wasmPath = join(
           process.resourcesPath,
           'app.asar.unpacked',

src/preload/index.d.ts

@@ -39,6 +39,8 @@ import type {
 } from '../shared/image-insight'
 import type { AgentHubActionResult, AgentHubLogEntry, AgentHubStatus } from '../shared/agent-hub'
 import type { AppLogEntry } from '../shared/app-log'
+import type { AppUpdateCheckResult, AppUpdateState } from '../shared/app-update'
+import type { CacheSummary } from '../shared/cache'
 import type { ExportRequest, ExportJobProgress, ExportResult } from '../shared/export'
 
 export type ParsedContent =
@@ -103,6 +105,13 @@ declare global {
       writeAppLog: (entry: AppLogEntry) => Promise<void>
       getAppLogPath: () => Promise<string>
       revealAppLog: () => Promise<void>
+      getAppUpdateState: () => Promise<AppUpdateState>
+      checkAppUpdate: () => Promise<AppUpdateCheckResult>
+      downloadAppUpdate: () => Promise<AppUpdateCheckResult>
+      installAppUpdate: () => Promise<{ success: boolean; error?: string }>
+      onAppUpdateState: (callback: (state: AppUpdateState) => void) => () => void
+      getCacheSummary: () => Promise<CacheSummary>
+      clearCache: (scope: 'bootstrap' | 'electron' | 'all') => Promise<CacheSummary>
       initDb: (
         key: string
       ) => Promise<boolean | { success: boolean; error?: string; monitoring?: boolean }>
@@ -255,6 +264,9 @@ declare global {
           debugEnabled: boolean
           autoLogin: boolean
           autoLoginPreferenceSet: boolean
+          appearanceTheme: 'system' | 'light' | 'dark'
+          compactMode: boolean
+          showStartupProgress: boolean
           imageXorKey: string
           imageAesKey: string
         }
@@ -283,6 +295,9 @@ declare global {
           debugEnabled: boolean
           autoLogin: boolean
           autoLoginPreferenceSet: boolean
+          appearanceTheme: 'system' | 'light' | 'dark'
+          compactMode: boolean
+          showStartupProgress: boolean
           imageXorKey: string
           imageAesKey: string
         }
@@ -299,6 +314,9 @@ declare global {
           debugEnabled: boolean
           autoLogin: boolean
           autoLoginPreferenceSet: boolean
+          appearanceTheme: 'system' | 'light' | 'dark'
+          compactMode: boolean
+          showStartupProgress: boolean
           imageXorKey: string
           imageAesKey: string
         }>
@@ -313,6 +331,9 @@ declare global {
           debugEnabled: boolean
           autoLogin: boolean
           autoLoginPreferenceSet: boolean
+          appearanceTheme: 'system' | 'light' | 'dark'
+          compactMode: boolean
+          showStartupProgress: boolean
           imageXorKey: string
           imageAesKey: string
         }

src/preload/index.ts

@@ -17,6 +17,8 @@ import type {
 } from '../shared/image-insight'
 import type { AgentHubLogEntry, AgentHubStatus } from '../shared/agent-hub'
 import type { AppLogEntry } from '../shared/app-log'
+import type { AppUpdateState } from '../shared/app-update'
+import type { CacheSummary } from '../shared/cache'
 import type { ExportRequest, ExportJobProgress } from '../shared/export'
 
 // 渲染器的自定义 API
@@ -24,6 +26,19 @@ const api = {
   writeAppLog: (entry: AppLogEntry) => ipcRenderer.invoke('app-log:write', entry),
   getAppLogPath: () => ipcRenderer.invoke('app-log:getPath'),
   revealAppLog: () => ipcRenderer.invoke('app-log:reveal'),
+  getAppUpdateState: (): Promise<AppUpdateState> => ipcRenderer.invoke('app-update:getState'),
+  checkAppUpdate: () => ipcRenderer.invoke('app-update:check'),
+  downloadAppUpdate: () => ipcRenderer.invoke('app-update:download'),
+  installAppUpdate: () => ipcRenderer.invoke('app-update:install'),
+  onAppUpdateState: (callback: (state: AppUpdateState) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, state: AppUpdateState): void =>
+      callback(state)
+    ipcRenderer.on('app-update:state', listener)
+    return () => ipcRenderer.removeListener('app-update:state', listener)
+  },
+  getCacheSummary: (): Promise<CacheSummary> => ipcRenderer.invoke('cache:getSummary'),
+  clearCache: (scope: 'bootstrap' | 'electron' | 'all'): Promise<CacheSummary> =>
+    ipcRenderer.invoke('cache:clear', scope),
   initDb: (key: string) => ipcRenderer.invoke('db:init', key),
   getBootstrapCache: () => ipcRenderer.invoke('db:getBootstrapCache'),
   getStartupCache: () => ipcRenderer.invoke('db:getStartupCache'),

src/renderer/src/App.tsx

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

src/renderer/src/components/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'
-
-type ExportRange = 'today' | 'threeDays' | 'sevenDays' | 'custom'
-type ExportFormat = 'html' | 'csv' | 'json' | 'markdown'
-type ExportStatus = 'idle' | 'running' | 'completed'
-
-interface GroupMemberName {
-  wxid: string
-  nickname: string
-  groupNickname: string
-  wechatNickname: string
-  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'
-  })
-}
+import { ExportContactPanel } from './ExportContactPanel'
+import { ExportPreviewPanel } from './ExportPreviewPanel'
+import { ExportTaskCenter } from './ExportTaskCenter'
+import type {
+  ExportFormat,
+  ExportRange,
+  ExportStatus,
+  ExportWorkspaceProps,
+  GroupMemberName
+} from './exportTypes'
+import { displayName, formatLabels, formatOrder, messageKinds } from './exportUtils'
 
 export function ExportWorkspace({
   contacts,
@@ -313,97 +259,29 @@ export function ExportWorkspace({
 
   return (
     <div className="export-workspace">
-      <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) => setContactFilter(event.target.value)}
-              placeholder="搜索群聊、联系人或 wxid"
-              aria-label="搜索聊天"
+      <ExportContactPanel
+        contacts={contacts}
+        filteredContacts={filteredContacts}
+        activeContact={activeContact}
+        selfInfo={selfInfo}
+        dbReady={dbReady}
+        contactFilter={contactFilter}
+        contactType={contactType}
+        onContactFilterChange={setContactFilter}
+        onContactTypeChange={setContactType}
+        onSelectContact={onSelectContact}
+        onOpenSettings={onOpenSettings}
       />
-          </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)}>
-            任务中心{taskCount > 0 ? ` (${taskCount})` : ''}
-          </button>
-          {taskCenterOpen && (
-            <section className="export-task-center">
-              <div className="export-section-heading"><h3>导出任务</h3><span>{exportTasks.length} 条记录</span></div>
-              {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>
-          )}
+          <ExportTaskCenter
+            open={taskCenterOpen}
+            taskCount={taskCount}
+            tasks={exportTasks}
+            onToggle={() => setTaskCenterOpen((open) => !open)}
+            onCancel={(taskJobId) => void onCancelExport(taskJobId)}
+          />
           <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}` : ''}`}>
-        {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={() => {
-                void window.api.cancelExport(jobId)
+      <ExportPreviewPanel
+        status={status}
+        previewItems={previewItems}
+        previewMediaCount={previewMediaCount}
+        previewBytes={previewBytes}
+        selfInfo={selfInfo}
+        progress={progress}
+        jobId={jobId}
+        onCancel={(exportJobId) => {
+          void window.api.cancelExport(exportJobId)
           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>
+        onReveal={(path) => void window.api.revealExport(path)}
+      />
     </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/layout/AppShell.tsx

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

src/renderer/src/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'
-type SearchScope = 'global' | 'conversation'
-type SearchRange = 'today' | '7d' | '30d' | 'all'
-type SearchIntent = 'general' | 'topic' | 'participants' | 'mixed'
-
-interface EvidenceItem {
-  contact: Contact
-  message: Message
-}
-
-interface AISearchCacheRecord {
-  version: 1
-  key: string
-  createdAt: number
-  answer: string
-  evidence: EvidenceItem[]
-  senderNames: Record<string, string>
-  messageCount: number
-}
-
-interface GroupMemberName {
-  wxid: string
-  nickname?: string
-  groupNickname?: string
-  remark?: string
-  wechatNickname?: string
-}
-
-interface SenderDirectory {
-  displayNames: Record<string, string>
-  aliases: Record<string, string[]>
-}
-
-interface SearchQueryPlan {
-  intent: SearchIntent
-  keywords: string[]
-  variants: string[]
-  source: 'local' | 'ai' | 'hybrid'
-}
-
-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>
-  })
+import type {
+  AISearchCacheRecord,
+  AISearchWorkspaceProps,
+  EvidenceItem,
+  GroupMemberName,
+  SearchPassSummary,
+  SearchRange,
+  SearchScope,
+  SearchStage,
+  SenderDirectory
+} from './searchTypes'
+import {
+  RANGE_LABELS,
+  SEARCH_CACHE_KEY,
+  SEARCH_HISTORY_KEY,
+  buildLocalSearchPlan,
+  buildSearchCacheKey,
+  compactCacheItem,
+  currentTimestamp,
+  evidenceIdentity,
+  formatMemberName,
+  formatMessageDate,
+  formatMessageTime,
+  getRangeStart,
+  includesSearchAlias,
+  messageDateKey,
+  messageIdentity,
+  messageText,
+  mergeSearchPlans,
+  normalizeSearchText,
+  parseSearchCacheKey,
+  parseSearchPlanResponse,
+  readSearchCache,
+  readSearchCacheByQuery,
+  selectEvenly,
+  selectEvidenceByDate,
+  senderName,
+  writeSearchCache
+} from './searchUtils'
+import { renderMarkdown } from './searchMarkdown'
 
 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/features/settings/SettingsWorkspace.tsx

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

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

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

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

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

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

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

src/renderer/src/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 './assets/main.css'
-import './styles/search.css'
-import './styles/archive.css'
-import './styles/settings-advanced.css'
+import './styles/index.scss'
 
 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,11 +1,11 @@
 .archive-jump-target-group {
   z-index: 2;
-}
 
   .archive-jump-message {
     z-index: 1;
     animation: archive-jump-flash 0.72s ease-in-out 2;
   }
+}
 
 @keyframes archive-jump-flash {
   0%,
@@ -20,9 +20,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .archive-jump-target-group {
     .archive-jump-message {
       outline: 3px solid rgba(38, 128, 103, 0.58);
       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,18 @@
+@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';
+@use './settings-preferences';
+@use './theme';

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,25 +21,22 @@
   padding: 14px 22px 12px;
   border-bottom: 1px solid var(--wxex-border);
   background: rgba(250, 251, 250, 0.94);
-}
 
-.ai-search-header h1,
-.ai-search-header p {
+  h1 {
     margin: 0;
-}
-
-.ai-search-header h1 {
     color: var(--wxex-text-primary);
     font-size: 20px;
     font-weight: 700;
     line-height: 28px;
   }
 
-.ai-search-header p {
+  p {
+    margin: 0;
     color: var(--wxex-text-secondary);
     font-size: 12px;
     line-height: 18px;
   }
+}
 
 .ai-search-kicker {
   display: block;
@@ -57,9 +54,8 @@
   color: var(--wxex-text-secondary);
   font-size: 12px;
   line-height: 18px;
-}
 
-.ai-search-model-status > span:first-child {
+  > span:first-child {
     width: 8px;
     height: 8px;
     flex: 0 0 auto;
@@ -67,20 +63,29 @@
     background: var(--wxex-text-muted);
   }
 
-.ai-search-model-status > span.ready {
+  > span {
+    &.ready {
       background: var(--wxex-success);
     }
 
-.ai-search-model-status > span.warning {
+    &.warning {
       background: var(--wxex-warning);
     }
+  }
 
-.ai-search-model-status > span:nth-child(2) {
+  > span:nth-child(2) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  button {
+    padding: 5px 8px;
+    color: var(--wxex-brand);
+    white-space: nowrap;
+  }
+}
+
 .ai-search-model-status button,
 .ai-search-result-actions button,
 .ai-search-composer 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,27 +133,28 @@
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 14px;
-}
 
-.ai-search-panel-heading div {
+  div {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
 
-.ai-search-panel-heading span:first-child {
+  span:first-child {
     color: var(--wxex-text-muted);
     font-size: 10px;
     line-height: 15px;
   }
 
-.ai-search-panel-heading strong {
+  strong {
     color: var(--wxex-text-primary);
     font-size: 14px;
     font-weight: 700;
     line-height: 20px;
   }
 
+}
+
 .ai-search-local-badge,
 .ai-search-count-badge {
   border-radius: var(--wxex-radius-sm);
@@ -179,33 +179,17 @@
   padding: 3px;
   border-radius: var(--wxex-radius-sm);
   background: var(--wxex-bg-elevated);
-}
 
-.ai-search-scope-toggle button,
-.ai-search-range-grid button,
-.ai-search-history button {
-  border: 0;
-  border-radius: var(--wxex-radius-sm);
-  background: transparent;
-  color: var(--wxex-text-secondary);
-  cursor: pointer;
-  font: inherit;
-}
-
-.ai-search-scope-toggle button {
+  button {
     padding: 7px 4px;
     font-size: 11px;
-}
 
-.ai-search-scope-toggle button.active,
-.ai-search-range-grid button.active {
+    &.active {
       background: var(--wxex-brand);
-  color: var(--wxex-brand);
+      color: #fff;
       font-weight: 700;
     }
-
-.ai-search-scope-toggle button.active {
-  color: #fff;
+  }
 }
 
 .ai-search-scope-help {
@@ -235,16 +219,15 @@
   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;
     height: 15px;
     flex: 0 0 auto;
     color: var(--wxex-text-muted);
   }
 
-.ai-search-filter-input input {
+  input {
     width: 100%;
     min-width: 0;
     border: 0;
@@ -254,6 +237,7 @@
     font: inherit;
     font-size: 11px;
   }
+}
 
 .ai-search-contact-list {
   display: flex;
@@ -277,12 +261,12 @@
   cursor: pointer;
   font: inherit;
   text-align: left;
-}
 
-.ai-search-contact:hover,
-.ai-search-contact.active {
+  &:hover,
+  &.active {
     background: var(--wxex-brand-soft);
   }
+}
 
 .ai-search-contact-avatar {
   width: 28px;
@@ -296,13 +280,13 @@
   color: var(--wxex-brand);
   font-size: 12px;
   font-weight: 700;
-}
 
-.ai-search-contact-avatar img {
+  img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
+}
 
 .ai-search-contact > span:last-child {
   display: flex;
@@ -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,40 +375,46 @@
   color: var(--wxex-text-secondary);
   font-size: 10px;
   line-height: 16px;
-}
 
-.ai-search-filter-note span {
+  span {
     color: var(--wxex-success);
   }
+}
 
 .ai-search-history {
   margin-top: 18px;
-}
 
-.ai-search-history button {
+  button {
     min-width: 0;
     padding: 5px 0;
     overflow: hidden;
+    border: 0;
+    border-radius: var(--wxex-radius-sm);
+    background: transparent;
+    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);
     }
+  }
+}
 
 .ai-search-history-item {
   display: flex;
   align-items: center;
   gap: 5px;
   min-width: 0;
-}
 
-.ai-search-history-item > button:first-child {
+  > button:first-child {
     flex: 1;
   }
+}
 
 .ai-search-history-delete {
   width: 20px;
@@ -434,12 +429,12 @@
   font-size: 16px !important;
   line-height: 18px;
   text-align: center !important;
-}
 
-.ai-search-history-delete:hover {
+  &:hover {
     background: var(--wxex-brand-soft);
     color: var(--wxex-danger, #b34d46) !important;
   }
+}
 
 .ai-search-main {
   display: flex;
@@ -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-loading h2,
-.ai-search-insufficient h2 {
-  margin: 7px 0 8px;
-  color: var(--wxex-text-primary);
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 26px;
-}
+.ai-search-insufficient {
+  button {
+    margin-top: 20px;
+    padding: 8px 12px;
+    font-size: 11px;
 
-.ai-search-empty p,
-.ai-search-loading p,
-.ai-search-insufficient p {
-  max-width: 440px;
-  margin: 0;
-  color: var(--wxex-text-secondary);
-  font-size: 12px;
-  line-height: 20px;
+    &.primary {
+      border-color: var(--wxex-brand);
+      background: var(--wxex-brand);
+      color: #fff;
+    }
+  }
 }
 
 .ai-search-prompts {
@@ -508,9 +513,8 @@
   justify-content: center;
   gap: 7px;
   margin-top: 22px;
-}
 
-.ai-search-prompts button {
+  button {
     padding: 7px 10px;
     border: 1px solid var(--wxex-border);
     border-radius: 999px;
@@ -519,12 +523,13 @@
     cursor: pointer;
     font: inherit;
     font-size: 11px;
-}
 
-.ai-search-prompts button:hover {
+    &:hover {
       border-color: var(--wxex-brand);
       color: var(--wxex-brand);
     }
+  }
+}
 
 .ai-search-spinner {
   width: 42px;
@@ -550,15 +555,16 @@
   color: var(--wxex-text-muted);
   font-size: 11px;
   text-align: left;
-}
 
-.ai-search-loading-steps .done {
+  .done {
     color: var(--wxex-success);
   }
-.ai-search-loading-steps .active {
+
+  .active {
     color: var(--wxex-brand);
     font-weight: 700;
   }
+}
 
 .ai-search-result {
   width: min(820px, calc(100% - 48px));
@@ -573,9 +579,8 @@
   gap: 18px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--wxex-border);
-}
 
-.ai-search-result-header h2 {
+  h2 {
     margin: 6px 0 5px;
     color: var(--wxex-text-primary);
     font-size: 18px;
@@ -583,12 +588,13 @@
     line-height: 26px;
   }
 
-.ai-search-result-header p {
+  p {
     margin: 0;
     color: var(--wxex-text-muted);
     font-size: 11px;
     line-height: 16px;
   }
+}
 
 .ai-search-result-actions {
   display: flex;
@@ -596,20 +602,18 @@
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 6px;
-}
 
-.ai-search-result-actions button {
+  button {
     padding: 7px 9px;
     font-size: 11px;
-}
 
-.ai-search-result-actions button.primary,
-.ai-search-composer button.primary,
-.ai-search-insufficient button.primary {
+    &.primary {
       border-color: var(--wxex-brand);
       background: var(--wxex-brand);
       color: #fff;
     }
+  }
+}
 
 .ai-search-summary-block {
   margin-top: 22px;
@@ -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,23 +676,25 @@
   line-height: 15px;
 }
 
-.ai-search-composer-meta strong {
+.ai-search-composer-meta {
+  strong {
     color: var(--wxex-brand);
     font-weight: 700;
   }
-.ai-search-composer-meta em {
+
+  em {
     font-style: normal;
     color: var(--wxex-text-secondary);
   }
+}
 
 .ai-search-composer-row {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   margin-top: 7px;
-}
 
-.ai-search-composer textarea {
+  textarea {
     width: 100%;
     min-width: 0;
     resize: none;
@@ -707,27 +707,37 @@
     font: inherit;
     font-size: 12px;
     line-height: 18px;
-}
 
-.ai-search-composer textarea:focus {
+    &:focus {
       border-color: var(--wxex-brand);
     }
-.ai-search-composer button {
+  }
+
+  button {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 9px 13px;
     white-space: nowrap;
     font-size: 11px;
-}
-.ai-search-composer button span {
+
+    span {
       font-size: 16px;
       line-height: 12px;
     }
-.ai-search-composer button:disabled {
+
+    &.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;
   margin-top: 6px;

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/settings-preferences.scss

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

src/renderer/src/styles/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);
+}

src/renderer/src/styles/theme.scss

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

src/shared/app-update.ts

@@ -0,0 +1,25 @@
+export type AppUpdateStatus =
+  | 'idle'
+  | 'checking'
+  | 'available'
+  | 'not-available'
+  | 'downloading'
+  | 'downloaded'
+  | 'error'
+  | 'unsupported'
+
+export interface AppUpdateState {
+  status: AppUpdateStatus
+  currentVersion: string
+  version?: string
+  percent?: number
+  transferred?: number
+  total?: number
+  bytesPerSecond?: number
+  message?: string
+}
+
+export interface AppUpdateCheckResult {
+  success: boolean
+  state: AppUpdateState
+}

src/shared/cache.ts

@@ -0,0 +1,15 @@
+export type CacheClearScope = 'bootstrap' | 'electron' | 'all'
+
+export interface CacheSummaryItem {
+  id: 'bootstrap' | 'electron'
+  label: string
+  description: string
+  sizeBytes: number
+  fileCount: number
+}
+
+export interface CacheSummary {
+  items: CacheSummaryItem[]
+  totalBytes: number
+  updatedAt: number
+}