u

2025-11-09 20:59:22 +08:00
1 parent 8a6d29f5d0
commit 7ed98a04c1
@@ -1,53 +1,159 @@
-import { LinearGradient } from 'expo-linear-gradient'
-import { useState } from 'react'
+import type { SegmentedTabItem } from '@/components/common/ao/SegmentedTabs'
+import React, { useEffect, useState } from 'react'
 import { Pressable, Text, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { LucideIcon } from '@/components/common/ao'
+import SegmentedTabs from '@/components/common/ao/SegmentedTabs'
+import { Button, ButtonText } from '@/components/ui/button'

-export default function Money() {
-  const insets = useSafeAreaInsets()
-  const [active, setActive] = useState<'明细' | '视图'>('明细')
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+} from '@/components/ui/drawer'
+import { CloseIcon, Icon } from '@/components/ui/icon'
+
+function Detail() {
+  const [dateSelected, setDateSelected] = useState(false)
+  const [filterOpen, setFilterOpen] = useState(false)
+
+  useEffect(() => {
+    console.log('Detail加载了')
+  }, [])
+  // 动画角度
+  const dateRotation = useSharedValue(0)
+  const filterRotation = useSharedValue(0)
+
+  const toggleDate = () => {
+    setDateSelected(prev => !prev)
+
+    dateRotation.value = withTiming(dateRotation.value === 0 ? 180 : 0, { duration: 200 })
+  }
+
+  const toggleFilter = () => {
+    setFilterOpen(prev => !prev)
+
+    filterRotation.value = withTiming(filterRotation.value === 0 ? 180 : 0, { duration: 200 })
+  }
+
+  const dateAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${dateRotation.value}deg` }],
+  }))
+
+  const filterAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${filterRotation.value}deg` }],
+  }))

  return (
-    <LinearGradient
-      colors={['#fffaf0', '#fefefe', '#f0fff4']}
-      start={{ x: 0, y: 0 }}
-      end={{ x: 1, y: 1 }}
-      style={{
-        flex: 1,
-        paddingTop: insets.top,
-        paddingBottom: insets.bottom,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-    >
-      <View style={{ flexDirection: 'row' }}>
-        {['明细', '视图'].map((item) => {
-          const isActive = active === item
-          return (
-            <Pressable
-              key={item}
-              onPress={() => setActive(item as '明细' | '视图')}
-              style={{ alignItems: 'center', paddingVertical: 12 }}
-            >
-              <Text style={{ fontSize: isActive ? 22 : 16, color: isActive ? '#333' : '#888', fontWeight: isActive ? '600' : '400' }}>
-                {item}
-              </Text>
-              {/* 底部指示线 */}
-              {isActive && (
-                <View
-                  style={{
-                    marginTop: 4,
-                    height: 2,
-                    width: 24,
-                    backgroundColor: '#007AFF',
-                    borderRadius: 1,
-                  }}
-                />
-              )}
-            </Pressable>
-          )
-        })}
+    <View>
+      <View className="flex-row justify-between">
+        <Pressable
+          className="flex-row items-center gap-1"
+          onPress={toggleDate}
+        >
+          <Text style={{ fontSize: 16 }}>今天</Text>
+          <Animated.View style={dateAnimatedStyle}>
+            <LucideIcon icon="ChevronDown" size={18} />
+          </Animated.View>
+        </Pressable>
+
+        <Pressable
+          className="flex-row items-center gap-1"
+          onPress={toggleFilter}
+        >
+          <Text style={{ fontSize: 16 }}>筛选</Text>
+          <Animated.View style={filterAnimatedStyle}>
+            <LucideIcon icon="ChevronDown" size={18} />
+          </Animated.View>
+        </Pressable>
      </View>
-    </LinearGradient>
+
+      <Drawer
+        isOpen={dateSelected}
+        anchor="bottom"
+        onClose={() => {
+          setDateSelected(false)
+        }}
+        size="md"
+      >
+        <DrawerBackdrop />
+        <DrawerContent style={{ padding: 12 }}>
+          <DrawerBody style={{ padding: 0, marginTop: 0, marginBottom: 0 }}>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+            <Text>This is the basic drawer component.</Text>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </View>
+  )
+}
+
+function Chart() {
+  useEffect(() => {
+    console.log('Chart记载了')
+  }, [])
+  return (
+    <View>
+      <Text>这里是视图内这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容容</Text>
+    </View>
+  )
+}
+
+export default function MoneyTest() {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const tabs: SegmentedTabItem[] = [
+    {
+      label: '明细',
+      icon: 'ScrollText',
+      content: <Detail />, // ✅ 注意这里不要调用 Detail()
+    },
+    {
+      label: '视图',
+      icon: 'ChartPie',
+      content: <Chart />, // ✅ 注意这里不要调用 Chart()
+    },
+    {
+      label: '视图2',
+      icon: 'ChartPie',
+      content: (
+        <View>
+          <Text>这里是视图内容2</Text>
+        </View>
+      ),
+    },
+  ]
+
+  return (
+    <SafeAreaView style={{ flex: 1, paddingTop: 4, paddingLeft: 8, paddingRight: 8 }}>
+      <SegmentedTabs
+        headerWidth={220}
+        tabs={tabs}
+        value={selectedIndex}
+        onChange={setSelectedIndex}
+        cacheContent={true}
+      />
+    </SafeAreaView>
  )
 }