900 lines
33 KiB
TypeScript
900 lines
33 KiB
TypeScript
import React, { useMemo, useState, useEffect, useRef } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import { PaperConfig, LabelTemplate, RecordRow, PaperType, CutLineConfig, ExportRangeConfig } from '../types';
|
||
import {
|
||
computeAutoLayoutPaper,
|
||
DEFAULT_EXPORT_RANGE,
|
||
DEFAULT_CUT_LINE_CONFIG,
|
||
buildPrintablePages,
|
||
collectGridCutLinePositions,
|
||
getCutLineChannel,
|
||
formatCutLineSvgDashArray,
|
||
getCutLineStrokeWidthMm,
|
||
loadAutoLayoutMinPageMarginMm,
|
||
saveAutoLayoutMinPageMarginMm,
|
||
type PrintableLabel,
|
||
} from '../utils';
|
||
import { CanvasLabelImage } from './CanvasLabelImage';
|
||
import { CommitInput } from './CommitInput';
|
||
import { useAppDialog } from './AppDialog';
|
||
import { FileDown, RefreshCcw, X } from 'lucide-react';
|
||
|
||
interface PageInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
||
value: string | number;
|
||
onCommit: (val: string) => void;
|
||
inputClassName?: string;
|
||
}
|
||
|
||
export const PageInput: React.FC<PageInputProps> = ({
|
||
value,
|
||
onCommit,
|
||
inputClassName = '',
|
||
...props
|
||
}) => (
|
||
<CommitInput value={value} onCommit={onCommit} className={inputClassName} {...props} />
|
||
);
|
||
|
||
interface LayoutStats {
|
||
gridCols: number;
|
||
gridRows: number;
|
||
labelsPerPage: number;
|
||
totalPages: number;
|
||
selectedCount: number;
|
||
}
|
||
|
||
interface PaperSettingsPanelProps {
|
||
paper: PaperConfig;
|
||
onChangePaper: (updated: PaperConfig) => void;
|
||
template: LabelTemplate;
|
||
rows?: RecordRow[];
|
||
layoutStats?: LayoutStats;
|
||
totalRowCount?: number;
|
||
theme?: 'light' | 'ps' | 'mobile';
|
||
exportRange?: ExportRangeConfig;
|
||
}
|
||
|
||
const paperEquals = (a: PaperConfig, b: PaperConfig) =>
|
||
a.type === b.type &&
|
||
a.width === b.width &&
|
||
a.height === b.height &&
|
||
a.orientation === b.orientation &&
|
||
a.marginTop === b.marginTop &&
|
||
a.marginRight === b.marginRight &&
|
||
a.marginBottom === b.marginBottom &&
|
||
a.marginLeft === b.marginLeft &&
|
||
a.columnGap === b.columnGap &&
|
||
a.rowGap === b.rowGap &&
|
||
a.flow === b.flow;
|
||
|
||
export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
|
||
paper,
|
||
onChangePaper,
|
||
template,
|
||
rows = [],
|
||
layoutStats,
|
||
totalRowCount,
|
||
theme = 'light',
|
||
exportRange,
|
||
}) => {
|
||
const { showAlert } = useAppDialog();
|
||
const [draftPaper, setDraftPaper] = useState(paper);
|
||
const [autoLayoutOpen, setAutoLayoutOpen] = useState(false);
|
||
const [lastAutoLayoutMinMargin, setLastAutoLayoutMinMargin] = useState(
|
||
() => loadAutoLayoutMinPageMarginMm()
|
||
);
|
||
const [autoLayoutMinMargin, setAutoLayoutMinMargin] = useState(
|
||
() => String(loadAutoLayoutMinPageMarginMm())
|
||
);
|
||
const autoLayoutInputRef = useRef<HTMLInputElement>(null);
|
||
const panelRef = React.useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
setDraftPaper(paper);
|
||
}, [paper]);
|
||
|
||
const commitDraftIfChanged = () => {
|
||
if (!paperEquals(draftPaper, paper)) {
|
||
onChangePaper(draftPaper);
|
||
}
|
||
};
|
||
|
||
const handlePanelBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||
const next = e.relatedTarget as Node | null;
|
||
if (next && panelRef.current?.contains(next)) return;
|
||
commitDraftIfChanged();
|
||
};
|
||
|
||
const isPs = theme === 'ps';
|
||
const isMobile = theme === 'mobile';
|
||
const fieldClass = isMobile
|
||
? 'mobile-field font-mono'
|
||
: isPs
|
||
? 'ps-field font-mono'
|
||
: 'w-full px-2.5 py-1.5 bg-gray-50 border border-gray-100 rounded-lg text-xs text-center font-mono';
|
||
const selectClass = isMobile
|
||
? 'mobile-field'
|
||
: isPs
|
||
? 'ps-field'
|
||
: 'w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg font-medium text-gray-700 text-xs';
|
||
const labelClass = isMobile
|
||
? 'mobile-field-label'
|
||
: isPs
|
||
? 'ps-field-label'
|
||
: 'block text-[10px] uppercase font-bold text-gray-400 mb-1';
|
||
const sectionTitleClass = isMobile
|
||
? 'font-bold text-indigo-500 text-sm'
|
||
: isPs
|
||
? 'ps-section-title'
|
||
: 'font-bold text-[#31a8ff] text-xs';
|
||
|
||
const rangeForStats = exportRange ?? DEFAULT_EXPORT_RANGE;
|
||
const draftLayoutStats = useMemo(
|
||
() => buildPrintablePages(rows, draftPaper, template, rangeForStats),
|
||
[rows, draftPaper, template, rangeForStats]
|
||
);
|
||
|
||
const gridInfo = useMemo(() => {
|
||
if (layoutStats && !exportRange) {
|
||
return { cols: layoutStats.gridCols, rows: layoutStats.gridRows };
|
||
}
|
||
return { cols: draftLayoutStats.gridCols, rows: draftLayoutStats.gridRows };
|
||
}, [layoutStats, exportRange, draftLayoutStats]);
|
||
|
||
const labelsPerPage = layoutStats?.labelsPerPage ?? draftLayoutStats.labelsPerPage;
|
||
const totalPages = layoutStats?.totalPages ?? draftLayoutStats.totalPages;
|
||
const selectedCount = layoutStats?.selectedCount ?? draftLayoutStats.selectedCount;
|
||
const allRowCount = totalRowCount ?? rows.length;
|
||
|
||
const applyAutoLayoutWithMinMargin = (minMargin: number) => {
|
||
const next = computeAutoLayoutPaper(draftPaper, template, minMargin);
|
||
setDraftPaper(next);
|
||
onChangePaper(next);
|
||
};
|
||
|
||
const closeAutoLayoutDialog = () => setAutoLayoutOpen(false);
|
||
|
||
const openAutoLayoutDialog = () => {
|
||
setAutoLayoutMinMargin(String(lastAutoLayoutMinMargin));
|
||
setAutoLayoutOpen(true);
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!autoLayoutOpen) return;
|
||
const timer = window.setTimeout(() => autoLayoutInputRef.current?.focus(), 0);
|
||
return () => window.clearTimeout(timer);
|
||
}, [autoLayoutOpen]);
|
||
|
||
useEffect(() => {
|
||
if (!autoLayoutOpen) return;
|
||
const onKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') {
|
||
e.preventDefault();
|
||
closeAutoLayoutDialog();
|
||
}
|
||
};
|
||
window.addEventListener('keydown', onKeyDown);
|
||
return () => window.removeEventListener('keydown', onKeyDown);
|
||
}, [autoLayoutOpen]);
|
||
|
||
const confirmAutoLayout = async () => {
|
||
const minMargin = Number(autoLayoutMinMargin);
|
||
if (!Number.isFinite(minMargin) || minMargin < 0) {
|
||
await showAlert('请输入不小于 0 的最小页边距（mm）。', { variant: 'warning' });
|
||
return;
|
||
}
|
||
|
||
const paperW =
|
||
draftPaper.orientation === 'portrait' ? draftPaper.width : draftPaper.height;
|
||
const paperH =
|
||
draftPaper.orientation === 'portrait' ? draftPaper.height : draftPaper.width;
|
||
if (minMargin * 2 >= paperW || minMargin * 2 >= paperH) {
|
||
await showAlert('最小页边距过大，当前纸张尺寸无法排版。', { variant: 'warning' });
|
||
return;
|
||
}
|
||
|
||
applyAutoLayoutWithMinMargin(minMargin);
|
||
saveAutoLayoutMinPageMarginMm(minMargin);
|
||
setLastAutoLayoutMinMargin(minMargin);
|
||
closeAutoLayoutDialog();
|
||
};
|
||
|
||
const applyPaper = (next: PaperConfig) => {
|
||
setDraftPaper(next);
|
||
onChangePaper(next);
|
||
};
|
||
|
||
const handlePaperTypeChange = (type: PaperType) => {
|
||
let w = 210;
|
||
let h = 297;
|
||
if (type === 'A5') {
|
||
w = 148;
|
||
h = 210;
|
||
} else if (type === 'A6') {
|
||
w = 105;
|
||
h = 148;
|
||
} else if (type === 'custom') {
|
||
w = draftPaper.width;
|
||
h = draftPaper.height;
|
||
}
|
||
applyPaper({ ...draftPaper, type, width: w, height: h });
|
||
};
|
||
|
||
const patchDraftPaper = (patch: Partial<PaperConfig>) => {
|
||
applyPaper({ ...draftPaper, ...patch });
|
||
};
|
||
|
||
const autoLayoutDialog =
|
||
autoLayoutOpen && typeof document !== 'undefined'
|
||
? createPortal(
|
||
<div
|
||
className="ps-modal-overlay"
|
||
onClick={closeAutoLayoutDialog}
|
||
role="presentation"
|
||
>
|
||
<div
|
||
className="ps-modal"
|
||
onClick={(e) => e.stopPropagation()}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="auto-layout-dialog-title"
|
||
>
|
||
<div className="ps-modal-header">
|
||
<h3 id="auto-layout-dialog-title" className="ps-modal-title">
|
||
自动排版
|
||
</h3>
|
||
<button
|
||
type="button"
|
||
onClick={closeAutoLayoutDialog}
|
||
className="ps-modal-close"
|
||
aria-label="关闭"
|
||
>
|
||
<X className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
<form
|
||
onSubmit={(e) => {
|
||
e.preventDefault();
|
||
void confirmAutoLayout();
|
||
}}
|
||
>
|
||
<div className="ps-modal-body space-y-3">
|
||
<p className="text-[11px] text-[#888] leading-relaxed">
|
||
将根据当前纸张与标签尺寸，在不低于最小页边距的前提下，自动计算左右、上下对称边距并居中排版。
|
||
</p>
|
||
<div>
|
||
<label htmlFor="auto-layout-min-margin" className="ps-field-label">
|
||
最小页边距 (mm)
|
||
</label>
|
||
<input
|
||
id="auto-layout-min-margin"
|
||
ref={autoLayoutInputRef}
|
||
type="number"
|
||
min="0.1"
|
||
max="100"
|
||
step="0.1"
|
||
value={autoLayoutMinMargin}
|
||
onChange={(e) => setAutoLayoutMinMargin(e.target.value)}
|
||
className="ps-field font-mono"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="ps-modal-footer">
|
||
<button type="button" onClick={closeAutoLayoutDialog} className="ps-btn text-[11px]">
|
||
取消
|
||
</button>
|
||
<button type="submit" className="ps-btn ps-btn-primary text-[11px]">
|
||
确定排版
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
)
|
||
: null;
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
ref={panelRef}
|
||
onBlur={isMobile ? undefined : handlePanelBlur}
|
||
className={`space-y-4 text-xs ${isPs || isMobile ? '' : 'bg-white border border-gray-200 rounded-2xl p-6 shadow-sm'
|
||
}`}
|
||
>
|
||
{!isPs && !isMobile && (
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<h3 className="text-sm font-bold text-gray-900 leading-none">排版</h3>
|
||
</div>
|
||
)}
|
||
{isPs && (
|
||
<p className="text-[10px] text-[#666] leading-relaxed">
|
||
排版参数修改后将自动更新预览。
|
||
</p>
|
||
)}
|
||
|
||
<div className={isPs || isMobile ? 'space-y-4' : 'grid grid-cols-1 md:grid-cols-4 gap-6'}>
|
||
<div className="space-y-2">
|
||
<h4 className={sectionTitleClass}>纸张</h4>
|
||
<div>
|
||
<label className={labelClass}>纸张类型</label>
|
||
<select
|
||
value={draftPaper.type}
|
||
onChange={(e) => handlePaperTypeChange(e.target.value as PaperType)}
|
||
className={selectClass}
|
||
>
|
||
<option value="A4">A4 (210×297 mm)</option>
|
||
<option value="A5">A5 (148×210 mm)</option>
|
||
<option value="A6">A6 (105×148 mm)</option>
|
||
<option value="custom">自定义尺寸</option>
|
||
</select>
|
||
</div>
|
||
|
||
{draftPaper.type === 'custom' && (
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className={labelClass}>宽度 (mm)</label>
|
||
<PageInput
|
||
type="number"
|
||
value={draftPaper.width}
|
||
onCommit={(val) => patchDraftPaper({ width: Math.max(10, Number(val) || 10) })}
|
||
inputClassName={fieldClass}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>高度 (mm)</label>
|
||
<PageInput
|
||
type="number"
|
||
value={draftPaper.height}
|
||
onCommit={(val) => patchDraftPaper({ height: Math.max(10, Number(val) || 10) })}
|
||
inputClassName={fieldClass}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className={labelClass}>进纸方向</label>
|
||
{isPs ? (
|
||
<div className="ps-toggle-group">
|
||
<button
|
||
type="button"
|
||
onClick={() => patchDraftPaper({ orientation: 'portrait' })}
|
||
className={`ps-toggle-btn flex-1 text-[10px] ${draftPaper.orientation === 'portrait' ? 'active' : ''}`}
|
||
>
|
||
纵向
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => patchDraftPaper({ orientation: 'landscape' })}
|
||
className={`ps-toggle-btn flex-1 text-[10px] ${draftPaper.orientation === 'landscape' ? 'active' : ''}`}
|
||
>
|
||
横向
|
||
</button>
|
||
</div>
|
||
) : isMobile ? (
|
||
<div className="flex bg-slate-100 p-1 rounded-xl">
|
||
<button
|
||
type="button"
|
||
onClick={() => patchDraftPaper({ orientation: 'portrait' })}
|
||
className={`flex-1 py-2.5 text-sm font-semibold rounded-lg transition ${draftPaper.orientation === 'portrait'
|
||
? 'bg-white text-slate-800 shadow-sm'
|
||
: 'text-slate-500'
|
||
} cursor-pointer`}
|
||
>
|
||
纵向
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => patchDraftPaper({ orientation: 'landscape' })}
|
||
className={`flex-1 py-2.5 text-sm font-semibold rounded-lg transition ${draftPaper.orientation === 'landscape'
|
||
? 'bg-white text-slate-800 shadow-sm'
|
||
: 'text-slate-500'
|
||
} cursor-pointer`}
|
||
>
|
||
横向
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex bg-gray-100 p-0.5 rounded-lg">
|
||
<button
|
||
type="button"
|
||
onClick={() => patchDraftPaper({ orientation: 'portrait' })}
|
||
className={`flex-1 py-1.5 text-[11px] font-semibold rounded ${draftPaper.orientation === 'portrait' ? 'bg-white text-gray-800 shadow-xs' : 'text-gray-500'
|
||
} cursor-pointer`}
|
||
>
|
||
纵向
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => patchDraftPaper({ orientation: 'landscape' })}
|
||
className={`flex-1 py-1.5 text-[11px] font-semibold rounded ${draftPaper.orientation === 'landscape' ? 'bg-white text-gray-800 shadow-xs' : 'text-gray-500'
|
||
} cursor-pointer`}
|
||
>
|
||
横向
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h4 className={sectionTitleClass}>页边距 (mm)</h4>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{(
|
||
[
|
||
['上边距', 'marginTop', draftPaper.marginTop],
|
||
['下边距', 'marginBottom', draftPaper.marginBottom],
|
||
['左边距', 'marginLeft', draftPaper.marginLeft],
|
||
['右边距', 'marginRight', draftPaper.marginRight],
|
||
] as const
|
||
).map(([label, key, val]) => (
|
||
<div key={key}>
|
||
<label className={labelClass}>{label}</label>
|
||
<PageInput
|
||
type="number"
|
||
min="0"
|
||
max="100"
|
||
value={val}
|
||
onCommit={(v) => patchDraftPaper({ [key]: Number(v) || 0 })}
|
||
inputClassName={fieldClass}
|
||
/>
|
||
</div>
|
||
))}
|
||
<div className="col-span-2 flex flex-col items-end gap-0.5 -mt-0.5">
|
||
<button
|
||
type="button"
|
||
onClick={openAutoLayoutDialog}
|
||
title="设置最小页边距并自动居中排版"
|
||
className={
|
||
isPs
|
||
? 'text-[10px] text-[#777] hover:text-[#31a8ff] transition cursor-pointer'
|
||
: isMobile
|
||
? 'text-xs text-slate-500 hover:text-indigo-600 font-normal py-1 cursor-pointer'
|
||
: 'text-[10px] text-gray-500 hover:text-indigo-600 font-normal cursor-pointer'
|
||
}
|
||
>
|
||
自动排版
|
||
</button>
|
||
<span
|
||
className={
|
||
isPs
|
||
? 'text-[9px] text-[#666] leading-tight'
|
||
: isMobile
|
||
? 'text-[10px] text-slate-400 leading-tight'
|
||
: 'text-[9px] text-gray-400 leading-tight'
|
||
}
|
||
>
|
||
上次最小页边距 {lastAutoLayoutMinMargin} mm
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h4 className={sectionTitleClass}>标签间距 (mm)</h4>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div>
|
||
<label className={labelClass}>横向</label>
|
||
<PageInput
|
||
type="number"
|
||
step="0.5"
|
||
min="0"
|
||
max="50"
|
||
value={draftPaper.columnGap}
|
||
onCommit={(val) => patchDraftPaper({ columnGap: Number(val) || 0 })}
|
||
inputClassName={fieldClass}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>纵向</label>
|
||
<PageInput
|
||
type="number"
|
||
step="0.5"
|
||
min="0"
|
||
max="50"
|
||
value={draftPaper.rowGap}
|
||
onCommit={(val) => patchDraftPaper({ rowGap: Number(val) || 0 })}
|
||
inputClassName={fieldClass}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className={labelClass}>填充顺序</label>
|
||
<select
|
||
value={draftPaper.flow}
|
||
onChange={(e) => patchDraftPaper({ flow: e.target.value as PaperConfig['flow'] })}
|
||
className={selectClass}
|
||
>
|
||
<option value="left-right-top-bottom">左右 → 上下（行优先）</option>
|
||
<option value="top-bottom-left-right">上下 → 左右（列优先）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
{autoLayoutDialog}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export interface LayoutPreviewProps {
|
||
paper: PaperConfig;
|
||
template: LabelTemplate;
|
||
printablePages: (PrintableLabel | null)[][];
|
||
gridCols: number;
|
||
labelsPerPage: number;
|
||
totalPages: number;
|
||
selectedCount: number;
|
||
totalRowCount: number;
|
||
/** 未刷新前根据当前配置计算的页数/枚数（用于工具栏提示） */
|
||
draftTotalPages: number;
|
||
draftSelectedCount: number;
|
||
previewReady: boolean;
|
||
previewLayoutStale: boolean;
|
||
cutLine: CutLineConfig;
|
||
activeRowIndex: number;
|
||
onSelectRowIndex: (idx: number) => void;
|
||
compact?: boolean;
|
||
collapsed?: boolean;
|
||
onToggleCollapsed?: () => void;
|
||
variant?: 'desktop' | 'mobile';
|
||
}
|
||
|
||
export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
|
||
paper,
|
||
template,
|
||
printablePages,
|
||
gridCols,
|
||
labelsPerPage,
|
||
totalPages,
|
||
selectedCount,
|
||
totalRowCount,
|
||
draftTotalPages,
|
||
draftSelectedCount,
|
||
previewReady,
|
||
previewLayoutStale,
|
||
cutLine,
|
||
activeRowIndex,
|
||
onSelectRowIndex,
|
||
compact = false,
|
||
collapsed = false,
|
||
onToggleCollapsed,
|
||
variant = 'desktop',
|
||
}) => {
|
||
const isMobileVariant = variant === 'mobile';
|
||
const [previewScale, setPreviewScale] = useState<number>(
|
||
isMobileVariant ? 1.15 : compact ? 1.4 : 3.3
|
||
);
|
||
const [showAllPages, setShowAllPages] = useState(false);
|
||
const MAX_PREVIEW_PAGES = 3;
|
||
|
||
const gridInfo = useMemo(
|
||
() => ({ cols: gridCols, rows: Math.ceil(labelsPerPage / gridCols) || 1 }),
|
||
[gridCols, labelsPerPage]
|
||
);
|
||
|
||
const currentPaperW = paper.orientation === 'portrait' ? paper.width : paper.height;
|
||
const currentPaperH = paper.orientation === 'portrait' ? paper.height : paper.width;
|
||
const colGapPx = Math.max(0, paper.columnGap * previewScale);
|
||
const rowGapPx = Math.max(0, paper.rowGap * previewScale);
|
||
const labelWPx = template.width * previewScale;
|
||
const labelHPx = template.height * previewScale;
|
||
const cutStrokeWidth = getCutLineStrokeWidthMm(cutLine) * previewScale;
|
||
const cutHalfStroke = cutStrokeWidth / 2;
|
||
const cutChannel = getCutLineChannel(paper.columnGap, paper.rowGap, cutLine);
|
||
const cutChannelXPx = cutChannel.x * previewScale;
|
||
const cutChannelYPx = cutChannel.y * previewScale;
|
||
const cutDash = formatCutLineSvgDashArray(cutLine, previewScale);
|
||
const pageCutLines = useMemo(
|
||
() =>
|
||
collectGridCutLinePositions(
|
||
0,
|
||
0,
|
||
labelWPx,
|
||
labelHPx,
|
||
gridInfo.cols,
|
||
gridInfo.rows,
|
||
colGapPx,
|
||
rowGapPx
|
||
),
|
||
[labelWPx, labelHPx, gridInfo.cols, gridInfo.rows, colGapPx, rowGapPx]
|
||
);
|
||
const visiblePages = showAllPages ? printablePages : printablePages.slice(0, MAX_PREVIEW_PAGES);
|
||
const hasMorePages = printablePages.length > MAX_PREVIEW_PAGES;
|
||
|
||
return (
|
||
<div
|
||
className={`flex-1 flex flex-col min-h-0 min-w-0 layout-preview-panel ${compact && collapsed ? 'layout-preview-collapsed' : ''
|
||
}`}
|
||
>
|
||
<div className={`ps-preview-toolbar ${isMobileVariant ? 'mobile-preview-toolbar' : ''}`}>
|
||
<div className="flex items-center gap-2 text-[11px] text-[#aaa] min-w-0 flex-1">
|
||
<FileDown className="w-3.5 h-3.5 text-[#31a8ff] shrink-0" />
|
||
<span className="font-semibold text-[#e8e8e8]">排版预览</span>
|
||
<span className="text-[#666]">|</span>
|
||
<span className="truncate">
|
||
{previewReady ? totalPages : draftTotalPages} 页
|
||
</span>
|
||
{!isMobileVariant && (
|
||
<>
|
||
<span className="text-[#666]">|</span>
|
||
<span>
|
||
{(previewReady ? selectedCount : draftSelectedCount) < totalRowCount
|
||
? `${previewReady ? selectedCount : draftSelectedCount}/${totalRowCount} 行`
|
||
: `${totalRowCount} 行`}
|
||
</span>
|
||
</>
|
||
)}
|
||
{previewLayoutStale && previewReady && (
|
||
<span className="text-amber-500/90 shrink-0">待更新</span>
|
||
)}
|
||
{previewReady && hasMorePages && !showAllPages && !isMobileVariant && (
|
||
<span className="text-amber-500/90">预览前 {MAX_PREVIEW_PAGES} 页</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className={`flex items-center gap-3 shrink-0 ${isMobileVariant ? 'hidden' : ''}`}>
|
||
{compact && onToggleCollapsed && (
|
||
<button
|
||
type="button"
|
||
onClick={onToggleCollapsed}
|
||
className="ps-btn text-[10px] px-2 py-1"
|
||
>
|
||
{collapsed ? '展开' : '收起'}
|
||
</button>
|
||
)}
|
||
<div className={`flex items-center gap-2 mobile-preview-zoom ${compact ? 'hidden' : ''}`}>
|
||
<span className="text-[10px] text-[#777]">预览比例</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPreviewScale(Math.max(1.0, Math.round((previewScale - 0.4) * 10) / 10))}
|
||
disabled={previewScale <= 1.0}
|
||
className="ps-preview-zoom-btn"
|
||
>
|
||
-
|
||
</button>
|
||
<span className="text-[10px] font-mono text-[#31a8ff] min-w-[40px] text-center">
|
||
{Math.round((previewScale / 3.3) * 100)}%
|
||
</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPreviewScale(Math.min(5.0, Math.round((previewScale + 0.4) * 10) / 10))}
|
||
disabled={previewScale >= 5.0}
|
||
className="ps-preview-zoom-btn"
|
||
>
|
||
+
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPreviewScale(2.0)}
|
||
className={`ps-preview-preset-btn ${previewScale === 2.0 ? 'active' : ''}`}
|
||
>
|
||
适中
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPreviewScale(3.3)}
|
||
className={`ps-preview-preset-btn ${previewScale === 3.3 ? 'active' : ''}`}
|
||
>
|
||
100%
|
||
</button>
|
||
</div>
|
||
{hasMorePages && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowAllPages((v) => !v)}
|
||
className="ps-btn text-[10px]"
|
||
>
|
||
{showAllPages ? '收起预览' : `展开全部 ${totalPages} 页`}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`flex-1 overflow-auto ps-workspace-bg min-h-0 ps-preview-workspace ${
|
||
isMobileVariant ? 'p-3 mobile-preview-workspace' : 'p-6'
|
||
}`}
|
||
>
|
||
{!previewReady ? (
|
||
<div className="h-full flex flex-col items-center justify-center text-center px-6 gap-2">
|
||
<p className="text-sm text-[#aaa]">上传数据源并完成变量映射后</p>
|
||
<p className="text-xs text-[#666] max-w-[280px] leading-relaxed">
|
||
{isMobileVariant
|
||
? '在下方「数据源」中上传 Excel，预览将自动更新'
|
||
: '在右侧「数据源」中点击「应用数据」生成排版预览；纸张排版变更会自动更新'}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className={`flex flex-col items-center ${
|
||
isMobileVariant ? 'space-y-4 pb-4' : 'space-y-8 pb-8'
|
||
}`}
|
||
>
|
||
{visiblePages.map((pageRows, pageIdx) => (
|
||
<div
|
||
key={pageIdx}
|
||
className="bg-white rounded shadow-2xl overflow-hidden relative border border-[#222] flex flex-col shrink-0"
|
||
style={{
|
||
width: `${currentPaperW * previewScale}px`,
|
||
}}
|
||
>
|
||
<div className="bg-[#f0f0f0] border-b border-gray-200 py-1.5 px-3 flex justify-between items-center text-[10px] font-semibold text-gray-500 select-none shrink-0">
|
||
<span>第 {pageIdx + 1} 页 / 共 {totalPages} 页</span>
|
||
<span>
|
||
{currentPaperW} × {currentPaperH} mm · {paper.orientation === 'portrait' ? '纵向' : '横向'}
|
||
</span>
|
||
</div>
|
||
<div
|
||
className="bg-white flex items-start justify-start relative select-none overflow-hidden shrink-0"
|
||
style={{
|
||
width: `${currentPaperW * previewScale}px`,
|
||
height: `${currentPaperH * previewScale}px`,
|
||
padding: `${paper.marginTop * previewScale}px ${paper.marginRight * previewScale}px ${paper.marginBottom * previewScale}px ${paper.marginLeft * previewScale}px`,
|
||
boxSizing: 'border-box',
|
||
}}
|
||
>
|
||
<div
|
||
className="grid bg-white relative"
|
||
style={{
|
||
gridTemplateColumns: `repeat(${gridInfo.cols}, ${labelWPx}px)`,
|
||
gridAutoRows: `${labelHPx}px`,
|
||
columnGap: `${colGapPx}px`,
|
||
rowGap: `${rowGapPx}px`,
|
||
width: 'max-content',
|
||
}}
|
||
>
|
||
{cutLine.enabled && (
|
||
<svg
|
||
className="absolute pointer-events-none z-20"
|
||
style={{
|
||
left: -cutHalfStroke,
|
||
top: -cutHalfStroke,
|
||
width: pageCutLines.gridW + cutStrokeWidth,
|
||
height: pageCutLines.gridH + cutStrokeWidth,
|
||
overflow: 'visible',
|
||
}}
|
||
viewBox={`${-cutHalfStroke} ${-cutHalfStroke} ${pageCutLines.gridW + cutStrokeWidth} ${pageCutLines.gridH + cutStrokeWidth}`}
|
||
aria-hidden
|
||
>
|
||
{pageCutLines.ys.map((y) => (
|
||
<line
|
||
key={`h-${y}`}
|
||
x1={0}
|
||
y1={y}
|
||
x2={pageCutLines.gridW}
|
||
y2={y}
|
||
stroke={cutLine.color}
|
||
strokeWidth={cutStrokeWidth}
|
||
strokeDasharray={cutDash}
|
||
strokeLinecap="butt"
|
||
/>
|
||
))}
|
||
{pageCutLines.xs.map((x) => (
|
||
<line
|
||
key={`v-${x}`}
|
||
x1={x}
|
||
y1={0}
|
||
x2={x}
|
||
y2={pageCutLines.gridH}
|
||
stroke={cutLine.color}
|
||
strokeWidth={cutStrokeWidth}
|
||
strokeDasharray={cutDash}
|
||
strokeLinecap="butt"
|
||
/>
|
||
))}
|
||
</svg>
|
||
)}
|
||
{pageRows.map((item, cellIdx) => {
|
||
if (!item) {
|
||
return (
|
||
<div
|
||
key={cellIdx}
|
||
className="bg-white flex items-center justify-center text-gray-300 font-mono text-[9px]"
|
||
style={{
|
||
width: `${template.width * previewScale}px`,
|
||
height: `${template.height * previewScale}px`,
|
||
}}
|
||
>
|
||
空白
|
||
</div>
|
||
);
|
||
}
|
||
const isActive = item.sourceIndex === activeRowIndex;
|
||
return (
|
||
<div
|
||
key={cellIdx}
|
||
onClick={() => onSelectRowIndex(item.sourceIndex)}
|
||
className={`bg-white text-center relative flex flex-col justify-center cursor-pointer box-border ${isActive ? 'ring-2 ring-inset ring-[#31a8ff] z-10' : ''
|
||
}`}
|
||
style={{
|
||
width: `${labelWPx}px`,
|
||
height: `${labelHPx}px`,
|
||
padding: `${cutChannelYPx}px ${cutChannelXPx}px`,
|
||
boxSizing: 'border-box',
|
||
}}
|
||
>
|
||
<div className="w-full h-full overflow-hidden relative">
|
||
<CanvasLabelImage
|
||
widthMm={template.width}
|
||
heightMm={template.height}
|
||
elements={template.elements}
|
||
rowData={item.row}
|
||
rowIndex={item.sourceIndex}
|
||
showBorder={false}
|
||
mode="output"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className={`ps-status-bar ${isMobileVariant ? 'mobile-preview-status' : ''}`}>
|
||
<span>
|
||
{previewReady
|
||
? `${gridInfo.cols}×${gridInfo.rows} · 每页 ${labelsPerPage} 枚`
|
||
: `预计 ${draftTotalPages} 页`}
|
||
</span>
|
||
{!isMobileVariant && (
|
||
<span>
|
||
{previewReady ? '点击标签可高亮对应数据行' : '数据变更后请在右侧面板手动刷新绘制'}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
/** @deprecated 使用 ExportSidebar + LayoutPreview 组合 */
|
||
export interface PreviewGridProps extends LayoutPreviewProps {
|
||
paper: PaperConfig;
|
||
onChangePaper: (updated: PaperConfig) => void;
|
||
}
|
||
|
||
export const PreviewGrid: React.FC<PreviewGridProps> = ({
|
||
paper,
|
||
onChangePaper,
|
||
template,
|
||
rows,
|
||
activeRowIndex,
|
||
onSelectRowIndex,
|
||
}) => {
|
||
const layout = buildPrintablePages(rows, paper, template, DEFAULT_EXPORT_RANGE);
|
||
return (
|
||
<div className="space-y-6">
|
||
<PaperSettingsPanel
|
||
paper={paper}
|
||
onChangePaper={onChangePaper}
|
||
template={template}
|
||
layoutStats={layout}
|
||
totalRowCount={rows.length}
|
||
/>
|
||
<LayoutPreview
|
||
paper={paper}
|
||
template={template}
|
||
printablePages={layout.pages}
|
||
gridCols={layout.gridCols}
|
||
labelsPerPage={layout.labelsPerPage}
|
||
totalPages={layout.totalPages}
|
||
selectedCount={layout.selectedCount}
|
||
totalRowCount={rows.length}
|
||
draftTotalPages={layout.totalPages}
|
||
draftSelectedCount={layout.selectedCount}
|
||
previewReady
|
||
previewLayoutStale={false}
|
||
cutLine={template.cutLine ?? DEFAULT_CUT_LINE_CONFIG}
|
||
activeRowIndex={activeRowIndex}
|
||
onSelectRowIndex={onSelectRowIndex}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|