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/components/activity/ActivityCard.jsx
+++ b/frontend/src/components/activity/ActivityCard.jsx
@@ -0,0 +1,101 @@
+
+import React, { useState, useRef, useLayoutEffect } from 'react';
+import { motion } from 'framer-motion';
+import { CalendarOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import styles from './activity.module.less';
+import { hoverScale } from '../../animation';
+
+const ActivityCard = ({ activity }) => {
+  const navigate = useNavigate();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const imgRef = useRef(null);
+
+  const handleCardClick = () => {
+    navigate(`/activity/${activity.id}`);
+  };
+
+  const getStatus = (startTime) => {
+    const now = new Date();
+    const start = new Date(startTime);
+    if (now < start) return '即将开始';
+    return '报名中';
+  };
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return 'TBD';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' });
+  };
+
+  const imgSrc = hasError 
+    ? 'https://via.placeholder.com/600x400?text=No+Image' 
+    : (activity.display_banner_url || activity.banner_url || activity.cover_image || 'https://via.placeholder.com/600x400');
+
+  // Check if image is already loaded (cached) to prevent flashing
+  useLayoutEffect(() => {
+    if (imgRef.current && imgRef.current.complete) {
+      setIsLoaded(true);
+    }
+  }, [imgSrc]);
+
+  return (
+    <motion.div
+      className={styles.activityCard}
+      variants={hoverScale}
+      whileHover="hover"
+      onClick={handleCardClick}
+      layoutId={`activity-card-${activity.id}`}
+      style={{ willChange: 'transform' }}
+    >
+      <div className={styles.imageContainer}>
+        {/* Placeholder Background - Always visible behind the image */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#f5f5f5',
+            zIndex: 0,
+          }}
+        />
+        
+        <img
+          ref={imgRef}
+          src={imgSrc}
+          alt={activity.title}
+          style={{ 
+            position: 'relative', 
+            zIndex: 1,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            opacity: isLoaded ? 1 : 0,
+            transition: 'opacity 0.3s ease-out'
+          }}
+          onLoad={() => setIsLoaded(true)}
+          onError={() => {
+            setHasError(true);
+            setIsLoaded(true);
+          }}
+          loading="lazy"
+        />
+        <div className={styles.overlay} style={{ zIndex: 2 }}>
+          <div className={styles.statusTag}>
+            {activity.status || getStatus(activity.start_time)}
+          </div>
+          <h3 className={styles.title}>{activity.title}</h3>
+          <div className={styles.time}>
+            <CalendarOutlined />
+            <span>{formatDate(activity.start_time)}</span>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ActivityCard;
--- a/frontend/src/components/activity/ActivityCard.stories.jsx
+++ b/frontend/src/components/activity/ActivityCard.stories.jsx
@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import ActivityCard from './ActivityCard';
+import '../../index.css'; // Global styles
+import '../../App.css'; 
+
+export default {
+  title: 'Components/Activity/ActivityCard',
+  component: ActivityCard,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <div style={{ maxWidth: '400px', padding: '20px' }}>
+          <Story />
+        </div>
+      </MemoryRouter>
+    ),
+  ],
+  tags: ['autodocs'],
+};
+
+const Template = (args) => <ActivityCard {...args} />;
+
+export const NotStarted = Template.bind({});
+NotStarted.args = {
+  activity: {
+    id: 1,
+    title: 'Future AI Hardware Summit 2026',
+    start_time: '2026-12-01T09:00:00',
+    status: '即将开始',
+    cover_image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80',
+  },
+};
+
+export const Ongoing = Template.bind({});
+Ongoing.args = {
+  activity: {
+    id: 2,
+    title: 'Edge Computing Hackathon',
+    start_time: '2025-10-20T10:00:00',
+    status: '报名中',
+    cover_image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80',
+  },
+};
+
+export const Ended = Template.bind({});
+Ended.args = {
+  activity: {
+    id: 3,
+    title: 'Deep Learning Workshop',
+    start_time: '2023-05-15T14:00:00',
+    status: '已结束',
+    cover_image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80',
+  },
+};
+
+export const SignedUp = Template.bind({});
+SignedUp.args = {
+  activity: {
+    id: 4,
+    title: 'Exclusive Developer Meetup',
+    start_time: '2025-11-11T18:00:00',
+    status: '已报名',
+    cover_image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80',
+  },
+};
--- a/frontend/src/components/activity/ActivityList.jsx
+++ b/frontend/src/components/activity/ActivityList.jsx
@@ -0,0 +1,110 @@
+
+import React, { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { motion, AnimatePresence } from 'framer-motion';
+import { RightOutlined, LeftOutlined } from '@ant-design/icons';
+import { getActivities } from '../../api';
+import ActivityCard from './ActivityCard';
+import styles from './activity.module.less';
+import { fadeInUp, staggerContainer } from '../../animation';
+
+const ActivityList = () => {
+  const { data: activities, isLoading, error } = useQuery({
+    queryKey: ['activities'],
+    queryFn: async () => {
+      const res = await getActivities();
+      // Handle different response structures
+      return Array.isArray(res.data) ? res.data : (res.data?.results || []);
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes cache
+  });
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Auto-play for desktop carousel
+  useEffect(() => {
+    if (!activities || activities.length <= 1) return;
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % activities.length);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [activities]);
+
+  const nextSlide = () => {
+    if (!activities) return;
+    setCurrentIndex((prev) => (prev + 1) % activities.length);
+  };
+
+  const prevSlide = () => {
+    if (!activities) return;
+    setCurrentIndex((prev) => (prev - 1 + activities.length) % activities.length);
+  };
+
+  if (isLoading) return <div className={styles.loading}>Loading activities...</div>;
+  if (error) return null; // Or error state
+  if (!activities || activities.length === 0) return null;
+
+  return (
+    <motion.div 
+      className={styles.activitySection}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.2 }}
+      variants={staggerContainer}
+    >
+      <div className={styles.header}>
+        <h2 className={styles.sectionTitle}>
+          近期活动 / EVENTS
+        </h2>
+        <div className={styles.controls}>
+          <button onClick={prevSlide} className={styles.navBtn}><LeftOutlined /></button>
+          <button onClick={nextSlide} className={styles.navBtn}><RightOutlined /></button>
+        </div>
+      </div>
+
+      {/* Desktop: Carousel (Show one prominent, but allows list structure if needed) 
+          User said: "Activity only shows one, and in the form of a sliding page"
+      */}
+      <div className={styles.desktopCarousel}>
+         <AnimatePresence>
+            <motion.div
+              key={currentIndex}
+              initial={{ x: '100%' }}
+              animate={{ x: 0, zIndex: 1 }}
+              exit={{ x: '-100%', zIndex: 0 }}
+              transition={{ duration: 0.5, ease: "easeInOut" }}
+              style={{ 
+                width: '100%',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+              }}
+            >
+              <ActivityCard activity={activities[currentIndex]} />
+            </motion.div>
+         </AnimatePresence>
+         
+         <div className={styles.dots} style={{ position: 'absolute', bottom: '10px', width: '100%', zIndex: 10 }}>
+            {activities.map((_, idx) => (
+              <span 
+                key={idx} 
+                className={`${styles.dot} ${idx === currentIndex ? styles.activeDot : ''}`}
+                onClick={() => setCurrentIndex(idx)}
+              />
+            ))}
+         </div>
+      </div>
+
+      {/* Mobile: Vertical List/Scroll as requested "Mobile vertical scroll" */}
+      <div className={styles.mobileList}>
+        {activities.map((item, index) => (
+          <motion.div key={item.id} variants={fadeInUp} custom={index}>
+             <ActivityCard activity={item} />
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
+
+export default ActivityList;
--- a/frontend/src/components/activity/activity.module.less
+++ b/frontend/src/components/activity/activity.module.less
@@ -0,0 +1,266 @@
+
+@import '../../theme.module.less';
+
+.activitySection {
+  padding: var(--spacing-lg) 0;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-md);
+}
+
+.sectionTitle {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  &::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 24px;
+    background: var(--primary-color);
+    border-radius: 2px;
+  }
+}
+
+.controls {
+  display: flex;
+  gap: var(--spacing-sm);
+  
+  @media (max-width: 768px) {
+    display: none; /* Hide carousel controls on mobile */
+  }
+}
+
+.navBtn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+}
+
+/* Desktop Carousel */
+.desktopCarousel {
+  position: relative;
+  width: 100%;
+  height: 440px; /* 400px card + space for dots */
+  overflow: hidden;
+  
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: var(--spacing-md);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &.activeDot {
+    background: var(--primary-color);
+    transform: scale(1.2);
+  }
+}
+
+/* Mobile List */
+.mobileList {
+  display: none;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  
+  @media (max-width: 768px) {
+    display: flex;
+  }
+}
+
+/* --- Card Styles --- */
+.activityCard {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--background-card);
+  box-shadow: var(--box-shadow-base);
+  transition: all 0.3s ease;
+  
+  @media (max-width: 768px) {
+    height: 300px;
+  }
+}
+
+.imageContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+  }
+}
+
+.overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60%;
+  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--spacing-lg);
+  box-sizing: border-box;
+}
+
+.statusTag {
+  display: inline-block;
+  background: var(--primary-color);
+  color: #fff;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  width: fit-content;
+  text-transform: uppercase;
+}
+
+.title {
+  color: var(--text-primary);
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: var(--spacing-xs);
+  line-height: 1.3;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+  
+  @media (max-width: 768px) {
+    font-size: 18px;
+  }
+}
+
+.time {
+  color: var(--text-secondary);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Detail Page Styles */
+.detailHeader {
+  position: relative;
+  height: 50vh;
+  min-height: 300px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.detailImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.detailContent {
+  max-width: 800px;
+  margin: -60px auto 0;
+  position: relative;
+  z-index: 10;
+  padding: 0 var(--spacing-lg) 100px; /* Bottom padding for fixed footer */
+}
+
+.infoCard {
+  background: var(--background-card);
+  padding: var(--spacing-lg);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--box-shadow-base);
+  margin-bottom: var(--spacing-lg);
+  border: 1px solid var(--border-color);
+}
+
+.richText {
+  color: var(--text-secondary);
+  line-height: 1.8;
+  font-size: 16px;
+  
+  img {
+    max-width: 100%;
+    border-radius: var(--border-radius-base);
+    margin: var(--spacing-md) 0;
+  }
+  
+  h1, h2, h3 {
+    color: var(--text-primary);
+    margin-top: var(--spacing-lg);
+  }
+}
+
+.fixedFooter {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(31, 31, 31, 0.95);
+  backdrop-filter: blur(10px);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 100;
+  box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
+}
+
+.actionBtn {
+  background: var(--primary-color);
+  color: #fff;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 185, 107, 0.3);
+  transition: all 0.3s;
+  
+  &:disabled {
+    background: #555;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+}