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）与产物路径说明

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">
-    <NuxtPage />
+  <div :class="rootClass">
+    <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')