From 60dafdc9df3a39446edb1028f4a018eb474ab729 Mon Sep 17 00:00:00 2001
From: iHeyTang <dehui1012@qq.com>
Date: Sun, 28 Sep 2025 20:21:22 +0800
Subject: [PATCH] refactor: simplify image comparison logic in TemplateCard and
 update history navigation handling

---
 src/components/TemplateCard/index.tsx | 87 +++++++++++++++------------
 src/pages/history/index.tsx           | 10 ++-
 2 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx
index 1f45088..27cff09 100644
--- a/src/components/TemplateCard/index.tsx
+++ b/src/components/TemplateCard/index.tsx
@@ -90,55 +90,68 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
           </div>
         </div>
       ) : (
-        // 原有的图片对比逻辑
         <div className="image-comparison">
           <div id={containerId} className="merged-image-container" ref={containerRef} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
-            {/* 原图层 - 完整图片/视频 */}
-            <div className="image-layer">
-              {isInputVideo ? (
-                <video
-                  className="full-video"
-                  src={template.inputExampleUrl || ``}
-                  autoPlay
-                  muted
-                  loop
-                  style={{ objectFit: 'cover' }}
-                  controls={false}
-                />
-              ) : (
-                <img className="full-image" src={template.inputExampleUrl || ``} alt="input" loading="lazy" />
-              )}
-            </div>
-
             {/* 效果图层 - 完整图片，通过遮罩显示右半部分 */}
-            <div
-              className="image-layer overlay-layer"
-              style={{
-                clipPath: `polygon(${splitPosition}% 0%, 100% 0%, 100% 100%, ${splitPosition}% 100%)`,
-              }}
-            >
+            <div className="image-layer overlay-layer">
               <img className="full-image" src={template.outputExampleUrl || ``} alt="output" loading="lazy" />
             </div>
 
-            {/* 可拖拽的分割线 */}
-            <div
-              className="split-line"
-              style={{ left: `${splitPosition}%` }}
-              onTouchStart={handleTouchStart}
-              onTouchMove={handleTouchMove}
-              onTouchEnd={handleTouchEnd}
-            >
-              <div className="split-handle">
-                <span className="split-icon">⟷</span>
-              </div>
-            </div>
-
             {/* 模板名称悬浮 - 图片底部 */}
             <div className="name-overlay">
               <span className="name-badge">✨{template.name}</span>
             </div>
           </div>
         </div>
+        // 原有的图片对比逻辑
+        // <div className="image-comparison">
+        //   <div id={containerId} className="merged-image-container" ref={containerRef} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
+        //     {/* 原图层 - 完整图片/视频 */}
+        //     <div className="image-layer">
+        //       {isInputVideo ? (
+        //         <video
+        //           className="full-video"
+        //           src={template.inputExampleUrl || ``}
+        //           autoPlay
+        //           muted
+        //           loop
+        //           style={{ objectFit: 'cover' }}
+        //           controls={false}
+        //         />
+        //       ) : (
+        //         <img className="full-image" src={template.inputExampleUrl || ``} alt="input" loading="lazy" />
+        //       )}
+        //     </div>
+
+        //     {/* 效果图层 - 完整图片，通过遮罩显示右半部分 */}
+        //     <div
+        //       className="image-layer overlay-layer"
+        //       style={{
+        //         clipPath: `polygon(${splitPosition}% 0%, 100% 0%, 100% 100%, ${splitPosition}% 100%)`,
+        //       }}
+        //     >
+        //       <img className="full-image" src={template.outputExampleUrl || ``} alt="output" loading="lazy" />
+        //     </div>
+
+        //     {/* 可拖拽的分割线 */}
+        //     <div
+        //       className="split-line"
+        //       style={{ left: `${splitPosition}%` }}
+        //       onTouchStart={handleTouchStart}
+        //       onTouchMove={handleTouchMove}
+        //       onTouchEnd={handleTouchEnd}
+        //     >
+        //       <div className="split-handle">
+        //         <span className="split-icon">⟷</span>
+        //       </div>
+        //     </div>
+
+        //     {/* 模板名称悬浮 - 图片底部 */}
+        //     <div className="name-overlay">
+        //       <span className="name-badge">✨{template.name}</span>
+        //     </div>
+        //   </div>
+        // </div>
       )}
     </div>
   );
diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx
index 39cc509..642d8fb 100644
--- a/src/pages/history/index.tsx
+++ b/src/pages/history/index.tsx
@@ -57,15 +57,13 @@ export default function History() {
 
   // Click history record item
   const handleItemClick = (record: any) => {
-    if (record.status === 'completed' && record.outputUrl) {
-      // Navigate to result page to view
-      navigate(`/result?taskId=${record.executionId}`);
-    } else if (record.status === 'failed') {
+    console.log('record', record);
+    if (record.status === 'failed') {
       console.error('Refresh failed:', record.errorMessage);
       // Show error message
-    } else if (record.status === 'processing') {
+    } else {
       // Navigate to generation page to view progress
-      navigate(`/result?taskId=${record.executionId}`);
+      navigate(`/result?taskId=${record.id}`);
     }
   };