forum

2026-02-12 16:31:05 +08:00
parent 70c8608110
commit 1919ab2227
14 changed files with 1090 additions and 4 deletions
--- a/miniprogram/package.json
+++ b/miniprogram/package.json
@@ -42,6 +42,7 @@
    "@tarojs/runtime": "3.6.20",
    "@tarojs/shared": "3.6.20",
    "@tarojs/taro": "3.6.20",
+    "marked": "^17.0.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "taro-ui": "^3.0.0-alpha.10"
--- a/miniprogram/src/api/index.ts
+++ b/miniprogram/src/api/index.ts
@@ -31,3 +31,37 @@ export const distributorWithdraw = (amount: number) => request({ url: '/distribu
 // User
 export const updateUserInfo = (data: any) => request({ url: '/wechat/update/', method: 'POST', data })
 export const wechatLogin = (code: string) => request({ url: '/wechat/login/', method: 'POST', data: { code } })
+
+// Forum / Community
+export const getTopics = (params: any) => request({ url: '/community/topics/', data: params })
+export const getTopicDetail = (id: number) => request({ url: `/community/topics/${id}/` })
+export const createTopic = (data: any) => request({ url: '/community/topics/', method: 'POST', data })
+export const updateTopic = (id: number, data: any) => request({ url: `/community/topics/${id}/`, method: 'PATCH', data })
+export const getReplies = (params: any) => request({ url: '/community/replies/', data: params })
+export const createReply = (data: any) => request({ url: '/community/replies/', method: 'POST', data })
+export const getStarUsers = () => request({ url: '/users/stars/' })
+export const getAnnouncements = () => request({ url: '/community/announcements/' })
+
+// Upload Media for Forum
+export const uploadMedia = (filePath: string, type: 'image' | 'video') => {
+  const BASE_URL = process.env.TARO_APP_API_URL || 'https://market.quant-speed.com/api'
+  return Taro.uploadFile({
+    url: `${BASE_URL}/community/media/`,
+    filePath,
+    name: 'file',
+    formData: {
+      media_type: type
+    },
+    header: {
+      'Authorization': `Bearer ${Taro.getStorageSync('token')}`
+    }
+  }).then(res => {
+    if (res.statusCode >= 200 && res.statusCode < 300) {
+      return JSON.parse(res.data)
+    }
+    throw new Error('Upload failed')
+  })
+}
+
+import Taro from '@tarojs/taro'
+
--- a/miniprogram/src/app.config.ts
+++ b/miniprogram/src/app.config.ts
@@ -5,6 +5,7 @@ export default defineAppConfig({
    'pages/services/detail',
    'pages/courses/index',
    'pages/courses/detail',
+    'pages/forum/index',
    'pages/goods/detail',
    'pages/cart/cart',
    'pages/order/checkout',
@@ -21,6 +22,13 @@ export default defineAppConfig({
        'invite',
        'withdraw'
      ]
+    },
+    {
+      root: 'subpackages/forum',
+      pages: [
+        'detail/index',
+        'create/index'
+      ]
    }
  ],
  window: {
@@ -48,8 +56,8 @@ export default defineAppConfig({
        selectedIconPath: "./assets/AI_service_active.png"
      },
      {
-        pagePath: "pages/courses/index",
-        text: "VB课程",
+        pagePath: "pages/forum/index",
+        text: "社区",
        iconPath: "./assets/VR.png",
        selectedIconPath: "./assets/VR_active.png"
      },
--- a/miniprogram/src/app.scss
+++ b/miniprogram/src/app.scss
@@ -1,3 +1,5 @@
+@import 'taro-ui/dist/style/index.scss';
+
 page {
  --primary-cyan: #00f0ff;
  --primary-green: #00b96b;
--- a/miniprogram/src/pages/forum/index.config.ts
+++ b/miniprogram/src/pages/forum/index.config.ts
@@ -0,0 +1,7 @@
+export default definePageConfig({
+  navigationBarTitleText: '开发者社区',
+  enablePullDownRefresh: true,
+  backgroundColor: '#000000',
+  navigationBarBackgroundColor: '#000000',
+  navigationBarTextStyle: 'white'
+})
--- a/miniprogram/src/pages/forum/index.scss
+++ b/miniprogram/src/pages/forum/index.scss
@@ -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;
+    }
+  }
+}
--- a/miniprogram/src/pages/forum/index.tsx
+++ b/miniprogram/src/pages/forum/index.tsx
@@ -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
--- a/miniprogram/src/subpackages/forum/create/create.config.ts
+++ b/miniprogram/src/subpackages/forum/create/create.config.ts
@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: '发布话题',
+  backgroundColor: '#000000',
+  navigationBarBackgroundColor: '#000000',
+  navigationBarTextStyle: 'white'
+})
--- a/miniprogram/src/subpackages/forum/create/create.scss
+++ b/miniprogram/src/subpackages/forum/create/create.scss
@@ -0,0 +1,69 @@
+.create-topic-page {
+  min-height: 100vh;
+  background-color: #000;
+  padding: 20px;
+  color: #fff;
+
+  .form-item {
+    margin-bottom: 20px;
+
+    .label {
+      display: block;
+      margin-bottom: 8px;
+      color: #888;
+      font-size: 14px;
+    }
+
+    input {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid #333;
+      padding: 10px;
+      border-radius: 8px;
+      color: #fff;
+    }
+
+    textarea {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid #333;
+      padding: 10px;
+      border-radius: 8px;
+      color: #fff;
+      width: 100%;
+      min-height: 200px;
+    }
+
+    .picker {
+      background: rgba(255,255,255,0.1);
+      border: 1px solid #333;
+      padding: 10px;
+      border-radius: 8px;
+      color: #fff;
+    }
+  }
+
+  .media-upload {
+    margin-bottom: 30px;
+    
+    .upload-btn {
+      display: inline-block;
+      padding: 8px 16px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 4px;
+      font-size: 14px;
+      color: #ccc;
+    }
+  }
+
+  .submit-btn {
+    background-color: #00b96b;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-weight: bold;
+    
+    &.disabled {
+      background-color: #333;
+      color: #666;
+    }
+  }
+}
--- a/miniprogram/src/subpackages/forum/create/index.tsx
+++ b/miniprogram/src/subpackages/forum/create/index.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import { View, Text, Input, Textarea, Button, Picker } from '@tarojs/components'
+import { createTopic, uploadMedia } from '../../../api'
+import './create.scss'
+
+const CreateTopic = () => {
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [categoryIndex, setCategoryIndex] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  const categories = [
+    { key: 'discussion', label: '技术讨论' },
+    { key: 'help', label: '求助问答' },
+    { key: 'share', label: '经验分享' },
+  ]
+
+  const handleCategoryChange = (e) => {
+    setCategoryIndex(e.detail.value)
+  }
+
+  const handleUpload = async () => {
+      try {
+          const res = await Taro.chooseMedia({
+              count: 1,
+              mediaType: ['image', 'video'],
+              sourceType: ['album', 'camera']
+          })
+          
+          const file = res.tempFiles[0]
+          const type = file.fileType === 'video' ? 'video' : 'image'
+          
+          Taro.showLoading({ title: '上传中...' })
+          
+          const uploadRes = await uploadMedia(file.tempFilePath, type)
+          
+          let url = uploadRes.file
+          if (url && !url.startsWith('http')) {
+             const BASE_URL = process.env.TARO_APP_API_URL || 'https://market.quant-speed.com/api'
+             const host = BASE_URL.replace(/\/api\/?$/, '')
+             if (!url.startsWith('/')) url = '/' + url
+             url = `${host}${url}`
+          }
+          
+          const insertText = type === 'video'
+              ? `\n<video src="${url}" controls width="100%"></video>\n`
+              : `\n![image](${url})\n`
+              
+          setContent(prev => prev + insertText)
+          
+          Taro.hideLoading()
+      } catch (error) {
+          console.error(error)
+          Taro.hideLoading()
+          // Only toast if it's an error, not cancel
+          if (error.errMsg && error.errMsg.indexOf('cancel') === -1) {
+              Taro.showToast({ title: '上传失败', icon: 'none' })
+          }
+      }
+  }
+
+  const handleSubmit = async () => {
+    if (!title.trim() || !content.trim()) {
+      Taro.showToast({ title: '请填写完整', icon: 'none' })
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await createTopic({
+        title,
+        content,
+        category: categories[categoryIndex].key
+      })
+      
+      Taro.showToast({ title: '发布成功', icon: 'success' })
+      setTimeout(() => {
+        Taro.navigateBack()
+      }, 1500)
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '发布失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <View className='create-topic-page'>
+      <View className='form-item'>
+        <Text className='label'>板块</Text>
+        <Picker range={categories} rangeKey='label' value={categoryIndex} onChange={handleCategoryChange}>
+          <View className='picker'>
+            {categories[categoryIndex].label}
+          </View>
+        </Picker>
+      </View>
+
+      <View className='form-item'>
+        <Text className='label'>标题</Text>
+        <Input 
+          value={title}
+          onInput={e => setTitle(e.detail.value)}
+          placeholder='请输入标题' 
+        />
+      </View>
+
+      <View className='form-item'>
+        <Text className='label'>内容 (支持 Markdown)</Text>
+        <Textarea 
+          value={content}
+          onInput={e => setContent(e.detail.value)}
+          placeholder='分享你的想法...'
+          maxlength={-1}
+        />
+      </View>
+      
+      <View className='media-upload'>
+        <View className='upload-btn' onClick={handleUpload}>
+            + 插入图片/视频
+        </View>
+      </View>
+
+      <Button 
+        className={`submit-btn ${loading ? 'disabled' : ''}`}
+        onClick={handleSubmit}
+        disabled={loading}
+      >
+        {loading ? '发布中...' : '发布话题'}
+      </Button>
+    </View>
+  )
+}
+
+export default CreateTopic
--- a/miniprogram/src/subpackages/forum/detail/detail.config.ts
+++ b/miniprogram/src/subpackages/forum/detail/detail.config.ts
@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: '话题详情',
+  backgroundColor: '#000000',
+  navigationBarBackgroundColor: '#000000',
+  navigationBarTextStyle: 'white'
+})
--- a/miniprogram/src/subpackages/forum/detail/detail.scss
+++ b/miniprogram/src/subpackages/forum/detail/detail.scss
@@ -0,0 +1,174 @@
+.forum-detail-page {
+  min-height: 100vh;
+  background-color: #000;
+  padding-bottom: 80px;
+  color: #fff;
+
+  .topic-card {
+    background: rgba(20,20,20,0.8);
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding: 20px;
+    margin-bottom: 20px;
+
+    .header {
+      margin-bottom: 15px;
+
+      .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        margin-bottom: 10px;
+        line-height: 1.4;
+      }
+
+      .meta {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+        color: #888;
+        font-size: 12px;
+
+        .author {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+          }
+          
+          .verified {
+             color: #00b96b;
+          }
+        }
+      }
+    }
+
+    .content {
+      font-size: 16px;
+      line-height: 1.6;
+      color: #ddd;
+      
+      image {
+        max-width: 100%;
+        border-radius: 8px;
+        margin: 10px 0;
+      }
+    }
+
+    .media-list {
+      margin-top: 20px;
+      
+      .media-item {
+        margin-bottom: 15px;
+        
+        video {
+            width: 100%;
+            border-radius: 8px;
+        }
+      }
+    }
+  }
+
+  .replies-section {
+    padding: 0 15px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 15px;
+      padding-left: 5px;
+      border-left: 3px solid #00b96b;
+    }
+
+    .reply-card {
+      background: rgba(255,255,255,0.05);
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 15px;
+      display: flex;
+      gap: 10px;
+
+      .avatar {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .reply-main {
+        flex: 1;
+
+        .reply-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 6px;
+            
+            .nickname {
+                font-weight: bold;
+                color: #aaa;
+                font-size: 14px;
+            }
+            
+            .time {
+                color: #666;
+                font-size: 12px;
+            }
+        }
+
+        .reply-content {
+            font-size: 14px;
+            color: #eee;
+            line-height: 1.5;
+            
+            image {
+                max-width: 100%;
+                border-radius: 4px;
+                margin-top: 5px;
+            }
+        }
+      }
+    }
+  }
+
+  .reply-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #1a1a1a;
+    padding: 10px 15px;
+    border-top: 1px solid #333;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    z-index: 100;
+
+    .input-wrapper {
+        flex: 1;
+        background: #333;
+        border-radius: 20px;
+        padding: 8px 15px;
+        
+        input {
+            color: #fff;
+            width: 100%;
+        }
+    }
+
+    .action-btn {
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .send-btn {
+        color: #00b96b;
+        font-weight: bold;
+    }
+  }
+}
--- a/miniprogram/src/subpackages/forum/detail/index.tsx
+++ b/miniprogram/src/subpackages/forum/detail/index.tsx
@@ -0,0 +1,202 @@
+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 { AtActivityIndicator, AtIcon } from 'taro-ui'
+import { getTopicDetail, createReply, uploadMedia } from '../../../api'
+import { marked } from 'marked'
+import './detail.scss'
+
+const ForumDetail = () => {
+  const router = useRouter()
+  const { id } = router.params
+  
+  const [topic, setTopic] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [replyContent, setReplyContent] = useState('')
+  const [sending, setSending] = useState(false)
+  const [htmlContent, setHtmlContent] = useState('')
+
+  const fetchDetail = async () => {
+    try {
+      const res = await getTopicDetail(Number(id))
+      setTopic(res.data)
+      
+      // Parse markdown
+      if (res.data.content) {
+          const html = marked.parse(res.data.content)
+          // Basic fix for images to fit screen
+          const styledHtml = (html as string).replace(/<img/g, '<img style="max-width:100%;border-radius:8px;"')
+          setHtmlContent(styledHtml)
+      }
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (id) {
+        fetchDetail()
+    }
+  }, [id])
+
+  useShareAppMessage(() => {
+    return {
+      title: topic?.title || '技术社区',
+      path: `/subpackages/forum/detail/index?id=${id}`
+    }
+  })
+
+  const handleReplyChange = (e) => {
+      setReplyContent(e.detail.value)
+  }
+
+  const handleUpload = async () => {
+      try {
+          const res = await Taro.chooseMedia({
+              count: 1,
+              mediaType: ['image', 'video'],
+              sourceType: ['album', 'camera']
+          })
+          
+          const file = res.tempFiles[0]
+          const type = file.fileType === 'video' ? 'video' : 'image'
+          
+          Taro.showLoading({ title: '上传中...' })
+          
+          const uploadRes = await uploadMedia(file.tempFilePath, type)
+          
+          let url = uploadRes.file
+          // Ensure full URL if needed (backend usually returns relative or absolute)
+          if (url && !url.startsWith('http')) {
+             const BASE_URL = process.env.TARO_APP_API_URL || 'https://market.quant-speed.com/api'
+             const host = BASE_URL.replace(/\/api\/?$/, '')
+             if (!url.startsWith('/')) url = '/' + url
+             url = `${host}${url}`
+          }
+          
+          const insertText = type === 'video'
+              ? `\n<video src="${url}" controls width="100%"></video>\n`
+              : `\n![image](${url})\n`
+              
+          setReplyContent(prev => prev + insertText)
+          
+          Taro.hideLoading()
+      } catch (error) {
+          console.error(error)
+          Taro.hideLoading()
+          Taro.showToast({ title: '上传失败', icon: 'none' })
+      }
+  }
+
+  const handleSubmit = async () => {
+      const token = Taro.getStorageSync('token')
+      if (!token) {
+          Taro.showToast({ title: '请先登录', icon: 'none' })
+          return
+      }
+      
+      if (!replyContent.trim()) {
+          Taro.showToast({ title: '请输入内容', icon: 'none' })
+          return
+      }
+      
+      setSending(true)
+      try {
+          await createReply({
+              topic: Number(id),
+              content: replyContent
+          })
+          Taro.showToast({ title: '回复成功', icon: 'success' })
+          setReplyContent('')
+          fetchDetail() // Refresh
+      } catch (error) {
+          console.error(error)
+          Taro.showToast({ title: '回复失败', icon: 'none' })
+      } finally {
+          setSending(false)
+      }
+  }
+
+  if (loading) return <View className='forum-detail-page'><AtActivityIndicator mode='center' /></View>
+  if (!topic) return <View className='forum-detail-page'><View style={{padding: 20, textAlign: 'center'}}>话题不存在</View></View>
+
+  return (
+    <View className='forum-detail-page'>
+      <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>}
+            <Text className='title'>{topic.title}</Text>
+            
+            <View className='meta'>
+                <View className='author'>
+                    <Image className='avatar' src={topic.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
+                    <Text>{topic.author_info?.nickname}</Text>
+                    {topic.is_verified_owner && <Text className='verified'>✓</Text>}
+                </View>
+                <Text>•</Text>
+                <Text>{new Date(topic.created_at).toLocaleDateString()}</Text>
+                <Text>•</Text>
+                <Text>{topic.view_count} 阅读</Text>
+            </View>
+        </View>
+        
+        <View className='content'>
+            <RichText nodes={htmlContent} />
+        </View>
+
+        {topic.media && topic.media.length > 0 && (
+            <View className='media-list'>
+                {topic.media.filter(m => m.media_type === 'video').map(m => (
+                    <View key={m.id} className='media-item'>
+                        <Video src={m.url} controls />
+                    </View>
+                ))}
+            </View>
+        )}
+      </View>
+
+      <View className='replies-section'>
+        <View className='section-title'>{topic.replies?.length || 0} 条回复</View>
+        
+        {topic.replies?.map((reply, idx) => (
+            <View key={reply.id} className='reply-card'>
+                <Image className='avatar' src={reply.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
+                <View className='reply-main'>
+                    <View className='reply-header'>
+                        <Text className='nickname'>{reply.author_info?.nickname}</Text>
+                        <Text className='time'>#{idx + 1} • {new Date(reply.created_at).toLocaleDateString()}</Text>
+                    </View>
+                    <View className='reply-content'>
+                        {/* Simple markdown render for replies or just text if complex */}
+                        <RichText nodes={marked.parse(reply.content) as string} />
+                    </View>
+                </View>
+            </View>
+        ))}
+      </View>
+
+      <View className='reply-bar'>
+        <View className='action-btn' onClick={handleUpload}>
+            <AtIcon value='image' size='20' color='#888' />
+        </View>
+        <View className='input-wrapper'>
+            <Input 
+                value={replyContent}
+                onInput={handleReplyChange}
+                placeholder='发表回复...'
+                confirmType='send'
+                onConfirm={handleSubmit}
+            />
+        </View>
+        <View className='action-btn' onClick={handleSubmit}>
+            {sending ? <AtActivityIndicator size={20} /> : <Text className='send-btn'>发送</Text>}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default ForumDetail