mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-02 22:10:50 +08:00
6eb161c726
- 新增 desktop/ Electron 工程：启动后端并等待 /api/health，就绪后加载页面；打包模式从 extraResources 读取 UI/后端 - 新增 DesktopTitleBar 组件，适配 frame:false 自绘标题栏，并修复桌面端 100vh 布局导致的外层滚动条 - chat 页面右侧布局调整更接近原生微信；detection-result 调试输出仅在 dev 环境启用 - .gitignore 忽略 desktop 构建产物/依赖，保留 .gitkeep 占位文件 - README 补充 Windows 桌面端 EXE 打包（npm run dist）与产物路径说明
66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<template>
|
||
<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 {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.page-enter-from,
|
||
.page-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|