优化排行榜切换样式

1. 添加现代化的滑动切换效果
2. 使用渐变背景和阴影提升视觉效果
3. 添加平滑的动画过渡效果

🤖 Generated with [Claude Code](https://claude.com/claude-code)&#10;&#10;Co-Authored-By: Claude <noreply@anthropic.com>

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);

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 }}>
+        <div className={styles.rankingSwitch}>
-          <Button
+          <div
-            type={rankingType === 'daily' ? 'primary' : 'default'}
+            className={styles.rankingSwitchButton}
-            onClick={() => setRankingType('daily')}
+            onClick={() => switchRankingType('daily')}
-            style={{ marginRight: 8 }}
           >
             今日排行榜
-          </Button>
+          </div>
-          <Button
+          <div
-            type={rankingType === 'total' ? 'primary' : 'default'}
+            className={styles.rankingSwitchButton}
-            onClick={() => setRankingType('total')}
+            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} />