专家头像

frontend/src/pages/ForumDetail.jsx

@@ -1,6 +1,6 @@
 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 { Typography, Card, Avatar, Tag, Space, Button, Divider, Input, message, Upload, Tooltip, Grid, Modal } from 'antd';
 import { UserOutlined, ClockCircleOutlined, EyeOutlined, CheckCircleFilled, LeftOutlined, UploadOutlined, EditOutlined } from '@ant-design/icons';
 import { getTopicDetail, createReply, uploadMedia, getStarUsers } from '../api';
 import { useAuth } from '../context/AuthContext';
@@ -44,6 +44,10 @@ const ForumDetail = () => {
   // Star Users State
   const [starUsers, setStarUsers] = useState([]);
 
+  // User Info Modal State
+  const [userInfoModalVisible, setUserInfoModalVisible] = useState(false);
+  const [selectedUser, setSelectedUser] = useState(null);
+
   const fetchTopic = async () => {
     try {
       const res = await getTopicDetail(id);
@@ -82,8 +86,9 @@ const ForumDetail = () => {
   };
 
   const showUserTitle = (author) => {
-      if (author?.is_star || author?.title) {
-          message.info(author.title || '技术专家');
+      if (author) {
+          setSelectedUser(author);
+          setUserInfoModalVisible(true);
       }
   };
 
@@ -414,6 +419,41 @@ const ForumDetail = () => {
         onClose={() => setLoginModalVisible(false)}
         onLoginSuccess={() => {}}
       />
+
+      <Modal
+        title={null}
+        open={userInfoModalVisible}
+        onCancel={() => setUserInfoModalVisible(false)}
+        footer={null}
+        centered
+        width={300}
+        styles={{ body: { textAlign: 'center', padding: '30px 20px' } }}
+      >
+        {selectedUser && (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <Avatar 
+                    size={80} 
+                    src={selectedUser.avatar_url} 
+                    icon={<UserOutlined />} 
+                    style={{ marginBottom: 16, border: '2px solid #f0f0f0' }} 
+                />
+                <Title level={4} style={{ marginBottom: 4, marginTop: 0 }}>{selectedUser.nickname}</Title>
+                
+                {(selectedUser.is_star || selectedUser.title) && (
+                    <Tag color="gold" style={{ fontSize: 14, padding: '4px 12px', marginTop: 8 }}>
+                        {selectedUser.title || '技术专家'}
+                    </Tag>
+                )}
+                
+                {selectedUser.is_verified_owner && (
+                     <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', color: '#00b96b' }}>
+                        <CheckCircleFilled style={{ marginRight: 6 }} />
+                        <Text style={{ color: '#00b96b', fontSize: 12 }}>已认证购买用户</Text>
+                     </div>
+                )}
+            </div>
+        )}
+      </Modal>
       
       {/* Edit Modal */}
       <CreateTopicModal