2
0
Эх сурвалжийг харах

🔧 chore(WordPreview): 调整页面组件显示顺序

- 将"图片映射预览"组件移至预览区域下方
- 将"处理结果预览"和"处理结果"组件调整到页面更靠后的位置
- 保持各组件原有功能不变,优化整体布局逻辑
yourname 4 сар өмнө
parent
commit
fad769bb08

+ 79 - 79
src/client/admin-shadcn/pages/WordPreview.tsx

@@ -589,79 +589,6 @@ export default function WordPreview() {
         </CardContent>
       </Card>
 
-      {/* 图片映射预览 */}
-      {Object.keys(imageMappings).length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Image className="h-5 w-5" />
-              图片映射预览
-            </CardTitle>
-            <CardDescription>
-              文件夹结构:序号文件夹 → 图片文件
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2 max-h-40 overflow-y-auto">
-              {Object.entries(imageMappings).map(([folder, images]) => (
-                <div key={folder} className="p-2 bg-gray-50 rounded">
-                  <strong>文件夹 {folder}:</strong> {Object.keys(images).join(', ')}
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* 处理结果 */}
-      {processingResult && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <CheckCircle className="h-5 w-5 text-green-500" />
-              处理完成
-            </CardTitle>
-            <CardDescription>
-              共生成 {processingResult.total} 个文档
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <Button
-                onClick={downloadAllFiles}
-                className="w-full"
-              >
-                <DownloadCloud className="h-4 w-4 mr-2" />
-                下载全部文档
-              </Button>
-              
-              <div className="space-y-2 max-h-64 overflow-y-auto">
-                {processingResult.generatedFiles.map((file, index) => (
-                  <div
-                    key={index}
-                    className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
-                  >
-                    <div>
-                      <p className="font-medium">{file.name}</p>
-                      <p className="text-sm text-muted-foreground">
-                        包含 {Object.keys(file.fields).length} 个字段
-                      </p>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => downloadProcessedFile(file)}
-                    >
-                      <Download className="h-4 w-4" />
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
       {/* 预览区域 */}
       {showPreview && selectedWordFile && (
         <Card>
@@ -680,20 +607,26 @@ export default function WordPreview() {
         </Card>
       )}
 
-      {/* 处理结果预览 */}
-      {processingResult && processingResult.generatedFiles.length > 0 && (
+      {/* 图片映射预览 */}
+      {Object.keys(imageMappings).length > 0 && (
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
-              <FileText className="h-5 w-5" />
-              处理结果预览
+              <Image className="h-5 w-5" />
+              图片映射预览
             </CardTitle>
             <CardDescription>
-              预览第一个生成的文档
+              文件夹结构:序号文件夹 → 图片文件
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <WordViewer file={processingResult.generatedFiles[0].content} />
+            <div className="space-y-2 max-h-40 overflow-y-auto">
+              {Object.entries(imageMappings).map(([folder, images]) => (
+                <div key={folder} className="p-2 bg-gray-50 rounded">
+                  <strong>文件夹 {folder}:</strong> {Object.keys(images).join(', ')}
+                </div>
+              ))}
+            </div>
           </CardContent>
         </Card>
       )}
@@ -744,6 +677,73 @@ export default function WordPreview() {
         </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>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <CheckCircle className="h-5 w-5 text-green-500" />
+              处理完成
+            </CardTitle>
+            <CardDescription>
+              共生成 {processingResult.total} 个文档
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <Button
+                onClick={downloadAllFiles}
+                className="w-full"
+              >
+                <DownloadCloud className="h-4 w-4 mr-2" />
+                下载全部文档
+              </Button>
+              
+              <div className="space-y-2 max-h-64 overflow-y-auto">
+                {processingResult.generatedFiles.map((file, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+                  >
+                    <div>
+                      <p className="font-medium">{file.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        包含 {Object.keys(file.fields).length} 个字段
+                      </p>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => downloadProcessedFile(file)}
+                    >
+                      <Download className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* 使用说明 */}
       <Card>
         <CardHeader>