Merge pull request #32 from wdyy20041223/main

fix：拼图编辑器可预览三角形，优化页面显示、分享代码的生成，优化异形拼图页面，增加提示功能

Author: YueZheng-Sea-angle

package-lock.json

@@ -15,6 +15,7 @@
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.11.0",
     "interactjs": "^1.10.27",
+    "lz-string": "^1.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.8.2"

package.json

@@ -24,7 +24,7 @@ import './App.css';
 
 
 
-type AppView = 'menu' | 'game' | 'editor' | 'irregular-game' | 'tetris-game' | 'achievements' | 'dailyChallenge' | 'multiplayer' | 'shop' | 'profile' | 'leaderboard' | 'dailyChallengeHistory' | 'settings';
+type AppView = 'menu' | 'game' | 'editor' | 'irregular-game' | 'tetris-game' | 'achievements' | 'dailyChallenge' | 'multiplayer' | 'shop' | 'profile' | 'leaderboard' | 'settings' | 'home' | 'singlePlayer' | 'multiplayer-game' | 'dailyChallengeHistory';
 
 
 
@@ -216,7 +216,7 @@ const AppContent: React.FC = () => {
 
       case 'editor':
         return (
-          <PuzzleEditor onBackToMenu={handleBackToMenu} />
+          <PuzzleEditor onBackToMenu={handleBackToMenu} onStartGame={handleStartGame} onStartIrregularGame={handleStartIrregularGame} />
         );
 
       case 'irregular-game':

src/App.tsx

@@ -1,27 +1,63 @@
+/* 让上传和导入按钮大小一致 */
+.same-size-btn {
+  min-width: 160px;
+  height: 44px;
+  box-sizing: border-box;
+  font-size: 16px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.upload-step .upload-btn,
+.upload-step .import-btn {
+  margin: 0;
+}
+
+.upload-step {
+  /* 保证按钮容器本身是flex且垂直居中 */
+  /* 只影响上传区域的按钮，不影响其它地方 */
+}
 .difficulty-settings {
   display: flex;
   flex-direction: column;
   gap: 32px;
+  max-height: 100vh;
+  overflow-y: auto;
+  padding-top: 24px;
+  box-sizing: border-box;
+  width: 1100px;
+  min-height: 800px;
+  margin: 0 auto;
 }
 
 .settings-section {
   background: white;
   border-radius: 12px;
-  padding: 24px;
+  padding: 8px 24px 24px 24px;
   border: 1px solid #e5e7eb;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
+/* 单独放大“选择拼块形状”大框 */
+.settings-section:nth-of-type(2) {
+  padding: 32px 48px 36px 48px;
+  margin-bottom: 44px;
+}
+
 .settings-section h3 {
   margin: 0 0 12px 0;
   font-size: 24px;
   color: #1f2937;
   font-weight: 600;
-  padding-top: 8px;
+  padding-top: 0;
 }
 
 .settings-section:first-of-type h3 {
-  padding-top: 40px;
+  padding-top: 0;
 }
 
 .section-description {
@@ -34,7 +70,7 @@
 /* Difficulty Grid */
 .difficulty-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   gap: 16px;
 }
 
@@ -66,6 +102,26 @@
   box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-color, #3b82f6) 20%, transparent);
 }
 
+/* 自定义选项的特殊样式 */
+.difficulty-card[style*="--accent-color: #8b5cf6"] {
+  border: 2px solid #e5e7eb;
+}
+
+.difficulty-card[style*="--accent-color: #8b5cf6"].selected {
+  border: 2px solid #8b5cf6;
+  background: linear-gradient(135deg, 
+    color-mix(in srgb, #8b5cf6 15%, white),
+    white
+  );
+  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
+}
+
+.difficulty-card[style*="--accent-color: #8b5cf6"]:hover {
+  border-color: #7c3aed;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
+}
+
 .card-header {
   display: flex;
   flex-direction: column;
@@ -142,6 +198,9 @@
   font-weight: 500;
   text-align: center;
   transition: all 0.2s ease;
+  margin-top: 8px;
+  min-height: 24px;
+  overflow: visible;
 }
 
 .selection-indicator:not(.active) {
@@ -157,20 +216,37 @@
 /* Shape Grid */
 .shape-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 20px;
+  margin-top: 16px;
+}
+
+.shape-grid-horizontal {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   gap: 16px;
 }
 
+.shape-grid-horizontal .shape-card {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 220px;
+}
 .shape-card {
   display: flex;
   flex-direction: column;
-  padding: 20px;
+  padding: 20px 12px 20px 12px;
   border: 2px solid #e5e7eb;
   border-radius: 12px;
   background: white;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
+  min-width: 0;
+  min-height: 220px;
+  box-sizing: border-box;
+  overflow: visible;
 }
 
 .shape-card:hover:not(.coming-soon) {
@@ -257,7 +333,10 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
+  margin-bottom: 16px;
+  align-items: center;
+  overflow: visible;
 }
 
 .shape-description {
@@ -270,6 +349,8 @@
 .shape-meta {
   display: flex;
   justify-content: center;
+  margin-top: 4px;
+  margin-bottom: 0;
 }
 
 .difficulty-badge {
@@ -312,15 +393,16 @@
 
 .summary-content {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }
 
 .summary-item {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 8px 0;
+  gap: 12px;
 }
 
 .summary-label {
@@ -379,7 +461,7 @@
   background: #f0f9ff;
   border: 1px solid #bfdbfe;
   border-radius: 12px;
-  padding: 20px;
+  padding: 8px 20px 20px 20px;
 }
 
 .settings-tips h4 {
@@ -409,7 +491,7 @@
 /* Responsive Design */
 @media (max-width: 1024px) {
   .difficulty-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
 
   .shape-grid {
@@ -451,6 +533,31 @@
 
   .stat-item {
     flex-direction: row;
+  .difficulty-grid {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: stretch;
+    gap: 16px;
+    margin: 0 auto 12px auto;
+    width: 80%;
+    max-width: 100px;
+  }
+  .difficulty-card {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 6px;
+    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;
+    box-sizing: border-box;
+  }
     justify-content: space-between;
     align-items: center;
   }
@@ -507,3 +614,21 @@
 .shape-card:nth-child(1) { animation-delay: 0.1s; }
 .shape-card:nth-child(2) { animation-delay: 0.2s; }
 .shape-card:nth-child(3) { animation-delay: 0.3s; }
+
+/* Custom shape section animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.custom-shape-section {
+  animation: fadeIn 0.3s ease-in-out;
+  margin-top: 6px !important;
+  padding: 6px !important;
+}