frum

miniprogram/src/subpackages/forum/detail/index.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import Taro, { useRouter, useShareAppMessage, useDidShow } from '@tarojs/taro'
 import { View, Text, Image, Video, RichText, Input, ScrollView } from '@tarojs/components'
-import { AtActivityIndicator, AtIcon } from 'taro-ui'
-import { getTopicDetail, createReply, uploadMedia } from '../../../api'
+import { AtActivityIndicator, AtIcon, AtActionSheet, AtActionSheetItem } from 'taro-ui'
+import { getTopicDetail, createReply, uploadMedia, getStarUsers } from '../../../api'
 import { marked } from 'marked'
 import './detail.scss'
 
@@ -16,6 +16,10 @@ const ForumDetail = () => {
   const [sending, setSending] = useState(false)
   const [htmlContent, setHtmlContent] = useState('')
   const [userInfo, setUserInfo] = useState<any>(null)
+  
+  // Star Users & Mention
+  const [starUsers, setStarUsers] = useState<any[]>([])
+  const [showStarUsers, setShowStarUsers] = useState(false)
 
   const fetchDetail = async () => {
     try {
@@ -38,12 +42,24 @@ const ForumDetail = () => {
     }
   }
 
+  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])
 
@@ -53,6 +69,12 @@ const ForumDetail = () => {
       }
   })
 
+  const handleReplyToUser = (nickname) => {
+      const mentionText = `@${nickname} `
+      setReplyContent(prev => prev + mentionText)
+      setShowStarUsers(false)
+  }
+
   useShareAppMessage(() => {
     return {
       title: topic?.title || '技术社区',
@@ -199,7 +221,12 @@ const ForumDetail = () => {
                              <Text className='nickname'>{reply.author_info?.nickname}</Text>
                              <Text style={{fontSize: 10, color: '#666', marginTop: 2}}>#{idx + 1} • {new Date(reply.created_at).toLocaleDateString()}</Text>
                         </View>
-                        <AtIcon value='message' size='14' color='#444' />
+                        <View style={{display: 'flex', alignItems: 'center'}}>
+                            <View onClick={() => handleReplyToUser(reply.author_info?.nickname)} style={{marginRight: 10, padding: '2px 6px', background: '#f0f0f0', borderRadius: 4}}>
+                                <Text style={{fontSize: 10, color: '#666'}}>回复</Text>
+                            </View>
+                            <AtIcon value='message' size='14' color='#444' />
+                        </View>
                     </View>
                     <View className='reply-content'>
                         {/* Simple markdown render for replies or just text if complex */}
@@ -216,6 +243,9 @@ const ForumDetail = () => {
         <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}
@@ -229,6 +259,18 @@ const ForumDetail = () => {
             {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>
     </View>
   )
 }