Robot_Arm/webapp/js/sheets.js

/* 二维工程图与分步装配向导 */
/* =========================================================================
   交互式装配图与分步装配向导引擎 (Interactive Assembly Drawing Engine)
   ========================================================================= */
let sheetInited = false;
let curSheetIdx = 0;       // 0: front, 1: joint, 2: exploded, 3: side, 'guide': assembly guide
let curSheetTheme = 'paper';
let sheetScale = 1.0;
let sheetPanX = 0, sheetPanY = 0;
let isSheetDragging = false;
let sheetDragStartX = 0, sheetDragStartY = 0;
let pinnedPartIdx = null;
let currentGuideStep = 0;

const SHEET_METAS = [
  { id: 'front', title: '01 总装图 - 正视', icon: '📐', desc: '沿 -X 投影；肢体在纸面内，显示左右交替堆叠。全部贴合面共用 Y=157 平面。' },
  { id: 'joint', title: '02 回转副 A-A 剖视', icon: '🔍', desc: '回转副局部放大 6 倍 — 实测数值基准：端面齿联轴器、对开抱箍与从动盘。' },
  { id: 'exploded', title: '03 轴测爆炸装配图', icon: '💥', desc: '轴测爆炸展开：逐级装配顺序，电机与端面齿组件沿轴线抽出。' },
  { id: 'side', title: '04 总装图 - 侧视', icon: '📐', desc: '沿 +Y 投影；俯仰轴垂直纸面。肩抬举偏置 92mm，肩吊臂侧板无干涉。' }
];

const ASSEMBLY_STEPS = [
  {
    step: 1,
    title: '基座与三段立柱总装',
    subtitle: '底脚锁紧 · 内部中空走线孔道贯通',
    desc: '将 P02 Center/Front/Rear 底板组合锁紧，插入三段分体打印的 P01 立柱（A下段、B中段、C上段）。立柱段间通过止口插紧，内腔预留 Ø28mm 走线孔道，保证后续主干总线平顺穿入。',
    parts: [
      { idx: 4, name: 'P02_Center 立柱锁紧底盘', role: '承重基板' },
      { idx: 5, name: 'P02_Front 前支承脚', role: '防前倾支撑' },
      { idx: 6, name: 'P02_Rear 后配重脚', role: '配重稳定' },
      { idx: 1, name: 'P01_A 立柱下段', role: '立柱下部' },
      { idx: 2, name: 'P01_B 立柱中段', role: '立柱中部' },
      { idx: 3, name: 'P01_C 立柱上段', role: '立柱顶部与J1过渡' }
    ],
    screws: [
      { spec: 'M5 x 25 (S07)', qty: 4, role: '底盘主定位紧固' },
      { spec: 'M5 x 25 (S08)', qty: 4, role: '前后支承脚拼合' },
      { spec: 'M6 x 35 (S10)', qty: 6, role: '重载沉孔锚固' },
      { spec: 'M4 x 16 (S05)', qty: 8, role: '立柱三段段间自攻插合' }
    ],
    tips: '安装前核对立柱内部走线通道无打印拉丝残留，螺丝按对角线分次拧紧。',
    sheetRef: 0,
    camera: { az: -0.6, po: 1.15, rd: 550, tx: 0, ty: 220, tz: 350 }
  },
  {
    step: 2,
    title: '肩部双自由度关节总成 (J1 & J2)',
    subtitle: '肩外展抬举 + 肩俯仰正交布置',
    desc: '在立柱顶端固定 P03 肩部关节安装架，装入 J1 伺服电机；通过端面齿联轴器连接 P04 正交肩肘；装入 J2 俯仰电机，形成沿 X 轴偏置 92mm 的正交双关节。',
    parts: [
      { idx: 7, name: 'P03 肩部关节安装架', role: '肩部主承力座' },
      { idx: 14, name: 'M1_J1 电机模组', role: '肩抬举驱动' },
      { idx: 8, name: 'P04 正交肩肘', role: '90°正交转接' },
      { idx: 15, name: 'M2_J2 电机模组', role: '肩俯仰驱动' }
    ],
    screws: [
      { spec: 'M2 x 10 (S01)', qty: 6, role: '电机输出端面固定' },
      { spec: 'M3 x 10 (S02)', qty: 8, role: '电机机座轴向夹紧' },
      { spec: 'M3 x 8 (S04)', qty: 4, role: '端面齿防脱抱箍锁紧' },
      { spec: 'M3 x 16 (S03)', qty: 4, role: 'P03 顶盖贯穿紧固' }
    ],
    tips: '抱箍安装前务必确认两半端面齿盘脸已 100% 贴死，抱箍两半对开缝隙均匀。',
    sheetRef: 1,
    camera: { az: -0.8, po: 1.25, rd: 420, tx: -15, ty: 120, tz: 550 }
  },
  {
    step: 3,
    title: '大臂旋转座与主受力骨架 (J3 & P05/P06)',
    subtitle: '大臂内旋自由度 · 桁架式轻量化骨架',
    desc: '将 P05 大臂旋转座与 J2 输出端面贴合，装入 J3 大臂旋转电机；连接 P06 大臂骨架。P06 采用箱梁减重设计，侧壁开设有主总线走线过孔与扎带绑扎凸台。',
    parts: [
      { idx: 9, name: 'P05 大臂旋转座', role: 'J3旋转基座' },
      { idx: 16, name: 'M3_J3 电机模组', role: '大臂自旋驱动' },
      { idx: 10, name: 'P06 大臂骨架', role: '大臂主连杆 (L1=158mm)' }
    ],
    screws: [
      { spec: 'M2 x 10 (S01)', qty: 3, role: 'J3 输出法兰固定' },
      { spec: 'M3 x 10 (S02)', qty: 4, role: 'J3 外壳压紧' },
      { spec: 'M3 x 8 (S12)', qty: 4, role: 'P06 侧向加强壁锁紧' }
    ],
    tips: 'J3 尾部排线由 P05 侧边专用豁口引出，避免受力压线或磨破外绝缘皮。',
    sheetRef: 0,
    camera: { az: -0.7, po: 1.2, rd: 380, tx: 20, ty: 100, tz: 410 }
  },
  {
    step: 4,
    title: '肘部俯仰关节与前臂驱动 (J4 & P07)',
    subtitle: '肘关节俯仰驱动 · 偏置布置消除干涉',
    desc: '在大臂末端装入 J4 肘部电机，连接 P07 小臂骨架。小臂骨架向上加高保护电机，侧面设置 U 型过关节线束缓冲槽，确保大角度折叠时总线不紧绷。',
    parts: [
      { idx: 17, name: 'M4_J4 电机模组', role: '肘关节俯仰驱动' },
      { idx: 11, name: 'P07 小臂骨架', role: '前臂连杆 (L2=110mm)' }
    ],
    screws: [
      { spec: 'M2 x 10 (S01)', qty: 3, role: 'J4 输出法兰' },
      { spec: 'M3 x 10 (S02)', qty: 4, role: 'J4 抱紧沉孔' },
      { spec: 'M3 x 8 (S12)', qty: 4, role: 'P07 顶部补强板锁紧' }
    ],
    tips: '检查肘关节在全行程运动范围内线束无卡死或拉扯。',
    sheetRef: 3,
    camera: { az: -0.6, po: 1.2, rd: 320, tx: 20, ty: 65, tz: 330 }
  },
  {
    step: 5,
    title: '腕部双自由度与末端工具法兰 (J5, J6, P08, P09)',
    subtitle: '腕部俯仰与自转 · 标准 ISO 工具接口',
    desc: '在小臂末端装入 J5 腕部俯仰电机，连接 P08 腕部转接座；装入 J6 末端自旋电机，前端安装 P09 工具法兰。法兰带有标准 PCD 孔位，适配电动夹爪或快换工具。',
    parts: [
      { idx: 18, name: 'M5_J5 电机模组', role: '腕俯仰驱动' },
      { idx: 12, name: 'P08 腕部转接座', role: '腕偏转过渡' },
      { idx: 19, name: 'M6_J6 电机模组', role: '末端自转驱动' },
      { idx: 13, name: 'P09 末端工具法兰', role: '标准夹爪安装面' }
    ],
    screws: [
      { spec: 'M2 x 10 (S01)', qty: 6, role: 'J5/J6 输出法兰' },
      { spec: 'M3 x 10 (S02)', qty: 8, role: 'J5/J6 机座固定' },
      { spec: 'M4 x 16 (S06)', qty: 4, role: '末端工具安装紧固' }
    ],
    tips: 'J6 法兰盘面与电机旋转中心精密对齐，端面螺钉交替预紧。',
    sheetRef: 2,
    camera: { az: -0.6, po: 1.25, rd: 240, tx: 20, ty: 80, tz: 200 }
  },
  {
    step: 6,
    title: '电气线束主干铺设与扎带固定',
    subtitle: '4芯高柔拖链电缆 · 各关节U型缓冲弯 · 防拉扯扎带',
    desc: '将 4 芯总线（2×CAN 通信 + 2×24V 供电）从立柱内腔穿入，经各关节 T 接小板向 J1~J6 分支。在各零件外壳的专用扎带固定槽使用阻燃尼龙扎带锁紧，过关节处保留 35mm U 型自由弯曲余量。',
    parts: [
      { idx: 14, name: 'J1 电机总线分支', role: '首端分支' },
      { idx: 15, name: 'J2 电机总线分支', role: '肩部供电' },
      { idx: 16, name: 'J3 电机总线分支', role: '大臂供电' },
      { idx: 17, name: 'J4 电机总线分支', role: '肘部供电' },
      { idx: 18, name: 'J5 电机总线分支', role: '腕俯仰供电' },
      { idx: 19, name: 'J6 电机总线分支', role: '末端供电' }
    ],
    screws: [
      { spec: '2.5×100mm 阻燃扎带', qty: 12, role: '线束固定锚点锁紧' }
    ],
    tips: '慢速全行程转动各关节，目视确认线束弯曲半径均大于 15mm 且无边缘摩擦。',
    sheetRef: 0,
    camera: { az: -0.7, po: 1.15, rd: 580, tx: 0, ty: 180, tz: 380 }
  }
];

function applySheetTransform() {
  const canvas = document.getElementById('sheetCanvas');
  if (canvas) {
    canvas.style.transform = `translate(${sheetPanX}px, ${sheetPanY}px) scale(${sheetScale})`;
  }
  const badge = document.getElementById('sheetZoomBadge');
  if (badge) {
    badge.textContent = Math.round(sheetScale * 100) + '%';
  }
}

function fitSheetToScreen() {
  const svg = document.querySelector('#sheetSvgWrapper svg');
  if (!svg) return;
  const vb = svg.viewBox.baseVal;
  const W = (vb && vb.width) ? vb.width : (svg.clientWidth || 1200);
  const H = (vb && vb.height) ? vb.height : (svg.clientHeight || 800);
  const vp = document.getElementById('sheetViewport');
  if (!vp) return;
  const vw = vp.clientWidth, vh = vp.clientHeight;
  if (!vw || !vh) return;

  const pad = 36;
  sheetScale = Math.min((vw - pad * 2) / W, (vh - pad * 2) / H);
  sheetScale = Math.max(0.15, Math.min(sheetScale, 3.0));
  sheetPanX = (vw - W * sheetScale) / 2;
  sheetPanY = (vh - H * sheetScale) / 2;
  applySheetTransform();
}

function renderSheet(idx) {
  curSheetIdx = idx;
  const isGuide = idx === 'guide';
  const vp = document.getElementById('sheetViewport');
  const gv = document.getElementById('sheetGuideView');

  // Update tabs
  document.querySelectorAll('#sheetTabs .sheet-tab').forEach(b => {
    b.classList.toggle('on', b.dataset.sheet === String(idx));
  });

  if (isGuide) {
    if (vp) vp.style.display = 'none';
    if (gv) gv.style.display = 'flex';
    renderGuideStep(currentGuideStep);
    return;
  }

  if (gv) gv.style.display = 'none';
  if (vp) vp.style.display = 'block';

  const wrapper = document.getElementById('sheetSvgWrapper');
  if (wrapper && typeof SHEETS !== 'undefined' && SHEETS[idx]) {
    wrapper.innerHTML = SHEETS[idx];
    const svg = wrapper.querySelector('svg');
    if (svg) {
      const vb = svg.viewBox && svg.viewBox.baseVal;
      const w = (vb && vb.width) || 1200;
      const h = (vb && vb.height) || 800;
      svg.setAttribute('width', w);
      svg.setAttribute('height', h);
      svg.style.width = w + 'px';
      svg.style.height = h + 'px';
    }
  }

  // Update sheet title & desc
  const meta = SHEET_METAS[idx] || {};
  const tEl = document.getElementById('sheetInfoTitle');
  const dEl = document.getElementById('sheetInfoDesc');
  if (tEl) tEl.innerHTML = `<b>${meta.title || ''}</b>`;
  if (dEl) dEl.textContent = meta.desc || '';

  // Apply layer toggles
  applySheetLayers();

  // Reset highlight & tooltip
  pinnedPartIdx = null;
  clearSheetPartHighlight();

  // Fit to screen
  setTimeout(fitSheetToScreen, 20);
}

function applySheetLayers() {
  const svg = document.querySelector('#sheetSvgWrapper svg');
  if (!svg) return;
  const bBal = document.getElementById('chkLyrBalloons');
  const bDim = document.getElementById('chkLyrDims');
  const bAxe = document.getElementById('chkLyrAxes');
  const bLeg = document.getElementById('chkLyrLegend');

  const showBal = bBal ? bBal.checked : true;
  const showDim = bDim ? bDim.checked : true;
  const showAxe = bAxe ? bAxe.checked : true;
  const showLeg = bLeg ? bLeg.checked : true;

  svg.querySelectorAll('.sheet-balloons-group, .sheet-balloon, .sheet-leader').forEach(el => {
    el.style.display = showBal ? '' : 'none';
  });
  svg.querySelectorAll('.sheet-dims-group, .sheet-dim, .sheet-dim-line, .sheet-dim-ext, .sheet-dim-text').forEach(el => {
    el.style.display = showDim ? '' : 'none';
  });
  svg.querySelectorAll('.sheet-axes-group, .sheet-axis, .sheet-axis-label').forEach(el => {
    el.style.display = showAxe ? '' : 'none';
  });
  svg.querySelectorAll('.sheet-legend-box, .sheet-legend-row').forEach(el => {
    el.style.display = showLeg ? '' : 'none';
  });
}

function highlightSheetPart(idx, mouseEvent) {
  const svg = document.querySelector('#sheetSvgWrapper svg');
  if (!svg) return;

  // Remove previous hover classes
  svg.querySelectorAll('.is-hovered').forEach(el => el.classList.remove('is-hovered'));

  // Highlight all elements with data-idx=idx
  const targets = svg.querySelectorAll(`[data-idx="${idx}"]`);
  targets.forEach(el => el.classList.add('is-hovered'));

  // Highlight row in Left Tree / BOM
  highlightLeftTreeRow(idx);

  // Show Tooltip HUD
  showSheetTooltip(idx, mouseEvent);
}

function clearSheetPartHighlight() {
  const svg = document.querySelector('#sheetSvgWrapper svg');
  if (svg) {
    svg.querySelectorAll('.is-hovered').forEach(el => el.classList.remove('is-hovered'));
  }
  const tt = document.getElementById('sheetTooltip');
  if (tt && !pinnedPartIdx) tt.style.display = 'none';
  clearLeftTreeRow();
}

function showSheetTooltip(idx, e) {
  const tt = document.getElementById('sheetTooltip');
  if (!tt) return;

  const part = DATA.parts.find(p => p.idx === idx);
  if (!part) {
    tt.style.display = 'none';
    return;
  }

  const isPrinted = part.printed;
  const volCm3 = (part.vol / 1000).toFixed(1);
  const wtG = Math.round((part.vol / 1000) * 1.25);
  const dimsStr = part.dims ? `${Math.round(part.dims[0])} × ${Math.round(part.dims[1])} × ${Math.round(part.dims[2])} mm` : '-';
  const screwText = part.name.startsWith('P') ? 'M2/M3 内六角紧固螺钉' : '输出法兰配合';

  tt.innerHTML = `
    <div class="st-title">
      <span>#${idx} ${part.cn || part.name}</span>
      <span class="st-tag ${isPrinted ? 'pr' : 'ex'}">${isPrinted ? 'PLA 打印件' : '外购模组'}</span>
    </div>
    <div class="st-row"><span>设计编号:</span><span>${part.name.split('_')[0] || part.name}</span></div>
    <div class="st-row"><span>包络三围:</span><span>${dimsStr}</span></div>
    <div class="st-row"><span>净重估算:</span><span>${wtG} g (${volCm3} cm³)</span></div>
    <div class="st-row"><span>连接关系:</span><span>${screwText}</span></div>
    <button class="st-btn" onclick="jumpToPart3D(${idx})">🧊 在 3D 模型中定位高亮</button>
  `;

  tt.style.display = 'block';

  // Position tooltip
  const vp = document.getElementById('sheetViewport');
  if (e && vp) {
    const vr = vp.getBoundingClientRect();
    let x = e.clientX - vr.left + 16;
    let y = e.clientY - vr.top + 16;
    if (x + 310 > vr.width) x = e.clientX - vr.left - 320;
    if (y + 180 > vr.height) y = e.clientY - vr.top - 180;
    tt.style.left = Math.max(10, x) + 'px';
    tt.style.top = Math.max(10, y) + 'px';
  }
}

function highlightLeftTreeRow(idx) {
  document.querySelectorAll('#tree .row').forEach(r => {
    if (r.dataset && r.dataset.idx === String(idx)) {
      r.style.background = '#1e3a66';
      r.style.borderRadius = '3px';
    } else {
      r.style.background = '';
    }
  });
}

function clearLeftTreeRow() {
  document.querySelectorAll('#tree .row').forEach(r => r.style.background = '');
}

function jumpToPart3D(idx) {
  const tabModel = document.querySelector('.tab[data-view="model"]');
  if (tabModel) tabModel.click();

  setTimeout(() => {
    const m = meshes.find(x => x.userData && x.userData.idx === idx);
    if (!m) return;
    if (sel && !sel.userData.screw && !sel.userData.harness) {
      sel.material.emissive.setHex(0);
      sel.material.emissiveIntensity = 0;
    }
    sel = m;
    m.visible = true;
    if (m.chk) m.chk.checked = true;
    m.material.emissive.setHex(0x2f6bff);
    m.material.emissiveIntensity = 0.8;

    const box = new THREE.Box3().setFromObject(m);
    const center = new THREE.Vector3();
    box.getCenter(center);
    tx = center.x; ty = center.y; tz = center.z;
    rd = Math.max(220, box.getSize(new THREE.Vector3()).length() * 2.2);
    requestRender();

    const hud = document.getElementById('hud');
    if (hud) {
      hud.innerHTML = `<b>已在3D中定位: #${idx} ${m.userData.cn || ''}</b> · ` +
        (m.userData.printed ? 'PLA打印件' : '外购电机/标准件') +
        ` <span class="hudlink" onclick="document.querySelector('.tab[data-view=sheet]').click()">[返回装配图]</span>`;
    }
  }, 60);
}

function renderGuideStep(stepIdx) {
  currentGuideStep = Math.max(0, Math.min(stepIdx, ASSEMBLY_STEPS.length - 1));
  const step = ASSEMBLY_STEPS[currentGuideStep];
  if (!step) return;

  // Render step chips
  const bar = document.getElementById('guideStepsBar');
  if (bar) {
    bar.innerHTML = ASSEMBLY_STEPS.map((s, i) => `
      <div class="guide-step-chip ${i === currentGuideStep ? 'active' : ''}" onclick="renderGuideStep(${i})">
        <b>步骤 ${s.step}</b> ${s.title.split(' ')[0]}
      </div>
    `).join('');
  }

  // Render left panel
  const pLeft = document.getElementById('guidePanelLeft');
  if (pLeft) {
    pLeft.innerHTML = `
      <div style="font-size:11px;color:var(--warn);font-weight:bold;letter-spacing:.6px">工序 ${step.step} / ${ASSEMBLY_STEPS.length}</div>
      <div style="font-size:15px;font-weight:bold;color:#fff">${step.title}</div>
      <div style="font-size:12px;color:var(--dim);margin-top:-6px">${step.subtitle}</div>

      <div class="guide-card">
        <div class="guide-card-title">📖 装配任务说明</div>
        <div style="font-size:12px;line-height:1.6;color:var(--tx)">${step.desc}</div>
      </div>

      <div class="guide-card">
        <div class="guide-card-title">📦 本工序构件 (${step.parts.length} 件)</div>
        <div class="guide-part-list">
          ${step.parts.map(p => `
            <div class="guide-part-badge" onclick="jumpToPart3D(${p.idx})">
              <b>#${p.idx}</b> ${p.name} <span style="color:var(--dim);font-size:10px">(${p.role})</span>
            </div>
          `).join('')}
        </div>
      </div>

      <div class="guide-card">
        <div class="guide-card-title">🔩 紧固件与螺钉清单</div>
        <div style="display:flex;flex-direction:column;gap:5px;font-size:11.5px">
          ${step.screws.map(s => `
            <div style="display:flex;justify-content:space-between;color:var(--tx)">
              <span><b>${s.spec}</b> × ${s.qty}</span>
              <span style="color:var(--dim)">${s.role}</span>
            </div>
          `).join('')}
        </div>
      </div>

      <div class="guide-card" style="border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)">
        <div class="guide-card-title">⚠️ 工艺公差与装配要点</div>
        <div style="font-size:11.5px;color:#fef3c7;line-height:1.5">${step.tips}</div>
      </div>

      <div class="guide-actions">
        <button class="guide-btn guide-btn-nav" ${currentGuideStep === 0 ? 'disabled style="opacity:.4"' : ''} onclick="renderGuideStep(${currentGuideStep - 1})">⬅ 上一步</button>
        <button class="guide-btn guide-btn-nav" ${currentGuideStep === ASSEMBLY_STEPS.length - 1 ? 'disabled style="opacity:.4"' : ''} onclick="renderGuideStep(${currentGuideStep + 1})">下一步 ➡</button>
        <button class="guide-btn guide-btn-3d" onclick="showAssemblyStepIn3D(${currentGuideStep})">🧊 3D模拟装配</button>
      </div>
    `;
  }

  // Render right preview: show relevant sheet for this step
  const cw = document.getElementById('guideCanvasWrapper');
  if (cw && typeof SHEETS !== 'undefined') {
    cw.innerHTML = SHEETS[step.sheetRef];
    const svg = cw.querySelector('svg');
    if (svg) {
      svg.style.maxWidth = '92%';
      svg.style.maxHeight = '92%';
      svg.style.width = 'auto';
      svg.style.height = 'auto';
      svg.style.boxShadow = '0 10px 40px rgba(0,0,0,.6)';
      svg.style.borderRadius = '6px';

      // Highlight step parts in SVG
      const stepPartIdxs = step.parts.map(p => p.idx);
      svg.querySelectorAll('.sheet-part-path').forEach(p => {
        const idx = parseInt(p.dataset.idx);
        if (stepPartIdxs.includes(idx)) {
          p.style.stroke = '#f59e0b';
          p.style.strokeWidth = '2.8px';
          p.style.filter = 'drop-shadow(0 0 6px #f59e0b)';
        } else {
          p.style.opacity = '0.35';
        }
      });
      svg.querySelectorAll('.sheet-balloon').forEach(b => {
        const idx = parseInt(b.dataset.idx);
        if (stepPartIdxs.includes(idx)) {
          const c = b.querySelector('.balloon-circle');
          if (c) { c.style.fill = '#f59e0b'; c.style.stroke = '#ffffff'; }
          const t = b.querySelector('.balloon-text');
          if (t) t.style.fill = '#ffffff';
        } else {
          b.style.opacity = '0.3';
        }
      });
    }
  }
}

function showAssemblyStepIn3D(stepIdx) {
  const step = ASSEMBLY_STEPS[stepIdx];
  if (!step) return;

  const tabModel = document.querySelector('.tab[data-view="model"]');
  if (tabModel) tabModel.click();

  setTimeout(() => {
    if (step.camera) {
      az = step.camera.az; po = step.camera.po; rd = step.camera.rd;
      tx = step.camera.tx; ty = step.camera.ty; tz = step.camera.tz;
    }
    const stepPartIdxs = step.parts.map(p => p.idx);
    meshes.forEach(m => {
      if (m.userData && stepPartIdxs.includes(m.userData.idx)) {
        m.visible = true;
        if (m.chk) m.chk.checked = true;
        m.material.emissive.setHex(0xd97706);
        m.material.emissiveIntensity = 0.65;
      } else if (m.userData && !m.userData.screw && !m.userData.harness) {
        m.material.emissive.setHex(0);
        m.material.emissiveIntensity = 0;
      }
    });
    requestRender();

    const hud = document.getElementById('hud');
    if (hud) {
      hud.innerHTML = `<b>装配向导第 ${step.step} 步: ${step.title}</b> · 构件高亮呈现 ` +
        `<span class="hudlink" onclick="document.querySelector('.tab[data-view=sheet]').click()">[返回装配向导]</span>`;
    }
  }, 60);
}

function initSheetViewer() {
  if (sheetInited) return;
  sheetInited = true;

  const vp = document.getElementById('sheetViewport');
  const canvas = document.getElementById('sheetCanvas');

  // Sheet Tabs Click
  document.querySelectorAll('#sheetTabs .sheet-tab').forEach(b => {
    b.onclick = () => {
      const idx = b.dataset.sheet === 'guide' ? 'guide' : parseInt(b.dataset.sheet);
      renderSheet(idx);
    };
  });

  // Exit Guide button
  const btnExit = document.getElementById('btnExitGuide');
  if (btnExit) btnExit.onclick = () => renderSheet(0);

  // Theme Switcher Click
  document.querySelectorAll('#sheetToolbar [data-theme]').forEach(b => {
    b.onclick = () => {
      document.querySelectorAll('#sheetToolbar [data-theme]').forEach(x => x.classList.remove('on'));
      b.classList.add('on');
      curSheetTheme = b.dataset.theme;
      const sh = document.getElementById('sheet');
      if (sh) sh.className = 'theme-' + curSheetTheme;
    };
  });

  // Layer Checkboxes
  ['chkLyrBalloons', 'chkLyrDims', 'chkLyrAxes', 'chkLyrLegend'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.onchange = () => applySheetLayers();
  });

  // 3D Bridge Button
  const btn3D = document.getElementById('btnSheetTo3D');
  if (btn3D) {
    btn3D.onclick = () => {
      if (pinnedPartIdx) jumpToPart3D(pinnedPartIdx);
      else {
        const tabModel = document.querySelector('.tab[data-view="model"]');
        if (tabModel) tabModel.click();
      }
    };
  }

  // Float Bar Buttons
  const sfbIn = document.getElementById('sfbIn');
  if (sfbIn) sfbIn.onclick = () => {
    sheetScale = Math.min(6.0, sheetScale * 1.25);
    applySheetTransform();
  };
  const sfbOut = document.getElementById('sfbOut');
  if (sfbOut) sfbOut.onclick = () => {
    sheetScale = Math.max(0.15, sheetScale / 1.25);
    applySheetTransform();
  };
  const sfbFit = document.getElementById('sfbFit');
  if (sfbFit) sfbFit.onclick = () => fitSheetToScreen();
  const sfb100 = document.getElementById('sfb100');
  if (sfb100) sfb100.onclick = () => {
    sheetScale = 1.0;
    const vp = document.getElementById('sheetViewport');
    const svg = document.querySelector('#sheetSvgWrapper svg');
    if (vp && svg) {
      sheetPanX = (vp.clientWidth - (svg.viewBox.baseVal.width || 1200)) / 2;
      sheetPanY = (vp.clientHeight - (svg.viewBox.baseVal.height || 800)) / 2;
    }
    applySheetTransform();
  };
  const sfbReset = document.getElementById('sfbReset');
  if (sfbReset) sfbReset.onclick = () => fitSheetToScreen();
  const sfbFull = document.getElementById('sfbFull');
  if (sfbFull) {
    sfbFull.onclick = () => {
      const sh = document.getElementById('sheet');
      if (!document.fullscreenElement) {
        if (sh && sh.requestFullscreen) sh.requestFullscreen();
      } else {
        if (document.exitFullscreen) document.exitFullscreen();
      }
    };
  }

  const badge = document.getElementById('sheetZoomBadge');
  if (badge) badge.onclick = () => fitSheetToScreen();

  // Viewport Wheel Zoom
  if (vp) {
    vp.addEventListener('wheel', e => {
      e.preventDefault();
      const rect = vp.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const factor = e.deltaY < 0 ? 1.15 : 0.87;
      const newScale = Math.max(0.15, Math.min(6.0, sheetScale * factor));
      sheetPanX = mx - (mx - sheetPanX) * (newScale / sheetScale);
      sheetPanY = my - (my - sheetPanY) * (newScale / sheetScale);
      sheetScale = newScale;
      applySheetTransform();
    }, { passive: false });

    // Drag Pan
    vp.addEventListener('mousedown', e => {
      if (e.button !== 0 && e.button !== 1) return;
      isSheetDragging = true;
      vp.classList.add('is-dragging');
      sheetDragStartX = e.clientX - sheetPanX;
      sheetDragStartY = e.clientY - sheetPanY;
    });
    window.addEventListener('mousemove', e => {
      if (!isSheetDragging) return;
      sheetPanX = e.clientX - sheetDragStartX;
      sheetPanY = e.clientY - sheetDragStartY;
      applySheetTransform();
    });
    window.addEventListener('mouseup', () => {
      if (isSheetDragging) {
        isSheetDragging = false;
        vp.classList.remove('is-dragging');
      }
    });
    vp.addEventListener('dblclick', e => {
      if (e.target.closest('.sheet-part-path') || e.target.closest('.sheet-balloon')) return;
      fitSheetToScreen();
    });
  }

  // Interactive Hover & Click on Canvas
  if (canvas) {
    canvas.addEventListener('mouseover', e => {
      const hit = e.target.closest('[data-idx]');
      if (!hit) return;
      const idx = parseInt(hit.dataset.idx);
      if (!isNaN(idx)) highlightSheetPart(idx, e);
    });

    canvas.addEventListener('mouseout', e => {
      const hit = e.target.closest('[data-idx]');
      if (!hit) return;
      if (!pinnedPartIdx) clearSheetPartHighlight();
    });

    canvas.addEventListener('click', e => {
      const hit = e.target.closest('[data-idx]');
      if (hit) {
        const idx = parseInt(hit.dataset.idx);
        if (!isNaN(idx)) {
          if (pinnedPartIdx === idx) {
            pinnedPartIdx = null;
            clearSheetPartHighlight();
          } else {
            pinnedPartIdx = idx;
            highlightSheetPart(idx, e);
            const tt = document.getElementById('sheetTooltip');
            if (tt) tt.classList.add('pinned');
          }
        }
      } else {
        pinnedPartIdx = null;
        clearSheetPartHighlight();
        const tt = document.getElementById('sheetTooltip');
        if (tt) { tt.classList.remove('pinned'); tt.style.display = 'none'; }
      }
    });
  }

  // Initial render of first sheet
  renderSheet(0);
}

function openSheetView() {
  initSheetViewer();
  const footM = document.getElementById('footModel');
  const footS = document.getElementById('footSheet');
  if (footM) footM.style.display = 'none';
  if (footS) footS.style.display = 'inline';
  setTimeout(fitSheetToScreen, 40);
}

document.querySelectorAll('.tab[data-view]').forEach(b => b.onclick = () => {
  document.querySelectorAll('.tab[data-view]').forEach(x => x.classList.remove('on'));
  b.classList.add('on');
  const s = b.dataset.view === 'sheet';
  document.body.classList.toggle('sheet-mode', s);
  sheet.style.display = s ? 'flex' : 'none';
  cv.style.display = s ? 'none' : 'block';
  const footM = document.getElementById('footModel');
  const footS = document.getElementById('footSheet');
  if (s) {
    if (footM) footM.style.display = 'none';
    if (footS) footS.style.display = 'inline';
    openSheetView();
  } else {
    if (footM) footM.style.display = 'inline';
    if (footS) footS.style.display = 'none';
    resize();
    requestRender();
  }
});