sms

2026-02-16 20:15:26 +08:00
parent 91d82b78b5
commit b2f9545fdd
39 changed files with 5481 additions and 0 deletions
--- a/frontend/src/pages/VCCourses.jsx
+++ b/frontend/src/pages/VCCourses.jsx
@@ -0,0 +1,129 @@
+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 { getVCCourses } from '../api';
+
+const { Title, Paragraph } = Typography;
+
+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' }}>
+        <div style={{ textAlign: 'center', marginBottom: 60, position: 'relative', zIndex: 2 }}>
+            <Title level={1} style={{ color: '#fff', letterSpacing: 4 }}>
+                VC <span style={{ color: '#00f0ff' }}>CODING COURSES</span>
+            </Title>
+            <Paragraph style={{ color: '#aaa', fontSize: 18, maxWidth: 600, margin: '0 auto' }}>
+                探索 VB Coding 软件与硬件课程，开启您的编程之旅。
+            </Paragraph>
+        </div>
+
+        {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;