移动端适配

src/components/MobileExportLayoutPanel.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Settings } from 'lucide-react';
+import {
+  CutLineConfig,
+  ExportRangeConfig,
+  LabelTemplate,
+  PaperConfig,
+  RecordRow,
+} from '../types';
+import { PaperSettingsPanel, PageInput } from './PreviewGrid';
+
+interface MobileExportLayoutPanelProps {
+  template: LabelTemplate;
+  paper: PaperConfig;
+  onChangePaper: (paper: PaperConfig) => void;
+  rows: RecordRow[];
+  exportRange: ExportRangeConfig;
+  cutLine: CutLineConfig;
+  onChangeCutLine: (cutLine: CutLineConfig) => void;
+}
+
+export const MobileExportLayoutPanel: React.FC<MobileExportLayoutPanelProps> = ({
+  template,
+  paper,
+  onChangePaper,
+  rows,
+  exportRange,
+  cutLine,
+  onChangeCutLine,
+}) => {
+  return (
+    <div className="space-y-4">
+      <PaperSettingsPanel
+        theme="ps"
+        paper={paper}
+        onChangePaper={onChangePaper}
+        template={template}
+        rows={rows}
+        exportRange={exportRange}
+        totalRowCount={rows.length}
+      />
+      <div className="ps-section-divider space-y-2">
+        <div className="ps-section-title">
+          <Settings className="w-3 h-3" />
+          裁切参考线
+        </div>
+        <label className="flex items-center gap-2 cursor-pointer text-[11px] text-[#ccc] select-none min-h-[40px]">
+          <input
+            type="checkbox"
+            checked={cutLine.enabled}
+            onChange={(e) => onChangeCutLine({ ...cutLine, enabled: e.target.checked })}
+            className="ps-checkbox"
+          />
+          <span>在 PDF 中渲染裁切参考线</span>
+        </label>
+        <fieldset
+          disabled={!cutLine.enabled}
+          className={`space-y-2 border-0 p-0 m-0 min-w-0 ${!cutLine.enabled ? 'opacity-55' : ''}`}
+        >
+          <div>
+            <label className="ps-field-label">线型</label>
+            <select
+              value={cutLine.style}
+              onChange={(e) =>
+                onChangeCutLine({
+                  ...cutLine,
+                  style: e.target.value as CutLineConfig['style'],
+                })
+              }
+              className="ps-field text-[11px]"
+            >
+              <option value="dashed">虚线</option>
+              <option value="solid">实线</option>
+            </select>
+          </div>
+          <div>
+            <label className="ps-field-label">线粗细 (mm)</label>
+            <PageInput
+              type="number"
+              min="0.02"
+              max="2"
+              step="0.02"
+              value={cutLine.width}
+              onCommit={(val) =>
+                onChangeCutLine({
+                  ...cutLine,
+                  width: Math.max(0.02, Math.min(2, Number(val) || 0.1)),
+                })
+              }
+              inputClassName="ps-field font-mono text-[11px]"
+            />
+          </div>
+          <div>
+            <label className="ps-field-label">颜色</label>
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                value={cutLine.color}
+                onChange={(e) => onChangeCutLine({ ...cutLine, color: e.target.value })}
+                className="color-input shrink-0"
+                aria-label="裁切线颜色"
+              />
+              <input
+                type="text"
+                value={cutLine.color}
+                onChange={(e) => onChangeCutLine({ ...cutLine, color: e.target.value })}
+                className="ps-field font-mono text-[11px] flex-1 min-w-0"
+              />
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  );
+};