feat: carousel and set text color according to bg color

src/pages/index/index.tsx

@@ -5,8 +5,8 @@ import Taro from '@tarojs/taro'
 // 导入API服务
 import demoApi from '../../services/demoApi'
 import commonApi from '../../services/commonApi'
-import { 
-  useUserStats, 
+import {
+  useUserStats,
   useUserActions
 } from '../../store/userStore'
 import './index.scss'
@@ -15,7 +15,7 @@ function Index() {
   // 使用Zustand store
   const userStats = useUserStats()
   const { incrementRequestCount, resetUserStats } = useUserActions()
-  
+
   // 本地状态管理
   const [loading, setLoading] = useState(false)
   const [userProfile, setUserProfile] = useState<any>(null)
@@ -43,19 +43,19 @@ function Index() {
   const handleGetUserProfile = async () => {
     console.log('获取用户信息...');
     setLoading(true)
-    
+
     try {
       const response = await demoApi.getUserProfile()
-      
+
       if (response.success) {
         setUserProfile(response.data)
         incrementRequestCount()
-        
+
         Taro.showToast({
           title: '获取用户信息成功',
           icon: 'success'
         })
-        
+
         console.log('用户信息:', response.data)
       }
     } catch (error) {
@@ -64,7 +64,7 @@ function Index() {
         title: '获取失败，使用模拟数据',
         icon: 'none'
       })
-      
+
       // 模拟数据
       setUserProfile({
         id: '123',
@@ -83,7 +83,7 @@ function Index() {
   const handleSubmitStats = async () => {
     console.log('提交统计数据...');
     setLoading(true)
-    
+
     try {
       const response = await commonApi.submitForm('userStats', [
         {
@@ -97,21 +97,21 @@ function Index() {
           }
         }
       ])
-      
+
       if (response.success) {
         incrementRequestCount()
-        
+
         Taro.showToast({
           title: '统计数据提交成功',
           icon: 'success'
         })
-        
+
         console.log('提交结果:', response.data)
       }
     } catch (error) {
       console.error('提交统计数据失败:', error)
       incrementRequestCount() // 即使失败也计数，用于演示
-      
+
       Taro.showToast({
         title: '网络模拟提交成功',
         icon: 'success'
@@ -125,7 +125,7 @@ function Index() {
   const handleSubmitFeedback = async () => {
     console.log('提交用户反馈...');
     setLoading(true)
-    
+
     try {
       const response = await demoApi.submitFeedback({
         matchId: 'demo_match_' + Date.now(),
@@ -134,21 +134,21 @@ function Index() {
         aspects: ['场地环境', '服务质量', '价格合理'],
         comments: `用户反馈 - 请求次数: ${userStats.requestCount + 1}，体验良好！`
       })
-      
+
       if (response.success) {
         incrementRequestCount()
-        
+
         Taro.showToast({
           title: '反馈提交成功',
           icon: 'success'
         })
-        
+
         console.log('反馈结果:', response.data)
       }
     } catch (error) {
       console.error('提交反馈失败:', error)
       incrementRequestCount() // 即使失败也计数，用于演示
-      
+
       Taro.showToast({
         title: '网络模拟提交成功',
         icon: 'success'
@@ -163,15 +163,22 @@ function Index() {
     console.log('重置所有数据...');
     resetUserStats()
     setUserProfile(null)
-    
+
     Taro.showToast({
       title: '数据已重置',
       icon: 'success'
     })
   }
 
+  const handleDetail = () => {
+    Taro.navigateTo({
+      url: '/pages/detail/index'
+    })
+  }
+
   return (
     <View className='index-page'>
+      <Button onClick={handleDetail}>球局详情</Button>
       {/* 页面标题 */}
       <View className='page-header'>
         <Text className='page-title'>API 请求演示</Text>
@@ -181,9 +188,9 @@ function Index() {
       {/* 用户信息卡片 */}
       <View className='user-card'>
         <View className='user-header'>
-          <Avatar 
-            size="large" 
-            src={userProfile?.avatar || ''} 
+          <Avatar
+            size="large"
+            src={userProfile?.avatar || ''}
             style={{ backgroundColor: '#fa2c19' }}
           >
             {userProfile?.nickname?.charAt(0) || 'U'}
@@ -205,17 +212,17 @@ function Index() {
       {/* 统计数据 */}
       <View className='stats-section'>
         <Text className='section-title'>📊 API 请求统计</Text>
-        
+
         <Cell title="API 请求次数" extra={userStats.requestCount} />
         <Cell title="创建的比赛" extra={userStats.matchesCreated} />
         <Cell title="参加的比赛" extra={userStats.matchesJoined} />
-        <Cell 
-          title="最后活跃时间" 
+        <Cell
+          title="最后活跃时间"
           extra={new Date(userStats.lastActiveTime).toLocaleTimeString()}
         />
         {interests.length > 0 && (
-          <Cell 
-            title="推荐兴趣" 
+          <Cell
+            title="推荐兴趣"
             extra={interests.slice(0, 2).join(', ')}
           />
         )}
@@ -224,10 +231,10 @@ function Index() {
       {/* API 请求按钮区域 */}
       <View className='action-section'>
         <Text className='section-title'>🚀 API 请求功能</Text>
-        
+
         <View className='button-group'>
-          <Button 
-            type="primary" 
+          <Button
+            type="primary"
             loading={loading}
             onClick={handleGetUserProfile}
             disabled={loading}
@@ -236,8 +243,8 @@ function Index() {
             {loading ? '请求中...' : '获取用户信息'}
           </Button>
 
-          <Button 
-            type="default" 
+          <Button
+            type="default"
             loading={loading}
             onClick={handleSubmitStats}
             disabled={loading}
@@ -246,8 +253,8 @@ function Index() {
             {loading ? '提交中...' : '提交统计数据'}
           </Button>
 
-          <Button 
-            type="default" 
+          <Button
+            type="default"
             loading={loading}
             onClick={handleSubmitFeedback}
             disabled={loading}
@@ -256,8 +263,8 @@ function Index() {
             {loading ? '提交中...' : '提交用户反馈'}
           </Button>
 
-          <Button 
-            type="warn" 
+          <Button
+            type="warn"
             onClick={handleResetAllData}
             disabled={loading}
             className="custom-button warning-btn"