From 6eb6c5243d59f2eb78fb523d8d6761613cde1a76 Mon Sep 17 00:00:00 2001
From: yanlongqi <yuchat@163.com>
Date: Mon, 17 Nov 2025 21:22:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8E=92=E8=A1=8C=E6=A6=9C?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=A0=B7=E5=BC=8F&#10;&#10;1.=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=8E=B0=E4=BB=A3=E5=8C=96=E7=9A=84=E6=BB=91=E5=8A=A8?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C&#10;2.=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=B8=90=E5=8F=98=E8=83=8C=E6=99=AF=E5=92=8C=E9=98=B4?=
 =?UTF-8?q?=E5=BD=B1=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?&#10;3.=20=E6=B7=BB=E5=8A=A0=E5=B9=B3=E6=BB=91=E7=9A=84?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E8=BF=87=E6=B8=A1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)&#10;&#10;Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/pages/Home.module.less | 44 ++++++++++++++++++++++++++++++++++
 web/src/pages/Home.tsx         | 33 +++++++++++++++++--------
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/Home.module.less b/web/src/pages/Home.module.less
index 99be647..5741a3e 100644
--- a/web/src/pages/Home.module.less
+++ b/web/src/pages/Home.module.less
@@ -472,6 +472,50 @@
     }
   }
 
+  .rankingSwitch {
+    display: flex;
+    background: #f5f5f5;
+    border-radius: 20px;
+    padding: 4px;
+    margin-bottom: 16px;
+    width: fit-content;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .rankingSwitchButton {
+    padding: 6px 16px;
+    border: none;
+    background: transparent;
+    border-radius: 16px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    color: #666;
+    transition: all 0.3s ease;
+    position: relative;
+    z-index: 1;
+
+    &:hover {
+      color: #333;
+    }
+
+    &.active {
+      color: #fff;
+      font-weight: 600;
+    }
+  }
+
+  .rankingSwitchSlider {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    height: calc(100% - 8px);
+    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
+    border-radius: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
+  }
+
   .rankingCard {
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.9);
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 7cb2bcd..496aae0 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -108,6 +108,7 @@ const Home: React.FC = () => {
   const [totalRanking, setTotalRanking] = useState<questionApi.UserStats[]>([])
   const [rankingLoading, setRankingLoading] = useState(false)
   const [rankingType, setRankingType] = useState<'daily' | 'total'>('daily') // 排行榜类型：每日或总榜
+  const [sliderPosition, setSliderPosition] = useState<'left' | 'right'>('left') // 滑块位置
 
   // 答题设置状态
   const [autoNext, setAutoNext] = useState(() => {
@@ -176,6 +177,12 @@ const Home: React.FC = () => {
     }
   }
 
+  // 切换排行榜类型
+  const switchRankingType = (type: 'daily' | 'total') => {
+    setRankingType(type)
+    setSliderPosition(type === 'daily' ? 'left' : 'right')
+  }
+
   // 加载用户信息
   useEffect(() => {
     const token = localStorage.getItem('token')
@@ -686,20 +693,26 @@ const Home: React.FC = () => {
         <Title level={4} className={styles.sectionTitle}>
           <TrophyOutlined /> 排行榜
         </Title>
-        <div style={{ marginBottom: 16 }}>
-          <Button
-            type={rankingType === 'daily' ? 'primary' : 'default'}
-            onClick={() => setRankingType('daily')}
-            style={{ marginRight: 8 }}
+        <div className={styles.rankingSwitch}>
+          <div
+            className={styles.rankingSwitchButton}
+            onClick={() => switchRankingType('daily')}
           >
             今日排行榜
-          </Button>
-          <Button
-            type={rankingType === 'total' ? 'primary' : 'default'}
-            onClick={() => setRankingType('total')}
+          </div>
+          <div
+            className={styles.rankingSwitchButton}
+            onClick={() => switchRankingType('total')}
           >
             总排行榜
-          </Button>
+          </div>
+          <div
+            className={styles.rankingSwitchSlider}
+            style={{
+              width: 'calc(50% - 4px)',
+              left: sliderPosition === 'left' ? '4px' : 'calc(50% + 0px)',
+            }}
+          />
         </div>
         {rankingLoading ? (
           <Card className={styles.rankingCard} loading={true} />