finish

frontend/src/App.jsx

@@ -6,7 +6,8 @@ import ProductDetail from './pages/ProductDetail';
 import Payment from './pages/Payment';
 import AIServices from './pages/AIServices';
 import ServiceDetail from './pages/ServiceDetail';
-import VBCourses from './pages/VBCourses';
+import VCCourses from './pages/VCCourses';
+import VCCourseDetail from './pages/VCCourseDetail';
 import MyOrders from './pages/MyOrders';
 import 'antd/dist/reset.css';
 import './App.css';
@@ -19,7 +20,8 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/services" element={<AIServices />} />
           <Route path="/services/:id" element={<ServiceDetail />} />
-          <Route path="/courses" element={<VBCourses />} />
+          <Route path="/courses" element={<VCCourses />} />
+          <Route path="/courses/:id" element={<VCCourseDetail />} />
           <Route path="/my-orders" element={<MyOrders />} />
           <Route path="/product/:id" element={<ProductDetail />} />
           <Route path="/payment/:orderId" element={<Payment />} />

frontend/src/api.js

@@ -19,7 +19,9 @@ export const confirmPayment = (orderId) => api.post(`/orders/${orderId}/confirm_
 export const getServices = () => api.get('/services/');
 export const getServiceDetail = (id) => api.get(`/services/${id}/`);
 export const createServiceOrder = (data) => api.post('/service-orders/', data);
-export const getVBCourses = () => api.get('/courses/');
+export const getVCCourses = () => api.get('/courses/');
+export const getVCCourseDetail = (id) => api.get(`/courses/${id}/`);
+export const enrollCourse = (data) => api.post('/course-enrollments/', data);
 
 export const sendSms = (data) => api.post('/auth/send-sms/', data);
 export const queryMyOrders = (data) => api.post('/orders/my_orders/', data);

frontend/src/components/Layout.jsx

@@ -36,7 +36,7 @@ const Layout = ({ children }) => {
     {
       key: '/courses',
       icon: <EyeOutlined />,
-      label: 'VB 课程',
+      label: 'VC 课程',
     },
     {
       key: '/my-orders',

frontend/src/pages/VCCourseDetail.jsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useSearchParams } 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 } from '@ant-design/icons';
+import { getVCCourseDetail, createOrder } from '../api';
+import { motion } from 'framer-motion';
+
+const { Title, Paragraph } = Typography;
+
+const VCCourseDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [course, setCourse] = 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(() => {
+    const fetchDetail = async () => {
+      try {
+        const response = await getVCCourseDetail(id);
+        setCourse(response.data);
+      } catch (error) {
+        console.error("Failed to fetch course detail:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchDetail();
+  }, [id]);
+
+  const handleEnroll = async (values) => {
+      setSubmitting(true);
+      try {
+          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);
+      } catch (error) {
+          console.error(error);
+          message.error('提交失败，请重试');
+      } finally {
+          setSubmitting(false);
+      }
+  };
+
+  if (loading) {
+    return (
+        <div style={{ textAlign: 'center', padding: '100px 0' }}>
+            <Spin size="large" tip="Loading..." />
+        </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>
+
+      <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 }}>
+                    <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>
+                    
+                    <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>
+                        </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 style={{ color: '#ccc', lineHeight: '1.8', fontSize: '16px', whiteSpace: 'pre-line' }}>
+                                 {course.content}
+                             </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 }}>报名咨询</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={<FormOutlined />}
+                            style={{ 
+                                height: 50, 
+                                background: '#00f0ff', 
+                                borderColor: '#00f0ff',
+                                color: '#000',
+                                fontWeight: 'bold',
+                                fontSize: '16px'
+                            }}
+                            onClick={() => setIsModalOpen(true)}
+                        >
+                            立即报名 / 咨询
+                        </Button>
+                        <p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
+                            * 提交后我们的顾问将尽快与您联系确认
+                        </p>
+                    </div>
+                </div>
+            </Col>
+        </Row>
+      </motion.div>
+
+      {/* Enroll Modal */}
+      <Modal
+        title={`报名/咨询 - ${course.title}`}
+        open={isModalOpen}
+        onCancel={() => setIsModalOpen(false)}
+        footer={null}
+        destroyOnHidden
+      >
+        <p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式，我们将为您安排课程顾问。</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}>提交报名</Button>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default VCCourseDetail;

frontend/src/pages/VCCourses.jsx

@@ -1,22 +1,24 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Button, Typography, Spin, Row, Col, Empty, Tag } from 'antd';
 import { ReadOutlined, ClockCircleOutlined, UserOutlined, BookOutlined } from '@ant-design/icons';
-import { getVBCourses } from '../api';
+import { getVCCourses } from '../api';
 
 const { Title, Paragraph } = Typography;
 
-const VBCourses = () => {
+const VCCourses = () => {
   const [courses, setCourses] = useState([]);
   const [loading, setLoading] = useState(true);
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchCourses = async () => {
         try {
-            const res = await getVBCourses();
+            const res = await getVCCourses();
             setCourses(res.data);
         } catch (error) {
-            console.error("Failed to fetch VB Courses:", error);
+            console.error("Failed to fetch VC Courses:", error);
         } finally {
             setLoading(false);
         }
@@ -30,10 +32,10 @@ const VBCourses = () => {
     <div style={{ padding: '40px 0', minHeight: '80vh', position: 'relative' }}>
         <div style={{ textAlign: 'center', marginBottom: 60, position: 'relative', zIndex: 2 }}>
             <Title level={1} style={{ color: '#fff', letterSpacing: 4 }}>
-                VB <span style={{ color: '#00f0ff' }}>CODING COURSES</span>
+                VC <span style={{ color: '#00f0ff' }}>CODING COURSES</span>
             </Title>
             <Paragraph style={{ color: '#aaa', fontSize: 18, maxWidth: 600, margin: '0 auto' }}>
-                探索 Vibe Coding 软件与硬件课程，开启您的编程之旅。
+                探索 VB Coding 软件与硬件课程，开启您的编程之旅。
             </Paragraph>
         </div>
 
@@ -50,6 +52,8 @@ const VBCourses = () => {
                             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)', 
@@ -122,4 +126,4 @@ const VBCourses = () => {
   );
 };
 
-export default VBCourses;
+export default VCCourses;