u

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

@@ -1,5 +1,6 @@
+import type { MoneyCategoryResult } from '@/request/api/money'
 import type { MoneyCategory } from '@/types/money'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Pressable, Text, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import SegmentedTabs from '@/components/common/ao/SegmentedTabs'
@@ -11,6 +12,7 @@ import {
   DrawerHeader,
 } from '@/components/ui/drawer'
 import { Grid, GridItem } from '@/components/ui/grid'
+import { getMoneyCategoryApi } from '@/request/api/money'
 import MoneyCategoryIcon from './MoneyCategoryIcon'
 
 interface AddMoneyDrawerProps {
@@ -23,8 +25,30 @@ export default function AddMoneyDrawer({
   onClose,
 }: AddMoneyDrawerProps) {
   const insets = useSafeAreaInsets()
-  const [seletedIndex, setSelectedIndex] = useState(0)
-  const categories: MoneyCategory[] = []
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null)
+
+  const [categories, setCategories] = useState<MoneyCategoryResult>({
+    income: [],
+    expense: [],
+  })
+
+  useEffect(() => {
+    if (isOpen) {
+      const fetchCategories = async () => {
+        try {
+          const res = await getMoneyCategoryApi()
+          if (res.isSuccess) {
+            setCategories(res.data)
+          }
+        }
+        catch (err) {
+          console.error('获取分类失败', err)
+        }
+      }
+      fetchCategories()
+    }
+  }, [isOpen])
 
   return (
     <Drawer
@@ -34,36 +58,19 @@ export default function AddMoneyDrawer({
       onClose={onClose}
     >
       <DrawerBackdrop />
-      <DrawerContent
-        style={{
-          padding: 0,
-          paddingLeft: 16,
-          paddingRight: 16,
-        }}
-      >
+      <DrawerContent style={{ padding: 0, paddingLeft: 16, paddingRight: 16 }}>
         <DrawerHeader
           className="flex items-center justify-between"
-          style={{
-            paddingTop: insets.top,
-            margin: 0,
-            padding: 0,
-          }}
+          style={{ paddingTop: insets.top, margin: 0, padding: 0 }}
         >
           <View className="w-1" />
-
           <SegmentedTabs
-            value={seletedIndex}
-            tabs={[
-              { label: '收入' },
-              { label: '支出' },
-            ]}
-            onChange={(index) => {
-              setSelectedIndex(index)
-            }}
+            value={selectedIndex}
+            tabs={[{ label: '收入' }, { label: '支出' }]}
+            onChange={setSelectedIndex}
             style={{ width: 180 }}
             className="mx-auto"
           />
-
           <Pressable onPress={onClose}>
             <Text className="text-gray-500 font-medium">取消</Text>
           </Pressable>
@@ -71,20 +78,43 @@ export default function AddMoneyDrawer({
 
         <DrawerBody>
           <Grid className="gap-4" _extra={{ className: 'grid-cols-4' }}>
-            {categories.map((item, index) => (
-              <GridItem
-                key={index}
-                className="flex flex-col items-center justify-center"
-                _extra={{ className: 'col-span-1' }}
-              >
-                <Pressable>
-                  <View className="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center">
-                    <MoneyCategoryIcon name={item.name} size={28} />
-                  </View>
-                  <Text className="text-sm mt-1">{item.label}</Text>
-                </Pressable>
-              </GridItem>
-            ))}
+            {(() => {
+              const list = selectedIndex === 0 ? categories.income : categories.expense
+              const items = list.map((item) => {
+                const isSelected = selectedCategoryId === item.id
+                return (
+                  <GridItem key={item.id} _extra={{ className: 'col-span-1' }}>
+                    <Pressable
+                      className={`flex flex-col items-center justify-center p-1 rounded ${
+                        isSelected ? 'bg-blue-100' : ''
+                      }`}
+                      onPress={() => setSelectedCategoryId(item.id)}
+                    >
+                      <View
+                        className={`w-14 h-14 rounded-full flex items-center justify-center ${
+                          isSelected ? 'bg-blue-400' : 'bg-gray-200'
+                        }`}
+                      >
+                        <MoneyCategoryIcon name={item.icon} size={28} />
+                      </View>
+                      <Text className={`text-sm mt-1 ${isSelected ? 'text-blue-600 font-semibold' : ''}`}>
+                        {item.name}
+                      </Text>
+                    </Pressable>
+                  </GridItem>
+                )
+              })
+
+              const remainder = list.length % 4
+              if (remainder > 0) {
+                const emptyCount = 4 - remainder
+                for (let i = 0; i < emptyCount; i++) {
+                  items.push(<GridItem key={`empty-${i}`} _extra={{ className: 'col-span-1' }} />)
+                }
+              }
+
+              return items
+            })()}
           </Grid>
         </DrawerBody>
       </DrawerContent>

code/base-project/base-app/src/request/index.ts

@@ -80,7 +80,7 @@ const alovaInstance = createAlova({
           return
         }
         catch (err) {
-          router.replace('/auth/login')
+          // router.replace('/auth/login')
           return Promise.reject(err)
         }
       }

code/base-project/base-app/src/types/money.ts

@@ -1,8 +1,7 @@
 export interface MoneyCategory {
-  id: string
+  id: number
   user_id: number
   name: string
-  label: string
   icon: string
   sort_number: number
   type: number