feat: enhance BottomNav component and update project configuration

src/components/BottomNav/index.tsx

@@ -1,5 +1,6 @@
 import { View, Text } from "@tarojs/components";
 import Taro from "@tarojs/taro";
+import type { ReactNode } from "react";
 import type { NavItem, NavKey } from "../../config";
 import "./index.css";
 
@@ -10,33 +11,35 @@ const ICON_SIZE = 24;
 interface BottomNavProps {
   active: NavKey;
   navItems: NavItem[];
+  children?: ReactNode;
 }
 
-export default function BottomNav({ active, navItems }: BottomNavProps) {
+export default function BottomNav({ active, navItems, children }: BottomNavProps) {
   const handleNavigate = (item: NavItem) => {
     if (item.key === active) return;
     Taro.redirectTo({ url: item.path });
   };
 
   return (
-    <View className="bottom-nav">
+    <View className="bottom-nav-wrapper">
+      <View className="bottom-nav-content">{children}</View>
+      <View className="bottom-nav">
       {navItems.map((item) => {
         const isActive = active === item.key;
         const IconComp = item.icon;
+        const iconColor = isActive ? ACTIVE_COLOR : DEFAULT_COLOR;
         return (
           <View
             key={item.key}
             className={`bottom-nav-item${isActive ? " active" : ""}`}
             onClick={() => handleNavigate(item)}
           >
-            <IconComp
-              size={ICON_SIZE}
-              color={isActive ? ACTIVE_COLOR : DEFAULT_COLOR}
-            />
+            <IconComp size={ICON_SIZE} color={iconColor} />
             <Text className="bottom-nav-label">{item.label}</Text>
           </View>
         );
       })}
+      </View>
     </View>
   );
 }