forum
This commit is contained in:
jeremygan2021
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -27,6 +27,39 @@
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nav-btn-wrapper {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.nav-btn {
|
||||
background: linear-gradient(90deg, #00b96b, #00f0ff);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
padding: 0 40px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
border-radius: 40px;
|
||||
border: none;
|
||||
box-shadow: 0 0 20px rgba(0, 185, 107, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 10px rgba(0, 185, 107, 0.2);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 32px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
|
||||
@@ -36,6 +36,16 @@ export default function ServicesIndex() {
|
||||
<View className='header'>
|
||||
<Text className='title'>AI 全栈<Text className='highlight'>解决方案</Text></Text>
|
||||
<Text className='subtitle'>从数据处理到模型部署，我们为您提供一站式 AI 基础设施服务。</Text>
|
||||
|
||||
<View className='nav-btn-wrapper'>
|
||||
<Button
|
||||
className='nav-btn'
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/courses/index' })}
|
||||
>
|
||||
探索 VB 课程
|
||||
<Text className='arrow'>→</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='service-grid'>
|
||||
|
||||
Reference in New Issue
Block a user