Merge branch 'vite' of ssh://gitea.bowongai.com:222/bowong/bw-mini-app into vite
This commit is contained in:
commit
53c80f1777
|
|
@ -90,55 +90,68 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
// 原有的图片对比逻辑
|
|
||||||
<div className="image-comparison">
|
<div className="image-comparison">
|
||||||
<div id={containerId} className="merged-image-container" ref={containerRef} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
|
<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
|
<div className="image-layer overlay-layer">
|
||||||
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" />
|
<img className="full-image" src={template.outputExampleUrl || ``} alt="output" loading="lazy" />
|
||||||
</div>
|
</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">
|
<div className="name-overlay">
|
||||||
<span className="name-badge">✨{template.name}</span>
|
<span className="name-badge">✨{template.name}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -57,15 +57,13 @@ export default function History() {
|
||||||
|
|
||||||
// Click history record item
|
// Click history record item
|
||||||
const handleItemClick = (record: any) => {
|
const handleItemClick = (record: any) => {
|
||||||
if (record.status === 'completed' && record.outputUrl) {
|
console.log('record', record);
|
||||||
// Navigate to result page to view
|
if (record.status === 'failed') {
|
||||||
navigate(`/result?taskId=${record.executionId}`);
|
|
||||||
} else if (record.status === 'failed') {
|
|
||||||
console.error('Refresh failed:', record.errorMessage);
|
console.error('Refresh failed:', record.errorMessage);
|
||||||
// Show error message
|
// Show error message
|
||||||
} else if (record.status === 'processing') {
|
} else {
|
||||||
// Navigate to generation page to view progress
|
// Navigate to generation page to view progress
|
||||||
navigate(`/result?taskId=${record.executionId}`);
|
navigate(`/result?taskId=${record.id}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue