mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-03 06:20:51 +08:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user