refactor: pltrefactor: plt display

src/components/md-deck/PltPreview.tsx

@@ -158,29 +158,6 @@ export function PltPreview(props: PltPreviewProps) {
   const allPaths = cardPaths.map(p => p.points);
   const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
 
-  // 进度控制 (0 到 cardPaths.length)
-  const [progress, setProgress] = createSignal(0);
-
-  // 计算当前正在切割的卡片索引
-  const currentPathIndex = createMemo(() => {
-    const p = progress();
-    if (p <= 0) return -1;
-    if (p >= cardPaths.length) return cardPaths.length - 1;
-    return Math.floor(p);
-  });
-
-  // 计算当前小球位置
-  const ballPosition = createMemo(() => {
-    const p = progress();
-    if (p <= 0 || cardPaths.length === 0) return null;
-
-    const cardIndex = Math.min(Math.floor(p), cardPaths.length - 1);
-    const cardProgress = p - cardIndex;
-    const cardPath = cardPaths[cardIndex];
-
-    return getPointOnPath(cardPath.points, cardProgress);
-  });
-
   const handleDownload = () => {
     if (!plotterCode) {
       alert('没有可导出的卡片');
@@ -198,32 +175,12 @@ export function PltPreview(props: PltPreviewProps) {
     URL.revokeObjectURL(url);
   };
 
-  const handleProgressChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    setProgress(Number(target.value));
-  };
-
   return (
     <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
       <div class="min-h-screen py-20 px-4">
         {/* 头部控制栏 */}
         <div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50">
           <h2 class="text-base font-bold m-0">PLT 切割预览</h2>
-          <div class="flex items-center gap-4 flex-1 max-w-md">
-            <span class="text-sm text-gray-600 whitespace-nowrap">切割进度</span>
-            <input
-              type="range"
-              min="0"
-              max={cardPaths.length}
-              step="0.01"
-              value={progress()}
-              onInput={handleProgressChange}
-              class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
-            />
-            <span class="text-sm text-gray-600 whitespace-nowrap w-20 text-right">
-              {Math.floor(progress())} / {cardPaths.length}
-            </span>
-          </div>
           <div class="flex items-center gap-2">
             <button
               onClick={handleDownload}
@@ -283,35 +240,39 @@ export function PltPreview(props: PltPreviewProps) {
                   {/* 切割路径 */}
                   <For each={pageCardPaths}>
                     {(path) => {
-                      const currentIndex = currentPathIndex();
-                      const isCurrentPath = currentIndex === path.cardIndex;
-                      const isCompleted = currentIndex > path.cardIndex;
-                      const displayColor = isCurrentPath ? '#ef4444' : (isCompleted ? '#10b981' : '#3b82f6');
 
                       return (
                         <g>
-                          {/* 切割路径（虚线） */}
+                          {/* 切割路径 */}
                           <path
                             d={path.pathD}
                             fill="none"
-                            stroke={displayColor}
+                            stroke="#3b82f6"
                             stroke-width="0.3"
-                            stroke-dasharray="2 1"
                           />
 
+                          {/* 动画小球 */}
+                          <circle
+                              r="0.8"
+                              fill="#ef4444"
+                          >
+                            <animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
+                            </animateMotion>
+                          </circle>
+
                           {/* 序号标签 */}
                           <g transform={`translate(${path.centerX}, ${path.centerY})`}>
                             <circle
                               r="2"
                               fill="white"
-                              stroke={displayColor}
+                              stroke="#3b82f6"
                               stroke-width="0.1"
                             />
                             <text
                               text-anchor="middle"
                               dominant-baseline="middle"
                               font-size="1.5"
-                              fill={displayColor}
+                              fill="#3b82f6"
                               font-weight="bold"
                             >
                               {path.cardIndex + 1}
@@ -321,43 +282,11 @@ export function PltPreview(props: PltPreviewProps) {
                       );
                     }}
                   </For>
-
-                  {/* 动画小球 */}
-                  <Show when={ballPosition()}>
-                    {(pos) => (
-                      <circle
-                        cx={pos()[0]}
-                        cy={pos()[1]}
-                        r="0.8"
-                        fill="#ef4444"
-                      />
-                    )}
-                  </Show>
                 </svg>
               );
             }}
           </For>
         </div>
-
-        {/* 图例说明 */}
-        <div class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-2 flex items-center gap-4 z-50">
-          <div class="flex items-center gap-2">
-            <div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #3b82f6" }}></div>
-            <span class="text-sm text-gray-600">待切割路径</span>
-          </div>
-          <div class="flex items-center gap-2">
-            <div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #ef4444" }}></div>
-            <span class="text-sm text-gray-600">正在切割</span>
-          </div>
-          <div class="flex items-center gap-2">
-            <div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #10b981" }}></div>
-            <span class="text-sm text-gray-600">已切割</span>
-          </div>
-          <div class="flex items-center gap-2">
-            <div class="w-4 h-4 rounded-full bg-red-500"></div>
-            <span class="text-sm text-gray-600">刀头</span>
-          </div>
-        </div>
       </div>
     </div>
   );