改进移动端响应式布局，优化导航栏和组件显示

Author: CC11001100

package-lock.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
     "@types/markdown-it": "^14.1.2",
+    "@types/react-responsive": "^8.0.8",
     "antd": "^5.16.4",
     "fuse.js": "^7.1.0",
     "i18next": "^24.2.2",
@@ -26,6 +27,7 @@
     "react-i18next": "^15.4.1",
     "react-markdown": "^10.1.0",
     "react-markdown-editor-lite": "^1.3.4",
+    "react-responsive": "^10.0.1",
     "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-raw": "^7.0.0",

package.json

@@ -92,3 +92,44 @@
 .read-the-docs {
   color: #888;
 }
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  /* 导航栏调整 */
+  .navbar-container {
+    width: 100%;
+    padding: 0 16px;
+  }
+
+  /* 移动端内容区域调整 */
+  .content-wrapper {
+    padding: 10px 0 !important;
+  }
+
+  /* 移动端卡片样式调整 */
+  .ant-card {
+    border-radius: 8px;
+  }
+
+  /* 移动端表格调整 */
+  .ant-table {
+    font-size: 12px;
+  }
+
+  /* 移动端表单样式 */
+  .ant-form-item-label {
+    padding-bottom: 4px;
+  }
+
+  /* 移动端按钮样式 */
+  .ant-btn {
+    font-size: 14px;
+    height: 32px;
+    padding: 0 15px;
+  }
+
+  /* 防止溢出 */
+  .mobile-container {
+    overflow-x: hidden;
+  }
+}

src/App.css

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMediaQuery } from 'react-responsive';
 
 interface GitHubRibbonProps {
   /**
@@ -20,12 +21,20 @@ interface GitHubRibbonProps {
 /**
  * GitHub Ribbon组件
  * 显示"Fork me on GitHub"的角标
+ * 在移动端下完全隐藏
  */
 const GitHubRibbon: React.FC<GitHubRibbonProps> = ({
   repositoryUrl,
   text = 'Fork me on GitHub',
   position = 'right'
 }) => {
+  const isMobile = useMediaQuery({ maxWidth: 768 });
+  
+  // 如果是移动设备，不显示GitHub角标
+  if (isMobile) {
+    return null;
+  }
+
   // 根据position确定位置样式
   const getPositionStyle = () => {
     switch(position) {

src/components/GitHubRibbon.tsx

@@ -10,8 +10,12 @@ import {
   challengeContainerStyle,
   challengeTitleContainerStyle,
   viewMoreButtonContainerStyle,
-  viewMoreButtonStyle
+  viewMoreButtonStyle,
+  challengeSectionMobileStyle,
+  challengeTitleMobileStyle,
+  viewMoreButtonMobileStyle
 } from './styles';
+import { useMediaQuery } from 'react-responsive';
 
 const { Title } = Typography;
 
@@ -39,17 +43,23 @@ const ChallengeSection: React.FC<ChallengeSectionProps> = ({
 }) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
+  const isMobile = useMediaQuery({ maxWidth: 768 });
 
   return (
-    <div style={challengeSectionStyle}>
+    <div style={{ ...challengeSectionStyle, ...(isMobile ? challengeSectionMobileStyle : {}) }}>
       <div style={challengeContainerStyle}>
         <Row gutter={[48, 48]}>
           {/* 最新挑战 */}
           <Col xs={24} lg={12}>
-            <div style={challengeTitleContainerStyle}>
+            <div 
+              style={{ ...challengeTitleContainerStyle, ...(isMobile ? challengeTitleMobileStyle : {}) }}
+              className="challenge-section-title"
+            >
               <Space align="center">
-                <RocketOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
-                <Title level={3} style={{ margin: 0 }}>{t('home.challenges.recent.title')}</Title>
+                <RocketOutlined style={{ fontSize: isMobile ? '20px' : '24px', color: '#1890ff' }} />
+                <Title level={3} style={{ margin: 0, fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
+                  {t('home.challenges.recent.title')}
+                </Title>
               </Space>
             </div>
             <SimpleChallengeList 
@@ -69,7 +79,8 @@ const ChallengeSection: React.FC<ChallengeSectionProps> = ({
                 type="primary" 
                 ghost
                 onClick={() => navigate('/challenges')}
-                style={viewMoreButtonStyle}
+                style={{ ...viewMoreButtonStyle, ...(isMobile ? viewMoreButtonMobileStyle : {}) }}
+                className="challenge-more-button"
               >
                 {t('home.challenges.recent.viewMore')} <ArrowRightOutlined />
               </Button>
@@ -78,10 +89,15 @@ const ChallengeSection: React.FC<ChallengeSectionProps> = ({
 
           {/* 热门挑战 */}
           <Col xs={24} lg={12}>
-            <div style={challengeTitleContainerStyle}>
+            <div 
+              style={{ ...challengeTitleContainerStyle, ...(isMobile ? challengeTitleMobileStyle : {}) }}
+              className="challenge-section-title"
+            >
               <Space align="center">
-                <FireOutlined style={{ fontSize: '24px', color: '#f5222d' }} />
-                <Title level={3} style={{ margin: 0 }}>{t('home.challenges.popular.title')}</Title>
+                <FireOutlined style={{ fontSize: isMobile ? '20px' : '24px', color: '#f5222d' }} />
+                <Title level={3} style={{ margin: 0, fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
+                  {t('home.challenges.popular.title')}
+                </Title>
               </Space>
             </div>
             <SimpleChallengeList 
@@ -101,7 +117,8 @@ const ChallengeSection: React.FC<ChallengeSectionProps> = ({
                 type="primary" 
                 ghost
                 onClick={() => navigate('/challenges')}
-                style={viewMoreButtonStyle}
+                style={{ ...viewMoreButtonStyle, ...(isMobile ? viewMoreButtonMobileStyle : {}) }}
+                className="challenge-more-button"
               >
                 {t('home.challenges.popular.viewMore')} <ArrowRightOutlined />
               </Button>

src/components/HomePage/ChallengeSection.tsx

@@ -11,8 +11,11 @@ import {
   sectionTitleStyle, 
   sectionTitleDividerStyle,
   featureCardStyle,
-  featureCardContentStyle
+  featureCardContentStyle,
+  featureSectionMobileStyle,
+  sectionTitleMobileStyle
 } from './styles';
+import { useMediaQuery } from 'react-responsive';
 
 const { Title, Text } = Typography;
 
@@ -21,6 +24,7 @@ const { Title, Text } = Typography;
  */
 const FeatureSection: React.FC = () => {
   const { t } = useTranslation();
+  const isMobile = useMediaQuery({ maxWidth: 768 });
 
   // 从i18n获取功能特性数据
   const features = [
@@ -45,8 +49,12 @@ const FeatureSection: React.FC = () => {
   ];
 
   return (
-    <div style={featureSectionStyle}>
-      <Title level={2} style={sectionTitleStyle}>
+    <div style={{ ...featureSectionStyle, ...(isMobile ? featureSectionMobileStyle : {}) }}>
+      <Title 
+        level={2} 
+        style={{ ...sectionTitleStyle, ...(isMobile ? sectionTitleMobileStyle : {}) }}
+        className="feature-title"
+      >
         {t('home.features.title')}
         <div style={sectionTitleDividerStyle}></div>
       </Title>
@@ -60,23 +68,23 @@ const FeatureSection: React.FC = () => {
             >
               <div style={featureCardContentStyle}>
                 <div style={{ 
-                  fontSize: '36px', 
+                  fontSize: isMobile ? '32px' : '36px', 
                   color: feature.color, 
                   marginBottom: '16px',
                   background: `rgba(${feature.color.replace('#', '').match(/.{2}/g)?.map(c => parseInt(c, 16)).join(',')}, 0.1)`,
-                  width: '80px',
-                  height: '80px',
+                  width: isMobile ? '70px' : '80px',
+                  height: isMobile ? '70px' : '80px',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  borderRadius: '40px'
+                  borderRadius: isMobile ? '35px' : '40px'
                 }}>
                   {feature.icon}
                 </div>
-                <Title level={4} style={{ color: feature.color, marginBottom: '8px' }}>
+                <Title level={4} style={{ color: feature.color, marginBottom: '8px', fontSize: isMobile ? '18px' : '20px' }}>
                   {feature.title}
                 </Title>
-                <Text type="secondary" style={{ fontSize: '16px' }}>
+                <Text type="secondary" style={{ fontSize: isMobile ? '14px' : '16px' }}>
                   {feature.content}
                 </Text>
               </div>