forum

miniprogram/src/pages/forum/index.scss

@@ -65,20 +65,123 @@
     }
   }
 
+  .section-container {
+    margin: 0 10px 15px;
+    background: #141414; /* Darker card background */
+    border-radius: 12px;
+    padding: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      
+      .section-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+
+    .announcement-swiper {
+      height: 40px;
+      
+      .announcement-item {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        background: rgba(255, 255, 255, 0.05);
+        padding: 0 12px;
+        border-radius: 6px;
+        
+        .item-text {
+          font-size: 14px;
+          color: #ccc;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .star-users-scroll {
+      white-space: nowrap;
+      width: 100%;
+      
+      .star-user-card {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 20px;
+        width: 80px;
+        background: rgba(255, 255, 255, 0.05);
+        padding: 12px 8px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        
+        .user-avatar {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          border: 2px solid #ffd700;
+          margin-bottom: 8px;
+        }
+        
+        .user-name {
+          font-size: 12px;
+          font-weight: bold;
+          color: #fff;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-bottom: 2px;
+        }
+        
+        .user-title {
+          font-size: 10px;
+          color: #888;
+        }
+      }
+    }
+  }
+
   .tabs-wrapper {
     background-color: #000;
-    
+    margin-bottom: 10px;
+
+    /* Override Taro UI default white background */
+    .at-tabs {
+        background-color: transparent;
+        height: auto;
+    }
+
+    .at-tabs__header {
+        background-color: transparent;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        text-align: left;
+    }
+
     .at-tabs__item {
       color: #888;
+      font-size: 14px;
+      padding: 12px 24px;
       
       &--active {
         color: #00b96b;
         font-weight: bold;
+        font-size: 16px;
       }
     }
     
     .at-tabs__item-underline {
       background-color: #00b96b;
+      bottom: 0;
     }
   }
 

miniprogram/src/pages/forum/index.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
-import { View, Text, Image, Button } from '@tarojs/components'
-import { AtSearchBar, AtTabs, AtIcon, AtActivityIndicator, AtFab } from 'taro-ui'
-import { getTopics } from '../../api'
-import { useLogin } from '../../utils/hooks' // Assuming a hook or just use Taro.getStorageSync
+import { View, Text, Image, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
+import { AtSearchBar, AtTabs, AtIcon, AtActivityIndicator } from 'taro-ui'
+import { getTopics, getAnnouncements, getStarUsers } from '../../api'
 import './index.scss'
 
 const ForumList = () => {
   const [topics, setTopics] = useState<any[]>([])
+  const [announcements, setAnnouncements] = useState<any[]>([])
+  const [starUsers, setStarUsers] = useState<any[]>([])
   const [loading, setLoading] = useState(false)
   const [hasMore, setHasMore] = useState(true)
   const [page, setPage] = useState(1)
@@ -15,13 +16,26 @@ const ForumList = () => {
   const [currentTab, setCurrentTab] = useState(0)
   
   const categories = [
-    { title: '全部', key: 'all' },
-    { title: '讨论', key: 'discussion' },
-    { title: '求助', key: 'help' },
-    { title: '分享', key: 'share' },
-    { title: '公告', key: 'notice' },
+    { title: '全部话题', key: 'all' },
+    { title: '技术讨论', key: 'discussion' },
+    { title: '求助问答', key: 'help' },
+    { title: '经验分享', key: 'share' },
+    { title: '官方公告', key: 'notice' },
   ]
 
+  const fetchExtraData = async () => {
+    try {
+      const [announceRes, starRes] = await Promise.all([
+        getAnnouncements(),
+        getStarUsers()
+      ])
+      setAnnouncements(announceRes.results || announceRes.data || [])
+      setStarUsers(starRes.data || [])
+    } catch (err) {
+      console.error('Fetch extra data failed', err)
+    }
+  }
+
   const fetchList = async (reset = false) => {
     if (loading) return
     if (!reset && !hasMore) return
@@ -62,10 +76,12 @@ const ForumList = () => {
 
   useEffect(() => {
     fetchList(true)
+    fetchExtraData()
   }, [currentTab])
 
   usePullDownRefresh(() => {
     fetchList(true)
+    fetchExtraData()
   })
 
   useReachBottom(() => {
@@ -127,7 +143,7 @@ const ForumList = () => {
     <View className='forum-page'>
       <View className='hero-section'>
         <View className='title'>
-            <Text className='highlight'>Quant Speed</Text> Community
+            <Text className='highlight'>Quant Speed</Text> Developer Community
         </View>
         <View className='subtitle'>技术交流 · 硬件开发 · 官方支持</View>
         
@@ -137,11 +153,59 @@ const ForumList = () => {
                 onChange={handleSearch}
                 onActionClick={onSearchConfirm}
                 onConfirm={onSearchConfirm}
-                placeholder='搜索话题...'
+                placeholder='搜索感兴趣的话题...'
             />
+            <View className='create-btn' onClick={navigateToCreate}>
+                <AtIcon value='add' size='16' color='#fff' />
+                <Text style={{marginLeft: '4px'}}>发布新帖</Text>
+            </View>
         </View>
       </View>
 
+      {/* Announcements Section */}
+      {announcements.length > 0 && (
+        <View className='section-container'>
+           <View className='section-header'>
+              <AtIcon value='volume-plus' size='16' color='#ff4d4f' />
+              <Text className='section-title'>社区公告</Text>
+           </View>
+           <Swiper
+             className='announcement-swiper'
+             vertical
+             autoplay
+             circular
+             interval={3000}
+           >
+             {announcements.map(item => (
+               <SwiperItem key={item.id}>
+                 <View className='announcement-item'>
+                   <Text className='item-text'>{item.title}</Text>
+                 </View>
+               </SwiperItem>
+             ))}
+           </Swiper>
+        </View>
+      )}
+
+      {/* Star Users Section */}
+      {starUsers.length > 0 && (
+        <View className='section-container'>
+           <View className='section-header'>
+              <AtIcon value='star' size='16' color='#ffd700' />
+              <Text className='section-title'>技术专家榜</Text>
+           </View>
+           <ScrollView scrollX className='star-users-scroll'>
+              {starUsers.map(user => (
+                <View key={user.id} className='star-user-card'>
+                   <Image src={user.avatar_url} className='user-avatar' />
+                   <Text className='user-name'>{user.nickname}</Text>
+                   <Text className='user-title'>{user.title || '专家'}</Text>
+                </View>
+              ))}
+           </ScrollView>
+        </View>
+      )}
+
       <View className='tabs-wrapper'>
         <AtTabs
             current={currentTab}