forum

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}