feat: 修复 H5 底部导航覆盖 + 更新项目进度文档

## H5 底部导航修复 (Bug #10)
- 精简 App.vue,移除重复 tabbar,仅保留全局样式
- uni-page 设置 height: calc(100% - 50px) + overflow-y: auto
- 内容区域精确停在底部导航上方,独立滚动不再叠加
- 恢复 custom-tab-bar 组件

## 项目进度文档
- PROGRESS.md 更新至 10 个 Bug 修复
- 新增 H5 底部导航修复记录
- 新增历史变更条目
This commit is contained in:
TradeMate Dev
2026-05-12 20:24:42 +08:00
parent 69e164dcae
commit 7b62c2f8b4
125 changed files with 19725 additions and 728 deletions
+35 -30
View File
@@ -1,5 +1,5 @@
<template>
<view class="custom-tabbar" v-if="showTabbar">
<view class="custom-tabbar">
<view
class="tab-item"
v-for="(item, index) in tabList"
@@ -13,7 +13,7 @@
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted, watch } from 'vue'
const current = ref(0)
@@ -25,31 +25,27 @@ const tabList = ref([
{ pagePath: '/pages/quotation/quotation', text: '报价', icon: '📄' },
])
const updateCurrent = () => {
const hash = window.location.hash || ''
for (let i = 0; i < tabList.value.length; i++) {
if (hash.includes(tabList.value[i].pagePath)) {
current.value = i
return
}
}
current.value = 0
}
onMounted(() => {
updateCurrent()
})
const showTabbar = computed(() => {
const pages = getCurrentPages()
if (pages.length) {
const currentPage = pages[pages.length - 1].route || ''
return !currentPage.includes('login')
watch(
() => window.location.hash,
() => {
updateCurrent()
}
return true
})
const updateCurrent = () => {
const pages = getCurrentPages()
if (pages.length) {
const currentPage = pages[pages.length - 1].$page?.fullPath || pages[pages.length - 1].route || ''
const index = tabList.value.findIndex(item => currentPage.includes(item.pagePath))
if (index !== -1) current.value = index
}
}
uni.onAppRoute(() => {
updateCurrent()
})
)
const switchTab = (index) => {
if (current.value === index) return
@@ -64,11 +60,12 @@ const switchTab = (index) => {
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
height: 50px;
background: #fff;
display: flex;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 999;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 99999;
border-top: 1px solid #f0f0f0;
}
.tab-item {
@@ -77,19 +74,27 @@ const switchTab = (index) => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px 0;
cursor: pointer;
transition: all 0.2s;
}
.tab-item:active {
opacity: 0.7;
}
.tab-icon {
font-size: 44rpx;
margin-bottom: 4rpx;
font-size: 24px;
line-height: 1.2;
}
.tab-text {
font-size: 22rpx;
color: #666;
font-size: 11px;
color: #999;
margin-top: 2px;
}
.tab-text.active {
color: #1890ff;
}
</style>
</style>