♻️ refactor(WordPreview): adjust component rendering order

- move image mapping preview, Excel data preview and processing result preview components below processing result section
- maintain consistent component structure and functionality while changing display order

src/client/home/pages/WordPreview.tsx

@@ -1187,122 +1187,6 @@ export default function WordPreview() {
         </Card>
       )}
 
-      {/* 图片映射预览 */}
-      {Object.keys(imageMappings).length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Image className="h-5 w-5" />
-              图片映射预览
-            </CardTitle>
-            <CardDescription>
-              共 {getTotalImages()} 张图片，点击缩略图查看大图
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {Object.entries(imagePreviewUrls).map(([folder, images]) => (
-                <div key={folder} className="border rounded-lg p-4">
-                  <h4 className="font-semibold text-lg mb-3 flex items-center gap-2">
-                    <Package className="h-4 w-4" />
-                    文件夹 {folder} ({Object.keys(images).length} 张图片)
-                  </h4>
-                  <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-                    {Object.entries(images).map(([imageName, previewUrl]) => (
-                      <div
-                        key={imageName}
-                        className="group relative cursor-pointer"
-                        onClick={() => openImagePreview(previewUrl, imageName, folder)}
-                      >
-                        <div className="aspect-square rounded-lg overflow-hidden border hover:border-blue-500 transition-colors">
-                          <img
-                            src={previewUrl}
-                            alt={imageName}
-                            className="w-full h-full object-cover"
-                          />
-                        </div>
-                        <div className="mt-1">
-                          <p className="text-xs text-center truncate text-gray-600 group-hover:text-blue-600">
-                            {imageName}
-                          </p>
-                        </div>
-                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-opacity rounded-lg flex items-center justify-center">
-                          <ZoomIn className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* 数据预览 */}
-      {excelData.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FileSpreadsheet className="h-5 w-5" />
-              Excel数据预览
-            </CardTitle>
-            <CardDescription>
-              显示前5行数据，共 {excelData.length} 行
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b">
-                    {Object.keys(excelData[0]).map(header => (
-                      <th key={header} className="text-left p-2 font-medium">
-                        {header}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {excelData.slice(0, 5).map((row, index) => (
-                    <tr key={index} className="border-b">
-                      {Object.values(row).map((value, valueIndex) => (
-                        <td key={valueIndex} className="p-2">
-                          {String(value)}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-              {excelData.length > 5 && (
-                <p className="text-sm text-muted-foreground mt-2 text-center">
-                  还有 {excelData.length - 5} 行数据...
-                </p>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* 处理结果预览 */}
-      {processingResult && processingResult.generatedFiles.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FileText className="h-5 w-5" />
-              处理结果预览
-            </CardTitle>
-            <CardDescription>
-              预览第一个生成的文档
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <WordViewer file={processingResult.generatedFiles[0].content} />
-          </CardContent>
-        </Card>
-      )}
-
       {/* 处理结果 */}
       {processingResult && (
         <Card>
@@ -1486,6 +1370,122 @@ export default function WordPreview() {
         </Card>
       )}
 
+      {/* 图片映射预览 */}
+      {Object.keys(imageMappings).length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Image className="h-5 w-5" />
+              图片映射预览
+            </CardTitle>
+            <CardDescription>
+              共 {getTotalImages()} 张图片，点击缩略图查看大图
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {Object.entries(imagePreviewUrls).map(([folder, images]) => (
+                <div key={folder} className="border rounded-lg p-4">
+                  <h4 className="font-semibold text-lg mb-3 flex items-center gap-2">
+                    <Package className="h-4 w-4" />
+                    文件夹 {folder} ({Object.keys(images).length} 张图片)
+                  </h4>
+                  <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+                    {Object.entries(images).map(([imageName, previewUrl]) => (
+                      <div
+                        key={imageName}
+                        className="group relative cursor-pointer"
+                        onClick={() => openImagePreview(previewUrl, imageName, folder)}
+                      >
+                        <div className="aspect-square rounded-lg overflow-hidden border hover:border-blue-500 transition-colors">
+                          <img
+                            src={previewUrl}
+                            alt={imageName}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                        <div className="mt-1">
+                          <p className="text-xs text-center truncate text-gray-600 group-hover:text-blue-600">
+                            {imageName}
+                          </p>
+                        </div>
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-opacity rounded-lg flex items-center justify-center">
+                          <ZoomIn className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 数据预览 */}
+      {excelData.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileSpreadsheet className="h-5 w-5" />
+              Excel数据预览
+            </CardTitle>
+            <CardDescription>
+              显示前5行数据，共 {excelData.length} 行
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b">
+                    {Object.keys(excelData[0]).map(header => (
+                      <th key={header} className="text-left p-2 font-medium">
+                        {header}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {excelData.slice(0, 5).map((row, index) => (
+                    <tr key={index} className="border-b">
+                      {Object.values(row).map((value, valueIndex) => (
+                        <td key={valueIndex} className="p-2">
+                          {String(value)}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {excelData.length > 5 && (
+                <p className="text-sm text-muted-foreground mt-2 text-center">
+                  还有 {excelData.length - 5} 行数据...
+                </p>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 处理结果预览 */}
+      {processingResult && processingResult.generatedFiles.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              处理结果预览
+            </CardTitle>
+            <CardDescription>
+              预览第一个生成的文档
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <WordViewer file={processingResult.generatedFiles[0].content} />
+          </CardContent>
+        </Card>
+      )}
+
       {/* 使用说明 */}
       <Card>
         <CardHeader>