Update App.jsx via upload script - 2026-08-07 17:53:15

App.jsx

@@ -248,7 +248,7 @@ const COUNTRIES = [
 
 const COUNTRY_BY_NAME = Object.fromEntries(COUNTRIES.map(c => [c.name, c]));
 
-const STORAGE_KEYS = { customers: 'crm:customers', products: 'crm:products', settings: 'crm:settings', quotes: 'crm:quotes', sellerProfiles: 'crm:sellerProfiles', certifications: 'crm:certifications', productCategories: 'crm:productCategories', packingLists: 'crm:packingLists', catalogDocs: 'crm:catalogDocs', jmsLines: 'crm:jmsLines' };
+const STORAGE_KEYS = { customers: 'crm:customers', products: 'crm:products', settings: 'crm:settings', quotes: 'crm:quotes', sellerProfiles: 'crm:sellerProfiles', certifications: 'crm:certifications', productCategories: 'crm:productCategories', packingLists: 'crm:packingLists', catalogDocs: 'crm:catalogDocs', jmsLines: 'crm:jmsLines', backPanelTemplates: 'crm:backPanelTemplates' };
 
 const blankCustomer = () => ({
   id: 'c_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7),
@@ -278,6 +278,135 @@ const EXPORT_LANGUAGES = [
 // 多语言PDF导出用的内置专业翻译词典：固定字段名 + 已知的品类/机型名称，人工核对过的翻译，
 // 不依赖AI、不占用DeepSeek额度、永远一致准确。词典里没有的词（比如用户自己新建的品类/品牌名、
 // 或者产品备注这种自由文本）才会走AI翻译并缓存（见 resolveExportTranslations）。
+/* ---------------------------- 后板图图标库 ---------------------------- */
+// 后板图编辑器用到的固定图标集：基础元件（交流输入口/保险丝/输出插座/USB/RJ45/风扇）
+// + 常见插座类型（可选配插座变体）。每个图标是一段简约线条风格的SVG，viewBox统一
+// 0 0 40 40，用currentColor描边，方便跟着容器的文字颜色走、也方便被选中时变色高亮。
+const BACK_PANEL_ICON_LIBRARY = [
+  { type: 'ac_input', label: '交流输入口', group: '基础元件' },
+  { type: 'fuse_breaker', label: '保险丝/断路器', group: '基础元件' },
+  { type: 'output_generic', label: '输出插座(通用)', group: '基础元件' },
+  { type: 'usb', label: 'USB', group: '基础元件' },
+  { type: 'rj45', label: 'RJ45', group: '基础元件' },
+  { type: 'fan', label: '风扇', group: '基础元件' },
+  { type: 'socket_cn', label: '国标插座', group: '可选配插座' },
+  { type: 'socket_schuko', label: '德标插座(Schuko)', group: '可选配插座' },
+  { type: 'socket_uk', label: '英标插座(BS1363)', group: '可选配插座' },
+  { type: 'socket_us', label: '美标插座(NEMA)', group: '可选配插座' },
+  { type: 'socket_au', label: '澳标插座', group: '可选配插座' },
+  { type: 'socket_za', label: '南非/印度插座', group: '可选配插座' },
+  { type: 'socket_it', label: '意标插座', group: '可选配插座' },
+  { type: 'socket_iec', label: 'IEC C13/C14', group: '可选配插座' },
+];
+const BACK_PANEL_ICON_LABELS = BACK_PANEL_ICON_LIBRARY.reduce((m, i) => ({ ...m, [i.type]: i.label }), {});
+
+function BackPanelIconSVG({ type, size = 40 }) {
+  const stroke = { stroke: 'currentColor', strokeWidth: 2, fill: 'none' };
+  const body = (() => {
+    switch (type) {
+      case 'ac_input':
+        return (<>
+          <rect x="6" y="6" width="28" height="28" rx="3" {...stroke} />
+          <rect x="14" y="12" width="3" height="10" fill="currentColor" />
+          <rect x="23" y="12" width="3" height="10" fill="currentColor" />
+          <rect x="14" y="26" width="12" height="3" fill="currentColor" />
+        </>);
+      case 'fuse_breaker':
+        return (<>
+          <circle cx="20" cy="20" r="15" {...stroke} />
+          <line x1="20" y1="20" x2="28" y2="11" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+          <circle cx="20" cy="20" r="2" fill="currentColor" />
+        </>);
+      case 'output_generic':
+        return (<>
+          <rect x="4" y="10" width="32" height="20" rx="3" {...stroke} />
+          <rect x="14" y="16" width="3" height="8" fill="currentColor" />
+          <rect x="23" y="16" width="3" height="8" fill="currentColor" />
+        </>);
+      case 'usb':
+        return (<>
+          <rect x="8" y="14" width="24" height="12" rx="2" {...stroke} />
+          <rect x="13" y="17" width="4" height="6" fill="currentColor" />
+          <rect x="23" y="17" width="4" height="6" fill="currentColor" />
+        </>);
+      case 'rj45':
+        return (<>
+          <rect x="8" y="10" width="24" height="18" rx="2" {...stroke} />
+          <rect x="16" y="6" width="8" height="6" {...stroke} />
+          {[0, 1, 2, 3, 4, 5].map(i => (<line key={i} x1={11 + i * 3.4} y1="22" x2={11 + i * 3.4} y2="27" stroke="currentColor" strokeWidth="1.5" />))}
+        </>);
+      case 'fan':
+        return (<>
+          <circle cx="20" cy="20" r="15" {...stroke} />
+          {[0, 90, 180, 270].map(a => (
+            <ellipse key={a} cx="20" cy="11" rx="4.5" ry="8" fill="currentColor" opacity="0.85" transform={`rotate(${a} 20 20)`} />
+          ))}
+          <circle cx="20" cy="20" r="3" fill="var(--panel, #fff)" stroke="currentColor" strokeWidth="1.5" />
+        </>);
+      case 'socket_cn':
+        return (<>
+          <rect x="5" y="5" width="30" height="30" rx="4" {...stroke} />
+          <line x1="14" y1="14" x2="20" y2="19" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+          <line x1="26" y1="14" x2="20" y2="19" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+          <circle cx="20" cy="27" r="2.2" fill="currentColor" />
+        </>);
+      case 'socket_schuko':
+        return (<>
+          <circle cx="20" cy="20" r="15" {...stroke} />
+          <circle cx="15" cy="20" r="2.2" fill="currentColor" />
+          <circle cx="25" cy="20" r="2.2" fill="currentColor" />
+          <rect x="3" y="17" width="4" height="6" fill="currentColor" />
+          <rect x="33" y="17" width="4" height="6" fill="currentColor" />
+        </>);
+      case 'socket_uk':
+        return (<>
+          <rect x="5" y="5" width="30" height="30" rx="4" {...stroke} />
+          <rect x="18" y="10" width="4" height="8" fill="currentColor" />
+          <rect x="11" y="23" width="4" height="8" fill="currentColor" />
+          <rect x="25" y="23" width="4" height="8" fill="currentColor" />
+        </>);
+      case 'socket_us':
+        return (<>
+          <rect x="7" y="5" width="26" height="30" rx="5" {...stroke} />
+          <rect x="13" y="12" width="3" height="8" fill="currentColor" />
+          <rect x="24" y="12" width="3" height="8" fill="currentColor" />
+          <circle cx="20" cy="27" r="2.2" fill="currentColor" />
+        </>);
+      case 'socket_au':
+        return (<>
+          <rect x="5" y="5" width="30" height="30" rx="4" {...stroke} />
+          <line x1="14" y1="13" x2="19" y2="19" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+          <line x1="26" y1="13" x2="21" y2="19" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+          <rect x="18" y="24" width="4" height="7" fill="currentColor" />
+        </>);
+      case 'socket_za':
+        return (<>
+          <circle cx="20" cy="20" r="15" {...stroke} />
+          <circle cx="20" cy="13" r="2.4" fill="currentColor" />
+          <circle cx="14" cy="24" r="2.4" fill="currentColor" />
+          <circle cx="26" cy="24" r="2.4" fill="currentColor" />
+        </>);
+      case 'socket_it':
+        return (<>
+          <circle cx="20" cy="20" r="15" {...stroke} />
+          <circle cx="20" cy="12" r="2.2" fill="currentColor" />
+          <circle cx="20" cy="20" r="2.2" fill="currentColor" />
+          <circle cx="20" cy="28" r="2.2" fill="currentColor" />
+        </>);
+      case 'socket_iec':
+        return (<>
+          <rect x="6" y="6" width="28" height="28" rx="3" {...stroke} />
+          <rect x="13" y="12" width="3" height="9" fill="currentColor" />
+          <rect x="24" y="12" width="3" height="9" fill="currentColor" />
+          <rect x="15" y="25" width="10" height="3" fill="currentColor" />
+        </>);
+      default:
+        return <rect x="6" y="6" width="28" height="28" rx="3" {...stroke} />;
+    }
+  })();
+  return <svg viewBox="0 0 40 40" width={size} height={size}>{body}</svg>;
+}
+
 const TRANSLATION_DICTIONARY = {
   // 文档通用
   '产品规格书': { en: 'Specifications', fr: 'Spécifications', ru: 'Технические характеристики', es: 'Especificaciones', ar: 'المواصفات' },
@@ -802,6 +931,7 @@ const blankProduct = () => ({
   applicationScenarios: '', // 应用场景文本，如 "电脑、投影仪、打印机、摄像机、收银机"
   container20ft: '', container40ft: '', container40hq: '', // 装箱数量（20尺柜/40尺柜/40高柜，无栈板台数）
   extraSpecs: [], // 动态兜底参数：AI识别到但不在上面任何具名字段里的参数，原样保留 {label, value}，如 [{label:'浮充电压', value:'13.7VDC/节'}]
+  backPanelTemplateId: '', // 引用的后板图模板id（可跨产品共用同一个模板），迷你UPS不适用
   productImageFileName: '', productImageOriginalName: '', // 产品主图，导出多语言PDF时展示
   sellingPoints: '', // 对客卖点/主要特点，每行一条，专门给客户看的（和下面的costPrice/notes内部信息彻底分开，不会一起导出）
   costPrice: '', notes: '',
@@ -1322,7 +1452,12 @@ async function loadAll() {
     const jl = await storageGet(STORAGE_KEYS.jmsLines);
     if (jl && jl.value) jmsLines = JSON.parse(jl.value);
   } catch (e) {}
-  return { customers, products, settings, quotes, sellerProfiles, certifications, productCategories, packingLists, catalogDocs, jmsLines };
+  let backPanelTemplates = [];
+  try {
+    const bpt = await storageGet(STORAGE_KEYS.backPanelTemplates);
+    if (bpt && bpt.value) backPanelTemplates = JSON.parse(bpt.value);
+  } catch (e) {}
+  return { customers, products, settings, quotes, sellerProfiles, certifications, productCategories, packingLists, catalogDocs, jmsLines, backPanelTemplates };
 }
 
 /* -------------------------------- styles -------------------------------- */
@@ -1816,6 +1951,7 @@ const NAV_GROUPS = [
   { label: '产品', items: [
     { id: 'groups', label: '产品分组', icon: FolderTree },
     { id: 'products', label: '产品管理', icon: Package },
+    { id: 'backpanel', label: '后板图模板', icon: Settings2 },
   ] },
 ];
 const STANDALONE_NAV = [
@@ -1997,6 +2133,7 @@ function MainApp({ username, onLogout }) {
   const [catalogEditDraft, setCatalogEditDraft] = useState({ title: '', category: '', brand: '', type: '' });
   const [catalogCategoryFilter, setCatalogCategoryFilter] = useState('all');
   const [jmsLines, setJmsLines] = useState([]);
+  const [backPanelTemplates, setBackPanelTemplates] = useState([]);
   const [telegramConfigHasToken, setTelegramConfigHasToken] = useState(false);
   const [telegramConfigChatId, setTelegramConfigChatId] = useState('');
 
@@ -2023,6 +2160,7 @@ function MainApp({ username, onLogout }) {
       setPackingLists(data.packingLists);
       setCatalogDocs((data.catalogDocs || []).filter(d => d.fileName));
       setJmsLines(data.jmsLines || []);
+      setBackPanelTemplates(data.backPanelTemplates || []);
       setLoaded(true);
     })();
   }, []);
@@ -2042,6 +2180,7 @@ function MainApp({ username, onLogout }) {
   useEffect(() => { if (loaded) storageSet(STORAGE_KEYS.packingLists, JSON.stringify(packingLists)).catch(() => {}); }, [packingLists, loaded]);
   useEffect(() => { if (loaded) storageSet(STORAGE_KEYS.catalogDocs, JSON.stringify(catalogDocs)).catch(() => {}); }, [catalogDocs, loaded]);
   useEffect(() => { if (loaded) storageSet(STORAGE_KEYS.jmsLines, JSON.stringify(jmsLines)).catch(() => {}); }, [jmsLines, loaded]);
+  useEffect(() => { if (loaded) storageSet(STORAGE_KEYS.backPanelTemplates, JSON.stringify(backPanelTemplates)).catch(() => {}); }, [backPanelTemplates, loaded]);
 
   function notify(msg) { setToast(msg); setTimeout(() => setToast(''), 2200); }
 
@@ -3311,7 +3450,7 @@ function MainApp({ username, onLogout }) {
 
                 <div>
                   {productDraft ? (
-                    <ProductForm draft={productDraft} setDraft={setProductDraft} onSave={saveProductDraft} onCancel={cancelProductDraft} categories={productCategories} onManage={(mode) => setTaxManageMode(mode)} onNotify={notify} />
+                    <ProductForm draft={productDraft} setDraft={setProductDraft} onSave={saveProductDraft} onCancel={cancelProductDraft} categories={productCategories} onManage={(mode) => setTaxManageMode(mode)} onNotify={notify} backPanelTemplates={backPanelTemplates} />
                   ) : selectedProduct ? (
                     <ProductDetail
                       product={selectedProduct} onEdit={() => startEditProduct(selectedProduct)} onDelete={() => deleteProduct(selectedProduct.id)}
@@ -3319,6 +3458,7 @@ function MainApp({ username, onLogout }) {
                       exportLang={productExportLang} onExportLangChange={setProductExportLang}
                       exportLabels={productExportLabels} exportLoading={productExportLoading}
                       onExportPdf={handleExportProductPdf} exportPdfBusy={productExportPdfBusy}
+                      backPanelTemplates={backPanelTemplates}
                     />
                   ) : (
                     <div className="panel"><div className="empty-state"><Package size={28} />选择左侧产品查看详情，或新建一个产品档案</div></div>
@@ -3327,6 +3467,10 @@ function MainApp({ username, onLogout }) {
               </div>
             )}
 
+            {view === 'backpanel' && (
+              <BackPanelStudio templates={backPanelTemplates} setTemplates={setBackPanelTemplates} onNotify={notify} />
+            )}
+
             {view === 'catalog' && (
               <div
                 className={`catalog-dropzone ${catalogDragActive ? 'drag-active' : ''}`}
@@ -4614,7 +4758,227 @@ function JmsPage({ lines, onSave, onDelete, onCheck, onNotify }) {
 
 /* ----------------------------- product form / detail ----------------------------- */
 
-function ProductForm({ draft, setDraft, onSave, onCancel, categories, onManage, onNotify }) {
+/* ---------------------------- 后板图模板编辑器 ---------------------------- */
+// 通用后板图模板：不挂在单个产品下，独立存一份模板库，产品通过 backPanelTemplateId
+// 引用某一个模板——同一个模板可以被多个共用同一后板布局的型号（比如1200/1600/2200）
+// 同时引用，编辑一次、全部生效。
+function blankBackPanelTemplate() {
+  return { id: 'bpt_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7), name: '未命名模板', width: 640, height: 360, elements: [] };
+}
+
+function BackPanelStudio({ templates, setTemplates, onNotify }) {
+  const [editingId, setEditingId] = useState(null);
+  const [selectedElId, setSelectedElId] = useState(null);
+  const editing = (templates || []).find(t => 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 (
+      <div className="panel section-gap">
+        <div className="panel-header">
+          <div className="panel-title"><Settings2 size={15} />后板图模板</div>
+          <button
+            className="btn btn-primary btn-sm"
+            onClick={() => {
+              const t = blankBackPanelTemplate();
+              setTemplates(prev => [...prev, t]);
+              setEditingId(t.id);
+              setSelectedElId(null);
+            }}
+          ><Plus size={13} />新建模板</button>
+        </div>
+        <div className="panel-body">
+          {(!templates || templates.length === 0) ? (
+            <div className="empty-state"><Settings2 size={26} />还没有后板图模板，点击右上角新建一个</div>
+          ) : templates.map(t => (
+            <div key={t.id} className="row" style={{ cursor: 'pointer' }} onClick={() => { setEditingId(t.id); setSelectedElId(null); }}>
+              <div className="led-dot blue" />
+              <div className="row-main">
+                <div className="row-title">{t.name || '(未命名模板)'}</div>
+                <div className="row-sub">{(t.elements || []).length} 个元素</div>
+              </div>
+              <button
+                className="btn btn-sm btn-ghost btn-danger"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (!window.confirm(`确定删除模板"${t.name}"吗？引用了这个模板的产品会变成"未设置后板图"。`)) return;
+                  setTemplates(prev => prev.filter(x => x.id !== t.id));
+                  onNotify && onNotify('已删除模板');
+                }}
+              ><Trash2 size={12} /></button>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ---------- 编辑画布视图 ----------
+  return (
+    <div className="panel section-gap">
+      <div className="panel-header">
+        <input
+          className="input" style={{ fontWeight: 700, fontSize: 14, maxWidth: 320 }}
+          value={editing.name} onChange={e => updateEditing({ name: e.target.value })}
+        />
+        <div style={{ display: 'flex', gap: 8 }}>
+          <button className="btn btn-sm" onClick={() => { setEditingId(null); setSelectedElId(null); onNotify && onNotify('模板已保存'); }}>
+            <Check size={13} />完成编辑
+          </button>
+        </div>
+      </div>
+      <div className="panel-body" style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
+        <div style={{ flexShrink: 0, width: 160 }}>
+          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-soft)', marginBottom: 8 }}>拖拽图标到右侧画布</div>
+          {['基础元件', '可选配插座'].map(group => (
+            <div key={group} style={{ marginBottom: 14 }}>
+              <div style={{ fontSize: 11, color: 'var(--ink-soft)', marginBottom: 6 }}>{group}</div>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
+                {BACK_PANEL_ICON_LIBRARY.filter(i => i.group === group).map(icon => (
+                  <div
+                    key={icon.type}
+                    draggable
+                    onDragStart={e => 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)',
+                    }}
+                  >
+                    <BackPanelIconSVG type={icon.type} size={26} />
+                    <span style={{ fontSize: 9.5, textAlign: 'center', lineHeight: 1.2 }}>{icon.label}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div style={{ flex: 1 }}>
+          <div
+            className="backpanel-canvas"
+            onDragOver={e => 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 => (
+              <div
+                key={el.id}
+                onPointerDown={e => 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,
+                }}
+              >
+                <BackPanelIconSVG type={el.type} size={el.size || 40} />
+              </div>
+            ))}
+            {(editing.elements || []).length === 0 && (
+              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#9aa0a6', fontSize: 12.5 }}>
+                这里代表机身后板轮廓，把左边的图标拖进来开始摆放
+              </div>
+            )}
+          </div>
+
+          {selectedEl && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
+              <span style={{ fontSize: 12.5, fontWeight: 600 }}>{BACK_PANEL_ICON_LABELS[selectedEl.type] || selectedEl.type}</span>
+              <button className="btn btn-sm btn-ghost" onClick={() => updateElement(selectedEl.id, { rotation: ((selectedEl.rotation || 0) + 90) % 360 })}>旋转90°</button>
+              <button className="btn btn-sm btn-ghost" onClick={() => updateElement(selectedEl.id, { size: Math.max(20, (selectedEl.size || 40) - 6) })}>缩小</button>
+              <button className="btn btn-sm btn-ghost" onClick={() => updateElement(selectedEl.id, { size: Math.min(80, (selectedEl.size || 40) + 6) })}>放大</button>
+              <button className="btn btn-sm btn-ghost btn-danger" onClick={() => removeElement(selectedEl.id)}><Trash2 size={12} />删除</button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 只读渲染（产品详情页/PDF导出用）：同一套图标定义，不带交互，纯展示
+function BackPanelReadOnly({ template }) {
+  if (!template) return null;
+  return (
+    <div
+      style={{
+        position: 'relative', width: template.width, height: template.height, maxWidth: '100%',
+        background: '#3a3f47', borderRadius: 8, overflow: 'hidden', margin: '0 auto',
+      }}
+    >
+      {(template.elements || []).map(el => (
+        <div
+          key={el.id}
+          style={{
+            position: 'absolute', left: el.x, top: el.y,
+            transform: `translate(-50%, -50%) rotate(${el.rotation || 0}deg)`,
+            color: '#e8eaed',
+          }}
+        >
+          <BackPanelIconSVG type={el.type} size={el.size || 40} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+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,
           </div>
         )}
 
+        {isUps && !isMiniUps && (
+          <div className="field">
+            <span className="field-label">后板图模板（可选，跨产品共用同一个布局）</span>
+            <select className="select" value={draft.backPanelTemplateId || ''} onChange={e => set({ backPanelTemplateId: e.target.value })}>
+              <option value="">未设置</option>
+              {(backPanelTemplates || []).map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+            </select>
+          </div>
+        )}
+
         <div className="field">
           <div className="field-label-row">
             <span className="field-label">产品主图（可选，用于多语言PDF导出）</span>
@@ -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 (
     <>
       <div className="panel section-gap">
@@ -5184,6 +5559,12 @@ function ProductDetail({ product: p, onEdit, onDelete, categories, exportLang, o
             <Info icon={<Zap size={13} />} label="电压" value={p.voltage || '—'} />
             <Info icon={<Tag size={13} />} label="正本价格（元）" value={p.costPrice || '—'} />
           </div>
+          {backPanelTemplate && (
+            <div className="field">
+              <span className="field-label">后板图（{backPanelTemplate.name}）</span>
+              <BackPanelReadOnly template={backPanelTemplate} />
+            </div>
+          )}
           {p.notes && <div className="field"><span className="field-label">备注</span><div style={{ fontSize: 12.5, whiteSpace: 'pre-wrap' }}>{p.notes}</div></div>}
         </div>
       </div>