refactor: corner radius

src/components/md-deck/PltPreview.tsx

@@ -9,6 +9,7 @@ export interface PltPreviewProps {
   cardHeight: number;
   shape: CardShape;
   bleed: number;
+  cornerRadius: number;
   onClose: () => void;
 }
 
@@ -19,6 +20,72 @@ export interface CardPath {
   centerX: number;
   centerY: number;
   pathD: string;
+  startPoint: [number, number];
+  endPoint: [number, number];
+}
+
+/**
+ * 生成带圆角的矩形路径点
+ * @param width 矩形宽度
+ * @param height 矩形高度
+ * @param cornerRadius 圆角半径（mm）
+ * @param segmentsPerCorner 每个圆角的分段数
+ */
+function getRoundedRectPoints(
+  width: number,
+  height: number,
+  cornerRadius: number,
+  segmentsPerCorner: number = 4
+): [number, number][] {
+  const points: [number, number][] = [];
+  const r = Math.min(cornerRadius, width / 2, height / 2);
+  
+  if (r <= 0) {
+    // 无圆角，返回普通矩形
+    points.push([0, 0]);
+    points.push([width, 0]);
+    points.push([width, height]);
+    points.push([0, height]);
+    return points;
+  }
+  
+  // 左上角圆角（从顶部开始，顺时针）
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner);
+    points.push([
+      r + r * Math.cos(angle - Math.PI / 2),
+      r + r * Math.sin(angle - Math.PI / 2)
+    ]);
+  }
+  
+  // 右上角圆角
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner);
+    points.push([
+      width - r + r * Math.cos(angle),
+      r + r * Math.sin(angle)
+    ]);
+  }
+  
+  // 右下角圆角
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI / 2;
+    points.push([
+      width - r + r * Math.cos(angle),
+      height - r + r * Math.sin(angle)
+    ]);
+  }
+  
+  // 左下角圆角
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI;
+    points.push([
+      r + r * Math.cos(angle),
+      height - r + r * Math.sin(angle)
+    ]);
+  }
+  
+  return points;
 }
 
 /**
@@ -27,8 +94,13 @@ export interface CardPath {
 function getCardShapePoints(
   shape: CardShape,
   width: number,
-  height: number
+  height: number,
+  cornerRadius: number = 0
 ): [number, number][] {
+  if (shape === 'rectangle' && cornerRadius > 0) {
+    return getRoundedRectPoints(width, height, cornerRadius);
+  }
+  
   const points: [number, number][] = [];
 
   switch (shape) {
@@ -115,6 +187,59 @@ function getPointOnPath(points: [number, number][], progress: number): [number,
   ];
 }
 
+/**
+ * 将路径点转换为 SVG path 命令
+ */
+function pointsToSvgPath(points: [number, number][], closed = true): string {
+  if (points.length === 0) return '';
+
+  const [startX, startY] = points[0];
+  let d = `M ${startX} ${startY}`;
+
+  for (let i = 1; i < points.length; i++) {
+    const [x, y] = points[i];
+    d += ` L ${x} ${y}`;
+  }
+
+  if (closed) {
+    d += ' Z';
+  }
+
+  return d;
+}
+
+/**
+ * 生成空走路径（抬刀移动路径）
+ */
+function generateTravelPaths(
+  cardPaths: CardPath[],
+  a4Height: number
+): [number, number][][] {
+  const travelPaths: [number, number][][] = [];
+  
+  // 起点：左上角 (0, a4Height) - 注意 SVG 坐标 Y 向下，plotter 坐标 Y 向上
+  const startPoint: [number, number] = [0, a4Height];
+  
+  if (cardPaths.length === 0) {
+    return travelPaths;
+  }
+  
+  // 从起点到第一张卡的起点
+  travelPaths.push([startPoint, cardPaths[0].startPoint]);
+  
+  // 卡片之间的移动
+  for (let i = 0; i < cardPaths.length - 1; i++) {
+    const currentEnd = cardPaths[i].endPoint;
+    const nextStart = cardPaths[i + 1].startPoint;
+    travelPaths.push([currentEnd, nextStart]);
+  }
+  
+  // 从最后一张卡返回起点
+  travelPaths.push([cardPaths[cardPaths.length - 1].endPoint, startPoint]);
+  
+  return travelPaths;
+}
+
 /**
  * PLT 预览组件 - 显示切割路径预览
  */
@@ -122,6 +247,9 @@ export function PltPreview(props: PltPreviewProps) {
   const a4Width = 297; // 横向 A4
   const a4Height = 210;
 
+  // 使用传入的圆角值，但也允许用户修改
+  const [cornerRadius, setCornerRadius] = createSignal(props.cornerRadius);
+
   // 收集所有卡片路径
   const cardPaths: CardPath[] = [];
   let pathIndex = 0;
@@ -134,7 +262,7 @@ export function PltPreview(props: PltPreviewProps) {
     for (const card of page.cards) {
       if (card.side !== 'front') continue;
 
-      const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight);
+      const shapePoints = getCardShapePoints(props.shape, cutWidth, cutHeight, cornerRadius());
       const pagePoints = shapePoints.map(([x, y]) => [
         card.x + props.bleed + x,
         a4Height - (card.y + props.bleed + y)
@@ -143,17 +271,27 @@ export function PltPreview(props: PltPreviewProps) {
       const center = calculateCenter(pagePoints);
       const pathD = pointsToSvgPath(pagePoints);
 
+      // 起点和终点（对于闭合路径是同一点）
+      const startPoint = pagePoints[0];
+      const endPoint = pagePoints[pagePoints.length - 1];
+
       cardPaths.push({
         pageIndex: page.pageIndex,
         cardIndex: pathIndex++,
         points: pagePoints,
         centerX: center.x,
         centerY: center.y,
-        pathD
+        pathD,
+        startPoint,
+        endPoint
       });
     }
   }
 
+  // 生成空走路径
+  const travelPaths = generateTravelPaths(cardPaths, a4Height);
+  const travelPathD = travelPaths.map(path => pointsToSvgPath(path, false)).join(' ');
+
   // 生成 HPGL 代码用于下载
   const allPaths = cardPaths.map(p => p.points);
   const plotterCode = allPaths.length > 0 ? pts2plotter(allPaths, a4Width, a4Height, 1) : '';
@@ -175,6 +313,11 @@ export function PltPreview(props: PltPreviewProps) {
     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">
@@ -182,6 +325,18 @@ export function PltPreview(props: PltPreviewProps) {
         <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">
             <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"
@@ -237,10 +392,20 @@ export function PltPreview(props: PltPreviewProps) {
                     stroke-width="0.2"
                   />
 
+                  {/* 空走路径（虚线） */}
+                  <Show when={travelPathD}>
+                    <path
+                      d={travelPathD}
+                      fill="none"
+                      stroke="#999"
+                      stroke-width="0.2"
+                      stroke-dasharray="2 2"
+                    />
+                  </Show>
+
                   {/* 切割路径 */}
                   <For each={pageCardPaths}>
                     {(path) => {
-
                       return (
                         <g>
                           {/* 切割路径 */}
@@ -287,28 +452,23 @@ export function PltPreview(props: PltPreviewProps) {
             }}
           </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 #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>
   );
 }
-
-/**
- * 将路径点转换为 SVG path 命令
- */
-function pointsToSvgPath(points: [number, number][], closed = true): string {
-  if (points.length === 0) return '';
-
-  const [startX, startY] = points[0];
-  let d = `M ${startX} ${startY}`;
-
-  for (let i = 1; i < points.length; i++) {
-    const [x, y] = points[i];
-    d += ` L ${x} ${y}`;
-  }
-
-  if (closed) {
-    d += ' Z';
-  }
-
-  return d;
-}

src/components/md-deck/PrintPreview.tsx

@@ -53,7 +53,7 @@ export function PrintPreview(props: PrintPreviewProps) {
   };
 
   return (
-    <Show when={!showPltPreview()} fallback={<PltPreview pages={pages()} cardWidth={store.state.dimensions?.cardWidth || 56} cardHeight={store.state.dimensions?.cardHeight || 88} shape={store.state.shape} bleed={store.state.bleed || 1} onClose={handleClosePltPreview} />}>
+    <Show when={!showPltPreview()} fallback={<PltPreview pages={pages()} 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} onClose={handleClosePltPreview} />}>
       <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
         <div class="min-h-screen py-20 px-4">
           <PrintPreviewHeader

src/components/md-deck/hooks/deckStore.ts

@@ -13,7 +13,8 @@ export const DECK_DEFAULTS = {
   GRID_W: 5,
   GRID_H: 8,
   BLEED: 1,
-  PADDING: 2
+  PADDING: 2,
+  CORNER_RADIUS: 3
 } as const;
 
 export interface DeckState {
@@ -24,6 +25,7 @@ export interface DeckState {
   gridH: number;
   bleed: number;
   padding: number;
+  cornerRadius: number;
   shape: CardShape;
   fixed: boolean;
   src: string;
@@ -76,6 +78,7 @@ export interface DeckActions {
   setGridH: (grid: number) => void;
   setBleed: (bleed: number) => void;
   setPadding: (padding: number) => void;
+  setCornerRadius: (cornerRadius: number) => void;
   setShape: (shape: CardShape) => void;
 
   // 数据设置
@@ -146,6 +149,7 @@ export function createDeckStore(
     gridH: DECK_DEFAULTS.GRID_H,
     bleed: DECK_DEFAULTS.BLEED,
     padding: DECK_DEFAULTS.PADDING,
+    cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
     shape: 'rectangle',
     fixed: false,
     src: initialSrc,
@@ -209,6 +213,9 @@ export function createDeckStore(
     setState({ padding });
     updateDimensions();
   };
+  const setCornerRadius = (cornerRadius: number) => {
+    setState({ cornerRadius });
+  };
   const setShape = (shape: CardShape) => {
     setState({ shape });
   };
@@ -377,6 +384,7 @@ export function createDeckStore(
     setGridH,
     setBleed,
     setPadding,
+    setCornerRadius,
     setShape,
     setCards,
     setActiveTab,

src/components/md-deck/hooks/usePlotterExport.ts

@@ -7,10 +7,13 @@ export interface CardPathData {
   points: [number, number][];
   centerX: number;
   centerY: number;
+  startPoint: [number, number];
+  endPoint: [number, number];
 }
 
 export interface PltExportData {
   paths: CardPathData[];
+  travelPaths: [number, number][][];
   plotterCode: string;
   a4Width: number;
   a4Height: number;
@@ -22,17 +25,78 @@ export interface UsePlotterExportReturn {
   exportToPlt: (pages: PageData[]) => void;
 }
 
+/**
+ * 生成带圆角的矩形路径点
+ */
+function getRoundedRectPoints(
+  width: number,
+  height: number,
+  cornerRadius: number,
+  segmentsPerCorner: number = 4
+): [number, number][] {
+  const points: [number, number][] = [];
+  const r = Math.min(cornerRadius, width / 2, height / 2);
+  
+  if (r <= 0) {
+    points.push([0, 0]);
+    points.push([width, 0]);
+    points.push([width, height]);
+    points.push([0, height]);
+    return points;
+  }
+  
+  // 左上角圆角（从顶部开始，顺时针）
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner) - Math.PI / 2;
+    points.push([
+      r + r * Math.cos(angle),
+      r + r * Math.sin(angle)
+    ]);
+  }
+  
+  // 右上角圆角
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner);
+    points.push([
+      width - r + r * Math.cos(angle),
+      r + r * Math.sin(angle)
+    ]);
+  }
+  
+  // 右下角圆角
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI / 2;
+    points.push([
+      width - r + r * Math.cos(angle),
+      height - r + r * Math.sin(angle)
+    ]);
+  }
+  
+  // 左下角圆角
+  for (let i = 0; i < segmentsPerCorner; i++) {
+    const angle = (Math.PI / 2) * (i / segmentsPerCorner) + Math.PI;
+    points.push([
+      r + r * Math.cos(angle),
+      height - r + r * Math.sin(angle)
+    ]);
+  }
+  
+  return points;
+}
+
 /**
  * 根据形状生成卡片轮廓点（单位：mm，相对于卡片左下角）
- * @param shape 卡片形状
- * @param width 卡片宽度（切割尺寸，不含出血）
- * @param height 卡片高度（切割尺寸，不含出血）
  */
 function getCardShapePoints(
   shape: CardShape,
   width: number,
-  height: number
+  height: number,
+  cornerRadius: number = 0
 ): [number, number][] {
+  if (shape === 'rectangle' && cornerRadius > 0) {
+    return getRoundedRectPoints(width, height, cornerRadius);
+  }
+  
   const points: [number, number][] = [];
 
   switch (shape) {
@@ -95,11 +159,45 @@ function calculateCenter(points: [number, number][]): { x: number; y: number } {
   };
 }
 
+/**
+ * 生成空走路径（抬刀移动路径）
+ * 从左上角出发，连接所有卡片的起点/终点，最后返回左上角
+ */
+function generateTravelPaths(
+  cardPaths: CardPathData[],
+  a4Height: number
+): [number, number][][] {
+  const travelPaths: [number, number][][] = [];
+  
+  // 起点：左上角 (0, a4Height) - 注意 SVG 坐标 Y 向下，plotter 坐标 Y 向上
+  const startPoint: [number, number] = [0, a4Height];
+  
+  if (cardPaths.length === 0) {
+    return travelPaths;
+  }
+  
+  // 从起点到第一张卡的起点
+  travelPaths.push([startPoint, cardPaths[0].startPoint]);
+  
+  // 卡片之间的移动
+  for (let i = 0; i < cardPaths.length - 1; i++) {
+    const currentEnd = cardPaths[i].endPoint;
+    const nextStart = cardPaths[i + 1].startPoint;
+    travelPaths.push([currentEnd, nextStart]);
+  }
+  
+  // 从最后一张卡返回起点
+  travelPaths.push([cardPaths[cardPaths.length - 1].endPoint, startPoint]);
+  
+  return travelPaths;
+}
+
 /**
  * PLT 导出 hook - 生成 HPGL 格式文件并下载
  */
 export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
   const bleed = () => store.state.bleed || 1;
+  const cornerRadius = () => store.state.cornerRadius ?? 3;
   const cardWidth = () => store.state.dimensions?.cardWidth || 56;
   const cardHeight = () => store.state.dimensions?.cardHeight || 88;
   const shape = () => store.state.shape;
@@ -112,6 +210,7 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
   const generatePltData = (pages: PageData[]): PltExportData | null => {
     const paths: CardPathData[] = [];
     const currentBleed = bleed();
+    const currentCornerRadius = cornerRadius();
 
     // 计算切割尺寸（排版尺寸减去出血）
     const cutWidth = cardWidth() - currentBleed * 2;
@@ -122,7 +221,7 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
         if (card.side !== 'front') continue;
 
         // 获取卡片形状点（相对于卡片原点，使用切割尺寸）
-        const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight);
+        const shapePoints = getCardShapePoints(shape(), cutWidth, cutHeight, currentCornerRadius);
 
         // 转换点到页面坐标：
         // - X 轴：卡片位置 + 出血偏移
@@ -133,10 +232,15 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
         ] as [number, number]);
 
         const center = calculateCenter(pagePoints);
+        const startPoint = pagePoints[0];
+        const endPoint = pagePoints[pagePoints.length - 1];
+        
         paths.push({
           points: pagePoints,
           centerX: center.x,
-          centerY: center.y
+          centerY: center.y,
+          startPoint,
+          endPoint
         });
       }
     }
@@ -145,11 +249,18 @@ export function usePlotterExport(store: DeckStore): UsePlotterExportReturn {
       return null;
     }
 
+    // 生成空走路径
+    const travelPaths = generateTravelPaths(paths, a4Height);
+    
+    // 生成 HPGL 代码（包含空走路径，从左上角出发并返回）
     const allPaths = paths.map(p => p.points);
-    const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1);
+    const startPoint: [number, number] = [0, a4Height]; // 左上角
+    const endPoint: [number, number] = [0, a4Height];   // 返回左上角
+    const plotterCode = pts2plotter(allPaths, a4Width, a4Height, 1, startPoint, endPoint);
 
     return {
       paths,
+      travelPaths,
       plotterCode,
       a4Width,
       a4Height

src/plotcutter/plotter.ts

@@ -1,9 +1,28 @@
 import { normalize } from "./normalize";
 
-export function pts2plotter(pts: [number, number][][], width: number, height: number, px2mm = 0.1){
+/**
+ * 生成 HPGL 代码，支持指定起点和终点
+ * @param pts 路径点数组
+ * @param width 页面宽度（mm）
+ * @param height 页面高度（mm）
+ * @param px2mm 像素到毫米的转换系数
+ * @param startPoint 起点坐标（mm），默认为左上角 [0, height]
+ * @param endPoint 终点坐标（mm），默认为左上角 [0, height]
+ */
+export function pts2plotter(
+  pts: [number, number][][],
+  width: number,
+  height: number,
+  px2mm = 0.1,
+  startPoint?: [number, number],
+  endPoint?: [number, number]
+) {
+  const start = startPoint ?? [0, height];
+  const end = endPoint ?? [0, height];
+  
   let str = init(width * px2mm, height * px2mm);
 
-    // sort paths by x(long) then by y(short)
+  // 按 X 轴然后 Y 轴排序路径
   const sorted = pts.slice();
   sorted.sort(function (a, b) {
     const [ax, ay] = topleft(a);
@@ -13,19 +32,52 @@ export function pts2plotter(pts: [number, number][][], width: number, height: nu
     return ay - by;
   });
 
-    let lead = true;
+  // 从起点到第一个路径
-    for(const path of sorted){
+  if (sorted.length > 0) {
-        for (const cmd of poly(normalize(path), height, px2mm, lead)) {
+    const firstPath = sorted[0];
-            str += cmd;
+    str += ` U${plu(start[0] * px2mm)},${plu((height - start[1]) * px2mm)}`;
-        }
+    str += ` D${plu(firstPath[0][0] * px2mm)},${plu((height - firstPath[0][1]) * px2mm)}`;
-        lead = false;
+    
+    // 切割第一个路径
+    for (let i = 1; i < firstPath.length; i++) {
+      const pt = firstPath[i];
+      str += ` D${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
     }
     
-    str += end();
+    // 路径之间移动
+    for (let i = 1; i < sorted.length; i++) {
+      const prevPath = sorted[i - 1];
+      const currPath = sorted[i];
+      
+      // 抬刀移动到下一个路径起点
+      str += ` U${plu(currPath[0][0] * px2mm)},${plu((height - currPath[0][1]) * px2mm)}`;
+      // 下刀切割
+      str += ` D${plu(currPath[0][0] * px2mm)},${plu((height - currPath[0][1]) * px2mm)}`;
+      
+      for (let j = 1; j < currPath.length; j++) {
+        const pt = currPath[j];
+        str += ` D${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
+      }
+    }
+  }
+
+  // 返回终点
+  str += ` U${plu(end[0] * px2mm)},${plu((height - end[1]) * px2mm)}`;
+  str += endCommand();
 
   return str;
 }
 
+// 兼容旧版本（不使用新参数）
+export function pts2plotterLegacy(
+  pts: [number, number][][],
+  width: number,
+  height: number,
+  px2mm = 0.1
+) {
+  return pts2plotter(pts, width, height, px2mm);
+}
+
 function topleft(pts: [number, number][]) {
   let minx = NaN;
   let miny = NaN;
@@ -37,35 +89,11 @@ function topleft(pts: [number, number][]){
 }
 
 function init(w: number, h: number) {
-    return ` IN TB26,${plu(w)},${plu(h)} CT1 U0,0 D0,0 D40,0`;
+  return ` IN TB26,${plu(w)},${plu(h)} CT1`;
 }
 
-function end() {
+function endCommand() {
-    return ' U0,0 @ @';
+  return ' @ @';
-}
-
-function* poly(pts: [number, number][], height: number, px2mm: number, lead = false){
-    function cutpt(down: boolean, pt: [number, number]) {
-        return ` ${down ? 'D' : 'U'}${plu(pt[0] * px2mm)},${plu((height - pt[1]) * px2mm)}`;
-    }
-
-    if (lead) {
-        yield cutpt(false, [0, 0]);
-        yield cutpt(true, [0, 1]);
-    }
-
-    yield cutpt(false, pts[0]);
-    for(const pt of pts){
-        yield cutpt(true, pt);
-    }
-}
-
-function sqrlen(x: number, y: number) {
-    return x * x + y * y;
-}
-
-function lerp(s: [number, number], e: [number, number], i: number) {
-    return [s[0] + (e[0] - s[0]) * i, s[1] + (e[1] - s[1]) * i] as typeof s;
 }
 
 function plu(n: number) {