feat: 首页更新

components/WalletAmount.tsx

@@ -0,0 +1,76 @@
+/**
+ * 钱包余额组件
+ * 显示用户的钱包余额
+ */
+
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useColorScheme, useThemeColors } from '@/theme';
+import { createThemeStyles } from '@/theme';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+/**
+ * 创建主题样式
+ */
+const styles = createThemeStyles((colors) => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  label: {
+    fontSize: 12,
+    color: colors.text + '80',
+  },
+  amount: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: colors.primary,
+  },
+  currency: {
+    fontSize: 12,
+    color: colors.text + '80',
+    marginLeft: 4,
+  },
+  refreshButton: {
+    padding: 4,
+  },
+}));
+
+interface WalletAmountProps {
+  balance?: number;
+  label?: string;
+  showRefresh?: boolean;
+  onRefresh?: () => void;
+}
+
+/**
+ * 钱包余额组件
+ */
+export default function WalletAmount({
+  balance = 0,
+  label = '余额：',
+  showRefresh = false,
+  onRefresh,
+}: WalletAmountProps) {
+  const colorScheme = useColorScheme();
+  const s = styles[colorScheme];
+  const themeColors = useThemeColors();
+
+  // 格式化金额
+  const formattedBalance = useMemo(() => {
+    return balance.toFixed(2);
+  }, [balance]);
+
+  return (
+    <View style={s.container}>
+      {label && <Text style={s.label}>{label}</Text>}
+      <Text style={s.amount}>¥ {formattedBalance}</Text>
+      {showRefresh && (
+        <TouchableOpacity style={s.refreshButton} onPress={onRefresh} activeOpacity={0.7}>
+          <Ionicons name="refresh" size={14} color={themeColors.primary} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}