u

2026-01-29 22:54:15 +08:00
1 parent 295b3306a3
commit c62c9d080b
@@ -0,0 +1,126 @@
+import dayjs from 'dayjs'
+import { useState } from 'react'
+import { Text, TouchableOpacity, View } from 'react-native'
+import { VictoryChart, VictoryLine, VictoryPie, VictoryTheme, VictoryTooltip, VictoryVoronoiContainer } from 'victory-native'
+import { ADatePicker, ASegmentedTabs, LucideIcon } from '@/components/common/ao'
+import CustomHeader from '@/components/custom/Header'
+import PagerTabs from '@/components/custom/PagerTabs'
+
+type GroupBy = 'day' | 'month' | 'year'
+type AnalysisType = 'expense' | 'income'
+
+interface AnalysisContentProps {
+  analysisType: AnalysisType
+}
+
+export default function Analysis() {
+  function AnalysisContent({ analysisType }: AnalysisContentProps) {
+    const [timeType, setTimeType] = useState<number>(0)
+    const [groupBy, setGroupBy] = useState<GroupBy>('day')
+
+    const [startDate, setStartDate] = useState(
+      dayjs().format('YYYY-MM'),
+    )
+    const [endDate, setEndDate] = useState(
+      dayjs().format('YYYY-MM'),
+    )
+
+    const [showDatePicker, setShowDatePicker] = useState(false)
+
+    return (
+      <View className="p-4">
+        <ASegmentedTabs
+          value={timeType}
+          onChange={(index) => {
+            setTimeType(index)
+          }}
+          tabs={[
+            { key: '1', label: '按月' },
+            { key: '2', label: '按年' },
+            { key: '3', label: '自定义' },
+          ]}
+        />
+
+        <TouchableOpacity
+          className="mt-14 flex flex-row justify-center items-center"
+        >
+          <LucideIcon icon="Calendar" size={16} color="#666" clickable={false} />
+          <Text className="font-semibold text-lg mr-2 ml-1">{startDate}</Text>
+          {timeType === 2 && (
+            <>
+              <Text> - </Text>
+              <Text className="font-semibold text-lg mx-1">
+                {endDate}
+              </Text>
+            </>
+          )}
+          <LucideIcon icon="ChevronDown" size={16} color="#666" clickable={false} />
+        </TouchableOpacity>
+
+        <View className="mt-4">
+          <Text className="text-lg font-semibold text-gray-700">趋势分析</Text>
+
+          <VictoryChart
+            height={220}
+            theme={VictoryTheme.material}
+            padding={{ top: 15, bottom: 30, left: 40, right: 40 }}
+          >
+            <VictoryLine
+              interpolation="catmullRom"
+              data={[
+              ]}
+
+            />
+          </VictoryChart>
+        </View>
+
+        <View className="mt-4">
+          <Text className="text-lg font-semibold text-gray-700">分类构成</Text>
+
+          <VictoryPie
+            height={250}
+            innerRadius={50}
+            data={[
+            ]}
+            theme={VictoryTheme.material}
+          />
+        </View>
+
+        <ADatePicker
+          show={showDatePicker}
+          mode="month"
+          onConfirm={(val) => {
+            setShowDatePicker(false)
+          }}
+          onClose={() => {
+            setShowDatePicker(false)
+          }}
+        />
+      </View>
+    )
+  }
+
+  return (
+    <View className="flex-1">
+      <CustomHeader
+        showHeader={false}
+      />
+
+      <PagerTabs
+        showCustomHeader={true}
+        routes={[
+          {
+            key: 'expense',
+            title: '支出',
+            element: <AnalysisContent analysisType="expense" />,
+          },
+          {
+            key: 'income',
+            title: '收入',
+            element: <AnalysisContent analysisType="income" />,
+          },
+        ]}
+      />
+    </View>
+  )
+}