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,20 +47,25 @@ function parsePltToCardPaths(pltCode: string): {
     cutPaths,
     cardPaths,
     width: parsed.width || 0,
-    height: parsed.height || 0
+    height: parsed.height || 0,
   };
 }
 
 /**
  * PLT 预览组件 - 基于 PLT 文本解析显示切割路径预览
- * 
+ *
  * 所有显示参数（尺寸、路径等）都从 PLT 文本解析获取。
  */
 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);
@@ -97,135 +102,145 @@ export function PltPreview(props: PltPreviewProps) {
         <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>
+            <h2 class="text-base font-bold m-0">PLT 切割预览</h2>
-          <div class="flex items-center gap-2 flex-1">
+            <div class="flex items-center gap-2 flex-1">
-            <Show when={parsedData().width > 0}>
+              <Show when={parsedData().width > 0}>
-              <span class="text-sm text-gray-500">
+                <span class="text-sm text-gray-500">
-                尺寸：{parsedData().width.toFixed(1)}mm × {parsedData().height.toFixed(1)}mm
+                  尺寸：{parsedData().width.toFixed(1)}mm ×{" "}
-              </span>
+                  {parsedData().height.toFixed(1)}mm
-            </Show>
+                </span>
-            <button
-              onClick={handleDownload}
-              class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-1"
-              disabled={parsedData().cardPaths.length === 0}
-            >
-              📥 下载 PLT
-            </button>
-
-            <button
-              onClick={props.onClose}
-              class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded text-sm font-medium cursor-pointer"
-            >
-              关闭
-            </button>
-          </div>
-        </div>
-
-        {/* 预览区域 */}
-        <Show
-          when={parsedData().width > 0 && parsedData().height > 0}
-          fallback={
-            <div class="flex items-center justify-center h-screen text-gray-500">
-              无法解析 PLT 文件尺寸
-            </div>
-          }
-        >
-          <div class="flex flex-col items-center gap-8 mt-20">
-            <svg
-              class="bg-white shadow-xl"
-              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`
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              {/* 边框 */}
-              <rect
-                x="0"
-                y="0"
-                width={parsedData().width}
-                height={parsedData().height}
-                fill="none"
-                stroke="#ccc"
-                stroke-width="0.5"
-              />
-
-              {/* 空走路径（虚线） */}
-              <Show when={travelPathD()}>
-                <path
-                  d={travelPathD()}
-                  fill="none"
-                  stroke="#f884"
-                  stroke-width="1"
-                />
               </Show>
+              <button
+                onClick={handleDownload}
+                class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-1"
+                disabled={parsedData().cardPaths.length === 0}
+              >
+                📥 下载 PLT
+              </button>
 
-              {/* 切割路径 */}
+              <button
-              <For each={parsedData().cardPaths}>
+                onClick={props.onClose}
-                {(path) => {
+                class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded text-sm font-medium cursor-pointer"
-                  return (
+              >
-                    <g>
+                关闭
-                      {/* 切割路径 */}
+              </button>
-                      <path
+            </div>
-                        d={path.pathD}
+          </div>
-                        fill="none"
-                        stroke="#3b82f6"
-                        stroke-width="0.3"
-                      />
 
-                      {/* 动画小球 */}
+          {/* 预览区域 */}
-                      <circle
+          <Show
-                        r="0.8"
+            when={parsedData().width > 0 && parsedData().height > 0}
-                        fill="#ef4444"
+            fallback={
-                      >
+              <div class="flex items-center justify-center h-screen text-gray-500">
-                        <animateMotion dur="4s" repeatCount="indefinite" path={path.pathD}>
+                无法解析 PLT 文件尺寸
-                        </animateMotion>
+              </div>
-                      </circle>
+            }
-
+          >
-                      {/* 序号标签 */}
+            <div class="flex flex-col items-center gap-8 mt-20">
-                      <g transform={`translate(${path.centerX}, ${path.centerY})`}>
+              <svg
-                        <circle
+                class="bg-white shadow-xl"
-                          r="2"
+                viewBox={`0 0 ${parsedData().width} ${parsedData().height}`}
-                          fill="white"
+                style={{
-                          stroke="#3b82f6"
+                  width: `${Math.min(parsedData().width, 800)}mm`,
-                          stroke-width="0.1"
+                  height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}mm`,
-                        />
-                        <text
-                          text-anchor="middle"
-                          dominant-baseline="middle"
-                          font-size="1.5"
-                          fill="#3b82f6"
-                          font-weight="bold"
-                        >
-                          {path.cardIndex + 1}
-                        </text>
-                      </g>
-                    </g>
-                  );
                 }}
-              </For>
+                xmlns="http://www.w3.org/2000/svg"
-            </svg>
+              >
-          </div>
+                {/* 边框 */}
-        </Show>
+                <rect
+                  x="0"
+                  y="0"
+                  width={parsedData().width}
+                  height={parsedData().height}
+                  fill="none"
+                  stroke="#ccc"
+                  stroke-width="0.5"
+                />
 
-        {/* 图例说明 */}
+                {/* 空走路径（虚线） */}
-        <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">
+                <Show when={travelPathD()}>
-          <div class="flex items-center gap-2">
+                  <path
-            <div class="w-6 h-0.5" style={{ "border-bottom": "2px dashed #999" }}></div>
+                    d={travelPathD()}
-            <span class="text-sm text-gray-600">空走路径</span>
+                    fill="none"
-          </div>
+                    stroke="#999"
-          <div class="flex items-center gap-2">
+                    stroke-width="0.5"
-            <div class="w-6 h-0.5" style={{ "border-bottom": "2px solid #3b82f6" }}></div>
+                    stroke-dasharray="2,2"
-            <span class="text-sm text-gray-600">切割路径</span>
+                  />
-          </div>
+                </Show>
-          <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>
+                <For each={parsedData().cardPaths}>
+                  {(path) => {
+                    return (
+                      <g>
+                        {/* 切割路径 */}
+                        <path
+                          d={path.pathD}
+                          fill="none"
+                          stroke="#3b82f6"
+                          stroke-width="0.3"
+                        />
+
+                        {/* 动画小球 */}
+                        <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="#3b82f6"
+                            stroke-width="0.1"
+                          />
+                          <text
+                            text-anchor="middle"
+                            dominant-baseline="middle"
+                            font-size="1.5"
+                            fill="#3b82f6"
+                            font-weight="bold"
+                          >
+                            {path.cardIndex + 1}
+                          </text>
+                        </g>
+                      </g>
+                    );
+                  }}
+                </For>
+              </svg>
+            </div>
+          </Show>
+
+          {/* 图例说明 */}
+          <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>
+              <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>
+              <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>
-    </div>
     </Portal>
   );
 }