fix:修复准备页面样式问题

Author: YueZheng-Sea-angle

src/components/editor/DifficultySettings.css

@@ -92,8 +92,10 @@
 /* Difficulty Grid */
 .difficulty-grid {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 16px;
+  justify-content: center;
+  align-items: stretch;
 }
 
 .difficulty-card {
@@ -107,6 +109,12 @@
   transition: all 0.3s ease;
   text-align: center;
   min-height: 180px;
+  min-width: 160px;
+  max-width: 200px;
+  width: auto;
+  box-sizing: border-box;
+  overflow: hidden;
+  word-wrap: break-word;
 }
 
 .difficulty-card:hover {
@@ -161,12 +169,17 @@
   font-size: 18px;
   color: #1f2937;
   font-weight: 600;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 
 .grid-size {
   font-size: 14px;
   color: #6b7280;
   font-weight: 500;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .card-body {
@@ -194,12 +207,16 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .stat-value {
   font-size: 16px;
   font-weight: 600;
   color: #374151;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .difficulty-desc {
@@ -214,15 +231,18 @@
 }
 
 .selection-indicator {
-  padding: 8px 12px;
+  padding: 6px 8px;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   text-align: center;
   transition: all 0.2s ease;
   margin-top: 8px;
-  min-height: 24px;
-  overflow: visible;
+  min-height: 20px;
+  overflow: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.2;
 }
 
 .selection-indicator:not(.active) {
@@ -536,17 +556,30 @@
   }
 
   .difficulty-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 12px;
+    justify-content: center;
   }
 
   .shape-grid {
     grid-template-columns: 1fr;
   }
 
   .difficulty-card {
-    padding: 16px;
-    min-height: 150px;
+    padding: 14px 8px;
+    min-height: 140px;
+    min-width: 140px;
+    max-width: none;
+    font-size: 14px;
+  }
+  
+  .difficulty-info h4 {
+    font-size: 16px;
+  }
+  
+  .selection-indicator {
+    font-size: 11px;
+    padding: 4px 6px;
   }
 
   .difficulty-stats {
@@ -556,33 +589,39 @@
 
   .stat-item {
     flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
   .difficulty-grid {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
-    gap: 16px;
+    gap: 12px;
     margin: 0 auto 12px auto;
-    width: 80%;
-    max-width: 100px;
+    width: 90%;
+    flex-wrap: wrap;
   }
+  
   .difficulty-card {
     display: flex;
     flex-direction: column;
-    padding: 12px 6px;
+    padding: 12px 8px;
     border: 2px solid #e5e7eb;
     border-radius: 12px;
     background: white;
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
     min-height: 120px;
-    width: 50px;
-    max-width: 10vw;
+    min-width: 120px;
+    max-width: 140px;
+    width: auto;
+    flex: 1;
     box-sizing: border-box;
-  }
-    justify-content: space-between;
-    align-items: center;
+    overflow: hidden;
+    word-wrap: break-word;
   }
 
   .settings-actions {

src/components/editor/DifficultySettings.tsx

@@ -206,7 +206,7 @@ export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
                 key={option.value}
                 className={`difficulty-card ${selectedDifficulty === option.value ? 'selected' : ''}`}
                 onClick={() => onDifficultyChange(option.value)}
-                style={{ '--accent-color': option.color, width: 180, minWidth: 0, padding: '8px 2px' } as React.CSSProperties}
+                style={{ '--accent-color': option.color, minWidth: 160, maxWidth: 200, width: 'auto', padding: '8px 4px', boxSizing: 'border-box' } as React.CSSProperties}
               >
                 <div className="card-header">
                   <span className="difficulty-icon">{option.icon}</span>

src/components/game/AnswerGrid.css

@@ -7,7 +7,9 @@
   /* 添加以下属性确保高度固定 */
   min-height: 0;
   /* 重要：允许内容收缩 */
-
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
   overflow: hidden;
   align-items: center;      /* 新增：内容水平居中 */
   justify-content: center;  /* 新增：内容垂直居中 */
@@ -33,11 +35,15 @@
 
 .answer-grid {
   position: relative;
-  flex: 1;
   display: grid;
   gap: 0px; /* 去除间隙，防止出现细线 */
   background: transparent; /* 去除背景色 */
   border-radius: 8px;
+  max-width: 100%;
+  max-height: 100%;
+  width: fit-content;
+  height: fit-content;
+  box-sizing: border-box;
   padding: 0; /* 去除内边距 */
   z-index: 1;
 
@@ -340,6 +346,13 @@
   display: grid;
   gap: 2px;
   padding: 2px;
+  max-width: 100%;
+  max-height: 100%;
+  width: fit-content;
+  height: fit-content;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: auto;
 }
 
 .triangle-square-container {
@@ -348,6 +361,11 @@
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.8);
   overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .triangle-slot {

src/components/game/AnswerGrid.tsx

@@ -71,10 +71,11 @@ export const AnswerGrid: React.FC<AnswerGridProps> = ({
     const maxCellHeight = Math.floor(availableHeight / gridSize.rows);
 
     // 取较小值确保所有单元格都能显示
-    const newSize = Math.min(maxCellWidth, maxCellHeight, 160); // 最大160px
+    const newSize = Math.min(maxCellWidth, maxCellHeight, 140); // 最大140px (降低以避免溢出)
 
-    // 确保单元格大小合理
-    const finalSize = Math.max(120, newSize); // 最小120px
+    // 确保单元格大小合理，但对于小网格(如3x3)允许更小的尺寸
+    const minSize = (gridSize.rows <= 3 && gridSize.cols <= 3) ? 80 : 100;
+    const finalSize = Math.max(minSize, newSize);
 
     setCellSize(finalSize);
   }, [gridSize.cols, gridSize.rows]);

src/components/game/PuzzleGame.css

@@ -109,6 +109,13 @@
   backdrop-filter: blur(4px);  /* 轻微模糊，保持背景可见 */
   position: relative;
   z-index: 1;  /* 确保在遮罩层之上 */
+  box-sizing: border-box;
+  overflow: visible;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 /* 夜间模式下的内容区域 */
@@ -124,28 +131,53 @@
   font-size: 28px;
   font-family: 'Nunito', 'Quicksand', sans-serif;
   font-weight: 400;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  align-self: center;
 }
 
-.puzzle-info {
+.start-content .puzzle-info {
   background: var(--light-pink);
   padding: 20px;
   border-radius: 12px;
-  margin-bottom: 32px;
+  margin: 0 20px 32px 20px !important;
   border: 2px solid var(--primary-pink);
   box-shadow: 0 4px 12px rgba(248, 165, 194, 0.2);
+  width: auto !important;
+  max-width: 200px !important;
+  min-width: 180px;
+  box-sizing: border-box;
+  overflow: hidden;
+  word-wrap: break-word;
+  text-align: center;
+  align-self: center;
 }
 
-.puzzle-info p {
+.start-content .puzzle-info p {
   margin: 8px 0;
   color: var(--text-secondary);
   font-size: 16px;
   font-family: 'Nunito', 'Quicksand', sans-serif;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  overflow: hidden;
 }
 
 .start-actions {
   display: flex;
   gap: 12px;
   justify-content: center;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  align-self: center;
 }
 
 /* 主要按钮 */
@@ -580,6 +612,33 @@
 
 /* 响应式设计 */
 @media (max-width: 768px) {
+  .start-content {
+    max-width: 350px;
+    padding: 30px 20px;
+  }
+  
+  .start-content h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .start-content .puzzle-info {
+    padding: 16px;
+    margin: 0 16px 24px 16px !important;
+    max-width: 180px !important;
+    min-width: 150px;
+    width: auto !important;
+  }
+  
+  .start-content .puzzle-info p {
+    font-size: 14px;
+    margin: 6px 0;
+  }
+  
+  .start-actions {
+    gap: 10px;
+  }
+  
   .game-header {
     flex-direction: column;
     gap: 16px;
@@ -611,5 +670,45 @@
   .preview-footer {
     padding: 15px;
   }
+}
 
+/* 小屏幕优化 */
+@media (max-width: 480px) {
+  .puzzle-game-start {
+    padding: 20px;
+  }
+  
+  .start-content {
+    max-width: 300px;
+    padding: 20px 16px;
+  }
+  
+  .start-content h2 {
+    font-size: 20px;
+    margin-bottom: 16px;
+  }
+  
+  .start-content .puzzle-info {
+    padding: 12px;
+    margin: 0 12px 20px 12px !important;
+    max-width: 160px !important;
+    min-width: 140px;
+    width: auto !important;
+  }
+  
+  .start-content .puzzle-info p {
+    font-size: 13px;
+    margin: 4px 0;
+  }
+  
+  .start-actions {
+    gap: 8px;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .start-actions button {
+    width: 100%;
+    max-width: 200px;
+  }
 }