suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 25s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Details

Browse Source
This commit is contained in:
SunCheng
2026-02-11 16:09:04 +08:00
parent 91389353ad
commit 36e0a933f6
1 changed files with 116 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
Web/src/App.vue
View File

@@ -16,51 +16,6 @@
/>
</keep-alive>
</router-view>
<van-tabbar
v-show="showTabbar"
v-model="active"
style="position: fixed !important; bottom: 0 !important; left: 0; right: 0;"
>
<van-tabbar-item
name="ccalendar"
icon="notes"
to="/calendar"
>
日历
</van-tabbar-item>
<van-tabbar-item
name="statistics"
icon="chart-trending-o"
to="/"
@click="handleTabClick('/statistics')"
>
统计
</van-tabbar-item>
<van-tabbar-item
name="balance"
icon="balance-list"
:to="messageStore.unreadCount > 0 ? '/balance?tab=message' : '/balance'"
:badge="messageStore.unreadCount || null"
@click="handleTabClick('/balance')"
>
账单
</van-tabbar-item>
<van-tabbar-item
name="budget"
icon="bill-o"
to="/budget"
@click="handleTabClick('/budget')"
>
预算
</van-tabbar-item>
<van-tabbar-item
name="setting"
icon="setting"
to="/setting"
>
设置
</van-tabbar-item>
</van-tabbar>
<GlobalAddBill
v-if="isShowAddBill"
@success="handleAddTransactionSuccess"
@@ -78,84 +33,95 @@
<span>新版本可用，点击刷新</span>
</div>
<!-- 调试信息面板 -->
<!-- 调试信息面板（检测 GlassBottomNav） -->
<div
v-if="showDebug"
class="debug-panel"
>
<div class="debug-title">
底部导航栏调试信息
GlassBottomNav 调试信息
</div>
<div class="debug-section">
<div class="debug-subtitle">
TabBar 存在性检查
容器检查 (.glass-nav-container)
</div>
<div
class="debug-item"
:style="{ color: debugInfo.tabbarExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
:style="{ color: debugInfo.containerExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
>
TabBar 元素存在: {{ debugInfo.tabbarExists ? '✓ 是' : '✗ 否' }}
</div>
<div
class="debug-item"
:style="{ color: debugInfo.tabbarVisible ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
>
TabBar 可见: {{ debugInfo.tabbarVisible ? '✓ 是' : '✗ 否' }}
元素存在: {{ debugInfo.containerExists ? '✓ 是' : '✗ 否' }}
</div>
<div class="debug-item">
display: {{ debugInfo.tabbarDisplay }}
position: {{ debugInfo.containerPosition }}
</div>
<div class="debug-item">
opacity: {{ debugInfo.tabbarOpacity }}
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
TabBar 位置样式
</div>
<div class="debug-item">
position: {{ debugInfo.tabbarPosition }}
</div>
<div class="debug-item">
top (CSS): {{ debugInfo.tabbarTopStyle }}
</div>
<div class="debug-item">
bottom (CSS): {{ debugInfo.tabbarBottomStyle }}
</div>
<div class="debug-item">
left (实际): {{ debugInfo.tabbarLeft }}px
</div>
<div class="debug-item">
right (实际): {{ debugInfo.tabbarRight }}px
bottom (CSS): {{ debugInfo.containerBottomStyle }}
</div>
<div
class="debug-item"
:style="{ fontWeight: 'bold', color: '#ff9800' }"
>
top (实际): {{ debugInfo.tabbarTop }}px
bottom (实际): {{ debugInfo.containerRectBottom }}px
</div>
<div class="debug-item">
width: {{ debugInfo.containerWidth }}px
</div>
<div class="debug-item">
height: {{ debugInfo.containerHeight }}px
</div>
<div class="debug-item">
z-index: {{ debugInfo.containerZIndex }}
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
药丸导航 (.nav-pill)
</div>
<div
class="debug-item"
:style="{ color: debugInfo.pillExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
>
元素存在: {{ debugInfo.pillExists ? '✓ 是' : '✗ 否' }}
</div>
<div class="debug-item">
width: {{ debugInfo.pillWidth }}px
</div>
<div class="debug-item">
height: {{ debugInfo.pillHeight }}px
</div>
<div
class="debug-item"
:style="{ fontWeight: 'bold', color: '#ff9800' }"
>
bottom (实际): {{ debugInfo.tabbarBottom }}px
bottom (实际): {{ debugInfo.pillRectBottom }}px
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
TabBar 尺寸
父容器 (.app-root)
</div>
<div class="debug-item">
width: {{ debugInfo.tabbarWidth }}px
overflow: {{ debugInfo.appRootOverflow }}
</div>
<div class="debug-item">
height: {{ debugInfo.tabbarHeight }}px
height: {{ debugInfo.appRootHeight }}px
</div>
<div class="debug-item">
padding-bottom: {{ debugInfo.tabbarPaddingBottom }}
position: {{ debugInfo.appRootPosition }}
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
视口信息
</div>
<div class="debug-item">
box-sizing: {{ debugInfo.tabbarBoxSizing }}
window.innerHeight: {{ debugInfo.windowHeight }}px
</div>
<div class="debug-item">
--vh: {{ debugInfo.vhVar }}
</div>
<div class="debug-item">
safe-area-bottom: {{ debugInfo.safeAreaBottom }}
</div>
</div>
<div class="debug-section">
@@ -164,9 +130,10 @@
</div>
<div
class="debug-item"
:style="{ color: debugInfo.distanceFromBottom === '0.00' ? '#81c784' : '#ff4d4f', fontWeight: 'bold', fontSize: '12px' }"
:style="{ color: parseFloat(debugInfo.distanceFromBottom) < 2 ? '#81c784' : '#ff4d4f', fontWeight: 'bold', fontSize: '12px' }"
>
距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓ 已贴底' : '✗ 未贴底' }}
距离底部: {{ debugInfo.distanceFromBottom }}px
{{ parseFloat(debugInfo.distanceFromBottom) < 2 ? '✓ 已贴底' : '✗ 未贴底' }}
</div>
</div>
<button
@@ -176,19 +143,6 @@
关闭
</button>
</div>
<!-- 视觉调试辅助线 - 标记屏幕底部 -->
<div
v-if="showDebug"
class="debug-bottom-line"
/>
<!-- 视觉调试辅助线 - 标记 TabBar 顶部 -->
<div
v-if="showDebug"
class="debug-tabbar-top-line"
:style="{ top: debugInfo.tabbarTop + 'px' }"
/>
</div>
</van-config-provider>
</template>
@@ -198,8 +152,8 @@ import { RouterView, useRoute } from 'vue-router'
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useMessageStore } from '@/stores/message'
import GlobalAddBill from '@/components/Global/GlobalAddBill.vue'
import { needRefresh, updateServiceWorker } from './registerServiceWorker'
import '@/styles/common.css'
import { needRefresh, updateServiceWorker } from './registerServiceWorker'
const messageStore = useMessageStore()
@@ -251,20 +205,6 @@ onUnmounted(() => {
})
const route = useRoute()
// 根据路由判断是否显示Tabbar
const showTabbar = computed(() => {
return (
route.path === '/' ||
route.path === '/calendar' ||
route.path === '/calendar-v2' ||
route.path === '/message' ||
route.path === '/setting' ||
route.path === '/balance' ||
route.path === '/budget'
)
})
const active = ref('')
const theme = ref('light')
// Vant UI 主题变量映射
@@ -298,7 +238,6 @@ onMounted(() => {
updateTheme()
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
mediaQuery.addEventListener('change', updateTheme)
setActive(route.path)
})
setInterval(() => {
@@ -308,32 +247,11 @@ setInterval(() => {
// 监听路由变化调整
watch(
() => route.path,
(newPath) => {
setActive(newPath)
() => {
messageStore.updateUnreadCount()
}
)
const setActive = (path) => {
active.value = (() => {
switch (path) {
case '/calendar':
case '/calendar-v2':
return 'ccalendar'
case '/balance':
case '/message':
return 'balance'
case '/setting':
return 'setting'
case '/budget':
return 'budget'
default:
return 'statistics'
}
})()
}
const isShowAddBill = computed(() => {
return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar' || route.path === '/calendar-v2'
})
@@ -344,116 +262,92 @@ onUnmounted(() => {
}
})
// 处理tab点击，如果点击当前页面则滚动到顶部
const handleTabClick = (path) => {
if (route.path === path) {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
}
const handleAddTransactionSuccess = () => {
// 当添加交易成功时，通知当前页面刷新数据
const event = new Event('transactions-changed')
window.dispatchEvent(event)
}
// 调试信息
const showDebug = ref(true) // 默认显示调试面板
// ===== 调试信息 =====
const showDebug = ref(true)
const debugInfo = ref({
windowHeight: 0,
viewportHeight: 0,
safeAreaBottom: '0',
tabbarExists: false,
tabbarVisible: false,
tabbarHeight: 0,
tabbarWidth: 0,
tabbarBottom: 0,
tabbarTop: 0,
tabbarLeft: 0,
tabbarRight: 0,
tabbarPaddingBottom: '0',
tabbarPosition: '',
tabbarBottomStyle: '',
tabbarTopStyle: '',
tabbarMinHeight: '',
tabbarBoxSizing: '',
tabbarDisplay: '',
tabbarOpacity: '',
containerExists: false,
containerPosition: '',
containerBottomStyle: '',
containerRectBottom: 0,
containerWidth: 0,
containerHeight: 0,
containerZIndex: '',
pillExists: false,
pillWidth: 0,
pillHeight: 0,
pillRectBottom: 0,
appRootOverflow: '',
appRootHeight: 0,
appRootBottom: 0,
bodyHeight: 0,
htmlHeight: 0,
tabbarTransform: '',
tabbarZIndex: '',
distanceFromBottom: 0
appRootPosition: '',
windowHeight: 0,
vhVar: '',
safeAreaBottom: '',
distanceFromBottom: '0'
})
// 更新调试信息
const updateDebugInfo = () => {
debugInfo.value.windowHeight = window.innerHeight
debugInfo.value.viewportHeight = window.visualViewport?.height || window.innerHeight
// 获取安全区域底部值
debugInfo.value.vhVar = getComputedStyle(document.documentElement).getPropertyValue('--vh') || 'unset'
// 安全区域
const testDiv = document.createElement('div')
testDiv.style.paddingBottom = 'env(safe-area-inset-bottom, 0px)'
document.body.appendChild(testDiv)
const computed = window.getComputedStyle(testDiv)
debugInfo.value.safeAreaBottom = computed.paddingBottom
debugInfo.value.safeAreaBottom = getComputedStyle(testDiv).paddingBottom
document.body.removeChild(testDiv)
// 获取 TabBar 的实际尺寸和位置
const tabbar = document.querySelector('.van-tabbar')
debugInfo.value.tabbarExists = !!tabbar
debugInfo.value.tabbarVisible = tabbar ? window.getComputedStyle(tabbar).display !== 'none' : false
if (tabbar) {
const rect = tabbar.getBoundingClientRect()
const styles = window.getComputedStyle(tabbar)
debugInfo.value.tabbarHeight = rect.height.toFixed(2)
debugInfo.value.tabbarWidth = rect.width.toFixed(2)
debugInfo.value.tabbarBottom = rect.bottom.toFixed(2)
debugInfo.value.tabbarPaddingBottom = styles.paddingBottom
debugInfo.value.tabbarTop = rect.top.toFixed(2)
debugInfo.value.tabbarLeft = rect.left.toFixed(2)
debugInfo.value.tabbarRight = rect.right.toFixed(2)
debugInfo.value.tabbarPosition = styles.position
debugInfo.value.tabbarBottomStyle = styles.bottom
debugInfo.value.tabbarTopStyle = styles.top
debugInfo.value.tabbarMinHeight = styles.minHeight
debugInfo.value.tabbarBoxSizing = styles.boxSizing
debugInfo.value.tabbarDisplay = styles.display
debugInfo.value.tabbarOpacity = styles.opacity
// 检查是否有 transform 或其他可能影响定位的样式
debugInfo.value.tabbarTransform = styles.transform
debugInfo.value.tabbarZIndex = styles.zIndex
// .glass-nav-container
const container = document.querySelector('.glass-nav-container')
debugInfo.value.containerExists = !!container
if (container) {
const rect = container.getBoundingClientRect()
const styles = getComputedStyle(container)
debugInfo.value.containerPosition = styles.position
debugInfo.value.containerBottomStyle = styles.bottom
debugInfo.value.containerRectBottom = rect.bottom.toFixed(2)
debugInfo.value.containerWidth = rect.width.toFixed(2)
debugInfo.value.containerHeight = rect.height.toFixed(2)
debugInfo.value.containerZIndex = styles.zIndex
}
// 获取 app-root 的高度
// .nav-pill
const pill = document.querySelector('.nav-pill')
debugInfo.value.pillExists = !!pill
if (pill) {
const rect = pill.getBoundingClientRect()
debugInfo.value.pillWidth = rect.width.toFixed(2)
debugInfo.value.pillHeight = rect.height.toFixed(2)
debugInfo.value.pillRectBottom = rect.bottom.toFixed(2)
}
// .app-root
const appRoot = document.querySelector('.app-root')
if (appRoot) {
const styles = getComputedStyle(appRoot)
const rect = appRoot.getBoundingClientRect()
debugInfo.value.appRootOverflow = styles.overflow
debugInfo.value.appRootHeight = rect.height.toFixed(2)
debugInfo.value.appRootBottom = rect.bottom.toFixed(2)
debugInfo.value.appRootPosition = styles.position
}
// 获取 body 和 html 的高度
debugInfo.value.bodyHeight = document.body.getBoundingClientRect().height.toFixed(2)
debugInfo.value.htmlHeight = document.documentElement.getBoundingClientRect().height.toFixed(2)
// 计算 TabBar 距离屏幕底部的实际距离
debugInfo.value.distanceFromBottom = (window.innerHeight - parseFloat(debugInfo.value.tabbarBottom || 0)).toFixed(2)
// 距底部距离（取 container 或 pill 中更大的 bottom 值）
const bottom = Math.max(
parseFloat(debugInfo.value.containerRectBottom || 0),
parseFloat(debugInfo.value.pillRectBottom || 0)
)
debugInfo.value.distanceFromBottom = (window.innerHeight - bottom).toFixed(2)
}
onMounted(() => {
// 延迟获取调试信息，确保 DOM 已渲染
setTimeout(updateDebugInfo, 500)
// 每秒更新一次调试信息
const debugInterval = setInterval(updateDebugInfo, 1000)
onUnmounted(() => {
clearInterval(debugInterval)
})
onUnmounted(() => clearInterval(debugInterval))
})
</script>
@@ -471,48 +365,10 @@ onMounted(() => {
position: relative;
padding-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75));
box-sizing: border-box;
overflow: clip;
overflow: hidden;
background-color: var(--van-background);
}
/* TabBar 固定在底部 */
:deep(.van-tabbar) {
position: fixed !important;
bottom: 0 !important;
left: 0;
right: 0;
/* 重置所有 padding，然后只添加安全区域 */
padding: 0 !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
height: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box !important;
background: var(--bg-primary) !important;
border-top: 1px solid var(--bg-tertiary);
}
/* 确保 TabBar 项目居中 */
:deep(.van-tabbar-item) {
padding: 0 !important;
height: 50px !important;
color: var(--text-secondary);
}
:deep(.van-tabbar-item--active) {
color: var(--color-primary);
}
.debug-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
font-size: 12px;
pointer-events: auto;
}
.update-toast {
position: fixed;
bottom: 80px;
@@ -607,27 +463,4 @@ onMounted(() => {
opacity: 0.8;
transform: scale(0.98);
}
/* 调试辅助线 - 屏幕底部红线 */
.debug-bottom-line {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: red;
z-index: 10000;
pointer-events: none;
}
/* 调试辅助线 - TabBar 顶部蓝线 */
.debug-tabbar-top-line {
position: fixed;
left: 0;
right: 0;
height: 2px;
background: blue;
z-index: 10000;
pointer-events: none;
}
</style>