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)与产物路径说明
This commit is contained in:
2977094657
2026-01-17 18:23:52 +08:00
parent 848847c162
commit 6eb161c726
15 changed files with 5793 additions and 6 deletions

View File

@@ -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-screen100vh会把标题栏高度叠加进去从而出现外层滚动条。
* 这里把 “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>