t.id === editingId) || null;
+
+ function updateEditing(patch) {
+ setTemplates(prev => prev.map(t => (t.id === editingId ? { ...t, ...patch } : t)));
+ }
+ function addElement(type, x, y) {
+ const el = { id: 'el_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6), type, x, y, size: 40, rotation: 0 };
+ updateEditing({ elements: [...(editing.elements || []), el] });
+ setSelectedElId(el.id);
+ }
+ function updateElement(id, patch) {
+ updateEditing({ elements: (editing.elements || []).map(el => (el.id === id ? { ...el, ...patch } : el)) });
+ }
+ function removeElement(id) {
+ updateEditing({ elements: (editing.elements || []).filter(el => el.id !== id) });
+ if (selectedElId === id) setSelectedElId(null);
+ }
+
+ function handleCanvasDrop(e) {
+ e.preventDefault();
+ const type = e.dataTransfer.getData('text/plain');
+ if (!type) return;
+ const rect = e.currentTarget.getBoundingClientRect();
+ const x = Math.round(e.clientX - rect.left);
+ const y = Math.round(e.clientY - rect.top);
+ addElement(type, x, y);
+ }
+
+ function handleElementPointerDown(e, el) {
+ e.stopPropagation();
+ setSelectedElId(el.id);
+ const canvasEl = e.currentTarget.closest('.backpanel-canvas');
+ const canvasRect = canvasEl.getBoundingClientRect();
+ const startOffsetX = e.clientX - canvasRect.left - el.x;
+ const startOffsetY = e.clientY - canvasRect.top - el.y;
+ e.currentTarget.setPointerCapture(e.pointerId);
+ const onMove = (moveEvt) => {
+ const nx = Math.round(moveEvt.clientX - canvasRect.left - startOffsetX);
+ const ny = Math.round(moveEvt.clientY - canvasRect.top - startOffsetY);
+ updateElement(el.id, { x: nx, y: ny });
+ };
+ const onUp = (upEvt) => {
+ e.currentTarget.releasePointerCapture(e.pointerId);
+ e.currentTarget.removeEventListener('pointermove', onMove);
+ e.currentTarget.removeEventListener('pointerup', onUp);
+ };
+ e.currentTarget.addEventListener('pointermove', onMove);
+ e.currentTarget.addEventListener('pointerup', onUp);
+ }
+
+ const selectedEl = editing && (editing.elements || []).find(el => el.id === selectedElId);
+
+ // ---------- 模板列表视图 ----------
+ if (!editing) {
+ return (
+
+
+
后板图模板
+
+
+
+ {(!templates || templates.length === 0) ? (
+
还没有后板图模板，点击右上角新建一个
+ ) : templates.map(t => (
+
{ setEditingId(t.id); setSelectedElId(null); }}>
+
+
+
{t.name || '(未命名模板)'}
+
{(t.elements || []).length} 个元素
+
+
+
+ ))}
+
+
+ );
+ }
+
+ // ---------- 编辑画布视图 ----------
+ return (
+
+
+
updateEditing({ name: e.target.value })}
+ />
+
+
+
+
+
+
+
拖拽图标到右侧画布
+ {['基础元件', '可选配插座'].map(group => (
+
+
{group}
+
+ {BACK_PANEL_ICON_LIBRARY.filter(i => i.group === group).map(icon => (
+
e.dataTransfer.setData('text/plain', icon.type)}
+ title={icon.label}
+ style={{
+ border: '1px solid var(--line)', borderRadius: 8, padding: 6, cursor: 'grab',
+ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, background: 'var(--panel)',
+ }}
+ >
+
+ {icon.label}
+
+ ))}
+
+
+ ))}
+
+
+
+
e.preventDefault()}
+ onDrop={handleCanvasDrop}
+ onPointerDown={() => setSelectedElId(null)}
+ style={{
+ position: 'relative', width: editing.width, height: editing.height, maxWidth: '100%',
+ background: '#3a3f47', borderRadius: 8, border: '1px solid var(--line)', overflow: 'hidden',
+ }}
+ >
+ {(editing.elements || []).map(el => (
+
handleElementPointerDown(e, el)}
+ title={BACK_PANEL_ICON_LABELS[el.type] || el.type}
+ style={{
+ position: 'absolute', left: el.x, top: el.y, cursor: 'grab',
+ transform: `translate(-50%, -50%) rotate(${el.rotation || 0}deg)`,
+ color: selectedElId === el.id ? 'var(--blue)' : '#e8eaed',
+ outline: selectedElId === el.id ? '2px dashed var(--blue)' : 'none', outlineOffset: 3, borderRadius: 4,
+ }}
+ >
+
+
+ ))}
+ {(editing.elements || []).length === 0 && (
+
+ 这里代表机身后板轮廓，把左边的图标拖进来开始摆放
+
+ )}
+
+
+ {selectedEl && (
+
+ {BACK_PANEL_ICON_LABELS[selectedEl.type] || selectedEl.type}
+
+
+
+
+
+ )}
+
+
+
+ );
+}
+
+// 只读渲染（产品详情页/PDF导出用）：同一套图标定义，不带交互，纯展示
+function BackPanelReadOnly({ template }) {
+ if (!template) return null;
+ return (
+
+ {(template.elements || []).map(el => (
+
+
+
+ ))}
+
+ );
+}
+
+function ProductForm({ draft, setDraft, onSave, onCancel, categories, onManage, onNotify, backPanelTemplates }) {
const set = (patch) => setDraft(d => ({ ...d, ...patch }));
const cat = (categories || []).find(c => c.id === draft.category);
const brandOptions = cat ? cat.brands : [];
@@ -5068,6 +5432,16 @@ function ProductForm({ draft, setDraft, onSave, onCancel, categories, onManage,
产品主图（可选，用于多语言PDF导出）
@@ -5156,13 +5530,14 @@ function ProductForm({ draft, setDraft, onSave, onCancel, categories, onManage,
);
}
-function ProductDetail({ product: p, onEdit, onDelete, categories, exportLang, onExportLangChange, exportLabels, exportLoading, onExportPdf, exportPdfBusy }) {
+function ProductDetail({ product: p, onEdit, onDelete, categories, exportLang, onExportLangChange, exportLabels, exportLoading, onExportPdf, exportPdfBusy, backPanelTemplates }) {
const cat = (categories || []).find(c => c.id === p.category);
const showMachineVariant = isUpsCategory(cat) && p.machineVariant;
const L = (key) => (exportLabels && exportLabels[key]) || key;
const V = (value) => (containsChinese(value) ? L(value) : value);
const langInfo = EXPORT_LANGUAGES.find(l => l.code === exportLang) || EXPORT_LANGUAGES[0];
const exportRows = productExportRows(p, categories);
+ const backPanelTemplate = (backPanelTemplates || []).find(t => t.id === p.backPanelTemplateId);
return (
<>
@@ -5184,6 +5559,12 @@ function ProductDetail({ product: p, onEdit, onDelete, categories, exportLang, o
} label="电压" value={p.voltage || '—'} />
} label="正本价格（元）" value={p.costPrice || '—'} />
+ {backPanelTemplate && (
+
+ 后板图（{backPanelTemplate.name}）
+
+
+ )}
{p.notes &&
}