516 lines
24 KiB
HTML
516 lines
24 KiB
HTML
import React, { useState, useCallback, useRef } from 'react';
|
||
import {
|
||
Cpu,
|
||
Settings,
|
||
Anchor,
|
||
ChevronUp,
|
||
ChevronDown,
|
||
Plus,
|
||
Trash2,
|
||
Image,
|
||
Layers,
|
||
FileText,
|
||
ChevronRight,
|
||
RotateCw,
|
||
Target,
|
||
Move
|
||
} from 'lucide-react';
|
||
|
||
/**
|
||
* Disassembly Edit/Preview Page
|
||
* 融合 DisassemblyPages（视觉展示）与 DisassemblyLinkedProductsPage（交互编辑）
|
||
*
|
||
* 编辑模式：左侧属性面板 + 点击选中导航组件 + 支持新增/删除/修改名称/代码/图片
|
||
* 预览模式：与 DisassemblyPages v7.2.0 一致的工业草稿风格展示
|
||
*/
|
||
|
||
const styles = `
|
||
@keyframes scanline {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(100%); }
|
||
}
|
||
@keyframes shimmer {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(300%); }
|
||
}
|
||
@keyframes node-pulse-kf {
|
||
0% { box-shadow: 0 0 0 0px rgba(234, 179, 8, 0.5); }
|
||
100% { box-shadow: 0 0 0 10px rgba(234, 179, 8, 0); }
|
||
}
|
||
.blueprint-grid {
|
||
background-color: #ffffff;
|
||
background-image:
|
||
linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
||
background-size: 30px 30px;
|
||
}
|
||
.blueprint-grid::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
|
||
background-size: 10px 10px;
|
||
pointer-events: none;
|
||
}
|
||
.assembly-view {
|
||
filter: drop-shadow(0 15px 30px rgba(0,0,0,0.1)) contrast(1.05);
|
||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.assembly-view:hover {
|
||
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)) contrast(1.1);
|
||
}
|
||
.leader-line-svg {
|
||
transition: stroke 0.4s ease, stroke-width 0.4s ease;
|
||
}
|
||
.text-label-container {
|
||
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
||
}
|
||
.scan-effect {
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; height: 100%;
|
||
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.01), transparent);
|
||
animation: scanline 15s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.node-selected {
|
||
animation: node-pulse-kf 2s infinite;
|
||
outline: 2px solid #eab308;
|
||
outline-offset: 4px;
|
||
}
|
||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #000; border-radius: 10px; }
|
||
.part-hover { transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
|
||
`;
|
||
|
||
const DEFAULT_PARTS = [
|
||
{ id: 'p1', name: '环境监控', code: 'ENV-X', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=200' },
|
||
{ id: 'p2', name: '能源模组', code: 'BATT-V8', img: 'https://images.unsplash.com/photo-1619641259501-c88f28c6e355?auto=format&fit=crop&q=80&w=200' },
|
||
{ id: 'p3', name: '雷达阵列', code: 'LDR-07', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=200' },
|
||
{ id: 'p4', name: '核心总成', code: 'CORE-MAX', img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=200' },
|
||
{ id: 'p5', name: '液压单元', code: 'HYD-02', img: 'https://images.unsplash.com/photo-1635350736475-c8cef4b21906?auto=format&fit=crop&q=80&w=200' },
|
||
{ id: 'p6', name: '散热单元', code: 'COOL-F2', img: 'https://images.unsplash.com/photo-1635350736475-c8cef4b21906?auto=format&fit=crop&q=80&w=200' },
|
||
{ id: 'p7', name: '存储阵列', code: 'DATA-2T', img: 'https://images.unsplash.com/photo-1544006659-f0b21f04cb1d?auto=format&fit=crop&q=80&w=200' },
|
||
];
|
||
|
||
const DEFAULT_ASSEMBLY = 'https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=1600';
|
||
|
||
const ICON_SIZE = 80;
|
||
const CENTER_AXIS_Y = 180;
|
||
const OFFSET_Y = 40;
|
||
|
||
// ─── 单个组件节点（共用于编辑 & 预览）─────────────────────────────────────
|
||
function PartNode({ part, index, isHovered, isSelected, isEditMode, onHover, onClick }) {
|
||
const isUp = index % 2 === 0;
|
||
const boxTop = isUp ? CENTER_AXIS_Y - OFFSET_Y : CENTER_AXIS_Y + OFFSET_Y;
|
||
const SVG_CENTER_X = 50;
|
||
const SVG_CENTER_Y = 40;
|
||
|
||
const lineColor = isSelected
|
||
? '#eab308'
|
||
: isHovered
|
||
? '#000'
|
||
: '#f5f5f5';
|
||
const lineWidth = isSelected ? '2.5' : isHovered ? '2.5' : '1';
|
||
|
||
return (
|
||
<div
|
||
onMouseEnter={() => onHover(part.id)}
|
||
onMouseLeave={() => onHover(null)}
|
||
onClick={() => isEditMode && onClick(part.id)}
|
||
className={`group flex flex-col items-center relative flex-1
|
||
${isEditMode ? 'cursor-pointer' : 'cursor-default'}
|
||
${isSelected ? 'z-30' : 'z-10'}`}
|
||
style={{ minWidth: 0 }}
|
||
>
|
||
{/* 垂直引导线 */}
|
||
<svg
|
||
className="absolute top-0 left-1/2 -translate-x-1/2 w-[100px] h-[400px] overflow-visible pointer-events-none z-0"
|
||
viewBox="0 0 100 400"
|
||
>
|
||
<path
|
||
d={`M ${SVG_CENTER_X} ${SVG_CENTER_Y} L ${SVG_CENTER_X} ${boxTop}`}
|
||
fill="none"
|
||
stroke={lineColor}
|
||
strokeWidth={lineWidth}
|
||
strokeDasharray={isSelected || isHovered ? 'none' : '3,3'}
|
||
className="leader-line-svg"
|
||
/>
|
||
<circle cx={SVG_CENTER_X} cy={SVG_CENTER_Y} r="2.5"
|
||
fill={isSelected ? '#eab308' : isHovered ? '#000' : '#e0e0e0'} />
|
||
<circle cx={SVG_CENTER_X} cy={boxTop} r={isSelected || isHovered ? '4' : '2'}
|
||
fill={isSelected ? '#eab308' : isHovered ? '#000' : '#e0e0e0'} />
|
||
</svg>
|
||
|
||
{/* 图标节点 */}
|
||
<div
|
||
className={`relative flex items-center justify-center transition-all duration-500 z-10 part-hover rounded-sm
|
||
${isHovered || isSelected ? 'scale-110 -translate-y-2' : ''}
|
||
${isSelected ? 'node-selected' : ''}`}
|
||
style={{ width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px` }}
|
||
>
|
||
<img src={part.img} className="w-16 h-16 object-contain relative z-10" alt={part.name} />
|
||
{(isHovered || isSelected) && (
|
||
<div className="absolute inset-0 bg-neutral-900/5 blur-2xl rounded-full scale-125" />
|
||
)}
|
||
{isEditMode && (
|
||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-neutral-800 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-full z-20">
|
||
<Move size={9} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 标签容器 */}
|
||
<div
|
||
className={`absolute flex flex-col items-center whitespace-nowrap text-label-container z-30
|
||
${isHovered || isSelected ? (isUp ? '-translate-y-1' : 'translate-y-1') : ''}`}
|
||
style={{ top: `${boxTop}px`, left: '50%', transform: 'translateX(-50%)' }}
|
||
>
|
||
{/* 接线端子 */}
|
||
<div className={`w-2.5 h-2.5 rounded-full border-2 border-white mb-3 transition-all
|
||
${isSelected ? 'bg-yellow-400 scale-150' : isHovered ? 'bg-neutral-900 scale-125' : 'bg-neutral-200'}`}
|
||
/>
|
||
{/* 指示器 */}
|
||
<div className="flex items-center gap-1.5 mb-1.5 opacity-60">
|
||
{isUp ? <ChevronUp size={8} /> : <div className="w-[8px]" />}
|
||
<div className={`text-[8px] font-black uppercase tracking-widest transition-colors
|
||
${isHovered || isSelected ? 'text-neutral-900' : 'text-neutral-300'}`}>
|
||
CODE.0{index + 1}
|
||
</div>
|
||
{!isUp ? <ChevronDown size={8} /> : <div className="w-[8px]" />}
|
||
</div>
|
||
{/* 大字名称 */}
|
||
<div className={`text-2xl font-black uppercase tracking-tighter transition-all duration-300
|
||
${isSelected ? 'text-yellow-500 scale-105' : isHovered ? 'text-neutral-900 scale-105' : 'text-neutral-400'}`}>
|
||
{part.name}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ─── 主组件 ────────────────────────────────────────────────────────────────
|
||
export default function App() {
|
||
const [isEditMode, setIsEditMode] = useState(true);
|
||
const [parts, setParts] = useState(DEFAULT_PARTS);
|
||
const [assemblyImg, setAssemblyImg] = useState(DEFAULT_ASSEMBLY);
|
||
const [hoveredId, setHoveredId] = useState(null);
|
||
const [selectedId, setSelectedId] = useState(null);
|
||
const [imgInputVal, setImgInputVal] = useState('');
|
||
|
||
const selectedPart = parts.find(p => p.id === selectedId) || null;
|
||
const idxOf = (id) => parts.findIndex(p => p.id === id);
|
||
|
||
// ── 更新选中组件字段 ──
|
||
const updateField = useCallback((field, value) => {
|
||
if (!selectedId) return;
|
||
setParts(prev => prev.map(p => p.id === selectedId ? { ...p, [field]: value } : p));
|
||
}, [selectedId]);
|
||
|
||
// ── 新增组件 ──
|
||
const addPart = () => {
|
||
const newPart = {
|
||
id: 'p-' + Date.now(),
|
||
name: '新组件',
|
||
code: 'NEW-00',
|
||
img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=200',
|
||
};
|
||
setParts(prev => [...prev, newPart]);
|
||
setSelectedId(newPart.id);
|
||
};
|
||
|
||
// ── 删除选中组件 ──
|
||
const deletePart = () => {
|
||
if (!selectedId) return;
|
||
setParts(prev => prev.filter(p => p.id !== selectedId));
|
||
setSelectedId(null);
|
||
};
|
||
|
||
// ── 上移 / 下移 ──
|
||
const movePart = (dir) => {
|
||
const idx = idxOf(selectedId);
|
||
if (idx < 0) return;
|
||
const next = idx + dir;
|
||
if (next < 0 || next >= parts.length) return;
|
||
setParts(prev => {
|
||
const arr = [...prev];
|
||
[arr[idx], arr[next]] = [arr[next], arr[idx]];
|
||
return arr;
|
||
});
|
||
};
|
||
|
||
// ── 切换模式 ──
|
||
const enterPreview = () => {
|
||
setIsEditMode(false);
|
||
setSelectedId(null);
|
||
};
|
||
const enterEdit = () => setIsEditMode(true);
|
||
|
||
return (
|
||
<div className="h-screen w-screen bg-[#ffffff] text-neutral-900 font-mono flex flex-col overflow-hidden select-none">
|
||
<style>{styles}</style>
|
||
|
||
{/* ── 顶部标题栏 ────────────────────────────────────── */}
|
||
<header className="h-14 border-b-2 border-neutral-900 bg-white flex items-center justify-between px-8 z-50 shadow-sm">
|
||
<div className="flex items-center gap-4">
|
||
<div className="p-1.5 bg-neutral-900 rounded-sm">
|
||
<Cpu size={18} className="text-white" />
|
||
</div>
|
||
<div className="flex flex-col">
|
||
<h1 className="text-[13px] font-black uppercase tracking-[0.35em] leading-none text-neutral-900">
|
||
Disassembly_Editor
|
||
</h1>
|
||
<p className="text-[9px] text-neutral-400 mt-0.5 font-bold tracking-tighter">
|
||
EDIT_PREVIEW_v1.0.0 // VISUAL_ENHANCED
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 模式切换 */}
|
||
<div className="flex items-center bg-neutral-100 p-1 border-2 border-neutral-900 rounded-sm">
|
||
<button
|
||
onClick={enterEdit}
|
||
className={`px-5 py-1.5 text-[10px] font-black transition-all uppercase tracking-widest
|
||
${isEditMode ? 'bg-black text-white shadow-inner' : 'text-neutral-500 hover:text-black'}`}
|
||
>
|
||
编辑模式
|
||
</button>
|
||
<button
|
||
onClick={enterPreview}
|
||
className={`px-5 py-1.5 text-[10px] font-black transition-all uppercase tracking-widest
|
||
${!isEditMode ? 'bg-black text-white shadow-inner' : 'text-neutral-500 hover:text-black'}`}
|
||
>
|
||
预览展示
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-6 text-neutral-400">
|
||
<div className="flex flex-col items-end text-[9px] font-black uppercase tracking-widest">
|
||
<span className="flex items-center gap-2">
|
||
<div className="w-1.5 h-1.5 bg-neutral-900 rounded-full animate-pulse" />
|
||
{isEditMode ? 'MODE: EDIT' : 'MODE: PREVIEW'}
|
||
</span>
|
||
</div>
|
||
<div className="h-8 w-px bg-neutral-200" />
|
||
<Settings size={16} className="hover:text-neutral-900 cursor-pointer transition-colors" />
|
||
</div>
|
||
</header>
|
||
|
||
{/* ── 主体区域 ────────────────────────────────────── */}
|
||
<div className="flex-1 flex overflow-hidden">
|
||
|
||
{/* ── 左侧编辑面板（仅编辑模式）─────────────────── */}
|
||
{isEditMode && (
|
||
<aside className="w-72 bg-white border-r-2 border-neutral-900 z-40 flex flex-col overflow-y-auto custom-scrollbar shadow-xl">
|
||
|
||
{/* 中央图片设置 */}
|
||
<div className="p-5 border-b-2 border-neutral-100 space-y-3">
|
||
<h2 className="text-[10px] font-black uppercase tracking-widest text-neutral-500 flex items-center gap-2">
|
||
<Image size={12} /> 中央组装图
|
||
</h2>
|
||
<div className="relative w-full aspect-video border-2 border-neutral-200 overflow-hidden bg-neutral-50">
|
||
<img src={assemblyImg} className="w-full h-full object-cover filter grayscale" alt="Assembly" />
|
||
</div>
|
||
<input
|
||
type="text"
|
||
value={imgInputVal}
|
||
onChange={e => setImgInputVal(e.target.value)}
|
||
placeholder="粘贴图片 URL..."
|
||
className="w-full border-2 border-neutral-900 px-2 py-2 text-[10px] font-bold outline-none focus:bg-yellow-50 transition-colors"
|
||
/>
|
||
<button
|
||
onClick={() => { if (imgInputVal.trim()) { setAssemblyImg(imgInputVal.trim()); setImgInputVal(''); } }}
|
||
className="w-full py-2 bg-neutral-900 text-white text-[10px] font-black uppercase tracking-widest hover:bg-neutral-700 transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
<RotateCw size={12} /> 替换图片
|
||
</button>
|
||
</div>
|
||
|
||
{/* 组件列表 */}
|
||
<div className="p-5 border-b-2 border-neutral-100 space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-[10px] font-black uppercase tracking-widest text-neutral-500 flex items-center gap-2">
|
||
<Layers size={12} /> 组件列表
|
||
<span className="bg-neutral-100 border border-neutral-300 text-[9px] px-1.5 py-0.5 rounded font-bold">{parts.length}</span>
|
||
</h2>
|
||
<button
|
||
onClick={addPart}
|
||
className="flex items-center gap-1 px-2 py-1 bg-black text-white text-[9px] font-black uppercase hover:bg-neutral-700 transition-colors shadow-[2px_2px_0px_#ccc]"
|
||
>
|
||
<Plus size={10} /> 添加
|
||
</button>
|
||
</div>
|
||
<div className="space-y-1 max-h-36 overflow-y-auto custom-scrollbar">
|
||
{parts.map((p, i) => (
|
||
<button
|
||
key={p.id}
|
||
onClick={() => setSelectedId(p.id)}
|
||
className={`w-full flex items-center gap-2 px-3 py-2 border text-left transition-all
|
||
${selectedId === p.id
|
||
? 'border-yellow-400 bg-yellow-50 shadow-[2px_2px_0px_#000]'
|
||
: 'border-neutral-200 hover:border-neutral-400 hover:bg-neutral-50'}`}
|
||
>
|
||
<img src={p.img} className="w-7 h-7 object-contain bg-neutral-100 border border-neutral-200 flex-none" alt="" />
|
||
<div className="flex-1 min-w-0">
|
||
<div className="text-[10px] font-black uppercase truncate">{p.name}</div>
|
||
<div className="text-[8px] text-neutral-400 font-bold">{p.code} · #{i + 1}</div>
|
||
</div>
|
||
{selectedId === p.id && <div className="w-1.5 h-1.5 rounded-full bg-yellow-400 flex-none" />}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 选中组件属性编辑 */}
|
||
{selectedPart ? (
|
||
<div className="flex-1 p-5 space-y-5">
|
||
<h2 className="text-[10px] font-black uppercase tracking-widest text-neutral-500 flex items-center justify-between">
|
||
<span className="flex items-center gap-2"><FileText size={12} /> 属性编辑</span>
|
||
<span className="text-[8px] bg-yellow-400 px-2 py-0.5 font-bold border border-yellow-500">{selectedPart.code}</span>
|
||
</h2>
|
||
|
||
<div className="space-y-4 p-4 border-2 border-neutral-900 bg-neutral-50 rounded-sm shadow-sm">
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-neutral-400 uppercase tracking-tighter">组件名称</label>
|
||
<input
|
||
type="text"
|
||
value={selectedPart.name}
|
||
onChange={e => updateField('name', e.target.value)}
|
||
className="w-full border-2 border-neutral-900 px-2 py-2 text-xs font-bold outline-none focus:bg-white transition-colors"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-neutral-400 uppercase tracking-tighter">编号代码</label>
|
||
<input
|
||
type="text"
|
||
value={selectedPart.code}
|
||
onChange={e => updateField('code', e.target.value)}
|
||
className="w-full border-2 border-neutral-900 px-2 py-2 text-xs font-bold outline-none focus:bg-white transition-colors"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-[10px] font-bold text-neutral-400 uppercase tracking-tighter">图片 URL</label>
|
||
<input
|
||
type="text"
|
||
value={selectedPart.img}
|
||
onChange={e => updateField('img', e.target.value)}
|
||
className="w-full border-2 border-neutral-900 px-2 py-2 text-[10px] font-bold outline-none focus:bg-white transition-colors"
|
||
/>
|
||
<img src={selectedPart.img} alt="" className="w-full h-20 object-contain bg-neutral-100 border border-neutral-200 mt-1" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* 排序 & 删除 */}
|
||
<div className="flex gap-2">
|
||
<button onClick={() => movePart(-1)} className="flex-1 py-2 border-2 border-neutral-900 text-[10px] font-black uppercase hover:bg-neutral-50 transition-all flex items-center justify-center gap-1 shadow-[3px_3px_0px_#ddd]">
|
||
<ChevronUp size={12} /> 上移
|
||
</button>
|
||
<button onClick={() => movePart(1)} className="flex-1 py-2 border-2 border-neutral-900 text-[10px] font-black uppercase hover:bg-neutral-50 transition-all flex items-center justify-center gap-1 shadow-[3px_3px_0px_#ddd]">
|
||
<ChevronDown size={12} /> 下移
|
||
</button>
|
||
</div>
|
||
<button
|
||
onClick={deletePart}
|
||
className="w-full py-2.5 bg-red-50 text-red-600 border-2 border-red-200 text-[10px] font-black hover:bg-red-600 hover:text-white transition-all flex items-center justify-center gap-2 uppercase tracking-tighter"
|
||
>
|
||
<Trash2 size={12} /> Delete_Node
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex-1 flex items-center justify-center p-8">
|
||
<div className="text-center text-neutral-300 text-[10px] font-bold uppercase italic border-2 border-dashed border-neutral-200 p-8 leading-relaxed">
|
||
<Target size={24} className="mx-auto mb-3 opacity-30" />
|
||
点击左侧列表或画布<br />节点以选中组件
|
||
</div>
|
||
</div>
|
||
)}
|
||
</aside>
|
||
)}
|
||
|
||
{/* ── 右侧主画布 ─────────────────────────────────── */}
|
||
<main
|
||
className="flex-1 relative flex flex-col items-center justify-center p-12 overflow-hidden"
|
||
onClick={() => isEditMode && setSelectedId(null)}
|
||
>
|
||
<div className="absolute inset-0 blueprint-grid" />
|
||
<div className="scan-effect" />
|
||
|
||
{/* 中心工业总成图 */}
|
||
<div className="relative w-full flex-1 max-w-4xl max-h-[35vh] flex items-center justify-center z-10">
|
||
{/* 角标 */}
|
||
<div className="absolute -inset-4 pointer-events-none opacity-40">
|
||
<div className="absolute top-0 left-0 w-12 h-12 border-t border-l border-neutral-600" />
|
||
<div className="absolute bottom-0 right-0 w-12 h-12 border-b border-r border-neutral-600" />
|
||
</div>
|
||
|
||
<img
|
||
src={assemblyImg}
|
||
className="max-w-full max-h-full object-contain assembly-view"
|
||
alt="Central Assembly System"
|
||
/>
|
||
|
||
{/* 编辑模式标注 */}
|
||
{isEditMode && (
|
||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||
<div className="border-2 border-dashed border-yellow-400/40 w-full h-full rounded-sm" />
|
||
<span className="absolute bottom-2 right-2 text-[8px] font-black text-yellow-500 uppercase bg-white/80 px-2 py-1 border border-yellow-300">
|
||
双击替换图片
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 底部组件导航 */}
|
||
<div
|
||
className="w-full max-w-[1300px] mt-12 flex justify-between z-20 pb-72 px-10"
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
{parts.map((part, index) => (
|
||
<PartNode
|
||
key={part.id}
|
||
part={part}
|
||
index={index}
|
||
isHovered={hoveredId === part.id}
|
||
isSelected={selectedId === part.id}
|
||
isEditMode={isEditMode}
|
||
onHover={setHoveredId}
|
||
onClick={(id) => setSelectedId(prev => prev === id ? null : id)}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{/* 预览模式按钮 */}
|
||
{!isEditMode && (
|
||
<div className="absolute bottom-12 flex flex-col items-center z-[120]">
|
||
<button
|
||
onClick={enterEdit}
|
||
className="bg-black text-white px-14 py-5 font-black uppercase text-[10px] tracking-[0.4em] shadow-[18px_18px_0px_#ccc] hover:shadow-none hover:translate-x-2.5 hover:translate-y-2.5 transition-all flex items-center gap-5 group border-2 border-neutral-900"
|
||
>
|
||
ENTER_EDIT_MODE <ChevronRight size={18} className="group-hover:translate-x-2 transition-transform" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
|
||
{/* ── 页脚 ───────────────────────────────────────── */}
|
||
<footer className="h-10 bg-white border-t-2 border-neutral-900 flex items-center justify-between px-8 text-[9px] font-bold text-neutral-300 uppercase tracking-[0.4em]">
|
||
<div className="flex gap-8 items-center">
|
||
<div className="flex items-center gap-2 text-neutral-900">
|
||
<Anchor size={12} className="opacity-20" />
|
||
<span className="tracking-widest opacity-70 italic">Disassembly_EditPreview</span>
|
||
</div>
|
||
<span className="opacity-20">|</span>
|
||
<span className="opacity-40 tracking-tighter">
|
||
{parts.length} NODE{parts.length !== 1 ? 'S' : ''} // {isEditMode ? 'EDIT' : 'PREVIEW'}_LOCK
|
||
</span>
|
||
</div>
|
||
<div className="flex gap-3 items-center">
|
||
<span className="text-neutral-900 font-black px-3 py-1 bg-neutral-50 border border-neutral-200">v1.0.0</span>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|