活动倒计时

frontend/src/pages/activity/Detail.jsx

@@ -55,6 +55,41 @@ const ActivityDetail = () => {
     refetchOnMount: 'always',
   });
 
+  const [countdown, setCountdown] = useState('');
+
+  useEffect(() => {
+    if (!activity) return;
+
+    const updateCountdown = () => {
+      // 优先使用 signup_deadline，如果没有则使用 start_time
+      const targetTime = activity.signup_deadline || activity.start_time;
+      if (!targetTime) {
+          setCountdown('待定');
+          return;
+      }
+
+      const targetDate = new Date(targetTime);
+      const now = new Date();
+      const diff = targetDate - now;
+
+      if (diff <= 0) {
+        setCountdown('已截止');
+        return;
+      }
+
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+      setCountdown(`${days}天 ${hours}小时 ${minutes}分`);
+    };
+
+    updateCountdown();
+    // 每分钟更新一次
+    const timer = setInterval(updateCountdown, 60000);
+    return () => clearInterval(timer);
+  }, [activity]);
+
   // Auto-fill form fields when the signup form becomes visible
   useEffect(() => {
     if (signupFormVisible && user && activity?.signup_form_config) {
@@ -405,8 +440,7 @@ const ActivityDetail = () => {
         <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>距离报名截止</span>
            <span style={{ color: '#00b96b', fontWeight: 'bold' }}>
-             {/* Simple countdown placeholder */}
-             3天 12小时
+             {countdown || '计算中...'}
            </span>
         </div>
         <motion.button