From 3c97985af0fc1721a3017ba7567ffe71e8909704 Mon Sep 17 00:00:00 2001
From: yanlongqi <lqyan@jhinno.com>
Date: Wed, 5 Nov 2025 11:14:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=AD=94=E9=A2=98=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E8=A7=86=E8=A7=89=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

主要更改：
- 头部布局优化：将返回按钮、标题、统计信息整合到一行，使用毛玻璃卡片样式
- 统计信息重构：将正确/错误次数移到头部右侧，采用紧凑的标签+数值设计
- 进度条优化：使用卡片包裹，添加毛玻璃效果，简化显示内容，只保留进度条
- 响应式优化：移动端自动调整为多行布局，平板和PC端保持横向一行显示
- 视觉统一：所有组件使用一致的毛玻璃风格和 macOS 设计语言

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/QuestionProgress.tsx |  46 +++++-----
 web/src/pages/Question.module.less      | 114 ++++++++++++++++++++++--
 web/src/pages/Question.tsx              |  19 +++-
 3 files changed, 150 insertions(+), 29 deletions(-)

diff --git a/web/src/components/QuestionProgress.tsx b/web/src/components/QuestionProgress.tsx
index 165b7b3..2ea9232 100644
--- a/web/src/components/QuestionProgress.tsx
+++ b/web/src/components/QuestionProgress.tsx
@@ -1,8 +1,5 @@
 import React from 'react'
-import { Progress, Space, Typography } from 'antd'
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
-
-const { Text } = Typography
+import { Progress, Card } from 'antd'
 
 interface QuestionProgressProps {
   currentIndex: number
@@ -14,33 +11,40 @@ interface QuestionProgressProps {
 const QuestionProgress: React.FC<QuestionProgressProps> = ({
   currentIndex,
   totalQuestions,
-  correctCount,
-  wrongCount,
 }) => {
   if (totalQuestions === 0) return null
 
+  const percent = Math.round(((currentIndex + 1) / totalQuestions) * 100)
+
   return (
-    <div style={{ marginBottom: 20 }}>
+    <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={Math.round(((currentIndex + 1) / totalQuestions) * 100)}
+        percent={percent}
         status="active"
         strokeColor={{
-          '0%': '#108ee9',
-          '100%': '#87d068',
+          '0%': '#007aff',
+          '100%': '#52c41a',
         }}
+        trailColor="rgba(0, 0, 0, 0.06)"
+        strokeWidth={12}
         format={() => `${currentIndex + 1} / ${totalQuestions}`}
+        style={{
+          fontSize: '14px',
+          fontWeight: 600,
+        }}
       />
-      <div style={{ marginTop: 8, textAlign: 'center' }}>
-        <Space size="large">
-          <Text>
-            <CheckOutlined style={{ color: '#52c41a' }} /> 正确：{correctCount}
-          </Text>
-          <Text>
-            <CloseOutlined style={{ color: '#ff4d4f' }} /> 错误：{wrongCount}
-          </Text>
-        </Space>
-      </div>
-    </div>
+    </Card>
   )
 }
 
diff --git a/web/src/pages/Question.module.less b/web/src/pages/Question.module.less
index 71cf997..2a51c58 100644
--- a/web/src/pages/Question.module.less
+++ b/web/src/pages/Question.module.less
@@ -14,12 +14,63 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  padding: 16px 20px;
+  border-radius: 16px;
+  box-shadow:
+    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);
+
+  .backButton {
+    color: #007aff;
+    font-weight: 500;
+    padding: 4px 12px;
+
+    &:hover {
+      color: #0051d5;
+      background: rgba(0, 122, 255, 0.08);
+    }
+  }
 
   .title {
     color: #1d1d1f !important;
     margin: 0 !important;
     font-weight: 700;
+    font-size: 18px !important;
+    flex: 1;
+    text-align: center;
+  }
+
+  .statsGroup {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .statItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .statLabel {
+    font-size: 11px;
+    color: #86868b;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .statValue {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1;
   }
 }
 
@@ -75,12 +126,41 @@
   }
 
   .header {
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: 12px;
-    align-items: flex-start;
+    padding: 12px 16px;
+    border-radius: 12px;
+
+    .backButton {
+      order: 1;
+      flex: 0 0 auto;
+    }
 
     .title {
-      font-size: 20px !important;
+      order: 2;
+      flex: 1 1 100%;
+      text-align: center;
+      font-size: 16px !important;
+    }
+
+    .statsGroup {
+      order: 3;
+      flex: 1 1 100%;
+      justify-content: center;
+      gap: 24px;
+    }
+
+    .statItem {
+      flex-direction: row;
+      gap: 6px;
+    }
+
+    .statLabel {
+      font-size: 12px;
+    }
+
+    .statValue {
+      font-size: 18px;
     }
   }
 
@@ -101,13 +181,35 @@
   }
 }
 
+// 响应式设计 - 平板
+@media (min-width: 769px) and (max-width: 1024px) {
+  .container {
+    padding: 24px;
+  }
+
+  .header {
+    .title {
+      font-size: 20px !important;
+    }
+  }
+}
+
 // 响应式设计 - PC端
-@media (min-width: 769px) {
+@media (min-width: 1025px) {
   .container {
     padding: 32px;
   }
 
   .header {
-    margin-bottom: 32px;
+    margin-bottom: 24px;
+    padding: 18px 24px;
+
+    .title {
+      font-size: 22px !important;
+    }
+
+    .statValue {
+      font-size: 24px;
+    }
   }
 }
diff --git a/web/src/pages/Question.tsx b/web/src/pages/Question.tsx
index 1846a74..ff99473 100644
--- a/web/src/pages/Question.tsx
+++ b/web/src/pages/Question.tsx
@@ -253,12 +253,27 @@ const QuestionPage: React.FC = () => {
       <div className={styles.content}>
         {/* 头部 */}
         <div className={styles.header}>
-          <Button icon={<ArrowLeftOutlined />} onClick={() => navigate("/")}>
-            返回首页
+          <Button
+            icon={<ArrowLeftOutlined />}
+            onClick={() => navigate("/")}
+            className={styles.backButton}
+            type="text"
+          >
+            返回
           </Button>
           <Title level={3} className={styles.title}>
             AnKao 刷题
           </Title>
+          <div className={styles.statsGroup}>
+            <div className={styles.statItem}>
+              <span className={styles.statLabel}>正确</span>
+              <span className={styles.statValue} style={{ color: '#52c41a' }}>{correctCount}</span>
+            </div>
+            <div className={styles.statItem}>
+              <span className={styles.statLabel}>错误</span>
+              <span className={styles.statValue} style={{ color: '#ff4d4f' }}>{wrongCount}</span>
+            </div>
+          </div>
         </div>
 
         {/* 进度条 */}