From 941c143c6b3ccfa89c1f267b51816b0289f3b699 Mon Sep 17 00:00:00 2001 From: iHeyTang Date: Mon, 29 Sep 2025 11:42:08 +0800 Subject: [PATCH] fix: update TemplateCard component by removing unused state and handlers --- package.json | 2 +- src/components/TemplateCard/index.tsx | 135 ++---------------- src/pages/home/index.tsx | 14 -- .../result/components/SuccessComponent.tsx | 11 +- src/pages/result/index.css | 2 + 5 files changed, 27 insertions(+), 137 deletions(-) diff --git a/package.json b/package.json index 1075b6f..16a6511 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "scripts": { "claude": "claude --dangerously-skip-permissions", "prepare": "husky", - "dev": "vite", + "dev": "vite --host 0.0.0.0 --port 3000", "build": "vite build", "build:check": "tsc && vite build", "preview": "vite preview", diff --git a/src/components/TemplateCard/index.tsx b/src/components/TemplateCard/index.tsx index c951e6f..614e084 100644 --- a/src/components/TemplateCard/index.tsx +++ b/src/components/TemplateCard/index.tsx @@ -1,6 +1,5 @@ -import { useState, useRef, useMemo } from 'react'; +import { useRef, useMemo } from 'react'; import { Template } from '../../store/types'; -import { useI18n } from '../../hooks/useI18n'; import './index.css'; interface TemplateCardProps { @@ -9,10 +8,6 @@ interface TemplateCardProps { } export default function TemplateCard({ template, onClick }: TemplateCardProps) { - const { t } = useI18n(); - const [splitPosition, setSplitPosition] = useState(50); // 分割线位置百分比 - const [isDragging, setIsDragging] = useState(false); - const [containerInfo, setContainerInfo] = useState(null); const containerRef = useRef(null); const containerId = `container-${template.code}`; // 为每个容器创建唯一ID @@ -21,137 +16,35 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) { return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.outputExampleUrl || ''); }, [template.outputExampleUrl]); - // 检测input是否为视频 - const isInputVideo = useMemo(() => { - return /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(template.inputExampleUrl || ``); - }, [template.inputExampleUrl]); - const handleClick = () => { - if (!isDragging) { - onClick(template); - } - }; - - // 获取容器信息 - const getContainerInfo = () => { - return new Promise(resolve => { - const element = document.getElementById(containerId); - if (element) { - const rect = element.getBoundingClientRect(); - setContainerInfo(rect); - resolve(rect); - } - }); - }; - - // 处理触摸开始 - const handleTouchStart = async (e: any) => { - e.stopPropagation(); - setIsDragging(true); - // 获取容器信息用于后续计算 - await getContainerInfo(); - }; - - // 处理触摸移动 - 优化：添加节流，减少计算频率 - const handleTouchMove = (e: any) => { - if (!isDragging || !containerInfo) return; - e.stopPropagation(); - - const touch = e.touches[0]; - if (!touch) return; - - // 使用requestAnimationFrame节流，提升性能 - requestAnimationFrame(() => { - // 计算触摸点相对于容器的位置 - const touchX = touch.clientX - containerInfo.left; - const percentage = Math.max(10, Math.min(90, (touchX / containerInfo.width) * 100)); - - setSplitPosition(percentage); - }); - }; - - // 处理触摸结束 - const handleTouchEnd = (e: any) => { - e.stopPropagation(); - setTimeout(() => setIsDragging(false), 100); // 延迟重置，避免触发点击 + onClick(template); }; return (
- {/* 根据output类型显示不同的内容 */} {isOutputVideo ? ( - // 当output是视频时，只显示单个视频
poster -
) : (
-
- {/* 效果图层 - 完整图片，通过遮罩显示右半部分 */} +
output
- - {/* 模板名称悬浮 - 图片底部 */} - {/*
- ✨{template.name} -
*/}
- // 原有的图片对比逻辑 - //
- //
- // {/* 原图层 - 完整图片/视频 */} - //
- // {isInputVideo ? ( - //
- - // {/* 效果图层 - 完整图片，通过遮罩显示右半部分 */} - //
- // output - //
- - // {/* 可拖拽的分割线 */} - //
- //
- // ⟷ - //
- //
- - // {/* 模板名称悬浮 - 图片底部 */} - //
- // ✨{template.name} - //
- //
- //
)}
); diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index f3133b0..0809b87 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -17,7 +17,6 @@ export default function Home() { const dispatch = useAppDispatch(); const templates = useAppSelector(selectTemplates); const serverSdk = useServerSdk(); - const [refreshing, setRefreshing] = useState(false); const loadTemplates = async () => { try { @@ -30,19 +29,6 @@ export default function Home() { } }; - // 下拉刷新处理 - const handleRefresh = async () => { - setRefreshing(true); - try { - await loadTemplates(); - alert(t('home.refreshSuccess')); - } catch (error) { - console.error(t('home.refreshFailed'), error); - } finally { - setRefreshing(false); - } - }; - useEffect(() => { // 需要先检查是否有模板配置文件 loadTemplates(); diff --git a/src/pages/result/components/SuccessComponent.tsx b/src/pages/result/components/SuccessComponent.tsx index 899cfa9..8cc1acc 100644 --- a/src/pages/result/components/SuccessComponent.tsx +++ b/src/pages/result/components/SuccessComponent.tsx @@ -29,7 +29,16 @@ const SuccessComponent: React.FC = ({ task }) => {
{task?.outputUrl ? ( task.outputUrl.includes('.mp4') ? ( -