first commit

2026-03-20 23:30:57 +08:00
commit 290be5d5be
328 changed files with 37215 additions and 0 deletions
--- a/miniprogram/src/subpackages/distributor/_shared.scss
+++ b/miniprogram/src/subpackages/distributor/_shared.scss
@@ -0,0 +1,72 @@
+// Tech/Cyberpunk Theme Variables & Mixins
+
+// Colors
+$bg-dark: #050505;
+$primary-cyan: #00f0ff;
+$primary-green: #00b96b;
+$primary-purple: #bd00ff;
+$text-main: #ffffff;
+$text-secondary: rgba(255, 255, 255, 0.7);
+$text-muted: rgba(255, 255, 255, 0.4);
+
+// Mixins
+@mixin page-container {
+  min-height: 100vh;
+  background-color: $bg-dark;
+  background-image: 
+    radial-gradient(circle at 10% 10%, rgba(0, 240, 255, 0.1) 0%, transparent 40%),
+    radial-gradient(circle at 90% 90%, rgba(189, 0, 255, 0.1) 0%, transparent 40%);
+  color: $text-main;
+  padding: 30px;
+  box-sizing: border-box;
+}
+
+@mixin glass-card {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+
+@mixin neon-text($color: $primary-cyan) {
+  color: $color;
+  text-shadow: 0 0 10px rgba($color, 0.5), 0 0 20px rgba($color, 0.3);
+}
+
+@mixin neon-button($color: $primary-cyan) {
+  background: rgba($color, 0.1);
+  border: 1px solid rgba($color, 0.5);
+  color: $color;
+  box-shadow: 0 0 15px rgba($color, 0.2);
+  transition: all 0.3s ease;
+  
+  &:active {
+    background: rgba($color, 0.2);
+    box-shadow: 0 0 25px rgba($color, 0.4);
+    transform: scale(0.98);
+  }
+}
+
+@mixin tech-border {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -1px; left: -1px;
+    width: 20px; height: 20px;
+    border-top: 2px solid $primary-cyan;
+    border-left: 2px solid $primary-cyan;
+    border-radius: 4px 0 0 0;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px; right: -1px;
+    width: 20px; height: 20px;
+    border-bottom: 2px solid $primary-cyan;
+    border-right: 2px solid $primary-cyan;
+    border-radius: 0 0 4px 0;
+  }
+}
--- a/miniprogram/src/subpackages/distributor/earnings.config.ts
+++ b/miniprogram/src/subpackages/distributor/earnings.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '收益明细'
+})
--- a/miniprogram/src/subpackages/distributor/earnings.scss
+++ b/miniprogram/src/subpackages/distributor/earnings.scss
@@ -0,0 +1,56 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+}
+
+.item {
+  @include glass-card;
+  padding: 30px;
+  margin-bottom: 24px;
+  
+  .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      align-items: center;
+
+      .type {
+          font-size: 28px;
+          color: $text-main;
+          font-weight: bold;
+      }
+      .amount {
+          font-size: 32px;
+          @include neon-text($primary-green);
+          font-weight: bold;
+          font-family: 'DIN Alternate', sans-serif;
+      }
+      .source {
+          font-size: 24px;
+          color: $text-secondary;
+      }
+      .status {
+          font-size: 24px;
+          color: $primary-cyan;
+          background: rgba(0, 240, 255, 0.1);
+          padding: 4px 12px;
+          border-radius: 4px;
+      }
+  }
+  .time {
+      font-size: 22px;
+      color: $text-muted;
+      display: block;
+      margin-top: 16px;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      padding-top: 12px;
+  }
+}
+
+.empty {
+  padding: 100px 0;
+  text-align: center;
+  color: $text-muted;
+  font-size: 28px;
+}
--- a/miniprogram/src/subpackages/distributor/earnings.tsx
+++ b/miniprogram/src/subpackages/distributor/earnings.tsx
@@ -0,0 +1,55 @@
+import { View, Text } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { distributorEarnings } from '../../api'
+import './earnings.scss'
+
+export default function Earnings() {
+  const [list, setList] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useLoad(() => {
+    fetchData()
+  })
+
+  const fetchData = async () => {
+    try {
+      const res: any = await distributorEarnings()
+      // Pagination support check? The backend returns { count, next, previous, results } or just list if no pagination
+      if (res.results) {
+        setList(res.results)
+      } else if (Array.isArray(res)) {
+        setList(res)
+      }
+    } catch (err) {
+      console.error(err)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <View className='page-container'>
+      {list.length > 0 ? (
+          list.map((item: any) => (
+              <View className='item' key={item.id}>
+                  <View className='row'>
+                      <Text className='type'>{item.level === 1 ? '直接推广' : '团队奖励'}</Text>
+                      <Text className='amount'>+{item.amount}</Text>
+                  </View>
+                  <View className='row'>
+                      <Text className='source'>
+                          {item.order_info?.customer_name} - 订单金额 ¥{item.order_info?.total_price}
+                      </Text>
+                      <Text className='status'>{item.status === 'settled' ? '已结算' : '待结算'}</Text>
+                  </View>
+                  <Text className='time'>{item.created_at?.replace('T', ' ').substring(0, 19)}</Text>
+              </View>
+          ))
+      ) : (
+          <View className='empty'>暂无收益记录</View>
+      )}
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/distributor/index.config.ts
+++ b/miniprogram/src/subpackages/distributor/index.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '分销中心'
+})
--- a/miniprogram/src/subpackages/distributor/index.scss
+++ b/miniprogram/src/subpackages/distributor/index.scss
@@ -0,0 +1,112 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+}
+
+.header-card {
+  @include glass-card;
+  @include tech-border;
+  padding: 40px 30px;
+  margin-bottom: 30px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+
+  // Background accent
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(0, 185, 107, 0.05));
+    z-index: -1;
+  }
+
+  .label { 
+    font-size: 16px; 
+    color: $text-secondary; 
+    display: block; 
+    margin-bottom: 16px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+
+  .amount { 
+    font-size: 56px; 
+    font-weight: bold; 
+    display: block; 
+    margin-bottom: 30px;
+    @include neon-text($primary-cyan);
+    font-family: 'DIN Alternate', sans-serif; // Use a tech-looking font if available
+  }
+  
+  .btn-withdraw {
+    @include neon-button($primary-green);
+    border-radius: 30px;
+    font-size: 18px;
+    padding: 0 40px;
+    height: 50px;
+    line-height: 50px;
+    display: inline-block;
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+}
+
+.stats-grid {
+  display: flex;
+  @include glass-card;
+  padding: 30px 0;
+  margin-bottom: 30px;
+  
+  .item {
+    flex: 1;
+    text-align: center;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    
+    &:last-child { border-right: none; }
+    
+    .val { 
+      font-size: 24px; 
+      font-weight: bold; 
+      color: $text-main; 
+      display: block; 
+      margin-bottom: 8px;
+      text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+    }
+    .lbl { 
+      font-size: 14px; 
+      color: $text-secondary; 
+    }
+  }
+}
+
+.menu-list {
+  @include glass-card;
+  padding: 0 20px;
+  
+  .menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 70px; // Larger touch target
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    font-size: 18px;
+    color: $text-main;
+    
+    &:last-child { border-bottom: none; }
+    
+    .arrow { 
+      color: $primary-cyan; 
+      opacity: 0.7;
+      font-family: monospace;
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.02);
+    }
+  }
+}
--- a/miniprogram/src/subpackages/distributor/index.tsx
+++ b/miniprogram/src/subpackages/distributor/index.tsx
@@ -0,0 +1,83 @@
+import { View, Text, Button } from '@tarojs/components'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useState } from 'react'
+import { distributorInfo } from '../../api'
+import './index.scss'
+
+export default function DistributorIndex() {
+  const [info, setInfo] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useDidShow(() => {
+    fetchInfo()
+  })
+
+  const fetchInfo = async () => {
+    try {
+      const res = await distributorInfo()
+      setInfo(res)
+    } catch (err: any) {
+      if (err.statusCode === 404) {
+        // Not registered
+        Taro.redirectTo({ url: '/subpackages/distributor/register' })
+      } else {
+        Taro.showToast({ title: '加载失败', icon: 'none' })
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const goInvite = () => Taro.navigateTo({ url: '/subpackages/distributor/invite' })
+  const goWithdraw = () => Taro.navigateTo({ url: '/subpackages/distributor/withdraw' })
+  const goTeam = () => Taro.navigateTo({ url: '/subpackages/distributor/team' })
+  const goEarnings = () => Taro.navigateTo({ url: '/subpackages/distributor/earnings' })
+  const goOrders = () => Taro.navigateTo({ url: '/subpackages/distributor/orders' })
+
+  if (loading) return <View>Loading...</View>
+  if (!info) return <View>Error</View>
+
+  return (
+    <View className='page-container'>
+      <View className='header-card'>
+        <Text className='label'>可提现余额</Text>
+        <Text className='amount'>¥{info.withdrawable_balance}</Text>
+        <Button className='btn-withdraw' onClick={goWithdraw}>提现</Button>
+      </View>
+
+      <View className='stats-grid'>
+        <View className='item'>
+          <Text className='val'>¥{info.total_earnings}</Text>
+          <Text className='lbl'>累计收益</Text>
+        </View>
+        <View className='item'>
+          <Text className='val'>Lv.{info.level}</Text>
+          <Text className='lbl'>当前等级</Text>
+        </View>
+        <View className='item'>
+          <Text className='val'>{(Number(info.commission_rate) * 100).toFixed(1)}%</Text>
+          <Text className='lbl'>分佣比例</Text>
+        </View>
+      </View>
+
+      <View className='menu-list'>
+        <View className='menu-item' onClick={goInvite}>
+          <Text>推广二维码</Text>
+          <Text className='arrow'>{'>'}</Text>
+        </View>
+        <View className='menu-item' onClick={goTeam}>
+          <Text>我的团队</Text>
+          <Text className='arrow'>{'>'}</Text>
+        </View>
+        <View className='menu-item' onClick={goEarnings}>
+          <Text>收益明细</Text>
+          <Text className='arrow'>{'>'}</Text>
+        </View>
+        <View className='menu-item' onClick={goOrders}>
+          <Text>分销订单</Text>
+          <Text className='arrow'>{'>'}</Text>
+        </View>
+      </View>
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/distributor/invite.config.ts
+++ b/miniprogram/src/subpackages/distributor/invite.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '推广邀请'
+})
--- a/miniprogram/src/subpackages/distributor/invite.scss
+++ b/miniprogram/src/subpackages/distributor/invite.scss
@@ -0,0 +1,49 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qr-card {
+  @include glass-card;
+  @include tech-border;
+  padding: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 40px;
+  
+  .qr-img {
+    width: 400px;
+    height: 400px;
+    background: rgba(255, 255, 255, 0.1);
+    margin-bottom: 40px;
+    border: 1px solid $primary-cyan;
+    padding: 10px;
+    border-radius: 8px;
+  }
+  
+  .tip {
+    color: $text-main;
+    font-size: 28px;
+    text-align: center;
+    line-height: 1.6;
+    opacity: 0.9;
+  }
+}
+
+.btn-save {
+  margin-top: 60px;
+  width: 100%;
+  @include neon-button($primary-cyan);
+  height: 90px;
+  line-height: 90px;
+  font-size: 32px;
+  font-weight: bold;
+  border-radius: 45px;
+}
--- a/miniprogram/src/subpackages/distributor/invite.tsx
+++ b/miniprogram/src/subpackages/distributor/invite.tsx
@@ -0,0 +1,57 @@
+import { View, Text, Image, Button } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { distributorInvite } from '../../api'
+import './invite.scss'
+
+export default function Invite() {
+  const [qrCode, setQrCode] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useLoad(() => {
+    fetchQr()
+  })
+
+  const fetchQr = async () => {
+    try {
+      const res: any = await distributorInvite()
+      setQrCode(res.qr_code_url)
+    } catch (err) {
+      console.error(err)
+      Taro.showToast({ title: '获取二维码失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const saveImage = () => {
+    if (!qrCode) return
+    Taro.downloadFile({
+      url: qrCode,
+      success: (res) => {
+        Taro.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => Taro.showToast({ title: '已保存', icon: 'success' }),
+          fail: () => Taro.showToast({ title: '保存失败', icon: 'none' })
+        })
+      }
+    })
+  }
+
+  return (
+    <View className='page-container'>
+      <View className='qr-card'>
+        {loading ? (
+            <View className='qr-img' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Text>Loading...</Text>
+            </View>
+        ) : (
+            <Image src={qrCode} className='qr-img' mode='aspectFit' />
+        )}
+        <Text className='tip'>扫码加入我的团队{'\n'}一起推广赚佣金</Text>
+      </View>
+
+      <Button className='btn-save' onClick={saveImage} disabled={!qrCode}>保存二维码</Button>
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/distributor/orders.config.ts
+++ b/miniprogram/src/subpackages/distributor/orders.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '分销订单'
+})
--- a/miniprogram/src/subpackages/distributor/orders.scss
+++ b/miniprogram/src/subpackages/distributor/orders.scss
@@ -0,0 +1,72 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+}
+
+.item {
+  @include glass-card;
+  padding: 30px;
+  margin-bottom: 24px;
+  
+  .row {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      padding-bottom: 16px;
+      margin-bottom: 16px;
+      
+      .order-no {
+          font-size: 24px;
+          color: $text-secondary;
+          font-family: monospace;
+      }
+      .status {
+          font-size: 24px;
+          color: $primary-green;
+      }
+  }
+  .content {
+      display: flex;
+      margin-bottom: 16px;
+      
+      .img {
+          width: 120px;
+          height: 120px;
+          border-radius: 8px;
+          background: rgba(255, 255, 255, 0.1);
+          margin-right: 24px;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      .info {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          
+          .title {
+              font-size: 28px;
+              color: $text-main;
+              line-height: 1.4;
+          }
+          .price {
+              font-size: 32px;
+              color: $primary-cyan;
+              font-weight: bold;
+          }
+      }
+  }
+  .footer {
+      display: flex;
+      justify-content: space-between;
+      font-size: 24px;
+      color: $text-muted;
+  }
+}
+
+.empty {
+  padding: 100px 0;
+  text-align: center;
+  color: $text-muted;
+  font-size: 28px;
+}
--- a/miniprogram/src/subpackages/distributor/orders.tsx
+++ b/miniprogram/src/subpackages/distributor/orders.tsx
@@ -0,0 +1,58 @@
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { distributorOrders } from '../../api'
+import './orders.scss'
+
+export default function Orders() {
+  const [list, setList] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useLoad(() => {
+    fetchData()
+  })
+
+  const fetchData = async () => {
+    try {
+      const res: any = await distributorOrders()
+      if (res.results) {
+        setList(res.results)
+      } else if (Array.isArray(res)) {
+        setList(res)
+      }
+    } catch (err) {
+      console.error(err)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <View className='page-container'>
+      {list.length > 0 ? (
+          list.map((item: any) => (
+              <View className='item' key={item.id}>
+                  <View className='row'>
+                      <Text className='order-no'>订单号: {item.wechat_trade_no || item.id}</Text>
+                      <Text className='status'>{item.status === 'paid' ? '已支付' : item.status}</Text>
+                  </View>
+                  <View className='content'>
+                      <Image className='img' src={item.config_image || ''} mode='aspectFill' />
+                      <View className='info'>
+                          <Text className='title'>{item.config_name || item.course_title || '商品'}</Text>
+                          <Text className='price'>¥{item.total_price}</Text>
+                      </View>
+                  </View>
+                  <View className='footer'>
+                      <Text className='customer'>买家: {item.customer_name}</Text>
+                      <Text className='time'>{item.created_at?.split('T')[0]}</Text>
+                  </View>
+              </View>
+          ))
+      ) : (
+          <View className='empty'>暂无分销订单</View>
+      )}
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/distributor/register.config.ts
+++ b/miniprogram/src/subpackages/distributor/register.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '申请分销员'
+})
--- a/miniprogram/src/subpackages/distributor/register.scss
+++ b/miniprogram/src/subpackages/distributor/register.scss
@@ -0,0 +1,46 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card {
+  @include glass-card;
+  @include tech-border;
+  padding: 50px 30px;
+  width: 100%;
+  text-align: center;
+  
+  .title {
+    font-size: 32px;
+    font-weight: bold;
+    @include neon-text($primary-purple);
+    display: block;
+    margin-bottom: 16px;
+    letter-spacing: 2px;
+  }
+  
+  .desc {
+    font-size: 16px;
+    color: $text-secondary;
+    display: block;
+    margin-bottom: 50px;
+  }
+  
+  .btn-register {
+    @include neon-button($primary-green);
+    background: linear-gradient(90deg, rgba(0, 185, 107, 0.2), rgba(0, 240, 255, 0.2));
+    border: 1px solid $primary-green;
+    border-radius: 30px;
+    height: 56px;
+    line-height: 56px;
+    font-size: 20px;
+    font-weight: bold;
+    width: 80%;
+    margin: 0 auto;
+    letter-spacing: 4px;
+  }
+}
--- a/miniprogram/src/subpackages/distributor/register.tsx
+++ b/miniprogram/src/subpackages/distributor/register.tsx
@@ -0,0 +1,32 @@
+import { View, Button, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { distributorRegister } from '../../api'
+import './register.scss'
+
+export default function Register() {
+  const handleRegister = async () => {
+    try {
+      await distributorRegister({})
+      Taro.showToast({ title: '申请已提交', icon: 'success' })
+      setTimeout(() => {
+        Taro.redirectTo({ url: '/subpackages/distributor/index' })
+      }, 1500)
+    } catch (err: any) {
+      if (err.data?.error === 'Already registered') {
+         Taro.redirectTo({ url: '/subpackages/distributor/index' })
+      } else {
+         Taro.showToast({ title: '申请失败', icon: 'none' })
+      }
+    }
+  }
+
+  return (
+    <View className='page-container'>
+       <View className='card'>
+          <Text className='title'>加入我们</Text>
+          <Text className='desc'>成为分销员，分享赚取佣金</Text>
+          <Button className='btn-register' onClick={handleRegister}>立即申请</Button>
+       </View>
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/distributor/team.config.ts
+++ b/miniprogram/src/subpackages/distributor/team.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '我的团队'
+})
--- a/miniprogram/src/subpackages/distributor/team.scss
+++ b/miniprogram/src/subpackages/distributor/team.scss
@@ -0,0 +1,85 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+  padding-bottom: 40px;
+}
+
+.header {
+  @include glass-card;
+  padding: 30px;
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 24px;
+  
+  .stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    .val {
+      font-size: 36px;
+      font-weight: bold;
+      @include neon-text($primary-cyan);
+    }
+    .lbl {
+      font-size: 24px;
+      color: $text-secondary;
+      margin-top: 10px;
+    }
+  }
+}
+
+.list {
+  @include glass-card;
+  padding: 0;
+  overflow: hidden;
+
+  .list-header {
+      padding: 24px 30px;
+      font-size: 28px;
+      font-weight: bold;
+      color: $text-main;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      background: rgba(255, 255, 255, 0.02);
+  }
+  .item {
+      display: flex;
+      align-items: center;
+      padding: 24px 30px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      
+      .avatar {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          margin-right: 24px;
+          background: #333;
+          border: 2px solid $primary-purple;
+      }
+      .info {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          .name {
+              font-size: 28px;
+              color: $text-main;
+          }
+          .time {
+              font-size: 22px;
+              color: $text-muted;
+              margin-top: 8px;
+          }
+      }
+      .level {
+          font-size: 24px;
+          color: $primary-purple;
+          font-weight: bold;
+      }
+  }
+  .empty {
+      padding: 50px;
+      text-align: center;
+      color: $text-muted;
+  }
+}
--- a/miniprogram/src/subpackages/distributor/team.tsx
+++ b/miniprogram/src/subpackages/distributor/team.tsx
@@ -0,0 +1,62 @@
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { distributorTeam } from '../../api'
+import './team.scss'
+
+export default function Team() {
+  const [data, setData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useLoad(() => {
+    fetchData()
+  })
+
+  const fetchData = async () => {
+    try {
+      const res = await distributorTeam()
+      setData(res)
+    } catch (err) {
+      console.error(err)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) return <View className='page-container'>Loading...</View>
+  if (!data) return <View className='page-container'>Error</View>
+
+  return (
+    <View className='page-container'>
+      <View className='header'>
+        <View className='stat'>
+           <Text className='val'>{data.children_count}</Text>
+           <Text className='lbl'>直推人数</Text>
+        </View>
+        <View className='stat'>
+           <Text className='val'>¥{data.second_level_earnings}</Text>
+           <Text className='lbl'>团队贡献收益</Text>
+        </View>
+      </View>
+
+      <View className='list'>
+        <View className='list-header'>我的团队成员</View>
+        {data.children?.length > 0 ? (
+            data.children.map((item: any) => (
+                <View className='item' key={item.id}>
+                    <Image className='avatar' src={item.user_info?.avatar_url || ''} />
+                    <View className='info'>
+                        <Text className='name'>{item.user_info?.nickname || '用户'}</Text>
+                        <Text className='time'>加入时间: {item.created_at?.split('T')[0]}</Text>
+                    </View>
+                    <Text className='level'>Lv.{item.level}</Text>
+                </View>
+            ))
+        ) : (
+            <View className='empty'>暂无成员</View>
+        )}
+      </View>
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/distributor/withdraw.config.ts
+++ b/miniprogram/src/subpackages/distributor/withdraw.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '申请提现'
+})
--- a/miniprogram/src/subpackages/distributor/withdraw.scss
+++ b/miniprogram/src/subpackages/distributor/withdraw.scss
@@ -0,0 +1,60 @@
+@import './_shared.scss';
+
+.page-container {
+  @include page-container;
+}
+
+.card {
+  @include glass-card;
+  padding: 40px;
+  
+  .label {
+    font-size: 28px;
+    color: $text-secondary;
+    margin-bottom: 24px;
+    display: block;
+  }
+  
+  .input-box {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding-bottom: 20px;
+    margin-bottom: 24px;
+    
+    .symbol {
+      font-size: 48px;
+      font-weight: bold;
+      color: $text-main;
+      margin-right: 20px;
+    }
+    
+    .input {
+      flex: 1;
+      height: 60px;
+      font-size: 48px;
+      font-weight: bold;
+      color: $primary-green;
+    }
+  }
+  
+  .balance-tip {
+    font-size: 24px;
+    color: $text-muted;
+    
+    .all {
+      color: $primary-cyan;
+      margin-left: 16px;
+    }
+  }
+  
+  .btn-submit {
+    margin-top: 80px;
+    @include neon-button($primary-green);
+    height: 88px;
+    line-height: 88px;
+    font-size: 32px;
+    font-weight: bold;
+    border-radius: 44px;
+  }
+}
--- a/miniprogram/src/subpackages/distributor/withdraw.tsx
+++ b/miniprogram/src/subpackages/distributor/withdraw.tsx
@@ -0,0 +1,73 @@
+import { View, Text, Button, Input } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { distributorInfo, distributorWithdraw } from '../../api'
+import './withdraw.scss'
+
+export default function Withdraw() {
+  const [balance, setBalance] = useState(0)
+  const [amount, setAmount] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  useLoad(() => {
+    fetchInfo()
+  })
+
+  const fetchInfo = async () => {
+    try {
+      const res: any = await distributorInfo()
+      setBalance(Number(res.withdrawable_balance))
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  const handleWithdraw = async () => {
+    const val = Number(amount)
+    if (!val || val <= 0) {
+      Taro.showToast({ title: '请输入有效金额', icon: 'none' })
+      return
+    }
+    if (val > balance) {
+      Taro.showToast({ title: '余额不足', icon: 'none' })
+      return
+    }
+
+    setLoading(true)
+    try {
+      await distributorWithdraw(val)
+      Taro.showToast({ title: '申请已提交', icon: 'success' })
+      setTimeout(() => {
+        Taro.navigateBack()
+      }, 1500)
+    } catch (err) {
+      Taro.showToast({ title: '提现失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <View className='page-container'>
+      <View className='card'>
+        <Text className='label'>提现金额</Text>
+        <View className='input-box'>
+          <Text className='symbol'>¥</Text>
+          <Input 
+            className='input' 
+            type='digit' 
+            value={amount} 
+            onInput={(e) => setAmount(e.detail.value)}
+            placeholder='0.00'
+          />
+        </View>
+        <View className='balance-tip'>
+          <Text>可提现余额 ¥{balance.toFixed(2)}</Text>
+          <Text className='all' onClick={() => setAmount(balance.toString())}>全部提现</Text>
+        </View>
+        
+        <Button className='btn-submit' onClick={handleWithdraw} loading={loading}>确认提现</Button>
+      </View>
+    </View>
+  )
+}
--- a/miniprogram/src/subpackages/forum/activity/detail.config.ts
+++ b/miniprogram/src/subpackages/forum/activity/detail.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '活动详情'
+})
--- a/miniprogram/src/subpackages/forum/activity/detail.scss
+++ b/miniprogram/src/subpackages/forum/activity/detail.scss
@@ -0,0 +1,421 @@
+.activity-detail-page {
+  min-height: 100vh;
+  background-color: #050505;
+  color: #fff;
+  padding-bottom: 100px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  .loading-container, .error-container {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+    font-size: 16px;
+  }
+
+  /* Hero Section */
+  .hero-section {
+    position: relative;
+    height: 380px; /* Enlarge height */
+    width: 100%;
+    overflow: hidden;
+
+    .hero-bg {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .hero-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(to top, #050505 0%, rgba(5,5,5,0.6) 60%, rgba(0,0,0,0.2) 100%);
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 32px; /* More padding */
+      box-sizing: border-box;
+
+      .status-tag {
+        align-self: flex-start;
+        background: var(--primary-cyan, #00f0ff);
+        color: #000;
+        font-weight: 800;
+        padding: 6px 16px; /* Larger tag */
+        border-radius: 6px;
+        font-size: 16px; /* Larger font */
+        margin-bottom: 16px;
+        box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
+      }
+
+      .hero-title {
+        font-size: 36px; /* Larger title */
+        font-weight: 900;
+        color: #fff;
+        text-shadow: 0 4px 15px rgba(0,0,0,0.6);
+        line-height: 1.25;
+        letter-spacing: 0.5px;
+      }
+    }
+  }
+
+  .main-content {
+    padding: 0 32px; /* More side padding */
+    transform: translateY(-30px); /* Larger overlap */
+    position: relative;
+    z-index: 10;
+  }
+
+  /* Info Grid */
+  .info-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px; /* More gap */
+    margin-bottom: 40px;
+
+    .info-card {
+      background: rgba(255, 255, 255, 0.08); /* Slightly lighter for contrast */
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      border-radius: 20px; /* Rounder */
+      padding: 20px; /* More padding */
+      display: flex;
+      align-items: center;
+      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+
+      .info-text {
+        margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+
+        .label {
+          font-size: 14px; /* Larger label */
+          color: rgba(255,255,255,0.6);
+          margin-bottom: 6px;
+        }
+
+        .value {
+          font-size: 18px; /* Larger value */
+          color: #fff;
+          font-weight: 600;
+          letter-spacing: 0.3px;
+        }
+      }
+    }
+  }
+
+  /* Stats Section */
+  .stats-section {
+    background: #111;
+    border-radius: 24px;
+    padding: 28px; /* More padding */
+    margin-bottom: 40px;
+    border: 1px solid rgba(255,255,255,0.08);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
+
+    .stats-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-bottom: 20px;
+
+      .stats-title {
+        font-size: 20px; /* Larger title */
+        font-weight: 700;
+        color: #fff;
+      }
+
+      .stats-count {
+        .current {
+          font-size: 32px; /* Larger numbers */
+          font-weight: 800;
+          color: var(--primary-cyan, #00f0ff);
+        }
+        .divider {
+          font-size: 20px;
+          color: #666;
+          margin: 0 6px;
+        }
+        .max {
+          font-size: 20px;
+          color: #888;
+        }
+      }
+    }
+
+    .progress-bar-container {
+      height: 12px; /* Thicker bar */
+      background: rgba(255,255,255,0.15);
+      border-radius: 6px;
+      position: relative;
+      overflow: hidden;
+
+      .progress-bar {
+        height: 100%;
+        background: linear-gradient(90deg, #00f0ff, #bd00ff);
+        border-radius: 6px;
+        transition: width 0.5s ease-out;
+        box-shadow: 0 0 10px rgba(189, 0, 255, 0.4);
+      }
+      
+      .progress-glow {
+        position: absolute;
+        top: 0;
+        width: 15px;
+        height: 100%;
+        background: #fff;
+        filter: blur(6px);
+        opacity: 0.9;
+        transform: translateX(-50%);
+        transition: left 0.5s ease-out;
+      }
+    }
+  }
+
+  /* Detail Section */
+  .detail-section {
+    padding-bottom: 40px;
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 30px;
+
+      .title-text {
+        font-size: 24px; /* Larger title */
+        font-weight: 800;
+        color: #fff;
+        margin-right: 20px;
+        white-space: nowrap;
+        letter-spacing: 0.5px;
+      }
+
+      .line {
+        flex: 1;
+        height: 2px; /* Thicker line */
+        background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
+      }
+    }
+
+    .rich-text-wrapper {
+      color: #ddd; /* Brighter text */
+      font-size: 18px; /* Base font size increased */
+      line-height: 1.9;
+      
+      image {
+        max-width: 100%;
+        border-radius: 16px;
+        margin: 20px 0;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+      }
+      
+      /* Markdown Styling */
+      h1, h2, h3, h4, h5, h6 { margin-top: 32px; margin-bottom: 20px; color: #fff; font-weight: 700; line-height: 1.4; }
+      h1 { font-size: 30px; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
+      h2 { font-size: 26px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px; }
+      h3 { font-size: 22px; }
+      
+      p { margin-bottom: 20px; }
+      
+      strong { font-weight: 800; color: #fff; }
+      em { font-style: italic; color: #bbb; }
+      del { text-decoration: line-through; color: #777; }
+      
+      ul, ol { margin-bottom: 20px; padding-left: 24px; }
+      li { margin-bottom: 10px; list-style-position: outside; }
+      ul li { list-style-type: disc; }
+      ol li { list-style-type: decimal; }
+      
+      blockquote {
+        border-left: 5px solid var(--primary-cyan, #00f0ff);
+        background: rgba(255, 255, 255, 0.08);
+        padding: 16px 20px;
+        margin: 24px 0;
+        border-radius: 8px;
+        color: #ccc;
+        font-style: italic;
+        font-size: 17px;
+        
+        p { margin-bottom: 0; }
+      }
+
+      
+      a { color: var(--primary-cyan, #00f0ff); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
+      
+      hr {
+          height: 1px;
+          background: rgba(255,255,255,0.1);
+          border: none;
+          margin: 24px 0;
+      }
+      
+      table {
+          width: 100%;
+          border-collapse: collapse;
+          margin: 16px 0;
+          font-size: 14px;
+          overflow-x: auto;
+          display: block;
+          
+          th, td {
+              border: 1px solid rgba(255,255,255,0.1);
+              padding: 10px;
+              text-align: left;
+          }
+          
+          th {
+              background: rgba(255,255,255,0.05);
+              font-weight: 700;
+              color: #fff;
+          }
+          
+          tr:nth-child(even) {
+              background: rgba(255,255,255,0.02);
+          }
+      }
+
+      code {
+          background: rgba(255,255,255,0.1);
+          padding: 3px 6px;
+          border-radius: 4px;
+          font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+          color: #ff7875;
+          font-size: 14px;
+          margin: 0 4px;
+      }
+      
+      pre {
+          background: #161616;
+          padding: 16px;
+          border-radius: 12px;
+          overflow-x: auto;
+          margin: 16px 0;
+          border: 1px solid #333;
+          box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+          
+          code { 
+              background: transparent; 
+              color: #a6e22e; 
+              padding: 0; 
+              font-size: 14px; 
+              margin: 0;
+              white-space: pre;
+          }
+      }
+    }
+  }
+
+  /* Footer Action Bar */
+  .footer-action-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(10, 10, 10, 0.95); /* More opaque */
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    padding: 20px 32px; /* More padding */
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid rgba(255,255,255,0.15);
+    z-index: 100;
+    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
+
+    .left-info {
+      display: flex;
+      flex-direction: column;
+
+      .price {
+        font-size: 28px; /* Larger price */
+        font-weight: 800;
+        color: var(--primary-cyan, #00f0ff);
+        text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
+      }
+
+      .desc {
+        font-size: 14px; /* Larger desc */
+        color: #999;
+        margin-top: 4px;
+      }
+    }
+
+    .action-btn {
+      margin: 0;
+      padding: 0 48px;
+      height: 64px; /* Taller button */
+      line-height: 64px;
+      border-radius: 32px;
+      font-size: 20px; /* Larger font */
+      font-weight: 800;
+      border: none;
+      
+      &.active {
+        background: linear-gradient(90deg, #00f0ff, #00b96b);
+        color: #000;
+        box-shadow: 0 6px 20px rgba(0, 240, 255, 0.4);
+        
+        &:active {
+          transform: scale(0.98);
+        }
+      }
+      
+      &.disabled {
+        background: rgba(255,255,255,0.15);
+        color: #777;
+      }
+    }
+  }
+}
+
+/* Signup Form Styles */
+.signup-form {
+  .form-field-wrapper {
+    
+    &.custom-field {
+      padding: 12px 24px;
+      position: relative;
+      background-color: #fff; /* Ensure white background inside modal */
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 24px;
+        right: 0;
+        height: 1px;
+        background-color: #f0f0f0;
+        transform: scaleY(0.5);
+      }
+
+      .field-label {
+        font-size: 28px; 
+        color: #333;
+        margin-bottom: 16px;
+        
+        .required {
+          color: #ff4949;
+          margin-right: 4px;
+        }
+      }
+      
+      .at-radio::before, .at-radio::after,
+      .at-checkbox::before, .at-checkbox::after,
+      .at-textarea::after {
+          display: none;
+      }
+      
+      .at-textarea {
+          padding: 0;
+          background: transparent;
+          border: none;
+      }
+    }
+  }
+}
--- a/miniprogram/src/subpackages/forum/activity/detail.tsx
+++ b/miniprogram/src/subpackages/forum/activity/detail.tsx
@@ -0,0 +1,387 @@
+import React, { useState, useEffect } from 'react'
+import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
+import { View, Text, Image, Button, Picker } from '@tarojs/components'
+import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtInput, AtTextarea, AtRadio, AtCheckbox } from 'taro-ui'
+import { getActivityDetail, signupActivity } from '../../../api'
+import MarkdownReader from '../../../components/MarkdownReader'
+import './detail.scss'
+
+const ActivityDetail = () => {
+  const router = useRouter()
+  const { id } = router.params
+  
+  const [activity, setActivity] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [signupPercentage, setSignupPercentage] = useState(0)
+
+  // Signup Form State
+  const [showSignupModal, setShowSignupModal] = useState(false)
+  const [formData, setFormData] = useState<any>({})
+
+  // Function to refresh data, can be used in useDidShow
+  const refreshData = () => {
+    if (id && id !== 'undefined' && id !== 'null' && !isNaN(Number(id))) {
+        fetchDetail()
+    } else {
+        setLoading(false)
+        setActivity(null)
+    }
+  }
+
+  useDidShow(() => {
+    refreshData()
+  })
+
+  useEffect(() => {
+    refreshData()
+  }, [id])
+
+  const fetchDetail = async () => {
+    try {
+      const res = await getActivityDetail(Number(id))
+      const data = res.data || res
+      console.log('Activity Detail Data:', data) // Debug Log
+      console.log('Current Signups:', data.current_signups) // Debug Log
+      setActivity(data)
+      
+      // Calculate signup progress
+      if (data.max_participants > 0) {
+          const percent = Math.min(100, Math.round((data.current_signups || 0) / data.max_participants * 100))
+          setSignupPercentage(percent)
+      }
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSignup = async () => {
+    const token = Taro.getStorageSync('token')
+    if (!token) {
+        Taro.showToast({ title: '请先登录', icon: 'none' })
+        // Optional: Redirect to login
+        // Taro.navigateTo({ url: '/pages/user/login' })
+        return
+    }
+
+    // Check if form config exists
+    if (activity.signup_form_config && activity.signup_form_config.length > 0) {
+        setFormData({}) // Reset form
+        setShowSignupModal(true)
+        return
+    }
+    
+    // Check if already unpaid (resume payment)
+    if (activity.my_signup_status === 'unpaid' && activity.my_order_id) {
+        Taro.navigateTo({ url: `/pages/order/payment?id=${activity.my_order_id}` })
+        return
+    }
+
+    // Direct signup if no config
+    submitSignup({})
+  }
+
+  const submitSignup = async (data: any) => {
+    setSubmitting(true)
+    try {
+        const res = await signupActivity(Number(id), { signup_info: data })
+        
+        // Handle payment if order_id is returned
+        if (res.order_id) {
+            Taro.showToast({ title: '即将跳转支付', icon: 'none' })
+            setShowSignupModal(false)
+            setTimeout(() => {
+                Taro.navigateTo({ url: `/pages/order/payment?id=${res.order_id}` })
+            }, 1500)
+            return
+        }
+
+        Taro.showToast({ title: '报名成功', icon: 'success' })
+        setShowSignupModal(false)
+        fetchDetail() // Refresh status
+    } catch (error: any) {
+        console.error(error)
+        // Request utility already handles error toasts
+        if (error?.statusCode === 400) {
+            // If likely already signed up, refresh to update UI
+            fetchDetail()
+            setShowSignupModal(false)
+        }
+    } finally {
+        setSubmitting(false)
+    }
+  }
+
+  /**
+   * 处理表单字段内容改变的事件
+   * 必须返回最新的 value，以修复 Taro UI 中 AtInput 光标会跑到最前面的 Bug
+   * @param {string} fieldName - 表单字段名
+   * @param {any} value - 表单输入的最新的值
+   * @returns {any} 返回最新的值
+   */
+  const handleFormChange = (fieldName, value) => {
+      setFormData(prev => ({
+          ...prev,
+          [fieldName]: value
+      }))
+      return value // 修复 Taro UI AtInput 光标跳动问题：必须返回 value
+  }
+
+  const handleModalConfirm = () => {
+      // Validate
+      if (activity.signup_form_config && Array.isArray(activity.signup_form_config)) {
+          for (const field of activity.signup_form_config) {
+              // Defensive programming: skip invalid fields
+              if (!field || typeof field !== 'object') continue
+              
+              if (field.required && !formData[field.name]) {
+                  Taro.showToast({ title: `请填写${field.label}`, icon: 'none' })
+                  return
+              }
+          }
+      }
+      submitSignup(formData)
+  }
+
+  useShareAppMessage(() => {
+    return {
+      title: activity?.title || '社区活动',
+      path: `/subpackages/forum/activity/detail?id=${id}`,
+      imageUrl: activity?.display_banner_url || activity?.banner_url || activity?.cover_image
+    }
+  })
+
+  useShareTimeline(() => {
+    return {
+      title: activity?.title || '社区活动',
+      query: `id=${id}`,
+      imageUrl: activity?.display_banner_url || activity?.banner_url || activity?.cover_image
+    }
+  })
+
+  if (loading) return <View className='loading-container'><Text>Loading...</Text></View>
+  if (!activity) return <View className='error-container'><Text>活动不存在</Text></View>
+
+  const isFull = activity.max_participants > 0 && (activity.current_signups || 0) >= activity.max_participants
+  const isEnded = new Date(activity.end_time) < new Date()
+  
+  const hasConfirmed = activity.has_signed_up
+  const isPending = activity.my_signup_status === 'pending'
+  const isUnpaid = activity.my_signup_status === 'unpaid'
+  const isPaid = activity.is_paid
+
+  const canSignup = activity.is_active && !isEnded && 
+    (
+        (!hasConfirmed && !isPending && !isUnpaid && !isFull) || 
+        (isUnpaid && isPaid)
+    )
+
+  return (
+    <View className='activity-detail-page'>
+      {/* Hero Banner */}
+      <View className='hero-section'>
+        <Image 
+            src={activity.display_banner_url || activity.banner_url || activity.cover_image || 'https://via.placeholder.com/800x600'} 
+            mode='aspectFill' 
+            className='hero-bg' 
+        />
+        <View className='hero-overlay'>
+            <View className='status-tag'>
+                {isEnded ? '已结束' : (isFull ? '名额已满' : '报名中')}
+            </View>
+            <Text className='hero-title'>{activity.title}</Text>
+        </View>
+      </View>
+
+      <View className='main-content'>
+        {/* Info Cards */}
+        <View className='info-grid'>
+            <View className='info-card time'>
+                <AtIcon value='clock' size='24' color='#00f0ff' />
+                <View className='info-text'>
+                    <Text className='label'>开始时间</Text>
+                    <Text className='value'>{new Date(activity.start_time).toLocaleString()}</Text>
+                </View>
+            </View>
+            <View className='info-card location'>
+                <AtIcon value='map-pin' size='24' color='#bd00ff' />
+                <View className='info-text'>
+                    <Text className='label'>活动地点</Text>
+                    <Text className='value'>{activity.location || '线上直播'}</Text>
+                </View>
+            </View>
+        </View>
+
+        {/* Signup Stats */}
+        <View className='stats-section'>
+            <View className='stats-header'>
+                <Text className='stats-title'>报名进度</Text>
+                <Text className='stats-count'>
+                    <Text className='current'>{activity.current_signups || 0}</Text>
+                    <Text className='divider'>/</Text>
+                    <Text className='max'>{activity.max_participants > 0 ? activity.max_participants : '∞'}</Text>
+                </Text>
+            </View>
+            <View className='progress-bar-container'>
+                <View className='progress-bar' style={{width: `${signupPercentage}%`}} />
+                <View className='progress-glow' style={{left: `${signupPercentage}%`}} />
+            </View>
+        </View>
+
+        {/* Detail Content */}
+        <View className='detail-section'>
+            <View className='section-header'>
+                <Text className='title-text'>活动详情</Text>
+                <View className='line' />
+            </View>
+            <View className='rich-text-wrapper'>
+                <MarkdownReader content={activity.description} themeColor='#00f0ff' />
+            </View>
+        </View>
+      </View>
+
+      {/* Footer Action Bar */}
+      <View className='footer-action-bar'>
+        <View className='left-info'>
+            <Text className='price'>
+                {Number(activity.price) > 0 ? `¥${activity.price}` : '免费'}
+            </Text>
+            <Text className='desc'>限时活动</Text>
+        </View>
+        <Button 
+            className={`action-btn ${canSignup ? 'active' : 'disabled'}`}
+            disabled={!canSignup || submitting}
+            onClick={handleSignup}
+        >
+            {submitting ? '提交中...' : (
+                hasConfirmed ? '您已报名' : (
+                    isPending ? '审核中' : (
+                        isUnpaid ? '去支付' : (
+                            isEnded ? '活动已结束' : (
+                                isFull ? '名额已满' : '立即报名'
+                            )
+                        )
+                    )
+                )
+            )}
+        </Button>
+      </View>
+
+      {/* Signup Form Modal */}
+      <AtModal isOpened={showSignupModal} onClose={() => setShowSignupModal(false)}>
+        <AtModalHeader>填写报名信息</AtModalHeader>
+        <AtModalContent>
+            <View className='signup-form'>
+                {/* 修复小程序原生组件穿透问题：只在 modal 打开时渲染输入组件 */}
+                {showSignupModal && activity.signup_form_config && Array.isArray(activity.signup_form_config) && activity.signup_form_config.map((field, idx) => {
+                    // Defensive programming: skip invalid fields or known bad data
+                    if (!field || typeof field !== 'object' || field.label === '自定义报名配置') return null
+                    
+                    if (field.type === 'select') {
+                        const currentOption = field.options?.find(opt => opt.value === formData[field.name])
+                        return (
+                            <View key={idx} className='form-field-wrapper'>
+                                <Picker 
+                                    mode='selector' 
+                                    range={field.options || []} 
+                                    rangeKey='label'
+                                    onChange={(e) => {
+                                        const index = e.detail.value
+                                        const selected = field.options?.[index]
+                                        if (selected) {
+                                            handleFormChange(field.name, selected.value)
+                                        }
+                                    }}
+                                >
+                                    <AtInput
+                                        name={field.name}
+                                        title={field.label}
+                                        type='text'
+                                        placeholder={field.placeholder || `请选择${field.label}`}
+                                        value={currentOption ? currentOption.label : ''}
+                                        editable={false}
+                                        required={field.required}
+                                    />
+                                </Picker>
+                            </View>
+                        )
+                    }
+
+                    if (field.type === 'radio') {
+                        return (
+                            <View key={idx} className='form-field-wrapper custom-field'>
+                                <View className='field-label'>
+                                    {field.required && <Text className='required'>*</Text>}
+                                    {field.label}
+                                </View>
+                                <AtRadio
+                                    options={field.options || []}
+                                    value={formData[field.name]}
+                                    onClick={(val) => handleFormChange(field.name, val)}
+                                />
+                            </View>
+                        )
+                    }
+
+                    if (field.type === 'checkbox') {
+                        return (
+                            <View key={idx} className='form-field-wrapper custom-field'>
+                                <View className='field-label'>
+                                    {field.required && <Text className='required'>*</Text>}
+                                    {field.label}
+                                </View>
+                                <AtCheckbox
+                                    options={field.options || []}
+                                    selectedList={formData[field.name] || []}
+                                    onChange={(val) => handleFormChange(field.name, val)}
+                                />
+                            </View>
+                        )
+                    }
+
+                    if (field.type === 'textarea') {
+                        return (
+                            <View key={idx} className='form-field-wrapper custom-field'>
+                                <View className='field-label'>
+                                    {field.required && <Text className='required'>*</Text>}
+                                    {field.label}
+                                </View>
+                                <AtTextarea
+                                    value={formData[field.name] || ''}
+                                    onChange={(val) => handleFormChange(field.name, val)}
+                                    placeholder={field.placeholder || `请输入${field.label}`}
+                                    maxLength={500}
+                                />
+                            </View>
+                        )
+                    }
+
+                    return (
+                        <View key={idx} className='form-field-wrapper'>
+                            <AtInput
+                                name={field.name}
+                                title={field.label}
+                                type={field.type === 'tel' ? 'phone' : (field.type === 'number' ? 'number' : 'text')}
+                                placeholder={field.placeholder || `请输入${field.label}`}
+                                value={formData[field.name] || ''}
+                                onChange={(val) => handleFormChange(field.name, val)}
+                                required={field.required}
+                            />
+                        </View>
+                    )
+                })}
+            </View>
+        </AtModalContent>
+        <AtModalAction>
+            <Button onClick={() => setShowSignupModal(false)}>取消</Button>
+            <Button onClick={handleModalConfirm} style={{color: '#00b96b'}}>提交报名</Button>
+        </AtModalAction>
+      </AtModal>
+    </View>
+  )
+}
+
+export default ActivityDetail
--- a/miniprogram/src/subpackages/forum/activity/index.config.ts
+++ b/miniprogram/src/subpackages/forum/activity/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '社区活动',
+  enablePullDownRefresh: true
+})
--- a/miniprogram/src/subpackages/forum/activity/index.scss
+++ b/miniprogram/src/subpackages/forum/activity/index.scss
@@ -0,0 +1,164 @@
+.activity-page {
+  min-height: 100vh;
+  background-color: #050505;
+  padding-bottom: 40px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  .tabs-header {
+    background: rgba(10, 10, 10, 0.8);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    padding: 12px 24px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+    .tabs-bg {
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      display: flex;
+      padding: 4px;
+      
+      .tab {
+        flex: 1;
+        text-align: center;
+        font-size: 15px;
+        color: #888;
+        padding: 8px 0;
+        border-radius: 8px;
+        transition: all 0.3s;
+        font-weight: 500;
+  
+        &.active {
+          color: #000;
+          background: var(--primary-cyan, #00f0ff);
+          font-weight: 700;
+          box-shadow: 0 2px 8px rgba(0, 240, 255, 0.3);
+        }
+      }
+    }
+  }
+
+  .list-container {
+    padding: 24px;
+  }
+
+  .empty {
+    text-align: center;
+    color: #666;
+    padding: 80px 0;
+    font-size: 16px;
+  }
+
+  .activity-card {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 20px;
+    overflow: hidden;
+    margin-bottom: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    transition: transform 0.3s;
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    .card-cover-wrapper {
+      position: relative;
+      height: 200px;
+      width: 100%;
+      overflow: hidden;
+
+      .cover {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .status-tag {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        font-size: 12px;
+        padding: 4px 10px;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    .info {
+      padding: 20px;
+
+      .header {
+        margin-bottom: 12px;
+
+        .title {
+          font-size: 20px;
+          font-weight: 700;
+          color: #fff;
+          line-height: 1.4;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .meta {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 20px;
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            color: #999;
+            
+            .icon {
+                margin-right: 8px;
+                font-size: 14px;
+            }
+        }
+      }
+
+      .card-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 16px;
+          border-top: 1px solid rgba(255, 255, 255, 0.05);
+
+          .participants {
+              .highlight {
+                  color: var(--primary-cyan, #00f0ff);
+                  font-weight: 700;
+                  font-size: 16px;
+              }
+              .total {
+                  color: #666;
+                  font-size: 13px;
+                  margin-left: 2px;
+              }
+          }
+
+          .btn-view {
+              margin: 0;
+              background: rgba(255, 255, 255, 0.1);
+              color: #fff;
+              font-size: 14px;
+              padding: 0 16px;
+              height: 32px;
+              line-height: 32px;
+              border-radius: 16px;
+              border: none;
+          }
+      }
+    }
+  }
+}
--- a/miniprogram/src/subpackages/forum/activity/index.tsx
+++ b/miniprogram/src/subpackages/forum/activity/index.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react'
+import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro'
+import { View, Text, Image, Button } from '@tarojs/components'
+import { getActivities, getMySignups } from '../../../api'
+import './index.scss'
+
+const ActivityList = () => {
+  const router = useRouter()
+  const [activities, setActivities] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
+  const [tab, setTab] = useState<'all' | 'mine'>('all')
+  const [mySignups, setMySignups] = useState<any[]>([])
+
+  useEffect(() => {
+    if (router.params.tab === 'mine') {
+        setTab('mine')
+    }
+  }, [router.params.tab])
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      if (tab === 'all') {
+        const res = await getActivities()
+        setActivities(res.results || res.data || (Array.isArray(res) ? res : []))
+      } else {
+        const res = await getMySignups()
+        setMySignups(res.results || res.data || (Array.isArray(res) ? res : []))
+      }
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+      Taro.stopPullDownRefresh()
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [tab])
+
+  useDidShow(() => {
+    fetchData()
+  })
+
+  usePullDownRefresh(() => {
+    fetchData()
+  })
+
+  const goDetail = (id) => {
+    Taro.navigateTo({ url: `/subpackages/forum/activity/detail?id=${id}` })
+  }
+
+  const getStatusText = (status) => {
+    const map = {
+      'upcoming': '即将开始',
+      'open': '报名中',
+      'ongoing': '进行中',
+      'ended': '已结束'
+    }
+    return map[status] || status
+  }
+
+  const renderList = (list) => {
+    if (list.length === 0 && !loading) return <View className='empty'>暂无活动</View>
+
+    return list.map(item => {
+        // Handle API structure differences
+        // For 'mine' tab, item is the signup record. activity_info is the full activity object.
+        let activity = tab === 'mine' ? (item.activity_info || item.activity || item) : item
+        
+        // Safety check if activity is just an ID (number)
+        if (typeof activity === 'number' || typeof activity === 'string') {
+             // In this case we can't render the card properly without the activity details
+             // Skip or render placeholder? Ideally we should have the object.
+             // If we just have ID, we can't show title/image etc.
+             // Let's create a placeholder object to avoid crash, but it won't show much info.
+             activity = { id: activity, title: '加载中...', start_time: new Date().toISOString() }
+        }
+
+        if (!activity || !activity.id) return null
+        
+        return (
+          <View key={activity.id} className='activity-card' onClick={() => goDetail(activity.id)}>
+            <View className='card-cover-wrapper'>
+                <Image 
+                    src={activity.display_banner_url || activity.banner_url || activity.cover_image || 'https://via.placeholder.com/350x150'} 
+                    mode='aspectFill' 
+                    className='cover' 
+                />
+                <View className='status-tag'>
+                    {getStatusText(activity.status)}
+                </View>
+            </View>
+            
+            <View className='info'>
+              <View className='header'>
+                <Text className='title'>{activity.title}</Text>
+              </View>
+              <View className='meta'>
+                <View className='meta-item'>
+                    <Text className='icon'>📅</Text>
+                    <Text>{new Date(activity.start_time).toLocaleDateString()}</Text>
+                </View>
+                <View className='meta-item'>
+                    <Text className='icon'>📍</Text>
+                    <Text>{activity.location || '线上活动'}</Text>
+                </View>
+              </View>
+              
+              <View className='card-footer'>
+                 <View className='participants'>
+                    <Text className='highlight'>{activity.current_signups || 0}</Text>
+                    <Text className='total'>/{activity.max_participants > 0 ? activity.max_participants : '∞'} 已报名</Text>
+                 </View>
+                 <Button className='btn-view'>查看详情</Button>
+              </View>
+            </View>
+          </View>
+        )
+    })
+  }
+
+  return (
+    <View className='activity-page'>
+      <View className='tabs-header'>
+        <View className='tabs-bg'>
+            <View className={`tab ${tab === 'all' ? 'active' : ''}`} onClick={() => setTab('all')}>精彩活动</View>
+            <View className={`tab ${tab === 'mine' ? 'active' : ''}`} onClick={() => setTab('mine')}>我的报名</View>
+        </View>
+      </View>
+
+      <View className='list-container'>
+        {renderList(tab === 'all' ? activities : mySignups)}
+      </View>
+    </View>
+  )
+}
+
+export default ActivityList
--- 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,210 @@
+.create-topic-page {
+  min-height: 100vh;
+  background-color: #000;
+  color: #fff;
+
+  .content-wrapper {
+    padding: 20px;
+    padding-bottom: 40px;
+  }
+
+  .header-actions {
+      display: flex;
+      margin-bottom: 20px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 8px;
+      padding: 4px;
+
+      .action-item {
+          flex: 1;
+          text-align: center;
+          padding: 8px 0;
+          font-size: 14px;
+          color: #888;
+          border-radius: 6px;
+          transition: all 0.3s;
+
+          &.active {
+              background: #333;
+              color: #fff;
+              font-weight: 600;
+          }
+      }
+  }
+
+  .preview-container {
+      margin-bottom: 30px;
+      background: #111;
+      padding: 20px;
+      border-radius: 12px;
+      border: 1px solid #333;
+
+      .preview-title {
+          font-size: 20px;
+          font-weight: bold;
+          margin-bottom: 16px;
+          border-bottom: 1px solid #333;
+          padding-bottom: 10px;
+      }
+
+      .markdown-body {
+          font-size: 15px;
+          line-height: 1.6;
+          color: #e0e0e0;
+
+          image {
+            max-width: 100%;
+            border-radius: 8px;
+            margin: 10px 0;
+          }
+
+          h1, h2, h3, h4, h5, h6 { margin-top: 24px; margin-bottom: 12px; color: #fff; font-weight: 700; line-height: 1.4; }
+          h1 { font-size: 22px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
+          h2 { font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; }
+          h3 { font-size: 16px; }
+          
+          p { margin-bottom: 14px; }
+          
+          strong { font-weight: 800; color: #fff; }
+          em { font-style: italic; color: #aaa; }
+          del { text-decoration: line-through; color: #666; }
+          
+          ul, ol { margin-bottom: 14px; padding-left: 20px; }
+          li { margin-bottom: 4px; list-style-position: outside; }
+          ul li { list-style-type: disc; }
+          ol li { list-style-type: decimal; }
+
+          blockquote {
+              border-left: 4px solid #00b96b;
+              background: rgba(255, 255, 255, 0.05);
+              padding: 10px 14px;
+              margin: 14px 0;
+              border-radius: 4px;
+              color: #bbb;
+              font-style: italic;
+              
+              p { margin-bottom: 0; }
+          }
+          
+          a { color: #00b96b; text-decoration: none; }
+          
+          hr {
+              height: 1px;
+              background: rgba(255,255,255,0.1);
+              border: none;
+              margin: 20px 0;
+          }
+          
+          table {
+              width: 100%;
+              border-collapse: collapse;
+              margin: 14px 0;
+              font-size: 13px;
+              overflow-x: auto;
+              display: block;
+              
+              th, td {
+                  border: 1px solid rgba(255,255,255,0.1);
+                  padding: 8px;
+                  text-align: left;
+              }
+              
+              th {
+                  background: rgba(255,255,255,0.05);
+                  font-weight: 700;
+                  color: #fff;
+              }
+          }
+          
+          code {
+              background: rgba(255,255,255,0.1);
+              padding: 2px 6px;
+              border-radius: 4px;
+              font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+              color: #ff7875;
+              margin: 0 2px;
+          }
+          
+          pre {
+              background: #161616;
+              padding: 16px;
+              border-radius: 8px;
+              overflow-x: auto;
+              margin: 16px 0;
+              border: 1px solid #333;
+              
+              code { 
+                  background: transparent; 
+                  color: #a6e22e; 
+                  padding: 0; 
+                  font-size: 13px; 
+                  margin: 0;
+                  white-space: pre;
+              }
+          }
+      }
+  }
+
+  .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,208 @@
+import React, { useState, useEffect } from 'react'
+import Taro, { useRouter } from '@tarojs/taro'
+import { View, Text, Input, Textarea, Button, Picker, ScrollView, RichText } from '@tarojs/components'
+import { createTopic, updateTopic, getTopicDetail, uploadMedia } from '../../../api'
+import { marked } from 'marked'
+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)
+  const [loading, setLoading] = useState(false)
+  const [isPreview, setIsPreview] = useState(false)
+
+  const categories = [
+    { key: 'discussion', label: '技术讨论' },
+    { key: 'help', label: '求助问答' },
+    { key: 'share', label: '经验分享' },
+  ]
+
+  useEffect(() => {
+    if (id) {
+        const fetchDetail = async () => {
+            Taro.showLoading({ title: '加载中...' })
+            try {
+                const res = await getTopicDetail(Number(id))
+                const topic = res.data || res
+                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)
+  }
+
+  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 = (typeof process !== 'undefined' && process.env && 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 {
+      if (id) {
+          await updateTopic(Number(id), {
+              title,
+              content,
+              category: categories[categoryIndex].key
+          })
+          Taro.showToast({ title: '更新成功', icon: 'success' })
+      } else {
+          const res = await createTopic({
+            title,
+            content,
+            category: categories[categoryIndex].key
+          })
+          
+          const topic = res.data || res
+          if (topic.status === 'pending') {
+              Taro.showToast({ title: '已提交，等待审核', icon: 'none', duration: 2000 })
+          } else {
+              Taro.showToast({ title: '发布成功', icon: 'success' })
+          }
+      }
+      
+      setTimeout(() => {
+        Taro.navigateBack()
+      }, 1500)
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: id ? '更新失败' : '发布失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <ScrollView scrollY className='create-topic-page'>
+      <View className='content-wrapper'>
+        <View className='header-actions'>
+            <View 
+                className={`action-item ${!isPreview ? 'active' : ''}`} 
+                onClick={() => setIsPreview(false)}
+            >
+                编辑
+            </View>
+            <View 
+                className={`action-item ${isPreview ? 'active' : ''}`} 
+                onClick={() => setIsPreview(true)}
+            >
+                预览
+            </View>
+        </View>
+
+        {!isPreview ? (
+            <>
+                <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>
+            </>
+        ) : (
+            <View className='preview-container'>
+                <View className='preview-title'>{title || '无标题'}</View>
+                <View className='markdown-body'>
+                    <RichText nodes={(marked.parse(content || '无内容') as string).replace(/<img/g, '<img style="max-width:100%;border-radius:8px;"')} />
+                </View>
+            </View>
+        )}
+
+        <Button 
+            className={`submit-btn ${loading ? 'disabled' : ''}`}
+            onClick={handleSubmit}
+            disabled={loading}
+        >
+            {loading ? (id ? '更新中...' : '发布中...') : (id ? '更新话题' : '发布话题')}
+        </Button>
+      </View>
+    </ScrollView>
+  )
+}
+
+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,629 @@
+.forum-detail-page {
+  min-height: 100vh;
+  background-color: #121212;
+  padding-bottom: 90px;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  .topic-card {
+    background: #1e1e1e;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    padding: 24px 20px;
+    margin-bottom: 24px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+
+    .header {
+      margin-bottom: 24px;
+
+      .title {
+        font-size: 32px; /* Increased from 28px */
+        font-weight: 800;
+        color: #fff;
+        margin-bottom: 20px;
+        line-height: 1.4;
+        letter-spacing: -0.5px;
+      }
+
+      .meta {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 12px;
+        color: #888;
+        font-size: 14px; /* Increased from 13px */
+
+        .author {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          background: rgba(255,255,255,0.05);
+          padding: 6px 12px 6px 6px;
+          border-radius: 20px;
+
+          .avatar {
+            width: 32px; /* Larger avatar */
+            height: 32px;
+            border-radius: 50%;
+            border: 1px solid rgba(255,255,255,0.1);
+          }
+          
+          .verified {
+             color: #00b96b;
+             font-size: 16px;
+             margin-left: 2px;
+          }
+        }
+
+        .like-btn {
+          display: flex;
+          align-items: center;
+          margin-left: auto; /* Push to right or keep left */
+          padding: 6px 14px;
+          border-radius: 20px;
+          background-color: rgba(255, 255, 255, 0.08);
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          transition: all 0.3s;
+
+          &.active {
+            background-color: rgba(255, 77, 79, 0.15);
+            border-color: rgba(255, 77, 79, 0.3);
+            
+            text { color: #ff4d4f !important; }
+          }
+
+          text {
+            color: #888;
+            font-size: 14px;
+            margin-left: 6px;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    .content {
+      font-size: 20px; /* Increased from 18px */
+      line-height: 1.9; /* Improved readability */
+      color: #e0e0e0;
+      letter-spacing: 0.3px;
+      
+      image {
+        max-width: 100%;
+        border-radius: 12px;
+        margin: 24px 0;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      }
+      
+      /* Markdown styling enhancements */
+      h1, h2, h3, h4, h5, h6 { margin-top: 32px; margin-bottom: 20px; color: #fff; font-weight: 700; line-height: 1.4; }
+      h1 { font-size: 28px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
+      h2 { font-size: 24px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
+      h3 { font-size: 22px; }
+      h4 { font-size: 20px; }
+      h5 { font-size: 18px; color: #ddd; }
+      
+      p { margin-bottom: 24px; }
+      
+      strong { font-weight: 800; color: #fff; }
+      em { font-style: italic; color: #aaa; }
+      del { text-decoration: line-through; color: #666; }
+      
+      ul, ol { margin-bottom: 24px; padding-left: 20px; }
+      li { margin-bottom: 8px; list-style-position: outside; }
+      ul li { list-style-type: disc; }
+      ol li { list-style-type: decimal; }
+      
+      /* Task lists */
+      li input[type="checkbox"] { margin-right: 8px; }
+
+      blockquote {
+          border-left: 4px solid #00b96b;
+          background: rgba(255, 255, 255, 0.05);
+          padding: 16px 20px;
+          margin: 24px 0;
+          border-radius: 4px;
+          color: #bbb;
+          font-size: 18px;
+          font-style: italic;
+          
+          p { margin-bottom: 0; }
+      }
+      
+      a { color: #00b96b; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
+      
+      hr {
+          height: 1px;
+          background: rgba(255,255,255,0.1);
+          border: none;
+          margin: 40px 0;
+      }
+      
+      table {
+          width: 100%;
+          border-collapse: collapse;
+          margin: 24px 0;
+          font-size: 16px;
+          overflow-x: auto;
+          display: block;
+          
+          th, td {
+              border: 1px solid rgba(255,255,255,0.1);
+              padding: 12px;
+              text-align: left;
+          }
+          
+          th {
+              background: rgba(255,255,255,0.05);
+              font-weight: 700;
+              color: #fff;
+          }
+          
+          tr:nth-child(even) {
+              background: rgba(255,255,255,0.02);
+          }
+      }
+
+      code {
+          background: rgba(255,255,255,0.1);
+          padding: 4px 8px;
+          border-radius: 4px;
+          font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+          color: #ff7875;
+          font-size: 16px;
+          margin: 0 4px;
+      }
+      
+      pre {
+          background: #161616;
+          padding: 20px;
+          border-radius: 12px;
+          overflow-x: auto;
+          margin: 24px 0;
+          border: 1px solid #333;
+          box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+          
+          code { 
+              background: transparent; 
+              color: #a6e22e; 
+              padding: 0; 
+              font-size: 15px; 
+              margin: 0;
+              white-space: pre;
+          }
+      }
+    }
+
+    .media-list {
+      margin-top: 24px;
+      
+      .media-item {
+        margin-bottom: 16px;
+        
+        video {
+            width: 100%;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        }
+      }
+    }
+  }
+
+  .replies-section {
+    padding: 0 16px;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: 700;
+      margin-bottom: 20px;
+      padding-left: 12px;
+      border-left: 4px solid #00b96b;
+      color: #fff;
+    }
+
+    .reply-card {
+      background: #1e1e1e;
+      border-radius: 12px;
+      padding: 24px; /* Increased padding */
+      margin-bottom: 24px;
+      display: flex;
+      gap: 16px; /* Increased gap */
+      border: 1px solid rgba(255,255,255,0.03);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+
+      .avatar {
+        width: 44px; /* Larger avatar */
+        height: 44px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        border: 1px solid rgba(255,255,255,0.1);
+      }
+
+      .reply-main {
+        flex: 1;
+
+        .reply-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+            margin-bottom: 12px;
+            
+            .nickname {
+                font-weight: 600;
+                color: #ddd;
+                font-size: 16px; /* Larger nickname */
+            }
+            
+            .time {
+                color: #666;
+                font-size: 13px;
+                background: rgba(255,255,255,0.05);
+                padding: 3px 8px;
+                border-radius: 4px;
+            }
+        }
+
+        .reply-content {
+            font-size: 17px; /* Larger reply text */
+            color: #ccc;
+            line-height: 1.8;
+            
+            image {
+                max-width: 100%;
+                border-radius: 8px;
+                margin-top: 14px;
+            }
+        }
+
+        .reply-actions {
+            display: flex;
+            align-items: center;
+            margin-top: 12px;
+
+            .reply-like-btn {
+                display: flex;
+                align-items: center;
+                margin-right: 16px;
+                padding: 4px 10px;
+                border-radius: 12px;
+                background-color: rgba(255, 255, 255, 0.03);
+                transition: all 0.3s;
+
+                &.active {
+                    background-color: rgba(255, 77, 79, 0.12);
+                    text { color: #ff4d4f !important; }
+                }
+
+                text {
+                    font-size: 12px;
+                    color: #888;
+                    margin-left: 4px;
+                    font-weight: 500;
+                }
+            }
+
+            .reply-to-btn {
+                margin-right: 16px;
+                padding: 4px 10px;
+                background: rgba(255,255,255,0.05);
+                border-radius: 12px;
+                
+                text {
+                    font-size: 12px;
+                    color: #aaa;
+                }
+            }
+        }
+      }
+    }
+  }
+
+  .reply-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(20, 20, 20, 0.95); /* More opaque */
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    padding: 16px 20px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    border-top: 1px solid rgba(255,255,255,0.1);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    z-index: 100;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+
+    .input-wrapper {
+      flex: 1;
+      background: rgba(255,255,255,0.1);
+      border-radius: 26px;
+      padding: 14px 20px; /* Larger input area */
+      transition: all 0.3s;
+      border: 1px solid transparent;
+
+      &:focus-within {
+          background: rgba(255,255,255,0.15);
+          border-color: rgba(0, 185, 107, 0.5);
+      }
+      
+      input {
+          color: #fff;
+          width: 100%;
+          font-size: 18px; /* Larger text */
+      }
+    }
+
+    .action-btn {
+        width: 48px; /* Larger touch target */
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        transition: background 0.2s;
+
+        &:active {
+            background: rgba(255,255,255,0.1);
+        }
+    }
+
+    .send-btn {
+        color: #00b96b;
+        font-weight: 700;
+        font-size: 16px;
+        padding: 0 8px;
+    }
+  }
+    
+  /* Expert Modal Styles - Tech & Dark Theme */
+  .at-float-layout {
+      .at-float-layout__overlay {
+          background-color: rgba(0, 0, 0, 0.8);
+          backdrop-filter: blur(8px);
+      }
+
+      .at-float-layout__container {
+          background-color: #0f1216 !important; /* Deep dark tech background */
+          border-top: 1px solid rgba(0, 185, 107, 0.3); /* Tech green border */
+          box-shadow: 0 -10px 40px rgba(0, 185, 107, 0.15);
+          border-radius: 24px 24px 0 0; /* More rounded top */
+
+          .layout-header {
+              background-color: #15191f;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+              padding: 18px 24px;
+              
+              .layout-header__title {
+                  color: #00b96b; /* Tech green */
+                  font-size: 18px;
+                  font-weight: 700;
+                  letter-spacing: 1px;
+                  text-shadow: 0 0 10px rgba(0, 185, 107, 0.3);
+              }
+              
+              .layout-header__btn-close {
+                  color: #666;
+              }
+          }
+          
+          .layout-body {
+              background-color: #0f1216;
+              padding: 0;
+          }
+      }
+  }
+
+  .expert-modal-content {
+      padding: 30px 24px 60px;
+      color: #fff;
+      background: radial-gradient(circle at 50% 10%, rgba(0, 185, 107, 0.08), transparent 60%);
+
+      .expert-header {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 36px;
+          position: relative;
+          
+          .avatar-container {
+              position: relative;
+              margin-bottom: 24px;
+              
+              .expert-avatar {
+                  width: 100px;
+                  height: 100px;
+                  border-radius: 50%;
+                  border: 2px solid #ffd700; /* Gold for expert */
+                  box-shadow: 0 0 30px rgba(255, 215, 0, 0.25), inset 0 0 10px rgba(255, 215, 0, 0.2);
+                  z-index: 2;
+                  position: relative;
+              }
+              
+              .avatar-ring {
+                  position: absolute;
+                  top: -12px; left: -12px; right: -12px; bottom: -12px;
+                  border-radius: 50%;
+                  border: 1px dashed rgba(255, 215, 0, 0.5);
+                  animation: spin 12s linear infinite;
+                  z-index: 1;
+                  
+                  &::after {
+                      content: '';
+                      position: absolute;
+                      top: -6px; left: -6px; right: -6px; bottom: -6px;
+                      border-radius: 50%;
+                      border: 1px solid rgba(0, 185, 107, 0.3); /* Outer green ring */
+                      animation: spin 8s reverse linear infinite;
+                  }
+              }
+          }
+          
+          .expert-info {
+              text-align: center;
+              
+              .expert-name {
+                  font-size: 26px;
+                  font-weight: 800;
+                  color: #fff;
+                  margin-bottom: 12px;
+                  text-shadow: 0 0 15px rgba(0, 185, 107, 0.5);
+                  letter-spacing: 0.5px;
+              }
+              
+              .expert-title-badge {
+                  display: inline-flex;
+                  align-items: center;
+                  gap: 8px;
+                  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
+                  padding: 6px 16px;
+                  border-radius: 20px;
+                  border: 1px solid rgba(255, 215, 0, 0.4);
+                  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
+                  
+                  .at-icon {
+                      text-shadow: 0 0 5px #ffd700;
+                  }
+                  
+                  text {
+                      font-size: 14px;
+                      color: #ffd700;
+                      font-weight: 700;
+                      letter-spacing: 1px;
+                  }
+              }
+          }
+      }
+      
+      .expert-skills-section {
+          margin-bottom: 30px;
+          background: rgba(255, 255, 255, 0.02);
+          border-radius: 20px;
+          padding: 24px;
+          border: 1px solid rgba(255, 255, 255, 0.06);
+          position: relative;
+          overflow: hidden;
+          
+          /* Tech corner accent */
+          &::before {
+              content: '';
+              position: absolute;
+              top: 0; left: 0;
+              width: 10px; height: 10px;
+              border-top: 2px solid #00b96b;
+              border-left: 2px solid #00b96b;
+              border-radius: 4px 0 0 0;
+          }
+          
+          &::after {
+              content: '';
+              position: absolute;
+              bottom: 0; right: 0;
+              width: 10px; height: 10px;
+              border-bottom: 2px solid #00b96b;
+              border-right: 2px solid #00b96b;
+              border-radius: 0 0 4px 0;
+          }
+          
+          .section-label {
+              display: flex;
+              align-items: center;
+              margin-bottom: 20px;
+              
+              .label-text {
+                  font-size: 15px;
+                  font-weight: 700;
+                  color: #00b96b;
+                  margin-right: 12px;
+                  text-transform: uppercase;
+                  letter-spacing: 1px;
+              }
+              
+              .label-line {
+                  flex: 1;
+                  height: 1px;
+                  background: linear-gradient(90deg, rgba(0, 185, 107, 0.5), transparent);
+                  opacity: 0.6;
+              }
+          }
+          
+          .skills-grid {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 12px;
+              
+              .skill-tag {
+                  display: flex;
+                  align-items: center;
+                  background: rgba(0, 185, 107, 0.08);
+                  padding: 8px 16px;
+                  border-radius: 6px;
+                  border: 1px solid rgba(0, 185, 107, 0.25);
+                  transition: all 0.3s;
+                  position: relative;
+                  overflow: hidden;
+                  
+                  /* Left accent bar */
+                  &::before {
+                      content: '';
+                      position: absolute;
+                      top: 0; left: 0; width: 3px; height: 100%;
+                      background: #00b96b;
+                      opacity: 0.6;
+                  }
+                  
+                  &:active {
+                      background: rgba(0, 185, 107, 0.2);
+                      transform: scale(0.98);
+                      box-shadow: 0 0 10px rgba(0, 185, 107, 0.2);
+                  }
+                  
+                  .skill-icon {
+                      width: 20px;
+                      height: 20px;
+                      margin-right: 8px;
+                      filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
+                  }
+                  
+                  .skill-text {
+                      font-size: 13px;
+                      color: #e0e0e0;
+                      font-weight: 500;
+                      letter-spacing: 0.5px;
+                  }
+              }
+          }
+      }
+      
+      .expert-action {
+          display: flex;
+          justify-content: center;
+          
+          .action-btn {
+              width: 100%;
+              height: 52px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              background: linear-gradient(135deg, #00b96b 0%, #009456 100%);
+              border-radius: 26px;
+              box-shadow: 0 4px 20px rgba(0, 185, 107, 0.3);
+              gap: 6px;
+              transition: all 0.3s;
+              border: 1px solid rgba(255, 255, 255, 0.1);
+              
+              &:active {
+                  transform: scale(0.98);
+                  box-shadow: 0 2px 10px rgba(0, 185, 107, 0.2);
+              }
+              
+              text {
+                  color: #fff;
+                  font-size: 16px;
+                  font-weight: 700;
+                  letter-spacing: 1px;
+              }
+          }
+      }
+  }
+}
--- a/miniprogram/src/subpackages/forum/detail/index.tsx
+++ b/miniprogram/src/subpackages/forum/detail/index.tsx
@@ -0,0 +1,380 @@
+import React, { useState, useEffect } from 'react'
+import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
+import { View, Text, Image, Video, Input, ScrollView } from '@tarojs/components'
+import { AtActivityIndicator, AtIcon, AtActionSheet, AtActionSheetItem, AtFloatLayout } from 'taro-ui'
+import { getTopicDetail, createReply, uploadMedia, getStarUsers, likeTopic, likeReply } from '../../../api'
+import MarkdownReader from '../../../components/MarkdownReader'
+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 [userInfo, setUserInfo] = useState<any>(null)
+  
+  // Star Users & Mention
+  const [starUsers, setStarUsers] = useState<any[]>([])
+  const [showStarUsers, setShowStarUsers] = useState(false)
+
+  // Expert Detail
+  const [showExpert, setShowExpert] = useState(false)
+  const [selectedExpert, setSelectedExpert] = useState<any>(null)
+
+  const fetchDetail = async () => {
+    try {
+      const res = await getTopicDetail(Number(id))
+      const topicData = res.data || res
+      setTopic(topicData)
+    } catch (error) {
+      console.error(error)
+      Taro.showToast({ title: '加载失败', icon: 'none' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const fetchStarUsers = async () => {
+      try {
+          const res = await getStarUsers()
+          // API might return array directly or { data: [] }
+          const users = Array.isArray(res) ? res : (res.data || [])
+          setStarUsers(users)
+      } catch (error) {
+          console.error('Fetch star users failed', error)
+      }
+  }
+
+  useEffect(() => {
+    const info = Taro.getStorageSync('userInfo')
+    if (info) setUserInfo(info)
+
+    if (id) {
+        fetchDetail()
+        fetchStarUsers()
+    }
+  }, [id])
+
+  useDidShow(() => {
+      if (id && !loading) {
+          fetchDetail()
+      }
+  })
+
+  const handleReplyToUser = (nickname) => {
+      const mentionText = `@${nickname} `
+      setReplyContent(prev => prev + mentionText)
+      setShowStarUsers(false)
+  }
+
+  const handleLikeTopic = async () => {
+    const token = Taro.getStorageSync('token')
+    if (!token) {
+        Taro.showToast({ title: '请先登录', icon: 'none' })
+        return
+    }
+    try {
+        const res = await likeTopic(topic.id)
+        const data = res.data || res
+        setTopic(prev => ({
+            ...prev,
+            is_liked: data.liked,
+            like_count: data.count
+        }))
+    } catch (error) {
+        Taro.showToast({ title: '操作失败', icon: 'none' })
+    }
+  }
+
+  const handleLikeReply = async (replyId) => {
+    const token = Taro.getStorageSync('token')
+    if (!token) {
+        Taro.showToast({ title: '请先登录', icon: 'none' })
+        return
+    }
+    try {
+        const res = await likeReply(replyId)
+        const data = res.data || res
+        setTopic(prev => ({
+            ...prev,
+            replies: prev.replies.map(r => {
+                if (r.id === replyId) {
+                    return { ...r, is_liked: data.liked, like_count: data.count }
+                }
+                return r
+            })
+        }))
+    } catch (error) {
+        Taro.showToast({ title: '操作失败', icon: 'none' })
+    }
+  }
+
+  // 分享给好友
+  useShareAppMessage(() => {
+    return {
+      title: topic?.title || '技术社区',
+      path: `/subpackages/forum/detail/index?id=${id}`
+    }
+  })
+
+  // 分享到朋友圈
+  useShareTimeline(() => {
+    return {
+      title: topic?.title || '技术社区',
+      query: `id=${id}`,
+      imageUrl: topic?.author_info?.avatar_url || 'https://via.placeholder.com/300x300?text=技术社区'
+    }
+  })
+
+  const handleReplyChange = (e) => {
+      setReplyContent(e.detail.value)
+  }
+
+  const handleEdit = () => {
+      Taro.navigateTo({
+          url: `/subpackages/forum/create/index?id=${id}`
+      })
+  }
+
+  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 = (typeof process !== 'undefined' && process.env && 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>
+
+  const showUserTitle = (e, user) => {
+      e.stopPropagation()
+      if (user.is_star || user.title) {
+          setSelectedExpert(user)
+          setShowExpert(true)
+      }
+  }
+
+  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>}
+            <Text className='title'>{topic.title}</Text>
+            
+            <View className='meta'>
+                    <View className='author' onClick={(e) => showUserTitle(e, topic.author_info)}>
+                        <Image className='avatar' src={topic.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
+                        <Text style={{fontWeight: 600, color: '#ccc'}}>{topic.author_info?.nickname}</Text>
+                        {topic.is_verified_owner && <AtIcon value='check-circle' size='14' color='#00b96b' />}
+                    </View>
+                    <Text>•</Text>
+                    <Text>{new Date(topic.created_at).toLocaleDateString()}</Text>
+                    <Text>•</Text>
+                    <View style={{display: 'flex', alignItems: 'center'}}>
+                        <AtIcon value='eye' size='14' color='#666' style={{marginRight: 4}} />
+                        <Text>{topic.view_count}</Text>
+                    </View>
+                    <View className={`like-btn ${topic.is_liked ? 'active' : ''}`} onClick={handleLikeTopic}>
+                        <AtIcon value={topic.is_liked ? 'heart-2' : 'heart'} size='18' color={topic.is_liked ? '#ff4d4f' : '#888'} />
+                        <Text>{topic.like_count || 0}</Text>
+                    </View>
+
+                    {userInfo && topic.author === userInfo.id && (
+                        <View onClick={handleEdit} style={{display: 'flex', alignItems: 'center', marginLeft: 'auto', padding: '6px 12px', background: 'rgba(0, 185, 107, 0.15)', borderRadius: 20}}>
+                            <AtIcon value='edit' size='14' color='#00b96b' />
+                            <Text style={{fontSize: 12, color: '#00b96b', marginLeft: 4, fontWeight: 600}}>编辑</Text>
+                        </View>
+                    )}
+                </View>
+        </View>
+        
+        <View className='content'>
+            <MarkdownReader content={topic.content} />
+        </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'} onClick={(e) => showUserTitle(e, reply.author_info)} />
+                <View className='reply-main'>
+                    <View className='reply-header'>
+                        <View style={{display: 'flex', flexDirection: 'column'}}>
+                             <View style={{display: 'flex', alignItems: 'center'}}>
+                                <Text className='nickname'>{reply.author_info?.nickname}</Text>
+                                {reply.is_pinned && <Text style={{color: '#ff4d4f', marginLeft: 4, fontSize: 10, border: '1px solid #ff4d4f', padding: '0 4px', borderRadius: 4}}>置顶</Text>}
+                             </View>
+                             <Text style={{fontSize: 10, color: '#666', marginTop: 2}}>#{idx + 1} • {new Date(reply.created_at).toLocaleDateString()}</Text>
+                        </View>
+                        <View className='reply-actions'>
+                            <View className={`reply-like-btn ${reply.is_liked ? 'active' : ''}`} onClick={() => handleLikeReply(reply.id)}>
+                                <AtIcon value={reply.is_liked ? 'heart-2' : 'heart'} size='14' color={reply.is_liked ? '#ff4d4f' : '#888'} />
+                                <Text>{reply.like_count || 0}</Text>
+                            </View>
+                            <View className='reply-to-btn' onClick={() => handleReplyToUser(reply.author_info?.nickname)}>
+                                <Text>回复</Text>
+                            </View>
+                            <AtIcon value='message' size='14' color='#666' />
+                        </View>
+                    </View>
+                    <View className='reply-content'>
+                        <MarkdownReader content={reply.content} />
+                    </View>
+                </View>
+            </View>
+        ))}
+      </View>
+      </View>
+      </ScrollView>
+
+      <View className='reply-bar'>
+        <View className='action-btn' onClick={handleUpload}>
+            <AtIcon value='image' size='20' color='#888' />
+        </View>
+        <View className='action-btn' onClick={() => setShowStarUsers(true)} style={{marginLeft: 0}}>
+            <AtIcon value='at' 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>
+
+      <AtActionSheet isOpened={showStarUsers} cancelText='取消' title='选择要@的技术专家' onCancel={() => setShowStarUsers(false)} onClose={() => setShowStarUsers(false)}>
+        {starUsers.map(user => (
+            <AtActionSheetItem key={user.id} onClick={() => handleReplyToUser(user.nickname)}>
+                <View style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                    <Image src={user.avatar_url || 'https://via.placeholder.com/30'} style={{width: 24, height: 24, borderRadius: 12, marginRight: 8}} />
+                    <Text>{user.nickname}</Text>
+                    <Text style={{fontSize: 10, color: '#999', marginLeft: 4}}>({user.title || '专家'})</Text>
+                </View>
+            </AtActionSheetItem>
+        ))}
+      </AtActionSheet>
+
+      <AtFloatLayout isOpened={showExpert} title="技术专家信息" onClose={() => setShowExpert(false)}>
+        {selectedExpert && (
+            <View className='expert-modal-content'>
+                <View className='expert-header'>
+                    <View className='avatar-container'>
+                        <Image src={selectedExpert.avatar_url} className='expert-avatar' />
+                        <View className='avatar-ring'></View>
+                    </View>
+                    <View className='expert-info'>
+                        <View className='expert-name'>{selectedExpert.nickname}</View>
+                        <View className='expert-title-badge'>
+                            <AtIcon value='sketch' size='14' color='#ffd700' />
+                            <Text>{selectedExpert.title || '技术专家'}</Text>
+                        </View>
+                    </View>
+                </View>
+                
+                {selectedExpert.skills && selectedExpert.skills.length > 0 && (
+                    <View className='expert-skills-section'>
+                        <View className='section-label'>
+                            <Text className='label-text'>擅长技能</Text>
+                            <View className='label-line'></View>
+                        </View>
+                        <View className='skills-grid'>
+                            {selectedExpert.skills.map((skill, idx) => (
+                                <View key={idx} className='skill-tag'>
+                                    {typeof skill === 'object' && skill.icon && <Image src={skill.icon} className='skill-icon' />}
+                                    <Text className='skill-text'>{typeof skill === 'object' ? skill.text : skill}</Text>
+                                </View>
+                            ))}
+                        </View>
+                    </View>
+                )}
+            </View>
+        )}
+      </AtFloatLayout>
+    </View>
+  )
+}
+
+export default ForumDetail