forum
This commit is contained in:
@@ -20,6 +20,11 @@ Taro + React + TypeScript 微信小程序项目,对接 Django 后端,支持
|
||||
|
||||
## 快速开始
|
||||
|
||||
小程序id
|
||||
|
||||
wxdf2ca73e6c0929f0
|
||||
|
||||
|
||||
### 1. 环境准备
|
||||
|
||||
确保已安装 Node.js (>=16) 和 npm。
|
||||
|
||||
@@ -20,9 +20,14 @@ const config = {
|
||||
}
|
||||
},
|
||||
framework: 'react',
|
||||
compiler: 'webpack5',
|
||||
compiler: {
|
||||
type: 'webpack5',
|
||||
prebundle: {
|
||||
enable: false
|
||||
}
|
||||
},
|
||||
cache: {
|
||||
enable: true // Enable cache for better build performance
|
||||
enable: false // Disable cache to fix prebundle error
|
||||
},
|
||||
mini: {
|
||||
postcss: {
|
||||
|
||||
@@ -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'>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import React, { useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Taro, { useRouter } from '@tarojs/taro'
|
||||
import { View, Text, Input, Textarea, Button, Picker } from '@tarojs/components'
|
||||
import { createTopic, uploadMedia } from '../../../api'
|
||||
import { createTopic, updateTopic, getTopicDetail, uploadMedia } from '../../../api'
|
||||
import './create.scss'
|
||||
|
||||
const CreateTopic = () => {
|
||||
const router = useRouter()
|
||||
const { id } = router.params
|
||||
|
||||
const [title, setTitle] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [categoryIndex, setCategoryIndex] = useState(0)
|
||||
@@ -16,6 +19,30 @@ const CreateTopic = () => {
|
||||
{ key: 'share', label: '经验分享' },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
const fetchDetail = async () => {
|
||||
Taro.showLoading({ title: '加载中...' })
|
||||
try {
|
||||
const res = await getTopicDetail(Number(id))
|
||||
const topic = res.data
|
||||
setTitle(topic.title)
|
||||
setContent(topic.content)
|
||||
const idx = categories.findIndex(c => c.key === topic.category)
|
||||
if (idx !== -1) setCategoryIndex(idx)
|
||||
|
||||
Taro.setNavigationBarTitle({ title: '编辑话题' })
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
Taro.hideLoading()
|
||||
}
|
||||
}
|
||||
fetchDetail()
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const handleCategoryChange = (e) => {
|
||||
setCategoryIndex(e.detail.value)
|
||||
}
|
||||
@@ -68,19 +95,28 @@ const CreateTopic = () => {
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await createTopic({
|
||||
title,
|
||||
content,
|
||||
category: categories[categoryIndex].key
|
||||
})
|
||||
if (id) {
|
||||
await updateTopic(Number(id), {
|
||||
title,
|
||||
content,
|
||||
category: categories[categoryIndex].key
|
||||
})
|
||||
Taro.showToast({ title: '更新成功', icon: 'success' })
|
||||
} else {
|
||||
await createTopic({
|
||||
title,
|
||||
content,
|
||||
category: categories[categoryIndex].key
|
||||
})
|
||||
Taro.showToast({ title: '发布成功', icon: 'success' })
|
||||
}
|
||||
|
||||
Taro.showToast({ title: '发布成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '发布失败', icon: 'none' })
|
||||
Taro.showToast({ title: id ? '更新失败' : '发布失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
@@ -127,7 +163,7 @@ const CreateTopic = () => {
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '发布中...' : '发布话题'}
|
||||
{loading ? (id ? '更新中...' : '发布中...') : (id ? '更新话题' : '发布话题')}
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
|
||||
import { View, Text, Image, Video, RichText, Input, Button } from '@tarojs/components'
|
||||
import Taro, { useRouter, useShareAppMessage, useDidShow } from '@tarojs/taro'
|
||||
import { View, Text, Image, Video, RichText, Input, ScrollView } from '@tarojs/components'
|
||||
import { AtActivityIndicator, AtIcon } from 'taro-ui'
|
||||
import { getTopicDetail, createReply, uploadMedia } from '../../../api'
|
||||
import { marked } from 'marked'
|
||||
@@ -15,6 +15,7 @@ const ForumDetail = () => {
|
||||
const [replyContent, setReplyContent] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
const [htmlContent, setHtmlContent] = useState('')
|
||||
const [userInfo, setUserInfo] = useState<any>(null)
|
||||
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
@@ -37,11 +38,20 @@ const ForumDetail = () => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const info = Taro.getStorageSync('userInfo')
|
||||
if (info) setUserInfo(info)
|
||||
|
||||
if (id) {
|
||||
fetchDetail()
|
||||
}
|
||||
}, [id])
|
||||
|
||||
useDidShow(() => {
|
||||
if (id && !loading) {
|
||||
fetchDetail()
|
||||
}
|
||||
})
|
||||
|
||||
useShareAppMessage(() => {
|
||||
return {
|
||||
title: topic?.title || '技术社区',
|
||||
@@ -53,6 +63,12 @@ const ForumDetail = () => {
|
||||
setReplyContent(e.detail.value)
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
Taro.navigateTo({
|
||||
url: `/subpackages/forum/create/index?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
try {
|
||||
const res = await Taro.chooseMedia({
|
||||
@@ -125,6 +141,8 @@ const ForumDetail = () => {
|
||||
|
||||
return (
|
||||
<View className='forum-detail-page'>
|
||||
<ScrollView scrollY style={{height: '100vh'}}>
|
||||
<View style={{paddingBottom: 80}}>
|
||||
<View className='topic-card'>
|
||||
<View className='header'>
|
||||
{topic.is_pinned && <Text style={{color: '#ff4d4f', marginRight: 5, fontSize: 12, border: '1px solid #ff4d4f', padding: '0 4px', borderRadius: 4}}>置顶</Text>}
|
||||
@@ -140,6 +158,13 @@ const ForumDetail = () => {
|
||||
<Text>{new Date(topic.created_at).toLocaleDateString()}</Text>
|
||||
<Text>•</Text>
|
||||
<Text>{topic.view_count} 阅读</Text>
|
||||
|
||||
{userInfo && topic.author === userInfo.id && (
|
||||
<View onClick={handleEdit} style={{display: 'flex', alignItems: 'center', marginLeft: 'auto', padding: '4px 8px', background: 'rgba(255,255,255,0.1)', borderRadius: 4}}>
|
||||
<AtIcon value='edit' size='14' color='#00b96b' />
|
||||
<Text style={{fontSize: 12, color: '#00b96b', marginLeft: 4}}>编辑</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -177,6 +202,8 @@ const ForumDetail = () => {
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View className='reply-bar'>
|
||||
<View className='action-btn' onClick={handleUpload}>
|
||||
|
||||
Reference in New Issue
Block a user