diff --git a/code/allapp/allapp-rn/src/app/(tabs)/chat.tsx b/code/allapp/allapp-rn/src/app/(tabs)/chat.tsx index 6928aedb..66c7abf8 100644 --- a/code/allapp/allapp-rn/src/app/(tabs)/chat.tsx +++ b/code/allapp/allapp-rn/src/app/(tabs)/chat.tsx @@ -1,5 +1,7 @@ import { Text, View } from 'react-native' +import { ScrollView } from 'react-native-gesture-handler' import { AButton, ACell, ACellGroup } from '@/components/common/ao' +import { Grid, GridItem } from '@/components/ui/grid' import { useMoneyCategoryStore } from '@/store/moneyCategory' export default function Demo() { @@ -15,22 +17,13 @@ export default function Demo() { } return ( - - - - - - - - - - resetCategory()}>重置记账分类 - getCategories()}>获取记账分类 - + + + + + + + + ) } diff --git a/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx b/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx index 70a80e21..bbca4451 100644 --- a/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx +++ b/code/allapp/allapp-rn/src/app/money/category/setting/index.tsx @@ -238,7 +238,7 @@ export default function MoneyCategorySetting() { > - 拖到这里删除 + {draggingDeleteZone ? '松手删除（将删除该类下所有记录）' : '拖到这里删除'} diff --git a/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid copy.tsx b/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid copy.tsx new file mode 100644 index 00000000..4b646707 --- /dev/null +++ b/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid copy.tsx @@ -0,0 +1,111 @@ +import type { ViewStyle } from 'react-native' +import type { MoneyCategoryItem } from '@/types/money/category' +import React, { useEffect, useMemo, useRef } from 'react' +import { FlatList, Pressable, Text, View } from 'react-native' +import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon' + +interface CategoryGridProps { + data: MoneyCategoryItem[] + selectedCategory?: MoneyCategoryItem | null + onSelectCategory?: (item: MoneyCategoryItem | null) => void + + className?: string + style?: ViewStyle +} + +export default function CategoryGrid({ + data, + selectedCategory, + onSelectCategory, + className, + style, +}: CategoryGridProps) { + const flatListRef = useRef>(null) + + // 每行 4 个，补齐空项 + const memoItems = useMemo(() => { + const items = [...data] + const remainder = items.length % 4 + if (remainder > 0) { + const emptyCount = 4 - remainder + for (let i = 0; i < emptyCount; i++) { + items.push({ id: `empty-${i}` } as any) + } + } + return items + }, [data]) + + // 自动滚动到选中行 + useEffect(() => { + if (!selectedCategory || !flatListRef.current) + return + + // 找到选中项下标 + const itemIndex = data.findIndex(item => item.id === selectedCategory.id) + if (itemIndex === -1 || !flatListRef.current) + return + + setTimeout(() => { + if (flatListRef.current) { + flatListRef.current.scrollToIndex({ + index: Math.floor(itemIndex / 4), + animated: true, + viewPosition: 0.5, + }) + } + }, 0) + }, [selectedCategory]) + + return ( + item.id.toString()} + showsVerticalScrollIndicator={false} + className={`${className}`} + style={[style]} + getItemLayout={(data, index) => { + return { length: 80, offset: 80 * index, index } + }} + renderItem={({ item }) => { + if (!('name' in item)) + return + + const isSelected = selectedCategory?.id === item.id + + return ( + onSelectCategory?.(item)} + onLayout={(event) => { + const { height } = event.nativeEvent.layout + console.log('Pressable 高度:', height) + }} + > + + + + + {item.name} + + + ) + }} + /> + ) +} diff --git a/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid.tsx b/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid.tsx index f2301c61..e274a7ba 100644 --- a/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid.tsx +++ b/code/allapp/allapp-rn/src/app/money/record/editor/components/CategoryGrid.tsx @@ -1,89 +1,83 @@ -import type { ViewStyle } from 'react-native' +import type { FlatList } from 'react-native' import type { MoneyCategoryItem } from '@/types/money/category' -import React, { useMemo } from 'react' -import { FlatList, Pressable, Text, View } from 'react-native' +import React, { useEffect, useRef } from 'react' +import { Pressable, Text, View } from 'react-native' +import { ScrollView } from 'react-native-gesture-handler' import MoneyCategoryIcon from '@/components/common/MoneyCategoryIcon' +import { Grid, GridItem } from '@/components/ui/grid' interface CategoryGridProps { data: MoneyCategoryItem[] selectedCategory?: MoneyCategoryItem | null onSelectCategory?: (item: MoneyCategoryItem | null) => void - - className?: string - style?: ViewStyle } export default function CategoryGrid({ data, selectedCategory, onSelectCategory, - className, - style, }: CategoryGridProps) { - // 计算补齐数组，让每行4个 - const memoItems = useMemo(() => { - const items = [...data] - const remainder = items.length % 4 - if (remainder > 0) { - const emptyCount = 4 - remainder - for (let i = 0; i < emptyCount; i++) { - items.push({ id: `empty-${i}` } as any) + const flatListRef = useRef>(null) + + // 自动滚动到选中行 + useEffect(() => { + if (!selectedCategory || !flatListRef.current) + return + + // 找到选中项下标 + const itemIndex = data.findIndex(item => item.id === selectedCategory.id) + if (itemIndex === -1 || !flatListRef.current) + return + + setTimeout(() => { + if (flatListRef.current) { + flatListRef.current.scrollToIndex({ + index: Math.floor(itemIndex / 4), + animated: true, + viewPosition: 0.5, + }) } - } - return items - }, [data]) + }, 0) + }, [selectedCategory]) return ( - item.id.toString()} - showsVerticalScrollIndicator={false} - className={`${className}`} - style={[style]} - renderItem={({ item }) => { - if (!('name' in item)) { - return - } - - const isSelected = selectedCategory?.id === item.id - - return ( - onSelectCategory?.(item)} - > - + + {data.map((item) => { + const isSelected = selectedCategory?.id === item.id + return ( + - - - - {item.name} - - - ) - }} - /> + onSelectCategory?.(item)} + > + + + + + {item.name} + + + + ) + })} + + ) } diff --git a/code/allapp/allapp-rn/src/request/index.ts b/code/allapp/allapp-rn/src/request/index.ts index de7e4c95..476eb11d 100644 --- a/code/allapp/allapp-rn/src/request/index.ts +++ b/code/allapp/allapp-rn/src/request/index.ts @@ -32,8 +32,8 @@ function isWhiteListed(url: string) { } const alovaInstance = createAlova({ - baseURL: 'http://192.168.5.6:8086/app', - // baseURL: 'http://192.168.1.137:8086/app', + // baseURL: 'http://192.168.5.6:8086/app', + baseURL: 'http://192.168.1.137:8086/app', requestAdapter: axiosRequestAdapter(), timeout: 5000, cacheFor: null, diff --git a/code/allapp/allapp-rn/src/store/moneyCategory.ts b/code/allapp/allapp-rn/src/store/moneyCategory.ts index 1770c072..13b8093b 100644 --- a/code/allapp/allapp-rn/src/store/moneyCategory.ts +++ b/code/allapp/allapp-rn/src/store/moneyCategory.ts @@ -107,7 +107,7 @@ export const useMoneyCategoryStore = create()( try { await queryMoneyCategoryApi().then((res) => { if (res.isSuccess) { - set({ categories: res.data.categories || [] }) + get().setCategories(res.data.categories || []) } }).catch((err) => { console.log(err)