feat(desktop): 新增 Electron 桌面端壳与自绘标题栏

- 新增 desktop/ Electron 工程：启动后端并等待 /api/health，就绪后加载页面；打包模式从 extraResources 读取 UI/后端
- 新增 DesktopTitleBar 组件，适配 frame:false 自绘标题栏，并修复桌面端 100vh 布局导致的外层滚动条
- chat 页面右侧布局调整更接近原生微信；detection-result 调试输出仅在 dev 环境启用
- .gitignore 忽略 desktop 构建产物/依赖，保留 .gitkeep 占位文件
- README 补充 Windows 桌面端 EXE 打包（npm run dist）与产物路径说明

.gitignore

@@ -25,3 +25,13 @@ wheels/
 /vue3-wechat-tool/
 /wechatDataBackup/
 /wx_key/
+
+# Electron desktop app
+/desktop/node_modules/
+/desktop/dist/
+/desktop/build/
+/desktop/resources/ui/*
+!/desktop/resources/ui/.gitkeep
+/desktop/resources/backend/*.exe
+!/desktop/resources/backend/.gitkeep
+/desktop/resources/icon.ico

README.md

@@ -127,6 +127,21 @@ npm run dev
 - API服务: http://localhost:8000
 - API文档: http://localhost:8000/docs
 
+## 打包为 EXE（Windows 桌面端）
+
+本项目提供基于 Electron 的桌面端安装包（NSIS `Setup.exe`）。
+
+```bash
+# 1) 安装桌面端依赖
+cd desktop
+npm install
+
+# 2) 打包（会自动：nuxt generate -> 拷贝静态资源 -> PyInstaller 打包后端 -> electron-builder 生成安装包）
+npm run dist
+```
+
+输出位置：`desktop/dist/WeChatDataAnalysis Setup <version>.exe`
+
 ## 使用指南
 
 ### 获取解密密钥

desktop/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "wechat-data-analysis-desktop",
+  "private": true,
+  "version": "0.1.0",
+  "main": "src/main.cjs",
+  "scripts": {
+    "dev": "concurrently -k -s first \"cd ..\\\\frontend && npm run dev\" \"cross-env ELECTRON_START_URL=http://localhost:3000 electron .\"",
+    "dev:static": "pushd ..\\\\frontend && npm run generate && popd && cross-env ELECTRON_START_URL=http://127.0.0.1:8000 electron .",
+    "build:ui": "pushd ..\\\\frontend && npm run generate && popd && node scripts\\\\copy-ui.cjs",
+    "build:backend": "uv sync --extra build && node scripts/build-backend.cjs",
+    "build:icon": "node scripts/build-icon.cjs",
+    "dist": "npm run build:ui && npm run build:backend && npm run build:icon && electron-builder --win --x64"
+  },
+  "build": {
+    "appId": "com.lifearchive.wechatdataanalysis",
+    "productName": "WeChatDataAnalysis",
+    "icon": "resources/icon.ico",
+    "asar": true,
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "src/**/*",
+      "package.json"
+    ],
+    "extraResources": [
+      {
+        "from": "resources/ui",
+        "to": "ui"
+      },
+      {
+        "from": "resources/backend",
+        "to": "backend"
+      }
+    ],
+    "win": {
+      "icon": "resources/icon.ico",
+      "target": [
+        "nsis"
+      ]
+    },
+    "nsis": {
+      "installerIcon": "resources/icon.ico",
+      "uninstallerIcon": "resources/icon.ico",
+      "installerHeaderIcon": "resources/icon.ico"
+    }
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "electron": "^40.0.0",
+    "electron-builder": "^26.4.0",
+    "png-to-ico": "^3.0.1"
+  }
+}

desktop/resources/backend/.gitkeep

@@ -0,0 +1 @@
+

desktop/resources/ui/.gitkeep

@@ -0,0 +1 @@
+

desktop/scripts/build-backend.cjs

@@ -0,0 +1,40 @@
+const fs = require("fs");
+const path = require("path");
+const { spawnSync } = require("child_process");
+
+const repoRoot = path.resolve(__dirname, "..", "..");
+const entry = path.join(repoRoot, "src", "wechat_decrypt_tool", "backend_entry.py");
+
+const distDir = path.join(repoRoot, "desktop", "resources", "backend");
+const workDir = path.join(repoRoot, "desktop", "build", "pyinstaller");
+const specDir = path.join(repoRoot, "desktop", "build", "pyinstaller-spec");
+
+fs.mkdirSync(distDir, { recursive: true });
+fs.mkdirSync(workDir, { recursive: true });
+fs.mkdirSync(specDir, { recursive: true });
+
+const nativeDir = path.join(repoRoot, "src", "wechat_decrypt_tool", "native");
+const addData = `${nativeDir};wechat_decrypt_tool/native`;
+
+const args = [
+  "run",
+  "pyinstaller",
+  "--noconfirm",
+  "--clean",
+  "--name",
+  "wechat-backend",
+  "--onefile",
+  "--distpath",
+  distDir,
+  "--workpath",
+  workDir,
+  "--specpath",
+  specDir,
+  "--add-data",
+  addData,
+  entry,
+];
+
+const r = spawnSync("uv", args, { cwd: repoRoot, stdio: "inherit" });
+process.exit(r.status ?? 1);
+

desktop/scripts/build-icon.cjs

@@ -0,0 +1,49 @@
+const fs = require("fs");
+const path = require("path");
+
+const pngToIco = require("png-to-ico").default;
+const { PNG } = require("pngjs");
+
+const repoRoot = path.resolve(__dirname, "..", "..");
+const srcPng = path.join(repoRoot, "frontend", "public", "logo.png");
+const dstIco = path.join(repoRoot, "desktop", "resources", "icon.ico");
+
+async function main() {
+  if (!fs.existsSync(srcPng)) {
+    // eslint-disable-next-line no-console
+    console.error(`Logo not found: ${srcPng}`);
+    process.exit(1);
+  }
+
+  const raw = fs.readFileSync(srcPng);
+  const input = PNG.sync.read(raw);
+  const size = Math.max(input.width, input.height);
+
+  const square = new PNG({ width: size, height: size });
+  const dx = Math.floor((size - input.width) / 2);
+  const dy = Math.floor((size - input.height) / 2);
+  for (let y = 0; y < input.height; y += 1) {
+    const srcStart = y * input.width * 4;
+    const srcEnd = srcStart + input.width * 4;
+    const dstStart = ((y + dy) * size + dx) * 4;
+    input.data.copy(square.data, dstStart, srcStart, srcEnd);
+  }
+
+  const tmpDir = path.join(repoRoot, "desktop", "build", "icon");
+  fs.mkdirSync(tmpDir, { recursive: true });
+  const tmpPng = path.join(tmpDir, "logo-square.png");
+  fs.writeFileSync(tmpPng, PNG.sync.write(square));
+
+  const buf = await pngToIco(tmpPng);
+  fs.mkdirSync(path.dirname(dstIco), { recursive: true });
+  fs.writeFileSync(dstIco, buf);
+
+  // eslint-disable-next-line no-console
+  console.log(`Generated icon: ${dstIco}`);
+}
+
+main().catch((err) => {
+  // eslint-disable-next-line no-console
+  console.error(err);
+  process.exit(1);
+});

desktop/scripts/copy-ui.cjs

@@ -0,0 +1,24 @@
+const fs = require("fs");
+const path = require("path");
+
+const repoRoot = path.resolve(__dirname, "..", "..");
+const srcDir = path.join(repoRoot, "frontend", ".output", "public");
+const dstDir = path.join(repoRoot, "desktop", "resources", "ui");
+
+if (!fs.existsSync(path.join(srcDir, "index.html"))) {
+  // eslint-disable-next-line no-console
+  console.error(
+    `Nuxt static output not found at ${srcDir}. Run: npm --prefix frontend run generate`
+  );
+  process.exit(1);
+}
+
+fs.mkdirSync(dstDir, { recursive: true });
+for (const ent of fs.readdirSync(dstDir, { withFileTypes: true })) {
+  if (ent.name === ".gitkeep") continue;
+  fs.rmSync(path.join(dstDir, ent.name), { recursive: true, force: true });
+}
+fs.cpSync(srcDir, dstDir, { recursive: true });
+
+// eslint-disable-next-line no-console
+console.log(`Copied UI: ${srcDir} -> ${dstDir}`);

desktop/src/main.cjs

@@ -0,0 +1,287 @@
+const { app, BrowserWindow, Menu, ipcMain, globalShortcut } = require("electron");
+const { spawn } = require("child_process");
+const fs = require("fs");
+const http = require("http");
+const path = require("path");
+
+const BACKEND_HOST = process.env.WECHAT_TOOL_HOST || "127.0.0.1";
+const BACKEND_PORT = Number(process.env.WECHAT_TOOL_PORT || "8000");
+const BACKEND_HEALTH_URL = `http://${BACKEND_HOST}:${BACKEND_PORT}/api/health`;
+
+let backendProc = null;
+
+function repoRoot() {
+  // desktop/src -> desktop -> repo root
+  return path.resolve(__dirname, "..", "..");
+}
+
+function getPackagedBackendPath() {
+  // Placeholder: in step 3 we will bundle a real backend exe into resources.
+  return path.join(process.resourcesPath, "backend", "wechat-backend.exe");
+}
+
+function startBackend() {
+  if (backendProc) return backendProc;
+
+  const env = {
+    ...process.env,
+    WECHAT_TOOL_HOST: BACKEND_HOST,
+    WECHAT_TOOL_PORT: String(BACKEND_PORT),
+  };
+
+  // In packaged mode we expect to provide the generated Nuxt output dir via env.
+  if (app.isPackaged && !env.WECHAT_TOOL_UI_DIR) {
+    env.WECHAT_TOOL_UI_DIR = path.join(process.resourcesPath, "ui");
+  }
+
+  if (app.isPackaged) {
+    if (!env.WECHAT_TOOL_DATA_DIR) {
+      env.WECHAT_TOOL_DATA_DIR = app.getPath("userData");
+    }
+    try {
+      fs.mkdirSync(env.WECHAT_TOOL_DATA_DIR, { recursive: true });
+    } catch {}
+
+    const backendExe = getPackagedBackendPath();
+    if (!fs.existsSync(backendExe)) {
+      throw new Error(
+        `Packaged backend not found: ${backendExe}. Build it into desktop/resources/backend/wechat-backend.exe`
+      );
+    }
+    backendProc = spawn(backendExe, [], {
+      cwd: env.WECHAT_TOOL_DATA_DIR,
+      env,
+      stdio: "ignore",
+      windowsHide: true,
+    });
+  } else {
+    backendProc = spawn("uv", ["run", "main.py"], {
+      cwd: repoRoot(),
+      env,
+      stdio: "inherit",
+      windowsHide: true,
+    });
+  }
+
+  backendProc.on("exit", (code, signal) => {
+    backendProc = null;
+    // eslint-disable-next-line no-console
+    console.log(`[backend] exited code=${code} signal=${signal}`);
+  });
+
+  return backendProc;
+}
+
+function stopBackend() {
+  if (!backendProc) return;
+
+  try {
+    if (process.platform === "win32" && backendProc.pid) {
+      // Ensure child tree is killed on Windows.
+      spawn("taskkill", ["/pid", String(backendProc.pid), "/T", "/F"], {
+        stdio: "ignore",
+        windowsHide: true,
+      });
+      return;
+    }
+  } catch {}
+
+  try {
+    backendProc.kill();
+  } catch {}
+}
+
+function httpGet(url) {
+  return new Promise((resolve, reject) => {
+    const req = http.get(url, (res) => {
+      // Drain data so sockets can be reused.
+      res.resume();
+      resolve(res.statusCode || 0);
+    });
+    req.on("error", reject);
+    req.setTimeout(1000, () => {
+      req.destroy(new Error("timeout"));
+    });
+  });
+}
+
+async function waitForBackend({ timeoutMs }) {
+  const startedAt = Date.now();
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    try {
+      const code = await httpGet(BACKEND_HEALTH_URL);
+      if (code >= 200 && code < 500) return;
+    } catch {}
+
+    if (Date.now() - startedAt > timeoutMs) {
+      throw new Error(`Backend did not become ready in ${timeoutMs}ms: ${BACKEND_HEALTH_URL}`);
+    }
+
+    await new Promise((r) => setTimeout(r, 300));
+  }
+}
+
+function debugEnabled() {
+  // Enable debug helpers in dev by default; in packaged builds require explicit opt-in.
+  return !app.isPackaged || process.env.WECHAT_DESKTOP_DEBUG === "1";
+}
+
+function registerDebugShortcuts() {
+  if (!debugEnabled()) return;
+
+  const toggleDevTools = () => {
+    const win = BrowserWindow.getFocusedWindow() || BrowserWindow.getAllWindows()[0];
+    if (!win) return;
+
+    if (win.webContents.isDevToolsOpened()) win.webContents.closeDevTools();
+    else win.webContents.openDevTools({ mode: "detach" });
+  };
+
+  // When we remove the app menu, Electron no longer provides the default DevTools accelerators.
+  globalShortcut.register("CommandOrControl+Shift+I", toggleDevTools);
+  globalShortcut.register("F12", toggleDevTools);
+}
+
+function getRendererConsoleLogPath() {
+  try {
+    const dir = app.getPath("userData");
+    fs.mkdirSync(dir, { recursive: true });
+    return path.join(dir, "renderer-console.log");
+  } catch {
+    return null;
+  }
+}
+
+function setupRendererConsoleLogging(win) {
+  if (!debugEnabled()) return;
+
+  const logPath = getRendererConsoleLogPath();
+  if (!logPath) return;
+
+  const append = (line) => {
+    try {
+      fs.appendFileSync(logPath, line, { encoding: "utf8" });
+    } catch {}
+  };
+
+  append(`[${new Date().toISOString()}] [main] renderer console -> ${logPath}\n`);
+
+  win.webContents.on("console-message", (_event, level, message, line, sourceId) => {
+    append(
+      `[${new Date().toISOString()}] [renderer] level=${level} ${message} (${sourceId}:${line})\n`
+    );
+  });
+}
+
+function createMainWindow() {
+  const win = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    minWidth: 980,
+    minHeight: 700,
+    frame: false,
+    backgroundColor: "#EDEDED",
+    webPreferences: {
+      preload: path.join(__dirname, "preload.cjs"),
+      contextIsolation: true,
+      nodeIntegration: false,
+      devTools: debugEnabled(),
+    },
+  });
+
+  win.on("closed", () => {
+    stopBackend();
+  });
+
+  setupRendererConsoleLogging(win);
+
+  return win;
+}
+
+async function loadWithRetry(win, url) {
+  const startedAt = Date.now();
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    try {
+      await win.loadURL(url);
+      return;
+    } catch {
+      if (Date.now() - startedAt > 60_000) throw new Error(`Failed to load URL in time: ${url}`);
+      await new Promise((r) => setTimeout(r, 500));
+    }
+  }
+}
+
+function registerWindowIpc() {
+  const getWin = (event) => BrowserWindow.fromWebContents(event.sender);
+
+  ipcMain.handle("window:minimize", (event) => {
+    const win = getWin(event);
+    win?.minimize();
+  });
+
+  ipcMain.handle("window:toggleMaximize", (event) => {
+    const win = getWin(event);
+    if (!win) return;
+    if (win.isMaximized()) win.unmaximize();
+    else win.maximize();
+  });
+
+  ipcMain.handle("window:close", (event) => {
+    const win = getWin(event);
+    win?.close();
+  });
+
+  ipcMain.handle("window:isMaximized", (event) => {
+    const win = getWin(event);
+    return !!win?.isMaximized();
+  });
+}
+
+async function main() {
+  await app.whenReady();
+  Menu.setApplicationMenu(null);
+  registerWindowIpc();
+  registerDebugShortcuts();
+
+  startBackend();
+  await waitForBackend({ timeoutMs: 30_000 });
+
+  const win = createMainWindow();
+
+  const startUrl =
+    process.env.ELECTRON_START_URL ||
+    (app.isPackaged ? `http://${BACKEND_HOST}:${BACKEND_PORT}/` : "http://localhost:3000");
+
+  await loadWithRetry(win, startUrl);
+
+  // If debug mode is enabled, auto-open DevTools so the user doesn't need menu/shortcuts.
+  if (debugEnabled()) {
+    try {
+      win.webContents.openDevTools({ mode: "detach" });
+    } catch {}
+  }
+}
+
+app.on("window-all-closed", () => {
+  stopBackend();
+  if (process.platform !== "darwin") app.quit();
+});
+
+app.on("will-quit", () => {
+  try {
+    globalShortcut.unregisterAll();
+  } catch {}
+});
+
+app.on("before-quit", () => {
+  stopBackend();
+});
+
+main().catch((err) => {
+  // eslint-disable-next-line no-console
+  console.error(err);
+  stopBackend();
+  app.quit();
+});

desktop/src/preload.cjs

@@ -0,0 +1,9 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("wechatDesktop", {
+  minimize: () => ipcRenderer.invoke("window:minimize"),
+  toggleMaximize: () => ipcRenderer.invoke("window:toggleMaximize"),
+  close: () => ipcRenderer.invoke("window:close"),
+  isMaximized: () => ipcRenderer.invoke("window:isMaximized"),
+});
+

frontend/app.vue

@@ -1,10 +1,57 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-green-50 via-emerald-50 to-green-100">
+  <div :class="rootClass">
-    <NuxtPage />
+    <DesktopTitleBar v-if="isDesktop && !isChatRoute" />
+    <div :class="contentClass">
+      <NuxtPage />
+    </div>
   </div>
 </template>
 
+<script setup>
+// In Electron the server/pre-render doesn't know about `window.wechatDesktop`.
+// If we render different DOM on server vs client, Vue hydration will keep the
+// server HTML (no patch) and the layout/CSS fixes won't apply reliably.
+// So we detect desktop onMounted and update reactively.
+const isDesktop = ref(false)
+
+onMounted(() => {
+  isDesktop.value = !!window?.wechatDesktop
+})
+
+const route = useRoute()
+const isChatRoute = computed(() => route.path?.startsWith('/chat'))
+
+const rootClass = computed(() => {
+  const base = 'bg-gradient-to-br from-green-50 via-emerald-50 to-green-100'
+  return isDesktop.value
+    ? `wechat-desktop h-screen flex flex-col overflow-hidden ${base}`
+    : `min-h-screen ${base}`
+})
+
+const contentClass = computed(() =>
+  isDesktop.value ? 'wechat-desktop-content flex-1 overflow-auto min-h-0' : ''
+)
+</script>
+
 <style>
+/* Electron 桌面端使用自绘标题栏（frame: false）。
+ * 页面里如果继续用 Tailwind 的 h-screen/min-h-screen（100vh），会把标题栏高度叠加进去，从而出现外层滚动条。
+ * 这里把 “screen” 在桌面端视为内容区高度（100%），让标题栏高度自然内嵌在布局里。 */
+.wechat-desktop {
+  --desktop-titlebar-height: 32px;
+  --desktop-titlebar-btn-width: 46px;
+}
+
+/* 仅重解释页面根节点的 h-screen/min-h-screen，避免影响页面内其它布局。
+ * 使用 100% 跟随 flex 内容区高度，避免 100vh/calc 在某些缩放比例下产生 1px 误差导致滚动条。 */
+.wechat-desktop .wechat-desktop-content > .h-screen {
+  height: 100%;
+}
+
+.wechat-desktop .wechat-desktop-content > .min-h-screen {
+  min-height: 100%;
+}
+
 /* 页面过渡动画 - 渐显渐隐效果 */
 .page-enter-active,
 .page-leave-active {
@@ -15,4 +62,4 @@
 .page-leave-to {
   opacity: 0;
 }
-</style>
+</style>

frontend/components/DesktopTitleBar.vue

@@ -0,0 +1,163 @@
+<template>
+  <div v-if="isDesktop" class="desktop-titlebar" @dblclick="toggleMaximize">
+    <div class="flex-1" />
+
+    <div class="desktop-titlebar-controls">
+      <button
+        class="desktop-titlebar-btn"
+        type="button"
+        aria-label="最小化"
+        title="最小化"
+        @click="minimize"
+      >
+        <span class="desktop-titlebar-icon desktop-titlebar-icon-minimize" />
+      </button>
+
+      <button
+        class="desktop-titlebar-btn"
+        type="button"
+        aria-label="最大化"
+        title="最大化"
+        @click="toggleMaximize"
+      >
+        <span class="desktop-titlebar-icon desktop-titlebar-icon-maximize" />
+      </button>
+
+      <button
+        class="desktop-titlebar-btn desktop-titlebar-btn-close"
+        type="button"
+        aria-label="关闭"
+        title="关闭"
+        @click="closeWindow"
+      >
+        <span class="desktop-titlebar-icon desktop-titlebar-icon-close" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Keep SSR/client initial DOM consistent; enable desktop titlebar after mount.
+const isDesktop = ref(false)
+
+onMounted(() => {
+  isDesktop.value = !!window?.wechatDesktop
+})
+
+const minimize = () => {
+  window.wechatDesktop?.minimize?.()
+}
+
+const toggleMaximize = () => {
+  window.wechatDesktop?.toggleMaximize?.()
+}
+
+const closeWindow = () => {
+  window.wechatDesktop?.close?.()
+}
+</script>
+
+<style scoped>
+.desktop-titlebar {
+  height: var(--desktop-titlebar-height, 32px);
+  background: #ededed;
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+
+  /* Allow dragging the window from the title bar area */
+  -webkit-app-region: drag;
+  user-select: none;
+}
+
+.desktop-titlebar-controls {
+  display: flex;
+  align-items: stretch;
+
+  /* Ensure buttons remain clickable */
+  -webkit-app-region: no-drag;
+}
+
+.desktop-titlebar-btn {
+  width: var(--desktop-titlebar-btn-width, 46px);
+  height: var(--desktop-titlebar-height, 32px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: default;
+}
+
+.desktop-titlebar-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.desktop-titlebar-btn:active {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.desktop-titlebar-btn-close:hover {
+  background: #e81123;
+}
+
+.desktop-titlebar-btn-close:active {
+  background: #c50f1f;
+}
+
+.desktop-titlebar-icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  position: relative;
+}
+
+.desktop-titlebar-icon-minimize::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  right: 1px;
+  /* Optical centering: the glyph was anchored to the bottom, so it looked low. */
+  top: 5px;
+  height: 1px;
+  background: #111;
+}
+
+.desktop-titlebar-icon-maximize::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  border: 1px solid #111;
+  box-sizing: border-box;
+}
+
+.desktop-titlebar-icon-close::before,
+.desktop-titlebar-icon-close::after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  right: 1px;
+  top: 50%;
+  height: 1px;
+  background: #111;
+  transform-origin: center;
+}
+
+.desktop-titlebar-icon-close::before {
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.desktop-titlebar-icon-close::after {
+  transform: translateY(-50%) rotate(-45deg);
+}
+
+.desktop-titlebar-btn-close:hover .desktop-titlebar-icon-close::before,
+.desktop-titlebar-btn-close:hover .desktop-titlebar-icon-close::after {
+  background: #fff;
+}
+</style>

frontend/pages/chat/[[username]].vue

@@ -127,7 +127,10 @@
     </div>
 
     <!-- 右侧聊天区域 -->
-    <div class="flex-1 flex min-h-0" style="background-color: #EDEDED">
+    <div class="flex-1 flex flex-col min-h-0" style="background-color: #EDEDED">
+      <!-- 桌面端将自绘标题栏放到右侧区域，避免遮挡左侧栏（更接近原生微信布局） -->
+      <DesktopTitleBar />
+      <div class="flex-1 flex min-h-0">
       <!-- 聊天主区域 -->
       <div class="flex-1 flex flex-col min-h-0 min-w-0">
         <div v-if="selectedContact" class="flex-1 flex flex-col min-h-0 relative">
@@ -1147,6 +1150,7 @@
           </template>
         </div>
       </div>
+      </div>
     </div>
 
     <div

frontend/pages/detection-result.vue

@@ -358,8 +358,8 @@ onMounted(() => {
   }
   startDetection()
   
-  // 调试：检查各元素高度
+  // 调试：检查各元素高度（仅开发环境）
-  if (process.client) {
+  if (process.dev && process.client) {
     setTimeout(() => {
       const mainContainer = document.querySelector('.min-h-screen')
       const contentContainer = document.querySelector('.max-w-6xl')