forum
This commit is contained in:
jeremygan2021
7
miniprogram/src/pages/forum/index.config.ts
Normal file
7
miniprogram/src/pages/forum/index.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '开发者社区',
|
||||
enablePullDownRefresh: true,
|
||||
backgroundColor: '#000000',
|
||||
navigationBarBackgroundColor: '#000000',
|
||||
navigationBarTextStyle: 'white'
|
||||
})
|
||||
219
miniprogram/src/pages/forum/index.scss
Normal file
219
miniprogram/src/pages/forum/index.scss
Normal file
@@ -0,0 +1,219 @@
|
||||
.forum-page {
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
padding-bottom: 40px;
|
||||
color: #fff;
|
||||
|
||||
.hero-section {
|
||||
padding: 40px 20px 20px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.1) 100%);
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
|
||||
.highlight {
|
||||
color: #00b96b;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.at-search-bar {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.at-search-bar__input-cnt {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.at-search-bar__input {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
background-color: #00b96b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-wrapper {
|
||||
background-color: #000;
|
||||
|
||||
.at-tabs__item {
|
||||
color: #888;
|
||||
|
||||
&--active {
|
||||
color: #00b96b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.at-tabs__item-underline {
|
||||
background-color: #00b96b;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
padding: 10px;
|
||||
|
||||
.topic-card {
|
||||
background: rgba(20,20,20,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
|
||||
&.pinned {
|
||||
border-color: rgba(0, 185, 107, 0.4);
|
||||
box-shadow: 0 0 10px rgba(0, 185, 107, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #444;
|
||||
|
||||
&.pinned-tag {
|
||||
border-color: #ff4d4f;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.verified-tag {
|
||||
border-color: #00b96b;
|
||||
color: #00b96b;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
margin-bottom: 12px;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
max-height: 150px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
&.star {
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 40px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #00b96b;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 185, 107, 0.4);
|
||||
z-index: 100;
|
||||
|
||||
.at-icon {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
207
miniprogram/src/pages/forum/index.tsx
Normal file
207
miniprogram/src/pages/forum/index.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
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 './index.scss'
|
||||
|
||||
const ForumList = () => {
|
||||
const [topics, setTopics] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [page, setPage] = useState(1)
|
||||
const [searchText, setSearchText] = useState('')
|
||||
const [currentTab, setCurrentTab] = useState(0)
|
||||
|
||||
const categories = [
|
||||
{ title: '全部', key: 'all' },
|
||||
{ title: '讨论', key: 'discussion' },
|
||||
{ title: '求助', key: 'help' },
|
||||
{ title: '分享', key: 'share' },
|
||||
{ title: '公告', key: 'notice' },
|
||||
]
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading) return
|
||||
if (!reset && !hasMore) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const currentPage = reset ? 1 : page
|
||||
const params: any = {
|
||||
page: currentPage,
|
||||
search: searchText,
|
||||
category: categories[currentTab].key !== 'all' ? categories[currentTab].key : undefined
|
||||
}
|
||||
|
||||
const res = await getTopics(params)
|
||||
const newTopics = res.results || res.data || [] // Adjust based on API response structure
|
||||
|
||||
if (reset) {
|
||||
setTopics(newTopics)
|
||||
} else {
|
||||
setTopics(prev => [...prev, ...newTopics])
|
||||
}
|
||||
|
||||
// Check if more data exists (assuming standard pagination)
|
||||
if (res.next || newTopics.length === 10) { // 10 is default page size usually
|
||||
setHasMore(true)
|
||||
setPage(currentPage + 1)
|
||||
} else {
|
||||
setHasMore(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchList(true)
|
||||
}, [currentTab])
|
||||
|
||||
usePullDownRefresh(() => {
|
||||
fetchList(true)
|
||||
})
|
||||
|
||||
useReachBottom(() => {
|
||||
fetchList(false)
|
||||
})
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setSearchText(value)
|
||||
}
|
||||
|
||||
const onSearchConfirm = () => {
|
||||
fetchList(true)
|
||||
}
|
||||
|
||||
const handleTabClick = (value) => {
|
||||
setCurrentTab(value)
|
||||
// useEffect will trigger fetch
|
||||
}
|
||||
|
||||
const navigateToDetail = (id) => {
|
||||
Taro.navigateTo({
|
||||
url: `/subpackages/forum/detail/index?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
const navigateToCreate = () => {
|
||||
const token = Taro.getStorageSync('token')
|
||||
if (!token) {
|
||||
Taro.showToast({ title: '请先登录', icon: 'none' })
|
||||
// Optional: Trigger login flow
|
||||
return
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url: '/subpackages/forum/create/index'
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryLabel = (cat) => {
|
||||
const map = {
|
||||
'help': '求助',
|
||||
'share': '分享',
|
||||
'notice': '公告',
|
||||
'discussion': '讨论'
|
||||
}
|
||||
return map[cat] || '讨论'
|
||||
}
|
||||
|
||||
// Helper to extract first image from markdown
|
||||
const getCoverImage = (content) => {
|
||||
const match = content.match(/!\[.*?\]\((.*?)\)/)
|
||||
return match ? match[1] : null
|
||||
}
|
||||
|
||||
const stripMarkdown = (content) => {
|
||||
return content.replace(/!\[.*?\]\(.*?\)/g, '[图片]').replace(/[#*`]/g, '')
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='forum-page'>
|
||||
<View className='hero-section'>
|
||||
<View className='title'>
|
||||
<Text className='highlight'>Quant Speed</Text> Community
|
||||
</View>
|
||||
<View className='subtitle'>技术交流 · 硬件开发 · 官方支持</View>
|
||||
|
||||
<View className='search-box'>
|
||||
<AtSearchBar
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
onActionClick={onSearchConfirm}
|
||||
onConfirm={onSearchConfirm}
|
||||
placeholder='搜索话题...'
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='tabs-wrapper'>
|
||||
<AtTabs
|
||||
current={currentTab}
|
||||
tabList={categories}
|
||||
onClick={handleTabClick}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='topic-list'>
|
||||
{topics.map(item => (
|
||||
<View
|
||||
key={item.id}
|
||||
className={`topic-card ${item.is_pinned ? 'pinned' : ''}`}
|
||||
onClick={() => navigateToDetail(item.id)}
|
||||
>
|
||||
<View className='card-header'>
|
||||
{item.is_pinned && <Text className='tag pinned-tag'>置顶</Text>}
|
||||
<Text className='tag'>{getCategoryLabel(item.category)}</Text>
|
||||
{item.is_verified_owner && <Text className='tag verified-tag'>认证</Text>}
|
||||
<Text className='card-title'>{item.title}</Text>
|
||||
</View>
|
||||
|
||||
<View className='card-content'>
|
||||
{stripMarkdown(item.content)}
|
||||
</View>
|
||||
|
||||
{getCoverImage(item.content) && (
|
||||
<View className='card-image'>
|
||||
<Image src={getCoverImage(item.content)} mode='aspectFill' />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='card-footer'>
|
||||
<View className='author-info'>
|
||||
<Image className='avatar' src={item.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
|
||||
<Text className={`nickname ${item.author_info?.is_star ? 'star' : ''}`}>
|
||||
{item.author_info?.nickname || '匿名'}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='stats'>
|
||||
<View className='stat-item'>
|
||||
<Text>👁 {item.view_count || 0}</Text>
|
||||
</View>
|
||||
<View className='stat-item'>
|
||||
<Text>💬 {item.replies?.length || 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{loading && <View style={{textAlign: 'center', padding: 10}}><AtActivityIndicator color='#00b96b' /></View>}
|
||||
{!loading && topics.length === 0 && <View className='empty-state'>暂无内容</View>}
|
||||
</View>
|
||||
|
||||
<View className='fab' onClick={navigateToCreate}>
|
||||
<AtIcon value='add' size='24' color='#fff' />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForumList
|
||||
Reference in New Issue
Block a user