将答题界面的导航和进度条整合并固定在顶部

主要更改：
- 整合导航和进度条：将两者放在同一个卡片中，避免重复的卡片边框，提升美观性
- 固定顶栏：顶部导航和进度条固定在页面顶部，滚动时始终可见
- 移动端优化：调整返回按钮位置和布局顺序，优化小屏幕显示效果
- 进度条组件简化：移除 Card 包裹，直接渲染 Progress 组件
- 响应式布局：为固定顶栏预留合适的空间，移动端、平板、PC端各自适配

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/src/components/QuestionProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Progress, Card } from 'antd'
+import { Progress } from 'antd'
 
 interface QuestionProgressProps {
   currentIndex: number
@@ -17,18 +17,6 @@ const QuestionProgress: React.FC<QuestionProgressProps> = ({
   const percent = Math.round(((currentIndex + 1) / totalQuestions) * 100)
 
   return (
-    <Card
-      style={{
-        marginBottom: 20,
-        borderRadius: 16,
-        background: 'rgba(255, 255, 255, 0.9)',
-        backdropFilter: 'blur(30px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(30px) saturate(180%)',
-        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.03)',
-        border: '0.5px solid rgba(0, 0, 0, 0.04)',
-      }}
-      bodyStyle={{ padding: '16px 20px' }}
-    >
     <Progress
       percent={percent}
       status="active"
@@ -44,7 +32,6 @@ const QuestionProgress: React.FC<QuestionProgressProps> = ({
         fontWeight: 600,
       }}
     />
-    </Card>
   )
 }
 

web/src/pages/Login.tsx

@@ -194,11 +194,14 @@ const Login: React.FC = () => {
 
           <Form.Item
             name="nickname"
-            rules={[{ max: 20, message: '昵称最多20个字符' }]}
+            rules={[
+              { required: true, message: '请输入姓名' },
+              { max: 20, message: '姓名最多20个字符' }
+            ]}
           >
             <Input
               prefix={<IdcardOutlined />}
-              placeholder="请输入昵称（可选）"
+              placeholder="请输入姓名"
             />
           </Form.Item>
 

web/src/pages/Question.module.less

@@ -1,20 +1,31 @@
 .container {
   min-height: 100vh;
   background: #fafafa;
-  padding: 20px;
+  padding: 0;
   padding-bottom: 80px;
 }
 
-.content {
+// 固定顶栏
-  max-width: 900px;
+.fixedTopBar {
-  margin: 0 auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: rgba(250, 250, 250, 0.85);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
 }
 
-.header {
+.topBarContent {
-  display: flex;
+  max-width: 900px;
-  justify-content: space-between;
+  margin: 0 auto;
-  align-items: center;
+  padding: 16px 20px;
-  margin-bottom: 20px;
+}
+
+.topBarCard {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(30px) saturate(180%);
   -webkit-backdrop-filter: blur(30px) saturate(180%);
@@ -25,6 +36,20 @@
     0 1px 4px rgba(0, 0, 0, 0.03),
     0 0 0 1px rgba(0, 0, 0, 0.03);
   border: 0.5px solid rgba(0, 0, 0, 0.04);
+}
+
+.content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 20px;
+  padding-top: 200px; // 为固定顶栏留出空间
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
 
   .backButton {
     color: #007aff;
@@ -74,6 +99,10 @@
   }
 }
 
+.progressWrapper {
+  // 进度条容器
+}
+
 .questionCard {
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.95);
@@ -121,19 +150,33 @@
 // 响应式设计 - 移动端
 @media (max-width: 768px) {
   .container {
-    padding: 12px;
     padding-bottom: 70px;
   }
 
+  .topBarContent {
+    padding: 12px;
+  }
+
+  .topBarCard {
+    padding: 12px 16px;
+    border-radius: 12px;
+  }
+
+  .content {
+    padding: 0 12px;
+    padding-top: 240px; // 移动端顶栏更高
+  }
+
   .header {
     flex-wrap: wrap;
-    gap: 12px;
+    gap: 10px;
-    padding: 12px 16px;
+    margin-bottom: 12px;
-    border-radius: 12px;
 
     .backButton {
       order: 1;
       flex: 0 0 auto;
+      font-size: 14px;
+      padding: 4px 8px;
     }
 
     .title {
@@ -141,18 +184,21 @@
       flex: 1 1 100%;
       text-align: center;
       font-size: 16px !important;
+      margin-top: 4px !important;
     }
 
     .statsGroup {
       order: 3;
       flex: 1 1 100%;
       justify-content: center;
-      gap: 24px;
+      gap: 32px;
+      margin-top: 4px;
     }
 
     .statItem {
       flex-direction: row;
       gap: 6px;
+      align-items: center;
     }
 
     .statLabel {
@@ -183,8 +229,13 @@
 
 // 响应式设计 - 平板
 @media (min-width: 769px) and (max-width: 1024px) {
-  .container {
+  .topBarContent {
-    padding: 24px;
+    padding: 14px 24px;
+  }
+
+  .content {
+    padding: 0 24px;
+    padding-top: 190px;
   }
 
   .header {
@@ -196,14 +247,16 @@
 
 // 响应式设计 - PC端
 @media (min-width: 1025px) {
-  .container {
+  .topBarContent {
-    padding: 32px;
+    padding: 18px 32px;
+  }
+
+  .content {
+    padding: 0 32px;
+    padding-top: 190px;
   }
 
   .header {
-    margin-bottom: 24px;
-    padding: 18px 24px;
-
     .title {
       font-size: 22px !important;
     }

web/src/pages/Question.tsx

@@ -250,8 +250,11 @@ const QuestionPage: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.content}>
+      {/* 固定顶栏：包含导航和进度 */}
-        {/* 头部 */}
+      <div className={styles.fixedTopBar}>
+        <div className={styles.topBarContent}>
+          <div className={styles.topBarCard}>
+            {/* 头部导航 */}
             <div className={styles.header}>
               <Button
                 icon={<ArrowLeftOutlined />}
@@ -277,13 +280,20 @@ const QuestionPage: React.FC = () => {
             </div>
 
             {/* 进度条 */}
+            <div className={styles.progressWrapper}>
               <QuestionProgress
                 currentIndex={currentIndex}
                 totalQuestions={allQuestions.length}
                 correctCount={correctCount}
                 wrongCount={wrongCount}
               />
+            </div>
+          </div>
+        </div>
+      </div>
 
+      {/* 主内容区 */}
+      <div className={styles.content}>
         {/* 题目卡片 */}
         {currentQuestion && (
           <QuestionCard