u
This commit is contained in:
oneao committed
1 parent
098a061308
commit
994321d049
40 files changed
+1401
-359
No files matched your search
@@ -1,22 +1,33 @@
|
||||
import type { LayoutChangeEvent } from 'react-native'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { Text, View } from 'react-native'
|
||||
import { ScrollView, Text, View } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LucideIcon } from '@/components/common/ao'
|
||||
import { IconJiaotong } from '@/components/iconfont'
|
||||
import { Fab, FabIcon } from '@/components/ui/fab'
|
||||
import { Grid, GridItem } from '@/components/ui/grid'
|
||||
import { AddIcon } from '@/components/ui/icon'
|
||||
import { Progress, ProgressFilledTrack } from '@/components/ui/progress'
|
||||
import AddMoneyDrawer from './components/AddDrawer'
|
||||
import TransactionsList from './components/TransactionsList'
|
||||
|
||||
export default function Money() {
|
||||
const [showDrawer, setShowDrawer] = useState(false)
|
||||
|
||||
const insets = useSafeAreaInsets()
|
||||
const [gradientHeight, setGradientHeight] = useState(200) // 默认渐变高度
|
||||
const gridLayout = useRef({ y: 0, height: 0 })
|
||||
const [gradientHeight, setGradientHeight] = useState(200)
|
||||
const gridLayout = useRef<{ y: number, height: number } | null>(null)
|
||||
|
||||
const onGridLayout = (e: LayoutChangeEvent) => {
|
||||
const { y, height } = e.nativeEvent.layout
|
||||
gridLayout.current = { y, height }
|
||||
setGradientHeight(y + height / 2 + 16 + insets.top)
|
||||
// 仅首次布局计算高度
|
||||
if (!gridLayout.current) {
|
||||
const { y, height } = e.nativeEvent.layout
|
||||
gridLayout.current = { y, height }
|
||||
setGradientHeight(y + height / 2 + 16 + insets.top)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
className="flex-1 relative bg-white"
|
||||
@@ -25,9 +36,8 @@ export default function Money() {
|
||||
}}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#a3f7bf', '#d4f9e2', '#ffffff']}
|
||||
locations={[0, 0.85, 1]}
|
||||
|
||||
colors={['#fef6e4', '#fff8e1', '#ffffff']}
|
||||
locations={[0, 0.95, 1]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
style={{
|
||||
@@ -40,8 +50,7 @@ export default function Money() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 页面内容 */}
|
||||
<View style={{ zIndex: 10, padding: 8 }}>
|
||||
<View style={{ zIndex: 10, paddingLeft: 12, paddingRight: 12 }}>
|
||||
<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-base">2025/11/10</Text>
|
||||
@@ -52,51 +61,52 @@ export default function Money() {
|
||||
</View>
|
||||
</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
|
||||
<View className="mt-2">
|
||||
{/* 余额区域 */}
|
||||
<View className="items-center mb-3">
|
||||
<Text className="text-gray-500 text-xs">
|
||||
余额
|
||||
<Text className="text-red-500">↓20%</Text>
|
||||
</Text>
|
||||
<Text className="font-bold text-2xl mt-0.5">22,313.00</Text>
|
||||
</View>
|
||||
|
||||
<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>
|
||||
{/* 收入/支出/结余 */}
|
||||
<View className="flex-row justify-around py-2">
|
||||
<View className="items-center">
|
||||
<Text className="text-gray-500 text-xs">
|
||||
收入
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">11.0</Text>
|
||||
<Text className="text-lg font-semibold mt-0.5">11.0</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-gray-600 text-xs">
|
||||
<Text>支出</Text>
|
||||
|
||||
<View className="items-center">
|
||||
<Text className="text-gray-500 text-xs">
|
||||
支出
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">11.0</Text>
|
||||
<Text className="text-lg font-semibold mt-0.5">11.0</Text>
|
||||
</View>
|
||||
<View className="flex flex-col items-center">
|
||||
<Text className="text-gray-600 text-xs">
|
||||
<Text>结余</Text>
|
||||
|
||||
<View className="items-center">
|
||||
<Text className="text-gray-500 text-xs">
|
||||
结余
|
||||
<Text className="text-green-500">↑20%</Text>
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">11.0</Text>
|
||||
<Text className="text-lg font-semibold mt-0.5">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-row items-center gap-3 mt-3">
|
||||
<Text className="text-xs text-gray-600 w-8 text-right">预算</Text>
|
||||
<View className="flex-1">
|
||||
<Progress>
|
||||
<Progress size="sm">
|
||||
<ProgressFilledTrack />
|
||||
</Progress>
|
||||
</View>
|
||||
|
||||
<Text className="text-xs text-gray-600">点击设置</Text>
|
||||
<Text className="text-xs text-blue-500">点击设置</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -121,6 +131,30 @@ export default function Money() {
|
||||
</View>
|
||||
|
||||
</View>
|
||||
|
||||
<View style={{ flex: 1, paddingHorizontal: 12 }}>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ paddingBottom: 16 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<TransactionsList />
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<Fab onPress={() => {
|
||||
setShowDrawer(true)
|
||||
}}
|
||||
>
|
||||
<FabIcon as={AddIcon} />
|
||||
</Fab>
|
||||
|
||||
<AddMoneyDrawer
|
||||
isOpen={showDrawer}
|
||||
onClose={() => {
|
||||
setShowDrawer(false)
|
||||
}}
|
||||
/>
|
||||
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user