修改活动列表

app/(tabs)/activity.tsx

@@ -1,163 +1,300 @@
+import React, { useState } from 'react';
 import { ThemedView } from "@/components/themed-view";
-import { Text, SafeAreaView, StyleSheet, View, FlatList, ScrollView, TouchableOpacity, Dimensions } from "react-native";
+import { Text, SafeAreaView, StyleSheet, View, FlatList, TouchableOpacity, Dimensions, RefreshControl, Image } from "react-native";
+
 const screenWidth = Dimensions.get('window').width;
-// const customWidth = screenWidth * 0.8; // 占屏幕宽度的 80%
 
+// 分类列表 - 添加图标emoji（扩展到12个）
+const categoryList = [
+  { id: '0', title: '捕鱼', icon: '🎣' },
+  { id: '1', title: '真人', icon: '👤' },
+  { id: '2', title: '区块链', icon: '⛓️' },
+  { id: '3', title: '棋牌', icon: '🎴' },
+  { id: '4', title: '电子', icon: '🎰' },
+  { id: '5', title: '体育', icon: '⚽' },
+  { id: '6', title: '彩票', icon: '🎫' },
+  { id: '7', title: '电竞', icon: '🎮' },
+  { id: '8', title: '赛车', icon: '🏎️' },
+  { id: '9', title: '街机', icon: '🕹️' },
+  { id: '10', title: '桌游', icon: '🎲' },
+  { id: '11', title: '其他', icon: '⭐' },
+];
 
-// import Swiper from 'react-native-swiper';
+// 生成随机数量的游戏列表（1-11个）
+const generateRandomGames = (categoryId: string, baseName: string): Array<{id: string, name: string, hot: boolean, image: string}> => {
+  const count = Math.floor(Math.random() * 11) + 1; // 1-11个随机数量
+  const games = [];
+  const gameTypes = ['经典版', '豪华版', '至尊版', '竞技版', '休闲版', '大师版', '传奇版', '极速版', '黄金版', '钻石版', '王者版'];
+  
+  // 模拟图片URL（使用picsum.photos随机图片服务）
+  const colors = ['4A90E2', 'E94B3C', '50C878', 'F39C12', '9B59B6', 'E74C3C'];
+  
+  for (let i = 0; i < count; i++) {
+    const colorIndex = Math.floor(Math.random() * colors.length);
+    games.push({
+      id: `${categoryId}-${i + 1}`,
+      name: `${baseName}${gameTypes[i % gameTypes.length]}`,
+      hot: Math.random() > 0.6, // 40%概率为热门
+      image: `https://via.placeholder.com/120x80/${colors[colorIndex]}/ffffff?text=Game+${i + 1}`,
+    });
+  }
+  
+  return games;
+};
 
+// 模拟右侧列表数据 - 随机数量（扩展到12个分类）
+const mockData: Record<string, Array<{id: string, name: string, hot: boolean, image: string}>> = {
+  '0': generateRandomGames('0', '捕鱼'),
+  '1': generateRandomGames('1', '真人百家乐'),
+  '2': generateRandomGames('2', '链上竞猜'),
+  '3': generateRandomGames('3', '棋牌对战'),
+  '4': generateRandomGames('4', '老虎机'),
+  '5': generateRandomGames('5', '体育竞猜'),
+  '6': generateRandomGames('6', '彩票'),
+  '7': generateRandomGames('7', '电竞对战'),
+  '8': generateRandomGames('8', '赛车竞速'),
+  '9': generateRandomGames('9', '街机游戏'),
+  '10': generateRandomGames('10', '桌面游戏'),
+  '11': generateRandomGames('11', '特色游戏'),
+};
+
+type LeftItemProps = {
+  id: string;
+  title: string;
+  icon: string;
+  isSelected: boolean;
+  onPress: () => void;
+};
+
+type RightItemProps = {
+  name: string;
+  hot: boolean;
+  image: string;
+};
 
 export default function ActivityScreen() {
+  const [selectedId, setSelectedId] = useState('0');
+  const [refreshingLeft, setRefreshingLeft] = useState(false);
+  const [refreshingRight, setRefreshingRight] = useState(false);
+
+  // 左侧下拉刷新
+  const onRefreshLeft = () => {
+    setRefreshingLeft(true);
+    // 模拟刷新延迟
+    setTimeout(() => {
+      setRefreshingLeft(false);
+    }, 1000);
+  };
+
+  // 右侧下拉刷新
+  const onRefreshRight = () => {
+    setRefreshingRight(true);
+    // 重新生成当前分类的数据
+    const categoryNames: Record<string, string> = {
+      '0': '捕鱼', '1': '真人百家乐', '2': '链上竞猜', '3': '棋牌对战',
+      '4': '老虎机', '5': '体育竞猜', '6': '彩票', '7': '电竞对战',
+      '8': '赛车竞速', '9': '街机游戏', '10': '桌面游戏', '11': '特色游戏'
+    };
+    mockData[selectedId] = generateRandomGames(selectedId, categoryNames[selectedId]);
+    setTimeout(() => {
+      setRefreshingRight(false);
+    }, 1000);
+  };
+
+  const LeftItem = ({ id, title, icon, isSelected, onPress }: LeftItemProps) => (
+    <TouchableOpacity 
+      style={[styles.leftItem, isSelected && styles.leftItemActive]} 
+      onPress={onPress}
+    >
+      <Text style={styles.leftIcon}>{icon}</Text>
+      <Text style={[styles.leftTitle, isSelected && styles.leftTitleActive]}>
+        {title}
+      </Text>
+      {isSelected && <View style={styles.activeIndicator} />}
+    </TouchableOpacity>
+  );
+
+  const RightItem = ({ name, hot, image }: RightItemProps) => (
+    <View style={styles.rightItem}>
+      <Image 
+        source={{ uri: image }}
+        style={styles.gameImage}
+        resizeMode="cover"
+      />
+      <View style={styles.rightItemInfo}>
+        <View style={styles.rightItemContent}>
+          <Text style={styles.rightItemTitle} numberOfLines={1}>{name}</Text>
+          {hot && <View style={styles.hotBadge}><Text style={styles.hotText}>HOT</Text></View>}
+        </View>
+        <Text style={styles.rightItemDesc}>精彩游戏，等你来玩</Text>
+      </View>
+    </View>
+  );
+
   return (
-    // SafeAreaView 适配顶部刘海
     <SafeAreaView style={styles.safeAreaContainer}>
-      <ThemedView>
-        {/* <Text>活动</Text> */}
-        <View style={styles.content1} >
+      <ThemedView style={styles.container}>
+        <View style={styles.content}>
+          {/* 左侧菜单 */}
           <View style={styles.leftWrapper}>
             <FlatList
-              data={letTypeList}
-              renderItem={({ item }) => <LeftItem title={item.title} />}
+              data={categoryList}
+              renderItem={({ item }) => (
+                <LeftItem 
+                  id={item.id}
+                  title={item.title}
+                  icon={item.icon}
+                  isSelected={selectedId === item.id}
+                  onPress={() => setSelectedId(item.id)}
+                />
+              )}
               keyExtractor={item => item.id}
-              style={styles.contentLeft}
+              showsVerticalScrollIndicator={false}
+              refreshControl={
+                <RefreshControl
+                  refreshing={refreshingLeft}
+                  onRefresh={onRefreshLeft}
+                  colors={['#1890ff']}
+                  tintColor="#1890ff"
+                />
+              }
             />
           </View>
 
+          {/* 右侧列表 */}
           <View style={styles.contentRight}>
-            <Text>2222</Text>
+            <FlatList
+              data={mockData[selectedId] || []}
+              renderItem={({ item }) => (
+                <RightItem name={item.name} hot={item.hot} image={item.image} />
+              )}
+              keyExtractor={item => item.id}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.rightListContent}
+              refreshControl={
+                <RefreshControl
+                  refreshing={refreshingRight}
+                  onRefresh={onRefreshRight}
+                  colors={['#1890ff']}
+                  tintColor="#1890ff"
+                />
+              }
+            />
           </View>
         </View>
-
-
-
-
       </ThemedView>
-
-
-
-
-      {/* <Swiper style={styles.wrapper} showsButtons>
-            <View style={styles.slide1}>
-                <Text style={styles.text}>Hello Swiper</Text>
-            </View>
-            <View style={styles.slide2}>
-                <Text style={styles.text}>Beautiful</Text>
-            </View>
-            <View style={styles.slide3}>
-                <Text style={styles.text}>And simple</Text>
-            </View>
-        </Swiper> */}
     </SafeAreaView>
-  )
+  );
 }
 
 const styles = StyleSheet.create({
   safeAreaContainer: {
-    // 确保 SafeAreaView 占据整个屏幕
     flex: 1,
-    // 您可能还需要在这里设置背景颜色，以确保状态栏区域的颜色正确
-    backgroundColor: '#ccc'
+    backgroundColor: '#f5f5f5',
   },
-
-  content1: {
-    // display: 'flex',
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    // backgroundColor: 'hotpink',
-    // width: 375,
   },
   leftWrapper: {
-    width: 80, // 固定宽度
-    height: 180,
-    backgroundColor: 'yellow',
-  },
-  contentLeft: {
-    // backgroundColor: 'yellow',
-    // width: 100,
-    // flexShrink: 0, 
-    // width: 20,
+    width: 90,
+    backgroundColor: '#fff',
+    borderRightWidth: 1,
+    borderRightColor: '#e0e0e0',
   },
   leftItem: {
-    backgroundColor: 'pink',
-    // padding: 20,
-    marginVertical: 8,
-    marginHorizontal: 16,
-    // width: 20,
-
+    paddingVertical: 18,
+    paddingHorizontal: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  leftItemActive: {
+    backgroundColor: '#f0f0f0',
+  },
+  leftIcon: {
+    fontSize: 24,
+    marginBottom: 4,
   },
   leftTitle: {
-    fontSize: 14,
+    fontSize: 12,
+    color: '#666',
     textAlign: 'center',
-    // width: 20,
-
+  },
+  leftTitleActive: {
+    color: '#1890ff',
+    fontWeight: '600',
+  },
+  activeIndicator: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    marginTop: -12,
+    width: 3,
+    height: 24,
+    backgroundColor: '#1890ff',
+    borderTopRightRadius: 2,
+    borderBottomRightRadius: 2,
   },
   contentRight: {
-    backgroundColor: 'skyblue',
     flex: 1,
-  }
-
-
-
-
-
-
-  // wrapper: {
-  // },
-  // slide1: {
-  //   flex: 1,
-  //   justifyContent: 'center',
-  //   alignItems: 'center',
-  //   backgroundColor: '#9DD6EB'
-  // },
-  // slide2: {
-  //   flex: 1,
-  //   justifyContent: 'center',
-  //   alignItems: 'center',
-  //   backgroundColor: '#97CAE5'
-  // },
-  // slide3: {
-  //   flex: 1,
-  //   justifyContent: 'center',
-  //   alignItems: 'center',
-  //   backgroundColor: '#92BBD9'
-  // },
-  // text: {
-  //   color: '#fff',
-  //   fontSize: 30,
-  //   fontWeight: 'bold'
-  // }
-});
-type ItemProps = { title: string };
-
-const LeftItem = ({ title }: ItemProps) => (
-  <View style={styles.leftItem}>
-    <Text style={styles.leftTitle}>{title}</Text>
-  </View>
-);
-
-const letTypeList = [
-  {
-    id: '0',
-    title: '捕鱼',
+    backgroundColor: '#f5f5f5',
   },
-  {
-    id: '1',
-    title: '真人',
+  rightListContent: {
+    padding: 12,
   },
-  {
-    id: '2',
-    title: '区块链',
+  rightItem: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
   },
-  {
-    id: '3',
-    title: '棋牌',
+  gameImage: {
+    width: 120,
+    height: 80,
+    borderRadius: 6,
+    marginRight: 12,
+    backgroundColor: '#f0f0f0',
   },
-  {
-    id: '4',
-    title: '电子',
+  rightItemInfo: {
+    flex: 1,
+    justifyContent: 'center',
   },
-  {
-    id: '5',
-    title: '体育',
+  rightItemContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 6,
   },
-];
+  rightItemTitle: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#333',
+    marginRight: 8,
+    flex: 1,
+  },
+  hotBadge: {
+    backgroundColor: '#ff4d4f',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  hotText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '600',
+  },
+  rightItemDesc: {
+    fontSize: 13,
+    color: '#999',
+  },
+});