From 5a7941431900b450604b83ad2f316e1ab8c29745 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Mon, 26 Jan 2026 17:29:24 +0800
Subject: [PATCH] u

---
 .../allapp-rn/src/app/(tabs)/_layout.tsx      | 128 ++++++++-
 .../allapp/allapp-rn/src/app/(tabs)/index.tsx |  19 +-
 code/allapp/allapp-rn/src/app/+not-found.tsx  |   2 +-
 code/allapp/allapp-rn/src/app/_layout.tsx     |   2 +-
 code/allapp/allapp-rn/src/app/auth/index.tsx  | 272 +++++++++---------
 .../src/app/money/category/setting/index.tsx  |   5 -
 .../src/components/common/ao/Drawer.tsx       |   7 +-
 .../src/components/common/ao/LucideIcon.tsx   |   1 -
 code/allapp/allapp-rn/src/request/index.ts    |   4 +-
 code/allapp/allapp-rn/test.html               | 208 +++++---------
 10 files changed, 355 insertions(+), 293 deletions(-)

diff --git a/code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx b/code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx
index f1426720..13c5c50e 100644
--- a/code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx
+++ b/code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx
@@ -1,11 +1,80 @@
-import { TabSlot } from 'expo-router/ui'
-import { Text, View } from 'react-native'
+import type { icons } from 'lucide-react-native'
+import type { SortableGridRenderItem } from 'react-native-sortables'
+import { Slot, usePathname, useRouter } from 'expo-router'
+import { useCallback, useEffect, useState } from 'react'
+import { Pressable, Text, TouchableOpacity, Vibration, View } from 'react-native'
+import Animated, { useAnimatedRef } from 'react-native-reanimated'
+import Sortable from 'react-native-sortables'
+import { ADrawer, LucideIcon } from '@/components/common/ao'
+
+interface NavItem {
+  label: string
+  path: string
+  icon: keyof typeof icons
+}
+
+const NAV_MENUS: NavItem[] = [
+  { label: '记账', path: '/money', icon: 'CircleDollarSign' },
+  { label: '恋爱记', path: '/love', icon: 'Heart' },
+  { label: '聊天', path: '/chat', icon: 'MessageCircle' },
+  { label: '个人中心', path: '/user', icon: 'CircleUserRound' },
+]
 
 export default function TabsLayout() {
+  const scrollableRef = useAnimatedRef<Animated.ScrollView>()
+
+  const router = useRouter()
+  const pathname = usePathname()
+  const [showNavDrawer, setShowNavDrawer] = useState(false)
+  const [draggingId, setDraggingId] = useState<string>('')
+  const [currentNav, setCurrentNav] = useState<NavItem>({
+    label: '',
+    path: '',
+    icon: 'AArrowDown',
+  })
+
+  useEffect(() => {
+    const current = NAV_MENUS.find(item => item.path === pathname)
+    if (current) {
+      setCurrentNav(current)
+    }
+  }, [pathname])
+
+  const refreshPage = () => {
+    router.replace(pathname)
+  }
+
+  const renderNavItem = useCallback<SortableGridRenderItem<NavItem>>(
+    ({ item }) => (
+      <Pressable
+        className="
+          flex
+          flex-col
+          items-center
+          justify-center
+          bg-[white]
+          rounded-md
+          shadow-md
+          p-3
+        "
+        onPress={() => {
+          setShowNavDrawer(false)
+          router.push(item.path)
+        }}
+      >
+        <LucideIcon icon={item.icon} size={24} strokeWidth={2} clickable={false} />
+        <Text className="text-sm mt-2">
+          {item.label}
+        </Text>
+      </Pressable>
+    ),
+    [],
+  )
+
   return (
     <View className="flex-1 bg-gray-100">
-      <View className="flex-1 px-4 pt-4 pb-24">
-        <TabSlot />
+      <View className="flex-1 bg-white">
+        <Slot />
       </View>
 
       <View
@@ -18,10 +87,55 @@ export default function TabsLayout() {
           gap-4
         "
       >
-        <View className="bg-white rounded-md shadow-lg h-12 w-12"></View>
-        <View className="flex-1 bg-white rounded-md shadow-lg h-12"></View>
-        <View className="bg-white rounded-md shadow-lg h-12 w-12"></View>
+        <View className="bg-white rounded-md shadow-lg h-12 w-12">
+          <TouchableOpacity className="w-full h-full items-center justify-center">
+            <LucideIcon icon="Bot" size={26} clickable={false} strokeWidth={2} />
+          </TouchableOpacity>
+        </View>
+
+        <View className="flex-1 bg-white rounded-md shadow-lg h-12">
+          <TouchableOpacity
+            className="w-full h-full items-center justify-center flex flex-row"
+            onPress={() => {
+              setShowNavDrawer(true)
+            }}
+          >
+            <LucideIcon icon={currentNav.icon} size={20} strokeWidth={2} />
+            <Text className="font-semibold text-lg ml-2">{currentNav.label}</Text>
+          </TouchableOpacity>
+        </View>
+        <View className="bg-white rounded-md shadow-lg h-12 w-12">
+          <TouchableOpacity className="w-full h-full items-center justify-center" onPress={refreshPage}>
+            <LucideIcon icon="RefreshCcw" size={26} clickable={false} strokeWidth={2} />
+          </TouchableOpacity>
+        </View>
       </View>
+
+      <ADrawer
+        visible={showNavDrawer}
+        height="60%"
+        title="菜单导航"
+        isCircle
+        hideModal={() => {
+          setShowNavDrawer(false)
+        }}
+      >
+        <Animated.ScrollView
+          ref={scrollableRef}
+          className="px-4 py-2 flex-1"
+        >
+          <Sortable.Grid
+            columnGap={16}
+            rowGap={16}
+            columns={3}
+            data={NAV_MENUS}
+            keyExtractor={item => item.path}
+            renderItem={renderNavItem}
+            scrollableRef={scrollableRef}
+            autoScrollActivationOffset={200}
+          />
+        </Animated.ScrollView>
+      </ADrawer>
     </View>
   )
 }
diff --git a/code/allapp/allapp-rn/src/app/(tabs)/index.tsx b/code/allapp/allapp-rn/src/app/(tabs)/index.tsx
index 3c267cfb..ad9e78c2 100644
--- a/code/allapp/allapp-rn/src/app/(tabs)/index.tsx
+++ b/code/allapp/allapp-rn/src/app/(tabs)/index.tsx
@@ -1,11 +1,22 @@
+import { useRouter } from 'expo-router'
 import { Text, View } from 'react-native'
-
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { AButton } from '@/components/common/ao'
 // 这个页面的作用是作为占位页，避免进入 (tabs) layout 时出现 404 页面。
 // 如果想指定默认页面，可以通过 router.replace 或 TabTrigger 指向具体子页面。
 export default function Index() {
+  const router = useRouter()
+
   return (
-    <View>
-      <Text>Index</Text>
-    </View>
+    <SafeAreaView>
+      <View>
+        <AButton onPress={() => {
+          router.push('/money')
+        }}
+        >
+          测试
+        </AButton>
+      </View>
+    </SafeAreaView>
   )
 }
diff --git a/code/allapp/allapp-rn/src/app/+not-found.tsx b/code/allapp/allapp-rn/src/app/+not-found.tsx
index 09023030..696b40b5 100644
--- a/code/allapp/allapp-rn/src/app/+not-found.tsx
+++ b/code/allapp/allapp-rn/src/app/+not-found.tsx
@@ -11,7 +11,7 @@ export default function NotFound() {
         title="(´･ω･`) 页面走丢了～"
         description="回首页看看吧！"
         footer={(
-          <AButton onPress={() => router.replace('/')} leftIcon={{ icon: 'ArrowLeft', size: 18, color: '#fff' }}>
+          <AButton onPress={() => router.replace('/')}>
             返回应用首页
           </AButton>
         )}
diff --git a/code/allapp/allapp-rn/src/app/_layout.tsx b/code/allapp/allapp-rn/src/app/_layout.tsx
index 4898a179..e50dd828 100644
--- a/code/allapp/allapp-rn/src/app/_layout.tsx
+++ b/code/allapp/allapp-rn/src/app/_layout.tsx
@@ -31,7 +31,7 @@ export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
         title="(´･ω･`) 出错啦～"
         description={`发生了一点小问题：\n${error?.message || '请稍后再试'}`}
         footer={(
-          <AButton onPress={retry} leftIcon={{ icon: 'RotateCcw', size: 18, color: '#fff' }}>
+          <AButton onPress={retry}>
             再试一下
           </AButton>
         )}
diff --git a/code/allapp/allapp-rn/src/app/auth/index.tsx b/code/allapp/allapp-rn/src/app/auth/index.tsx
index 76cb17f7..9ea809f9 100644
--- a/code/allapp/allapp-rn/src/app/auth/index.tsx
+++ b/code/allapp/allapp-rn/src/app/auth/index.tsx
@@ -1,7 +1,7 @@
 import { useEvent } from 'expo'
-import ExpoQQ from 'expo-qq'
+// import ExpoQQ from 'expo-qq'
 import { useRouter } from 'expo-router'
-import ExpoWeChat from 'expo-wechat'
+// import ExpoWeChat from 'expo-wechat'
 import { useEffect, useState } from 'react'
 import { Image, Text, View } from 'react-native'
 import { AButton, ACheckbox } from '@/components/common/ao'
@@ -11,7 +11,7 @@ import { loginQqApi, loginWxApi } from '@/request/api/auth'
 import { useUserStore } from '@/store/user'
 import { toast } from '@/utils/toast'
 
-export default function LoginScreen() {
+export default function Auth() {
   const [loading, setLoading] = useState(false)
   const [isAgree, setIsAgree] = useState(true)
   const [form, setForm] = useState({
@@ -23,160 +23,160 @@ export default function LoginScreen() {
   const router = useRouter()
   const userStore = useUserStore()
 
-  const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')
-  const onGetUserInfo = useEvent(ExpoQQ, 'onGetUserInfo')
-  const authResult = useEvent(ExpoWeChat, 'onAuthResult')
+  // const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')
+  // const onGetUserInfo = useEvent(ExpoQQ, 'onGetUserInfo')
+  // const authResult = useEvent(ExpoWeChat, 'onAuthResult')
 
-  async function onQQLogin() {
-    setLoading(true)
-    setForm(val => ({
-      ...val,
-      type: 1,
-    }))
-    await ExpoQQ.login(['get_user_info'])
-  }
+  // async function onQQLogin() {
+  //   setLoading(true)
+  //   setForm(val => ({
+  //     ...val,
+  //     type: 1,
+  //   }))
+  //   await ExpoQQ.login(['get_user_info'])
+  // }
 
-  async function onWeChatLogin() {
-    setLoading(true)
+  // async function onWeChatLogin() {
+  //   setLoading(true)
 
-    // 检查微信是否安装
-    const isInstalled = await ExpoWeChat.isWXAppInstalled()
-    if (!isInstalled) {
-      toast.show({
-        title: onLoginFinished?.errorMessage || '请先安装微信',
-      })
-      setLoading(false)
-      return
-    }
+  //   // 检查微信是否安装
+  //   const isInstalled = await ExpoWeChat.isWXAppInstalled()
+  //   if (!isInstalled) {
+  //     toast.show({
+  //       title: onLoginFinished?.errorMessage || '请先安装微信',
+  //     })
+  //     setLoading(false)
+  //     return
+  //   }
 
-    setForm(val => ({
-      ...val,
-      type: 0,
-    }))
+  //   setForm(val => ({
+  //     ...val,
+  //     type: 0,
+  //   }))
 
-    ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
-  }
+  //   ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
+  // }
 
-  useEffect(() => {
-    ExpoQQ.init('102826474', '')
-    ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
-  }, [])
+  // useEffect(() => {
+  //   ExpoQQ.init('102826474', '')
+  //   ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
+  // }, [])
 
-  useEffect(() => {
-    if (!onLoginFinished) {
-      return
-    }
+  // useEffect(() => {
+  //   if (!onLoginFinished) {
+  //     return
+  //   }
 
-    if (!onLoginFinished.success) {
-      toast.show({
-        title: onLoginFinished?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
-      })
-      setLoading(false)
-      return
-    }
+  //   if (!onLoginFinished.success) {
+  //     toast.show({
+  //       title: onLoginFinished?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
+  //     })
+  //     setLoading(false)
+  //     return
+  //   }
 
-    const fetchUserInfo = async () => {
-      try {
-        const tokenInfo = await ExpoQQ.getLoginTokenInfo()
-        if (!tokenInfo.openId) {
-          toast.show({
-            title: tokenInfo?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
-          })
-          setLoading(false)
-          return
-        }
+  //   const fetchUserInfo = async () => {
+  //     try {
+  //       const tokenInfo = await ExpoQQ.getLoginTokenInfo()
+  //       if (!tokenInfo.openId) {
+  //         toast.show({
+  //           title: tokenInfo?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
+  //         })
+  //         setLoading(false)
+  //         return
+  //       }
 
-        setForm(val => ({
-          ...val,
-          openid: String(tokenInfo.openId),
-        }))
+  //       setForm(val => ({
+  //         ...val,
+  //         openid: String(tokenInfo.openId),
+  //       }))
 
-        await ExpoQQ.sendGetUserInfoReq()
-      }
-      catch (e) {
-        console.error('QQ 登录未完成', e)
-        setLoading(false)
-      }
-    }
+  //       await ExpoQQ.sendGetUserInfoReq()
+  //     }
+  //     catch (e) {
+  //       console.error('QQ 登录未完成', e)
+  //       setLoading(false)
+  //     }
+  //   }
 
-    fetchUserInfo()
-  }, [onLoginFinished])
+  //   fetchUserInfo()
+  // }, [onLoginFinished])
 
-  // QQ登录
-  useEffect(() => {
-    const handleLogin = async () => {
-      if (!onGetUserInfo)
-        return
+  // // QQ登录
+  // useEffect(() => {
+  //   const handleLogin = async () => {
+  //     if (!onGetUserInfo)
+  //       return
 
-      try {
-        const loginRes = await loginQqApi({
-          openid: form.openid,
-          username: onGetUserInfo.nickname || '',
-          avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
-        })
+  //     try {
+  //       const loginRes = await loginQqApi({
+  //         openid: form.openid,
+  //         username: onGetUserInfo.nickname || '',
+  //         avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
+  //       })
 
-        if (loginRes.isSuccess) {
-          userStore.setUserInfo({
-            token: loginRes.data.token,
-            id: loginRes.data.userId,
-            username: loginRes.data.username,
-            avatar: loginRes.data.avatar,
-          })
+  //       if (loginRes.isSuccess) {
+  //         userStore.setUserInfo({
+  //           token: loginRes.data.token,
+  //           id: loginRes.data.userId,
+  //           username: loginRes.data.username,
+  //           avatar: loginRes.data.avatar,
+  //         })
 
-          console.log(loginRes.data.token)
+  //         console.log(loginRes.data.token)
 
-          router.push('/')
-        }
-      }
-      catch (err) {
-        console.error('登录接口出错', err)
-      }
-      finally {
-        setLoading(false)
-      }
-    }
+  //         router.push('/')
+  //       }
+  //     }
+  //     catch (err) {
+  //       console.error('登录接口出错', err)
+  //     }
+  //     finally {
+  //       setLoading(false)
+  //     }
+  //   }
 
-    handleLogin()
-  }, [onGetUserInfo])
+  //   handleLogin()
+  // }, [onGetUserInfo])
 
-  // 微信登录
-  useEffect(() => {
-    if (!authResult)
-      return
+  // // 微信登录
+  // useEffect(() => {
+  //   if (!authResult)
+  //     return
 
-    const handleLogin = async () => {
-      if (authResult.errorCode === 0) {
-        try {
-          const loginRes = await loginWxApi({
-            code: authResult.code,
-          })
+  //   const handleLogin = async () => {
+  //     if (authResult.errorCode === 0) {
+  //       try {
+  //         const loginRes = await loginWxApi({
+  //           code: authResult.code,
+  //         })
 
-          if (loginRes.isSuccess) {
-            userStore.setUserInfo({
-              token: loginRes.data.token,
-              id: loginRes.data.userId,
-              username: loginRes.data.username,
-              avatar: loginRes.data.avatar,
-            })
+  //         if (loginRes.isSuccess) {
+  //           userStore.setUserInfo({
+  //             token: loginRes.data.token,
+  //             id: loginRes.data.userId,
+  //             username: loginRes.data.username,
+  //             avatar: loginRes.data.avatar,
+  //           })
 
-            router.push('/')
-          }
-        }
-        catch (err) {
-          console.error('登录接口出错', err)
-        }
-        finally {
-          setLoading(false)
-        }
-      }
-      else {
-        console.log('授权失败:', authResult.errorMessage)
-        setLoading(false)
-      }
-    }
+  //           router.push('/')
+  //         }
+  //       }
+  //       catch (err) {
+  //         console.error('登录接口出错', err)
+  //       }
+  //       finally {
+  //         setLoading(false)
+  //       }
+  //     }
+  //     else {
+  //       console.log('授权失败:', authResult.errorMessage)
+  //       setLoading(false)
+  //     }
+  //   }
 
-    handleLogin()
-  }, [authResult])
+  //   handleLogin()
+  // }, [authResult])
 
   function testLogin() {
     // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NjY3ODU5ODIxNjUwNjEsImlhdCI6MTc2OTM0ODI0Nn0.17ZNaHD3HSLM8dVn_JQK-gvsG9MKj47IRYV9D4xZkzs
@@ -208,7 +208,7 @@ export default function LoginScreen() {
       </View>
 
       <View className="flex flex-col gap-4">
-        <AButton
+        {/* <AButton
           leftIcon={
             <IconWeixin color="#fff" />
           }
@@ -227,7 +227,7 @@ export default function LoginScreen() {
           onPress={onQQLogin}
         >
           QQ
-        </AButton>
+        </AButton> */}
 
         <AButton
           variant="outline"
diff --git a/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx b/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx
index d55a2537..74c437d6 100644
--- a/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx
+++ b/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx
@@ -149,11 +149,6 @@ export default function MoneyCategorySetting() {
           <AButton
             className="rounded-full"
             size="sm"
-            leftIcon={{
-              icon: 'Plus',
-              color: '#fff',
-              clickable: false,
-            }}
             onPress={(() =>
               setshowEditCategory(true)
             )}
diff --git a/code/allapp/allapp-rn/src/components/common/ao/Drawer.tsx b/code/allapp/allapp-rn/src/components/common/ao/Drawer.tsx
index da297e90..0c5a1bdb 100644
--- a/code/allapp/allapp-rn/src/components/common/ao/Drawer.tsx
+++ b/code/allapp/allapp-rn/src/components/common/ao/Drawer.tsx
@@ -37,7 +37,7 @@ export default function Drawer({
   isCircle,
   menuPosition = 'bottom',
   children,
-  CircleNum,
+  CircleNum = 8,
   isShadowHideModal = true,
   header,
   title,
@@ -48,7 +48,6 @@ export default function Drawer({
 
   const anim = useRef(new Animated.Value(0)).current
 
-  /* ================== 同步外部 visible ================== */
   useEffect(() => {
     if (visible) {
       setInnerVisible(true)
@@ -59,7 +58,6 @@ export default function Drawer({
     }
   }, [visible])
 
-  /* ================== 布局样式 ================== */
   useEffect(() => {
     switch (menuPosition) {
       case 'left':
@@ -207,8 +205,9 @@ export default function Drawer({
       </TouchableWithoutFeedback>
 
       {/* Drawer */}
-      <View style={drawerMenuBox}>
+      <View style={drawerMenuBox} pointerEvents="box-none">
         <Animated.View
+          pointerEvents="box-none"
           style={[
             styles.container,
             {
diff --git a/code/allapp/allapp-rn/src/components/common/ao/LucideIcon.tsx b/code/allapp/allapp-rn/src/components/common/ao/LucideIcon.tsx
index 80b6a3ea..48a95f1b 100644
--- a/code/allapp/allapp-rn/src/components/common/ao/LucideIcon.tsx
+++ b/code/allapp/allapp-rn/src/components/common/ao/LucideIcon.tsx
@@ -33,7 +33,6 @@ export default function LucideIcon({
     return <IconComponent size={size} color={color} strokeWidth={strokeWidth} style={style} className={className} />
   }
 
-  // clickable 为 true，包 Pressable
   return (
     <Pressable onPress={onPress} style={style} className={className}>
       <IconComponent size={size} color={color} strokeWidth={strokeWidth} />
diff --git a/code/allapp/allapp-rn/src/request/index.ts b/code/allapp/allapp-rn/src/request/index.ts
index 9c71bff7..e1c32c43 100644
--- a/code/allapp/allapp-rn/src/request/index.ts
+++ b/code/allapp/allapp-rn/src/request/index.ts
@@ -30,8 +30,8 @@ function isWhiteListed(url: string) {
 }
 
 const alovaInstance = createAlova({
-  baseURL: 'http://192.168.5.6:8086/app',
-  // baseURL: 'http://192.168.1.137:8086/app',
+  // baseURL: 'http://192.168.5.6:8086/app',
+  baseURL: 'http://192.168.1.137:8086/app',
   requestAdapter: axiosRequestAdapter(),
   timeout: 5000,
   cacheFor: null,
diff --git a/code/allapp/allapp-rn/test.html b/code/allapp/allapp-rn/test.html
index 2f9a1cfa..2ff2e37f 100644
--- a/code/allapp/allapp-rn/test.html
+++ b/code/allapp/allapp-rn/test.html
@@ -1,147 +1,91 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
+
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Bottom Nav Demo</title>
-  <link rel="stylesheet" href="style.css" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>全局底部导航 Demo</title>
   <style>
-    * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont;
-}
+    body {
+      margin: 0;
+      font-family: sans-serif;
+      background-color: #f0f2f5;
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      height: 100vh;
+    }
 
-body {
-  background: #f6f7f9;
-  height: 100vh;
-}
+    /* 弹出面板 */
+    .bottom-panel {
+      width: 100%;
+      max-width: 400px;
+      background: white;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+      padding: 16px;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+    }
 
-.content {
-  padding: 16px;
-  padding-bottom: 80px;
-  color: #555;
-}
+    /* 每个导航 item */
+    .nav-item {
+      background: #f9f9f9;
+      border-radius: 16px;
+      padding: 16px 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: transform 0.2s, background 0.2s;
+      text-align: center;
+    }
 
-/* 底部栏 */
-.bottom-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 56px;
-  background: #fff;
-  border-top: 1px solid #e5e5e5;
+    .nav-item:hover {
+      background: #e0e0ff;
+      transform: translateY(-3px) scale(1.05);
+    }
 
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0 12px;
-}
-
-/* 左右按钮 */
-.nav-btn {
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: none;
-  font-size: 18px;
-  color: #333;
-}
-
-/* 中间区域 */
-.nav-center {
-  flex: 1;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: #222;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.nav-center .arrow {
-  font-size: 12px;
-  color: #999;
-}
-
-/* 扩展菜单 */
-.extension {
-  position: fixed;
-  bottom: 56px;
-  left: 12px;
-  right: 12px;
-
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
-
-  transform: translateY(20px);
-  opacity: 0;
-  pointer-events: none;
-
-  transition: all 0.2s ease;
-}
-
-.extension.show {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.extension-item {
-  padding: 14px 16px;
-  font-size: 14px;
-  color: #333;
-  border-bottom: 1px solid #eee;
-}
-
-.extension-item:last-child {
-  border-bottom: none;
-}
-
-.extension-item.danger {
-  color: #d93026;
-}
+    .nav-icon {
+      font-size: 28px;
+      margin-bottom: 6px;
+    }
 
+    .nav-name {
+      font-size: 14px;
+      font-weight: 600;
+    }
   </style>
 </head>
+
 <body>
 
-  <main class="content">
-    <p>当前工具内容区域</p>
-  </main>
-
-  <!-- 扩展菜单 -->
-  <div class="extension" id="extension">
-    <div class="extension-item">视图切换</div>
-    <div class="extension-item">工具设置</div>
-    <div class="extension-item">导出数据</div>
-    <div class="extension-item danger">清空记录</div>
+  <div class="bottom-panel">
+    <div class="nav-item" onclick="alert('跳转到首页')">
+      <div class="nav-icon">🏠</div>
+      <div class="nav-name">首页</div>
+    </div>
+    <div class="nav-item" onclick="alert('跳转到记账')">
+      <div class="nav-icon">📝</div>
+      <div class="nav-name">记账</div>
+    </div>
+    <div class="nav-item" onclick="alert('跳转到分类')">
+      <div class="nav-icon">📂</div>
+      <div class="nav-name">分类</div>
+    </div>
+    <div class="nav-item" onclick="alert('跳转到分析')">
+      <div class="nav-icon">📊</div>
+      <div class="nav-name">分析</div>
+    </div>
+    <div class="nav-item" onclick="alert('跳转到设置')">
+      <div class="nav-icon">⚙️</div>
+      <div class="nav-name">设置</div>
+    </div>
   </div>
 
-  <!-- 底部导航 -->
-  <nav class="bottom-bar">
-    <button class="nav-btn">←</button>
-
-    <div class="nav-center">
-      <span class="title">记账 · 本月</span>
-      <span class="arrow">▾</span>
-    </div>
-
-    <button class="nav-btn" onclick="toggleExt()">⋯</button>
-  </nav>
-
-  <script>
-    function toggleExt() {
-      document.getElementById('extension')
-        .classList.toggle('show')
-    }
-  </script>
-
 </body>
-</html>
+
+</html>
\ No newline at end of file