116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
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>
|
|
);
|
|
};
|