feat: 首页更新

2025-11-11 18:48:54 +08:00
parent 230191f181
commit b48cce06f4
43 changed files with 3186 additions and 1029 deletions
--- a/pages/HomeScreen/components/BottomTabs.tsx
+++ b/pages/HomeScreen/components/BottomTabs.tsx
@@ -0,0 +1,126 @@
+/**
+ * 首页底部 Tabs 导航组件
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native';
+import { useColorScheme } from '@/hooks';
+import { createThemeStyles } from '@/theme';
+import Colors from '@/constants/Colors';
+
+const { width } = Dimensions.get('window');
+
+/**
+ * 创建主题样式
+ */
+const styles = createThemeStyles((colors) => ({
+  container: {
+    backgroundColor: colors.card,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    paddingBottom: 8,
+    paddingTop: 8,
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8,
+  },
+  tabIcon: {
+    fontSize: 24,
+    marginBottom: 4,
+  },
+  tabLabel: {
+    fontSize: 12,
+    color: colors.text + '80',
+    fontWeight: '500',
+  },
+  tabLabelActive: {
+    color: colors.primary,
+    fontWeight: '600',
+  },
+}));
+
+interface TabItem {
+  id: string;
+  label: string;
+  icon: string;
+  action: string;
+}
+
+interface BottomTabsProps {
+  theme?: 'light' | 'dark';
+  activeTab?: string;
+  onTabPress?: (tabId: string, action: string) => void;
+  items?: TabItem[];
+}
+
+/**
+ * 默认 Tab 项
+ */
+const DEFAULT_TABS: TabItem[] = [
+  { id: 'recharge', label: '充值', icon: '💰', action: 'recharge' },
+  { id: 'withdraw', label: '提现', icon: '💳', action: 'withdraw' },
+  { id: 'activity', label: '活动', icon: '🎉', action: 'activity' },
+  { id: 'service', label: '客服', icon: '🎧', action: 'service' },
+  { id: 'help', label: '帮助', icon: '❓', action: 'help' },
+];
+
+/**
+ * 底部 Tabs 导航组件
+ */
+export default function BottomTabs({
+  theme = 'light',
+  activeTab = 'recharge',
+  onTabPress,
+  items = DEFAULT_TABS,
+}: BottomTabsProps) {
+  const colorScheme = useColorScheme();
+  const actualTheme = theme === 'light' || theme === 'dark' ? theme : colorScheme;
+  const s = styles[actualTheme];
+  const colors = Colors[actualTheme];
+
+  const [selectedTab, setSelectedTab] = useState(activeTab);
+
+  const handleTabPress = useCallback(
+    (tabId: string, action: string) => {
+      setSelectedTab(tabId);
+      onTabPress?.(tabId, action);
+    },
+    [onTabPress]
+  );
+
+  return (
+    <View style={s.container}>
+      {items.map((item) => (
+        <TouchableOpacity
+          key={item.id}
+          style={s.tabItem}
+          onPress={() => handleTabPress(item.id, item.action)}
+          activeOpacity={0.7}
+        >
+          <Text style={s.tabIcon}>{item.icon}</Text>
+          <Text
+            style={[
+              s.tabLabel,
+              selectedTab === item.id && s.tabLabelActive,
+            ]}
+          >
+            {item.label}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}
+