This commit is contained in:
jeremygan2021
2026-02-12 16:54:16 +08:00
parent 1919ab2227
commit 5a7043fa1c
17 changed files with 384 additions and 51 deletions

View File

@@ -20,6 +20,11 @@ Taro + React + TypeScript 微信小程序项目,对接 Django 后端,支持
## 快速开始
小程序id
wxdf2ca73e6c0929f0
### 1. 环境准备
确保已安装 Node.js (>=16) 和 npm。

View File

@@ -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: {

View File

@@ -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;
}
}

View File

@@ -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}

View File

@@ -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 {

View File

@@ -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'>

View File

@@ -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>
)

View File

@@ -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}>