frum

frontend/src/pages/ForumDetail.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Typography, Card, Avatar, Tag, Space, Button, Divider, Input, message, Upload, Tooltip, Grid } from 'antd';
 import { UserOutlined, ClockCircleOutlined, EyeOutlined, CheckCircleFilled, LeftOutlined, UploadOutlined, EditOutlined } from '@ant-design/icons';
-import { getTopicDetail, createReply, uploadMedia } from '../api';
+import { getTopicDetail, createReply, uploadMedia, getStarUsers } from '../api';
 import { useAuth } from '../context/AuthContext';
 import LoginModal from '../components/LoginModal';
 import CreateTopicModal from '../components/CreateTopicModal';
@@ -41,6 +41,9 @@ const ForumDetail = () => {
   const [replyUploading, setReplyUploading] = useState(false);
   const [replyMediaIds, setReplyMediaIds] = useState([]);
 
+  // Star Users State
+  const [starUsers, setStarUsers] = useState([]);
+
   const fetchTopic = async () => {
     try {
       const res = await getTopicDetail(id);
@@ -53,14 +56,31 @@ const ForumDetail = () => {
     }
   };
 
+  const fetchStarUsers = async () => {
+    try {
+      const res = await getStarUsers();
+      setStarUsers(res.data || []);
+    } catch (error) {
+      console.error('Fetch star users failed', error);
+    }
+  };
+
   const hasFetched = React.useRef(false);
   useEffect(() => {
     if (!hasFetched.current) {
         fetchTopic();
+        fetchStarUsers();
         hasFetched.current = true;
     }
   }, [id]);
 
+  const handleReplyToUser = (nickname) => {
+      const mentionText = `@${nickname} `;
+      setReplyContent(prev => prev + mentionText);
+      // Focus logic if needed, but simple append works
+      message.info(`已添加 @${nickname}`);
+  };
+
   const handleSubmitReply = async () => {
     if (!user) {
       setLoginModalVisible(true);
@@ -272,6 +292,14 @@ const ForumDetail = () => {
                             <Space size={isMobile ? 'small' : 'middle'} align="center">
                                 <Text style={{ color: '#aaa', fontWeight: 'bold', fontSize: isMobile ? 13 : 14 }}>{reply.author_info?.nickname}</Text>
                                 <Text style={{ color: '#666', fontSize: 12 }}>{new Date(reply.created_at).toLocaleString()}</Text>
+                                <Button 
+                                    type="link" 
+                                    size="small" 
+                                    onClick={() => handleReplyToUser(reply.author_info?.nickname)}
+                                    style={{ padding: 0, height: 'auto' }}
+                                >
+                                    回复
+                                </Button>
                             </Space>
                             <Text style={{ color: '#444', fontSize: 12 }}>#{index + 1}</Text>
                         </div>
@@ -308,6 +336,25 @@ const ForumDetail = () => {
                     placeholder="友善回复，分享你的见解... (支持 Markdown)"
                     style={{ marginBottom: 16, background: '#111', border: '1px solid #333', color: '#fff' }}
                 />
+                
+                {starUsers.length > 0 && (
+                    <div style={{ marginBottom: 16 }}>
+                        <Text style={{ color: '#888', marginRight: 8 }}>@技术专家:</Text>
+                        <Space wrap>
+                            {starUsers.map(user => (
+                                <Tag 
+                                    key={user.id} 
+                                    color="gold" 
+                                    style={{ cursor: 'pointer' }}
+                                    onClick={() => handleReplyToUser(user.nickname)}
+                                >
+                                    {user.nickname}
+                                </Tag>
+                            ))}
+                        </Space>
+                    </div>
+                )}
+
                 <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'stretch' : 'center', gap: isMobile ? 10 : 0 }}>
                     <Upload 
                         beforeUpload={handleReplyUpload}