u

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

@@ -0,0 +1,59 @@
+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={['#f2f6ff', '#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>
+  )
+}