u

code/base-project/base-app/src/app/(tabs)/money/components/BalanceCard.tsx

@@ -12,9 +12,9 @@ function BalanceCard() {
 
         {/* 总余额 */}
         <View className="items-center mb-4 mt-3">
-          <Text className="text-gray-500 text-sm font-medium mb-2">总余额 (CNY)</Text>
-          <Text className="text-4xl font-black text-gray-800 text-center tracking-tight">
-            ¥ 12,322.67
+          <Text className="text-gray-500 text-sm font-medium mb-2">总余额</Text>
+          <Text className="text-2xl font-black text-gray-800 text-center tracking-tight">
+           12,322.67
           </Text>
         </View>
 
@@ -22,12 +22,12 @@ function BalanceCard() {
         <View className="flex-row justify-between rounded-lg pt-4">
           {/* 收入 */}
           <View className="flex-1 items-center pr-3">
-            <View className="flex-row justify-center w-full mb-2">
+            <View className="flex-row justify-center items-center w-full mb-2">
               <Text className="text-gray-600 text-sm font-medium">收入</Text>
               <Text className="text-green-500 text-xs font-semibold ml-1">↑ +10%</Text>
             </View>
-            <Text className="text-2xl font-bold text-gray-800 text-center">
-              ¥ 12,232.00
+            <Text className="text-base font-bold text-gray-800 text-center">
+              12,232.00
             </Text>
           </View>
 
@@ -36,12 +36,12 @@ function BalanceCard() {
 
           {/* 支出 */}
           <View className="flex-1 items-center pl-3">
-            <View className="flex-row justify-center w-full mb-2">
+            <View className="flex-row justify-center items-center w-full mb-2">
               <Text className="text-gray-600 text-sm font-medium">支出</Text>
               <Text className="text-red-500 text-xs font-semibold ml-1">↓ -20%</Text>
             </View>
-            <Text className="text-2xl font-bold text-gray-800 text-center">
-              ¥ 1,980.00
+            <Text className="text-base font-bold text-gray-800 text-center">
+              1,980.00
             </Text>
           </View>
         </View>

code/base-project/base-app/src/app/(tabs)/money/components/MoneyIcon.tsx

@@ -14,7 +14,7 @@ const iconMap: Record<string, React.ElementType> = {
 const DefaultIcon = IconLingshi
 
 // 根据类别 name 返回图标组件
-export function getCategoryIcon(name: string, size = 24,type: , color?: string) {
+export function getCategoryIcon(name: string, size = 24, color?: string) {
   const IconComponent = iconMap[name] || DefaultIcon
   return <IconComponent size={size} color={color} />
 }

code/base-project/base-app/src/app/(tabs)/money/components/TransactionsList.tsx

@@ -39,7 +39,7 @@ const sections: DaySection[] = [
       { id: '5', title: '电影票', description: '周末电影', amount: 45, type: 'expense' },
       { id: '6', title: '兼职收入', description: '家教', amount: 1200, type: 'income' },
     ],
-  },
+  }
 ]
 
 export default function StaticTransactions() {
@@ -70,12 +70,12 @@ export default function StaticTransactions() {
           {section.data.map(item => (
             <View
               key={item.id}
-              className="flex-row items-center bg-white rounded-md p-4 shadow-md mb-4"
+              className="flex-row items-center p-2"
             >
               {/* 图标 */}
               <View className="w-12 h-12 rounded-full bg-white  shadow-md items-center justify-center mr-4">
                 {/* <IconFont name="shucai" size={28} /> */}
-                <IconFont name='jiaotong' size={28} />
+                <IconFont name="jiaotong" size={28} />
               </View>
 
               {/* 标题 + 描述 */}

code/base-project/base-app/src/app/(tabs)/money/index.tsx

@@ -1,59 +1,126 @@
+import type { LayoutChangeEvent } from 'react-native'
 import { LinearGradient } from 'expo-linear-gradient'
-import React, { useState } from 'react'
-import { ScrollView, Text, View } from 'react-native'
+import React, { useRef, useState } from 'react'
+import { Text, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { LucideIcon } from '@/components/common/ao'
-
-import BalanceCard from './components/BalanceCard'
-import TabSelector from './components/TabSelector'
-import TransactionsList from './components/TransactionsList'
+import { IconJiaotong } from '@/components/iconfont'
+import { Grid, GridItem } from '@/components/ui/grid'
+import { Progress, ProgressFilledTrack } from '@/components/ui/progress'
 
 export default function Money() {
   const insets = useSafeAreaInsets()
-  const [selected, setSelected] = useState(0)
-
+  const [gradientHeight, setGradientHeight] = useState(200) // 默认渐变高度
+  const gridLayout = useRef({ y: 0, height: 0 })
+  const onGridLayout = (e: LayoutChangeEvent) => {
+    const { y, height } = e.nativeEvent.layout
+    gridLayout.current = { y, height }
+    setGradientHeight(y + height / 2 + 16 + insets.top)
+  }
   return (
-    <LinearGradient
-      colors={['#f2f6ff', '#ffffff']}
-      start={{ x: 0, y: 0 }}
-      end={{ x: 0, y: 1 }}
-      className="flex-1"
+    <View
+      className="flex-1 relative bg-white"
       style={{
         paddingTop: insets.top,
-        paddingBottom: insets.bottom,
-        paddingLeft: 8,
-        paddingRight: 8,
       }}
     >
-      {/* 顶部固定栏 */}
-      <View style={{ zIndex: 10 }}>
+      <LinearGradient
+        colors={['#a3f7bf', '#d4f9e2', '#ffffff']}
+        locations={[0, 0.85, 1]}
+
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: gradientHeight,
+          zIndex: 0,
+        }}
+      />
+
+      {/* 页面内容 */}
+      <View style={{ zIndex: 10, padding: 8 }}>
         <View className="flex flex-row justify-between items-center py-2">
           <View className="flex flex-row items-center gap-2">
-            <Text className="font-bold text-lg">2025/11/10</Text>
-            <LucideIcon icon="CircleChevronDown" size={16} />
+            <Text className="font-bold text-base">2025/11/10</Text>
+            <LucideIcon icon="CircleChevronDown" size={14} />
           </View>
-          <View className="flex flex-row items-center gap-2">
+          <View className="flex flex-row  items-center gap-2">
             <LucideIcon icon="SlidersHorizontal" />
-            <Text>筛选</Text>
           </View>
         </View>
 
-        <TabSelector
-          options={['明细', '视图']}
-          selected={selected}
-          onSelect={tab => setSelected(tab)}
-        />
-      </View>
+        <View>
+          <View className="flex flex-col items-center">
+            <Text className="text-gray-600 text-xs">
+              <Text>余额</Text>
+              <Text className="text-green-500">↑20%</Text>
+            </Text>
+            <Text className="font-bold text-xl">
+              22313.00
+            </Text>
+          </View>
 
-      {/* 可滚动内容 */}
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{ paddingBottom: 20 }}
-        style={{ marginTop: 0 }}
-      >
-        <BalanceCard />
-        <TransactionsList />
-      </ScrollView>
-    </LinearGradient>
+          <View className="flex flex-row  justify-between mt-2">
+            <View className="flex flex-col items-center">
+              <Text className="text-gray-600 text-xs">
+                <Text>收入</Text>
+                <Text className="text-green-500">↑20%</Text>
+              </Text>
+              <Text className="text-lg font-bold">11.0</Text>
+            </View>
+            <View className="flex flex-col items-center">
+              <Text className="text-gray-600 text-xs">
+                <Text>支出</Text>
+                <Text className="text-green-500">↑20%</Text>
+              </Text>
+              <Text className="text-lg font-bold">11.0</Text>
+            </View>
+            <View className="flex flex-col items-center">
+              <Text className="text-gray-600 text-xs">
+                <Text>结余</Text>
+                <Text className="text-green-500">↑20%</Text>
+              </Text>
+              <Text className="text-lg font-bold">11.0</Text>
+            </View>
+          </View>
+
+          <View className="flex flex-row items-center gap-4 mt-4 ">
+            <Text className="text-xs text-gray-600">预算</Text>
+
+            <View className="flex-1">
+              <Progress>
+                <ProgressFilledTrack />
+              </Progress>
+            </View>
+
+            <Text className="text-xs text-gray-600">点击设置</Text>
+          </View>
+        </View>
+
+        <View
+          onLayout={onGridLayout}
+          className="mt-4 pt-2 pb-2 bg-white rounded-md"
+        >
+          <Grid
+            _extra={{ className: 'grid-cols-5' }}
+          >
+            {[...Array.from({ length: 5 })].map((_, i) => (
+              <GridItem
+                key={i}
+                className="flex flex-col items-center"
+                _extra={{ className: 'col-span-1' }}
+              >
+                <IconJiaotong size={28} />
+                <Text className="text-xs mt-1 text-gray-500">账单</Text>
+              </GridItem>
+            ))}
+          </Grid>
+        </View>
+
+      </View>
+    </View>
   )
 }

code/base-project/base-app/src/app/(tabs)/money/index2.tsx

@@ -0,0 +1,90 @@
+// import { LinearGradient } from 'expo-linear-gradient'
+// import React from 'react'
+// import { Dimensions, View } from 'react-native'
+// import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+// export default function Money() {
+//   const insets = useSafeAreaInsets()
+//   const { height } = Dimensions.get('window')
+//   const gradientHeight = height / 3 // 渐变高度 1/3
+
+//   return (
+//     <View className="flex-1 relative">
+//       {/* 渐变层 */}
+//       <LinearGradient
+//         colors={['#e6f0ff', '#ffffff']} // 顶部蓝色 → 白色
+//         start={{ x: 0, y: 0 }}
+//         end={{ x: 0, y: 1 }}
+//         style={{
+//           position: 'absolute',
+//           top: 0,
+//           left: 0,
+//           right: 0,
+//           height: gradientHeight,
+//           paddingTop: insets.top,
+//           paddingHorizontal: 8,
+//         }}
+//       >
+//         {/* 可以在这里放置顶部卡片或统计信息 */}
+//       </LinearGradient>
+//     </View>
+//   )
+// }
+import { LinearGradient } from 'expo-linear-gradient'
+import React, { useState } from 'react'
+import { ScrollView, Text, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { LucideIcon } from '@/components/common/ao'
+
+import BalanceCard from './components/BalanceCard'
+import TabSelector from './components/TabSelector'
+import TransactionsList from './components/TransactionsList'
+
+export default function Money() {
+  const insets = useSafeAreaInsets()
+  const [selected, setSelected] = useState(0)
+
+  return (
+    <LinearGradient
+      colors={['#e6f0ff', '#ffffff']}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 0, y: 1 }}
+      className="flex-1"
+      style={{
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: 8,
+        paddingRight: 8,
+      }}
+    >
+      <View style={{ zIndex: 10 }}>
+        <View className="flex flex-row justify-between items-center py-2">
+          <View className="flex flex-row items-center gap-2">
+            <Text className="font-bold text-lg">2025/11/10</Text>
+            <LucideIcon icon="CircleChevronDown" size={16} />
+          </View>
+          <View className="flex flex-row items-center gap-2">
+            <LucideIcon icon="SlidersHorizontal" />
+            <Text>筛选</Text>
+          </View>
+        </View>
+
+        <TabSelector
+          options={['明细', '视图']}
+          selected={selected}
+          onSelect={tab => setSelected(tab)}
+        />
+      </View>
+
+      {/* 可滚动内容 */}
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: 20 }}
+        style={{ marginTop: 0 }}
+      >
+        <BalanceCard />
+        <TransactionsList />
+      </ScrollView>
+    </LinearGradient>
+  )
+}