refactor: ai's attempt

src/components/utils/csv-loader.ts

@@ -0,0 +1,29 @@
+import { parse } from 'csv-parse/browser/esm/sync';
+import type { CardData } from '../types';
+
+/**
+ * 全局缓存已加载的 CSV 内容
+ */
+const csvCache = new Map<string, CardData[]>();
+
+/**
+ * 加载 CSV 文件
+ */
+export async function loadCSV(path: string): Promise<CardData[]> {
+  if (csvCache.has(path)) {
+    return csvCache.get(path)!;
+  }
+
+  const response = await fetch(path);
+  const content = await response.text();
+  const records = parse(content, {
+    columns: true,
+    comment: '#',
+    trim: true,
+    skipEmptyLines: true
+  });
+
+  const result = records as CardData[];
+  csvCache.set(path, result);
+  return result;
+}

src/components/utils/dimensions.ts

@@ -0,0 +1,73 @@
+import type { Dimensions } from '../types';
+
+export interface DimensionOptions {
+  size: string;
+  bleed: string;
+  padding: string;
+  grid: string;
+}
+
+/**
+ * 解析卡牌尺寸和网格配置
+ */
+export function calculateDimensions(options: DimensionOptions): Dimensions {
+  const [width, height] = options.size.split('x').map(Number);
+  const [bleedW, bleedH] = options.bleed.includes('x')
+    ? options.bleed.split('x').map(Number)
+    : [Number(options.bleed), Number(options.bleed)];
+  const [padW, padH] = options.padding.includes('x')
+    ? options.padding.split('x').map(Number)
+    : [Number(options.padding), Number(options.padding)];
+
+  // 实际卡牌尺寸（含出血）
+  const cardWidth = width + bleedW * 2;
+  const cardHeight = height + bleedH * 2;
+
+  // 网格区域尺寸（减去 padding）
+  const gridAreaWidth = width - padW * 2;
+  const gridAreaHeight = height - padH * 2;
+
+  // 解析网格
+  const [gridW, gridH] = options.grid.split('x').map(Number);
+
+  // 每个网格单元的尺寸（mm）
+  const cellWidth = gridAreaWidth / gridW;
+  const cellHeight = gridAreaHeight / gridH;
+
+  // 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
+  const gridOriginX = bleedW + padW;
+  const gridOriginY = bleedH + padH;
+
+  return {
+    cardWidth,
+    cardHeight,
+    gridAreaWidth,
+    gridAreaHeight,
+    cellWidth,
+    cellHeight,
+    gridW,
+    gridH,
+    gridOriginX,
+    gridOriginY
+  };
+}
+
+/**
+ * 计算 layer 位置样式（单位：mm）
+ */
+export function getLayerStyle(
+  layer: { x1: number; y1: number; x2: number; y2: number },
+  dims: Dimensions
+): { left: string; top: string; width: string; height: string } {
+  const left = (layer.x1 - 1) * dims.cellWidth;
+  const top = (layer.y1 - 1) * dims.cellHeight;
+  const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
+  const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
+
+  return {
+    left: `${left}mm`,
+    top: `${top}mm`,
+    width: `${width}mm`,
+    height: `${height}mm`
+  };
+}

src/components/utils/layer-parser.ts

@@ -0,0 +1,57 @@
+import type { Layer, LayerConfig } from './types';
+
+/**
+ * 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
+ */
+export function parseLayers(layersStr: string): Layer[] {
+  if (!layersStr) return [];
+
+  const layers: Layer[] = [];
+  const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)/g;
+  let match;
+
+  while ((match = regex.exec(layersStr)) !== null) {
+    layers.push({
+      prop: match[1],
+      x1: parseInt(match[2]),
+      y1: parseInt(match[3]),
+      x2: parseInt(match[4]),
+      y2: parseInt(match[5])
+    });
+  }
+
+  return layers;
+}
+
+/**
+ * 格式化 layers 为字符串
+ */
+export function formatLayers(layers: LayerConfig[]): string {
+  return layers
+    .filter(l => l.visible)
+    .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
+    .join(' ');
+}
+
+/**
+ * 初始化图层配置
+ */
+export function initLayerConfigs(
+  data: any[],
+  existingLayersStr: string
+): LayerConfig[] {
+  const parsed = parseLayers(existingLayersStr);
+  const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
+  
+  return allProps.map(prop => {
+    const existing = parsed.find(l => l.prop === prop);
+    return {
+      prop,
+      visible: !!existing,
+      x1: existing?.x1 || 1,
+      y1: existing?.y1 || 1,
+      x2: existing?.x2 || 2,
+      y2: existing?.y2 || 2
+    };
+  });
+}