创赢未来评分系统 - 初始化提交（移除大文件）

frontend/src/pages/AIServices.jsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react';
+import { Row, Col, Typography, Button, Spin } from 'antd';
+import { motion } from 'framer-motion';
+import { 
+  RightOutlined, 
+  SearchOutlined, 
+  DatabaseOutlined, 
+  ThunderboltOutlined, 
+  CheckCircleOutlined, 
+  CloudServerOutlined 
+} from '@ant-design/icons';
+import { getServices } from '../api';
+import { useNavigate } from 'react-router-dom';
+
+const { Title, Paragraph } = Typography;
+
+const AIServices = () => {
+  const [services, setServices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchServices = async () => {
+      try {
+        const response = await getServices();
+        setServices(response.data);
+      } catch (error) {
+        console.error("Failed to fetch services:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchServices();
+  }, []);
+
+  if (loading) {
+      return (
+          <div style={{ textAlign: 'center', padding: '100px 0' }}>
+              <Spin size="large" />
+              <div style={{ marginTop: 20 }}>Loading services...</div>
+          </div>
+      );
+  }
+
+  return (
+    <div style={{ padding: '20px 0' }}>
+      <div style={{ textAlign: 'center', marginBottom: 60 }}>
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ duration: 0.8 }}
+        >
+          <Title level={1} style={{ color: '#fff', fontSize: 'clamp(2rem, 4vw, 3rem)' }}>
+            AI 全栈<span style={{ color: '#00f0ff', textShadow: '0 0 10px rgba(0,240,255,0.5)' }}>解决方案</span>
+          </Title>
+        </motion.div>
+        <Paragraph style={{ color: '#888', maxWidth: 700, margin: '0 auto', fontSize: 16 }}>
+          从数据处理到模型部署，我们为您提供一站式 AI 基础设施服务。
+        </Paragraph>
+      </div>
+
+      <Row gutter={[32, 32]} justify="center">
+        {services.map((item, index) => (
+          <Col xs={24} md={8} key={item.id}>
+            <motion.div
+              initial={{ opacity: 0, x: -50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.2, duration: 0.5 }}
+              whileHover={{ scale: 1.03 }}
+              onClick={() => navigate(`/services/${item.id}`)}
+              style={{ cursor: 'pointer' }}
+            >
+              <div 
+                className="glass-panel"
+                style={{ 
+                  padding: 30, 
+                  height: '100%', 
+                  position: 'relative', 
+                  overflow: 'hidden',
+                  border: `1px solid ${item.color}33`,
+                  boxShadow: `0 0 20px ${item.color}11`
+                }}
+              >
+                {/* HUD 装饰线 */}
+                <div style={{ position: 'absolute', top: 0, left: 0, width: 20, height: 2, background: item.color }} />
+                <div style={{ position: 'absolute', top: 0, left: 0, width: 2, height: 20, background: item.color }} />
+                <div style={{ position: 'absolute', bottom: 0, right: 0, width: 20, height: 2, background: item.color }} />
+                <div style={{ position: 'absolute', bottom: 0, right: 0, width: 2, height: 20, background: item.color }} />
+
+                <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center' }}>
+                  <div style={{ 
+                    width: 60, height: 60, 
+                    borderRadius: '50%', 
+                    background: `${item.color}22`, 
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    marginRight: 15,
+                    overflow: 'hidden'
+                  }}>
+                    {item.display_icon ? (
+                        <img src={item.display_icon} alt={item.title} style={{ width: '60%', height: '60%', objectFit: 'contain' }} />
+                    ) : (
+                        <div style={{ width: 30, height: 30, background: item.color, borderRadius: '50%' }} />
+                    )}
+                  </div>
+                  <h3 style={{ margin: 0, fontSize: 22, color: '#fff' }}>{item.title}</h3>
+                </div>
+
+                <p style={{ color: '#ccc', lineHeight: 1.6, minHeight: 60 }}>{item.description}</p>
+
+                <div style={{ marginTop: 20 }}>
+                  {item.features_list && item.features_list.map((feat, i) => (
+                    <div key={i} style={{ 
+                      display: 'flex', alignItems: 'center', marginBottom: 8, color: item.color 
+                    }}>
+                      <div style={{ width: 6, height: 6, background: item.color, marginRight: 10, borderRadius: '50%' }} />
+                      {feat}
+                    </div>
+                  ))}
+                </div>
+
+                <Button 
+                  type="link" 
+                  style={{ padding: 0, marginTop: 20, color: '#fff' }}
+                  icon={<RightOutlined />}
+                  onClick={(e) => {
+                      e.stopPropagation();
+                      navigate(`/services/${item.id}`);
+                  }}
+                >
+                  了解更多
+                </Button>
+              </div>
+            </motion.div>
+          </Col>
+        ))}
+      </Row>
+
+      {/* 动态流程图优化 */}
+      <motion.div 
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1 }}
+        style={{ 
+          marginTop: 100, 
+          padding: '60px 20px', 
+          background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.05) 100%)', 
+          borderRadius: 30, 
+          border: '1px solid rgba(255,255,255,0.05)',
+          position: 'relative',
+          overflow: 'hidden'
+        }}
+      >
+        <div style={{ position: 'absolute', top: -50, right: -50, width: 200, height: 200, background: 'radial-gradient(circle, rgba(0,240,255,0.1) 0%, transparent 70%)', filter: 'blur(30px)' }} />
+        
+        <Title level={2} style={{ color: '#fff', marginBottom: 60, textAlign: 'center' }}>
+          <span className="neon-text-green">服务流程</span>
+        </Title>
+
+        <Row justify="center" gutter={[0, 40]} style={{ position: 'relative' }}>
+          {[
+            { title: '需求分析', icon: <SearchOutlined />, desc: '深度沟通需求' },
+            { title: '数据准备', icon: <DatabaseOutlined />, desc: '高效数据处理' },
+            { title: '模型训练', icon: <ThunderboltOutlined />, desc: '高性能算力' },
+            { title: '测试验证', icon: <CheckCircleOutlined />, desc: '多维精度测试' },
+            { title: '私有化部署', icon: <CloudServerOutlined />, desc: '全栈落地部署' }
+          ].map((step, i) => (
+            <Col key={i} xs={24} sm={12} md={4}>
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
+                <motion.div
+                  initial={{ scale: 0, opacity: 0 }}
+                  whileInView={{ scale: 1, opacity: 1 }}
+                  transition={{ delay: i * 0.2, type: 'spring', stiffness: 100 }}
+                  whileHover={{ y: -10 }}
+                  style={{
+                    width: 80,
+                    height: 80,
+                    borderRadius: '24px',
+                    background: 'rgba(255, 255, 255, 0.03)',
+                    border: '1px solid rgba(0, 185, 107, 0.3)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 32,
+                    color: '#00b96b',
+                    marginBottom: 20,
+                    boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+                    backdropFilter: 'blur(10px)',
+                    zIndex: 2
+                  }}
+                >
+                  {step.icon}
+                </motion.div>
+                
+                <motion.div
+                  initial={{ opacity: 0, y: 10 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ delay: i * 0.2 + 0.3 }}
+                >
+                  <div style={{ color: '#fff', fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>{step.title}</div>
+                  <div style={{ color: '#666', fontSize: 12 }}>{step.desc}</div>
+                </motion.div>
+
+                {/* 连接线 */}
+                {i < 4 && (
+                  <div className="process-line" style={{
+                    position: 'absolute',
+                    top: 40,
+                    right: '-50%',
+                    width: '100%',
+                    height: '2px',
+                    background: 'linear-gradient(90deg, #1890ff33, #1890ff00)',
+                    zIndex: 1,
+                    display: 'none'
+                  }} />
+                )}
+              </div>
+            </Col>
+          ))}
+        </Row>
+
+        <style>{`
+          @media (min-width: 768px) {
+            .process-line { display: block !important; }
+          }
+          .neon-text-green {
+            text-shadow: 0 0 10px rgba(0, 185, 107, 0.5);
+          }
+        `}</style>
+      </motion.div>
+    </div>
+  );
+};
+
+export default AIServices;

frontend/src/pages/Activities.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'framer-motion';
+import { CalendarOutlined } from '@ant-design/icons';
+import ActivityList from '../components/activity/ActivityList';
+import { fadeInUp, staggerContainer } from '../animation';
+
+const Activities = () => {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={staggerContainer}
+    >
+      <motion.div variants={fadeInUp}>
+        <h1 style={{ 
+          fontSize: '32px', 
+          marginBottom: '30px', 
+          color: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px'
+        }}>
+          <CalendarOutlined style={{ color: '#1890ff' }} />
+          系列活动
+        </h1>
+      </motion.div>
+      
+      <ActivityList />
+    </motion.div>
+  );
+};
+
+export default Activities;

frontend/src/pages/ForumDetail.jsx

@@ -0,0 +1,538 @@
+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, Modal } from 'antd';
+import { UserOutlined, ClockCircleOutlined, EyeOutlined, CheckCircleFilled, LeftOutlined, UploadOutlined, EditOutlined, StarFilled, CloseOutlined, LikeOutlined, LikeFilled } from '@ant-design/icons';
+import { getTopicDetail, createReply, uploadMedia, getStarUsers, likeTopic, likeReply } from '../api';
+import { useAuth } from '../context/AuthContext';
+import LoginModal from '../components/LoginModal';
+import CreateTopicModal from '../components/CreateTopicModal';
+import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import 'katex/dist/katex.min.css';
+import styles from './ForumDetail.module.less';
+import CodeBlock from '../components/CodeBlock';
+
+const { Title, Text } = Typography;
+const { TextArea } = Input;
+const { useBreakpoint } = Grid;
+
+const ForumDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { user, login } = useAuth();
+  const screens = useBreakpoint();
+  const isMobile = !screens.md;
+  
+  const [loading, setLoading] = useState(true);
+  const [topic, setTopic] = useState(null);
+  const [replyContent, setReplyContent] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [loginModalVisible, setLoginModalVisible] = useState(false);
+  
+  // Edit Topic State
+  const [editModalVisible, setEditModalVisible] = useState(false);
+
+  // Reply Image State
+  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);
+      setTopic(res.data);
+    } catch (error) {
+      console.error(error);
+      message.error('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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}`);
+  };
+
+  // Expert Info Modal
+  const [expertModalVisible, setExpertModalVisible] = useState(false);
+  const [selectedExpert, setSelectedExpert] = useState(null);
+
+  const showUserTitle = (author) => {
+      if (author?.is_star) {
+          setSelectedExpert(author);
+          setExpertModalVisible(true);
+      } else if (author?.title) {
+          message.info(author.title);
+      }
+  };
+
+  const handleLikeTopic = async () => {
+    if (!user) {
+        setLoginModalVisible(true);
+        return;
+    }
+    try {
+        const res = await likeTopic(topic.id);
+        setTopic(prev => ({
+            ...prev,
+            is_liked: res.data.liked,
+            like_count: res.data.count
+        }));
+    } catch (error) {
+        message.error('操作失败');
+    }
+  };
+
+  const handleLikeReply = async (replyId) => {
+    if (!user) {
+        setLoginModalVisible(true);
+        return;
+    }
+    try {
+        const res = await likeReply(replyId);
+        setTopic(prev => ({
+            ...prev,
+            replies: prev.replies.map(r => {
+                if (r.id === replyId) {
+                    return { ...r, is_liked: res.data.liked, like_count: res.data.count };
+                }
+                return r;
+            })
+        }));
+    } catch (error) {
+        message.error('操作失败');
+    }
+  };
+
+  const handleSubmitReply = async () => {
+    if (!user) {
+      setLoginModalVisible(true);
+      return;
+    }
+    if (!replyContent.trim()) {
+      message.warning('请输入回复内容');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await createReply({
+        topic: id,
+        content: replyContent,
+        media_ids: replyMediaIds // Send uploaded media IDs
+      });
+      message.success('回复成功');
+      setReplyContent('');
+      setReplyMediaIds([]); // Reset media IDs
+      fetchTopic(); // Refresh to show new reply
+    } catch (error) {
+      console.error(error);
+      message.error('回复失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleReplyUpload = async (file) => {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('media_type', file.type.startsWith('video') ? 'video' : 'image');
+
+      setReplyUploading(true);
+      try {
+          const res = await uploadMedia(formData);
+          if (res.data.id) {
+            setReplyMediaIds(prev => [...prev, res.data.id]);
+          }
+
+          let url = res.data.file; 
+          if (url) url = url.replace(/\\/g, '/');
+          if (url && !url.startsWith('http')) {
+              const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
+              const host = baseURL.replace(/\/api\/?$/, '');
+              if (!url.startsWith('/')) url = '/' + url;
+              url = `${host}${url}`;
+          }
+          url = url.replace(/([^:]\/)\/+/g, '$1');
+          
+          const insertText = file.type.startsWith('video') 
+              ? `\n<video src="${url}" controls width="100%"></video>\n` 
+              : `\n![${file.name}](${url})\n`;
+          
+          setReplyContent(prev => prev + insertText);
+          message.success('上传成功');
+      } catch (error) {
+          console.error(error);
+          message.error('上传失败');
+      } finally {
+          setReplyUploading(false);
+      }
+      return false; 
+  };
+
+  if (loading) return <div style={{ padding: 100, textAlign: 'center', color: '#fff' }}>Loading...</div>;
+  if (!topic) return <div style={{ padding: 100, textAlign: 'center', color: '#fff' }}>Topic not found</div>;
+
+  const markdownComponents = {
+    // eslint-disable-next-line no-unused-vars
+    code({node, inline, className, children, ...props}) {
+      const match = /language-(\w+)/.exec(className || '')
+      return !inline && match ? (
+        <CodeBlock
+          language={match[1]}
+          {...props}
+        >
+          {String(children).replace(/\n$/, '')}
+        </CodeBlock>
+      ) : (
+        <code className={className} {...props}>
+          {children}
+        </code>
+      )
+    },
+    // eslint-disable-next-line no-unused-vars
+    img({node, ...props}) {
+      return (
+        <img 
+          {...props} 
+          style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%', margin: '10px 0' }} 
+        />
+      );
+    }
+  };
+
+  return (
+    <div style={{ padding: isMobile ? '60px 10px 20px' : '80px 20px 40px', minHeight: '100vh', maxWidth: 1000, margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+          <Button 
+            type="text" 
+            icon={<LeftOutlined />} 
+            style={{ color: '#fff' }}
+            onClick={() => navigate('/forum')}
+          >
+            返回列表
+          </Button>
+          
+          {user && String(topic.author) === String(user.id) && (
+              <Button 
+                type="primary" 
+                ghost 
+                icon={<EditOutlined />} 
+                onClick={() => setEditModalVisible(true)}
+                size={isMobile ? 'small' : 'middle'}
+              >
+                {isMobile ? '编辑' : '编辑帖子'}
+              </Button>
+          )}
+      </div>
+
+      {/* Topic Content */}
+      <Card
+        style={{ 
+          background: 'rgba(20,20,20,0.8)', 
+          border: '1px solid rgba(255,255,255,0.1)',
+          backdropFilter: 'blur(10px)',
+          marginBottom: 30
+        }}
+        styles={{ body: { padding: isMobile ? '15px' : '30px' } }}
+      >
+        <div style={{ marginBottom: 20 }}>
+          {topic.is_pinned && <Tag color="red" style={{ marginRight: 10 }}>置顶</Tag>}
+          {topic.product_info && <Tag color="blue">{topic.product_info.name}</Tag>}
+          <Title level={isMobile ? 3 : 2} style={{ color: '#fff', margin: '10px 0', wordBreak: 'break-word' }}>{topic.title}</Title>
+          
+          <Space size={isMobile ? 'small' : 'large'} style={{ color: '#888', marginTop: 10, flexWrap: 'wrap' }}>
+            <Space>
+               <Avatar 
+                   src={topic.author_info?.avatar_url} 
+                   icon={<UserOutlined />} 
+                   size={isMobile ? 'small' : 'default'} 
+                   style={{ cursor: 'pointer' }}
+                   onClick={() => showUserTitle(topic.author_info)}
+               />
+               <span style={{ color: '#ccc', fontSize: isMobile ? 12 : 14 }}>{topic.author_info?.nickname}</span>
+               {topic.is_verified_owner && (
+                 <Tooltip title="已验证购买过相关产品">
+                    <CheckCircleFilled style={{ color: '#00b96b' }} />
+                 </Tooltip>
+               )}
+            </Space>
+            <Space>
+               <ClockCircleOutlined />
+               <span style={{ fontSize: isMobile ? 12 : 14 }}>{new Date(topic.created_at).toLocaleString()}</span>
+            </Space>
+            <Space>
+               <EyeOutlined />
+               <span style={{ fontSize: isMobile ? 12 : 14 }}>{topic.view_count} 阅读</span>
+            </Space>
+            <Space style={{ cursor: 'pointer', background: topic.is_liked ? 'rgba(0, 185, 107, 0.15)' : 'rgba(255,255,255,0.05)', padding: '4px 10px', borderRadius: 12, transition: 'all 0.3s' }} onClick={handleLikeTopic}>
+               {topic.is_liked ? <LikeFilled style={{ color: '#00b96b' }} /> : <LikeOutlined />}
+               <span style={{ fontSize: isMobile ? 12 : 14, color: topic.is_liked ? '#00b96b' : 'inherit' }}>{topic.like_count || 0} 点赞</span>
+            </Space>
+          </Space>
+        </div>
+
+        <Divider style={{ borderColor: 'rgba(255,255,255,0.1)' }} />
+
+        <div style={{ 
+            color: '#ddd', 
+            fontSize: 16, 
+            lineHeight: 1.8, 
+            minHeight: 200,
+        }} className={styles['markdown-body']}>
+            <ReactMarkdown 
+                remarkPlugins={[remarkMath, remarkGfm]}
+                rehypePlugins={[rehypeKatex, rehypeRaw]}
+                components={markdownComponents}
+            >
+                {topic.content}
+            </ReactMarkdown>
+        </div>
+        
+        {(() => {
+            if (topic.media && topic.media.length > 0) {
+                 return topic.media.filter(m => m.media_type === 'video').map((media) => (
+                    <div key={`media-${media.id}`} style={{ marginTop: 12 }}>
+                        <video src={media.url} controls style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%' }} />
+                    </div>
+                ));
+            }
+            return null;
+        })()}
+      </Card>
+
+      {/* Replies List */}
+      <div style={{ marginBottom: 30 }}>
+         <Title level={isMobile ? 5 : 4} style={{ color: '#fff', marginBottom: 20 }}>
+             {topic.replies?.length || 0} 条回复
+         </Title>
+         
+         {topic.replies?.map((reply, index) => (
+             <Card
+                key={reply.id}
+                style={{ 
+                  background: 'rgba(255,255,255,0.05)', 
+                  border: 'none',
+                  marginBottom: 16,
+                  borderRadius: 8
+                }}
+                styles={{ body: { padding: isMobile ? '15px' : '24px' } }}
+             >
+                <div style={{ display: 'flex', gap: isMobile ? 10 : 16 }}>
+                    <Avatar 
+                        src={reply.author_info?.avatar_url} 
+                        icon={<UserOutlined />} 
+                        size={isMobile ? 'small' : 'default'} 
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => showUserTitle(reply.author_info)}
+                    />
+                    <div style={{ flex: 1 }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                            <Space size={isMobile ? 'small' : 'middle'} align="center">
+                                <Text style={{ color: '#aaa', fontWeight: 'bold', fontSize: isMobile ? 13 : 14 }}>{reply.author_info?.nickname}</Text>
+                                {reply.is_pinned && <Tag color="red" style={{ margin: 0 }}>置顶</Tag>}
+                                <Text style={{ color: '#666', fontSize: 12 }}>{new Date(reply.created_at).toLocaleString()}</Text>
+                            </Space>
+                            <Space size={isMobile ? 'small' : 'middle'} align="center">
+                                <Space onClick={() => handleLikeReply(reply.id)} style={{ cursor: 'pointer', background: reply.is_liked ? 'rgba(0, 185, 107, 0.15)' : 'transparent', padding: '2px 8px', borderRadius: 4 }}>
+                                    {reply.is_liked ? <LikeFilled style={{ color: '#00b96b' }} /> : <LikeOutlined style={{ color: '#666' }} />}
+                                    <span style={{ fontSize: 12, color: reply.is_liked ? '#00b96b' : '#666' }}>{reply.like_count || 0}</span>
+                                </Space>
+                                <Button 
+                                    type="link" 
+                                    size="small" 
+                                    onClick={() => handleReplyToUser(reply.author_info?.nickname)}
+                                    style={{ padding: 0, height: 'auto' }}
+                                >
+                                    回复
+                                </Button>
+                                <Text style={{ color: '#444', fontSize: 12 }}>#{index + 1}</Text>
+                            </Space>
+                        </div>
+                        <div style={{ color: '#eee', fontSize: isMobile ? 14 : 16 }} className={styles['markdown-body']}>
+                            <ReactMarkdown 
+                                remarkPlugins={[remarkMath, remarkGfm]}
+                                rehypePlugins={[rehypeKatex, rehypeRaw]}
+                                components={markdownComponents}
+                            >
+                                {reply.content}
+                            </ReactMarkdown>
+                        </div>
+                    </div>
+                </div>
+             </Card>
+         ))}
+      </div>
+
+      {/* Reply Form */}
+      <Card
+        style={{ 
+            background: 'rgba(20,20,20,0.8)', 
+            border: '1px solid rgba(255,255,255,0.1)' 
+        }}
+        styles={{ body: { padding: isMobile ? '15px' : '24px' } }}
+      >
+        <Title level={5} style={{ color: '#fff', marginBottom: 16 }}>发表回复</Title>
+        {user ? (
+            <>
+                <TextArea 
+                    rows={4} 
+                    value={replyContent}
+                    onChange={e => setReplyContent(e.target.value)}
+                    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} 
+                        showUploadList={false} 
+                        accept="image/*,video/*"
+                    >
+                        <Button 
+                            icon={<UploadOutlined />} 
+                            loading={replyUploading} 
+                            style={{ 
+                                color: '#fff', 
+                                background: 'rgba(255,255,255,0.1)', 
+                                border: '1px solid rgba(255,255,255,0.2)',
+                                width: isMobile ? '100%' : 'auto'
+                            }}
+                        >
+                            插入图片/视频
+                        </Button>
+                    </Upload>
+
+                    <Button type="primary" onClick={handleSubmitReply} loading={submitting} style={{ width: isMobile ? '100%' : 'auto' }}>
+                        提交回复
+                    </Button>
+                </div>
+            </>
+        ) : (
+            <div style={{ textAlign: 'center', padding: 20 }}>
+                <Text style={{ color: '#888' }}>登录后参与讨论</Text>
+                <br/>
+                <Button type="primary" style={{ marginTop: 10 }} onClick={() => setLoginModalVisible(true)}>
+                    立即登录
+                </Button>
+            </div>
+        )}
+      </Card>
+
+      <LoginModal 
+        visible={loginModalVisible}
+        onClose={() => setLoginModalVisible(false)}
+        onLoginSuccess={(data) => login(data)}
+      />
+      
+      <Modal
+          open={expertModalVisible}
+          onCancel={() => setExpertModalVisible(false)}
+          footer={null}
+          title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家信息</span></Space>}
+          styles={{ 
+            content: { background: 'rgba(30, 30, 30, 0.95)', border: '1px solid rgba(255, 255, 255, 0.1)', backdropFilter: 'blur(10px)' },
+            header: { background: 'transparent', borderBottom: '1px solid rgba(255, 255, 255, 0.1)' },
+            body: { background: 'transparent' },
+            mask: { backdropFilter: 'blur(4px)' }
+          }}
+          closeIcon={<CloseOutlined style={{ color: 'rgba(255, 255, 255, 0.5)' }} />}
+          bodyStyle={{ textAlign: 'center' }}
+      >
+          {selectedExpert && (
+              <div>
+                  <Avatar size={80} src={selectedExpert.avatar_url} icon={<UserOutlined />} style={{ border: '3px solid #ffd700', marginBottom: 15, boxShadow: '0 0 15px rgba(255, 215, 0, 0.2)' }} />
+                  <Title level={4} style={{ marginBottom: 5, color: '#fff' }}>{selectedExpert.nickname}</Title>
+                  <Tag color="gold" style={{ marginBottom: 20, background: 'rgba(255, 215, 0, 0.15)', border: '1px solid rgba(255, 215, 0, 0.4)', color: '#ffd700' }}>{selectedExpert.title || '技术专家'}</Tag>
+                  
+                  {selectedExpert.skills && selectedExpert.skills.length > 0 && (
+                      <div style={{ marginTop: 20, textAlign: 'left' }}>
+                          <Text strong style={{ display: 'block', marginBottom: 10, color: '#1890ff' }}>擅长技能</Text>
+                          <Space wrap>
+                              {selectedExpert.skills.map((skill, idx) => (
+                                  <div key={idx} style={{ 
+                                      display: 'flex', 
+                                      alignItems: 'center', 
+                                      background: 'rgba(255, 255, 255, 0.05)', 
+                                      padding: '6px 12px', 
+                                      borderRadius: 6,
+                                      border: '1px solid rgba(255, 255, 255, 0.1)',
+                                      transition: 'all 0.3s'
+                                  }}>
+                                      {skill.icon && <img src={skill.icon} style={{ width: 16, height: 16, marginRight: 6 }} />}
+                                      <Text style={{ fontSize: 12, color: '#ddd' }}>{skill.text}</Text>
+                                  </div>
+                              ))}
+                          </Space>
+                      </div>
+                  )}
+              </div>
+          )}
+      </Modal>
+
+      {/* Edit Modal */}
+      <CreateTopicModal 
+        visible={editModalVisible}
+        onClose={() => {
+            setEditModalVisible(false);
+            // Workaround for scroll issue: Force reload page on close
+            window.location.reload();
+        }}
+        onSuccess={() => {
+            fetchTopic();
+        }}
+        initialValues={topic}
+        isEditMode={true}
+        topicId={topic?.id}
+      />
+    </div>
+  );
+};
+
+export default ForumDetail;

frontend/src/pages/ForumDetail.module.less

@@ -0,0 +1,109 @@
+.markdown-body {
+  color: #ddd;
+  font-size: 16px;
+  line-height: 1.8;
+  
+  h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  h1 { font-size: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
+  h2 { font-size: 1.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.85em; color: #888; }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  a {
+    color: #1890ff;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul, ol {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding-left: 2em;
+  }
+
+  li {
+    word-wrap: break-all;
+  }
+
+  blockquote {
+    margin: 0 0 16px;
+    padding: 0 1em;
+    color: #8b949e;
+    border-left: 0.25em solid #30363d;
+  }
+
+  /* Table Styles */
+  table {
+    display: block;
+    width: 100%;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin-top: 0;
+    margin-bottom: 16px;
+    
+    thead {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    tr {
+      background-color: transparent;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      
+      &:nth-child(2n) {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+    }
+
+    th, td {
+      padding: 6px 13px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    th {
+      font-weight: 600;
+      text-align: left; 
+      /* Ensure text color is readable */
+      color: #fff; 
+    }
+    
+    td {
+        color: #ddd;
+    }
+  }
+
+  /* Inline Code */
+  code:not([class*="language-"]) {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(110, 118, 129, 0.4);
+    border-radius: 6px;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  }
+  
+  /* Images */
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: transparent;
+  }
+}

frontend/src/pages/ForumList.jsx

@@ -0,0 +1,429 @@
+import React, { useState, useEffect } from 'react';
+import { Typography, Input, Button, List, Tag, Avatar, Card, Space, Spin, message, Badge, Tooltip, Tabs, Row, Col, Grid, Carousel, Modal } from 'antd';
+import { SearchOutlined, PlusOutlined, UserOutlined, MessageOutlined, EyeOutlined, CheckCircleFilled, FireOutlined, StarFilled, QuestionCircleOutlined, ShareAltOutlined, SoundOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { getTopics, getStarUsers, getAnnouncements } from '../api';
+import { useAuth } from '../context/AuthContext';
+import CreateTopicModal from '../components/CreateTopicModal';
+import LoginModal from '../components/LoginModal';
+
+const { Title, Text, Paragraph } = Typography;
+const { useBreakpoint } = Grid;
+
+const ForumList = () => {
+  const screens = useBreakpoint();
+  const isMobile = !screens.md; // roughly checks if screen is smaller than medium
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  
+  const [loading, setLoading] = useState(true);
+  const [topics, setTopics] = useState([]);
+  const [starUsers, setStarUsers] = useState([]);
+  const [announcements, setAnnouncements] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [category, setCategory] = useState('all');
+  const [createModalVisible, setCreateModalVisible] = useState(false);
+  const [loginModalVisible, setLoginModalVisible] = useState(false);
+  const [expertModalVisible, setExpertModalVisible] = useState(false);
+  const [selectedExpert, setSelectedExpert] = useState(null);
+
+  const showExpertInfo = (user) => {
+      setSelectedExpert(user);
+      setExpertModalVisible(true);
+  };
+
+  const fetchTopics = async (search = '', cat = '') => {
+    setLoading(true);
+    try {
+      const params = {};
+      if (search) params.search = search;
+      if (cat && cat !== 'all') params.category = cat;
+      
+      const res = await getTopics(params);
+      setTopics(res.data.results || res.data); // Support pagination result or list
+    } catch (error) {
+      console.error(error);
+      message.error('获取帖子列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchStarUsers = async () => {
+      try {
+          const res = await getStarUsers();
+          setStarUsers(res.data);
+      } catch (error) {
+          console.error("Fetch star users failed", error);
+      }
+  };
+
+  const fetchAnnouncements = async () => {
+      try {
+          const res = await getAnnouncements();
+          setAnnouncements(res.data.results || res.data);
+      } catch (error) {
+          console.error("Fetch announcements failed", error);
+      }
+  };
+
+  useEffect(() => {
+    fetchTopics(searchText, category);
+    fetchStarUsers();
+    fetchAnnouncements();
+  }, [category]);
+
+  const handleSearch = (value) => {
+    setSearchText(value);
+    fetchTopics(value, category);
+  };
+
+  const handleCreateClick = () => {
+    if (!user) {
+      setLoginModalVisible(true);
+      return;
+    }
+    setCreateModalVisible(true);
+  };
+
+  const getCategoryIcon = (cat) => {
+      switch(cat) {
+          case 'help': return <QuestionCircleOutlined style={{ color: '#faad14' }} />;
+          case 'share': return <ShareAltOutlined style={{ color: '#1890ff' }} />;
+          case 'notice': return <SoundOutlined style={{ color: '#ff4d4f' }} />;
+          default: return <MessageOutlined style={{ color: '#00b96b' }} />;
+      }
+  };
+
+  const getCategoryLabel = (cat) => {
+      switch(cat) {
+          case 'help': return '求助';
+          case 'share': return '分享';
+          case 'notice': return '公告';
+          default: return '讨论';
+      }
+  };
+
+  const items = [
+    { key: 'all', label: '全部话题' },
+    { key: 'discussion', label: '技术讨论' },
+    { key: 'help', label: '求助问答' },
+    { key: 'share', label: '经验分享' },
+    { key: 'notice', label: '官方公告' },
+  ];
+
+  return (
+    <div style={{ minHeight: '100vh', paddingBottom: 60 }}>
+      {/* Hero Section */}
+      <div style={{ 
+        textAlign: 'center', 
+        padding: isMobile ? '40px 15px 20px' : '80px 20px 40px', 
+        background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.1) 100%)'
+      }}>
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <Title level={isMobile ? 2 : 1} style={{ color: '#fff', fontFamily: "'Orbitron', sans-serif", marginBottom: 10 }}>
+            <span style={{ color: '#00b96b' }}>Quant Speed</span> Developer Community
+          </Title>
+          <Text style={{ color: '#888', fontSize: isMobile ? 14 : 18, maxWidth: 600, display: 'block', margin: '0 auto 30px' }}>
+            技术交流 · 硬件开发 · 官方支持 · 量迹生态
+          </Text>
+        </motion.div>
+
+        <div style={{ 
+            maxWidth: 600, 
+            margin: '0 auto', 
+            display: 'flex', 
+            gap: 10,
+            flexDirection: isMobile ? 'column' : 'row'
+        }}>
+          <Input 
+            size={isMobile ? "middle" : "large"}
+            placeholder="搜索感兴趣的话题..." 
+            prefix={<SearchOutlined style={{ color: '#666' }} />}
+            style={{ borderRadius: 8, background: 'rgba(255,255,255,0.1)', border: '1px solid #333', color: '#fff' }}
+            onChange={(e) => setSearchText(e.target.value)}
+            onPressEnter={(e) => handleSearch(e.target.value)}
+          />
+          <Button 
+            type="primary" 
+            size={isMobile ? "middle" : "large"}
+            icon={<PlusOutlined />} 
+            onClick={handleCreateClick}
+            style={{ height: 'auto', borderRadius: 8, width: isMobile ? '100%' : 'auto' }}
+          >
+            发布新帖
+          </Button>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '0 15px' : '0 20px' }}>
+        <Row gutter={24}>
+            <Col xs={24} md={18}>
+                {isMobile && (
+                  <motion.div 
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    style={{ marginBottom: 20 }}
+                  >
+                     {/* Mobile Announcements */}
+                     <div style={{ background: 'rgba(255,77,79,0.1)', border: '1px solid rgba(255,77,79,0.3)', borderRadius: 8, padding: '8px 12px', marginBottom: 15, display: 'flex', alignItems: 'center' }}>
+                        <SoundOutlined style={{ color: '#ff4d4f', marginRight: 10 }} />
+                        <div style={{ flex: 1, overflow: 'hidden' }}>
+                            <Carousel autoplay dots={false} effect="scrollx" style={{ width: '100%' }}>
+                               {announcements.length > 0 ? announcements.map(item => (
+                                  <div key={item.id}>
+                                     <Text ellipsis style={{ color: '#fff', width: '100%', display: 'block' }}>
+                                        {item.title}
+                                     </Text>
+                                  </div>
+                               )) : (
+                                  <div><Text style={{ color: '#888' }}>暂无公告</Text></div>
+                               )}
+                            </Carousel>
+                        </div>
+                     </div>
+                
+                     {/* Mobile Experts */}
+                     <div style={{ overflowX: 'auto', whiteSpace: 'nowrap', paddingBottom: 5, display: 'flex', gap: 15, scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+                        {starUsers.map(u => (
+                           <div key={u.id} style={{ textAlign: 'center', minWidth: 60 }} onClick={() => showExpertInfo(u)}>
+                              <Badge count={<StarFilled style={{ color: '#ffd700' }} />} offset={[-5, 5]}>
+                                <Avatar size={48} src={u.avatar_url} icon={<UserOutlined />} style={{ border: '2px solid rgba(255, 215, 0, 0.3)', cursor: 'pointer' }} />
+                              </Badge>
+                              <div style={{ color: '#fff', fontSize: 12, marginTop: 5, width: 60, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                {u.nickname}
+                              </div>
+                           </div>
+                        ))}
+                     </div>
+                  </motion.div>
+                )}
+
+                <Tabs 
+                    defaultActiveKey="all" 
+                    items={items} 
+                    onChange={setCategory}
+                    tabBarStyle={{ color: '#fff', marginBottom: isMobile ? 10 : 16 }}
+                />
+                <List
+                    loading={loading}
+                    itemLayout="vertical"
+                    dataSource={topics}
+                    renderItem={(item) => (
+                        <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        >
+                        <Card
+                            hoverable
+                            style={{ 
+                            marginBottom: 16, 
+                            background: 'rgba(20,20,20,0.6)', 
+                            border: item.is_pinned ? '1px solid rgba(0, 185, 107, 0.4)' : '1px solid rgba(255,255,255,0.1)',
+                            backdropFilter: 'blur(10px)',
+                            boxShadow: item.is_pinned ? '0 0 10px rgba(0, 185, 107, 0.1)' : 'none'
+                            }}
+                            bodyStyle={{ padding: isMobile ? '15px' : '20px 24px' }}
+                            onClick={() => navigate(`/forum/${item.id}`)}
+                        >
+                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                            <div style={{ flex: 1 }}>
+                                <div style={{ marginBottom: 8, display: 'flex', alignItems: 'center', gap: isMobile ? 4 : 8, flexWrap: 'wrap' }}>
+                                {item.is_pinned && <Tag color="red" icon={<FireOutlined />}>{isMobile ? '顶' : '置顶'}</Tag>}
+                                <Tag icon={getCategoryIcon(item.category)} style={{ background: 'transparent', color: '#fff', border: '1px solid #444', fontSize: isMobile ? 10 : 12 }}>
+                                    {getCategoryLabel(item.category)}
+                                </Tag>
+                                {item.is_verified_owner && (
+                                    <Tooltip title="已验证购买过相关产品">
+                                    <Tag icon={<CheckCircleFilled />} color="#00b96b" style={{ margin: 0 }}>{isMobile ? '认证' : '认证用户'}</Tag>
+                                    </Tooltip>
+                                )}
+                                <Text style={{ color: '#fff', fontSize: isMobile ? 16 : 18, fontWeight: 'bold', cursor: 'pointer', lineHeight: 1.3 }}>
+                                    {item.title}
+                                </Text>
+                                </div>
+                                
+                                <Paragraph 
+                                ellipsis={{ rows: 2 }} 
+                                style={{ color: '#aaa', marginBottom: 12, fontSize: isMobile ? 13 : 14 }}
+                                >
+                                {item.content.replace(/!\[.*?\]\(.*?\)/g, '[图片]').replace(/[#*`]/g, '')} {/* Simple markdown strip */}
+                                </Paragraph>
+                                
+                                {item.content.match(/!\[.*?\]\((.*?)\)/) && (
+                                    <div style={{ marginBottom: 12 }}>
+                                        <img 
+                                            src={item.content.match(/!\[.*?\]\((.*?)\)/)[1]} 
+                                            alt="cover" 
+                                            style={{ maxHeight: 150, borderRadius: 8, maxWidth: '100%' }} 
+                                        />
+                                    </div>
+                                )}
+
+                                <Space size={isMobile ? 4 : "middle"} wrap style={{ color: '#666', fontSize: isMobile ? 12 : 13 }}>
+                                <Space size={4}>
+                                    <Avatar src={item.author_info?.avatar_url} icon={<UserOutlined />} size="small" />
+                                    <Text style={{ color: item.author_info?.is_star ? '#ffd700' : '#888', fontWeight: item.author_info?.is_star ? 'bold' : 'normal', fontSize: isMobile ? 12 : 14 }}>
+                                        {item.author_info?.nickname || '匿名用户'}
+                                    </Text>
+                                    {item.author_info?.is_star && (
+                                        <Tooltip title={item.author_info.title || "技术专家"}>
+                                            <StarFilled style={{ color: '#ffd700' }} />
+                                        </Tooltip>
+                                    )}
+                                </Space>
+                                {!isMobile && <span>•</span>}
+                                <span>{new Date(item.created_at).toLocaleDateString()}</span>
+                                {item.product_info && (
+                                    <Tag color="blue" style={{ marginLeft: isMobile ? 4 : 8, fontSize: 12 }}>{item.product_info.name}</Tag>
+                                )}
+                                </Space>
+                            </div>
+
+                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, minWidth: isMobile ? 50 : 80, marginLeft: 10 }}>
+                                <div style={{ textAlign: 'center' }}>
+                                <MessageOutlined style={{ fontSize: isMobile ? 14 : 16, color: '#1890ff' }} />
+                                <div style={{ color: '#fff', fontWeight: 'bold', fontSize: isMobile ? 12 : 14 }}>{item.replies?.length || 0}</div>
+                                </div>
+                                <div style={{ textAlign: 'center', marginTop: isMobile ? 2 : 5 }}>
+                                <EyeOutlined style={{ fontSize: isMobile ? 14 : 16, color: '#666' }} />
+                                <div style={{ color: '#888', fontSize: isMobile ? 10 : 12 }}>{item.view_count || 0}</div>
+                                </div>
+                            </div>
+                            </div>
+                        </Card>
+                        </motion.div>
+                    )}
+                    locale={{ emptyText: <div style={{ color: '#666', padding: 40 }}>暂无帖子，来发布第一个吧！</div> }}
+                />
+            </Col>
+            
+            <Col xs={0} md={6}>
+                <Card 
+                    title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家榜</span></Space>}
+                    style={{ background: 'rgba(20,20,20,0.6)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)' }}
+                    headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
+                >
+                    <div style={{ textAlign: 'center', padding: '20px 0', color: '#666' }}>
+                        {starUsers.length > 0 ? (
+                            starUsers.map(u => (
+                                <div key={u.id} style={{ marginBottom: 15, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }} onClick={() => showExpertInfo(u)}>
+                                    <Avatar size="large" src={u.avatar_url} icon={<UserOutlined />} />
+                                    <div style={{ textAlign: 'left' }}>
+                                        <div style={{ color: '#fff', fontWeight: 'bold' }}>
+                                            {u.nickname} <StarFilled style={{ color: '#ffd700', fontSize: 12 }} />
+                                        </div>
+                                        <div style={{ color: '#666', fontSize: 12 }}>{u.title || '技术专家'}</div>
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            <div style={{ color: '#888' }}>暂无上榜专家</div>
+                        )}
+                    </div>
+                </Card>
+                
+                <Card 
+                    title={<Space><SoundOutlined style={{ color: '#ff4d4f' }} /><span style={{ color: '#fff' }}>社区公告</span></Space>}
+                    style={{ marginTop: 20, background: 'rgba(20,20,20,0.6)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)' }}
+                    headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
+                >
+                    <List
+                        size="small"
+                        dataSource={announcements}
+                        renderItem={item => (
+                            <List.Item style={{ padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'block' }}>
+                                {item.display_image_url && (
+                                    <div style={{ marginBottom: 8 }}>
+                                        <img src={item.display_image_url} alt={item.title} style={{ width: '100%', borderRadius: 4 }} />
+                                    </div>
+                                )}
+                                <div style={{ color: '#fff', marginBottom: 4, fontWeight: 'bold' }}>
+                                    {item.link_url ? (
+                                        <a href={item.link_url} target="_blank" rel="noopener noreferrer" style={{ color: '#fff' }}>{item.title}</a>
+                                    ) : (
+                                        <span>{item.title}</span>
+                                    )}
+                                </div>
+                                 <div style={{ color: '#888', fontSize: 12 }}>
+                                    {item.content}
+                                </div>
+                            </List.Item>
+                        )}
+                        locale={{ emptyText: <div style={{ color: '#666', padding: '20px 0', textAlign: 'center' }}>暂无公告</div> }}
+                    />
+                </Card>
+            </Col>
+        </Row>
+      </div>
+
+      <CreateTopicModal 
+        visible={createModalVisible}
+        onClose={() => setCreateModalVisible(false)}
+        onSuccess={() => fetchTopics(searchText, category)}
+      />
+      
+      <LoginModal
+        visible={loginModalVisible}
+        onClose={() => setLoginModalVisible(false)}
+        onLoginSuccess={() => {
+             setCreateModalVisible(true);
+        }}
+      />
+
+      <Modal
+          open={expertModalVisible}
+          onCancel={() => setExpertModalVisible(false)}
+          footer={null}
+          title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家信息</span></Space>}
+          styles={{ 
+            content: { background: 'rgba(30, 30, 30, 0.95)', border: '1px solid rgba(255, 255, 255, 0.1)', backdropFilter: 'blur(10px)' },
+            header: { background: 'transparent', borderBottom: '1px solid rgba(255, 255, 255, 0.1)' },
+            body: { background: 'transparent' },
+            mask: { backdropFilter: 'blur(4px)' }
+          }}
+          closeIcon={<CloseOutlined style={{ color: 'rgba(255, 255, 255, 0.5)' }} />}
+          bodyStyle={{ textAlign: 'center' }}
+      >
+          {selectedExpert && (
+              <div>
+                  <Avatar size={80} src={selectedExpert.avatar_url} icon={<UserOutlined />} style={{ border: '3px solid #ffd700', marginBottom: 15, boxShadow: '0 0 15px rgba(255, 215, 0, 0.2)' }} />
+                  <Title level={4} style={{ marginBottom: 5, color: '#fff' }}>{selectedExpert.nickname}</Title>
+                  <Tag color="gold" style={{ marginBottom: 20, background: 'rgba(255, 215, 0, 0.15)', border: '1px solid rgba(255, 215, 0, 0.4)', color: '#ffd700' }}>{selectedExpert.title || '技术专家'}</Tag>
+                  
+                  {selectedExpert.skills && selectedExpert.skills.length > 0 && (
+                      <div style={{ marginTop: 20, textAlign: 'left' }}>
+                          <Text strong style={{ display: 'block', marginBottom: 10, color: '#00b96b' }}>擅长技能</Text>
+                          <Space wrap>
+                              {selectedExpert.skills.map((skill, idx) => (
+                                  <div key={idx} style={{ 
+                                      display: 'flex', 
+                                      alignItems: 'center', 
+                                      background: 'rgba(255, 255, 255, 0.05)', 
+                                      padding: '6px 12px', 
+                                      borderRadius: 6,
+                                      border: '1px solid rgba(255, 255, 255, 0.1)',
+                                      transition: 'all 0.3s'
+                                  }}>
+                                      {skill.icon && <img src={skill.icon} style={{ width: 16, height: 16, marginRight: 6 }} />}
+                                      <Text style={{ fontSize: 12, color: '#ddd' }}>{skill.text}</Text>
+                                  </div>
+                              ))}
+                          </Space>
+                      </div>
+                  )}
+              </div>
+          )}
+      </Modal>
+    </div>
+  );
+};
+
+export default ForumList;

frontend/src/pages/Home.css

@@ -0,0 +1,78 @@
+.tech-card {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid #303030 !important;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  box-shadow: none !important; /* 强制移除默认阴影 */
+  overflow: hidden; /* 确保子元素不会溢出产生黑边 */
+  outline: none;
+}
+
+.tech-card:hover {
+  border-color: #00b96b !important;
+  box-shadow: 0 0 20px rgba(0, 185, 107, 0.4) !important; /* 增强悬停发光 */
+  transform: translateY(-5px);
+}
+
+.tech-card .ant-card-body {
+  border-top: none !important;
+  box-shadow: none !important;
+}
+
+.tech-card-title {
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.tech-price {
+  color: #00b96b;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.product-scroll-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding: 30px 20px; /* 增加左右内边距，为悬停缩放和投影留出空间 */
+  margin: 0 -20px; /* 使用负外边距抵消内边距，使滚动条能延伸到版心边缘 */
+  width: calc(100% + 40px);
+}
+
+/* 自定义滚动条 */
+.product-scroll-container::-webkit-scrollbar {
+  height: 6px;
+}
+
+.product-scroll-container::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 3px;
+  margin: 0 20px; /* 让滚动条轨道在版心内显示 */
+}
+
+.product-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(24, 144, 255, 0.2);
+  border-radius: 3px;
+  transition: all 0.3s;
+}
+
+.product-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(24, 144, 255, 0.5);
+}
+
+/* 布局对齐 */
+.product-scroll-container .ant-row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start; 
+}
+
+.product-scroll-container .ant-col {
+  flex: 0 0 320px;
+  padding: 0 12px;
+}

frontend/src/pages/Home.jsx

@@ -0,0 +1,592 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Card, Row, Col, Tag, Button, Spin, Typography, Carousel } from 'antd';
+import { RocketOutlined, RightOutlined, LeftOutlined, RightCircleOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { getConfigs, getHomePageConfig } from '../api';
+import ActivityList from '../components/activity/ActivityList';
+import './Home.css';
+
+const { Title, Paragraph } = Typography;
+
+const Home = () => {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [typedText, setTypedText] = useState('');
+  const [isTypingComplete, setIsTypingComplete] = useState(false);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [currentSlide2, setCurrentSlide2] = useState(0);
+  const [homeConfig, setHomeConfig] = useState(null);
+  const [carousel1Items, setCarousel1Items] = useState([]);
+  const [carousel2Items, setCarousel2Items] = useState([]);
+  const fullText = "未来已来 AI 核心驱动";
+  const navigate = useNavigate();
+  const carouselRef = useRef(null);
+  const carouselRef2 = useRef(null);
+
+  useEffect(() => {
+    fetchProducts();
+    fetchHomePageConfig();
+    let i = 0;
+    const typingInterval = setInterval(() => {
+      i++;
+      setTypedText(fullText.slice(0, i));
+      if (i >= fullText.length) {
+        clearInterval(typingInterval);
+        setIsTypingComplete(true);
+      }
+    }, 150);
+
+    return () => clearInterval(typingInterval);
+  }, []);
+
+  const fetchProducts = async () => {
+    try {
+      const response = await getConfigs();
+      setProducts(response.data);
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchHomePageConfig = async () => {
+    try {
+      const response = await getHomePageConfig();
+      const data = response.data;
+      setHomeConfig(data);
+      setCarousel1Items(data.carousel1_items || []);
+      setCarousel2Items(data.carousel2_items || []);
+    } catch (error) {
+      console.error('Failed to fetch homepage config:', error);
+    }
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: (i) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1,
+        duration: 0.5,
+        type: "spring",
+        stiffness: 100
+      }
+    }),
+    hover: {
+      scale: 1.05,
+      rotateX: 5,
+      rotateY: 5,
+      transition: { duration: 0.3 }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+        <Spin size="large" />
+        <div style={{ marginTop: 20, color: '#00b96b' }}>加载硬件配置中...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={{ textAlign: 'center', marginBottom: 60 }}>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8 }}
+        >
+          <img 
+            src={homeConfig?.display_banner || '/shouye.png'} 
+            alt="首页Banner" 
+            style={{ 
+              width: '100%', 
+              maxWidth: 1200, 
+              height: 'auto',
+              borderRadius: 12,
+              boxShadow: '0 8px 32px rgba(24, 144, 255, 0.3)'
+            }} 
+          />
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.3 }}
+          style={{ marginTop: 30 }}
+        >
+          <h1 style={{
+            fontSize: '42px',
+            fontWeight: 'bold',
+            color: '#fff',
+            margin: 0,
+            letterSpacing: '4px'
+          }}>
+            {homeConfig?.main_title || '"创赢未来"云南2026创业大赛'}
+          </h1>
+        </motion.div>
+        
+        {/* 轮播图 */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.5 }}
+          style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
+        >
+          {/* 标题区域 */}
+          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
+              <span style={{ fontSize: 32, fontWeight: 'bold', color: '#fff' }}>{homeConfig?.carousel1_title || '"创赢未来"云南2026创业大赛'}</span>
+              <span style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>EVENTS</span>
+            </div>
+            {/* 箭头导航 */}
+            <div style={{ display: 'flex', gap: 12 }}>
+              <div 
+                onClick={() => carouselRef.current?.prev()}
+                onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
+                style={{ 
+                  width: 44, 
+                  height: 44, 
+                  borderRadius: '50%', 
+                  background: 'transparent',
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  border: '2px solid #1890ff',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <LeftOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
+              </div>
+              <div 
+                onClick={() => carouselRef.current?.next()}
+                onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
+                style={{ 
+                  width: 44, 
+                  height: 44, 
+                  borderRadius: '50%', 
+                  background: 'transparent',
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  border: '2px solid #1890ff',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <RightOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
+              </div>
+            </div>
+          </div>
+
+          {/* 轮播图主体 */}
+          <div style={{
+            position: 'relative',
+            borderRadius: 16,
+            overflow: 'hidden',
+            boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
+          }}>
+            <Carousel
+              ref={carouselRef}
+              autoplay
+              dots={false}
+              beforeChange={(_, next) => setCurrentSlide(next)}
+            >
+              {(carousel1Items.length > 0 ? carousel1Items : []).map((image, index) => (
+                <div key={index}>
+                  <div style={{
+                    height: 450,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
+                  }}>
+                    <img 
+                      src={image.display_image || image.image_url} 
+                      alt={image.title}
+                      style={{ 
+                        width: '100%', 
+                        height: '100%', 
+                        objectFit: 'cover' 
+                      }}
+                      onError={(e) => {
+                        e.target.style.display = 'none';
+                      }}
+                    />
+                    {/* 渐变遮罩 */}
+                    <div style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
+                    }} />
+                    {/* 标题区域 - 图片上方 */}
+                    <div style={{
+                      position: 'absolute',
+                      top: 40,
+                      left: 40,
+                      textAlign: 'left',
+                    }}>
+                      <h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
+                        {image.title}
+                      </h2>
+                      <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.9)', margin: '8px 0 0 0', textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}>
+                        {image.subtitle}
+                      </p>
+                    </div>
+                    {/* 底部信息 */}
+                    <div style={{
+                      position: 'absolute',
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      padding: '24px 40px',
+                      background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
+                    }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
+                        <Tag style={{ 
+                          background: image.status_color, 
+                          color: '#fff', 
+                          border: 'none',
+                          fontSize: 14,
+                          padding: '4px 16px',
+                          borderRadius: 20,
+                        }}>
+                          {image.status}
+                        </Tag>
+                        <span style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>{image.location}</span>
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <div>
+                          <h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{image.title}</h3>
+                          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
+                            <span style={{ marginRight: 20 }}>📅 {image.date}</span>
+                            <span>📍 {image.location}</span>
+                          </p>
+                        </div>
+                        <Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate('/competitions')}>
+                          立即报名
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </Carousel>
+
+            {/* 自定义分页指示器 */}
+            <div style={{
+              position: 'absolute',
+              bottom: 100,
+              right: 40,
+              display: 'flex',
+              gap: 8,
+            }}>
+              {(carousel1Items.length > 0 ? carousel1Items : []).map((_, index) => (
+                <div
+                  key={index}
+                  onClick={() => carouselRef.current?.goTo(index)}
+                  style={{
+                    width: currentSlide === index ? 32 : 10,
+                    height: 10,
+                    borderRadius: 5,
+                    background: currentSlide === index ? '#fff' : 'rgba(255,255,255,0.4)',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s',
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </motion.div>
+
+        {/* 第二个轮播图 */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          style={{ marginTop: 40, maxWidth: 1200, marginLeft: 'auto', marginRight: 'auto' }}
+        >
+          {/* 标题区域 */}
+          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
+              <span style={{ fontSize: 32, fontWeight: 'bold', color: '#fff' }}>{homeConfig?.carousel2_title || '"七彩云南创业福地"创业主题系列活动'}</span>
+              <span style={{ fontSize: 16, color: 'rgba(255,255,255,0.6)', letterSpacing: 2 }}>ACTIVITIES</span>
+            </div>
+            {/* 箭头导航 */}
+            <div style={{ display: 'flex', gap: 12 }}>
+              <div 
+                onClick={() => carouselRef2.current?.prev()}
+                onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
+                style={{ 
+                  width: 44, 
+                  height: 44, 
+                  borderRadius: '50%', 
+                  background: 'transparent',
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  border: '2px solid #1890ff',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <LeftOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
+              </div>
+              <div 
+                onClick={() => carouselRef2.current?.next()}
+                onMouseEnter={(e) => { e.currentTarget.style.background = '#1890ff'; e.currentTarget.querySelector('svg').style.color = '#fff'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('svg').style.color = '#1890ff'; }}
+                style={{ 
+                  width: 44, 
+                  height: 44, 
+                  borderRadius: '50%', 
+                  background: 'transparent',
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  border: '2px solid #1890ff',
+                  transition: 'all 0.3s'
+                }}
+              >
+                <RightOutlined style={{ fontSize: 18, color: '#1890ff', transition: 'color 0.3s' }} />
+              </div>
+            </div>
+          </div>
+
+          {/* 轮播图主体 */}
+          <div style={{
+            position: 'relative',
+            borderRadius: 16,
+            overflow: 'hidden',
+            boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)',
+          }}>
+            <Carousel
+              ref={carouselRef2}
+              autoplay
+              dots={false}
+              beforeChange={(_, next) => setCurrentSlide2(next)}
+            >
+              {(carousel2Items.length > 0 ? carousel2Items : []).map((image, index) => (
+                <div key={index}>
+                  <div style={{
+                    height: 450,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    background: 'linear-gradient(135deg, #1890ff 0%, #69c0ff 100%)',
+                  }}>
+                    <img 
+                      src={image.display_image || image.image_url} 
+                      alt={image.title}
+                      style={{ 
+                        width: '100%', 
+                        height: '100%', 
+                        objectFit: 'cover' 
+                      }}
+                      onError={(e) => {
+                        e.target.style.display = 'none';
+                      }}
+                    />
+                    {/* 渐变遮罩 */}
+                    <div style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%)',
+                    }} />
+                    {/* 标题区域 - 图片上方 */}
+                    <div style={{
+                      position: 'absolute',
+                      top: 40,
+                      left: 40,
+                      textAlign: 'left',
+                    }}>
+                      <h2 style={{ fontSize: 36, fontWeight: 'bold', color: '#fff', margin: 0, textShadow: '2px 2px 4px rgba(0,0,0,0.3)' }}>
+                        {image.title}
+                      </h2>
+                      <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.9)', margin: '8px 0 0 0', textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}>
+                        {image.subtitle}
+                      </p>
+                    </div>
+                    {/* 底部信息 */}
+                    <div style={{
+                      position: 'absolute',
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      padding: '24px 40px',
+                      background: 'linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%)',
+                    }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
+                        <Tag style={{ 
+                          background: image.status_color, 
+                          color: '#fff', 
+                          border: 'none',
+                          fontSize: 14,
+                          padding: '4px 16px',
+                          borderRadius: 20,
+                        }}>
+                          {image.status}
+                        </Tag>
+                        <span style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>{image.location}</span>
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <div>
+                          <h3 style={{ color: '#fff', fontSize: 24, fontWeight: 'bold', margin: 0 }}>{image.title}</h3>
+                          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14, margin: '8px 0 0 0' }}>
+                            <span style={{ marginRight: 20 }}>📅 {image.date}</span>
+                            <span>📍 {image.location}</span>
+                          </p>
+                        </div>
+                        <Button type="primary" size="large" style={{ borderRadius: 24, paddingLeft: 24, paddingRight: 24 }} onClick={() => navigate('/competitions')}>
+                          立即报名
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </Carousel>
+
+            {/* 自定义分页指示器 */}
+            <div style={{
+              position: 'absolute',
+              bottom: 100,
+              right: 40,
+              display: 'flex',
+              gap: 8,
+            }}>
+              {(carousel2Items.length > 0 ? carousel2Items : []).map((_, index) => (
+                <div
+                  key={index}
+                  onClick={() => carouselRef2.current?.goTo(index)}
+                  style={{
+                    width: currentSlide2 === index ? 32 : 10,
+                    height: 10,
+                    borderRadius: 5,
+                    background: currentSlide2 === index ? '#fff' : 'rgba(255,255,255,0.4)',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s',
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+      
+      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}>
+        <ActivityList />
+      </div>
+
+      <div className="product-scroll-container">
+        <Row gutter={[24, 24]} wrap={false}>
+          {products.map((product, index) => (
+            <Col key={product.id} flex="0 0 320px">
+              <motion.div
+                custom={index}
+                initial="hidden"
+                animate="visible"
+                whileHover="hover"
+                variants={cardVariants}
+                style={{ perspective: 1000 }}
+              >
+              <Card
+                className="tech-card glass-panel"
+                variant="borderless"
+                cover={
+                  <div style={{ 
+                    height: 200, 
+                    background: 'linear-gradient(135deg, rgba(31,31,31,0.8), rgba(42,42,42,0.8))', 
+                    display: 'flex', 
+                    justifyContent: 'center', 
+                    alignItems: 'center',
+                    color: '#444',
+                    borderBottom: '1px solid rgba(255,255,255,0.05)',
+                    overflow: 'hidden'
+                  }}>
+                    {product.static_image_url ? (
+                      <img 
+                        src={product.static_image_url} 
+                        alt={product.name} 
+                        style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
+                      />
+                    ) : (
+                      <motion.div
+                        animate={{ y: [0, -10, 0] }}
+                        transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
+                      >
+                        <RocketOutlined style={{ fontSize: 60, color: '#00b96b' }} />
+                      </motion.div>
+                    )}
+                  </div>
+                }
+                onClick={() => navigate(`/product/${product.id}`)}
+              >
+                <div className="tech-card-title neon-text-blue">{product.name}</div>
+                <div style={{ marginBottom: 10, height: 40, overflow: 'hidden', color: '#bbb' }}>
+                  {product.description}
+                </div>
+                <div style={{ marginBottom: 15, display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+                  <Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', margin: 0 }}>{product.chip_type}</Tag>
+                  {product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', margin: 0 }}>Camera</Tag>}
+                  {product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', margin: 0 }}>Mic</Tag>}
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div className="tech-price neon-text-green">¥{product.price}</div>
+                  <Button type="primary" shape="circle" icon={<RightOutlined />} />
+                </div>
+              </Card>
+            </motion.div>
+          </Col>
+        ))}
+      </Row>
+      </div>
+
+      {/* 主办单位信息 */}
+      <div style={{ maxWidth: 1200, margin: '40px auto 0', padding: '0 24px', textAlign: 'center' }}>
+        <div style={{
+          background: 'rgba(255, 255, 255, 0.1)',
+          borderRadius: 16,
+          padding: '24px 40px',
+          backdropFilter: 'blur(10px)',
+          border: '1px solid rgba(255, 255, 255, 0.2)',
+        }}>
+          <p style={{ 
+            fontSize: 18, 
+            color: '#fff', 
+            margin: 0,
+            lineHeight: 2,
+          }}>
+            <span style={{ fontWeight: 'bold', marginRight: 8 }}>主办单位：</span>{homeConfig?.organizer || '云南省人力资源和社会保障厅'}
+            <span style={{ margin: '0 20px' }}>|</span>
+            <span style={{ fontWeight: 'bold', marginRight: 8 }}>承办单位：</span>{homeConfig?.undertaker || '云南省就业局'}
+          </p>
+        </div>
+      </div>
+
+      <style>{`
+        .cursor-blink {
+          animation: blink 1s step-end infinite;
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Home;

frontend/src/pages/MyOrders.jsx

@@ -0,0 +1,388 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Card, List, Tag, Typography, message, Space, Statistic, Divider, Modal, Descriptions, Tabs } from 'antd';
+import { MobileOutlined, LockOutlined, SearchOutlined, CarOutlined, InboxOutlined, SafetyCertificateOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, UserOutlined, EnvironmentOutlined, PhoneOutlined, CalendarOutlined } from '@ant-design/icons';
+import { getMySignups } from '../api';
+import { motion } from 'framer-motion';
+import LoginModal from '../components/LoginModal';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+
+const { Title, Text, Paragraph } = Typography;
+
+const MyOrders = () => {
+  const [loading, setLoading] = useState(false);
+  const [orders, setOrders] = useState([]);
+  const [activities, setActivities] = useState([]);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [currentOrder, setCurrentOrder] = useState(null);
+  const [signupInfoModalVisible, setSignupInfoModalVisible] = useState(false);
+  const [currentSignupInfo, setCurrentSignupInfo] = useState(null);
+  const [loginVisible, setLoginVisible] = useState(false);
+  const navigate = useNavigate();
+  
+  const { user, login } = useAuth();
+
+  useEffect(() => {
+    if (user) {
+      handleQueryData();
+    }
+  }, [user]);
+
+  const showDetail = (order) => {
+    setCurrentOrder(order);
+    setModalVisible(true);
+  };
+
+  const showSignupInfo = (info) => {
+    setCurrentSignupInfo(info);
+    setSignupInfoModalVisible(true);
+  };
+
+  const handleQueryData = async () => {
+    setLoading(true);
+    try {
+      const { default: api } = await import('../api');
+      
+      // Parallel fetch
+      const [ordersRes, activitiesRes] = await Promise.allSettled([
+          api.get('/orders/'),
+          getMySignups()
+      ]);
+
+      if (ordersRes.status === 'fulfilled') {
+          setOrders(ordersRes.value.data);
+      }
+      
+      if (activitiesRes.status === 'fulfilled') {
+          setActivities(activitiesRes.value.data);
+      }
+
+    } catch (error) {
+      console.error(error);
+      message.error('查询出错');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusTag = (status) => {
+    switch (status) {
+      case 'paid': return <Tag icon={<CheckCircleOutlined />} color="success">已支付</Tag>;
+      case 'pending': return <Tag icon={<ClockCircleOutlined />} color="warning">待支付</Tag>;
+      case 'shipped': return <Tag icon={<CarOutlined />} color="processing">已发货</Tag>;
+      case 'cancelled': return <Tag icon={<CloseCircleOutlined />} color="default">已取消</Tag>;
+      default: return <Tag>{status}</Tag>;
+    }
+  };
+
+  const getOrderTitle = (order) => {
+    if (order.config_name) return order.config_name;
+    if (order.course_title) return order.course_title;
+    if (order.activity_title) return order.activity_title;
+    // Fallback to ID if no name/title
+    if (order.config) return `硬件 ID: ${order.config}`;
+    if (order.course) return `课程 ID: ${order.course}`;
+    if (order.activity) return `活动 ID: ${order.activity}`;
+    return '未知商品';
+  };
+
+  return (
+    <div style={{ 
+      minHeight: '80vh', 
+      display: 'flex', 
+      alignItems: 'center', 
+      justifyContent: 'center',
+      padding: '20px'
+    }}>
+      <div style={{ width: '100%', maxWidth: 1200 }}>
+        <div style={{ textAlign: 'center', marginBottom: 40 }}>
+           <SafetyCertificateOutlined style={{ fontSize: 48, color: '#00b96b', marginBottom: 20 }} />
+           <Title level={2} style={{ color: '#fff', margin: 0, fontFamily: "'Orbitron', sans-serif" }}>我的信息</Title>
+           <Text style={{ color: '#666' }}>个人信息管理中心</Text>
+        </div>
+      
+        {!user ? (
+           <div style={{ textAlign: 'center', padding: 40, background: 'rgba(0,0,0,0.5)', borderRadius: 16 }}>
+             <Text style={{ color: '#fff', fontSize: 18, display: 'block', marginBottom: 20 }}>请先登录查看你的项目</Text>
+             <Button type="primary" size="large" onClick={() => setLoginVisible(true)}>立即登录</Button>
+           </div>
+        ) : (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+            <div style={{ marginBottom: 20, textAlign: 'right', color: '#fff' }}>
+               当前登录用户: <span style={{ color: '#00b96b', fontWeight: 'bold', marginRight: 10 }}>{user.nickname}</span>
+               <Button 
+                 onClick={handleQueryData}
+                 loading={loading}
+                 icon={<SearchOutlined />}
+               >
+                 刷新
+               </Button>
+            </div>
+            
+            <Tabs defaultActiveKey="1" items={[
+                {
+                    key: '1',
+                    label: <span style={{ fontSize: 16 }}>我的订单</span>,
+                    children: (
+                        <List
+                        grid={{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}
+                        dataSource={orders}
+                        loading={loading}
+                        renderItem={order => (
+                            <List.Item>
+                              <Card 
+                                hoverable
+                                onClick={() => showDetail(order)}
+                                title={<Space><span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
+                                style={{ 
+                                  background: 'rgba(0,0,0,0.6)', 
+                                  border: '1px solid rgba(255,255,255,0.1)', 
+                                  marginBottom: 10,
+                                  backdropFilter: 'blur(10px)'
+                                }}
+                                headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
+                                bodyStyle={{ padding: '20px' }}
+                              >
+                                <div style={{ color: '#ccc' }}>
+                                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+                                     <Text strong style={{ color: '#1890ff', fontSize: 16 }}>{order.total_price} 元</Text>
+                                     <Text style={{ color: '#888' }}>{new Date(order.created_at).toLocaleString()}</Text>
+                                  </div>
+                                  
+                                  <div style={{ background: 'rgba(255,255,255,0.05)', padding: 15, borderRadius: 8, marginBottom: 15 }}>
+                                     <Space align="center" size="middle">
+                                        {order.config_image ? (
+                                            <img 
+                                                src={order.config_image} 
+                                                alt={getOrderTitle(order)} 
+                                                style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)' }} 
+                                            />
+                                        ) : (
+                                            <div style={{ 
+                                                width: 60, 
+                                                height: 60, 
+                                                background: 'rgba(24,144,255,0.1)', 
+                                                borderRadius: 8, 
+                                                display: 'flex', 
+                                                alignItems: 'center', 
+                                                justifyContent: 'center',
+                                                border: '1px solid rgba(24,144,255,0.2)'
+                                            }}>
+                                                <InboxOutlined style={{ fontSize: 24, color: '#1890ff' }} />
+                                            </div>
+                                        )}
+                                        <div>
+                                          <div style={{ color: '#fff', fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{getOrderTitle(order)}</div>
+                                          <div style={{ color: '#888' }}>数量: <span style={{ color: '#00b96b' }}>x{order.quantity}</span></div>
+                                        </div>
+                                     </Space>
+                                  </div>
+
+                                  {(order.courier_name || order.tracking_number) && (
+                                    <div style={{ background: 'rgba(24,144,255,0.1)', padding: 15, borderRadius: 8, border: '1px solid rgba(24,144,255,0.3)' }}>
+                                      <Space direction="vertical" style={{ width: '100%' }}>
+                                         <Space>
+                                           <CarOutlined style={{ color: '#1890ff', fontSize: 18 }} />
+                                           <Text style={{ color: '#fff', fontSize: 16 }}>物流信息</Text>
+                                         </Space>
+                                         <Divider style={{ margin: '8px 0', borderColor: 'rgba(255,255,255,0.1)' }} />
+                                         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                            <span style={{ color: '#aaa' }}>快递公司:</span>
+                                            <span style={{ color: '#fff' }}>{order.courier_name || '未知'}</span>
+                                         </div>
+                                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                            <span style={{ color: '#aaa' }}>快递单号:</span>
+                                            {order.tracking_number ? (
+                                                <div onClick={(e) => e.stopPropagation()}>
+                                                    <Paragraph 
+                                                        copyable={{ text: order.tracking_number, tooltips: ['复制', '已复制'] }} 
+                                                        style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16, margin: 0 }}
+                                                    >
+                                                        {order.tracking_number}
+                                                    </Paragraph>
+                                                </div>
+                                            ) : (
+                                                <span style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16 }}>暂无单号</span>
+                                            )}
+                                         </div>
+                                      </Space>
+                                    </div>
+                                  )}
+                                </div>
+                              </Card>
+                            </List.Item>
+                          )}
+                          locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无订单信息</div> }}
+                        />
+                    )
+                },
+                {
+                    key: '2',
+                    label: <span style={{ fontSize: 16 }}>我的活动</span>,
+                    children: (
+                        <List
+                        grid={{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}
+                        dataSource={activities}
+                        loading={loading}
+                        renderItem={item => {
+                            const activity = item.activity_info || item.activity || item;
+                            return (
+                                <List.Item>
+                                  <Card 
+                                    hoverable
+                                    onClick={() => navigate(`/activity/${activity.id}`)}
+                                    cover={
+                                        <div style={{ height: 160, overflow: 'hidden' }}>
+                                            <img 
+                                                alt={activity.title} 
+                                                src={activity.cover_image || activity.banner_url || 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400&h=200&fit=crop'} 
+                                                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                            />
+                                        </div>
+                                    }
+                                    style={{ 
+                                      background: 'rgba(0,0,0,0.6)', 
+                                      border: '1px solid rgba(255,255,255,0.1)', 
+                                      marginBottom: 10,
+                                      backdropFilter: 'blur(10px)',
+                                      overflow: 'hidden'
+                                    }}
+                                    headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
+                                    bodyStyle={{ padding: '16px' }}
+                                  >
+                                    <div style={{ color: '#ccc' }}>
+                                      <Title level={4} style={{ color: '#fff', marginBottom: 10, fontSize: 18 }} ellipsis={{ rows: 1 }}>{activity.title}</Title>
+                                      
+                                      <div style={{ marginBottom: 12 }}>
+                                         <Space>
+                                            <CalendarOutlined style={{ color: '#00b96b' }} />
+                                            <Text style={{ color: '#bbb' }}>{new Date(activity.start_time).toLocaleDateString()}</Text>
+                                         </Space>
+                                      </div>
+                                      
+                                      <div style={{ marginBottom: 12 }}>
+                                         <Space>
+                                            <EnvironmentOutlined style={{ color: '#00f0ff' }} />
+                                            <Text style={{ color: '#bbb' }} ellipsis>{activity.location || '线上活动'}</Text>
+                                         </Space>
+                                      </div>
+
+                                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
+                                          <Tag color="blue">{activity.status || '已报名'}</Tag>
+                                          <Space>
+                                              {item.signup_info && Object.keys(item.signup_info).length > 0 && (
+                                                <Button size="small" onClick={(e) => { e.stopPropagation(); showSignupInfo(item.signup_info); }}>
+                                                    查看报名信息
+                                                </Button>
+                                              )}
+                                              <Button type="primary" size="small" ghost>查看详情</Button>
+                                          </Space>
+                                      </div>
+                                    </div>
+                                  </Card>
+                                </List.Item>
+                            );
+                        }}
+                        locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无活动报名</div> }}
+                        />
+                    )
+                }
+            ]} />
+          </motion.div>
+        )}
+        
+        <Modal
+            title={<Title level={4} style={{ margin: 0 }}>订单详情</Title>}
+            open={modalVisible}
+            onCancel={() => setModalVisible(false)}
+            footer={[
+                <Button key="close" onClick={() => setModalVisible(false)}>
+                关闭
+                </Button>
+            ]}
+            width={600}
+            centered
+        >
+            {currentOrder && (
+                <Descriptions column={1} bordered size="middle" labelStyle={{ width: '140px', fontWeight: 'bold' }}>
+                    <Descriptions.Item label="订单号">
+                        <Paragraph copyable={{ text: currentOrder.id }} style={{ marginBottom: 0 }}>{currentOrder.id}</Paragraph>
+                    </Descriptions.Item>
+                    <Descriptions.Item label="商品名称">{getOrderTitle(currentOrder)}</Descriptions.Item>
+                    <Descriptions.Item label="下单时间">{new Date(currentOrder.created_at).toLocaleString()}</Descriptions.Item>
+                    <Descriptions.Item label="状态更新时间">{new Date(currentOrder.updated_at).toLocaleString()}</Descriptions.Item>
+                    <Descriptions.Item label="当前状态">{getStatusTag(currentOrder.status)}</Descriptions.Item>
+                    <Descriptions.Item label="订单总价">
+                        <Text strong style={{ color: '#00b96b' }}>¥{currentOrder.total_price}</Text>
+                    </Descriptions.Item>
+                    
+                    <Descriptions.Item label="收件人信息">
+                        <Space direction="vertical" size={0}>
+                            <Space><UserOutlined /> {currentOrder.customer_name}</Space>
+                            <Space><PhoneOutlined /> {currentOrder.phone_number}</Space>
+                            <Space align="start"><EnvironmentOutlined /> {currentOrder.shipping_address}</Space>
+                        </Space>
+                    </Descriptions.Item>
+                    
+                    {currentOrder.salesperson_name && (
+                        <Descriptions.Item label="订单推荐员">
+                            <Space>
+                                {currentOrder.salesperson_name} 
+                                {currentOrder.salesperson_code && <Tag color="blue">{currentOrder.salesperson_code}</Tag>}
+                            </Space>
+                        </Descriptions.Item>
+                    )}
+
+                    {(currentOrder.status === 'shipped' || currentOrder.courier_name) && (
+                        <>
+                            <Descriptions.Item label="快递公司">{currentOrder.courier_name || '未知'}</Descriptions.Item>
+                            <Descriptions.Item label="快递单号">
+                                {currentOrder.tracking_number ? (
+                                    <Paragraph copyable={{ text: currentOrder.tracking_number }} style={{ marginBottom: 0 }}>
+                                        {currentOrder.tracking_number}
+                                    </Paragraph>
+                                ) : '暂无单号'}
+                            </Descriptions.Item>
+                        </>
+                    )}
+                </Descriptions>
+            )}
+        </Modal>
+
+        <LoginModal 
+          visible={loginVisible} 
+          onClose={() => setLoginVisible(false)}
+          onLoginSuccess={(userData) => {
+            login(userData);
+            if (userData.phone_number) {
+               handleQueryData();
+            }
+          }}
+        />
+
+        <Modal
+            title="报名信息详情"
+            open={signupInfoModalVisible}
+            onCancel={() => setSignupInfoModalVisible(false)}
+            footer={[
+                <Button key="close" onClick={() => setSignupInfoModalVisible(false)}>
+                关闭
+                </Button>
+            ]}
+        >
+            {currentSignupInfo && (
+                <Descriptions column={1} bordered>
+                    {Object.entries(currentSignupInfo).map(([key, value]) => (
+                        <Descriptions.Item label={key} key={key}>
+                            {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+                        </Descriptions.Item>
+                    ))}
+                </Descriptions>
+            )}
+        </Modal>
+      </div>
+    </div>
+  );
+};
+
+export default MyOrders;

frontend/src/pages/Payment.css

@@ -0,0 +1,52 @@
+.payment-container {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid #303030;
+  border-radius: 12px;
+  text-align: center;
+}
+
+.payment-title {
+  color: #fff;
+  font-size: 28px;
+  margin-bottom: 30px;
+}
+
+.payment-amount {
+  font-size: 48px;
+  color: #1890ff;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.payment-info {
+  text-align: left;
+  background: rgba(0,0,0,0.3);
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 30px;
+  color: #ccc;
+}
+
+.payment-method {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.payment-method-item {
+  border: 1px solid #444;
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #fff;
+}
+
+.payment-method-item.active {
+  border-color: #00b96b;
+  background: rgba(0, 185, 107, 0.1);
+}

frontend/src/pages/Payment.jsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { Button, message, Result, Spin } from 'antd';
+import { WechatOutlined, AlipayCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { QRCodeSVG } from 'qrcode.react';
+import { getOrder, initiatePayment, confirmPayment, nativePay, queryOrderStatus } from '../api';
+import './Payment.css';
+
+const Payment = () => {
+  const { orderId: initialOrderId } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [currentOrderId, setCurrentOrderId] = useState(location.state?.order_id || initialOrderId);
+  const [order, setOrder] = useState(location.state?.orderInfo || null);
+  const [codeUrl, setCodeUrl] = useState(location.state?.codeUrl || null);
+  const [loading, setLoading] = useState(!location.state?.orderInfo && !location.state?.codeUrl);
+  const [paying, setPaying] = useState(!!location.state?.codeUrl);
+  const [paySuccess, setPaySuccess] = useState(false);
+  const [paymentMethod, setPaymentMethod] = useState('wechat');
+
+  useEffect(() => {
+    if (codeUrl && !paying) {
+      setPaying(true);
+    }
+  }, [codeUrl]);
+
+  useEffect(() => {
+    console.log('Payment page state:', { currentOrderId, order, codeUrl, paying });
+    if (!order && !codeUrl) {
+      fetchOrder();
+    }
+  }, [currentOrderId]);
+
+  useEffect(() => {
+    if (paying && !codeUrl && order) {
+      handlePay();
+    }
+  }, [paying, codeUrl, order]);
+
+  // 轮询订单状态
+  useEffect(() => {
+    let timer;
+    if (paying && !paySuccess) {
+      timer = setInterval(async () => {
+        try {
+          const response = await queryOrderStatus(currentOrderId);
+          if (response.data.status === 'paid') {
+            setPaySuccess(true);
+            setPaying(false);
+            clearInterval(timer);
+          }
+        } catch (error) {
+          console.error('Check payment status failed:', error);
+        }
+      }, 3000);
+    }
+    return () => clearInterval(timer);
+  }, [paying, paySuccess, currentOrderId]);
+
+  const fetchOrder = async () => {
+    try {
+      const response = await getOrder(currentOrderId);
+      setOrder(response.data);
+    } catch (error) {
+      console.error('Failed to fetch order:', error);
+      // Fallback if getOrder API fails (404/405), we might show basic info or error
+      // Assuming for now it works or we handle it
+      message.error('无法获取订单信息，请重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePay = async () => {
+    if (paymentMethod === 'alipay') {
+        message.info('暂未开通支付宝支付，请使用微信支付');
+        return;
+    }
+
+    if (codeUrl) {
+      setPaying(true);
+      return;
+    }
+
+    if (!order) {
+      message.error('正在加载订单信息，请稍后...');
+      return;
+    }
+
+    setPaying(true);
+    try {
+      const orderData = {
+        goodid: order.config || order.goodid,
+        quantity: order.quantity,
+        customer_name: order.customer_name,
+        phone_number: order.phone_number,
+        shipping_address: order.shipping_address,
+        ref_code: order.ref_code
+      };
+      
+      const response = await nativePay(orderData);
+      setCodeUrl(response.data.code_url);
+      if (response.data.order_id) {
+        setCurrentOrderId(response.data.order_id);
+      }
+      message.success('支付二维码已生成');
+    } catch (error) {
+      console.error(error);
+      message.error('生成支付二维码失败，请重试');
+      setPaying(false);
+    }
+  };
+
+  if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" /><div style={{ marginTop: 20 }}>正在加载订单信息...</div></div>;
+
+  if (paySuccess) {
+    return (
+      <div className="payment-container" style={{ borderColor: '#1890ff' }}>
+        <Result
+          status="success"
+          icon={<CheckCircleOutlined style={{ color: '#1890ff' }} />}
+          title={<span style={{ color: '#fff' }}>支付成功</span>}
+          subTitle={<span style={{ color: '#888' }}>订单 {currentOrderId} 已完成支付，我们将尽快为您发货。</span>}
+          extra={[
+            <Button type="primary" key="home" onClick={() => navigate('/')}>
+              返回首页
+            </Button>,
+          ]}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="payment-container">
+      <div className="payment-title">收银台</div>
+      
+      {order ? (
+        <>
+          <div className="payment-amount">¥{order.total_price}</div>
+          <div className="payment-info">
+            <p><strong>订单编号：</strong> {order.id}</p>
+            <p><strong>商品名称：</strong> {order.config_name || 'AI 硬件设备'}</p>
+            <p><strong>收货人：</strong> {order.customer_name}</p>
+          </div>
+        </>
+      ) : (
+        <div className="payment-info">
+           <p>订单 ID: {currentOrderId}</p>
+           <p>无法加载详情，但您可以尝试支付。</p>
+        </div>
+      )}
+
+      <div style={{ color: '#fff', marginBottom: 15, textAlign: 'left' }}>选择支付方式：</div>
+      <div className="payment-method">
+        <div 
+          className={`payment-method-item ${paymentMethod === 'wechat' ? 'active' : ''}`}
+          onClick={() => setPaymentMethod('wechat')}
+        >
+          <WechatOutlined style={{ color: '#09BB07', fontSize: 24, verticalAlign: 'middle', marginRight: 8 }} />
+          微信支付
+        </div>
+        <div 
+          className={`payment-method-item ${paymentMethod === 'alipay' ? 'active' : ''}`}
+          onClick={() => setPaymentMethod('alipay')}
+        >
+          <AlipayCircleOutlined style={{ color: '#1677FF', fontSize: 24, verticalAlign: 'middle', marginRight: 8 }} />
+          支付宝
+        </div>
+      </div>
+
+      {paying && (
+        <div style={{ margin: '20px 0', padding: 20, background: '#fff', borderRadius: 8, display: 'inline-block', minWidth: 240, minHeight: 280 }}>
+           {codeUrl ? (
+              <>
+                <div style={{ background: '#fff', padding: '10px', borderRadius: '4px', display: 'inline-block' }}>
+                  <QRCodeSVG value={codeUrl} size={200} />
+                </div>
+                <p style={{ color: '#000', marginTop: 15, fontWeight: 'bold', fontSize: 18 }}>请使用微信扫码支付</p>
+                <p style={{ color: '#666', fontSize: 14 }}>支付完成后将自动跳转</p>
+              </>
+            ) : (
+             <div style={{ padding: '40px 0', textAlign: 'center' }}>
+               <Spin />
+               <div style={{ marginTop: 10 }}>正在生成支付二维码...</div>
+             </div>
+           )}
+        </div>
+      )}
+
+      {!paying && (
+        <Button 
+          type="primary" 
+          size="large" 
+          block 
+          onClick={handlePay} 
+          style={{ height: 50, fontSize: 18, background: paymentMethod === 'wechat' ? '#09BB07' : '#1677FF' }}
+        >
+          立即支付
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Payment;

frontend/src/pages/ProductDetail.css

@@ -0,0 +1,33 @@
+.product-detail-container {
+  color: #fff;
+}
+
+.feature-section {
+  padding: 60px 0;
+  border-bottom: 1px solid #303030;
+  text-align: center;
+}
+
+.feature-title {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #00b96b;
+}
+
+.feature-desc {
+  font-size: 18px;
+  color: #888;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.spec-tag {
+  background: rgba(24, 144, 255, 0.1);
+  border: 1px solid #1890ff;
+  color: #1890ff;
+  padding: 5px 15px;
+  border-radius: 4px;
+  margin-right: 10px;
+  display: inline-block;
+}

frontend/src/pages/ProductDetail.jsx

@@ -0,0 +1,327 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { Button, Row, Col, Tag, Statistic, Modal, Form, Input, InputNumber, message, Spin, Descriptions, Radio, Alert } from 'antd';
+import { ShoppingCartOutlined, SafetyCertificateOutlined, ThunderboltOutlined, EyeOutlined, StarOutlined } from '@ant-design/icons';
+import { getConfigs, createOrder, nativePay } from '../api';
+import ModelViewer from '../components/ModelViewer';
+import LoginModal from '../components/LoginModal';
+import { useAuth } from '../context/AuthContext';
+import './ProductDetail.css';
+
+const ProductDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [loginVisible, setLoginVisible] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm();
+  
+  const { user, login } = useAuth();
+
+  // 优先从 URL 获取，如果没有则从 localStorage 获取，不再默认绑定 flw666
+  const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
+
+  useEffect(() => {
+    // 自动填充用户信息
+    if (user) {
+        form.setFieldsValue({
+            phone_number: user.phone_number,
+            // 如果后端返回了地址信息，这里也可以填充
+            // shipping_address: user.shipping_address 
+        });
+    }
+  }, [isModalOpen, user]); // 当弹窗打开或用户状态变化时填充
+
+  useEffect(() => {
+    console.log('[ProductDetail] Current ref_code:', refCode);
+  }, [refCode]);
+
+  useEffect(() => {
+    fetchProduct();
+  }, [id]);
+
+  const fetchProduct = async () => {
+    try {
+      const response = await getConfigs();
+      const found = response.data.find(p => String(p.id) === id);
+      if (found) {
+        setProduct(found);
+      } else {
+        message.error('未找到该产品');
+        navigate('/');
+      }
+    } catch (error) {
+      console.error('Failed to fetch product:', error);
+      message.error('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBuy = async (values) => {
+    setSubmitting(true);
+    try {
+      const isPickup = values.delivery_method === 'pickup';
+      const orderData = {
+        goodid: product.id,
+        quantity: values.quantity,
+        customer_name: values.customer_name,
+        phone_number: values.phone_number,
+        // 如果是自提，手动设置地址，否则使用表单中的地址
+        shipping_address: isPickup ? '线下自提' : values.shipping_address,
+        ref_code: refCode
+      };
+      
+      console.log('提交订单数据:', orderData); // 调试日志
+      const response = await nativePay(orderData);
+      message.success('订单已创建，请完成支付');
+      navigate(`/payment/${response.data.order_id}`, { 
+         state: { 
+           codeUrl: response.data.code_url,
+           order_id: response.data.order_id,
+           orderInfo: {
+             ...orderData,
+             id: response.data.order_id,
+             config_name: product.name,
+             total_price: product.price * values.quantity
+           }
+         } 
+       });
+    } catch (error) {
+      console.error(error);
+      message.error('创建订单失败，请检查填写信息');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const getModelPaths = (p) => {
+    if (!p) return null;
+    
+    // 优先使用后台配置的 3D 模型 URL
+    if (p.model_3d_url) {
+      return { obj: p.model_3d_url };
+    }
+
+    return null;
+  };
+
+  const modelPaths = getModelPaths(product);
+
+  const renderIcon = (feature) => {
+      if (feature.display_icon) {
+          return <img src={feature.display_icon} alt={feature.title} style={{ width: 60, height: 60, objectFit: 'contain', marginBottom: 20 }} />;
+      }
+      
+      const iconProps = { style: { fontSize: 60, color: '#00b96b', marginBottom: 20 } };
+      
+      switch(feature.icon_name) {
+          case 'SafetyCertificate':
+              return <SafetyCertificateOutlined {...iconProps} />;
+          case 'Eye':
+              return <EyeOutlined {...iconProps} style={{ ...iconProps.style, color: '#1890ff' }} />;
+          case 'Thunderbolt':
+              return <ThunderboltOutlined {...iconProps} style={{ ...iconProps.style, color: '#faad14' }} />;
+          default:
+              return <StarOutlined {...iconProps} />;
+      }
+  };
+
+  if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" /></div>;
+  if (!product) return null;
+
+  return (
+    <div className="product-detail-container" style={{ paddingBottom: '60px' }}>
+      {/* Hero Section */}
+      <Row gutter={40} align="middle" style={{ minHeight: '60vh' }}>
+        <Col xs={24} md={12}>
+          <div style={{ 
+            height: 400, 
+            background: 'radial-gradient(circle, #2a2a2a 0%, #000 100%)', 
+            borderRadius: 20, 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center',
+            border: '1px solid #333',
+            overflow: 'hidden'
+          }}>
+             {modelPaths ? (
+               <ModelViewer objPath={modelPaths.obj} mtlPath={modelPaths.mtl} />
+             ) : product.static_image_url ? (
+               <img src={product.static_image_url} alt={product.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
+             ) : (
+               <ThunderboltOutlined style={{ fontSize: 120, color: '#1890ff' }} />
+             )}
+          </div>
+        </Col>
+        <Col xs={24} md={12}>
+          <h1 style={{ fontSize: 48, fontWeight: 'bold', color: '#fff' }}>{product.name}</h1>
+          <p style={{ fontSize: 20, color: '#888', margin: '20px 0' }}>{product.description}</p>
+          
+          <div style={{ marginBottom: 30, display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+            <Tag color="cyan" style={{ background: 'rgba(0,255,255,0.1)', border: '1px solid cyan', padding: '4px 12px', fontSize: '14px', margin: 0 }}>{product.chip_type}</Tag>
+            {product.has_camera && <Tag color="blue" style={{ background: 'rgba(0,0,255,0.1)', border: '1px solid blue', padding: '4px 12px', fontSize: '14px', margin: 0 }}>高清摄像头</Tag>}
+            {product.has_microphone && <Tag color="purple" style={{ background: 'rgba(114,46,209,0.1)', border: '1px solid #722ed1', padding: '4px 12px', fontSize: '14px', margin: 0 }}>阵列麦克风</Tag>}
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, marginBottom: 20 }}>
+             <Statistic title="售价" value={product.price} prefix="¥" valueStyle={{ color: '#00b96b', fontSize: 36 }} titleStyle={{ color: '#888' }} />
+             <Statistic title="库存" value={product.stock} suffix="件" valueStyle={{ color: product.stock < 5 ? '#ff4d4f' : '#fff', fontSize: 20 }} titleStyle={{ color: '#888' }} />
+          </div>
+
+          {product.stock < 5 && product.stock > 0 && (
+            <Alert message={`库存紧张，仅剩 ${product.stock} 件！`} type="warning" showIcon style={{ marginBottom: 20, background: 'rgba(250, 173, 20, 0.1)', border: '1px solid #faad14', color: '#faad14' }} />
+          )}
+
+          {product.stock === 0 && (
+             <Alert message="该商品暂时缺货" type="error" showIcon style={{ marginBottom: 20 }} />
+          )}
+
+          <Button 
+            type="primary" 
+            size="large" 
+            icon={<ShoppingCartOutlined />} 
+            onClick={() => {
+                if (!user) {
+                    setLoginVisible(true);
+                } else {
+                    setIsModalOpen(true);
+                }
+            }} 
+            disabled={product.stock === 0}
+            style={{ height: 50, padding: '0 40px', fontSize: 18 }}
+          >
+            {product.stock === 0 ? '暂时缺货' : '立即购买'}
+          </Button>
+        </Col>
+      </Row>
+
+      {/* Feature Section */}
+      <div style={{ marginTop: 100 }}>
+        {product.features && product.features.length > 0 ? (
+            product.features.map((feature, index) => (
+                <div className="feature-section" key={index}>
+                    {renderIcon(feature)}
+                    <div className="feature-title">{feature.title}</div>
+                    <div className="feature-desc">{feature.description}</div>
+                </div>
+            ))
+        ) : (
+            // Fallback content if no features are configured
+            <>
+                <div className="feature-section">
+                <SafetyCertificateOutlined style={{ fontSize: 60, color: '#00b96b', marginBottom: 20 }} />
+                <div className="feature-title">工业级安全标准</div>
+                <div className="feature-desc">
+                    采用军工级加密芯片，保障您的数据隐私安全。无论是边缘计算还是云端同步，全程加密传输，让 AI 应用无后顾之忧。
+                </div>
+                </div>
+                
+                <div className="feature-section">
+                <EyeOutlined style={{ fontSize: 60, color: '#1890ff', marginBottom: 20 }} />
+                <div className="feature-title">超清视觉感知</div>
+                <div className="feature-desc">
+                    搭载 4K 高清摄像头与 AI 视觉算法，实时捕捉每一个细节。支持人脸识别、物体检测、姿态分析等多种视觉任务。
+                </div>
+                </div>
+
+                <div className="feature-section">
+                <ThunderboltOutlined style={{ fontSize: 60, color: '#faad14', marginBottom: 20 }} />
+                <div className="feature-title">极致性能释放</div>
+                <div className="feature-desc">
+                    {product.chip_type} 强劲核心，提供高达 XX TOPS 的算力支持。低功耗设计，满足 24 小时全天候运行需求。
+                </div>
+                </div>
+            </>
+        )}
+        
+        {product.display_detail_image ? (
+            <div style={{ 
+                margin: '60px auto', 
+                maxWidth: '900px', 
+                width: '100%',
+                overflow: 'hidden', 
+                borderRadius: 12,
+                boxShadow: '0 10px 40px rgba(0,0,0,0.5)'
+            }}>
+                <img src={product.display_detail_image} alt="产品详情" style={{ width: '100%', display: 'block', height: 'auto' }} />
+            </div>
+        ) : (
+            <div style={{ margin: '60px 0', height: 800, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#333', fontSize: 24, border: '1px dashed #333' }}>
+                产品详情长图展示区域 (请在后台配置)
+            </div>
+        )}
+      </div>
+
+      {/* Login Modal */}
+      <LoginModal 
+        visible={loginVisible} 
+        onClose={() => setLoginVisible(false)}
+        onLoginSuccess={(userData) => {
+            login(userData);
+            setLoginVisible(false);
+            setIsModalOpen(true);
+        }}
+      />
+
+      {/* Order Modal */}
+      <Modal
+        title="填写收货信息"
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        footer={null}
+        destroyOnHidden
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleBuy}
+          initialValues={{ quantity: 1, delivery_method: 'shipping' }}
+        >
+          <Form.Item label="配送方式" name="delivery_method">
+            <Radio.Group buttonStyle="solid">
+              <Radio.Button value="shipping">快递配送</Radio.Button>
+              <Radio.Button value="pickup">线下自提</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label="购买数量" name="quantity" rules={[{ required: true }]}>
+            <InputNumber min={1} max={100} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label="收货人姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
+            <Input placeholder="张三" />
+          </Form.Item>
+          <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
+            <Input placeholder="13800000000" />
+          </Form.Item>
+          <Form.Item 
+            noStyle 
+            shouldUpdate={(prevValues, currentValues) => prevValues.delivery_method !== currentValues.delivery_method}
+          >
+            {({ getFieldValue }) => 
+              getFieldValue('delivery_method') === 'shipping' ? (
+                <Form.Item label="收货地址" name="shipping_address" rules={[{ required: true, message: '请输入地址' }]}>
+                  <Input.TextArea rows={3} placeholder="北京市..." />
+                </Form.Item>
+              ) : (
+                <div style={{ marginBottom: 24, padding: '12px', background: '#f5f5f5', borderRadius: '4px', border: '1px solid #d9d9d9' }}>
+                  <p style={{ margin: 0, color: '#666' }}>自提地址：昆明市云纺国际商厦B座1406</p>
+                  <p style={{ margin: 0, fontSize: '12px', color: '#999' }}>请在工作日 9:00 - 18:00 期间前往提货</p>
+                </div>
+              )
+            }
+          </Form.Item>
+          
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+            <Button onClick={() => setIsModalOpen(false)}>取消</Button>
+            <Button type="primary" htmlType="submit" loading={submitting}>提交订单</Button>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default ProductDetail;

frontend/src/pages/ServiceDetail.jsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
+import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message, Statistic } from 'antd';
+import { ArrowLeftOutlined, ClockCircleOutlined, GiftOutlined, ShoppingCartOutlined } from '@ant-design/icons';
+import { getServiceDetail, createServiceOrder } from '../api';
+import { useAuth } from '../context/AuthContext';
+import { motion } from 'framer-motion';
+
+const { Title, Paragraph } = Typography;
+
+const ServiceDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const { user, showLoginModal } = useAuth();
+  const [service, setService] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm();
+  
+  // 优先从 URL 获取，如果没有则从 localStorage 获取
+  const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
+
+  useEffect(() => {
+    console.log('[ServiceDetail] Current ref_code:', refCode);
+  }, [refCode]);
+
+  useEffect(() => {
+    const fetchDetail = async () => {
+      try {
+        const response = await getServiceDetail(id);
+        setService(response.data);
+      } catch (error) {
+        console.error("Failed to fetch service detail:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchDetail();
+  }, [id]);
+
+  useEffect(() => {
+    if (isModalOpen && user && user.phone_number) {
+        form.setFieldsValue({
+            phone_number: user.phone_number
+        });
+    }
+  }, [isModalOpen, user, form]);
+
+  const handlePurchase = async (values) => {
+      setSubmitting(true);
+      try {
+          const orderData = {
+              service: service.id,
+              customer_name: values.customer_name,
+              company_name: values.company_name,
+              phone_number: values.phone_number,
+              email: values.email,
+              requirements: values.requirements,
+              ref_code: refCode
+          };
+          await createServiceOrder(orderData);
+          message.success('需求已提交，我们的销售顾问将尽快与您联系！');
+          setIsModalOpen(false);
+      } catch (error) {
+          console.error(error);
+          message.error('提交失败，请重试');
+      } finally {
+          setSubmitting(false);
+      }
+  };
+
+  if (loading) {
+    return (
+        <div style={{ textAlign: 'center', padding: '100px 0' }}>
+            <Spin size="large" />
+            <div style={{ marginTop: 20 }}>Loading...</div>
+        </div>
+    );
+  }
+
+  if (!service) {
+    return (
+        <div style={{ textAlign: 'center', padding: '100px 0' }}>
+            <Empty description="Service not found" />
+            <Button type="primary" onClick={() => navigate('/services')} style={{ marginTop: 20 }}>
+                Return to Services
+            </Button>
+        </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '20px 0' }}>
+      <Button 
+        type="text" 
+        icon={<ArrowLeftOutlined />} 
+        style={{ color: '#fff', marginBottom: 20 }}
+        onClick={() => navigate('/services')}
+      >
+        返回服务列表
+      </Button>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <Row gutter={[40, 40]}>
+            <Col xs={24} md={16}>
+                <div style={{ textAlign: 'left', marginBottom: 40 }}>
+                    <Title level={1} style={{ color: '#fff' }}>
+                        {service.title}
+                    </Title>
+                    <Paragraph style={{ color: '#888', fontSize: 18 }}>
+                        {service.description}
+                    </Paragraph>
+                    
+                    <div style={{ 
+                        marginTop: 30, 
+                        background: 'rgba(255,255,255,0.03)', 
+                        padding: '24px', 
+                        borderRadius: 16, 
+                        border: '1px solid rgba(255,255,255,0.08)',
+                        backdropFilter: 'blur(10px)',
+                        boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
+                    }}>
+                        <Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
+                            <div style={{ width: 4, height: 18, background: service.color, marginRight: 10, borderRadius: 2 }} />
+                            服务详情
+                        </Title>
+                        <Descriptions 
+                            column={1} 
+                            labelStyle={{ color: '#888', fontWeight: 'normal' }} 
+                            contentStyle={{ color: '#fff', fontWeight: '500' }}
+                        >
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: service.color }} /> 交付周期</span>}>
+                                {service.delivery_time || '待沟通'}
+                            </Descriptions.Item>
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><GiftOutlined style={{ marginRight: 8, color: service.color }} /> 交付内容</span>}>
+                                {service.delivery_content || '根据需求定制'}
+                            </Descriptions.Item>
+                        </Descriptions>
+                    </div>
+                </div>
+
+                {service.display_detail_image ? (
+                    <div style={{ 
+                        width: '100%', 
+                        maxWidth: '900px',
+                        margin: '0 auto',
+                        background: '#111', 
+                        borderRadius: 12, 
+                        overflow: 'hidden',
+                        boxShadow: `0 10px 40px ${service.color}22`,
+                        border: `1px solid ${service.color}33`
+                    }}>
+                        <img 
+                            src={service.display_detail_image} 
+                            alt={service.title} 
+                            style={{ width: '100%', display: 'block', height: 'auto' }} 
+                        />
+                    </div>
+                ) : (
+                    <div style={{ textAlign: 'center', padding: 100, background: '#111', borderRadius: 12, color: '#666' }}>
+                        暂无详情图片
+                    </div>
+                )}
+            </Col>
+            
+            <Col xs={24} md={8}>
+                <div style={{ position: 'sticky', top: 100 }}>
+                    <div style={{ 
+                        background: '#1f1f1f', 
+                        padding: 30, 
+                        borderRadius: 16, 
+                        border: `1px solid ${service.color}44`,
+                        boxShadow: `0 0 20px ${service.color}11`
+                    }}>
+                        <Title level={3} style={{ color: '#fff', marginTop: 0 }}>服务报价</Title>
+                        <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
+                            <span style={{ fontSize: 36, color: service.color, fontWeight: 'bold' }}>¥{service.price}</span>
+                            <span style={{ color: '#888', marginLeft: 8 }}>/ {service.unit} 起</span>
+                        </div>
+                        
+                        <div style={{ marginBottom: 25, display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+                            {service.features_list && service.features_list.map((feat, i) => (
+                                <Tag 
+                                    key={i} 
+                                    style={{ 
+                                        margin: 0,
+                                        padding: '4px 12px',
+                                        background: `${service.color}11`,
+                                        color: service.color,
+                                        border: `1px solid ${service.color}66`,
+                                        borderRadius: '6px',
+                                        fontSize: '14px',
+                                        backdropFilter: 'blur(4px)',
+                                        whiteSpace: 'normal',
+                                        height: 'auto',
+                                        textAlign: 'left'
+                                    }}
+                                >
+                                    {feat}
+                                </Tag>
+                            ))}
+                        </div>
+
+                        <Button 
+                            type="primary" 
+                            size="large" 
+                            block 
+                            icon={<ShoppingCartOutlined />}
+                            style={{ 
+                                height: 50, 
+                                background: service.color, 
+                                borderColor: service.color,
+                                color: '#000',
+                                fontWeight: 'bold'
+                            }}
+                            onClick={() => {
+                                if (!user) {
+                                    message.info('请先登录后再进行咨询');
+                                    showLoginModal();
+                                    return;
+                                }
+                                setIsModalOpen(true);
+                            }}
+                        >
+                            立即咨询 / 购买
+                        </Button>
+                        <p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
+                            * 具体价格可能因需求复杂度而异，提交需求后我们将提供详细报价单
+                        </p>
+                    </div>
+                </div>
+            </Col>
+        </Row>
+      </motion.div>
+
+      {/* Purchase Modal */}
+      <Modal
+        title={`咨询/购买 - ${service.title}`}
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        footer={null}
+        destroyOnHidden
+      >
+        <p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式和需求，我们的技术顾问将在 24 小时内与您联系。</p>
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handlePurchase}
+        >
+          <Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
+            <Input placeholder="例如：张经理" />
+          </Form.Item>
+          <Form.Item label="公司/机构名称" name="company_name">
+            <Input placeholder="例如：某某科技有限公司" />
+          </Form.Item>
+          <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
+            <Input placeholder="13800000000" />
+          </Form.Item>
+          <Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
+            <Input placeholder="example@company.com" />
+          </Form.Item>
+          <Form.Item label="需求描述" name="requirements">
+            <Input.TextArea rows={4} placeholder="请简单描述您的业务场景或具体需求..." />
+          </Form.Item>
+          
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+            <Button onClick={() => setIsModalOpen(false)}>取消</Button>
+            <Button type="primary" htmlType="submit" loading={submitting}>提交需求</Button>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default ServiceDetail;

frontend/src/pages/VCCourseDetail.jsx

@@ -0,0 +1,553 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
+import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message } from 'antd';
+import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, BookOutlined, FormOutlined, CalendarOutlined, PlayCircleOutlined, LockOutlined } from '@ant-design/icons';
+import { getVCCourseDetail, createOrder, nativePay, queryOrderStatus } from '../api';
+import { useAuth } from '../context/AuthContext';
+import { QRCodeSVG } from 'qrcode.react';
+import ReactMarkdown from 'react-markdown';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import 'katex/dist/katex.min.css';
+import styles from './VCCourseDetail.module.less';
+import CodeBlock from '../components/CodeBlock';
+
+const { Title, Paragraph } = Typography;
+
+const VCCourseDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const { user, showLoginModal } = useAuth();
+  const [course, setCourse] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm();
+  
+  // Payment states
+  const [payMode, setPayMode] = useState(false);
+  const [qrCodeUrl, setQrCodeUrl] = useState(null);
+  const [currentOrderId, setCurrentOrderId] = useState(null);
+  const [paySuccess, setPaySuccess] = useState(false);
+  
+  // 优先从 URL 获取，如果没有则从 localStorage 获取
+  const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
+
+  const markdownComponents = {
+    // eslint-disable-next-line no-unused-vars
+    code({node, inline, className, children, ...props}) {
+      const match = /language-(\w+)/.exec(className || '')
+      return !inline && match ? (
+        <CodeBlock
+          language={match[1]}
+          {...props}
+        >
+          {String(children).replace(/\n$/, '')}
+        </CodeBlock>
+      ) : (
+        <code className={className} {...props}>
+          {children}
+        </code>
+      )
+    },
+    // eslint-disable-next-line no-unused-vars
+    img({node, ...props}) {
+      return (
+        <img 
+          {...props} 
+          style={{ maxHeight: 400, borderRadius: 8, maxWidth: '100%', margin: '10px 0' }} 
+        />
+      );
+    }
+  };
+
+  useEffect(() => {
+    const fetchDetail = async () => {
+      try {
+        const response = await getVCCourseDetail(id);
+        console.log('Course detail:', response.data);
+        setCourse(response.data);
+      } catch (error) {
+        console.error("Failed to fetch course detail:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchDetail();
+  }, [id]);
+
+  useEffect(() => {
+    if (isModalOpen) {
+        // Reset payment state when modal opens
+        setPayMode(false);
+        setQrCodeUrl(null);
+        setCurrentOrderId(null);
+        setPaySuccess(false);
+        
+        if (user && user.phone_number) {
+            form.setFieldsValue({
+                phone_number: user.phone_number
+            });
+        }
+    }
+  }, [isModalOpen, user, form]);
+
+  // Polling for payment status
+  useEffect(() => {
+    let timer;
+    if (payMode && !paySuccess && currentOrderId) {
+      timer = setInterval(async () => {
+        try {
+          const response = await queryOrderStatus(currentOrderId);
+          if (response.data.status === 'paid') {
+            setPaySuccess(true);
+            message.success('支付成功！报名已完成。');
+            setTimeout(() => {
+                setIsModalOpen(false);
+                // 刷新课程详情以获取解锁后的视频URL
+                const fetchDetail = async () => {
+                  try {
+                    const res = await getVCCourseDetail(id);
+                    setCourse(res.data);
+                  } catch (error) {
+                    console.error("Failed to refresh course detail:", error);
+                  }
+                };
+                fetchDetail();
+            }, 2000); // Wait 2 seconds before closing
+            clearInterval(timer);
+          }
+        } catch (error) {
+          console.error('Check payment status failed:', error);
+        }
+      }, 3000);
+    }
+    return () => clearInterval(timer);
+  }, [payMode, paySuccess, currentOrderId, id]);
+
+  const handleEnroll = async (values) => {
+      setSubmitting(true);
+      try {
+          const isFree = course.price === 0 || parseFloat(course.price) === 0;
+          
+          if (isFree) {
+              const orderData = {
+                  course: course.id,
+                  customer_name: values.customer_name,
+                  phone_number: values.phone_number,
+                  ref_code: refCode || "",
+                  quantity: 1,
+                  // 将其他信息放入收货地址字段中
+                  shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
+              };
+              
+              await createOrder(orderData);
+              message.success('报名成功！您已成功加入课程。');
+              setIsModalOpen(false);
+          } else {
+              // Paid course - use nativePay to generate QR code
+              const orderData = {
+                  goodid: course.id,
+                  type: 'course',
+                  quantity: 1,
+                  customer_name: values.customer_name,
+                  phone_number: values.phone_number,
+                  ref_code: refCode || "",
+                  shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
+              };
+              
+              const response = await nativePay(orderData);
+              if (response.data && response.data.code_url) {
+                  setQrCodeUrl(response.data.code_url);
+                  setCurrentOrderId(response.data.order_id);
+                  setPayMode(true);
+                  message.success('订单创建成功，请扫码支付');
+              } else {
+                  throw new Error('Failed to generate payment QR code');
+              }
+          }
+      } catch (error) {
+          console.error(error);
+          message.error('提交失败，请重试');
+      } finally {
+          setSubmitting(false);
+      }
+  };
+
+  if (loading) {
+    return (
+        <div style={{ textAlign: 'center', padding: '100px 0' }}>
+            <Spin size="large" />
+            <div style={{ marginTop: 20 }}>Loading...</div>
+        </div>
+    );
+  }
+
+  if (!course) {
+    return (
+        <div style={{ textAlign: 'center', padding: '100px 0' }}>
+            <Empty description="Course not found" />
+            <Button type="primary" onClick={() => navigate('/courses')} style={{ marginTop: 20 }}>
+                Return to Courses
+            </Button>
+        </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: '20px 0', minHeight: '80vh' }}>
+      <Button 
+        type="text" 
+        icon={<ArrowLeftOutlined />} 
+        style={{ color: '#fff', marginBottom: 20 }}
+        onClick={() => navigate('/courses')}
+      >
+        返回课程列表
+      </Button>
+
+      <div>
+        <Row gutter={[40, 40]}>
+            <Col xs={24} md={16}>
+                <div style={{ textAlign: 'left', marginBottom: 40 }}>
+                    <div style={{ display: 'flex', gap: '10px', marginBottom: 10 }}>
+                        {course.tag && <Tag color="volcano">{course.tag}</Tag>}
+                        <Tag color={course.course_type === 'hardware' ? 'purple' : 'cyan'}>
+                            {course.course_type_display || (course.course_type === 'hardware' ? '硬件课程' : '软件课程')}
+                        </Tag>
+                    </div>
+                    <Title level={1} style={{ color: '#fff', marginTop: 0 }}>
+                        {course.title}
+                    </Title>
+                    <Paragraph style={{ color: '#888', fontSize: 18 }}>
+                        {course.description}
+                    </Paragraph>
+                    
+                    {/* 视频课程播放区域 */}
+                    {course.is_video_course && (
+                        <div style={{
+                            margin: '30px 0',
+                            background: '#000',
+                            borderRadius: 16,
+                            overflow: 'hidden',
+                            border: '1px solid rgba(0, 240, 255, 0.2)',
+                            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+                            position: 'relative',
+                            aspectRatio: '16/9'
+                        }}>
+                            {course.video_embed_code ? (
+                                <div 
+                                    style={{ width: '100%', height: '100%' }}
+                                    dangerouslySetInnerHTML={{ __html: course.video_embed_code }}
+                                />
+                            ) : course.video_url ? (
+                                <video 
+                                    src={course.video_url} 
+                                    controls 
+                                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                                    poster={course.cover_image_url}
+                                >
+                                    您的浏览器不支持视频播放。
+                                </video>
+                            ) : (
+                                <div style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    height: '100%',
+                                    color: '#fff',
+                                    background: `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(${course.cover_image_url}) no-repeat center/cover`
+                                }}>
+                                    <LockOutlined style={{ fontSize: 48, color: '#00f0ff', marginBottom: 20 }} />
+                                    <Title level={4} style={{ color: '#fff', marginBottom: 10 }}>课程视频内容已锁定</Title>
+                                    <p style={{ color: '#ccc', fontSize: 16 }}>
+                                        请购买或报名该课程以解锁完整视频内容
+                                    </p>
+                                    <Button 
+                                        type="primary" 
+                                        icon={<PlayCircleOutlined />}
+                                        size="large"
+                                        style={{ 
+                                            marginTop: 20,
+                                            background: '#00f0ff',
+                                            borderColor: '#00f0ff',
+                                            color: '#000',
+                                            fontWeight: 'bold'
+                                        }}
+                                        onClick={() => {
+                                            if (!user) {
+                                                message.info('请先登录后再进行报名或购买');
+                                                showLoginModal();
+                                                return;
+                                            }
+                                            setIsModalOpen(true);
+                                        }}
+                                    >
+                                        立即解锁观看
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    <div style={{ 
+                        marginTop: 30, 
+                        background: 'rgba(255,255,255,0.03)', 
+                        padding: '24px', 
+                        borderRadius: 16, 
+                        border: '1px solid rgba(255,255,255,0.08)',
+                        backdropFilter: 'blur(10px)',
+                        boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
+                    }}>
+                        <Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
+                            <div style={{ width: 4, height: 18, background: '#00f0ff', marginRight: 10, borderRadius: 2 }} />
+                            课程信息
+                        </Title>
+                        <Descriptions 
+                            column={{ xs: 1, sm: 2, md: 3 }} 
+                            labelStyle={{ color: '#888', fontWeight: 'normal' }} 
+                            contentStyle={{ color: '#fff', fontWeight: '500' }}
+                        >
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><UserOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 讲师</span>}>
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    {course.instructor_avatar_url && (
+                                        <img src={course.instructor_avatar_url} alt="avatar" style={{ width: 24, height: 24, borderRadius: '50%', marginRight: 8, objectFit: 'cover' }} />
+                                    )}
+                                    <span>{course.instructor}</span>
+                                    {course.instructor_title && (
+                                        <span style={{ 
+                                            fontSize: 12, 
+                                            background: 'rgba(0, 240, 255, 0.1)', 
+                                            color: '#00f0ff', 
+                                            padding: '2px 6px', 
+                                            borderRadius: 4, 
+                                            marginLeft: 8 
+                                        }}>
+                                            {course.instructor_title}
+                                        </span>
+                                    )}
+                                </div>
+                            </Descriptions.Item>
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 时长</span>}>
+                                {course.duration}
+                            </Descriptions.Item>
+                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><BookOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 课时</span>}>
+                                {course.lesson_count} 课时
+                            </Descriptions.Item>
+                            {course.is_fixed_schedule && (course.start_time || course.end_time) && (
+                                <Descriptions.Item span={3} label={<span style={{ display: 'flex', alignItems: 'center' }}><CalendarOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 开课时间</span>}>
+                                    <div style={{ display: 'flex', gap: '30px', alignItems: 'center', flexWrap: 'wrap' }}>
+                                        {course.start_time && (
+                                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                                <span style={{ fontSize: 12, color: '#888', marginBottom: 2 }}>开始时间</span>
+                                                <span style={{ fontSize: 16, color: '#fff', fontFamily: 'DIN Alternate, Consolas, monospace', letterSpacing: 1 }}>
+                                                    {new Date(course.start_time).toLocaleString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}
+                                                </span>
+                                            </div>
+                                        )}
+                                        {course.start_time && course.end_time && (
+                                            <div style={{ width: 30, height: 1, background: '#333' }} />
+                                        )}
+                                        {course.end_time && (
+                                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                                <span style={{ fontSize: 12, color: '#888', marginBottom: 2 }}>结束时间</span>
+                                                <span style={{ fontSize: 16, color: '#fff', fontFamily: 'DIN Alternate, Consolas, monospace', letterSpacing: 1 }}>
+                                                    {new Date(course.end_time).toLocaleString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'})}
+                                                </span>
+                                            </div>
+                                        )}
+                                    </div>
+                                </Descriptions.Item>
+                            )}
+                        </Descriptions>
+                        
+                        {/* 讲师简介 */}
+                        {course.instructor_desc && (
+                             <div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.05)', color: '#aaa', fontSize: 14 }}>
+                                 <span style={{ color: '#666', marginRight: 10 }}>讲师简介:</span>
+                                 {course.instructor_desc}
+                             </div>
+                        )}
+                    </div>
+
+                    {/* 课程详细内容区域 */}
+                    {course.content && (
+                        <div style={{ marginTop: 40 }}>
+                             <Title level={3} style={{ color: '#fff', marginBottom: 20 }}>课程大纲与详情</Title>
+                             <div className={styles['markdown-body']}>
+                                 <ReactMarkdown 
+                                     remarkPlugins={[remarkMath, remarkGfm]}
+                                     rehypePlugins={[rehypeKatex, rehypeRaw]}
+                                     components={markdownComponents}
+                                 >
+                                     {course.content}
+                                 </ReactMarkdown>
+                             </div>
+                        </div>
+                    )}
+                </div>
+
+                {course.display_detail_image ? (
+                    <div style={{ 
+                        width: '100%', 
+                        maxWidth: '900px',
+                        margin: '40px auto 0',
+                        background: '#111', 
+                        borderRadius: 12, 
+                        overflow: 'hidden',
+                        boxShadow: `0 10px 40px rgba(0, 240, 255, 0.1)`,
+                        border: `1px solid rgba(0, 240, 255, 0.2)`
+                    }}>
+                        <img 
+                            src={course.display_detail_image} 
+                            alt={course.title} 
+                            style={{ width: '100%', display: 'block', height: 'auto' }} 
+                        />
+                    </div>
+                ) : null}
+            </Col>
+            
+            <Col xs={24} md={8}>
+                <div style={{ position: 'sticky', top: 100 }}>
+                    <div style={{ 
+                        background: '#1f1f1f', 
+                        padding: 30, 
+                        borderRadius: 16, 
+                        border: `1px solid rgba(0, 240, 255, 0.2)`,
+                        boxShadow: `0 0 20px rgba(0, 240, 255, 0.05)`
+                    }}>
+                        <Title level={3} style={{ color: '#fff', marginTop: 0 }}>
+                            {course.is_video_course ? '购买课程' : '报名咨询'}
+                        </Title>
+                        
+                        <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
+                            {parseFloat(course.price) > 0 ? (
+                                <>
+                                    <span style={{ fontSize: 36, color: '#00f0ff', fontWeight: 'bold' }}>¥{course.price}</span>
+                                </>
+                            ) : (
+                                <span style={{ fontSize: 36, color: '#00f0ff', fontWeight: 'bold' }}>免费咨询</span>
+                            )}
+                        </div>
+
+                        <Button 
+                            type="primary" 
+                            size="large" 
+                            block 
+                            icon={course.is_video_course ? <PlayCircleOutlined /> : <FormOutlined />}
+                            disabled={course.is_purchased}
+                            style={{ 
+                                height: 50, 
+                                background: course.is_purchased ? '#333' : '#00f0ff', 
+                                borderColor: course.is_purchased ? '#444' : '#00f0ff',
+                                color: course.is_purchased ? '#888' : '#000',
+                                fontWeight: 'bold',
+                                fontSize: '16px',
+                                cursor: course.is_purchased ? 'not-allowed' : 'pointer'
+                            }}
+                            onClick={() => {
+                                 if (course.is_purchased) return;
+                                 if (!user) {
+                                     message.info('请先登录后再进行报名或购买');
+                                     showLoginModal();
+                                     return;
+                                 }
+                                 setIsModalOpen(true);
+                             }}
+                        >
+                            {course.is_purchased ? '已购买' : (course.is_video_course ? '购买视频课程' : '立即报名 / 咨询')}
+                        </Button>
+                        <p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
+                            {course.is_purchased 
+                                ? '* 您已拥有该课程，可直接观看视频' 
+                                : (course.is_video_course 
+                                    ? '* 支付成功后自动解锁视频内容' 
+                                    : '* 提交后我们的顾问将尽快与您联系确认')}
+                        </p>
+                    </div>
+                </div>
+            </Col>
+        </Row>
+      </div>
+
+      {/* Enroll Modal */}
+      <Modal
+        title={payMode ? '微信扫码支付' : `${course.is_video_course ? '购买课程' : '报名/咨询'} - ${course.title}`}
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        footer={null}
+        destroyOnHidden
+        width={payMode ? 400 : 520}
+      >
+        {payMode ? (
+            <div style={{ textAlign: 'center', padding: '20px 0' }}>
+                {paySuccess ? (
+                    <div style={{ color: '#52c41a' }}>
+                        <div style={{ fontSize: 48, marginBottom: 16 }}>🎉</div>
+                        <h3>支付成功！</h3>
+                        <p>正在跳转...</p>
+                    </div>
+                ) : (
+                    <>
+                        <div style={{ background: '#fff', padding: '10px', borderRadius: '4px', display: 'inline-block', border: '1px solid #eee' }}>
+                            {qrCodeUrl ? (
+                                <QRCodeSVG value={qrCodeUrl} size={200} />
+                            ) : (
+                                <Spin size="large" />
+                            )}
+                        </div>
+                        <p style={{ marginTop: 20, fontSize: 16, fontWeight: 'bold' }}>¥{course.price}</p>
+                        <p style={{ color: '#666', marginTop: 10 }}>请使用微信扫一扫支付</p>
+                        <div style={{ marginTop: 20, fontSize: 12, color: '#999' }}>
+                            支付完成后将自动{course.is_video_course ? '解锁视频' : '完成报名'}
+                        </div>
+                    </>
+                )}
+            </div>
+        ) : (
+            <>
+                <p style={{ marginBottom: 20, color: '#666' }}>
+                    {course.is_video_course 
+                        ? '请确认您的联系方式，以便我们记录您的购买信息。' 
+                        : '请填写您的联系方式，我们将为您安排课程顾问。'}
+                </p>
+                <Form
+                  form={form}
+                  layout="vertical"
+                  onFinish={handleEnroll}
+                >
+                  <Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
+                    <Input placeholder="例如：李同学" />
+                  </Form.Item>
+                  <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
+                    <Input placeholder="13800000000" />
+                  </Form.Item>
+                  <Form.Item label="微信号" name="wechat_id">
+                    <Input placeholder="选填，方便微信沟通" />
+                  </Form.Item>
+                  <Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
+                    <Input placeholder="example@email.com" />
+                  </Form.Item>
+                  <Form.Item label="备注/留言" name="message">
+                    <Input.TextArea rows={4} placeholder="您想了解的任何问题..." />
+                  </Form.Item>
+                  
+                  <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
+                    <Button onClick={() => setIsModalOpen(false)}>取消</Button>
+                    <Button type="primary" htmlType="submit" loading={submitting}>
+                        {parseFloat(course.price) > 0 ? '去支付' : '提交报名'}
+                    </Button>
+                  </div>
+                </Form>
+            </>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default VCCourseDetail;

frontend/src/pages/VCCourseDetail.module.less

@@ -0,0 +1,109 @@
+.markdown-body {
+  color: #ddd;
+  font-size: 16px;
+  line-height: 1.8;
+  
+  h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  h1 { font-size: 2em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
+  h2 { font-size: 1.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.3em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.85em; color: #888; }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  a {
+    color: #1890ff;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul, ol {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding-left: 2em;
+  }
+
+  li {
+    word-wrap: break-all;
+  }
+
+  blockquote {
+    margin: 0 0 16px;
+    padding: 0 1em;
+    color: #8b949e;
+    border-left: 0.25em solid #30363d;
+  }
+
+  /* Table Styles */
+  table {
+    display: block;
+    width: 100%;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin-top: 0;
+    margin-bottom: 16px;
+    
+    thead {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    tr {
+      background-color: transparent;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      
+      &:nth-child(2n) {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+    }
+
+    th, td {
+      padding: 6px 13px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    th {
+      font-weight: 600;
+      text-align: left; 
+      /* Ensure text color is readable */
+      color: #fff; 
+    }
+    
+    td {
+        color: #ddd;
+    }
+  }
+
+  /* Inline Code */
+  code:not([class*="language-"]) {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(110, 118, 129, 0.4);
+    border-radius: 6px;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  }
+  
+  /* Images */
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: transparent;
+  }
+}

frontend/src/pages/VCCourses.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Button, Spin, Row, Col, Empty, Tag } from 'antd';
+import { ReadOutlined, ClockCircleOutlined, UserOutlined, BookOutlined } from '@ant-design/icons';
+import { getVCCourses } from '../api';
+
+
+
+const VCCourses = () => {
+  const [courses, setCourses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCourses = async () => {
+        try {
+            const res = await getVCCourses();
+            setCourses(res.data);
+        } catch (error) {
+            console.error("Failed to fetch VC Courses:", error);
+        } finally {
+            setLoading(false);
+        }
+    }
+    fetchCourses();
+  }, []);
+
+  if (loading) return <div style={{ textAlign: 'center', padding: 100 }}><Spin size="large" /></div>;
+
+  return (
+    <div style={{ padding: '40px 0', minHeight: '80vh', position: 'relative' }}>
+
+        {courses.length === 0 ? (
+            <div style={{ textAlign: 'center', marginTop: 100, zIndex: 2, position: 'relative' }}>
+                <Empty description={<span style={{ color: '#666' }}>暂无课程内容</span>} />
+            </div>
+        ) : (
+            <Row gutter={[32, 32]} justify="center" style={{ padding: '0 20px', position: 'relative', zIndex: 2 }}>
+                {courses.map((item, index) => (
+                    <Col xs={24} md={12} lg={8} key={item.id}>
+                        <motion.div
+                            initial={{ opacity: 0, y: 30 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: index * 0.1 }}
+                            whileHover={{ scale: 1.02 }}
+                            onClick={() => navigate(`/courses/${item.id}`)}
+                            style={{ cursor: 'pointer' }}
+                        >
+                            <div style={{ 
+                                background: 'rgba(255,255,255,0.05)', 
+                                border: '1px solid rgba(0,240,255,0.2)',
+                                borderRadius: 12,
+                                overflow: 'hidden',
+                                height: '100%',
+                                display: 'flex',
+                                flexDirection: 'column'
+                            }}>
+                                <div style={{ height: 200, background: '#000', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
+                                    {item.display_cover_image ? (
+                                        <img src={item.display_cover_image} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                    ) : (
+                                        <ReadOutlined style={{ fontSize: 40, color: '#333' }} />
+                                    )}
+                                    <div style={{ position: 'absolute', top: 10, right: 10, display: 'flex', gap: '5px' }}>
+                                        {item.tag && (
+                                            <Tag color="volcano" style={{ marginRight: 0 }}>{item.tag}</Tag>
+                                        )}
+                                        <Tag color={item.course_type === 'hardware' ? 'purple' : 'cyan'}>
+                                            {item.course_type_display || (item.course_type === 'hardware' ? '硬件课程' : '软件课程')}
+                                        </Tag>
+                                    </div>
+                                </div>
+                                <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
+                                    <h3 style={{ color: '#fff', fontSize: 20, marginBottom: 10 }}>{item.title}</h3>
+                                    <div style={{ color: '#888', marginBottom: 15, fontSize: 14 }}>
+                                        <span style={{ marginRight: 15 }}><UserOutlined /> {item.instructor}</span>
+                                        <span style={{ marginRight: 15 }}><ClockCircleOutlined /> {item.duration}</span>
+                                        <span><BookOutlined /> {item.lesson_count} 课时</span>
+                                    </div>
+                                    <p style={{ color: '#aaa', marginBottom: 20, flex: 1 }}>{item.description}</p>
+                                    <Button type="primary" block ghost style={{ borderColor: '#00f0ff', color: '#00f0ff' }}>
+                                        点击报名
+                                    </Button>
+                                </div>
+                            </div>
+                        </motion.div>
+                    </Col>
+                ))}
+            </Row>
+        )}
+
+      {/* 装饰性背景 */}
+      <div style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        background: `
+          radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%)
+        `,
+        zIndex: 0,
+        pointerEvents: 'none'
+      }} />
+      
+      <div style={{
+        position: 'fixed',
+        bottom: 0,
+        width: '100%',
+        height: '300px',
+        background: `linear-gradient(to top, rgba(0,0,0,0.8), transparent)`,
+        zIndex: 1,
+        pointerEvents: 'none'
+      }} />
+
+    </div>
+  );
+};
+
+export default VCCourses;

frontend/src/pages/activity/Detail.jsx

@@ -0,0 +1,631 @@
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { ArrowLeftOutlined, ShareAltOutlined, CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined, UserOutlined, UploadOutlined, PayCircleOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import confetti from 'canvas-confetti';
+import { message, Spin, Button, Result, Modal, Form, Input, Select, Radio, Checkbox, Upload } from 'antd';
+import { getActivityDetail, signUpActivity, queryOrderStatus } from '../../api';
+import styles from '../../components/activity/activity.module.less';
+import { pageTransition, buttonTap } from '../../animation';
+import LoginModal from '../../components/LoginModal';
+import { useAuth } from '../../context/AuthContext';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { QRCodeSVG } from 'qrcode.react';
+
+const CodeBlock = ({ inline, className, children, ...props }) => {
+  const [copied, setCopied] = useState(false);
+  const match = /language-(\w+)/.exec(className || '');
+  const codeString = String(children).replace(/\n$/, '');
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(codeString);
+    setCopied(true);
+    message.success('代码已复制');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return !inline && match ? (
+    <div className={styles.codeBlockWrapper}>
+      <div 
+        className={styles.copyButton} 
+        onClick={handleCopy}
+      >
+        {copied ? <CheckOutlined /> : <CopyOutlined />}
+        <span style={{ marginLeft: 4 }}>{copied ? '已复制' : '复制'}</span>
+      </div>
+      <SyntaxHighlighter
+        style={vscDarkPlus}
+        language={match[1]}
+        PreTag="div"
+        {...props}
+      >
+        {codeString}
+      </SyntaxHighlighter>
+    </div>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};
+
+const ActivityDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { scrollY } = useScroll();
+  const { login, user } = useAuth();
+  const [loginVisible, setLoginVisible] = useState(false);
+  const [signupFormVisible, setSignupFormVisible] = useState(false);
+  const [paymentModalVisible, setPaymentModalVisible] = useState(false);
+  const [paymentInfo, setPaymentInfo] = useState(null);
+  const [paymentStatus, setPaymentStatus] = useState('unpaid'); // 'unpaid' | 'paying' | 'paid'
+  const [form] = Form.useForm();
+  
+  // Header animation: transparent to white with shadow
+  const headerBg = useTransform(scrollY, [0, 60], ['rgba(255,255,255,0)', 'rgba(255,255,255,1)']);
+  const headerShadow = useTransform(scrollY, [0, 60], ['none', '0 2px 8px rgba(0,0,0,0.1)']);
+  const headerColor = useTransform(scrollY, [0, 60], ['rgba(255,255,255,1)', 'rgba(0,0,0,0.85)']);
+  const titleOpacity = useTransform(scrollY, [100, 200], [0, 1]);
+
+  const { data: activity, isLoading, error } = useQuery({
+    queryKey: ['activity', id],
+    queryFn: async () => {
+      try {
+        const res = await getActivityDetail(id);
+        const data = res.data;
+        // Map status logic
+        // is_signed_up is only true if status='confirmed'
+        // my_signup_status can be 'unpaid', 'pending', 'confirmed'
+        return data;
+      } catch (err) {
+        throw new Error(err.response?.data?.detail || 'Failed to load activity');
+      }
+    },
+    staleTime: 0, 
+    refetchOnMount: 'always',
+  });
+
+  const [countdown, setCountdown] = useState('');
+
+  useEffect(() => {
+    if (!activity) return;
+
+    const updateCountdown = () => {
+      // 优先使用 signup_deadline，如果没有则使用 start_time
+      const targetTime = activity.signup_deadline || activity.start_time;
+      if (!targetTime) {
+          setCountdown('待定');
+          return;
+      }
+
+      const targetDate = new Date(targetTime);
+      const now = new Date();
+      const diff = targetDate - now;
+
+      if (diff <= 0) {
+        setCountdown('已截止');
+        return;
+      }
+
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+      setCountdown(`${days}天 ${hours}小时 ${minutes}分`);
+    };
+
+    updateCountdown();
+    // 每分钟更新一次
+    const timer = setInterval(updateCountdown, 60000);
+    return () => clearInterval(timer);
+  }, [activity]);
+
+  // Auto-fill form fields when the signup form becomes visible
+  useEffect(() => {
+    if (signupFormVisible && user && activity?.signup_form_config) {
+      const initialValues = {};
+      
+      activity.signup_form_config.forEach(field => {
+        // Auto-fill phone number
+        if (field.name === 'phone' && user.phone_number) {
+          initialValues[field.name] = user.phone_number;
+        }
+        // Auto-fill name (nickname) if the field name is 'name'
+        if (field.name === 'name' && user.nickname) {
+          initialValues[field.name] = user.nickname;
+        }
+      });
+
+      if (Object.keys(initialValues).length > 0) {
+        form.setFieldsValue(initialValues);
+      }
+    }
+  }, [signupFormVisible, user, activity, form]);
+
+  const signUpMutation = useMutation({
+    mutationFn: (values) => signUpActivity(id, { signup_info: values || {} }),
+    onSuccess: (response) => {
+      // API returns axios response object, so we need to access .data
+      const data = response.data || response; // Fallback in case it was already unwrapped
+      console.log('Signup response:', data);
+      
+      // 检查是否需要支付
+      if (data.payment_required) {
+         setPaymentInfo(data);
+         setPaymentStatus('paying');
+         
+         // 不关闭报名表单，直接打开支付弹窗
+         // 延迟一点点时间打开支付弹窗，避免状态更新冲突
+         setTimeout(() => {
+            setPaymentModalVisible(true);
+         }, 300);
+         // 不再显示 message，避免遮挡
+         return;
+      }
+
+      message.success('报名成功！');
+      setSignupFormVisible(false);
+      setPaymentStatus('paid'); // In case it was free but we track it
+      confetti({
+        particleCount: 150,
+        spread: 70,
+        origin: { y: 0.6 },
+        colors: ['#00b96b', '#1890ff', '#ffffff']
+      });
+      queryClient.invalidateQueries(['activity', id]);
+      queryClient.invalidateQueries(['activities']);
+    },
+    onError: (err) => {
+      message.error(err.response?.data?.detail || err.response?.data?.error || '报名失败，请稍后重试');
+    }
+  });
+
+  // Polling for payment status
+  useEffect(() => {
+    let timer;
+    if (paymentModalVisible && paymentInfo?.order_id) {
+      timer = setInterval(async () => {
+        try {
+          const response = await queryOrderStatus(paymentInfo.order_id);
+          if (response.data.status === 'paid') {
+             message.success('支付成功，请点击“完成报名”！');
+             setPaymentModalVisible(false);
+             setPaymentInfo(null);
+             setPaymentStatus('paid');
+             
+             // Trigger success effects
+             confetti({
+                particleCount: 150,
+                spread: 70,
+                origin: { y: 0.6 },
+                colors: ['#1890ff', '#40a9ff', '#ffffff']
+             });
+             queryClient.invalidateQueries(['activity', id]);
+             queryClient.invalidateQueries(['activities']);
+             
+             clearInterval(timer);
+          }
+        } catch {
+          // ignore error during polling
+        }
+      }, 3000);
+    }
+    return () => clearInterval(timer);
+  }, [paymentModalVisible, paymentInfo, id, queryClient]);
+
+  const getButtonText = () => {
+      if (signUpMutation.isPending) return '提交中...';
+      if (activity.is_signed_up) return '已报名';
+      if (activity.my_signup_status === 'pending') return '审核中';
+      if (activity.my_signup_status === 'unpaid') return '去支付';
+      
+      const isEnded = new Date(activity.end_time) < new Date();
+      if (isEnded) return '活动已结束';
+      
+      const isFull = activity.max_participants > 0 && (activity.current_signups || 0) >= activity.max_participants;
+      if (isFull) return '名额已满';
+      
+      return '立即报名';
+  };
+
+  const isButtonDisabled = () => {
+      if (signUpMutation.isPending) return true;
+      if (activity.is_signed_up) return true;
+      if (activity.my_signup_status === 'pending') return true;
+      // 'unpaid' is NOT disabled, allows payment retry
+      if (activity.my_signup_status === 'unpaid') return false; 
+      
+      const isEnded = new Date(activity.end_time) < new Date();
+      if (isEnded) return true;
+      
+      const isFull = activity.max_participants > 0 && (activity.current_signups || 0) >= activity.max_participants;
+      if (isFull) return true;
+      
+      return false;
+  };
+
+  const handleShare = async () => {
+    const url = window.location.href;
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: activity?.title,
+          text: '来看看这个精彩活动！',
+          url: url
+        });
+      } catch {
+        console.log('Share canceled');
+      }
+    } else {
+      navigator.clipboard.writeText(url);
+      message.success('链接已复制到剪贴板');
+    }
+  };
+
+  const handleSignUp = () => {
+      if (!localStorage.getItem('token')) {
+          message.warning('请先登录后报名');
+          setLoginVisible(true);
+          return;
+      }
+      
+      setPaymentStatus('unpaid');
+      setPaymentInfo(null);
+      
+      // Check if we need to collect info OR if it's a paid activity
+      // We want to use the modal for payment flow as well
+      if ((activity.signup_form_config && activity.signup_form_config.length > 0) || (activity.is_paid && activity.price > 0)) {
+          setSignupFormVisible(true);
+      } else {
+          // Direct signup if no info needed and free
+          signUpMutation.mutate({});
+      }
+  };
+
+  const handleFormSubmit = (values) => {
+      // Handle file uploads if any (convert to base64 or just warn if not supported)
+      // For now, we just pass values. 
+      // Note: File objects won't serialize to JSON well.
+      signUpMutation.mutate(values);
+  };
+
+  const normFile = (e) => {
+    if (Array.isArray(e)) {
+      return e;
+    }
+    return e?.fileList;
+  };
+
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#1f1f1f' }}>
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: 40, background: '#1f1f1f', minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <Result
+          status="error"
+          title="加载失败"
+          subTitle={error.message}
+          extra={[
+            <Button type="primary" key="back" onClick={() => navigate(-1)}>
+              返回列表
+            </Button>
+          ]}
+        />
+      </div>
+    );
+  }
+
+  if (!activity) {
+    return (
+      <div style={{ padding: 40, background: '#1f1f1f', minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <Result
+          status="404"
+          title="活动未找到"
+          subTitle="抱歉，该活动可能已被删除或不存在。"
+          extra={[
+            <Button type="primary" key="back" onClick={() => navigate(-1)}>
+              返回列表
+            </Button>
+          ]}
+        />
+      </div>
+    );
+  }
+
+  const cleanUrl = (url) => {
+    if (!url) return '';
+    return url.replace(/[`\s]/g, '');
+  };
+
+  return (
+    <motion.div
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={pageTransition}
+      style={{ background: '#1f1f1f', minHeight: '100vh', color: '#fff' }}
+    >
+      {/* Sticky Header */}
+      <motion.div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 60,
+          zIndex: 100,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '0 20px',
+          background: headerBg,
+          boxShadow: headerShadow,
+        }}
+      >
+        <motion.div 
+          onClick={() => navigate(-1)} 
+          style={{ cursor: 'pointer', color: headerColor, fontSize: 20 }}
+        >
+          <ArrowLeftOutlined />
+        </motion.div>
+        <motion.div 
+          style={{ color: headerColor, fontWeight: 600, opacity: titleOpacity }}
+        >
+          {activity.title}
+        </motion.div>
+        <motion.div 
+          onClick={handleShare}
+          style={{ cursor: 'pointer', color: headerColor, fontSize: 20 }}
+        >
+          <ShareAltOutlined />
+        </motion.div>
+      </motion.div>
+
+      {/* Hero Image with LayoutId for shared transition */}
+      <div className={styles.detailHeader}>
+        <motion.img
+          layoutId={`activity-card-${id}`}
+          src={activity.display_banner_url || cleanUrl(activity.banner_url) || activity.cover_image || 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=600&fit=crop'}
+          alt={activity.title}
+          className={styles.detailImage}
+        />
+        <div className={styles.headerGradient} />
+      </div>
+
+      {/* Content */}
+      <div className={styles.detailContent}>
+        <div className={styles.infoCard}>
+          <h1 className={styles.activityTitle}>{activity.title}</h1>
+          
+          <div className={styles.metaInfo}>
+             <div className={styles.metaItem}>
+               <CalendarOutlined />
+               <span>{activity.start_time ? new Date(activity.start_time).toLocaleDateString() : 'TBD'}</span>
+             </div>
+             <div className={styles.metaItem}>
+               <ClockCircleOutlined />
+               <span>{activity.start_time ? new Date(activity.start_time).toLocaleTimeString() : 'TBD'}</span>
+             </div>
+             <div className={styles.metaItem}>
+               <EnvironmentOutlined />
+               <span>{activity.location || '线上活动'}</span>
+             </div>
+             <div className={styles.metaItem}>
+               <UserOutlined />
+               <span>{activity.current_signups || 0} / {activity.max_participants} 已报名</span>
+             </div>
+             <div className={styles.metaItem}>
+               <PayCircleOutlined />
+               <span>{activity.is_paid ? `¥${activity.price}` : '免费'}</span>
+             </div>
+          </div>
+          
+          <div className={styles.statusWrapper}>
+            <span className={styles.statusTag}>
+              {activity.status || (new Date() < new Date(activity.start_time) ? '报名中' : '已结束')}
+            </span>
+          </div>
+        </div>
+
+        <div className={styles.richText}>
+           <h3>活动详情</h3>
+           <div style={{ color: '#ccc', lineHeight: '1.8' }}>
+              <ReactMarkdown 
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeRaw]}
+                components={{
+                  code: CodeBlock
+                }}
+              >
+                {activity.description || activity.content || '暂无详情描述'}
+              </ReactMarkdown>
+           </div>
+        </div>
+      </div>
+
+      {/* Fixed Footer */}
+      <div className={styles.fixedFooter}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+           <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>距离报名截止</span>
+           <span style={{ color: '#1890ff', fontWeight: 'bold' }}>
+             {countdown || '计算中...'}
+           </span>
+        </div>
+        <motion.button
+          className={styles.actionBtn}
+          variants={buttonTap}
+          whileTap="tap"
+          onClick={handleSignUp}
+          disabled={isButtonDisabled()}
+        >
+          {getButtonText()}
+        </motion.button>
+      </div>
+
+      <LoginModal 
+        visible={loginVisible} 
+        onClose={() => setLoginVisible(false)}
+        onLoginSuccess={(userData) => {
+          login(userData);
+          // Auto trigger signup after login if needed, or just let user click again
+        }}
+      />
+
+      <Modal
+        title="填写报名信息"
+        open={signupFormVisible}
+        onCancel={() => setSignupFormVisible(false)}
+        footer={[
+            <Button key="cancel" onClick={() => setSignupFormVisible(false)}>
+                取消
+            </Button>,
+            (activity?.is_paid && activity?.price > 0) ? (
+                <React.Fragment key="paid-actions">
+                    <Button 
+                        key="pay" 
+                        type="primary" 
+                        onClick={form.submit} 
+                        loading={signUpMutation.isPending && paymentStatus === 'unpaid'}
+                        disabled={paymentStatus === 'paid'}
+                    >
+                        {paymentStatus === 'paid' ? '已支付' : `支付 ¥${activity.price}`}
+                    </Button>
+                    <Button 
+                        key="complete" 
+                        type="primary" 
+                        onClick={() => setSignupFormVisible(false)}
+                        disabled={paymentStatus !== 'paid'}
+                    >
+                        完成报名
+                    </Button>
+                </React.Fragment>
+            ) : (
+                <Button key="submit" type="primary" onClick={form.submit} loading={signUpMutation.isPending}>
+                    提交报名
+                </Button>
+            )
+        ]}
+        destroyOnHidden
+      >
+         <Form form={form} onFinish={handleFormSubmit} layout="vertical">
+            {activity.signup_form_config && activity.signup_form_config.map(field => {
+                let inputNode;
+                const commonProps = {
+                    placeholder: field.placeholder || `请输入${field.label}`,
+                };
+
+                switch (field.type) {
+                    case 'select':
+                        inputNode = (
+                            <Select placeholder={field.placeholder || `请选择${field.label}`}>
+                                {field.options?.map(opt => (
+                                    <Select.Option key={opt.value} value={opt.value}>
+                                        {opt.label}
+                                    </Select.Option>
+                                ))}
+                            </Select>
+                        );
+                        break;
+                    case 'radio':
+                        inputNode = (
+                            <Radio.Group>
+                                {field.options?.map(opt => (
+                                    <Radio key={opt.value} value={opt.value}>
+                                        {opt.label}
+                                    </Radio>
+                                ))}
+                            </Radio.Group>
+                        );
+                        break;
+                    case 'checkbox':
+                        inputNode = (
+                             <Checkbox.Group>
+                                {field.options?.map(opt => (
+                                    <Checkbox key={opt.value} value={opt.value}>
+                                        {opt.label}
+                                    </Checkbox>
+                                ))}
+                            </Checkbox.Group>
+                        );
+                        break;
+                    case 'textarea':
+                        inputNode = <Input.TextArea {...commonProps} rows={4} />;
+                        break;
+                    case 'file':
+                        inputNode = (
+                             <Upload beforeUpload={() => false} maxCount={1}>
+                                <Button icon={<UploadOutlined />}>点击上传</Button>
+                             </Upload>
+                        );
+                        break;
+                    default:
+                        inputNode = <Input {...commonProps} type={field.type === 'tel' ? 'tel' : 'text'} />;
+                }
+
+                const itemProps = {
+                    key: field.name,
+                    name: field.name,
+                    label: field.label,
+                    rules: [{ required: field.required, message: `请填写${field.label}` }],
+                };
+
+                if (field.type === 'file') {
+                    itemProps.valuePropName = 'fileList';
+                    itemProps.getValueFromEvent = normFile;
+                }
+
+                return (
+                    <Form.Item {...itemProps}>
+                        {inputNode}
+                    </Form.Item>
+                );
+            })}
+         </Form>
+      </Modal>
+      <Modal
+        title="微信支付"
+        open={paymentModalVisible}
+        onCancel={() => setPaymentModalVisible(false)}
+        footer={null}
+        destroyOnHidden
+        width={360}
+        zIndex={1001} // 确保层级高于其他弹窗
+      >
+         <div style={{ textAlign: 'center', padding: '20px 0' }}>
+            {paymentInfo?.code_url ? (
+                <>
+                    <div style={{ background: '#fff', padding: 10, display: 'inline-block' }}>
+                        <QRCodeSVG value={paymentInfo.code_url} size={200} />
+                    </div>
+                    <p style={{ marginTop: 20, fontSize: 18, fontWeight: 'bold' }}>¥{paymentInfo.price}</p>
+                    <p style={{ color: '#666' }}>请使用微信扫一扫支付</p>
+                </>
+            ) : (
+                <Spin tip="正在生成二维码..." />
+            )}
+            <div style={{ marginTop: 20 }}>
+                <Button type="primary" onClick={() => window.location.reload()}>
+                    我已支付
+                </Button>
+            </div>
+         </div>
+      </Modal>
+
+    </motion.div>
+  );
+};
+
+export default ActivityDetail;