修改tabbar 渲染方式

src/app.config.ts

@@ -86,6 +86,8 @@ export default defineAppConfig({
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: '台球馆',
     navigationBarTextStyle: 'black',
+    backgroundColor: '#121212',
+    backgroundColorBottom: '#121212',
   },
   // 自定义 TabBar
   tabBar: {

src/custom-tab-bar/index.scss

@@ -5,6 +5,13 @@
  * 其他图标: 40px × 37px
  * 文本字号: 20px
  */
+:host {
+  display: block;
+  width: 100%;
+  height: calc(129px + env(safe-area-inset-bottom));
+  background-color: #0E0D0D;
+}
+
 .custom-tab-bar {
   position: fixed;
   bottom: 0;
@@ -18,27 +25,24 @@
   // 背景层
   .tab-bar-bg {
     position: absolute;
-    top: 40px;
+    top: 25px; // 留出顶部空间给凸起
     bottom: 0;
     left: 0;
     right: 0;
-    height: 129px;
     background: #0E0D0D;
-    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
     z-index: 1;
     pointer-events: auto;
   }
 
-  // 中间凸起的圆形背景（如需要可以启用）
+  // 中间凸起的圆形黑底
   .tab-bar-center-bg {
     position: absolute;
-    // bottom: 29px; /* scan按钮底部位置 */
+    top: -54px; // 向上凸出
     left: 50%;
     transform: translateX(-50%);
-    width: 130px;
+    width: 146px; // 比扫码按钮大一圈，形成黑色包裹边框
-    height: 130px;
+    height: 146px;
-    background: blue;
+    background: #0E0D0D;
-    // background: #0E0D0D;
     border-radius: 50%;
     z-index: 2;
     pointer-events: auto;
@@ -108,23 +112,24 @@
       
       .scan-wrapper {
         position: absolute;
-        bottom: -10px; /* 让130px高的scan按钮凸出30px: 129px - (130px - 30px) = 29px */
+        top: 40px; /* 使用 top 定位，使其相对于 tabbar 顶部固定，不随底部安全区变化 */
         left: 50%;
         transform: translateX(-50%);
         z-index: 10;
+        
         .scan-button {
-          width: 130px;
+          width: 120px;
-          height: 130px;
+          height: 120px;
           border-radius: 50%;
-          background-color: #0E0D0D;
+          background-color: transparent; // 移除黑色背景，露出图标本身的颜色
           
           display: flex;
           align-items: center;
           justify-content: center;
 
           .scan-icon {
-            width: 110px;
+            width: 120px; // 让图标撑满按钮
-            height: 110px;
+            height: 120px;
           }
         }
       }
@@ -137,12 +142,11 @@
   .custom-tab-bar {
     height: calc(129px + env(safe-area-inset-bottom));
     
-    .tab-bar-bg {
-      height: calc(129px + env(safe-area-inset-bottom));
-    }
-    
     .tab-bar-content {
       height: calc(129px + env(safe-area-inset-bottom));
     }
+    
+    // 注意：.tab-bar-bg 使用了 top 和 bottom 定位，会自动拉伸，不需要重写 height
+    // .tab-bar-center-bg 和 .scan-wrapper 相对顶部定位，保持凸起位置不变
   }
 }

src/custom-tab-bar/index.tsx

@@ -2,7 +2,7 @@
  * 自定义 TabBar - 中间凸起样式
  * 参考：https://developer.aliyun.com/article/1228635
  */
-import { CoverView, CoverImage } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { observer } from 'mobx-react'
 import { TAB_BAR_CONFIG } from '../constants/config'
@@ -40,7 +40,7 @@ const TAB_BAR_ITEMS = [
 const CustomTabBar = observer(() => {
   const pages = Taro.getCurrentPages()
   const currentPage = pages[pages.length - 1]
-  const currentPath = '/' + currentPage.route
+  const currentPath = currentPage ? '/' + currentPage.route : '/pages/index/index'
 
   const handleTabClick = (path: string) => {
     if (path === currentPath) return
@@ -55,7 +55,7 @@ const CustomTabBar = observer(() => {
 
   // 获取图标
   const getIcon = (path: string, isActive: boolean) => {
-    const icons = TAB_ICONS[path]
+    const icons = TAB_ICONS[path as keyof typeof TAB_ICONS]
     if (!icons) return homeIcon
     return isActive ? icons.active : icons.normal
   }
@@ -66,50 +66,50 @@ const CustomTabBar = observer(() => {
   }
 
   return (
-    <CoverView className="custom-tab-bar">
+    <View className="custom-tab-bar">
-      {/* 背景白色层 */}
+      {/* 背景深色层 */}
-      <CoverView className="tab-bar-bg" />
+      <View className="tab-bar-bg" />
       
       {/* 中间凸起的圆形背景 */}
-      {/* <CoverView className="tab-bar-center-bg" /> */}
+      <View className="tab-bar-center-bg" />
 
       {/* TabBar 项目 */}
-      <CoverView className="tab-bar-content">
+      <View className="tab-bar-content">
         {TAB_BAR_ITEMS.map((item, index) => {
           const isActive = currentPath === item.path
           const isCenter = 'isCenter' in item && item.isCenter
 
           return (
-            <CoverView
+            <View
               key={item.path}
               className={`tab-item ${isActive ? 'active' : ''} ${isCenter ? 'center' : ''}`}
               onClick={() => handleTabClick(item.path)}
             >
               {isCenter ? (
                 // 中间扫码按钮 - 凸起样式
-                <CoverView className="scan-wrapper">
+                <View className="scan-wrapper">
-                  <CoverView className="scan-button">
+                  <View className="scan-button">
-                    <CoverImage 
+                    <Image 
                       className="scan-icon" 
                       src={scanIcon}
                     />
-                  </CoverView>
+                  </View>
-                </CoverView>
+                </View>
               ) : (
                 // 普通 Tab 项
-                <CoverView className="tab-content">
+                <View className="tab-content">
-                  <CoverImage 
+                  <Image 
                     className="tab-icon" 
                     src={getIcon(item.path, isActive)}
                   />
-                  <CoverView className="tab-text">{item.text}</CoverView>
+                  <View className="tab-text">{item.text}</View>
-                </CoverView>
+                </View>
               )}
-            </CoverView>
+            </View>
           )
         })}
-      </CoverView>
+      </View>
-    </CoverView>
+    </View>
   )
 })