Merge pull request #42 from wdyy20041223/main

fix:拼图编辑器的16:9裁剪，并适配自定义形状、保存配置、分享代码、预览效果功能，优化自定义形状时的预览效果功能

Author: YueZheng-Sea-angle

src/components/editor/DifficultySettings.tsx

@@ -14,6 +14,7 @@ interface DifficultySettingsProps {
   onShapeChange: (shape: PieceShape) => void;
   onRecrop?: () => void; // 新增：重新剪裁回调
   hasUploadedImage?: boolean; // 新增：是否有已上传图片
+  onCustomGridChange?: (rows: number, cols: number) => void; // 新增：自定义网格更新回调
 }
 
 export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
@@ -26,7 +27,8 @@ export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
   onDifficultyChange,
   onShapeChange,
   onRecrop,
-  hasUploadedImage
+  hasUploadedImage,
+  onCustomGridChange
 }) => {
   const [customRows, setCustomRows] = useState('3');
   const [customCols, setCustomCols] = useState('3');
@@ -146,7 +148,10 @@ export const DifficultySettings: React.FC<DifficultySettingsProps> = ({
     if (rows >= 2 && rows <= 10 && cols >= 2 && cols <= 10) {
       // 更新配置并关闭自定义设置面板
       setShowCustomInputs(false);
-      // 这里可以添加其他配置更新逻辑
+      // 调用父组件的回调函数更新临时状态
+      if (onCustomGridChange) {
+        onCustomGridChange(rows, cols);
+      }
       console.log(`自定义网格已更新: ${rows}×${cols}`);
     } else {
       alert('请输入有效的行数和列数（2-10之间）');

src/components/editor/PreviewModal.css

@@ -141,6 +141,14 @@
   left: 5%;
 }
 
+/* 16:9宽屏比例的网格样式 */
+.grid-overlay-inner.widescreen {
+  width: 90%;
+  height: 50.625%; /* 16:9比例的高度计算：90% * 9/16 = 50.625% */
+  top: 25%;
+  left: 5%;
+}
+
 .grid-line {
   position: absolute;
   background: #2563eb;

src/components/editor/PreviewModal.tsx

@@ -10,6 +10,7 @@ interface PreviewModalProps {
   showPuzzleGrid?: boolean;
   gridSize?: string;
   pieceShape?: string; // 新增：拼块形状
+  aspectRatio?: string; // 新增：画幅比例
 }
 
 export const PreviewModal: React.FC<PreviewModalProps> = ({
@@ -19,7 +20,8 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
   imageTitle,
   showPuzzleGrid = false,
   gridSize = '4x4',
-  pieceShape = 'square' // 默认方形
+  pieceShape = 'square', // 默认方形
+  aspectRatio = '1:1' // 默认1:1比例
 }) => {
   if (!isOpen) return null;
 
@@ -35,6 +37,10 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
     const [rows, cols] = gridSize.split('x').map(Number);
     const gridLines = [];
 
+    // 根据画幅比例调整网格显示
+    const isWidescreen = aspectRatio === '16:9';
+    const gridContainerClass = isWidescreen ? 'grid-overlay-inner widescreen' : 'grid-overlay-inner';
+
     // 添加垂直线
     for (let i = 1; i < cols; i++) {
       gridLines.push(
@@ -103,7 +109,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
 
     return (
       <div className="puzzle-grid-overlay">
-        <div className="grid-overlay-inner">
+        <div className={gridContainerClass}>
           {gridLines}
         </div>
       </div>

src/components/editor/PuzzleEditor.tsx

@@ -77,6 +77,7 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
   const [importPreviewImage, setImportPreviewImage] = useState<string | null>(null);
   const [importPreviewShape, setImportPreviewShape] = useState<string>('');
   const [importPreviewGrid, setImportPreviewGrid] = useState<string>('');
+  const [importPreviewAspectRatio, setImportPreviewAspectRatio] = useState<string>('');
 
   // 监听分享代码输入，实时解析图片
   const handleImportCodeChange = (val: string) => {
@@ -106,10 +107,17 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
       } else {
         setImportPreviewGrid('');
       }
+      // 裁剪比例
+      if (data.aspectRatio) {
+        setImportPreviewAspectRatio(data.aspectRatio);
+      } else {
+        setImportPreviewAspectRatio('');
+      }
     } catch {
       setImportPreviewImage(null);
       setImportPreviewShape('');
       setImportPreviewGrid('');
+      setImportPreviewAspectRatio('');
     }
   };
 
@@ -245,15 +253,22 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
     }
     // 生成唯一id
     const id = Date.now().toString();
+    // 确保保存完整的配置信息，包括裁剪比例
     const newPuzzle = {
       id,
       name: customPuzzleConfig.name,
-      data: customPuzzleConfig,
+      data: {
+        ...customPuzzleConfig,
+        // 明确包含裁剪比例信息
+        aspectRatio: customPuzzleConfig.aspectRatio || '1:1',
+        // 包含裁剪后的图片数据
+        croppedImageData: customPuzzleConfig.croppedImageData
+      },
       date: new Date().toLocaleString(),
     };
     puzzles.push(newPuzzle);
     localStorage.setItem('savedPuzzles', JSON.stringify(puzzles));
-  setShowSavedPage({ highlightId: id });
+    setShowSavedPage({ highlightId: id });
   }, [customPuzzleConfig]);
 
   // 分享弹窗相关状态
@@ -352,6 +367,7 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
         gridSize,
         pieceShape,
         name: customPuzzleConfig.name || '自定义拼图',
+        aspectRatio: customPuzzleConfig.aspectRatio,
       });
       if (typeof onStartGame === 'function') {
         onStartGame(puzzleConfig);
@@ -475,11 +491,13 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
                 {importPreviewImage && (
                   <img src={importPreviewImage} alt="预览" style={{ maxWidth: 180, maxHeight: 120, borderRadius: 4, boxShadow: '0 1px 6px #0001', marginBottom: (importPreviewShape || importPreviewGrid) ? 6 : 0 }} />
                 )}
-                {(importPreviewShape || importPreviewGrid) && (
+                {(importPreviewShape || importPreviewGrid || importPreviewAspectRatio) && (
                   <div style={{ fontSize: 13, color: '#333', marginBottom: 2 }}>
                     {importPreviewShape && <span>形状：{importPreviewShape}</span>}
                     {importPreviewShape && importPreviewGrid && <span style={{ margin: '0 6px' }}>|</span>}
                     {importPreviewGrid && <span>块数：{importPreviewGrid}</span>}
+                    {(importPreviewShape || importPreviewGrid) && importPreviewAspectRatio && <span style={{ margin: '0 6px' }}>|</span>}
+                    {importPreviewAspectRatio && <span>比例：{importPreviewAspectRatio}</span>}
                   </div>
                 )}
               </div>
@@ -515,8 +533,8 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
               <button onClick={() => { setImportDialogOpen(false); setImportError(''); setImportCode(''); setImportPreviewImage(null); }} style={{ padding: '6px 16px', fontSize: 14, cursor: 'pointer' }}>取消</button>
             </div>
             <div style={{ fontSize: 12, color: '#888', marginTop: 8 }}>
-              分享代码可由好友生成，包含图片、形状、难度、块数等信息。
-            </div>
+                分享代码可由好友生成，包含图片、形状、难度、块数、裁剪比例等信息。
+              </div>
           </div>
         </div>
       )}
@@ -585,7 +603,8 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
           selectedShape={tempPieceShape}
           onDifficultyChange={handleTempDifficultyChange}
           onShapeChange={handleTempPieceShapeChange}
-          // 新增：自定义行列同步（已移除无用 prop）
+          // 新增：自定义行列同步
+          onCustomGridChange={handleTempCustomGrid}
           // 新增：重新剪裁功能
           onRecrop={() => setCurrentStep('crop')}
           hasUploadedImage={!!uploadedImage}
@@ -755,14 +774,25 @@ export const PuzzleEditor: React.FC<PuzzleEditorProps> = ({ onBackToMenu, onBack
           showPuzzleGrid={true}
           gridSize={
             currentStep === 'settings'
-              ? (tempDifficulty === 'easy' ? '3x3' : tempDifficulty === 'medium' ? '4x4' : tempDifficulty === 'hard' ? '5x5' : '6x6')
-              : (customPuzzleConfig.difficulty === 'easy' ? '3x3' : customPuzzleConfig.difficulty === 'medium' ? '4x4' : customPuzzleConfig.difficulty === 'hard' ? '5x5' : '6x6')
+              ? (tempDifficulty === 'easy' ? '3x3' 
+                : tempDifficulty === 'medium' ? '4x4' 
+                : tempDifficulty === 'hard' ? '5x5' 
+                : tempDifficulty === 'expert' ? '6x6'
+                : tempDifficulty === 'custom' ? `${tempCustomRows}x${tempCustomCols}`
+                : '4x4')
+              : (customPuzzleConfig.difficulty === 'easy' ? '3x3' 
+                : customPuzzleConfig.difficulty === 'medium' ? '4x4' 
+                : customPuzzleConfig.difficulty === 'hard' ? '5x5' 
+                : customPuzzleConfig.difficulty === 'expert' ? '6x6'
+                : customPuzzleConfig.difficulty === 'custom' ? `${customPuzzleConfig.customRows || 3}x${customPuzzleConfig.customCols || 3}`
+                : '4x4')
           }
           pieceShape={
             currentStep === 'settings'
               ? tempPieceShape
               : customPuzzleConfig.pieceShape
           }
+          aspectRatio={customPuzzleConfig.aspectRatio}
         />
         {/* 分享代码弹窗 */}
         {shareDialogOpen && (

src/components/game/AnswerGrid.css

@@ -10,11 +10,17 @@
   max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
-  overflow: hidden;
+  overflow: hidden; /* 默认隐藏溢出 */
   align-items: center;      /* 新增：内容水平居中 */
   justify-content: center;  /* 新增：内容垂直居中 */
 }
 
+/* 为16:9答题卡添加额外的滚动容器包装 */
+.answer-grid-container[data-aspect-ratio="16:9"] {
+  overflow: auto; /* 16:9答题卡允许滚动 */
+  position: relative;
+}
+
 .background-image {
   position: absolute;
   top: 20px;
@@ -65,6 +71,82 @@
   min-width: 0;  /* 重要：允许内容收缩 */
 }
 
+/* 16:9答题卡网格放大效果 */
+/* 为16:9答题卡添加专门的滚动容器 */
+.answer-grid-container[data-aspect-ratio="16:9"] {
+  overflow: auto; /* 16:9答题卡允许滚动 */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; /* 从顶部开始对齐 */
+  
+  /* 向下平移header的高度，避免被area-header挡住 */
+  margin-top: 30px; /* 减少margin-top，避免顶部被截断 */
+  margin-bottom: -30px; /* 相应减少抵消值 */
+  
+  /* 确保底部内容不被网格信息区域挡住 */
+  padding-bottom: 60px; /* 增加底部内边距 */
+  padding-top: 10px; /* 添加顶部内边距确保内容可见 */
+}
+
+/* 16:9答题卡网格放大效果 - 动态调整放大倍数 */
+.answer-grid-container[data-aspect-ratio="16:9"] .answer-grid {
+  transform: scale(var(--grid-scale-factor, 1.9)); /* 使用CSS变量动态控制放大倍数 */
+  transform-origin: center top; /* 从顶部中心开始缩放，避免顶部被截断 */
+  gap: 2px; /* 添加2px间距避免拼图块遮挡 */
+  row-gap: 4px; /* 垂直方向增加额外2px间距 */
+  
+  /* 修复滚动问题：确保缩放后的内容仍然可以正确滚动 */
+  position: relative;
+  z-index: 1;
+  margin-bottom: 20px; /* 添加底部边距，确保内容不被网格信息挡住 */
+}
+
+/* 确保16:9答题卡的网格信息区域不会挡住内容 */
+.answer-grid-container[data-aspect-ratio="16:9"] .grid-info {
+  position: sticky;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.95); /* 使用半透明背景避免完全遮挡 */
+  z-index: 10;
+  padding: 12px 16px;
+  margin-top: auto;
+  border-top: 1px solid #e2e8f0;
+  backdrop-filter: blur(5px); /* 添加毛玻璃效果 */
+  
+  /* 保留原始flex布局 */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px 8px 0 0;
+  flex-shrink: 0;
+}
+
+/* 确保缩放后的网格内容能够正确触发滚动 */
+.answer-grid-container[data-aspect-ratio="16:9"]::before {
+  content: '';
+  position: absolute;
+  top: -10px; /* 扩展可滚动区域到顶部 */
+  left: 0;
+  right: 0;
+  bottom: -60px; /* 扩展可滚动区域到底部 */
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* 16:9方形拼图块的图片样式 - 确保图片在边框内显示 */
+.grid-slot[data-aspect-ratio="16:9"] .placed-piece .piece-image {
+  transform: scale(var(--image-scale-factor, 0.95)); /* 使用CSS变量动态控制图片缩小倍数 */
+  transform-origin: center;
+}
+
+/* 16:9网格槽位虚线边框 */
+.grid-slot[data-aspect-ratio="16:9"] {
+  border-style: dashed;
+  border-color: #cbd5e1;
+  box-sizing: border-box; /* 确保边框不增加元素尺寸 */
+}
+
 /* 自定义滚动条样式 */
 .answer-grid::-webkit-scrollbar {
   width: 8px;
@@ -84,7 +166,6 @@
   background: #a8a8a8;
 }
 
-
 .grid-slot {
   position: relative;
   background: white;
@@ -96,8 +177,6 @@
   justify-content: center;
   overflow: hidden;
   border: 2px solid transparent;
-  /* 确保单元格保持正方形 */
-  aspect-ratio: 1;
   /* 添加最小尺寸防止过度缩小 */
   min-height: 60px;
   min-width: 60px;
@@ -202,6 +281,8 @@
   display: block;
 }
 
+
+
 .piece-info {
   position: absolute;
   bottom: 4px;
@@ -657,4 +738,4 @@
   white-space: nowrap;
   pointer-events: none;
   z-index: 3;
-}
+}