移动端适配

frontend/src/pages/activity/Detail.jsx

@@ -37,7 +37,7 @@ const ActivityDetail = () => {
   const headerColor = useTransform(scrollY, [0, 60], ['rgba(255,255,255,1)', 'rgba(0,0,0,0.85)']);
   const titleOpacity = useTransform(scrollY, [100, 200], [0, 1]);
 
-  const { data: activity, isLoading, error, refetch } = useQuery({
+  const { data: activity, isLoading, error } = useQuery({
     queryKey: ['activity', id],
     queryFn: async () => {
       try {
@@ -140,7 +140,7 @@ const ActivityDetail = () => {
              
              clearInterval(timer);
           }
-        } catch (error) {
+        } catch {
           // ignore error during polling
         }
       }, 3000);
@@ -188,7 +188,7 @@ const ActivityDetail = () => {
           text: '来看看这个精彩活动！',
           url: url
         });
-      } catch (err) {
+      } catch {
         console.log('Share canceled');
       }
     } else {
@@ -256,6 +256,23 @@ const ActivityDetail = () => {
     );
   }
 
+  if (!activity) {
+    return (
+      <div style={{ padding: 40, background: '#1f1f1f', minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <Result
+          status="404"
+          title="活动未找到"
+          subTitle="抱歉，该活动可能已被删除或不存在。"
+          extra={[
+            <Button type="primary" key="back" onClick={() => navigate(-1)}>
+              返回列表
+            </Button>
+          ]}
+        />
+      </div>
+    );
+  }
+
   const cleanUrl = (url) => {
     if (!url) return '';
     return url.replace(/[`\s]/g, '');
@@ -313,45 +330,38 @@ const ActivityDetail = () => {
           alt={activity.title}
           className={styles.detailImage}
         />
-        <div style={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            width: '100%',
-            height: '50%',
-            background: 'linear-gradient(to top, #1f1f1f, transparent)'
-        }} />
+        <div className={styles.headerGradient} />
       </div>
 
       {/* Content */}
       <div className={styles.detailContent}>
         <div className={styles.infoCard}>
-          <h1 style={{ fontSize: 28, marginBottom: 16, color: '#fff' }}>{activity.title}</h1>
+          <h1 className={styles.activityTitle}>{activity.title}</h1>
           
-          <div style={{ display: 'flex', gap: 20, marginBottom: 16, color: 'rgba(255,255,255,0.7)' }}>
-             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div className={styles.metaInfo}>
+             <div className={styles.metaItem}>
                <CalendarOutlined />
                <span>{activity.start_time ? new Date(activity.start_time).toLocaleDateString() : 'TBD'}</span>
              </div>
-             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+             <div className={styles.metaItem}>
                <ClockCircleOutlined />
                <span>{activity.start_time ? new Date(activity.start_time).toLocaleTimeString() : 'TBD'}</span>
              </div>
-             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+             <div className={styles.metaItem}>
                <EnvironmentOutlined />
                <span>{activity.location || '线上活动'}</span>
              </div>
-             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+             <div className={styles.metaItem}>
                <UserOutlined />
                <span>{activity.current_signups || 0} / {activity.max_participants} 已报名</span>
              </div>
-             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+             <div className={styles.metaItem}>
                <PayCircleOutlined />
                <span>{activity.is_paid ? `¥${activity.price}` : '免费'}</span>
              </div>
           </div>
           
-          <div style={{ display: 'flex', gap: 10 }}>
+          <div className={styles.statusWrapper}>
             <span className={styles.statusTag}>
               {activity.status || (new Date() < new Date(activity.start_time) ? '报名中' : '已结束')}
             </span>
@@ -365,7 +375,7 @@ const ActivityDetail = () => {
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeRaw]}
                 components={{
-                  code({node, inline, className, children, ...props}) {
+                  code({inline, className, children, ...props}) {
                     const match = /language-(\w+)/.exec(className || '')
                     return !inline && match ? (
                       <SyntaxHighlighter