240 lines
11 KiB
HTML
240 lines
11 KiB
HTML
import React, { useState } from 'react';
|
|
import {
|
|
Layers,
|
|
Activity,
|
|
Settings,
|
|
Zap,
|
|
Cpu,
|
|
MousePointer2,
|
|
Anchor,
|
|
ChevronUp,
|
|
ChevronDown
|
|
} from 'lucide-react';
|
|
|
|
/**
|
|
* 工业草稿风格 v7.2.0 (视觉增强版)
|
|
* 核心优化：
|
|
* 1. 视觉聚焦：显著放大底部组件图标，提升细节可见度。
|
|
* 2. 极致简约：移除底部元数据标签，精简文字层次，聚焦核心名称。
|
|
* 3. 比例优化：维持 V 型交错布局，优化大尺寸图标下的物理连接感。
|
|
*/
|
|
|
|
const styles = `
|
|
@keyframes scanline {
|
|
0% { transform: translateY(-100%); }
|
|
100% { transform: translateY(100%); }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(300%); }
|
|
}
|
|
.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: all 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;
|
|
}
|
|
`;
|
|
|
|
const SYSTEM_PARTS = [
|
|
{ id: 'p1', name: '环境监控', code: 'ENV-X', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=200', link: '#' },
|
|
{ id: 'p2', name: '能源模组', code: 'BATT-V8', img: 'https://images.unsplash.com/photo-1619641259501-c88f28c6e355?auto=format&fit=crop&q=80&w=200', link: '#' },
|
|
{ id: 'p3', name: '雷达阵列', code: 'LDR-07', img: 'https://images.unsplash.com/photo-1555680202-c86f0e12f086?auto=format&fit=crop&q=80&w=200', link: '#' },
|
|
{ id: 'p4', name: '核心总成', code: 'CORE-MAX', img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=200', link: '#' },
|
|
{ id: 'p5', name: '液压单元', code: 'HYD-02', img: 'https://images.unsplash.com/photo-1635350736475-c8cef4b21906?auto=format&fit=crop&q=80&w=200', link: '#' },
|
|
{ id: 'p6', name: '散热单元', code: 'COOL-F2', img: 'https://images.unsplash.com/photo-1635350736475-c8cef4b21906?auto=format&fit=crop&q=80&w=200', link: '#' },
|
|
{ id: 'p7', name: '存储阵列', code: 'DATA-2T', img: 'https://images.unsplash.com/photo-1544006659-f0b21f04cb1d?auto=format&fit=crop&q=80&w=200', link: '#' }
|
|
];
|
|
|
|
const ASSEMBLY_IMAGE = "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=1600";
|
|
|
|
export default function App() {
|
|
const [hoveredId, setHoveredId] = useState(null);
|
|
|
|
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-16 border-b border-neutral-200 bg-white flex items-center justify-between px-10 z-50">
|
|
<div className="flex items-center gap-4">
|
|
<div className="p-2 bg-neutral-900 rounded-sm">
|
|
<Cpu size={20} className="text-white" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<h1 className="text-[13px] font-black uppercase tracking-[0.4em] leading-none text-neutral-900">Linear_Draft_Nav</h1>
|
|
<p className="text-[9px] text-neutral-400 mt-1 font-bold tracking-tighter">V7.2.0 // ENHANCED_VISUAL_ALIGN</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8 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"></div>
|
|
STATUS: NOMINAL
|
|
</span>
|
|
</div>
|
|
<div className="h-8 w-[1px] bg-neutral-100"></div>
|
|
<Settings size={18} className="hover:text-neutral-900 cursor-pointer transition-colors" />
|
|
</div>
|
|
</header>
|
|
|
|
{/* 主画布区域 */}
|
|
<main className="flex-1 relative flex flex-col items-center justify-center p-12 overflow-hidden">
|
|
<div className="absolute inset-0 blueprint-grid"></div>
|
|
<div className="scan-effect"></div>
|
|
|
|
{/* 中心工业总成图 */}
|
|
<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>
|
|
<div className="absolute bottom-0 right-0 w-12 h-12 border-b border-r border-neutral-600"></div>
|
|
</div>
|
|
|
|
<img
|
|
src={ASSEMBLY_IMAGE}
|
|
className="max-w-full max-h-full object-contain assembly-view"
|
|
alt="Central Assembly System"
|
|
/>
|
|
</div>
|
|
|
|
{/* 底部组件导航集 */}
|
|
<div className="w-full max-w-[1300px] mt-12 flex justify-between z-20 pb-72 px-10">
|
|
{SYSTEM_PARTS.map((part, index) => {
|
|
const isHovered = hoveredId === part.id;
|
|
const isUp = index % 2 === 0;
|
|
|
|
// --- 物理常量：优化后的图标与交错位移 ---
|
|
const ICON_SIZE = 80; // 放大图标容器 (原 64)
|
|
const CENTER_AXIS_Y = 180;
|
|
const OFFSET_Y = 40;
|
|
const boxTop = isUp ? CENTER_AXIS_Y - OFFSET_Y : CENTER_AXIS_Y + OFFSET_Y;
|
|
|
|
// --- 垂直引导线逻辑 ---
|
|
const SVG_CENTER_X = 50;
|
|
const SVG_CENTER_Y = 40; // 适配大尺寸图标的起始点
|
|
|
|
return (
|
|
<div
|
|
key={part.id}
|
|
onMouseEnter={() => setHoveredId(part.id)}
|
|
onMouseLeave={() => setHoveredId(null)}
|
|
className="group flex flex-col items-center cursor-pointer relative flex-1"
|
|
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={isHovered ? "#000" : "#f5f5f5"}
|
|
strokeWidth={isHovered ? "2.5" : "1"}
|
|
strokeDasharray={isHovered ? "none" : "3,3"}
|
|
className="leader-line-svg"
|
|
/>
|
|
<circle cx={SVG_CENTER_X} cy={SVG_CENTER_Y} r="2.5" fill={isHovered ? "#000" : "#e0e0e0"} />
|
|
<circle cx={SVG_CENTER_X} cy={boxTop} r={isHovered ? "4" : "2"} fill={isHovered ? "#000" : "#e0e0e0"} />
|
|
</svg>
|
|
|
|
{/* 图标节点 - 已放大图片尺寸 */}
|
|
<div
|
|
className={`relative flex items-center justify-center transition-all duration-500 z-10
|
|
${isHovered ? 'scale-110 -translate-y-2' : 'opacity-100 hover:opacity-100'}`}
|
|
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 && (
|
|
<div className="absolute inset-0 bg-neutral-900/5 blur-2xl rounded-full scale-125" />
|
|
)}
|
|
</div>
|
|
|
|
{/* 标签容器 - 移除底部元数据 */}
|
|
<div
|
|
className={`absolute flex flex-col items-center whitespace-nowrap text-label-container z-30
|
|
${isHovered ? (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
|
|
${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 ? '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
|
|
${isHovered ? 'text-neutral-900 scale-105' : 'text-neutral-400'}`}>
|
|
{part.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</main>
|
|
|
|
{/* 页脚 */}
|
|
<footer className="h-10 bg-white border-t border-neutral-100 flex items-center justify-between px-10 text-[9px] font-bold text-neutral-300 uppercase tracking-[0.4em]">
|
|
<div className="flex gap-10 items-center">
|
|
<div className="flex items-center gap-2 text-neutral-900">
|
|
<Anchor size={14} className="opacity-10" />
|
|
<span className="tracking-widest opacity-80 italic">Visual_Enhanced_Array</span>
|
|
</div>
|
|
<span className="opacity-10">|</span>
|
|
<span className="opacity-40 tracking-tighter">DESIGN_LOCK_V7.2.0</span>
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<span className="text-neutral-900 font-black px-3 py-1 bg-neutral-50 border border-neutral-100">B_7.2.0</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
} |