new

backend/community/admin.py

@@ -44,7 +44,8 @@ class ActivityAdmin(ModelAdmin):
             'classes': ('tab',)
         }),
         ('报名设置', {
-            'fields': ('max_participants',)
+            'fields': ('max_participants', 'ask_name', 'ask_phone', 'ask_wechat', 'ask_company', 'signup_form_config'),
+            'description': '勾选需要收集的信息，或者在下方“自定义报名配置”中填写高级JSON配置'
         }),
     )
 

backend/community/migrations/0009_activity_ask_company_activity_ask_name_and_more.py

@@ -0,0 +1,38 @@
+# Generated by Django 6.0.1 on 2026-02-12 12:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('community', '0008_activity_signup_form_config_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='activity',
+            name='ask_company',
+            field=models.BooleanField(default=False, verbose_name='收集公司/机构'),
+        ),
+        migrations.AddField(
+            model_name='activity',
+            name='ask_name',
+            field=models.BooleanField(default=False, verbose_name='收集姓名'),
+        ),
+        migrations.AddField(
+            model_name='activity',
+            name='ask_phone',
+            field=models.BooleanField(default=False, verbose_name='收集手机号'),
+        ),
+        migrations.AddField(
+            model_name='activity',
+            name='ask_wechat',
+            field=models.BooleanField(default=False, verbose_name='收集微信号'),
+        ),
+        migrations.AlterField(
+            model_name='activity',
+            name='signup_form_config',
+            field=models.JSONField(blank=True, default=list, help_text='JSON格式的高级配置，若填写则优先于上方开关。例如：[{"name": "job", "label": "职位", "type": "text", "required": true}]', verbose_name='自定义报名配置'),
+        ),
+    ]

backend/community/models.py

@@ -14,11 +14,18 @@ class Activity(models.Model):
     location = models.CharField(max_length=100, verbose_name="活动地点")
     max_participants = models.IntegerField(default=50, verbose_name="最大报名人数")
     is_active = models.BooleanField(default=True, verbose_name="是否启用")
+    
+    # 常用报名信息开关
+    ask_name = models.BooleanField(default=False, verbose_name="收集姓名")
+    ask_phone = models.BooleanField(default=False, verbose_name="收集手机号")
+    ask_wechat = models.BooleanField(default=False, verbose_name="收集微信号")
+    ask_company = models.BooleanField(default=False, verbose_name="收集公司/机构")
+    
     signup_form_config = models.JSONField(
         default=list,
-        verbose_name="报名表单配置",
+        verbose_name="自定义报名配置",
         blank=True,
-        help_text='配置报名时需要收集的信息，JSON格式，例如：[{"name": "phone", "label": "手机号", "type": "text", "required": true}]'
+        help_text='JSON格式的高级配置，若填写则优先于上方开关。例如：[{"name": "job", "label": "职位", "type": "text", "required": true}]'
     )
     created_at = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
 

backend/community/serializers.py

@@ -4,11 +4,30 @@ from shop.serializers import WeChatUserSerializer, ESP32ConfigSerializer, Servic
 
 class ActivitySerializer(serializers.ModelSerializer):
     display_banner_url = serializers.ReadOnlyField()
+    signup_form_config = serializers.SerializerMethodField()
     
     class Meta:
         model = Activity
         fields = '__all__'
 
+    def get_signup_form_config(self, obj):
+        # 1. 优先使用 JSON 配置
+        if obj.signup_form_config:
+            return obj.signup_form_config
+        
+        # 2. 否则根据开关生成默认配置
+        config = []
+        if obj.ask_name:
+            config.append({"name": "name", "label": "姓名", "type": "text", "required": True})
+        if obj.ask_phone:
+            config.append({"name": "phone", "label": "手机号", "type": "number", "required": True})
+        if obj.ask_wechat:
+            config.append({"name": "wechat", "label": "微信号", "type": "text", "required": True})
+        if obj.ask_company:
+            config.append({"name": "company", "label": "公司/机构", "type": "text", "required": False})
+            
+        return config
+
 class ActivitySignupSerializer(serializers.ModelSerializer):
     activity_info = ActivitySerializer(source='activity', read_only=True)
 

backend/community/views.py

@@ -41,14 +41,31 @@ class ActivityViewSet(viewsets.ReadOnlyModelViewSet):
         signup_info = request.data.get('signup_info', {})
         
         # Basic validation
-        if activity.signup_form_config:
+        # Re-fetch the config from the object method or serializer logic if needed,
-            required_fields = [f['name'] for f in activity.signup_form_config if f.get('required')]
+        # but here we can just use the serializer's method to get the effective config.
+        # However, accessing serializer method from view is tricky without instantiating.
+        # Let's replicate the logic or rely on the fact that we can construct it.
+        
+        effective_config = activity.signup_form_config
+        if not effective_config:
+             effective_config = []
+             if activity.ask_name:
+                 effective_config.append({"name": "name", "label": "姓名", "type": "text", "required": True})
+             if activity.ask_phone:
+                 effective_config.append({"name": "phone", "label": "手机号", "type": "number", "required": True})
+             if activity.ask_wechat:
+                 effective_config.append({"name": "wechat", "label": "微信号", "type": "text", "required": True})
+             if activity.ask_company:
+                 effective_config.append({"name": "company", "label": "公司/机构", "type": "text", "required": False})
+
+        if effective_config:
+            required_fields = [f['name'] for f in effective_config if f.get('required')]
             for field in required_fields:
                 # Simple check: field exists and is not empty string (if it's a string)
                 val = signup_info.get(field)
                 if val is None or (isinstance(val, str) and not val.strip()):
                      # Try to find label for better error message
-                     label = next((f['label'] for f in activity.signup_form_config if f['name'] == field), field)
+                     label = next((f['label'] for f in effective_config if f['name'] == field), field)
                      return Response({'error': f'请填写: {label}'}, status=400)
             
         signup = ActivitySignup.objects.create(

frontend/package.json

@@ -30,14 +30,27 @@
     "three": "^0.182.0"
   },
   "devDependencies": {
+    "@ant-design/icons": "^6.1.0",
     "@eslint/js": "^9.39.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
+    "@storybook/test": "^8.6.15",
+    "@tanstack/react-query": "^5.90.21",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "canvas-confetti": "^1.9.4",
+    "classnames": "^2.5.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "vite": "^7.2.4"
+    "less": "^4.5.1",
+    "storybook": "^10.2.8",
+    "vite": "^7.2.4",
+    "vite-plugin-imagemin": "^0.6.1"
   }
 }

frontend/src/animation.js

@@ -0,0 +1,35 @@
+export const fadeInUp = {
+  initial: { opacity: 0, y: 30 },
+  animate: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
+  exit: { opacity: 0, y: 20, transition: { duration: 0.4 } }
+};
+
+export const staggerContainer = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.08
+    }
+  }
+};
+
+export const cardHover = {
+  hover: {
+    scale: 1.03,
+    boxShadow: "0 20px 40px rgba(0,0,0,0.4)",
+    y: -5,
+    transition: { duration: 0.3, ease: "easeOut" }
+  }
+};
+
+export const buttonClick = {
+  tap: { scale: 0.95 }
+};
+
+export const pageTransition = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.4 }
+};

frontend/src/api.js

@@ -65,5 +65,7 @@ export const uploadMedia = (data) => {
 export const getStarUsers = () => api.get('/users/stars/');
 export const getMyPaidItems = () => api.get('/users/paid-items/');
 export const getAnnouncements = () => api.get('/community/announcements/');
+export const getActivities = () => api.get('/community/activities/');
+export const getActivityDetail = (id) => api.get(`/community/activities/${id}/`);
 
 export default api;

frontend/src/components/activity/Activity.module.less

@@ -0,0 +1,244 @@
+@import '../../styles/theme.less';
+
+.container {
+  padding: 24px 0;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 0 24px;
+
+  .sectionTitle {
+    font-size: 24px;
+    font-weight: bold;
+    color: @text-color;
+    letter-spacing: 1px;
+  }
+
+  .moreBtn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    color: @primary-color;
+    transition: all 0.3s;
+
+    &:hover {
+      color: lighten(@primary-color, 10%);
+      transform: translateX(4px);
+    }
+  }
+}
+
+.card {
+  position: relative;
+  border-radius: @border-radius-base;
+  overflow: hidden;
+  aspect-ratio: 16/9;
+  cursor: pointer;
+  background: @card-bg;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  @media (max-width: 768px) {
+    aspect-ratio: 3/4;
+  }
+
+  .image {
+    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: 24px;
+  }
+
+  .status {
+    display: inline-block;
+    padding: 4px 12px;
+    background: @primary-color;
+    color: #000;
+    font-size: 12px;
+    font-weight: bold;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    width: fit-content;
+  }
+
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+    color: @text-color;
+    margin-bottom: 8px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+  }
+
+  .time {
+    font-size: 14px;
+    color: @text-secondary;
+  }
+
+  &:hover {
+    .image {
+      transform: scale(1.05);
+    }
+  }
+}
+
+// Detail Page
+.detailContainer {
+  min-height: 100vh;
+  background: @bg-color;
+  color: @text-color;
+  padding-bottom: 80px;
+}
+
+.heroSection {
+  position: relative;
+  height: 50vh;
+  width: 100%;
+  overflow: hidden;
+
+  .heroImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .backBtn {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    z-index: 10;
+    background: rgba(0,0,0,0.5);
+    border: none;
+    color: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    backdrop-filter: blur(4px);
+
+    &:hover {
+      background: rgba(0,0,0,0.7);
+    }
+  }
+}
+
+.contentSection {
+  padding: 24px;
+  max-width: 800px;
+  margin: 0 auto;
+  margin-top: -60px;
+  position: relative;
+  z-index: 2;
+  background: rgba(30, 30, 30, 0.8);
+  backdrop-filter: blur(20px);
+  border-radius: 24px 24px 0 0;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.metaInfo {
+  margin-bottom: 32px;
+  
+  h1 {
+    font-size: 32px;
+    margin-bottom: 16px;
+    color: @text-color;
+  }
+}
+
+.infoRow {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 16px;
+  color: @text-secondary;
+  
+  .icon {
+    margin-right: 8px;
+    color: @primary-color;
+  }
+}
+
+.richText {
+  line-height: 1.8;
+  color: #ddd;
+  font-size: 16px;
+  
+  img {
+    max-width: 100%;
+    border-radius: 8px;
+    margin: 16px 0;
+  }
+  
+  h2, h3 {
+    color: @text-color;
+    margin-top: 24px;
+    margin-bottom: 16px;
+  }
+}
+
+.bottomBar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 16px 24px;
+  background: rgba(20, 20, 20, 0.9);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(255,255,255,0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 100;
+
+  .actionBtn {
+    flex: 1;
+    margin-left: 16px;
+    height: 48px;
+    font-size: 16px;
+    font-weight: bold;
+    border: none;
+    background: @primary-color;
+    box-shadow: 0 4px 12px rgba(0, 185, 107, 0.3);
+    
+    &:hover {
+      background: lighten(@primary-color, 5%);
+    }
+  }
+  
+  .shareBtn {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid rgba(255,255,255,0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    background: transparent;
+    cursor: pointer;
+    
+    &:hover {
+      background: rgba(255,255,255,0.1);
+    }
+  }
+}

frontend/src/components/activity/ActivityCard.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Typography } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
+import { cardHover } from '../../animation';
+import styles from './activity.module.less';
+
+const { Text } = Typography;
+
+const ActivityCard = ({ activity, onClick, layoutId }) => {
+  const { title, start_time, display_banner_url, banner_url, cover_image, status = '报名中' } = activity;
+  const imageUrl = display_banner_url || banner_url || cover_image || 'https://via.placeholder.com/600x300';
+
+  return (
+    <motion.div
+      className={styles.card}
+      variants={cardHover}
+      whileHover="hover"
+      onClick={onClick}
+      layoutId={layoutId}
+    >
+      <motion.img 
+        src={imageUrl} 
+        alt={title} 
+        className={styles.image}
+        loading="lazy"
+      />
+      <div className={styles.overlay}>
+        <div className={styles.info}>
+          <span className={styles.status}>{status}</span>
+          <h3 className={styles.title}>{title}</h3>
+          <div className={styles.time}>
+            <CalendarOutlined style={{ marginRight: 8 }} />
+            {start_time ? start_time.split('T')[0] : 'TBD'}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ActivityCard;

frontend/src/components/activity/ActivityList.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Carousel } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { RightOutlined } from '@ant-design/icons';
+import { getActivities } from '../../api';
+import ActivityCard from './ActivityCard';
+import styles from './activity.module.less';
+import { motion } from 'framer-motion';
+import { fadeInUp } from '../../animation';
+
+const ActivityList = () => {
+  const navigate = useNavigate();
+  const { data: activities, isLoading } = useQuery({
+    queryKey: ['activities'],
+    queryFn: async () => {
+      try {
+        const res = await getActivities();
+        return Array.isArray(res) ? res : (res?.results || res?.data || []);
+      } catch (e) {
+        console.error("Failed to fetch activities", e);
+        return [];
+      }
+    },
+    staleTime: 1000 * 60 * 5, // Cache for 5 mins
+  });
+
+  if (isLoading || !activities || activities.length === 0) return null;
+
+  const goToDetail = (id) => {
+    navigate(`/activity/${id}`);
+  };
+
+  return (
+    <motion.div 
+      className={styles.container}
+      initial="initial"
+      whileInView="animate"
+      viewport={{ once: true, margin: "-100px" }}
+      variants={fadeInUp}
+    >
+      <div className={styles.sectionHeader}>
+        <div className={styles.sectionTitle}>近期活动 / EVENTS</div>
+        <div className={styles.moreBtn} onClick={() => navigate('/activity/list')}>
+          <span>MORE</span>
+          <RightOutlined />
+        </div>
+      </div>
+      
+      <Carousel 
+        autoplay 
+        autoplaySpeed={5000}
+        effect="scrollx"
+        slidesToShow={1}
+        dots={true}
+        className={styles.carousel}
+      >
+        {activities.map(item => (
+           <div key={item.id} className={styles.slideItem}>
+             <ActivityCard 
+               activity={item} 
+               onClick={() => goToDetail(item.id)} 
+               layoutId={`activity-${item.id}`}
+             />
+           </div>
+        ))}
+      </Carousel>
+    </motion.div>
+  );
+};
+
+export default ActivityList;

frontend/src/main.jsx

@@ -1,10 +1,15 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import './index.css'
 import App from './App.jsx'
 
+const queryClient = new QueryClient()
+
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 )

frontend/src/pages/MyOrders.jsx

@@ -1,31 +1,28 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Card, List, Tag, Typography, message, Space, Statistic, Divider, Modal, Descriptions } from 'antd';
+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 } from '@ant-design/icons';
+import { MobileOutlined, LockOutlined, SearchOutlined, CarOutlined, InboxOutlined, SafetyCertificateOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, UserOutlined, EnvironmentOutlined, PhoneOutlined, CalendarOutlined } from '@ant-design/icons';
-import { queryMyOrders } from '../api';
+import { queryMyOrders, 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 [loginVisible, setLoginVisible] = useState(false);
+  const navigate = useNavigate();
   
   const { user, login } = useAuth();
 
   useEffect(() => {
     if (user) {
-      // 如果已登录，自动查询订单
+      handleQueryData();
-      if (user.phone_number) {
-        handleQueryOrders(user.phone_number);
-      }
-    } else {
-      // Don't auto-show login modal on mount if not logged in, just show the "Please login" UI
-      // setLoginVisible(true); 
     }
   }, [user]);
 
@@ -34,36 +31,25 @@ const MyOrders = () => {
     setModalVisible(true);
   };
 
-  const handleQueryOrders = async (phone) => {
+  const handleQueryData = async () => {
     setLoading(true);
     try {
-      // 使用 queryMyOrders 接口，这里我们需要调整该接口以支持仅传手机号（如果已登录）
-      // 或者，既然已登录，后端应该能通过 Token 知道是谁，直接查这个人的订单
-      // 但目前的 queryMyOrders 是 POST {phone_number, code}，这主要用于免登录查询
-      // 我们应该使用 OrderViewSet 的 list 方法，它已经支持 filter(wechat_user=user)
-      // 但前端 api.js 中 getOrder 是查单个，我们需要一个 getMyOrders 接口
-      
-      // 修改策略：如果已登录，直接调用 queryMyOrders，但不需要 code？
-      // 后端 my_orders 接口目前强制需要 code。
-      // 应该使用 OrderViewSet 的标准 list 接口，它会根据 Token 返回自己的订单。
-      // api.js 中没有导出 getOrders list 接口，我们可以临时用 queryMyOrders 但绕过 code 检查？
-      // 不，最好的方式是使用标准的 GET /orders/，后端 OrderViewSet.get_queryset 已经处理了 get_current_wechat_user
-      
-      // 让我们先用 GET /orders/ 试试，需要在 api.js 确认是否有 export
-      // 检查 api.js 发现没有 getOrderList， 只有 getOrder(id)
-      // 我们需要修改 api.js 或在此处直接调用
-      
-      // 为了不修改 api.js 太多，我们引入 axios 实例自己发请求，或者假设 api.js 有一个 getMyOrderList
-      // 实际上，查看 api.js， queryMyOrders 是 POST /orders/my_orders/，这是免登录版本
-      // 我们应该用 GET /orders/，因为 get_queryset 已经过滤了。
-      
-      // 临时引入 api 实例
       const { default: api } = await import('../api');
-      const response = await api.get('/orders/');
+      
-      setOrders(response.data);
+      // Parallel fetch
-      if (response.data.length === 0) {
+      const [ordersRes, activitiesRes] = await Promise.allSettled([
-        message.info('您暂时没有订单');
+          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('查询出错');
@@ -107,104 +93,176 @@ const MyOrders = () => {
             <div style={{ marginBottom: 20, textAlign: 'right', color: '#fff' }}>
                当前登录用户: <span style={{ color: '#00b96b', fontWeight: 'bold', marginRight: 10 }}>{user.nickname}</span>
                <Button 
-                 onClick={() => handleQueryOrders(user.phone_number)}
+                 onClick={handleQueryData}
                  loading={loading}
                  icon={<SearchOutlined />}
                >
-                 刷新订单
+                 刷新
                </Button>
             </div>
             
-            <List
+            <Tabs defaultActiveKey="1" items={[
-            grid={{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}
+                {
-            dataSource={orders}
+                    key: '1',
-            loading={loading}
+                    label: <span style={{ fontSize: 16 }}>我的订单</span>,
-            renderItem={order => (
+                    children: (
-                <List.Item>
+                        <List
-                  <Card 
+                        grid={{ gutter: 24, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3 }}
-                    hoverable
+                        dataSource={orders}
-                    onClick={() => showDetail(order)}
+                        loading={loading}
-                    title={<Space><span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
+                        renderItem={order => (
-                    style={{ 
+                            <List.Item>
-                      background: 'rgba(0,0,0,0.6)', 
+                              <Card 
-                      border: '1px solid rgba(255,255,255,0.1)', 
+                                hoverable
-                      marginBottom: 10,
+                                onClick={() => showDetail(order)}
-                      backdropFilter: 'blur(10px)'
+                                title={<Space><span style={{ color: '#fff' }}>订单号: {order.id}</span> {getStatusTag(order.status)}</Space>}
-                    }}
+                                style={{ 
-                    headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
+                                  background: 'rgba(0,0,0,0.6)', 
-                    bodyStyle={{ padding: '20px' }}
+                                  border: '1px solid rgba(255,255,255,0.1)', 
-                  >
+                                  marginBottom: 10,
-                    <div style={{ color: '#ccc' }}>
+                                  backdropFilter: 'blur(10px)'
-                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+                                }}
-                         <Text strong style={{ color: '#00b96b', fontSize: 16 }}>{order.total_price} 元</Text>
+                                headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
-                         <Text style={{ color: '#888' }}>{new Date(order.created_at).toLocaleString()}</Text>
+                                bodyStyle={{ padding: '20px' }}
-                      </div>
+                              >
-                      
+                                <div style={{ color: '#ccc' }}>
-                      <div style={{ background: 'rgba(255,255,255,0.05)', padding: 15, borderRadius: 8, marginBottom: 15 }}>
+                                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
-                         <Space align="center" size="middle">
+                                     <Text strong style={{ color: '#00b96b', fontSize: 16 }}>{order.total_price} 元</Text>
-                            {order.config_image ? (
+                                     <Text style={{ color: '#888' }}>{new Date(order.created_at).toLocaleString()}</Text>
-                                <img 
+                                  </div>
-                                    src={order.config_image} 
+                                  
-                                    alt={order.config_name} 
+                                  <div style={{ background: 'rgba(255,255,255,0.05)', padding: 15, borderRadius: 8, marginBottom: 15 }}>
-                                    style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)' }} 
+                                     <Space align="center" size="middle">
-                                />
+                                        {order.config_image ? (
-                            ) : (
+                                            <img 
-                                <div style={{ 
+                                                src={order.config_image} 
-                                    width: 60, 
+                                                alt={order.config_name} 
-                                    height: 60, 
+                                                style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 8, border: '1px solid rgba(255,255,255,0.1)' }} 
-                                    background: 'rgba(24,144,255,0.1)', 
+                                            />
-                                    borderRadius: 8, 
+                                        ) : (
-                                    display: 'flex', 
+                                            <div style={{ 
-                                    alignItems: 'center', 
+                                                width: 60, 
-                                    justifyContent: 'center',
+                                                height: 60, 
-                                    border: '1px solid rgba(24,144,255,0.2)'
+                                                background: 'rgba(24,144,255,0.1)', 
-                                }}>
+                                                borderRadius: 8, 
-                                    <InboxOutlined style={{ fontSize: 24, color: '#1890ff' }} />
+                                                display: 'flex', 
-                                </div>
+                                                alignItems: 'center', 
-                            )}
+                                                justifyContent: 'center',
-                            <div>
+                                                border: '1px solid rgba(24,144,255,0.2)'
-                              <div style={{ color: '#fff', fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{order.config_name || `商品 ID: ${order.config}`}</div>
+                                            }}>
-                              <div style={{ color: '#888' }}>数量: <span style={{ color: '#00b96b' }}>x{order.quantity}</span></div>
+                                                <InboxOutlined style={{ fontSize: 24, color: '#1890ff' }} />
-                            </div>
+                                            </div>
-                         </Space>
+                                        )}
-                      </div>
+                                        <div>
+                                          <div style={{ color: '#fff', fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{order.config_name || `商品 ID: ${order.config}`}</div>
+                                          <div style={{ color: '#888' }}>数量: <span style={{ color: '#00b96b' }}>x{order.quantity}</span></div>
+                                        </div>
+                                     </Space>
+                                  </div>
 
-                      {(order.courier_name || order.tracking_number) && (
+                                  {(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)' }}>
+                                    <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 direction="vertical" style={{ width: '100%' }}>
-                             <Space>
+                                         <Space>
-                               <CarOutlined style={{ color: '#1890ff', fontSize: 18 }} />
+                                           <CarOutlined style={{ color: '#1890ff', fontSize: 18 }} />
-                               <Text style={{ color: '#fff', fontSize: 16 }}>物流信息</Text>
+                                           <Text style={{ color: '#fff', fontSize: 16 }}>物流信息</Text>
-                             </Space>
+                                         </Space>
-                             <Divider style={{ margin: '8px 0', borderColor: 'rgba(255,255,255,0.1)' }} />
+                                         <Divider style={{ margin: '8px 0', borderColor: 'rgba(255,255,255,0.1)' }} />
-                             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                                         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                <span style={{ color: '#aaa' }}>快递公司:</span>
+                                            <span style={{ color: '#aaa' }}>快递公司:</span>
-                                <span style={{ color: '#fff' }}>{order.courier_name || '未知'}</span>
+                                            <span style={{ color: '#fff' }}>{order.courier_name || '未知'}</span>
-                             </div>
+                                         </div>
-                             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                <span style={{ color: '#aaa' }}>快递单号:</span>
+                                            <span style={{ color: '#aaa' }}>快递单号:</span>
-                                {order.tracking_number ? (
+                                            {order.tracking_number ? (
-                                    <div onClick={(e) => e.stopPropagation()}>
+                                                <div onClick={(e) => e.stopPropagation()}>
-                                        <Paragraph 
+                                                    <Paragraph 
-                                            copyable={{ text: order.tracking_number, tooltips: ['复制', '已复制'] }} 
+                                                        copyable={{ text: order.tracking_number, tooltips: ['复制', '已复制'] }} 
-                                            style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16, margin: 0 }}
+                                                        style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16, margin: 0 }}
-                                        >
+                                                    >
-                                            {order.tracking_number}
+                                                        {order.tracking_number}
-                                        </Paragraph>
+                                                    </Paragraph>
+                                                </div>
+                                            ) : (
+                                                <span style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16 }}>暂无单号</span>
+                                            )}
+                                         </div>
+                                      </Space>
                                     </div>
-                                ) : (
+                                  )}
-                                    <span style={{ color: '#fff', fontFamily: 'monospace', fontSize: 16 }}>暂无单号</span>
+                                </div>
-                                )}
+                              </Card>
-                             </div>
+                            </List.Item>
-                          </Space>
+                          )}
-                        </div>
+                          locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无订单信息</div> }}
-                      )}
+                        />
-                    </div>
+                    )
-                  </Card>
+                },
-                </List.Item>
+                {
-              )}
+                    key: '2',
-              locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无订单信息</div> }}
+                    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://via.placeholder.com/400x200'} 
+                                                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>
+                                          <Button type="primary" size="small" ghost>查看详情</Button>
+                                      </div>
+                                    </div>
+                                  </Card>
+                                </List.Item>
+                            );
+                        }}
+                        locale={{ emptyText: <div style={{ color: '#888', padding: 40, textAlign: 'center' }}>暂无活动报名</div> }}
+                        />
+                    )
+                }
+            ]} />
           </motion.div>
         )}
         

frontend/src/styles/theme.less

@@ -0,0 +1,23 @@
+@primary-color: #00b96b;
+@secondary-color: #00f0ff;
+@text-color: #ffffff;
+@text-secondary: rgba(255, 255, 255, 0.65);
+@bg-color: #000000;
+@card-bg: rgba(255, 255, 255, 0.05);
+@border-radius-base: 16px;
+@box-shadow-base: 0 8px 32px rgba(0, 0, 0, 0.3);
+@font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+// Mixins
+.glass-effect() {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.flex-center() {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

frontend/vite.config.js

@@ -1,10 +1,24 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import viteImagemin from 'vite-plugin-imagemin'
 
-//123
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    viteImagemin({
+      gifsicle: { optimizationLevel: 7, interlaced: false },
+      optipng: { optimizationLevel: 7 },
+      mozjpeg: { quality: 20 },
+      pngquant: { quality: [0.8, 0.9], speed: 4 },
+      svgo: {
+        plugins: [
+          { name: 'removeViewBox' },
+          { name: 'removeEmptyAttrs', active: false },
+        ],
+      },
+    }),
+  ],
   server: {
     host: '0.0.0.0',
     port: 5173,

miniprogram/src/subpackages/forum/activity/detail.scss

@@ -17,7 +17,7 @@
   /* Hero Section */
   .hero-section {
     position: relative;
-    height: 320px;
+    height: 380px; /* Enlarge height */
     width: 100%;
     overflow: hidden;
 
@@ -33,11 +33,11 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(to top, #050505 0%, rgba(5,5,5,0.6) 50%, rgba(0,0,0,0.2) 100%);
+      background: linear-gradient(to top, #050505 0%, rgba(5,5,5,0.6) 60%, rgba(0,0,0,0.2) 100%);
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
-      padding: 24px;
+      padding: 32px; /* More padding */
       box-sizing: border-box;
 
       .status-tag {
@@ -45,26 +45,27 @@
         background: var(--primary-cyan, #00f0ff);
         color: #000;
         font-weight: 800;
-        padding: 4px 12px;
+        padding: 6px 16px; /* Larger tag */
-        border-radius: 4px;
+        border-radius: 6px;
-        font-size: 14px;
+        font-size: 16px; /* Larger font */
-        margin-bottom: 12px;
+        margin-bottom: 16px;
-        box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
+        box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
       }
 
       .hero-title {
-        font-size: 32px;
+        font-size: 36px; /* Larger title */
-        font-weight: 800;
+        font-weight: 900;
         color: #fff;
-        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
+        text-shadow: 0 4px 15px rgba(0,0,0,0.6);
-        line-height: 1.3;
+        line-height: 1.25;
+        letter-spacing: 0.5px;
       }
     }
   }
 
   .main-content {
-    padding: 0 24px;
+    padding: 0 32px; /* More side padding */
-    transform: translateY(-20px);
+    transform: translateY(-30px); /* Larger overlap */
     position: relative;
     z-index: 10;
   }
@@ -73,34 +74,36 @@
   .info-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 16px;
+    gap: 20px; /* More gap */
-    margin-bottom: 32px;
+    margin-bottom: 40px;
 
     .info-card {
-      background: rgba(255, 255, 255, 0.05);
+      background: rgba(255, 255, 255, 0.08); /* Slightly lighter for contrast */
-      backdrop-filter: blur(10px);
+      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(12px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.15);
-      border-radius: 16px;
+      border-radius: 20px; /* Rounder */
-      padding: 16px;
+      padding: 20px; /* More padding */
       display: flex;
       align-items: center;
+      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
 
       .info-text {
-        margin-left: 16px;
+        margin-left: 20px;
         display: flex;
         flex-direction: column;
 
         .label {
-          font-size: 12px;
+          font-size: 14px; /* Larger label */
-          color: rgba(255,255,255,0.5);
+          color: rgba(255,255,255,0.6);
-          margin-bottom: 4px;
+          margin-bottom: 6px;
         }
 
         .value {
-          font-size: 16px;
+          font-size: 18px; /* Larger value */
           color: #fff;
-          font-weight: 500;
+          font-weight: 600;
+          letter-spacing: 0.3px;
         }
       }
     }
@@ -109,64 +112,65 @@
   /* Stats Section */
   .stats-section {
     background: #111;
-    border-radius: 20px;
+    border-radius: 24px;
-    padding: 24px;
+    padding: 28px; /* More padding */
-    margin-bottom: 32px;
+    margin-bottom: 40px;
-    border: 1px solid rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
-    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
 
     .stats-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      margin-bottom: 16px;
+      margin-bottom: 20px;
 
       .stats-title {
-        font-size: 18px;
+        font-size: 20px; /* Larger title */
         font-weight: 700;
         color: #fff;
       }
 
       .stats-count {
         .current {
-          font-size: 24px;
+          font-size: 32px; /* Larger numbers */
           font-weight: 800;
           color: var(--primary-cyan, #00f0ff);
         }
         .divider {
-          font-size: 16px;
+          font-size: 20px;
           color: #666;
-          margin: 0 4px;
+          margin: 0 6px;
         }
         .max {
-          font-size: 18px;
+          font-size: 20px;
           color: #888;
         }
       }
     }
 
     .progress-bar-container {
-      height: 8px;
+      height: 12px; /* Thicker bar */
-      background: rgba(255,255,255,0.1);
+      background: rgba(255,255,255,0.15);
-      border-radius: 4px;
+      border-radius: 6px;
       position: relative;
       overflow: hidden;
 
       .progress-bar {
         height: 100%;
         background: linear-gradient(90deg, #00f0ff, #bd00ff);
-        border-radius: 4px;
+        border-radius: 6px;
         transition: width 0.5s ease-out;
+        box-shadow: 0 0 10px rgba(189, 0, 255, 0.4);
       }
       
       .progress-glow {
         position: absolute;
         top: 0;
-        width: 10px;
+        width: 15px;
         height: 100%;
         background: #fff;
-        filter: blur(4px);
+        filter: blur(6px);
-        opacity: 0.8;
+        opacity: 0.9;
         transform: translateX(-50%);
         transition: left 0.5s ease-out;
       }
@@ -175,65 +179,71 @@
 
   /* Detail Section */
   .detail-section {
+    padding-bottom: 40px;
+
     .section-header {
       display: flex;
       align-items: center;
-      margin-bottom: 24px;
+      margin-bottom: 30px;
 
       .title-text {
-        font-size: 22px;
+        font-size: 24px; /* Larger title */
         font-weight: 800;
         color: #fff;
-        margin-right: 16px;
+        margin-right: 20px;
         white-space: nowrap;
+        letter-spacing: 0.5px;
       }
 
       .line {
         flex: 1;
-        height: 1px;
+        height: 2px; /* Thicker line */
         background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
       }
     }
 
     .rich-text-wrapper {
-      color: #ccc;
+      color: #ddd; /* Brighter text */
-      font-size: 16px;
+      font-size: 18px; /* Base font size increased */
-      line-height: 1.8;
+      line-height: 1.9;
       
       image {
         max-width: 100%;
-        border-radius: 12px;
+        border-radius: 16px;
-        margin: 16px 0;
+        margin: 20px 0;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
       }
       
       /* Markdown Styling */
-      h1, h2, h3, h4, h5, h6 { margin-top: 24px; margin-bottom: 16px; color: #fff; font-weight: 700; line-height: 1.4; }
+      h1, h2, h3, h4, h5, h6 { margin-top: 32px; margin-bottom: 20px; color: #fff; font-weight: 700; line-height: 1.4; }
-      h1 { font-size: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
+      h1 { font-size: 30px; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
-      h2 { font-size: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; }
+      h2 { font-size: 26px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px; }
-      h3 { font-size: 18px; }
+      h3 { font-size: 22px; }
       
-      p { margin-bottom: 16px; }
+      p { margin-bottom: 20px; }
       
       strong { font-weight: 800; color: #fff; }
-      em { font-style: italic; color: #aaa; }
+      em { font-style: italic; color: #bbb; }
-      del { text-decoration: line-through; color: #666; }
+      del { text-decoration: line-through; color: #777; }
       
-      ul, ol { margin-bottom: 16px; padding-left: 20px; }
+      ul, ol { margin-bottom: 20px; padding-left: 24px; }
-      li { margin-bottom: 6px; list-style-position: outside; }
+      li { margin-bottom: 10px; list-style-position: outside; }
       ul li { list-style-type: disc; }
       ol li { list-style-type: decimal; }
       
       blockquote {
-          border-left: 4px solid var(--primary-cyan, #00f0ff);
+        border-left: 5px solid var(--primary-cyan, #00f0ff);
-          background: rgba(255, 255, 255, 0.05);
+        background: rgba(255, 255, 255, 0.08);
-          padding: 12px 16px;
+        padding: 16px 20px;
-          margin: 16px 0;
+        margin: 24px 0;
-          border-radius: 4px;
+        border-radius: 8px;
-          color: #bbb;
+        color: #ccc;
-          font-style: italic;
+        font-style: italic;
-          
+        font-size: 17px;
-          p { margin-bottom: 0; }
+        
+        p { margin-bottom: 0; }
       }
+
       
       a { color: var(--primary-cyan, #00f0ff); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
       
@@ -306,47 +316,50 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(10, 10, 10, 0.9);
+    background: rgba(10, 10, 10, 0.95); /* More opaque */
-    backdrop-filter: blur(20px);
+    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(24px);
-    padding: 16px 24px;
+    padding: 20px 32px; /* More padding */
-    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-top: 1px solid rgba(255,255,255,0.1);
+    border-top: 1px solid rgba(255,255,255,0.15);
     z-index: 100;
+    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
 
     .left-info {
       display: flex;
       flex-direction: column;
 
       .price {
-        font-size: 24px;
+        font-size: 28px; /* Larger price */
         font-weight: 800;
         color: var(--primary-cyan, #00f0ff);
+        text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
       }
 
       .desc {
-        font-size: 12px;
+        font-size: 14px; /* Larger desc */
-        color: #888;
+        color: #999;
+        margin-top: 4px;
       }
     }
 
     .action-btn {
       margin: 0;
-      padding: 0 40px;
+      padding: 0 48px;
-      height: 56px;
+      height: 64px; /* Taller button */
-      line-height: 56px;
+      line-height: 64px;
-      border-radius: 28px;
+      border-radius: 32px;
-      font-size: 18px;
+      font-size: 20px; /* Larger font */
-      font-weight: 700;
+      font-weight: 800;
       border: none;
       
       &.active {
         background: linear-gradient(90deg, #00f0ff, #00b96b);
         color: #000;
-        box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
+        box-shadow: 0 6px 20px rgba(0, 240, 255, 0.4);
         
         &:active {
           transform: scale(0.98);
@@ -354,8 +367,8 @@
       }
       
       &.disabled {
-        background: rgba(255,255,255,0.1);
+        background: rgba(255,255,255,0.15);
-        color: #666;
+        color: #777;
       }
     }
   }

miniprogram/src/subpackages/forum/activity/detail.tsx

@@ -22,8 +22,11 @@ const ActivityDetail = () => {
 
   // Function to refresh data, can be used in useDidShow
   const refreshData = () => {
-    if (id) {
+    if (id && id !== 'undefined' && id !== 'null' && !isNaN(Number(id))) {
         fetchDetail()
+    } else {
+        setLoading(false)
+        setActivity(null)
     }
   }
 
@@ -88,8 +91,12 @@ const ActivityDetail = () => {
         fetchDetail() // Refresh status
     } catch (error: any) {
         console.error(error)
-        const msg = error.response?.data?.error || error.message || '报名失败'
+        // Request utility already handles error toasts
-        Taro.showToast({ title: msg, icon: 'none' })
+        if (error?.statusCode === 400) {
+            // If likely already signed up, refresh to update UI
+            fetchDetail()
+            setShowSignupModal(false)
+        }
     } finally {
         setSubmitting(false)
     }
@@ -150,14 +157,14 @@ const ActivityDetail = () => {
         {/* Info Cards */}
         <View className='info-grid'>
             <View className='info-card time'>
-                <AtIcon value='clock' size='18' color='#00f0ff' />
+                <AtIcon value='clock' size='24' color='#00f0ff' />
                 <View className='info-text'>
                     <Text className='label'>开始时间</Text>
                     <Text className='value'>{new Date(activity.start_time).toLocaleString()}</Text>
                 </View>
             </View>
             <View className='info-card location'>
-                <AtIcon value='map-pin' size='18' color='#bd00ff' />
+                <AtIcon value='map-pin' size='24' color='#bd00ff' />
                 <View className='info-text'>
                     <Text className='label'>活动地点</Text>
                     <Text className='value'>{activity.location || '线上直播'}</Text>

miniprogram/src/subpackages/forum/activity/index.tsx

@@ -22,10 +22,10 @@ const ActivityList = () => {
     try {
       if (tab === 'all') {
         const res = await getActivities()
-        setActivities(res.results || res.data || [])
+        setActivities(res.results || res.data || (Array.isArray(res) ? res : []))
       } else {
         const res = await getMySignups()
-        setMySignups(res.results || res.data || [])
+        setMySignups(res.results || res.data || (Array.isArray(res) ? res : []))
       }
     } catch (error) {
       console.error(error)
@@ -68,7 +68,18 @@ const ActivityList = () => {
     return list.map(item => {
         // Handle API structure differences
         // For 'mine' tab, item is the signup record. activity_info is the full activity object.
-        const activity = tab === 'mine' ? (item.activity_info || item.activity || item) : item
+        let activity = tab === 'mine' ? (item.activity_info || item.activity || item) : item
+        
+        // Safety check if activity is just an ID (number)
+        if (typeof activity === 'number' || typeof activity === 'string') {
+             // In this case we can't render the card properly without the activity details
+             // Skip or render placeholder? Ideally we should have the object.
+             // If we just have ID, we can't show title/image etc.
+             // Let's create a placeholder object to avoid crash, but it won't show much info.
+             activity = { id: activity, title: '加载中...', start_time: new Date().toISOString() }
+        }
+
+        if (!activity || !activity.id) return null
         
         return (
           <View key={activity.id} className='activity-card' onClick={() => goDetail(activity.id)}>