refactor: clean up

src/components/md-deck/PltPreview.tsx

@@ -1,29 +1,12 @@
 import { createSignal, For, Show, createMemo } from 'solid-js';
 import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
 import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
-import { pts2plotter } from '../../plotcutter/plotter';
+import type { CardPath } from '../../plotcutter/types';
-import type { CardPath, CardShape } from '../../plotcutter/types';
+import { calculateCenter, contourToSvgPath } from '../../plotcutter/contour';
-import {
-  getCardShapePoints,
-  calculateCenter,
-  contourToSvgPath
-} from '../../plotcutter/contour';
 
 export interface PltPreviewProps {
   /** PLT 文件内容 */
   pltCode: string;
-  /** 卡片形状（用于生成刀路） */
-  shape: CardShape;
-  /** 卡片宽度 (mm) */
-  cardWidth: number;
-  /** 卡片高度 (mm) */
-  cardHeight: number;
-  /** 出血 (mm) */
-  bleed: number;
-  /** 圆角半径 (mm) */
-  cornerRadius: number;
-  /** 打印方向 */
-  orientation: 'portrait' | 'landscape';
   /** 关闭回调 */
   onClose: () => void;
 }
@@ -31,9 +14,11 @@ export interface PltPreviewProps {
 /**
  * 从 PLT 代码解析并生成卡片路径数据
  */
-function parsePltToCardPaths(pltCode: string, a4Height: number): {
+function parsePltToCardPaths(pltCode: string): {
   cutPaths: [number, number][][];
   cardPaths: CardPath[];
+  width: number;
+  height: number;
 } {
   const parsed = parsePlt(pltCode);
   const cutPaths = extractCutPaths(parsed, 5); // 5mm 阈值
@@ -57,151 +42,66 @@ function parsePltToCardPaths(pltCode: string, a4Height: number): {
     };
   });
 
-  return { cutPaths, cardPaths };
+  return {
-}
+    cutPaths,
-
+    cardPaths,
-/**
+    width: parsed.width || 0,
- * 生成单页满排时的 PLT 代码（用于预览对比）
+    height: parsed.height || 0
- */
+  };
-function generateSinglePagePlt(
-  shape: CardShape,
-  cardWidth: number,
-  cardHeight: number,
-  bleed: number,
-  cornerRadius: number,
-  orientation: 'portrait' | 'landscape'
-): string {
-  const a4Width = orientation === 'landscape' ? 297 : 210;
-  const a4Height = orientation === 'landscape' ? 210 : 297;
-  const printMargin = 5;
-
-  const usableWidth = a4Width - printMargin * 2;
-  const usableHeight = a4Height - printMargin * 2;
-  const cardsPerRow = Math.floor(usableWidth / cardWidth);
-  const rowsPerPage = Math.floor(usableHeight / cardHeight);
-  const cardsPerPage = cardsPerRow * rowsPerPage;
-
-  const maxGridWidth = cardsPerRow * cardWidth;
-  const maxGridHeight = rowsPerPage * cardHeight;
-  const offsetX = (a4Width - maxGridWidth) / 2;
-  const offsetY = (a4Height - maxGridHeight) / 2;
-
-  const cutWidth = cardWidth - bleed * 2;
-  const cutHeight = cardHeight - bleed * 2;
-
-  const allPaths: [number, number][][] = [];
-
-  for (let i = 0; i < cardsPerPage; i++) {
-    const row = Math.floor(i / cardsPerRow);
-    const col = i % cardsPerRow;
-    const x = offsetX + col * cardWidth;
-    const y = offsetY + row * cardHeight;
-
-    const shapePoints = getCardShapePoints(shape, cutWidth, cutHeight, cornerRadius);
-    const pagePoints = shapePoints.map(([px, py]) => [
-      x + bleed + px,
-      a4Height - (y + bleed + py)
-    ] as [number, number]);
-
-    allPaths.push(pagePoints);
-  }
-
-  if (allPaths.length === 0) return '';
-
-  const startPoint: [number, number] = [0, a4Height];
-  const endPoint: [number, number] = [0, a4Height];
-  return pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint);
 }
 
 /**
  * PLT 预览组件 - 基于 PLT 文本解析显示切割路径预览
+ * 
+ * 所有显示参数（尺寸、路径等）都从 PLT 文本解析获取。
  */
 export function PltPreview(props: PltPreviewProps) {
-  const a4Width = props.orientation === 'landscape' ? 297 : 210;
-  const a4Height = props.orientation === 'landscape' ? 210 : 297;
-
-  // 使用传入的圆角值，但也允许用户修改
-  const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
-
   // 解析传入的 PLT 代码
   const parsedData = createMemo(() => {
     if (!props.pltCode) {
-      return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[] };
+      return { cutPaths: [] as [number, number][][], cardPaths: [] as CardPath[], width: 0, height: 0 };
     }
-    return parsePltToCardPaths(props.pltCode, a4Height);
+    return parsePltToCardPaths(props.pltCode);
   });
 
   // 生成空走路径
   const travelPathD = createMemo(() => {
     const cardPaths = parsedData().cardPaths;
+    const height = parsedData().height;
     if (cardPaths.length === 0) return '';
-    const travelPaths = generateTravelPaths(cardPaths, a4Height);
+    const travelPaths = generateTravelPaths(cardPaths, height);
     return travelPathsToSvg(travelPaths);
   });
 
-  // 生成单页满排时的 PLT 代码（用于对比）
-  const singlePagePltCode = createMemo(() => {
-    return generateSinglePagePlt(
-      props.shape,
-      props.cardWidth,
-      props.cardHeight,
-      props.bleed,
-      cornerRadius(),
-      props.orientation
-    );
-  });
-
-  // 生成当前 PLT 的 HPGL 代码（重新生成，确保圆角更新）
-  const currentPltCode = createMemo(() => {
-    const cardPaths = parsedData().cardPaths;
-    if (cardPaths.length === 0) return '';
-    const allPaths = cardPaths.map(p => p.points);
-    const startPoint: [number, number] = [0, a4Height];
-    const endPoint: [number, number] = [0, a4Height];
-    return pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint);
-  });
-
   const handleDownload = () => {
-    if (!currentPltCode()) {
+    if (!props.pltCode) {
       alert('没有可导出的卡片');
       return;
     }
 
-    const blob = new Blob([currentPltCode()], { 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');
     link.href = url;
-    link.download = `deck-export-${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);
     URL.revokeObjectURL(url);
   };
 
-  const handleCornerRadiusChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    setCornerRadius(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-2">
-            <label class="text-sm text-gray-600">圆角 (mm):</label>
-            <input
-              type="number"
-              min="0"
-              max="10"
-              step="0.5"
-              value={cornerRadius()}
-              onInput={handleCornerRadiusChange}
-              class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
-            />
-          </div>
           <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
+              </span>
+            </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"
@@ -220,84 +120,93 @@ export function PltPreview(props: PltPreviewProps) {
         </div>
 
         {/* 预览区域 */}
-        <div class="flex flex-col items-center gap-8 mt-20">
+        <Show
-          <svg
+          when={parsedData().width > 0 && parsedData().height > 0}
-            class="bg-white shadow-xl"
+          fallback={
-            viewBox={`0 0 ${a4Width} ${a4Height}`}
+            <div class="flex items-center justify-center h-screen text-gray-500">
-            style={{
+              无法解析 PLT 文件尺寸
-              width: `${a4Width}mm`,
+            </div>
-              height: `${a4Height}mm`
+          }
-            }}
+        >
-            xmlns="http://www.w3.org/2000/svg"
+          <div class="flex flex-col items-center gap-8 mt-20">
-          >
+            <svg
-            {/* A4 边框 */}
+              class="bg-white shadow-xl"
-            <rect
+              viewBox={`0 0 ${parsedData().width} ${parsedData().height}`}
-              x="0"
+              style={{
-              y="0"
+                width: `${Math.min(parsedData().width, 800)}px`,
-              width={a4Width}
+                height: `${(parsedData().height / parsedData().width) * Math.min(parsedData().width, 800)}px`
-              height={a4Height}
-              fill="none"
-              stroke="#ccc"
-              stroke-width="0.5"
-            />
-
-            {/* 空走路径（虚线） */}
-            <Show when={travelPathD()}>
-              <path
-                d={travelPathD()}
-                fill="none"
-                stroke="#999"
-                stroke-width="0.2"
-                stroke-dasharray="2 2"
-              />
-            </Show>
-
-            {/* 切割路径 */}
-            <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>
+              xmlns="http://www.w3.org/2000/svg"
-          </svg>
+            >
-        </div>
+              {/* 边框 */}
+              <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="#999"
+                  stroke-width="0.2"
+                  stroke-dasharray="2 2"
+                />
+              </Show>
+
+              {/* 切割路径 */}
+              <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">

src/components/md-deck/PrintPreview.tsx

@@ -22,7 +22,7 @@ export function PrintPreview(props: PrintPreviewProps) {
   const { store } = props;
   const { getA4Size, pages, cropMarks } = usePageLayout(store);
   const { exportToPDF } = usePDFExport(store, props.onClose);
-  const { generatePltData, downloadPltFile } = usePlotterExport(store);
+  const { generatePltData } = usePlotterExport(store);
 
   const [showPltPreview, setShowPltPreview] = createSignal(false);
   const [pltCode, setPltCode] = createSignal('');
@@ -60,7 +60,7 @@ export function PrintPreview(props: PrintPreviewProps) {
   };
 
   return (
-    <Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} cardWidth={store.state.dimensions?.cardWidth || 56} cardHeight={store.state.dimensions?.cardHeight || 88} shape={store.state.shape} bleed={store.state.bleed || 1} cornerRadius={store.state.cornerRadius ?? 3} orientation={store.state.printOrientation || 'landscape'} onClose={handleClosePltPreview} />}>
+    <Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />}>
       <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
         <div class="min-h-screen py-20 px-4">
           <PrintPreviewHeader