improvement(desktop): 优化标题栏和页面背景

- Electron 改用 hidden titleBarOverlay 保留原生窗口控制按钮
- 增加标题栏主题同步 IPC，随明暗主题更新按钮颜色
- 桌面标题栏在 overlay 模式下隐藏自绘窗口按钮
- 按页面类型区分应用外壳背景，年度总结使用独立暖色底色
- 设置弹窗改为并行刷新，减少打开时阻塞

Author: 2977094657

desktop/src/main.cjs

@@ -34,6 +34,7 @@ const {
 const DEFAULT_BACKEND_HOST = "127.0.0.1";
 const LAN_BACKEND_HOST = "0.0.0.0";
 const DEFAULT_BACKEND_PORT = parsePort(process.env.WECHAT_TOOL_PORT) ?? 10392;
+const DESKTOP_TITLEBAR_HEIGHT = 32;
 
 let backendProc = null;
 let wcdbSidecarProc = null;
@@ -49,6 +50,32 @@ let backendPortChangeInProgress = false;
 let outputDirChangeInProgress = false;
 let outputDirChangeProgressState = null;
 
+function normalizeTitleBarTheme(value) {
+  return String(value || "").trim().toLowerCase() === "dark" ? "dark" : "light";
+}
+
+function getTitleBarOverlayOptions(theme) {
+  const normalized = normalizeTitleBarTheme(theme);
+  return {
+    // Keep native window controls, but let the renderer/theme show through instead of
+    // Electron painting the default gray title-bar strip behind the buttons.
+    color: "rgba(0, 0, 0, 0)",
+    symbolColor: normalized === "dark" ? "#d0d0d0" : "#111111",
+    height: DESKTOP_TITLEBAR_HEIGHT,
+  };
+}
+
+function setWindowTitleBarTheme(win, theme) {
+  if (!win || typeof win.setTitleBarOverlay !== "function") return false;
+  try {
+    win.setTitleBarOverlay(getTitleBarOverlayOptions(theme));
+    return true;
+  } catch (err) {
+    logMain(`[main] setTitleBarOverlay failed: ${err?.message || err}`);
+    return false;
+  }
+}
+
 const gotSingleInstanceLock = app.requestSingleInstanceLock();
 if (!gotSingleInstanceLock) {
   // If we allow a second instance to boot it will try to spawn another backend on the same port.
@@ -2207,7 +2234,8 @@ function createMainWindow() {
     height: 800,
     minWidth: 980,
     minHeight: 700,
-    frame: false,
+    titleBarStyle: "hidden",
+    titleBarOverlay: getTitleBarOverlayOptions("light"),
     backgroundColor: "#EDEDED",
     webPreferences: {
       preload: path.join(__dirname, "preload.cjs"),
@@ -2295,6 +2323,11 @@ function registerWindowIpc() {
     return !!win?.isMaximized();
   });
 
+  ipcMain.handle("window:setTitleBarTheme", (event, theme) => {
+    const win = getWin(event);
+    return setWindowTitleBarTheme(win, theme);
+  });
+
   ipcMain.handle("app:getAutoLaunch", () => {
     try {
       const settings = app.getLoginItemSettings();

desktop/src/preload.cjs

@@ -63,10 +63,12 @@ if (typeof window !== "undefined") {
 contextBridge.exposeInMainWorld("wechatDesktop", {
   // Marker used by the frontend to distinguish the Electron desktop shell from the pure web build.
   __brand: "WeChatDataAnalysisDesktop",
+  windowControlsMode: "overlay",
   minimize: () => ipcRenderer.invoke("window:minimize"),
   toggleMaximize: () => ipcRenderer.invoke("window:toggleMaximize"),
   close: () => ipcRenderer.invoke("window:close"),
   isMaximized: () => ipcRenderer.invoke("window:isMaximized"),
+  setTitleBarTheme: (theme) => ipcRenderer.invoke("window:setTitleBarTheme", String(theme || "")),
   isDebugEnabled: () => ipcRenderer.invoke("app:isDebugEnabled"),
   logDebug: (scope, message, details = {}) => sendDebugLog(scope, message, details),
 

frontend/app.vue

@@ -84,8 +84,31 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', updateDprVar)
 })
 
+const setupShellBackgroundRoutes = new Set([
+  '/',
+  '/import',
+  '/decrypt',
+  '/detection-result',
+  '/decrypt-result'
+])
+
+const useSetupShellBackground = computed(() => {
+  const path = String(route.path || '')
+  return setupShellBackgroundRoutes.has(path)
+})
+
+const useWrappedShellBackground = computed(() => {
+  const path = String(route.path || '')
+  return path === '/wrapped' || path.startsWith('/wrapped/')
+})
+
 const rootClass = computed(() => {
-  const base = 'theme-app-shell'
+  let base = 'theme-app-shell'
+  if (useSetupShellBackground.value) {
+    base += ' theme-app-shell-setup'
+  } else if (useWrappedShellBackground.value) {
+    base += ' theme-app-shell-wrapped'
+  }
   return isDesktop.value
     ? `wechat-desktop h-screen flex overflow-hidden ${base}`
     : `h-screen flex overflow-hidden ${base}`
@@ -116,7 +139,7 @@ const showSidebar = computed(() => {
   --sidebar-rail-icon: 24px;
 }
 
-/* Electron 桌面端使用自绘标题栏（frame: false）。
+/* Electron 桌面端使用隐藏标题栏 + 原生窗口控制按钮 overlay。
  * 页面里如果继续用 Tailwind 的 h-screen/min-h-screen（100vh），会把标题栏高度叠加进去，从而出现外层滚动条。
  * 这里把 “screen” 在桌面端视为内容区高度（100%），让标题栏高度自然内嵌在布局里。 */
 .wechat-desktop {
@@ -135,13 +158,23 @@ const showSidebar = computed(() => {
 }
 
 .theme-app-shell {
+  background: var(--app-shell-bg);
+}
+
+.theme-app-shell-setup {
   background:
     radial-gradient(circle at top left, rgba(7, 193, 96, 0.08), transparent 32%),
     radial-gradient(circle at top right, rgba(16, 174, 239, 0.08), transparent 36%),
     linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 45%, #dcfce7 100%);
 }
 
-html[data-theme='dark'] .theme-app-shell {
+.theme-app-shell-wrapped {
+  background: #fffdf7;
+}
+
+html[data-theme='dark'] .theme-app-shell,
+html[data-theme='dark'] .theme-app-shell-setup,
+html[data-theme='dark'] .theme-app-shell-wrapped {
   background: var(--app-shell-bg);
 }
 </style>

frontend/components/DesktopTitleBar.vue

@@ -2,7 +2,7 @@
   <div v-if="isDesktop" class="desktop-titlebar" @dblclick="toggleMaximize">
     <div class="flex-1" />
 
-    <div class="desktop-titlebar-controls">
+    <div v-if="!usesNativeWindowControls" class="desktop-titlebar-controls">
       <button
         class="desktop-titlebar-btn"
         type="button"
@@ -39,9 +39,12 @@
 <script setup>
 // Keep SSR/client initial DOM consistent; enable desktop titlebar after mount.
 const isDesktop = ref(false)
+const usesNativeWindowControls = ref(false)
 
 onMounted(() => {
-  isDesktop.value = !!window?.wechatDesktop
+  const api = window?.wechatDesktop
+  isDesktop.value = !!api
+  usesNativeWindowControls.value = api?.windowControlsMode === 'overlay'
 })
 
 const minimize = () => {
@@ -60,7 +63,7 @@ const closeWindow = () => {
 <style scoped>
 .desktop-titlebar {
   height: var(--desktop-titlebar-height, 32px);
-  background: var(--desktop-titlebar-bg);
+  background: transparent;
   display: flex;
   align-items: stretch;
   flex-shrink: 0;
@@ -92,19 +95,19 @@ const closeWindow = () => {
 }
 
 .desktop-titlebar-btn:hover {
-  background: var(--desktop-titlebar-hover);
+  background: transparent;
 }
 
 .desktop-titlebar-btn:active {
-  background: var(--desktop-titlebar-active);
+  background: transparent;
 }
 
 .desktop-titlebar-btn-close:hover {
-  background: #e81123;
+  background: transparent;
 }
 
 .desktop-titlebar-btn-close:active {
-  background: #c50f1f;
+  background: transparent;
 }
 
 .desktop-titlebar-icon {
@@ -158,6 +161,6 @@ const closeWindow = () => {
 
 .desktop-titlebar-btn-close:hover .desktop-titlebar-icon-close::before,
 .desktop-titlebar-btn-close:hover .desktop-titlebar-icon-close::after {
-  background: #fff;
+  background: #e81123;
 }
 </style>

frontend/components/SettingsDialog.vue

@@ -363,25 +363,6 @@
           <section ref="startupSectionRef">
             <div class="mb-2.5 text-[12px] font-bold text-[#999] tracking-widest">启动偏好</div>
             <div class="overflow-hidden rounded-[10px] border border-[#e7e7e7] bg-white divide-y divide-[#ececec]">
-              <div class="px-3.5 py-3">
-                <div class="flex items-center justify-between gap-3">
-                  <div class="min-w-0 flex-1">
-                    <div class="text-[13px] font-medium text-[#222]">启动后自动开启实时获取</div>
-                    <div class="mt-0.5 text-[11px] text-[#909090]">进入聊天页后自动打开“实时开关”</div>
-                  </div>
-                  <button
-                    type="button"
-                    role="switch"
-                    :aria-checked="desktopAutoRealtime"
-                    class="settings-switch shrink-0"
-                    :class="switchTrackClass(desktopAutoRealtime)"
-                    @click="toggleDesktopAutoRealtime"
-                  >
-                    <span class="settings-switch-thumb" :class="desktopAutoRealtime ? 'translate-x-[20px]' : 'translate-x-0'" />
-                  </button>
-                </div>
-              </div>
-
               <div class="px-3.5 py-3">
                 <div class="flex items-center justify-between gap-3">
                   <div class="min-w-0 flex-1">
@@ -459,7 +440,7 @@
 </template>
 
 <script setup>
-import { DESKTOP_SETTING_AUTO_REALTIME_KEY, DESKTOP_SETTING_DEFAULT_TO_CHAT_KEY, SNS_SETTING_USE_CACHE_KEY, readLocalBoolSetting, writeLocalBoolSetting } from '~/lib/desktop-settings'
+import { DESKTOP_SETTING_DEFAULT_TO_CHAT_KEY, SNS_SETTING_USE_CACHE_KEY, readLocalBoolSetting, writeLocalBoolSetting } from '~/lib/desktop-settings'
 import { readApiBaseOverride, writeApiBaseOverride } from '~/lib/api-settings'
 import { invalidateApiBaseCache } from '~/composables/useApiBase'
 import { reportServerErrorFromError } from '~/lib/server-error-logging'
@@ -472,11 +453,12 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['close'])
+const api = useApi()
 
 const settingNavItems = [
   { key: 'desktop', label: '桌面行为', hint: '启动 / 关闭 / 端口' },
   { key: 'mcp', label: 'MCP 接入', hint: '手机 / Skill / 工具' },
-  { key: 'startup', label: '启动偏好', hint: '自动实时 / 默认页面' },
+  { key: 'startup', label: '启动偏好', hint: '默认页面' },
   { key: 'updates', label: '更新', hint: '版本信息 / 检查更新' },
   { key: 'sns', label: '朋友圈', hint: '图片缓存策略' },
 ]
@@ -498,7 +480,6 @@ const desktopVersionText = computed(() => {
   return v || '—'
 })
 
-const desktopAutoRealtime = ref(false)
 const desktopDefaultToChatWhenData = ref(false)
 const snsUseCache = ref(true)
 
@@ -1261,12 +1242,6 @@ const onDesktopBackendPortReset = async () => {
   await applyDesktopBackendPort()
 }
 
-const toggleDesktopAutoRealtime = () => {
-  const next = !desktopAutoRealtime.value
-  desktopAutoRealtime.value = next
-  writeLocalBoolSetting(DESKTOP_SETTING_AUTO_REALTIME_KEY, next)
-}
-
 const toggleDesktopDefaultToChat = () => {
   const next = !desktopDefaultToChatWhenData.value
   desktopDefaultToChatWhenData.value = next
@@ -1283,17 +1258,35 @@ const onDesktopCheckUpdates = async () => {
   await desktopUpdate.manualCheck()
 }
 
-watch(() => props.open, async (isOpen) => {
-  if (!isOpen) return
-  await refreshMcpLanAccess()
-  await refreshMcpToken()
-  await refreshMcpSkillBundle()
-  await refreshBackendLogFileInfo()
+const refreshSettingsDialogData = async () => {
+  if (!process.client || typeof window === 'undefined') return
+
+  const tasks = [
+    refreshDesktopBackendPort(),
+    refreshMcpLanAccess(),
+    refreshMcpToken(),
+    refreshBackendLogFileInfo(),
+  ]
+
+
   if (isDesktopEnv.value) {
-    await refreshDesktopOutputDir()
-    await refreshDesktopOutputDirProgress()
+    void desktopUpdate.initListeners()
+    tasks.push(refreshDesktopAutoLaunch())
+    tasks.push(refreshDesktopCloseBehavior())
+    tasks.push(refreshDesktopOutputDir())
+    tasks.push(refreshDesktopOutputDirProgress())
   }
-}, { immediate: true })
+
+  await Promise.allSettled(tasks)
+
+  // skill bundle 依赖 token / access host；先让弹窗可交互，再后台补齐这块文本。
+  void refreshMcpSkillBundle()
+}
+
+watch(() => props.open, async (isOpen) => {
+  if (!isOpen) return
+  await refreshSettingsDialogData()
+}, { immediate: false })
 
 onMounted(async () => {
   if (process.client && typeof window !== 'undefined') {
@@ -1307,21 +1300,10 @@ onMounted(async () => {
     }
   }
 
-  desktopAutoRealtime.value = readLocalBoolSetting(DESKTOP_SETTING_AUTO_REALTIME_KEY, false)
   desktopDefaultToChatWhenData.value = readLocalBoolSetting(DESKTOP_SETTING_DEFAULT_TO_CHAT_KEY, false)
   snsUseCache.value = readLocalBoolSetting(SNS_SETTING_USE_CACHE_KEY, true)
 
-  await refreshDesktopBackendPort()
-  await refreshMcpLanAccess()
-  await refreshMcpToken()
-  await refreshMcpSkillBundle()
-  if (isDesktopEnv.value) {
-    void desktopUpdate.initListeners()
-    await refreshDesktopAutoLaunch()
-    await refreshDesktopCloseBehavior()
-    await refreshDesktopOutputDir()
-    await refreshDesktopOutputDirProgress()
-  }
+  if (props.open) await refreshSettingsDialogData()
 
   await nextTick()
   onContentScroll()

frontend/components/wrapped/shared/WrappedDeckBackground.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Shared backdrop for modern "Wrapped" slides (keeps cover + cards visually consistent). -->
-  <div class="absolute inset-0 pointer-events-none select-none z-0" aria-hidden="true">
+  <div class="fixed inset-0 pointer-events-none select-none z-0" aria-hidden="true">
     <!-- Soft color blobs (brand + warm highlights) -->
     <div class="absolute -top-24 -left-24 w-80 h-80 bg-[#07C160] opacity-[0.08] rounded-full blur-3xl"></div>
     <div class="absolute -top-24 -right-24 w-96 h-96 bg-[#F2AA00] opacity-[0.06] rounded-full blur-3xl"></div>

frontend/lib/ui-theme.js

@@ -33,4 +33,7 @@ export const applyUiTheme = (theme) => {
   root.dataset.theme = normalized
   root.classList.toggle('theme-dark', normalized === UI_THEME_DARK)
   root.style.colorScheme = normalized === UI_THEME_DARK ? 'dark' : 'light'
+  try {
+    window.wechatDesktop?.setTitleBarTheme?.(normalized)
+  } catch {}
 }

frontend/pages/wrapped/index.vue

@@ -303,7 +303,8 @@ const slides = computed(() => {
   return out
 })
 
-const currentBg = '#F3FFF8'
+// 年度总结使用独立的暖纸面底色，避免继承聊天页灰底或引导页绿底。
+const currentBg = '#FFFDF7'
 const deckTrackClass = computed(() => 'z-10')
 
 const applyViewportBg = () => {