u

code/allapp/allapp-rn/src/app/money/category/setting/components/CreateCategory.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon'
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+} from '@/components/ui/drawer'
+import { Input, InputField } from '@/components/ui/input'
+
+import { useMoneyCategoryStore } from '@/store/moneyCategory'
+
+interface CreateCategoryProps {
+  open: boolean
+  onClose?: () => void
+}
+
+export default function CreateCategory({
+  open,
+  onClose,
+}: CreateCategoryProps) {
+  const moneyCategoryStore = useMoneyCategoryStore()
+
+  const [isOpen, setIsOpen] = useState(open)
+
+  useEffect(() => {
+    setIsOpen(open)
+  }, [open])
+
+  function handleClose() {
+    setIsOpen(false)
+    onClose && onClose()
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={handleClose} size="lg" anchor="bottom">
+      <DrawerBackdrop />
+      <DrawerContent
+        style={{
+          paddingLeft: 0,
+          paddingRight: 0,
+        }}
+      >
+        <DrawerHeader className="px-4 flex flex-col gap-4">
+          <View className="flex flex-row items-center justify-between w-full">
+            <Pressable>
+              <Text className="text-gray-600">取消</Text>
+            </Pressable>
+
+            <Text className="text-xl  font-medium">类别</Text>
+
+            <Pressable>
+              <Text className="text-gray-600">确认</Text>
+            </Pressable>
+          </View>
+
+          <Input
+            variant="outline"
+          >
+            <InputField placeholder="请输入名称" />
+          </Input>
+
+        </DrawerHeader>
+        <DrawerBody>
+          <ScrollView className="flex-1">
+            {Object.entries(moneyCategoryStore.ICON_GROUPS).map(([groupName, icons]) => (
+              <View key={groupName} className="mb-4">
+                <Text className="text-center mb-4">
+                  {groupName}
+                </Text>
+
+                <View className="flex flex-row flex-wrap">
+                  {icons.map(icon => (
+                    <Pressable
+                      key={icon}
+                      className="w-1/5 mb-3 flex items-center"
+                      onPress={() => {
+                        console.log('select icon:', icon)
+                      }}
+                    >
+                      <View
+                        style={{
+                          width: 46,
+                          height: 46,
+                          borderRadius: 28,
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                          backgroundColor: '#F3F4F6',
+                        }}
+                      >
+                        <MoneyCategoryIcon name={icon} size={28} />
+                      </View>
+                    </Pressable>
+                  ))}
+                </View>
+              </View>
+            ))}
+          </ScrollView>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}

code/allapp/allapp-rn/src/app/money/category/setting/index.tsx

@@ -9,6 +9,7 @@ import { AButton, ATab, LucideIcon } from '@/components/common/ao'
 import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon'
 import CustomHeader from '@/components/custom/Header'
 import { useMoneyCategoryStore } from '@/store/moneyCategory'
+import CreateCategory from './components/CreateCategory'
 
 export default function MoneyCategorySetting() {
   const [selectedTab, setSelectedTab] = useState(0)
@@ -21,6 +22,8 @@ export default function MoneyCategorySetting() {
   const [draggingDeleteZone, setDraggingDeleteZone] = useState<boolean>(false)
   const [deleteTimer, setDeleteTimer] = useState<number | null>(null)
 
+  const [openCreateCategory, setOpenCreateCategory] = useState<boolean>(false)
+
   useEffect(() => {
     setCategories(selectedTab === 0 ? moneyCategoryStore.getExpenseCategories() : moneyCategoryStore.getIncomeCategories())
   }, [selectedTab])
@@ -90,6 +93,9 @@ export default function MoneyCategorySetting() {
               color: '#fff',
               clickable: false,
             }}
+            onPress={(() =>
+              setOpenCreateCategory(true)
+            )}
           >
             新增
           </AButton>
@@ -114,14 +120,16 @@ export default function MoneyCategorySetting() {
                     Vibration.vibrate(50)
                     setDraggingId(data.key)
                   }}
-                  onDragEnd={(data) => {
+                  onDragEnd={(dragData) => {
                     setDraggingId('')
                     if (draggingDeleteZone)
                       return
 
-                    const newOrder = data.data
+                    const newData = dragData.data
 
-                    moneyCategoryStore.updateCategories(newOrder, selectedTab)
+                    if (JSON.stringify(categories) !== JSON.stringify(newData)) {
+                      moneyCategoryStore.updateSortNumbers(newData, selectedTab)
+                    }
                   }}
                 />
               </Animated.ScrollView>
@@ -139,7 +147,7 @@ export default function MoneyCategorySetting() {
                     const deleteId = Number(draggingId)
                     setCategories(prev => prev.filter(c => c.id !== deleteId))
 
-                    moneyCategoryStore.deleteCategoryById(deleteId, selectedTab)
+                    moneyCategoryStore.deleteCategoryById(deleteId)
 
                     setDraggingId('')
                     setDraggingDeleteZone(false)
@@ -179,6 +187,11 @@ export default function MoneyCategorySetting() {
           </Sortable.MultiZoneProvider>
         </View>
       </View>
+
+      <CreateCategory
+        open={openCreateCategory}
+        onClose={() => setOpenCreateCategory(false)}
+      />
     </View>
   )
 }