bowong
/
bw-mini-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: simplify image comparison logic in TemplateCard and update history navigation handling

This commit is contained in:
iHeyTang 2025-09-28 20:21:22 +08:00
parent bc2abb29d2
commit 60dafdc9df
2 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/TemplateCard/index.tsx
View File

@ -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>
);

10
src/pages/history/index.tsx
View File

@ -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}`);
}
};