From dee2eab4044dc79d54efc1551352125346687193 Mon Sep 17 00:00:00 2001 From: ZhangAo Date: Mon, 10 Nov 2025 17:31:45 +0800 Subject: [PATCH] u --- code/base-project/base-app/iconfont.json | 2 +- .../base-app/src/app/(tabs)/_layout.tsx | 2 +- .../base-app/src/app/(tabs)/money.tsx | 159 ------------ .../(tabs)/money/components/BalanceCard.tsx | 53 ++++ .../app/(tabs)/money/components/MoneyIcon.tsx | 20 ++ .../(tabs)/money/components/TabSelector.tsx | 56 +++++ .../money/components/TransactionsList.tsx | 103 ++++++++ .../base-app/src/app/(tabs)/money/index.tsx | 59 +++++ .../components/common/ao/SegmentedTabs.tsx | 213 ++++++---------- .../src/components/iconfont/IconJiaotong.tsx | 124 +++++++++ .../src/components/iconfont/IconLingshi.tsx | 76 ++++++ .../src/components/iconfont/IconQq.tsx | 3 +- .../src/components/iconfont/IconQuxian1.tsx | 32 +++ .../src/components/iconfont/IconRiyongpin.tsx | 60 +++++ .../src/components/iconfont/IconShouru.tsx | 32 +++ .../src/components/iconfont/IconShucai.tsx | 48 ++++ .../src/components/iconfont/IconWeixin.tsx | 3 +- .../src/components/iconfont/IconYule.tsx | 72 ++++++ .../src/components/iconfont/IconZhichu.tsx | 32 +++ .../src/components/iconfont/IconZhiwen.tsx | 3 +- .../src/components/iconfont/index.tsx | 40 ++- .../base-app/src/request/index.ts | 2 +- code/base-project/base-app/test.html | 237 +++--------------- code/base-project/base-app/test2.html | 118 +++++++++ notes/前端开发/react-native/expo.md | 6 + 25 files changed, 1037 insertions(+), 518 deletions(-) delete mode 100644 code/base-project/base-app/src/app/(tabs)/money.tsx create mode 100644 code/base-project/base-app/src/app/(tabs)/money/components/BalanceCard.tsx create mode 100644 code/base-project/base-app/src/app/(tabs)/money/components/MoneyIcon.tsx create mode 100644 code/base-project/base-app/src/app/(tabs)/money/components/TabSelector.tsx create mode 100644 code/base-project/base-app/src/app/(tabs)/money/components/TransactionsList.tsx create mode 100644 code/base-project/base-app/src/app/(tabs)/money/index.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconJiaotong.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconLingshi.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconQuxian1.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconRiyongpin.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconShouru.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconShucai.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconYule.tsx create mode 100644 code/base-project/base-app/src/components/iconfont/IconZhichu.tsx create mode 100644 code/base-project/base-app/test2.html diff --git a/code/base-project/base-app/iconfont.json b/code/base-project/base-app/iconfont.json index 92f6b047..261e2320 100644 --- a/code/base-project/base-app/iconfont.json +++ b/code/base-project/base-app/iconfont.json @@ -1,5 +1,5 @@ { - "symbol_url": "//at.alicdn.com/t/c/font_5056764_6s6rld1vyq.js", + "symbol_url": "//at.alicdn.com/t/c/font_5056764_07da4x030572.js", "use_typescript": true, "save_dir": "./src/components/iconfont", "trim_icon_prefix": "icon", diff --git a/code/base-project/base-app/src/app/(tabs)/_layout.tsx b/code/base-project/base-app/src/app/(tabs)/_layout.tsx index 634be18f..972cf8d6 100644 --- a/code/base-project/base-app/src/app/(tabs)/_layout.tsx +++ b/code/base-project/base-app/src/app/(tabs)/_layout.tsx @@ -3,7 +3,7 @@ import CustomTabbar from '@/components/custom/Tabbar' import { toast } from '@/utils/toast' export const unstable_settings = { - initialRouteName: 'money', + initialRouteName: 'money/index', } export default function TabsLayout() { diff --git a/code/base-project/base-app/src/app/(tabs)/money.tsx b/code/base-project/base-app/src/app/(tabs)/money.tsx deleted file mode 100644 index 8397177e..00000000 --- a/code/base-project/base-app/src/app/(tabs)/money.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import type { SegmentedTabItem } from '@/components/common/ao/SegmentedTabs' -import React, { useEffect, useState } from 'react' -import { Pressable, Text, View } from 'react-native' -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' - -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 ( - - - - 今天 - - - - - - - 筛选 - - - - - - - { - setDateSelected(false) - }} - size="md" - > - - - - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - This is the basic drawer component. - - - - - ) -} - -function Chart() { - useEffect(() => { - console.log('Chart记载了') - }, []) - return ( - - 这里是视图内这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容这里是视图内容容 - - ) -} - -export default function MoneyTest() { - const [selectedIndex, setSelectedIndex] = useState(0) - const tabs: SegmentedTabItem[] = [ - { - label: '明细', - icon: 'ScrollText', - content: , // ✅ 注意这里不要调用 Detail() - }, - { - label: '视图', - icon: 'ChartPie', - content: , // ✅ 注意这里不要调用 Chart() - }, - { - label: '视图2', - icon: 'ChartPie', - content: ( - - 这里是视图内容2 - - ), - }, - ] - - return ( - - - - ) -} diff --git a/code/base-project/base-app/src/app/(tabs)/money/components/BalanceCard.tsx b/code/base-project/base-app/src/app/(tabs)/money/components/BalanceCard.tsx new file mode 100644 index 00000000..5add6f48 --- /dev/null +++ b/code/base-project/base-app/src/app/(tabs)/money/components/BalanceCard.tsx @@ -0,0 +1,53 @@ +import React from 'react' +import { Text, View } from 'react-native' + +function BalanceCard() { + return ( + + + + + 账单已出 + + + {/* 总余额 */} + + 总余额 (CNY) + + ¥ 12,322.67 + + + + {/* 收入 / 支出 */} + + {/* 收入 */} + + + 收入 + ↑ +10% + + + ¥ 12,232.00 + + + + {/* 分隔线 */} + + + {/* 支出 */} + + + 支出 + ↓ -20% + + + ¥ 1,980.00 + + + + + + ) +} + +export default BalanceCard diff --git a/code/base-project/base-app/src/app/(tabs)/money/components/MoneyIcon.tsx b/code/base-project/base-app/src/app/(tabs)/money/components/MoneyIcon.tsx new file mode 100644 index 00000000..6247202b --- /dev/null +++ b/code/base-project/base-app/src/app/(tabs)/money/components/MoneyIcon.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { IconJiaotong, IconLingshi, IconRiyongpin, IconShouru, IconShucai, IconYule, IconZhichu } from '@/components/iconfont' + +// 图标映射表 +const iconMap: Record = { + jiaotong: IconJiaotong, + lingshi: IconLingshi, + riyongpin: IconRiyongpin, + shucai: IconShucai, + yule: IconYule, +} + +// 默认图标 +const DefaultIcon = IconLingshi + +// 根据类别 name 返回图标组件 +export function getCategoryIcon(name: string, size = 24,type: , color?: string) { + const IconComponent = iconMap[name] || DefaultIcon + return +} diff --git a/code/base-project/base-app/src/app/(tabs)/money/components/TabSelector.tsx b/code/base-project/base-app/src/app/(tabs)/money/components/TabSelector.tsx new file mode 100644 index 00000000..3f87ebd6 --- /dev/null +++ b/code/base-project/base-app/src/app/(tabs)/money/components/TabSelector.tsx @@ -0,0 +1,56 @@ +import { Pressable, Text, View } from 'react-native' +import Animated, { useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated' +import { IconQuxian1 } from '@/components/iconfont' + +interface TabSelectorProps { + options: string[] + selected: number + onSelect: (tab: number) => void +} + +const TabSelector: React.FC = ({ options, selected, onSelect }) => { + return ( + + {options.map((tab, index) => { + const isActive = selected === index + + const animatedStyle = useAnimatedStyle(() => ({ + transform: [ + { rotate: '50deg' }, + { scale: withSpring(isActive ? 1 : 0.8, { damping: 12, stiffness: 120 }) }, + ], + opacity: withTiming(isActive ? 1 : 0, { duration: 200 }), + })) + + return ( + + onSelect(index)} + className="h-full items-center justify-center" + > + + {tab} + + + + + + + + ) + })} + + ) +} + +export default TabSelector diff --git a/code/base-project/base-app/src/app/(tabs)/money/components/TransactionsList.tsx b/code/base-project/base-app/src/app/(tabs)/money/components/TransactionsList.tsx new file mode 100644 index 00000000..273fbf39 --- /dev/null +++ b/code/base-project/base-app/src/app/(tabs)/money/components/TransactionsList.tsx @@ -0,0 +1,103 @@ +import React from 'react' +import { Text, View } from 'react-native' +import { LucideIcon } from '@/components/common/ao' +import IconFont from '@/components/iconfont' + +interface Transaction { + id: string + description: string + title: string + amount: number + type: 'income' | 'expense' +} + +interface DaySection { + title: string + totalIncome: number + totalExpense: number + data: Transaction[] +} + +// 模拟数据 +const sections: DaySection[] = [ + { + title: '2024/11/10', + totalIncome: 3200, + totalExpense: 1980, + data: [ + { id: '1', title: '午餐', description: '公司食堂', amount: 25, type: 'expense' }, + { id: '2', title: '打车', description: '回家', amount: 40, type: 'expense' }, + { id: '3', title: '工资', description: '11月工资', amount: 3200, type: 'income' }, + ], + }, + { + title: '2024/11/09', + totalIncome: 1200, + totalExpense: 560, + data: [ + { id: '4', title: '早餐', description: '面包牛奶', amount: 15, type: 'expense' }, + { id: '5', title: '电影票', description: '周末电影', amount: 45, type: 'expense' }, + { id: '6', title: '兼职收入', description: '家教', amount: 1200, type: 'income' }, + ], + }, +] + +export default function StaticTransactions() { + return ( + + {sections.map(section => ( + + + + + {section.title} + 星期日 + + + + 收入 ¥ + {section.totalIncome} + + + 支出 ¥ + {section.totalExpense} + + + + + + {/* 交易列表 */} + {section.data.map(item => ( + + {/* 图标 */} + + {/* */} + + + + {/* 标题 + 描述 */} + + {item.title} + {item.description} + + + {/* 金额 */} + + {item.type === 'income' ? '+' : '-'} + ¥ + {item.amount} + + + ))} + + ))} + + ) +} diff --git a/code/base-project/base-app/src/app/(tabs)/money/index.tsx b/code/base-project/base-app/src/app/(tabs)/money/index.tsx new file mode 100644 index 00000000..d8d6be1c --- /dev/null +++ b/code/base-project/base-app/src/app/(tabs)/money/index.tsx @@ -0,0 +1,59 @@ +import { LinearGradient } from 'expo-linear-gradient' +import React, { useState } from 'react' +import { ScrollView, Text, View } from 'react-native' +import { useSafeAreaInsets } from 'react-native-safe-area-context' +import { LucideIcon } from '@/components/common/ao' + +import BalanceCard from './components/BalanceCard' +import TabSelector from './components/TabSelector' +import TransactionsList from './components/TransactionsList' + +export default function Money() { + const insets = useSafeAreaInsets() + const [selected, setSelected] = useState(0) + + return ( + + {/* 顶部固定栏 */} + + + + 2025/11/10 + + + + + 筛选 + + + + setSelected(tab)} + /> + + + {/* 可滚动内容 */} + + + + + + ) +} diff --git a/code/base-project/base-app/src/components/common/ao/SegmentedTabs.tsx b/code/base-project/base-app/src/components/common/ao/SegmentedTabs.tsx index 5c5dcb67..459dc887 100644 --- a/code/base-project/base-app/src/components/common/ao/SegmentedTabs.tsx +++ b/code/base-project/base-app/src/components/common/ao/SegmentedTabs.tsx @@ -1,14 +1,13 @@ import type { icons } from 'lucide-react-native' -import type { LayoutChangeEvent, StyleProp, TextStyle, ViewStyle } from 'react-native' +import type { StyleProp, TextStyle, ViewStyle } from 'react-native' import React, { useEffect, useRef, useState } from 'react' import { Platform, Pressable, Text, View } from 'react-native' -import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated' +import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated' import LucideIcon from './LucideIcon' export interface SegmentedTabItem { label: string icon?: keyof typeof icons - content?: React.ReactNode } interface SegmentedTabsProps { @@ -34,12 +33,7 @@ interface SegmentedTabsProps { fontSize?: number iconSize?: number - contentContainerStyle?: StyleProp - animateContent?: boolean - cacheContent?: boolean - - headerWidth?: number - contentWidth?: number + width?: number } export default function SegmentedTabs({ @@ -60,188 +54,123 @@ export default function SegmentedTabs({ unselectedColor = '#666', fontSize = 14, iconSize = 14, - contentContainerStyle, - animateContent = true, - cacheContent = true, - headerWidth, - contentWidth, + width, }: SegmentedTabsProps) { const [selectedIndex, setSelectedIndex] = useState(value ?? defaultIndex) const [headerMeasuredWidth, setHeaderMeasuredWidth] = useState(0) - const [contentMeasuredWidth, setContentMeasuredWidth] = useState(0) const [ready, setReady] = useState(false) const sliderX = useSharedValue(0) - const contentX = useSharedValue(0) - const initialized = useRef(false) - const actualHeaderWidth = headerWidth ?? headerMeasuredWidth - const actualContentWidth = contentWidth ?? contentMeasuredWidth + const actualHeaderWidth = width ?? headerMeasuredWidth const tabWidth = actualHeaderWidth ? actualHeaderWidth / tabs.length : 0 const sliderWidth = tabWidth - spacing * 2 const sliderHeight = tabHeight - spacing * 2 - // 外部 value 改变 useEffect(() => { if (value !== undefined) setSelectedIndex(value) }, [value]) - // 滑块和内容动画 useEffect(() => { - if (!ready || tabWidth === 0 || actualContentWidth === 0) + if (!ready || tabWidth === 0) return - const target = selectedIndex * tabWidth + spacing if (!initialized.current) { sliderX.value = target - contentX.value = -selectedIndex * actualContentWidth initialized.current = true } else { sliderX.value = withSpring(target, { damping: 18, stiffness: 150, mass: 1 }) - contentX.value = animateContent - ? withTiming(-selectedIndex * actualContentWidth, { duration: 250 }) - : -selectedIndex * actualContentWidth } - }, [selectedIndex, tabWidth, actualContentWidth, ready]) + }, [selectedIndex, tabWidth, ready]) const animatedSliderStyle = useAnimatedStyle(() => ({ transform: [{ translateX: sliderX.value }], })) - const animatedContentStyle = useAnimatedStyle(() => ({ - transform: [{ translateX: contentX.value }], - })) - const handlePress = (index: number) => { if (value === undefined) setSelectedIndex(index) onChange?.(index) } - const handleHeaderLayout = (event: LayoutChangeEvent) => { + const handleHeaderLayout = (event: any) => { const { width } = event.nativeEvent.layout setHeaderMeasuredWidth(width) - if (width > 0 && actualContentWidth > 0 && !ready) - setReady(true) - } - - const handleContentLayout = (event: LayoutChangeEvent) => { - const { width } = event.nativeEvent.layout - setContentMeasuredWidth(width) - if (width > 0 && actualHeaderWidth > 0 && !ready) + if (width > 0 && !ready) setReady(true) } return ( - - {/* Header */} - - {/* 滑块 */} - {ready && ( - - )} - - {tabs.map((tab, i) => { - const isActive = i === selectedIndex - return ( - handlePress(i)} - style={{ - width: tabWidth, - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'row', - gap: spacing, - }} - > - {tab.icon && ( - - )} - - {tab.label} - - - ) - })} - - - {/* Content */} - + + {ready && ( - {tabs.map((tab, i) => { - const isActive = i === selectedIndex - const shouldRender = cacheContent || isActive + /> + )} - if (!shouldRender) { - // 占位保持宽度 - return - } - - return ( - - {tab.content} - - ) - })} - - + {tabs.map((tab, i) => { + const isActive = i === selectedIndex + return ( + handlePress(i)} + style={{ + width: tabWidth, + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + gap: spacing, + }} + > + {tab.icon && ( + + )} + + {tab.label} + + + ) + })} ) } diff --git a/code/base-project/base-app/src/components/iconfont/IconJiaotong.tsx b/code/base-project/base-app/src/components/iconfont/IconJiaotong.tsx new file mode 100644 index 00000000..4a4acd8e --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconJiaotong.tsx @@ -0,0 +1,124 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconJiaotong: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default React.memo(IconJiaotong); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconLingshi.tsx b/code/base-project/base-app/src/components/iconfont/IconLingshi.tsx new file mode 100644 index 00000000..6e738a10 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconLingshi.tsx @@ -0,0 +1,76 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconLingshi: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default React.memo(IconLingshi); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconQq.tsx b/code/base-project/base-app/src/components/iconfont/IconQq.tsx index 9ddae151..49bb0a15 100644 --- a/code/base-project/base-app/src/components/iconfont/IconQq.tsx +++ b/code/base-project/base-app/src/components/iconfont/IconQq.tsx @@ -7,7 +7,6 @@ import type { ViewProps } from 'react-native'; import { Svg, GProps, Path } from 'react-native-svg'; import { getIconColor } from './helper'; -// ✅ 关键改动：排除 GProps.color interface Props extends Omit, ViewProps { size?: number; color?: string | string[]; @@ -66,4 +65,4 @@ const IconQq: FunctionComponent = ({ ); }; -export default React.memo(IconQq); +export default React.memo(IconQq); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconQuxian1.tsx b/code/base-project/base-app/src/components/iconfont/IconQuxian1.tsx new file mode 100644 index 00000000..24dae233 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconQuxian1.tsx @@ -0,0 +1,32 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconQuxian1: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + ); +}; + +export default React.memo(IconQuxian1); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconRiyongpin.tsx b/code/base-project/base-app/src/components/iconfont/IconRiyongpin.tsx new file mode 100644 index 00000000..cab3d405 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconRiyongpin.tsx @@ -0,0 +1,60 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconRiyongpin: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + + + + + + + + ); +}; + +export default React.memo(IconRiyongpin); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconShouru.tsx b/code/base-project/base-app/src/components/iconfont/IconShouru.tsx new file mode 100644 index 00000000..ea4f5cd6 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconShouru.tsx @@ -0,0 +1,32 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconShouru: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + ); +}; + +export default React.memo(IconShouru); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconShucai.tsx b/code/base-project/base-app/src/components/iconfont/IconShucai.tsx new file mode 100644 index 00000000..b93fef35 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconShucai.tsx @@ -0,0 +1,48 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconShucai: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + + + + + ); +}; + +export default React.memo(IconShucai); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconWeixin.tsx b/code/base-project/base-app/src/components/iconfont/IconWeixin.tsx index c5ad2318..5eaf4d38 100644 --- a/code/base-project/base-app/src/components/iconfont/IconWeixin.tsx +++ b/code/base-project/base-app/src/components/iconfont/IconWeixin.tsx @@ -7,7 +7,6 @@ import type { ViewProps } from 'react-native'; import { Svg, GProps, Path } from 'react-native-svg'; import { getIconColor } from './helper'; -// ✅ 关键改动：排除 GProps.color interface Props extends Omit, ViewProps { size?: number; color?: string | string[]; @@ -34,4 +33,4 @@ const IconWeixin: FunctionComponent = ({ ); }; -export default React.memo(IconWeixin); +export default React.memo(IconWeixin); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconYule.tsx b/code/base-project/base-app/src/components/iconfont/IconYule.tsx new file mode 100644 index 00000000..61e4d720 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconYule.tsx @@ -0,0 +1,72 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconYule: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + + + + + + + + + + + ); +}; + +export default React.memo(IconYule); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconZhichu.tsx b/code/base-project/base-app/src/components/iconfont/IconZhichu.tsx new file mode 100644 index 00000000..71695d82 --- /dev/null +++ b/code/base-project/base-app/src/components/iconfont/IconZhichu.tsx @@ -0,0 +1,32 @@ +/* eslint-disable */ +/* tslint:disable */ + +import React from 'react'; +import type { FunctionComponent } from 'react'; +import type { ViewProps } from 'react-native'; +import { Svg, GProps, Path } from 'react-native-svg'; +import { getIconColor } from './helper'; + +interface Props extends Omit, ViewProps { + size?: number; + color?: string | string[]; +} + +const IconZhichu: FunctionComponent = ({ + size = 18, + color, + ...rest +}) => { + return ( + + + + + + ); +}; + +export default React.memo(IconZhichu); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/IconZhiwen.tsx b/code/base-project/base-app/src/components/iconfont/IconZhiwen.tsx index 6a47ab8a..c4b9b46e 100644 --- a/code/base-project/base-app/src/components/iconfont/IconZhiwen.tsx +++ b/code/base-project/base-app/src/components/iconfont/IconZhiwen.tsx @@ -7,7 +7,6 @@ import type { ViewProps } from 'react-native'; import { Svg, GProps, Path } from 'react-native-svg'; import { getIconColor } from './helper'; -// ✅ 关键改动：排除 GProps.color interface Props extends Omit, ViewProps { size?: number; color?: string | string[]; @@ -42,4 +41,4 @@ const IconZhiwen: FunctionComponent = ({ ); }; -export default React.memo(IconZhiwen); +export default React.memo(IconZhiwen); \ No newline at end of file diff --git a/code/base-project/base-app/src/components/iconfont/index.tsx b/code/base-project/base-app/src/components/iconfont/index.tsx index e3452bdc..bcf54d82 100644 --- a/code/base-project/base-app/src/components/iconfont/index.tsx +++ b/code/base-project/base-app/src/components/iconfont/index.tsx @@ -4,14 +4,30 @@ import React, { FunctionComponent } from 'react'; import { ViewProps } from 'react-native'; import { GProps } from 'react-native-svg'; +import IconZhichu from './IconZhichu'; +import IconShouru from './IconShouru'; +import IconJiaotong from './IconJiaotong'; +import IconShucai from './IconShucai'; +import IconRiyongpin from './IconRiyongpin'; +import IconYule from './IconYule'; +import IconLingshi from './IconLingshi'; +import IconQuxian1 from './IconQuxian1'; import IconWeixin from './IconWeixin'; import IconZhiwen from './IconZhiwen'; import IconQq from './IconQq'; +export { default as IconZhichu } from './IconZhichu'; +export { default as IconShouru } from './IconShouru'; +export { default as IconJiaotong } from './IconJiaotong'; +export { default as IconShucai } from './IconShucai'; +export { default as IconRiyongpin } from './IconRiyongpin'; +export { default as IconYule } from './IconYule'; +export { default as IconLingshi } from './IconLingshi'; +export { default as IconQuxian1 } from './IconQuxian1'; export { default as IconWeixin } from './IconWeixin'; export { default as IconZhiwen } from './IconZhiwen'; export { default as IconQq } from './IconQq'; -export type IconNames = 'weixin' | 'zhiwen' | 'QQ'; +export type IconNames = 'zhichu' | 'shouru' | 'jiaotong' | 'shucai' | 'riyongpin' | 'yule' | 'lingshi' | 'quxian1' | 'weixin' | 'zhiwen' | 'QQ'; interface Props extends GProps, ViewProps { name: IconNames; @@ -21,12 +37,28 @@ interface Props extends GProps, ViewProps { let IconFont: FunctionComponent = ({ name, ...rest }) => { switch (name) { + case 'zhichu': + return ; + case 'shouru': + return ; + case 'jiaotong': + return ; + case 'shucai': + return ; + case 'riyongpin': + return ; + case 'yule': + return ; + case 'lingshi': + return ; + case 'quxian1': + return ; case 'weixin': - return ; + return ; case 'zhiwen': - return ; + return ; case 'QQ': - return ; + return ; } return null; diff --git a/code/base-project/base-app/src/request/index.ts b/code/base-project/base-app/src/request/index.ts index c8463a29..bed3e94e 100644 --- a/code/base-project/base-app/src/request/index.ts +++ b/code/base-project/base-app/src/request/index.ts @@ -30,7 +30,7 @@ function isWhiteListed(url: string) { } const alovaInstance = createAlova({ - baseURL: 'http://192.168.5.6:8085/app', + baseURL: 'http://192.168.1.136:8085/app', requestAdapter: axiosRequestAdapter(), timeout: 5000, responded: { diff --git a/code/base-project/base-app/test.html b/code/base-project/base-app/test.html index 39e91f7d..0cdbd84c 100644 --- a/code/base-project/base-app/test.html +++ b/code/base-project/base-app/test.html @@ -1,205 +1,34 @@ - - - - - -账单卡片 + 日期筛选 - - - - - -
-
- - -
-
筛选
-
- - -
-
选择日期
- - -
-
重置
-
确定
-
-
- - -
-
当前周期：本月
-
剩余：￥2500
-
-
收入：￥5000
-
支出：￥2500
-
-
- - - - - diff --git a/code/base-project/base-app/test2.html b/code/base-project/base-app/test2.html new file mode 100644 index 00000000..6851468c --- /dev/null +++ b/code/base-project/base-app/test2.html @@ -0,0 +1,118 @@ + + + + + +记账卡片优化版 + + + + +
+
账户余额
+
¥ 8,520.00
+ +
+
+
收入
+
¥ 12,000.00
+
+15% ↑
+
+
+
支出
+
¥ 3,480.00
+
-5% ↓
+
+
+
+ + + diff --git a/notes/前端开发/react-native/expo.md b/notes/前端开发/react-native/expo.md index 67fcf227..621d3114 100644 --- a/notes/前端开发/react-native/expo.md +++ b/notes/前端开发/react-native/expo.md @@ -856,6 +856,12 @@ const #componentName#: FunctionComponent = ({ export default React.memo(#componentName#); ``` +生成图标命令： + +```bash +npx iconfont-rn +``` + ## 配置深度链接