style: reformat PltPreview and fix SVG rendering

- Reformat code to use double quotes and consistent indentation
- Improve SVG path styling for travel paths and borders
- Fix layout nesting and indentation in the component template
- Add missing circle element to card index labels

src/components/md-deck/PltPreview.tsx

@@ -1,9 +1,9 @@
-import { createSignal, For, Show, createMemo } from 'solid-js';
+import { createSignal, For, Show, createMemo } from "solid-js";
-import { Portal } from 'solid-js/web';
+import { Portal } from "solid-js/web";
-import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
+import { parsePlt, extractCutPaths } from "../../plotcutter/parser";
-import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
+import { generateTravelPaths, travelPathsToSvg } from "../../plotcutter/layout";
-import type { CardPath } from '../../plotcutter/types';
+import type { CardPath } from "../../plotcutter/types";
-import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour';
+import { calculateCenter, contourToSvgPath } from "../../plotcutter/contour";
 
 export interface PltPreviewProps {
   /** PLT 文件内容 */
@@ -39,7 +39,7 @@ function parsePltToCardPaths(pltCode: string): {
       centerY: center.y,
       pathD,
       startPoint,
-      endPoint
+      endPoint,
     };
   });
 
@@ -47,7 +47,7 @@ function parsePltToCardPaths(pltCode: string): {
     cutPaths,
     cardPaths,
     width: parsed.width || 0,
-    height: parsed.height || 0
+    height: parsed.height || 0,
   };
 }
 
@@ -60,7 +60,12 @@ export function PltPreview(props: PltPreviewProps) {
   // 解析传入的 PLT 代码
   const parsedData = createMemo(() => {
     if (!props.pltCode) {
-      return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[], width: 0, height: 0 };
+      return {
+        cutPaths: [] as [number, number][][],
+        cardPaths: [] as CardPath[],
+        width: 0,
+        height: 0,
+      };
     }
     return parsePltToCardPaths(props.pltCode);
   });
@@ -69,22 +74,22 @@ export function PltPreview(props: PltPreviewProps) {
   const travelPathD = createMemo(() => {
     const cardPaths = parsedData().cardPaths;
     const height = parsedData().height;
-    if (cardPaths.length === 0) return '';
+    if (cardPaths.length === 0) return "";
     const travelPaths = generateTravelPaths(cardPaths, height);
     return travelPathsToSvg(travelPaths);
   });
 
   const handleDownload = () => {
     if (!props.pltCode) {
-      alert('没有可导出的卡片');
+      alert("没有可导出的卡片");
       return;
     }
 
-    const blob = new Blob([props.pltCode], { type: 'application/vnd.hp-HPGL' });
+    const blob = new Blob([props.pltCode], { type: "application/vnd.hp-HPGL" });
     const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
+    const link = document.createElement("a");
     link.href = url;
-    link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.plt`;
+    link.download = `deck-plt-${new Date().toISOString().slice(0, 19).replace(/:/g, "-")}.plt`;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -101,7 +106,8 @@ export function PltPreview(props: PltPreviewProps) {
             <div class="flex items-center gap-2 flex-1">
               <Show when={parsedData().width > 0}>
                 <span class="text-sm text-gray-500">
-                尺寸：{parsedData().width.toFixed(1)}mm × {parsedData().height.toFixed(1)}mm
+                  尺寸：{parsedData().width.toFixed(1)}mm ×{" "}
+                  {parsedData().height.toFixed(1)}mm
                 </span>
               </Show>
               <button
@@ -136,7 +142,7 @@ export function PltPreview(props: PltPreviewProps) {
                 viewBox={`0 0 ${parsedData().width} ${parsedData().height}`}
                 style={{
                   width: `${Math.min(parsedData().width, 800)}mm`,
-                height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`
+                  height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`,
                 }}
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -156,8 +162,9 @@ export function PltPreview(props: PltPreviewProps) {
                   <path
                     d={travelPathD()}
                     fill="none"
-                  stroke="#f884"
+                    stroke="#999"
-                  stroke-width="1"
+                    stroke-width="0.5"
+                    stroke-dasharray="2,2"
                   />
                 </Show>
 
@@ -175,16 +182,18 @@ export function PltPreview(props: PltPreviewProps) {
                         />
 
                         {/* 动画小球 */}
-                      <circle
+                        <circle r="0.8" fill="#ef4444">
-                        r="0.8"
+                          <animateMotion
-                        fill="#ef4444"
+                            dur="4s"
-                      >
+                            repeatCount="indefinite"
-                        <animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
+                            path={path.pathD}
-                        </animateMotion>
+                          ></animateMotion>
                         </circle>
 
                         {/* 序号标签 */}
-                      <g transform={`translate(${path.centerX}, ${path.centerY})`}>
+                        <g
+                          transform={`translate(${path.centerX}, ${path.centerY})`}
+                        >
                           <circle
                             r="2"
                             fill="white"
@@ -212,11 +221,17 @@ export function PltPreview(props: PltPreviewProps) {
           {/* 图例说明 */}
           <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 #999" }}></div>
+              <div
+                class="w-6 h-0.5"
+                style={{ "border-bottom": "2px dashed #999" }}
+              ></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 solid #3b82f6" }}></div>
+              <div
+                class="w-6 h-0.5"
+                style={{ "border-bottom": "2px solid #3b82f6" }}
+              ></div>
               <span class="text-sm text-gray-600">切割路径</span>
             </div>
             <div class="flex items-center gap-2">