fc47801968
Some checks failed
ci/woodpecker/manual/woodpecker Pipeline failed
- Improve spacing and typography on product intro and scenarios pages - Add thumbnail click switching for architecture hardware showcase - Fix thumbnail click target and z-index overlap issues - Add .woodpecker.yml, Dockerfile, and docker-compose.yml for CI/CD - Set Vite base path to /lnbox/ for sub-path deployment
1599 lines
110 KiB
TypeScript
1599 lines
110 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { motion, AnimatePresence } from 'motion/react';
|
||
import {
|
||
Activity, ShieldCheck, Zap, Server, ChevronRight,
|
||
Database, Cpu, Cloud, Truck, Factory, Building, Target,
|
||
Leaf, AlertTriangle, Wind, Thermometer, Gauge, Navigation,
|
||
Settings, Battery, Link2, Share2, Search, LineChart, BarChart,
|
||
Radio, HardDrive, Network, MapPin, CheckCircle2, Factory as FactoryIcon, ShieldAlert, Workflow,
|
||
Maximize2, Eye, Sliders, Flame, Compass, RefreshCw
|
||
} from 'lucide-react';
|
||
|
||
// --- Import assets ---
|
||
import oneossBoxImage from './assets/images/oneoss_box_1779852084134.png';
|
||
import oneossSideFacet from './assets/images/oneoss_side_facet_1779862455874.png';
|
||
import oneossTopFacet from './assets/images/oneos_top_facet_1779864912925.png';
|
||
import scenarioFleetImage from './assets/images/scenario_fleet_1779863559233.png';
|
||
import scenarioStationImage from './assets/images/scenario_station_1779863574991.png';
|
||
import scenarioDatacenterImage from './assets/images/scenario_datacenter_1779863590420.png';
|
||
|
||
// --- Reusable Compact Architecture Component ---
|
||
|
||
const CompactArchCard = ({ title, children, className = "", headerClass = "bg-[#121212]" }: { title?: React.ReactNode, children: React.ReactNode, className?: string, headerClass?: string }) => (
|
||
<div className={`bg-[#0D0D0D]/90 border border-neutral-800/80 rounded shadow-lg flex flex-col overflow-hidden relative transition-all duration-300 hover:border-[#00F2FF]/40 ${className}`}>
|
||
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/20 to-transparent"></div>
|
||
{title && (
|
||
<div className={`${headerClass} px-3 py-1.5 border-b border-neutral-800/60 text-[10px] font-extrabold tracking-wider uppercase text-neutral-300 flex items-center justify-between`}>
|
||
{title}
|
||
</div>
|
||
)}
|
||
<div className="p-3 flex flex-col gap-2 flex-1 relative z-10 font-sans">
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
const CompactArchList = ({ items }: { items: { icon?: any, text: string, textEn?: string }[] }) => (
|
||
<ul className="flex flex-col gap-1.5 text-[10px] text-neutral-400">
|
||
{items.map((item, i) => {
|
||
const Icon = item.icon;
|
||
return (
|
||
<li key={i} className="flex items-start gap-1.5 leading-tight">
|
||
{Icon ? (
|
||
<Icon size={11} className="text-[#00F2FF] shrink-0 mt-[2px]" />
|
||
) : (
|
||
<div className="w-[3px] h-[3px] bg-[#00F2FF] rounded-full shadow-[0_0_4px_#00F2FF] shrink-0 mt-[6px]"></div>
|
||
)}
|
||
<div className="flex flex-col">
|
||
<span className="text-neutral-200">{item.text}</span>
|
||
{item.textEn && <span className="text-[8px] font-mono text-neutral-600 uppercase tracking-tight">{item.textEn}</span>}
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
);
|
||
|
||
type StylePreset = 'cyan' | 'amber' | 'crimson';
|
||
|
||
interface PerspectiveFacet {
|
||
id: string;
|
||
nameCn: string;
|
||
nameEn: string;
|
||
image: string;
|
||
descriptionCn: string;
|
||
descriptionEn: string;
|
||
specs: { label: string; value: string }[];
|
||
}
|
||
|
||
export default function App() {
|
||
const [activeTab, setActiveTab] = useState<'product_intro' | 'entity_diagram' | 'architecture' | 'scenarios'>('product_intro');
|
||
|
||
// Custom futuristic theme/preset selector state
|
||
const [styleTheme, setStyleTheme] = useState<StylePreset>('cyan');
|
||
|
||
// Interactive Perspective Switcher State
|
||
const [activeFacet, setActiveFacet] = useState<string>('top');
|
||
|
||
// Interactive Carbon Database Tab State
|
||
const [dbTab, setDbTab] = useState<'factors' | 'methodologies'>('factors');
|
||
|
||
// Architecture central hardware facet switcher
|
||
const [archFacet, setArchFacet] = useState<'top' | 'side' | 'iso'>('top');
|
||
const archFacetImages: Record<'top' | 'side' | 'iso', string> = {
|
||
top: oneossTopFacet,
|
||
side: oneossSideFacet,
|
||
iso: oneossBoxImage,
|
||
};
|
||
|
||
const themes = {
|
||
cyan: {
|
||
accent: '#00F2FF',
|
||
glow: 'shadow-[0_0_20px_rgba(0,242,255,0.25)]',
|
||
border: 'border-[#00F2FF]/30',
|
||
textAccent: 'text-[#00F2FF]',
|
||
bgAccent: 'bg-[#00F2FF]',
|
||
borderAccent: 'border-[#00F2FF]',
|
||
gradient: 'from-[#00F2FF] to-[#0066FF]',
|
||
radialGlow: 'bg-[#00F2FF]/5',
|
||
nameCn: '极光霓虹',
|
||
nameEn: 'Aurora Cyan'
|
||
},
|
||
amber: {
|
||
accent: '#FBBF24',
|
||
glow: 'shadow-[0_0_20px_rgba(251,191,36,0.25)]',
|
||
border: 'border-[#FBBF24]/30',
|
||
textAccent: 'text-[#FBBF24]',
|
||
bgAccent: 'bg-[#FBBF24]',
|
||
borderAccent: 'border-[#FBBF24]',
|
||
gradient: 'from-[#FBBF24] to-[#D97706]',
|
||
radialGlow: 'bg-[#FBBF24]/5',
|
||
nameCn: '航天鎏金',
|
||
nameEn: 'Aerospace Amber'
|
||
},
|
||
crimson: {
|
||
accent: '#EF4444',
|
||
glow: 'shadow-[0_0_20px_rgba(239,68,68,0.25)]',
|
||
border: 'border-[#EF4444]/30',
|
||
textAccent: 'text-[#EF4444]',
|
||
bgAccent: 'bg-[#EF4444]',
|
||
borderAccent: 'border-[#EF4444]',
|
||
gradient: 'from-[#EF4444] to-[#991B1B]',
|
||
radialGlow: 'bg-[#EF4444]/5',
|
||
nameCn: '聚变红核',
|
||
nameEn: 'Fusion Crimson'
|
||
}
|
||
};
|
||
|
||
const activeTheme = themes[styleTheme];
|
||
|
||
const facets: PerspectiveFacet[] = [
|
||
{
|
||
id: 'iso',
|
||
nameCn: '立体主视图',
|
||
nameEn: 'Isometric View',
|
||
image: oneossBoxImage,
|
||
descriptionCn: '全铝阳极氧化磨砂太空灰机壳，线条凝练锐利，边缘搭载可变色长条形高精度脉冲 LED 光斑状态指示器，彰显现代工业极简美学。',
|
||
descriptionEn: 'Anodized sandblasted space-gray aluminum casing with razor-sharp geometric contours, presenting active pulsating high-frequency pulse status LEDs.',
|
||
specs: [
|
||
{ label: 'Chassis Material', value: 'Anodized Aluminum' },
|
||
{ label: 'Ingress Rating', value: 'IP67 Waterproof' },
|
||
{ label: 'Operating Temp', value: '-40°C to +85°C' }
|
||
]
|
||
},
|
||
{
|
||
id: 'side',
|
||
nameCn: '连接器切面',
|
||
nameEn: 'Connector Detail',
|
||
image: oneossSideFacet,
|
||
descriptionCn: '机身侧部配置重工业级 M12 耐高负载密封金属插座，保障信号链路与大电流供应在多端复杂极端环境下的无损传输。',
|
||
descriptionEn: 'High-load heavy industrial M12 sealed metal connectors designed to safeguard physical connectivity under extreme multi-node environments.',
|
||
specs: [
|
||
{ label: 'Interface Type', value: 'M12 Industrial A-Coded' },
|
||
{ label: 'Contact Finish', value: 'Gold-Plated/Copper Alloy' },
|
||
{ label: 'Coupling Method', value: 'Threaded Locking Joint' }
|
||
]
|
||
},
|
||
{
|
||
id: 'top',
|
||
nameCn: '顶板盖透视图',
|
||
nameEn: 'Holographic Deck',
|
||
image: oneossTopFacet,
|
||
descriptionCn: '半透明暗色钢化玻璃盖板板底饰有沉金电路纹章，结合内部微弱背光结构，完美融合未来感科技韵味。',
|
||
descriptionEn: 'High-strength semi-translucent dark tempered glass with complex circuit tracing architecture embedded under subtle microchips array.',
|
||
specs: [
|
||
{ label: 'Panel Type', value: 'Corning Gorilla Glass v5' },
|
||
{ label: 'Thermal Shielding', value: 'Aerogel Thermal Layer' },
|
||
{ label: 'Chassis Pressure', value: 'Internal Relief Valves' }
|
||
]
|
||
}
|
||
];
|
||
|
||
const selectedFacet = facets.find(f => f.id === activeFacet) || facets[0];
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col font-sans selection:bg-neutral-800 selection:text-white bg-[#030303] text-[#E5E5E5] overflow-hidden">
|
||
|
||
{/* 1. Header Navigation */}
|
||
<header className="h-20 flex items-center justify-between px-6 md:px-12 border-b border-neutral-900 bg-[#060606] z-30 sticky top-0 flex-shrink-0">
|
||
<div className="flex items-center gap-4">
|
||
<div className="relative group">
|
||
<div className={`w-9 h-9 rounded-sm bg-gradient-to-br ${activeTheme.gradient} flex items-center justify-center transition-all ${activeTheme.glow}`}>
|
||
<div className="w-4 h-4 bg-[#030303] rounded-full" />
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col">
|
||
<span className="font-sans font-black tracking-[0.25em] text-sm text-white uppercase flex items-center gap-2 animate-fade-in">
|
||
ONEOS
|
||
<span className="text-[8.5px] font-mono tracking-wider px-1.5 py-0.5 rounded border border-[#00F2FF]/20 bg-[#00F2FF]/5 text-[#00F2FF] font-bold flex items-center gap-1 select-none">
|
||
<span className="w-1 h-1 rounded-full bg-[#00F2FF] animate-pulse inline-block" />
|
||
LNBOX
|
||
</span>
|
||
</span>
|
||
<span className="text-[7.5px] text-neutral-500 tracking-[0.12em] uppercase font-mono">AI COMPLIANT CARBON FACTOR & SINK MATRIX</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tab & Language Header Selector */}
|
||
<div className="flex items-center gap-2 md:gap-8">
|
||
<div className="flex items-center rounded-sm bg-neutral-950 p-[3px] border border-neutral-900">
|
||
<button
|
||
onClick={() => setActiveTab('product_intro')}
|
||
className={`px-3 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'product_intro' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
|
||
>
|
||
产品介绍 <span className="text-[8px] ml-0.5 opacity-50 font-mono hidden sm:inline">INTRO</span>
|
||
</button>
|
||
{/* 实体介绍图 Tab is temporarily hidden per user request */}
|
||
{/* <button
|
||
onClick={() => setActiveTab('entity_diagram')}
|
||
className={`px-3 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'entity_diagram' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
|
||
>
|
||
实体介绍图 <span className="text-[8px] ml-0.5 opacity-50 font-mono hidden sm:inline">DETAILS</span>
|
||
</button> */}
|
||
<button
|
||
onClick={() => setActiveTab('architecture')}
|
||
className={`px-3 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'architecture' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
|
||
>
|
||
逻辑架构 <span className="text-[8px] ml-0.5 opacity-50 font-mono hidden sm:inline">ARCH</span>
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('scenarios')}
|
||
className={`px-3 py-1.5 rounded-sm text-[11px] font-bold tracking-wider uppercase transition-all duration-300 ${activeTab === 'scenarios' ? 'bg-[#111111] text-white border border-neutral-800 shadow-inner' : 'text-neutral-500 hover:text-neutral-200'}`}
|
||
>
|
||
真实数据场景 <span className="text-[8px] ml-0.5 opacity-50 font-mono hidden sm:inline">SCENARIOS</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="h-6 w-px bg-neutral-900 hidden md:block"></div>
|
||
|
||
{/* Theme Preset Selector */}
|
||
<div className="hidden md:flex items-center gap-2">
|
||
<span className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest mr-1">Style Matrix:</span>
|
||
{(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
|
||
const t = themes[themeName];
|
||
return (
|
||
<button
|
||
key={themeName}
|
||
onClick={() => setStyleTheme(themeName)}
|
||
className={`w-6 h-6 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900 hover:border-neutral-700'}`}
|
||
title={`${t.nameCn} / ${t.nameEn}`}
|
||
>
|
||
<span className={`w-3 h-3 rounded-full ${t.bgAccent}`} />
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 2. Main Workspace */}
|
||
<main className="flex-1 w-full bg-[#080808] overflow-y-auto relative h-full">
|
||
|
||
{/* Futuristic Ambient Grid Overlay */}
|
||
<div className="fixed inset-0 z-0 pointer-events-none opacity-25">
|
||
<div className="absolute inset-0 bg-[radial-gradient(#1A1A1A_1px,transparent_1px)] [background-size:24px_24px]" />
|
||
<div className={`absolute top-[10%] right-[15%] w-[650px] h-[650px] ${activeTheme.radialGlow} blur-[180px] rounded-full`} />
|
||
<div className="absolute bottom-[5%] left-[5%] w-[550px] h-[550px] bg-blue-950/10 blur-[150px] rounded-full" />
|
||
</div>
|
||
|
||
<AnimatePresence mode="wait">
|
||
|
||
{/* =========================================================================
|
||
TAB: PRODUCT INTRO ("产品介绍")
|
||
========================================================================= */}
|
||
{activeTab === 'product_intro' && (
|
||
<motion.div
|
||
key="product_intro"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.4 }}
|
||
className="grid grid-cols-1 xl:grid-cols-12 w-full max-w-[1920px] mx-auto min-h-full divide-y xl:divide-y-0 xl:divide-x divide-neutral-900 relative z-10"
|
||
>
|
||
{/* LEFT INTRODUCTORY PANEL (Bilingual, Rich Copy) */}
|
||
<div className="col-span-1 xl:col-span-6 flex flex-col justify-start gap-8 p-6 md:p-12 lg:p-16 bg-[#090909]/90 relative">
|
||
|
||
{/* Style Palette Mobile Hotbar */}
|
||
<div className="flex md:hidden items-center justify-between p-3 rounded bg-neutral-950/60 border border-neutral-900 mb-6">
|
||
<span className="text-[10px] font-mono text-neutral-400">切换科技氛围</span>
|
||
<div className="flex gap-2">
|
||
{(['cyan', 'amber', 'crimson'] as StylePreset[]).map((themeName) => {
|
||
const t = themes[themeName];
|
||
return (
|
||
<button
|
||
key={themeName}
|
||
onClick={() => setStyleTheme(themeName)}
|
||
className={`w-5 h-5 rounded-full border flex items-center justify-center transition-all ${styleTheme === themeName ? 'border-white scale-110' : 'border-neutral-900'}`}
|
||
>
|
||
<span className={`w-2.5 h-2.5 rounded-full ${t.bgAccent}`} />
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-8">
|
||
{/* Small tag */}
|
||
<div className="flex items-center gap-2">
|
||
<span className={`w-2 h-2 rounded-full ${activeTheme.bgAccent} shadow-[0_0_8px_${activeTheme.accent}] animate-pulse`} />
|
||
<span className="font-mono text-[10px] tracking-[0.25em] text-[#00F2FF] uppercase font-bold">
|
||
ONEOS INDUSTRIAL V2.0 TERMINAL PROTOCOL
|
||
</span>
|
||
</div>
|
||
|
||
{/* Title Matrix */}
|
||
<div className="space-y-3">
|
||
<h1 className="text-4xl md:text-5xl lg:text-6.5xl font-extrabold tracking-tight text-white leading-[1.15] font-sans">
|
||
AI Carbon Factor & <br />
|
||
<span className="font-light tracking-tight text-neutral-400">
|
||
Hydrogen Safety Box
|
||
</span>
|
||
</h1>
|
||
<div className="flex items-center gap-3">
|
||
<h2 className="text-xl md:text-3xl font-bold tracking-tight">
|
||
<span className={`font-semibold ${activeTheme.textAccent}`}>LNBox </span>
|
||
<span className="text-white font-medium">AI 碳因子与碳汇智能终端</span>
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Copy Block in Chinese & English */}
|
||
<div className="space-y-4 max-w-xl text-neutral-400 text-sm leading-loose border-l-2 border-[#00F2FF]/40 pl-6 py-2">
|
||
<p className="font-sans font-light text-neutral-300">
|
||
LNBox 是连接氢能车辆与 OneOS AI 平台的车载智能网关，把车辆运行、可信里程、氢控状态、能耗和路线数据，转化为碳因子核算、碳汇资产识别、氢安全预警、续航预测和能源 AI 决策能力。
|
||
</p>
|
||
</div>
|
||
|
||
{/* Feature Pillars Highlights (Bilingual) */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5 border-t border-neutral-900 pt-8">
|
||
<div className="p-5 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||
<div className="absolute top-0 left-0 w-1 h-full bg-cyan-500/20" />
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="p-2 rounded bg-cyan-950/30 text-cyan-400">
|
||
<Cpu size={16} />
|
||
</div>
|
||
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">AI 碳因子引擎</span>
|
||
</div>
|
||
<p className="text-[12px] text-neutral-400 leading-relaxed mb-2">基于车型、路线、里程、能耗和场景数据，自动匹配碳因子并生成核算结果。</p>
|
||
<span className="text-[9px] font-mono text-neutral-500 block uppercase tracking-wider">AI CARBON FACTOR INFERENCE ENGINE</span>
|
||
</div>
|
||
|
||
<div className="p-5 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||
<div className="absolute top-0 left-0 w-1 h-full bg-emerald-500/20" />
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="p-2 rounded bg-emerald-950/30 text-emerald-400">
|
||
<Leaf size={16} />
|
||
</div>
|
||
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">碳汇资产识别</span>
|
||
</div>
|
||
<p className="text-[12px] text-neutral-400 leading-relaxed mb-2">将车辆减排、绿色运输和氢能替代数据沉淀为可追溯、可展示的碳汇资产。</p>
|
||
<span className="text-[9px] font-mono text-neutral-500 block uppercase tracking-wider">CARBON SINK ASSET RECOGNITION</span>
|
||
</div>
|
||
|
||
<div className="p-5 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||
<div className="absolute top-0 left-0 w-1 h-full bg-amber-500/20" />
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="p-2 rounded bg-amber-950/30 text-amber-400">
|
||
<Zap size={16} />
|
||
</div>
|
||
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">能源 AI 智能调度</span>
|
||
</div>
|
||
<p className="text-[12px] text-neutral-400 leading-relaxed mb-2">结合余氢、路线、加氢站资源与碳成本，支撑续航预测、补能决策和低碳调度。</p>
|
||
<span className="text-[9px] font-mono text-neutral-500 block uppercase tracking-wider">AUTONOMOUS ENERGY AI DISPATCH</span>
|
||
</div>
|
||
|
||
<div className="p-5 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
|
||
<div className="absolute top-0 left-0 w-1 h-full bg-[#00F2FF]/20" />
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<div className="p-2 rounded bg-[#00F2FF]/10 text-[#00F2FF]">
|
||
<ShieldCheck size={16} />
|
||
</div>
|
||
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">氢能安全可信底座</span>
|
||
</div>
|
||
<p className="text-[12px] text-neutral-400 leading-relaxed mb-2">监测氢气泄漏、压力、温度与阀控状态，为碳资产场景提供安全可信上下文。</p>
|
||
<span className="text-[9px] font-mono text-neutral-500 block uppercase tracking-wider">HYDROGEN SAFETY TELEMETRY NODE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT DISPLAY PANEL (Pure Hardware Display with Holographic Scanning Top Plat Cover) */}
|
||
<div className="col-span-1 xl:col-span-6 flex flex-col justify-center items-center p-6 md:p-12 lg:p-16 bg-[#050505] relative overflow-hidden">
|
||
<div className="absolute top-6 right-6 flex items-center gap-2 px-3 py-1.5 bg-neutral-950 border border-neutral-900 rounded font-mono text-[9px] text-[#00F2FF]">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#00F2FF] animate-ping" />
|
||
HEURISTIC ANALYTICS: ACTIVE SCANNING
|
||
</div>
|
||
|
||
<div className="w-full max-w-lg flex flex-col items-center">
|
||
<div className="text-center mb-8">
|
||
<span className="text-[10px] font-mono tracking-[0.3em] uppercase text-neutral-500">Holographic Deck Perspective</span>
|
||
<h3 className="text-xl font-bold tracking-widest text-[#FFF] uppercase mt-2">OneOS 顶板盖透视图</h3>
|
||
</div>
|
||
|
||
<div className="relative w-full aspect-square max-h-[360px] md:max-h-[420px] group border border-neutral-800 bg-[#0E0E0E]/95 shadow-[0_0_50px_rgba(0,0,0,0.85)] rounded-2xl flex items-center justify-center overflow-hidden p-8">
|
||
{/* Glowing background gradient reflecting thematic colors */}
|
||
<div className={`absolute -inset-2 bg-gradient-to-tr ${activeTheme.gradient} opacity-15 blur-2xl rounded-xl transition-all duration-700`} />
|
||
|
||
{/* Brand Identifier */}
|
||
<div className="absolute top-6 left-6 flex flex-col gap-1 text-left z-20">
|
||
<div className="font-sans font-black text-4xl tracking-wider text-[#00F2FF] leading-none drop-shadow-[0_0_10px_rgba(0,242,255,0.4)]">LN</div>
|
||
<div className="font-sans font-black text-xs tracking-[0.3em] text-white">ONEOS</div>
|
||
</div>
|
||
|
||
{/* Rotating Radar / Target scanner rings behind the main top cover plate */}
|
||
<div className="absolute inset-0 flex items-center justify-center opacity-30 pointer-events-none z-0">
|
||
<motion.div
|
||
animate={{ rotate: 360 }}
|
||
transition={{ duration: 30, repeat: Infinity, ease: 'linear' }}
|
||
className="w-[85%] h-[85%] rounded-full border border-dashed border-[#00F2FF]/40 flex items-center justify-center"
|
||
/>
|
||
<motion.div
|
||
animate={{ rotate: -360 }}
|
||
transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
|
||
className="absolute w-[60%] h-[60%] rounded-full border border-dotted border-[#00F2FF]/20"
|
||
/>
|
||
</div>
|
||
|
||
{/* Laser Sweeping Scanner Line */}
|
||
<motion.div
|
||
className="absolute left-0 right-0 h-[2.5px] bg-gradient-to-r from-transparent via-[#00F2FF] to-transparent shadow-[0_0_15px_#00F2FF] pointer-events-none z-10 opacity-80"
|
||
style={{
|
||
boxShadow: `0 0 15px ${activeTheme.accent}, 0 0 5px ${activeTheme.accent}`
|
||
}}
|
||
animate={{ top: ['4%', '96%', '4%'] }}
|
||
transition={{ repeat: Infinity, duration: 4.5, ease: "easeInOut" }}
|
||
/>
|
||
|
||
{/* Highly interactive cover view image with floating, tilt-breathing and hover scale */}
|
||
<motion.img
|
||
src={oneossTopFacet}
|
||
alt="OneOS Top Plate Facet View"
|
||
animate={{
|
||
y: [-6, 6, -6],
|
||
rotate: [-1, 1, -1]
|
||
}}
|
||
whileHover={{
|
||
scale: 1.05,
|
||
filter: "brightness(1.15) contrast(1.05)",
|
||
}}
|
||
transition={{
|
||
y: { repeat: Infinity, repeatType: "reverse", duration: 6, ease: "easeInOut" },
|
||
rotate: { repeat: Infinity, repeatType: "reverse", duration: 7, ease: "easeInOut" },
|
||
scale: { duration: 0.4 },
|
||
filter: { duration: 0.3 }
|
||
}}
|
||
className="w-full h-full object-contain max-h-[220px] md:max-h-[280px] transition-all relative z-10 select-none cursor-pointer filter brightness-[1.05]"
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
|
||
{/* Status annotations overlaid inside card corner borders */}
|
||
<div className="absolute top-6 right-6 font-mono text-[8px] text-neutral-500 text-right z-10 flex flex-col gap-0.5 select-none">
|
||
<div className="text-[#00F2FF]">RADAR_SYS: LOCKED</div>
|
||
<div>FACET_REFR: 0X4FA3</div>
|
||
</div>
|
||
|
||
<div className="absolute bottom-6 left-6 font-mono text-[8px] text-neutral-500 z-10 select-none">
|
||
<div>SPECS: GLASS v5 PORT PANEL</div>
|
||
<div>SHIELDING: NANO-AEROGEL</div>
|
||
</div>
|
||
|
||
<div className="absolute bottom-6 right-6 font-mono text-[9px] text-neutral-500 text-right space-y-0.5 z-10">
|
||
<div>MODEL_NO: LNBOX-TOP-V2</div>
|
||
<div className="text-emerald-400 font-bold">DECK_HOLOGRAPHIC: ACTIVE</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* =========================================================================
|
||
TAB: ENTITY DIAGRAM ("实体介绍图")
|
||
========================================================================= */}
|
||
{activeTab === 'entity_diagram' && (
|
||
<motion.div
|
||
key="entity_diagram"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.4 }}
|
||
className="grid grid-cols-1 xl:grid-cols-12 w-full max-w-[1920px] mx-auto min-h-full divide-y xl:divide-y-0 xl:divide-x divide-neutral-900 relative z-10"
|
||
>
|
||
{/* LEFT INTRODUCTORY PANEL (Technical Specifications) */}
|
||
<div className="col-span-1 xl:col-span-5 flex flex-col justify-start gap-6 p-6 md:p-12 lg:p-16 bg-[#090909]/95 relative">
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#00F2FF] shadow-[0_0_6px_#00F2FF]" />
|
||
<span className="font-mono text-[9px] tracking-widest text-[#00F2FF] uppercase font-bold">PHYSICAL HARDWARE ASSEMBLY SPECS</span>
|
||
</div>
|
||
<h2 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">实体物性与物性参数</h2>
|
||
<p className="text-xs text-neutral-400 leading-relaxed font-sans mt-1">
|
||
LNBox 车载端具备高难度恶劣物理环境下的极高保障标准：外壳选用全阳极氧化太空铝，接口件选用耐振动重工业螺纹锁定 joint，配合内置气凝胶保温层，满足宽温极限和全天候低碳调度场景监测。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="border-t border-neutral-900 pt-6 space-y-4">
|
||
<span className="text-[10px] font-mono text-neutral-500 uppercase tracking-widest block font-bold">物理属性一览表 / HARDWARE ATTRIBUTES</span>
|
||
<div className="grid grid-cols-1 gap-3">
|
||
{[
|
||
{ key: '整机尺寸 / Dimensions', value: '185mm x 140mm x 55mm' },
|
||
{ key: '防尘防水级别 / Ingress Rating', value: 'IP67 Heavy Waterproof Seal' },
|
||
{ key: '宽温工作环境 / Operating Temp', value: '-40°C to +85°C Aerospace Standard' },
|
||
{ key: '连接插座规格 / Interface Connectors', value: 'M12 Heavy Industrial Thread Locking' },
|
||
{ key: '外壳制作工艺 / Chassis Engineering', value: 'Anodized Space-Gray Aluminum sandblasing' },
|
||
{ key: '内置热物理屏蔽 / Thermal Protection', value: 'Nano-Aerogel Ultra-thin Thermal Shielding' },
|
||
].map((item, idx) => (
|
||
<div key={idx} className="p-3 rounded border border-neutral-900 bg-neutral-950/30 flex justify-between items-center text-xs">
|
||
<span className="text-neutral-400 font-medium">{item.key}</span>
|
||
<span className="font-mono text-[#00F2FF] text-[11px] font-bold">{item.value}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT VIEWPOINT SWITCHER */}
|
||
<div className="col-span-1 xl:col-span-7 flex flex-col justify-between p-6 md:p-12 lg:p-16 bg-[#050505] relative overflow-hidden">
|
||
<div className="absolute top-6 right-6 flex items-center gap-2 px-3 py-1 bg-neutral-950 border border-neutral-900 rounded font-mono text-[9px] text-neutral-400">
|
||
<span className={`w-1.5 h-1.5 rounded-full ${activeTheme.bgAccent}`} />
|
||
DECKS MATRIX ACTIVE: {selectedFacet.nameEn}
|
||
</div>
|
||
|
||
<div className="flex flex-col justify-start items-center pt-2 pb-2">
|
||
<div className="text-center mb-4">
|
||
<div className="text-[10px] font-mono tracking-[0.3em] uppercase text-neutral-500">Live Render Viewpoint</div>
|
||
<div className="text-xl font-bold tracking-widest text-[#FFF] uppercase mt-1 flex items-center justify-center gap-2">
|
||
<span>{selectedFacet.nameCn}</span>
|
||
<span className="text-neutral-500">/</span>
|
||
<span className={`text-xs ${activeTheme.textAccent} font-mono font-medium`}>{selectedFacet.nameEn}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative w-full max-w-lg mt-1 group flex flex-col justify-center h-[210px] md:h-[260px]">
|
||
<div className={`absolute -inset-2 bg-gradient-to-tr ${activeTheme.gradient} opacity-10 blur-xl rounded-xl transition-all duration-700`} />
|
||
<div className="relative border border-neutral-800/80 bg-[#0E0E0E]/95 shadow-[0_0_50px_rgba(0,0,0,0.8)] p-6 rounded flex items-center justify-center h-full overflow-hidden">
|
||
<div className="absolute top-6 left-6 z-20 select-none flex flex-col gap-1 text-left">
|
||
<div className="font-sans font-black text-3xl md:text-4xl tracking-wider text-[#00F2FF] leading-none drop-shadow-[0_0_10px_rgba(0,242,255,0.5)]">
|
||
LN
|
||
</div>
|
||
<div className="font-sans font-black text-xs md:text-sm tracking-[0.3em] text-white/90 leading-none">
|
||
ONEOS
|
||
</div>
|
||
</div>
|
||
|
||
<AnimatePresence mode="wait">
|
||
<motion.img
|
||
key={selectedFacet.id}
|
||
src={selectedFacet.image}
|
||
alt={selectedFacet.nameCn}
|
||
initial={{ opacity: 0, scale: 0.94 }}
|
||
animate={{
|
||
opacity: 1,
|
||
scale: 1,
|
||
y: [-3, 3, -3]
|
||
}}
|
||
exit={{ opacity: 0, scale: 0.94 }}
|
||
transition={{
|
||
opacity: { duration: 0.3 },
|
||
scale: { duration: 0.3 },
|
||
y: { repeat: Infinity, repeatType: "reverse", duration: 5, ease: "easeInOut" }
|
||
}}
|
||
className="w-full h-full object-contain max-h-[150px] md:max-h-[190px] object-center opacity-95 brightness-[1.05]"
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
</AnimatePresence>
|
||
|
||
<div className="absolute top-4 right-4 font-mono text-[7px] text-neutral-600 flex flex-col text-right">
|
||
<span>OCTANE_RENDER_V6_HD</span>
|
||
<span>GRID_LOCK_ALGN [OK]</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Micro specs descriptors */}
|
||
<div className="w-full max-w-lg mt-4 grid grid-cols-3 gap-2 shrink-0">
|
||
{selectedFacet.specs.map((item, idx) => (
|
||
<div key={idx} className="bg-[#090909] p-2 border border-neutral-900 flex flex-col rounded">
|
||
<span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wider">{item.label}</span>
|
||
<span className="text-[10px] font-bold text-neutral-200 mt-0.5 truncate">{item.value}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Micro Thumbnail Selector at the bottom */}
|
||
<div className="border-t border-neutral-900/40 pt-4 mt-2 shrink-0">
|
||
<div className="grid grid-cols-3 gap-3 max-w-lg mx-auto">
|
||
{facets.map((facet) => {
|
||
const isSelected = activeFacet === facet.id;
|
||
return (
|
||
<button
|
||
key={facet.id}
|
||
onClick={() => setActiveFacet(facet.id)}
|
||
className={`group flex flex-col items-center p-1.5 border rounded bg-[#070707] transition-all duration-300 ${isSelected ? `border-white ring-1 ring-white/10 ${activeTheme.glow}` : 'border-neutral-900 hover:border-neutral-700/60'}`}
|
||
>
|
||
<div className="w-full aspect-[4/3] rounded bg-[#0A0A0A] border border-neutral-900 overflow-hidden flex items-center justify-center p-1 mb-1.5">
|
||
<img
|
||
src={facet.image}
|
||
alt={facet.nameCn}
|
||
className={`max-h-full max-w-full object-contain filter duration-350 ${isSelected ? 'brightness-[1.1] opacity-100 scale-105' : 'brightness-90 opacity-70 scale-100 group-hover:scale-105'}`}
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
</div>
|
||
<span className={`text-[10px] font-bold tracking-tight leading-tight ${isSelected ? activeTheme.textAccent : 'text-neutral-400'}`}>
|
||
{facet.nameCn}
|
||
</span>
|
||
<span className="text-[7.5px] font-mono text-neutral-500 uppercase tracking-wide mt-0.5">
|
||
{facet.nameEn}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* =========================================================================
|
||
TAB: CORE LOGICAL ARCHITECTURE FLOW (Bilingual & Exactly Matching Attached Diagram)
|
||
========================================================================= */}
|
||
{activeTab === 'architecture' && (
|
||
<motion.div
|
||
key="architecture"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.4 }}
|
||
className="w-full h-full xl:max-h-[calc(100vh-140px)] flex flex-col items-center justify-start gap-4 p-3 md:p-5 lg:p-6 z-10 relative overflow-y-auto"
|
||
>
|
||
|
||
{/* Architecture Title block with both ENG and CN */}
|
||
<div className="text-center mb-1 max-w-2xl px-4 flex-shrink-0">
|
||
<div className="inline-flex items-center gap-2 px-2 py-0.5 bg-[#121212]/80 border border-neutral-800 text-[9px] uppercase tracking-widest text-[#00F2FF] rounded font-mono mb-1">
|
||
Logical Data Flow and System Infrastructure
|
||
</div>
|
||
<h2 className="text-xl md:text-2xl font-light tracking-tight text-white mb-0.5">
|
||
OneOS AI 氢能盒子 - <span className="font-extrabold text-[#00F2FF] tracking-wide">核心逻辑架构图</span>
|
||
</h2>
|
||
<p className="text-[9px] font-mono text-neutral-500 uppercase tracking-widest">
|
||
BI-LINGUAL SCHEMATIC FLOW CHART • 100% FULL-SCREEN COCKPIT
|
||
</p>
|
||
</div>
|
||
|
||
{/* Exact column layout with custom bidirectional connectors */}
|
||
<div className="w-full max-w-[1780px] mx-auto flex flex-col xl:flex-row gap-2.5 items-stretch relative flex-1 xl:min-h-[580px] min-w-0">
|
||
|
||
{/* COLUMN 1: 数据采集层 (Data Capture Layer, ~18% width) */}
|
||
<div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
|
||
<div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
|
||
<div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">数据采集层</div>
|
||
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Data Capture Matrix</div>
|
||
</div>
|
||
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5"><Settings size={11} className="text-[#00F2FF]"/><span>车辆/设备数据</span></div>} className="flex-[1.3_1.3_0%]">
|
||
<CompactArchList items={[
|
||
{ text: 'OBD/VCU', textEn: 'Vehicle Controller' },
|
||
{ text: '电池系统', textEn: 'BMS monitoring' },
|
||
{ text: '氢系统传感器', textEn: 'Hydrogen sensors' },
|
||
{ text: '压力传感器', textEn: 'Pressure metrics' },
|
||
{ text: '温度传感器', textEn: 'Temperature status' },
|
||
{ text: '其他传感器', textEn: 'Auxiliary metrics' },
|
||
]} />
|
||
</CompactArchCard>
|
||
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>环境数据</span></div>} className="flex-1">
|
||
<CompactArchList items={[
|
||
{ text: '气体浓度', textEn: 'H2 Gas Sniffer' },
|
||
{ text: '环境温湿度', textEn: 'Cabinet temperature' },
|
||
{ text: '定位信息', textEn: 'GNSS coordinates' },
|
||
]} />
|
||
</CompactArchCard>
|
||
</div>
|
||
|
||
{/* FLOW CONNECTOR 1: Left to Center (Capture <-> AI Core) */}
|
||
<div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
|
||
<div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
|
||
{/* Left/Top arrowhead */}
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||
<path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
{/* Glowing vertical path */}
|
||
<div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
|
||
{/* Right/Bottom arrowhead */}
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||
<path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* COLUMN 2: ONEOS AI 氢能盒子 (Intelligent Core Box Node, Flex-1) */}
|
||
<div className="flex-1 flex flex-col gap-2 p-2.5 border border-neutral-800 bg-[#040404]/90 rounded shadow-2xl relative min-w-[320px] xl:min-h-[560px]">
|
||
{/* Glowing halo behind box node */}
|
||
<div className={`absolute inset-0 bg-gradient-to-b ${activeTheme.radialGlow} to-transparent rounded z-0 pointer-events-none opacity-20`} />
|
||
|
||
<div className="p-1 bg-[#000] border border-neutral-900 rounded text-center z-10 shrink-0">
|
||
<div className={`text-[11px] font-extrabold tracking-[0.15em] ${activeTheme.textAccent} uppercase`}>
|
||
OneOS AI 氢能盒子
|
||
</div>
|
||
<div className="text-[7px] font-mono text-neutral-500 uppercase">LNbox Core Hardware Hub</div>
|
||
</div>
|
||
|
||
{/* 3-Column Internal Layout: Modules - Central Hardware - Modules */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-2 items-stretch flex-1 z-10 min-h-0 min-w-0 py-1">
|
||
|
||
{/* Left Sub-column: Safety & Carbon */}
|
||
<div className="flex flex-col gap-2 h-full justify-between overflow-hidden">
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-red-400 font-extrabold"><ShieldAlert size={11} /><span>氢安全管理模块</span></div>} className="flex-1">
|
||
<CompactArchList items={[
|
||
{ text: '泄漏监测', textEn: 'Liquid H2 gas leakage' },
|
||
{ text: '压力监测', textEn: 'Chassis pressure variables' },
|
||
{ text: '温度监测', textEn: 'Thermal safety telemetry' },
|
||
{ text: '风险预警', textEn: 'Instant warning algorithms' },
|
||
{ text: '自动/远程干预 (预留)', textEn: 'Pre-emptive emergency isolation' },
|
||
]} />
|
||
</CompactArchCard>
|
||
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-[#00F2FF] font-extrabold"><Leaf size={11} /><span>碳因子管理模块</span></div>} className="flex-1">
|
||
<CompactArchList items={[
|
||
{ text: '碳数据采集', textEn: 'Realtime carbon footprint ingesting' },
|
||
{ text: '碳因子计算', textEn: 'Bilingual translation analytics' },
|
||
{ text: '碳资产关联', textEn: 'Clean credits assignment' },
|
||
{ text: '碳数据上链 (预留)', textEn: 'Secure blockchain accounting' },
|
||
]} />
|
||
</CompactArchCard>
|
||
</div>
|
||
|
||
{/* Central Sub-column: Interactive Hardware Showcase */}
|
||
<div className="flex flex-col border border-neutral-800/80 rounded bg-[#070707] p-2 justify-between gap-2 relative z-10 group">
|
||
{/* Interactive circuit-like subtle glow */}
|
||
<div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/40 to-transparent"></div>
|
||
|
||
<div className="relative w-full flex-1 border border-neutral-900 rounded bg-[#0A0A0A] p-2 flex flex-col items-center justify-center overflow-hidden min-h-[140px]">
|
||
<motion.img
|
||
key={archFacet}
|
||
src={archFacetImages[archFacet]}
|
||
alt="OneOS AI Hardware"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.25 }}
|
||
className="w-full h-full max-h-[110px] object-contain opacity-95 brightness-[1.1]"
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
|
||
{/* Custom status overlays */}
|
||
<div className="absolute top-1.5 left-2 px-1.5 py-0.5 rounded bg-black/80 border border-neutral-800 text-[8px] font-mono font-extrabold text-[#00F2FF] shadow-[0_0_8px_rgba(0,186,255,0.4)]">
|
||
LN
|
||
</div>
|
||
<div className="absolute bottom-1.5 right-2 px-1.5 py-0.5 rounded bg-neutral-900/90 border border-neutral-800 text-[8px] font-mono font-black text-white tracking-widest leading-none">
|
||
ONEOS
|
||
</div>
|
||
</div>
|
||
|
||
{/* Small operational thumbnails */}
|
||
<div className="grid grid-cols-3 gap-1 shrink-0 relative z-20">
|
||
{([
|
||
{ id: 'top' as const, img: oneossTopFacet, label: 'Top' },
|
||
{ id: 'side' as const, img: oneossSideFacet, label: 'Side' },
|
||
{ id: 'iso' as const, img: oneossBoxImage, label: 'ISO' },
|
||
]).map((facet) => (
|
||
<button
|
||
key={facet.id}
|
||
onClick={() => setArchFacet(facet.id)}
|
||
className={`border rounded bg-[#101010] p-1 flex items-center justify-center h-[38px] transition-all cursor-pointer relative ${archFacet === facet.id ? 'border-[#00F2FF] ring-1 ring-[#00F2FF]/20' : 'border-neutral-800 hover:border-[#00F2FF]/50'}`}
|
||
>
|
||
<img src={facet.img} alt={facet.label} className="max-h-full max-w-full object-contain pointer-events-none" referrerPolicy="no-referrer" />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Sub-column: AI Analyzers & Device Management */}
|
||
<div className="flex flex-col gap-2 h-full justify-between overflow-hidden">
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-amber-400 font-extrabold"><Cpu size={11} /><span>AI分析决策模块</span></div>} className="flex-1">
|
||
<CompactArchList items={[
|
||
{ text: '数据分析', textEn: 'High freq operational analysis' },
|
||
{ text: '风险预测', textEn: 'Predictive security forecasting' },
|
||
{ text: '故障诊断', textEn: 'Automated modular diagnostics' },
|
||
{ text: '能耗优化', textEn: 'Energy efficient constraints' },
|
||
{ text: '智能决策', textEn: 'Autonomous hardware decisions' },
|
||
]} />
|
||
</CompactArchCard>
|
||
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5 text-neutral-200 font-extrabold"><Sliders size={11} /><span>设备管理模块</span></div>} className="flex-1">
|
||
<CompactArchList items={[
|
||
{ text: '设备状态监控', textEn: 'Node integrity health checks' },
|
||
{ text: '远程升级', textEn: 'Over-The-Air OTA flash' },
|
||
{ text: '故障告警', textEn: 'Telemetry fault alerting' },
|
||
{ text: '运行日志管理', textEn: 'Secure operational metrics logs' },
|
||
]} />
|
||
</CompactArchCard>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Vertical flow connector pointing up from Data Security to Central Hardware */}
|
||
<div className="flex lg:grid lg:grid-cols-3 shrink-0 h-4 lg:h-5 justify-center items-center relative select-none z-10 -my-1 pointer-events-none">
|
||
<div className="hidden lg:block"></div> {/* Left empty */}
|
||
<div className="flex flex-col items-center justify-center text-[#00F2FF] animate-pulse">
|
||
{/* Arrowhead pointing UP */}
|
||
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" className="rotate-180 mb-[2px]">
|
||
<path d="M5 0L10 7H0L5 0Z" fill="#00F2FF" />
|
||
</svg>
|
||
{/* Vertical line with glow */}
|
||
<div className="w-[1.5px] h-3 lg:h-4 bg-gradient-to-t from-[#00F2FF]/10 via-[#00F2FF]/80 to-[#00F2FF] shadow-[0_0_8px_rgba(0,242,255,0.8)]" />
|
||
</div>
|
||
<div className="hidden lg:block"></div> {/* Right empty */}
|
||
</div>
|
||
|
||
{/* Stretching bottom card: 数据安全模块 */}
|
||
<div className="border border-neutral-900 bg-neutral-950/80 rounded p-2 z-10 shrink-0">
|
||
<div className="text-[8px] font-mono font-bold uppercase tracking-widest text-[#00F2FF]/70 text-center mb-1 bg-black/40 py-0.5 rounded border border-neutral-900">
|
||
数据安全模块 (Data Security Framework)
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||
<ShieldCheck size={11} className="text-[#00F2FF] mb-0.5" />
|
||
<span className="text-[9px] font-extrabold text-neutral-200">数据加密</span>
|
||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">AES/ECC</span>
|
||
</div>
|
||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||
<Settings size={11} className="text-[#00F2FF] mb-0.5" />
|
||
<span className="text-[9px] font-extrabold text-neutral-200">权限管理</span>
|
||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">RBAC Mode</span>
|
||
</div>
|
||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||
<Database size={11} className="text-[#00F2FF] mb-0.5" />
|
||
<span className="text-[9px] font-extrabold text-neutral-200">安全存储</span>
|
||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">Enclave Vault</span>
|
||
</div>
|
||
<div className="bg-[#090909] border border-neutral-900/60 p-1 rounded flex flex-col items-center justify-center text-center">
|
||
<Link2 size={11} className="text-[#00F2FF] mb-0.5" />
|
||
<span className="text-[9px] font-extrabold text-neutral-200">可信通信</span>
|
||
<span className="text-[6.5px] font-mono text-neutral-500 leading-none mt-0.5">TLS Tunneling</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* FLOW CONNECTOR 2: Center to Cloud (AI Core <-> Cloud AIoT) */}
|
||
<div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
|
||
<div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||
<path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
<div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||
<path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* COLUMN 3: OneOS 云平台 (OneOS AIoT Cloud Platform, ~18% width) */}
|
||
<div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
|
||
<div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
|
||
<div className="text-[10px] font-bold tracking-[0.1em] text-[#00F2FF] uppercase">OneOS 云平台</div>
|
||
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Core AIoT Cloud</div>
|
||
</div>
|
||
|
||
<CompactArchCard title={<div className="flex items-center gap-1.5"><Cloud size={11} className="text-[#00F2FF]"/><span>OneOS AIoT 平台</span></div>} className="flex-1">
|
||
{/* Futuristic Large Cloud core visualization panel */}
|
||
<div className="h-[120px] lg:h-[155px] w-full border border-cyan-500/20 bg-gradient-to-b from-[#080E16] to-[#040609] rounded-lg relative flex flex-col items-center justify-center mb-2.5 p-3 overflow-hidden group shadow-[inset_0_1px_12px_rgba(0,242,255,0.08)] shrink-0">
|
||
{/* Abstract grid matrix */}
|
||
<div className="absolute inset-0 opacity-[0.06] bg-[linear-gradient(to_right,#00F2FF_1px,transparent_1px),linear-gradient(to_bottom,#00F2FF_1px,transparent_1px)] bg-[size:10px_10px]" />
|
||
|
||
{/* Pulsing orbital rings */}
|
||
<div className="absolute w-20 h-20 rounded-full border border-[#00F2FF]/5 animate-[spin_12s_linear_infinite]" />
|
||
<div className="absolute w-24 h-24 rounded-full border border-dashed border-[#00F2FF]/5 animate-[spin_24s_linear_infinite]" />
|
||
|
||
{/* Main cloud glowing structure */}
|
||
<div className="relative flex items-center justify-center text-[#00F2FF] p-3 bg-[#0c1a24]/45 border border-cyan-400/20 rounded-xl shadow-[0_0_15px_rgba(0,242,255,0.1)] mb-1.5 hover:scale-105 transition-transform duration-300">
|
||
<Cloud size={28} className="animate-pulse duration-1000" />
|
||
<div className="absolute inset-0 bg-[#00F2FF] opacity-15 blur-md rounded-full" />
|
||
<div className="absolute -top-1 -right-1 w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping" />
|
||
</div>
|
||
|
||
{/* Description & name */}
|
||
<span className="text-[9px] font-extrabold text-cyan-400 tracking-widest font-mono uppercase">OneOS Cloud Hub</span>
|
||
<span className="text-[7px] font-mono text-neutral-500 tracking-wider text-center max-w-[85%] mt-0.5 uppercase">Omni AIoT Control Core</span>
|
||
|
||
{/* Flowing particle stream */}
|
||
<div className="flex gap-1.5 mt-2 items-center justify-center">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce" />
|
||
<div className="w-4 h-[1px] bg-gradient-to-r from-cyan-500/20 via-cyan-400 to-cyan-500/20" />
|
||
<div className="w-[3px] h-[3px] rounded-full bg-cyan-400 animate-bounce delay-150" />
|
||
</div>
|
||
</div>
|
||
|
||
<CompactArchList items={[
|
||
{ text: '数据存储与计算', textEn: 'Storage & Distributed computing' },
|
||
{ text: 'AI模型训练与优化', textEn: 'Neural model continuous training' },
|
||
{ text: '可视化监控大屏', textEn: 'Omni-channel control boards' },
|
||
{ text: '运营管理系统', textEn: 'Integrated management suite' },
|
||
{ text: '开放API服务', textEn: 'Standard programmatic endpoint' },
|
||
]} />
|
||
</CompactArchCard>
|
||
</div>
|
||
|
||
{/* FLOW CONNECTOR 3: Cloud to Applications (Cloud AIoT <-> Scenario Scopes) */}
|
||
<div className="flex xl:flex-col items-center justify-center shrink-0 py-1 xl:py-0 px-2 select-none">
|
||
<div className="flex flex-row xl:flex-col items-center gap-1.5 text-[#00F2FF] animate-pulse">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||
<path d="M9 2L3 6L9 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
<div className="w-8 xl:w-[2px] h-[3px] xl:h-28 bg-gradient-to-r xl:bg-gradient-to-b from-[#00F2FF] via-[#00F2FF]/60 to-[#00F2FF] shadow-[0_0_12px_rgba(0,242,255,0.8)]" />
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="rotate-0 xl:-rotate-90">
|
||
<path d="M3 2L9 6L3 10" stroke="#00F2FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* COLUMN 4: 应用场景 (Operational Scenarios Layer, ~18% width) */}
|
||
<div className="flex flex-col gap-2 p-2 bg-neutral-950/50 rounded border border-neutral-900/40 relative w-full xl:w-[18%] shrink-0">
|
||
<div className="p-1 bg-[#0F0F0F] border border-neutral-900 rounded text-center shrink-0">
|
||
<div className="text-[10px] font-bold tracking-[0.15em] text-white uppercase">应用场景</div>
|
||
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Operational Scenarios</div>
|
||
</div>
|
||
|
||
{/* Scenario 1: Fleet Operations */}
|
||
<div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-[#00F2FF]/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
|
||
<div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
|
||
<div className="w-[15px] h-[15px] bg-cyan-950/45 border border-cyan-900/45 rounded flex items-center justify-center text-cyan-400">
|
||
<Truck size={9} />
|
||
</div>
|
||
<span className="text-[10px] font-extrabold text-neutral-200">氢能车队运营</span>
|
||
<span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Fleet</span>
|
||
</div>
|
||
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
|
||
<div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
|
||
<img src={scenarioFleetImage} alt="Fleet" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
|
||
</div>
|
||
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[9px] leading-tight pl-0.5 overflow-hidden">
|
||
<div className="flex items-center gap-1 truncate">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF] shadow-[0_0_3px_#00F2FF] shrink-0" />
|
||
<span className="text-neutral-200 font-sans">车辆监控 • 运营调度</span>
|
||
</div>
|
||
<div className="flex items-center gap-1 truncate">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-[#00F2FF]/30 shrink-0" />
|
||
<span className="text-neutral-400 font-sans">能耗管理 • 安全预警</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scenario 2: Refueling Station Operations */}
|
||
<div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-amber-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
|
||
<div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
|
||
<div className="w-[15px] h-[15px] bg-amber-950/45 border border-amber-900/45 rounded flex items-center justify-center text-amber-400">
|
||
<FactoryIcon size={9} />
|
||
</div>
|
||
<span className="text-[10px] font-extrabold text-neutral-200">加氢站运营</span>
|
||
<span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Station</span>
|
||
</div>
|
||
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
|
||
<div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
|
||
<img src={scenarioStationImage} alt="Station" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
|
||
</div>
|
||
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[9px] leading-tight pl-0.5 overflow-hidden">
|
||
<div className="flex items-center gap-1 truncate">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-amber-400 shadow-[0_0_3px_#fbbf24] shrink-0" />
|
||
<span className="text-neutral-200 font-sans">氢源调度 • 加氢优化</span>
|
||
</div>
|
||
<div className="flex items-center gap-1 truncate">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-amber-400/30 shrink-0" />
|
||
<span className="text-neutral-400 font-sans">库存管理 • 安全监管</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scenario 3: Energy & Data Center Computes */}
|
||
<div className="bg-[#090909]/90 border border-neutral-800/80 rounded p-1.5 flex flex-col hover:border-red-400/45 transition-all flex-1 justify-between min-h-0 overflow-hidden group">
|
||
<div className="flex items-center gap-1 pb-1 border-b border-neutral-900 shrink-0">
|
||
<div className="w-[15px] h-[15px] bg-red-950/45 border border-red-900/45 rounded flex items-center justify-center text-red-500">
|
||
<Server size={9} />
|
||
</div>
|
||
<span className="text-[10px] font-extrabold text-neutral-200">能源/算力中心</span>
|
||
<span className="text-[7px] font-mono text-neutral-500 ml-auto uppercase hidden lg:block">Center</span>
|
||
</div>
|
||
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
|
||
<div className="w-13 h-9 lg:w-[60px] lg:h-[42px] rounded border border-neutral-800 shrink-0 overflow-hidden relative shadow-md">
|
||
<img src={scenarioDatacenterImage} alt="Data Center" className="w-full h-full object-cover opacity-90 brightness-[1.05] group-hover:scale-105 transition-transform duration-300" referrerPolicy="no-referrer" />
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
|
||
</div>
|
||
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[9px] leading-tight pl-0.5 overflow-hidden">
|
||
<div className="flex items-center gap-1 truncate">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-red-400 shadow-[0_0_3px_#f87171] shrink-0" />
|
||
<span className="text-neutral-200 font-sans">能耗优化 • 安全监测</span>
|
||
</div>
|
||
<div className="flex items-center gap-1 truncate">
|
||
<div className="w-[3px] h-[3px] rounded-full bg-red-400/30 shrink-0" />
|
||
<span className="text-neutral-400 font-sans">运维管理 • 智能决策</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Bottom value matrix (价值输出层 中英双语) */}
|
||
<div className="w-full bg-[#070707] border border-neutral-800/80 border-l-4 border-l-[#00F2FF] rounded shrink-0 relative overflow-hidden py-3 px-6 mt-4 flex items-center justify-between">
|
||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#00F2FF]/5 to-transparent pointer-events-none" />
|
||
|
||
<div className="hidden xl:block shrink-0 font-extrabold text-[#E5E5E5] tracking-widest text-[11px] uppercase mr-6">
|
||
价值输出层 <br />
|
||
<span className="text-[8px] font-mono text-neutral-500 font-light block">VALUE MATRIX SYSTEM</span>
|
||
</div>
|
||
|
||
<div className="flex-1 grid grid-cols-2 md:grid-cols-5 gap-4 divide-y md:divide-y-0 md:divide-x divide-neutral-900">
|
||
{[
|
||
{ title: '强化安全减灾', sub: '极速预警防爆泄漏风险', icon: ShieldCheck, subEn: 'RISK CONTROL' },
|
||
{ title: '显著降本增益', sub: '优化气耗能耗控制开支', icon: Search, subEn: 'COST MINIMIZE' },
|
||
{ title: '多端业务提效', sub: '云端统筹各端负载配置', icon: Activity, subEn: 'EFFICIENT ROUTING' },
|
||
{ title: '绿氢数据资产', sub: '实时认证双碳属性归集', icon: Leaf, subEn: 'CARBON CERTIFIED' },
|
||
{ title: 'AI边算一体化', sub: '全面释放物联数据潜能', icon: LineChart, subEn: 'DATA ASSET INFERENCE' },
|
||
].map((val, i) => {
|
||
const Icon = val.icon;
|
||
return (
|
||
<div key={i} className="flex items-center gap-2 px-1 xl:px-4 w-full pt-2 md:pt-0">
|
||
<div className="text-[#00F2FF] bg-[#00F2FF]/10 p-1.5 rounded shrink-0 border border-[#00F2FF]/20 shadow-[0_0_10px_rgba(0,242,255,0.05)]">
|
||
<Icon size={13} />
|
||
</div>
|
||
<div className="flex flex-col items-start min-w-0">
|
||
<span className="text-[11px] font-semibold text-white tracking-wider truncate max-w-[130px]">{val.title}</span>
|
||
<span className="text-[9px] text-neutral-400 truncate max-w-[130px]">{val.sub}</span>
|
||
<span className="text-[8px] font-mono text-neutral-600 uppercase tracking-widest font-bold">{val.subEn}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* =========================================================================
|
||
TAB: REAL-WORLD TELEMETRY SCENARIOS ("真实数据场景")
|
||
========================================================================= */}
|
||
{activeTab === 'scenarios' && (
|
||
<motion.div
|
||
key="scenarios"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -10 }}
|
||
transition={{ duration: 0.4 }}
|
||
className="w-full h-full xl:max-h-[calc(100vh-140px)] flex flex-col items-center justify-start gap-4 p-3 md:p-5 lg:p-6 z-10 relative overflow-y-auto"
|
||
>
|
||
{/* Title Section */}
|
||
<div className="text-center mb-3 max-w-3xl px-4 flex-shrink-0">
|
||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-[#121212]/80 border border-neutral-800 text-[10px] uppercase tracking-widest text-[#00F2FF] rounded font-mono mb-2">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping mr-1"></span>
|
||
Real-time Industrial Telemetry & Carbon Sink Assurance Metrics
|
||
</div>
|
||
<h2 className="text-xl md:text-2xl font-light tracking-tight text-white mb-1.5">
|
||
真实数据场景: <span className="font-extrabold text-[#00F2FF] tracking-wide">原始数据转为碳资产的过程</span>
|
||
</h2>
|
||
<p className="text-[10px] font-mono text-neutral-500 uppercase tracking-widest">
|
||
LNBOX TELEMETRY LOGS → ONEOS AI INFERENCE COCKPIT
|
||
</p>
|
||
</div>
|
||
|
||
{/* 3-Column Scenario Cards Grid */}
|
||
<div className="w-full max-w-[1780px] mx-auto grid grid-cols-1 xl:grid-cols-3 gap-6 items-stretch shrink-0">
|
||
|
||
{/* Scenario 01 */}
|
||
<div className="bg-[#090909]/95 border border-neutral-800/80 rounded-xl flex flex-col justify-between hover:border-[#00F2FF]/40 transition-all group shadow-2xl relative">
|
||
<div>
|
||
{/* Visual card header image */}
|
||
<div className="w-full h-[150px] relative overflow-hidden bg-neutral-900 border-b border-neutral-900 rounded-t-xl">
|
||
<img
|
||
src={scenarioFleetImage}
|
||
alt="Fleet Delivery Scenario"
|
||
className="w-full h-full object-cover opacity-85 group-hover:scale-105 transition-transform duration-500"
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent pointer-events-none" />
|
||
<div className="absolute bottom-3 left-4 flex flex-col">
|
||
<span className="text-[10px] font-mono text-[#00F2FF] uppercase tracking-widest font-bold">SCENARIO 01 / COLD-CHAIN</span>
|
||
<span className="text-sm font-extrabold text-white mt-0.5">氢能冷链车城配</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card Content */}
|
||
<div className="p-5 space-y-4">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 text-[12px] font-bold text-neutral-300">
|
||
<Cpu size={13} className="text-[#00F2FF]" />
|
||
<span>LNBox 原始采集数据</span>
|
||
</div>
|
||
<p className="text-xs text-neutral-400 bg-neutral-950 p-3 rounded border border-neutral-900 leading-relaxed">
|
||
可信行驶里程 <span className="text-white font-mono font-medium">85.3 km</span>、
|
||
车载消耗氢气量 <span className="text-white font-mono font-medium">8.0 kg</span>、
|
||
氢瓶压力 <span className="text-white font-mono font-medium">28.5 MPa</span>、
|
||
冷链车厢温度 <span className="text-white font-mono font-medium">4.2°C</span>。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 text-[12px] font-bold text-[#00F2FF]">
|
||
<Workflow size={13} />
|
||
<span>OneOS 系统计算决策</span>
|
||
</div>
|
||
<p className="text-xs text-neutral-400 bg-neutral-950 p-3 rounded border border-neutral-900 leading-relaxed">
|
||
自动匹配并调用碳因子 <span className="text-emerald-400 font-mono font-bold">3.0927 kgCO2/kg 氢气</span>，
|
||
精确计算可信对冲的二氧化碳减排替代量为 <span className="text-emerald-400 font-mono font-bold">24.74 kgCO2e</span>，
|
||
数据流已归档并写入 OneOS 绿氢可信碳账户，支持多区域核算方法学扩展。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Indicators Table */}
|
||
<div className="p-4 bg-neutral-950/80 border-t border-neutral-900 grid grid-cols-2 gap-2.5 shrink-0 rounded-b-xl">
|
||
{[
|
||
{
|
||
labelCn: '氢消耗碳因子',
|
||
labelEn: 'H2 CARBON FACTOR',
|
||
value: '3.0927 kgCO2/kg',
|
||
formula: 'E_factor = 3.0927',
|
||
tooltip: '对应方法学发布的绿氢替代汽柴油碳排放规则，代表消耗每公斤氢气所能减免替代的传统燃油车温室气体克排因子值，支持多区域规则动态映射扩展。'
|
||
},
|
||
{
|
||
labelCn: '二氧化碳减排量',
|
||
labelEn: 'CO2 REDUCTION',
|
||
value: '24.74 kgCO2e',
|
||
formula: 'CO2_reduced = H2_consumed (8.0 kg) × 3.0927',
|
||
tooltip: '由OneOS可信核算，消耗氢气 8.0 kg 理论替代燃油卡车的温室气体排放，计算基于权威减排测算方法学并支持后期多维度核算规则的通用扩展。'
|
||
},
|
||
{
|
||
labelCn: '百公里物理排放',
|
||
labelEn: 'EMISSION/100KM',
|
||
value: '6.1854 kg',
|
||
formula: 'E_100km = 2.0 kg/100km × 3.0927',
|
||
tooltip: '碳因子库中 4.5吨轻型货车百公里二氧化碳物理参考排放。计算公式：氢耗（标准2.0 kg/100km）× 碳因子，支持依据车辆型号差异进行高精度动态配置。'
|
||
},
|
||
{
|
||
labelCn: '核证确权状态',
|
||
labelEn: 'TRACE STATUS',
|
||
value: '核定完成 / 预备上链',
|
||
formula: 'Chain_State = "Ready_For_Ledger"',
|
||
tooltip: '当前已由OneOS平台引擎完成设备端高可信原始核算、哈希闭环与存证落底，配有标准化区块链对外接口，支持对公信减排平台的无缝扩展对接。'
|
||
},
|
||
].map((m, i) => (
|
||
<div key={i} className="relative group/indicator bg-neutral-900/60 p-2.5 rounded border border-neutral-900/40 flex flex-col justify-center text-left cursor-help hover:bg-neutral-900/90 hover:border-[#00F2FF]/40 transition-all duration-200">
|
||
<span className="text-[11px] font-bold text-neutral-300 tracking-wide flex items-center gap-1 select-none">
|
||
{m.labelCn}
|
||
<span className="text-[8px] text-neutral-500 font-mono">ⓘ</span>
|
||
</span>
|
||
<span className="text-[8px] font-mono text-neutral-500 uppercase tracking-wider mt-0.5">{m.labelEn}</span>
|
||
<span className="text-xs font-mono font-extrabold text-[#00F2FF] mt-1">{m.value}</span>
|
||
|
||
{/* Interactive Tooltip Card */}
|
||
<div className="absolute bottom-[105%] left-1/2 -translate-x-1/2 w-64 p-3 bg-neutral-950 border border-neutral-800 rounded-lg shadow-2xl opacity-0 pointer-events-none group-hover/indicator:opacity-100 group-hover/indicator:pointer-events-auto transition-all duration-300 z-50 text-[10px] text-neutral-300 space-y-2 leading-normal">
|
||
<div className="flex items-center justify-between border-b border-neutral-800 pb-1.5 font-sans font-bold text-white text-[11px]">
|
||
<span>{m.labelCn} · 真实逻辑</span>
|
||
<span className="text-[8px] font-mono text-neutral-500">{m.labelEn}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-[9px] font-mono font-bold text-emerald-400 block pb-0.5">算法公式/测算逻辑：</span>
|
||
<code className="block bg-neutral-950 p-1.5 rounded font-mono text-[9px] text-[#00F2FF] break-all border border-neutral-900">{m.formula}</code>
|
||
</div>
|
||
<div>
|
||
<span className="text-[9px] font-sans font-bold text-neutral-400 block pb-0.5">生成说明：</span>
|
||
<p className="text-neutral-400 text-[10px] leading-relaxed font-sans">{m.tooltip}</p>
|
||
</div>
|
||
{/* Triangle Arrow */}
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-neutral-950" />
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-[5px] border-x-transparent border-t-[5px] border-t-neutral-800 -z-10" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scenario 02 */}
|
||
<div className="bg-[#090909]/95 border border-neutral-800/80 rounded-xl flex flex-col justify-between hover:border-amber-400/40 transition-all group shadow-2xl relative">
|
||
<div>
|
||
{/* Visual card header image */}
|
||
<div className="w-full h-[150px] relative overflow-hidden bg-neutral-900 border-b border-neutral-900 rounded-t-xl">
|
||
<img
|
||
src={scenarioStationImage}
|
||
alt="Station Refueling Dispatch Scenario"
|
||
className="w-full h-full object-cover opacity-85 group-hover:scale-105 transition-transform duration-500"
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent pointer-events-none" />
|
||
<div className="absolute bottom-3 left-4 flex flex-col">
|
||
<span className="text-[10px] font-mono text-amber-400 uppercase tracking-widest font-bold">SCENARIO 02 / HYDROGEN DISPATCH</span>
|
||
<span className="text-sm font-extrabold text-white mt-0.5">加氢站补能调度</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card Content */}
|
||
<div className="p-5 space-y-4">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 text-[12px] font-bold text-neutral-300">
|
||
<Cpu size={13} className="text-[#00F2FF]" />
|
||
<span>LNBox 原始采集数据</span>
|
||
</div>
|
||
<p className="text-xs text-neutral-400 bg-neutral-950 p-3 rounded border border-neutral-900 leading-relaxed">
|
||
当前地理坐标、电池剩余SOC量、
|
||
氢气瓶残压值 <span className="text-white font-mono font-medium">2.4 MPa</span>、
|
||
当前剩余续航 <span className="text-white font-mono font-medium">168 km</span>、
|
||
任务预计运输终点。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 text-[12px] font-bold text-amber-400">
|
||
<Workflow size={13} />
|
||
<span>OneOS AI 生成决策</span>
|
||
</div>
|
||
<p className="text-xs text-neutral-400 bg-neutral-950 p-3 rounded border border-neutral-900 leading-relaxed text-left">
|
||
计算推荐最优补能站点 <span className="text-amber-400 font-mono font-bold">S2 加氢站</span>，
|
||
预计 <span className="text-amber-400 font-mono font-bold">13km/20分钟</span> 到达，
|
||
补能调度优先级判为 <span className="text-amber-400 font-mono font-bold">P2 (高)</span>，
|
||
自动下发避堵低碳进站补氢规划路线。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Indicators Table */}
|
||
<div className="p-4 bg-neutral-950/80 border-t border-neutral-900 grid grid-cols-2 gap-2.5 shrink-0 rounded-b-xl">
|
||
{[
|
||
{
|
||
labelCn: '当前剩余续航',
|
||
labelEn: 'RANGE REMAIN',
|
||
value: '168 km',
|
||
formula: 'R_remain = 残余氢量(kg) × 额定整车氢效比例',
|
||
tooltip: '利用储氢瓶残压传感器采集的可用低气压（如当前2.4 MPa），计算折损率并得出可用氢燃料质量，乘以车载电池综合动力效率，给出保守的剩余安全续航公里数。'
|
||
},
|
||
{
|
||
labelCn: '预计到达时效',
|
||
labelEn: 'STATION EST.',
|
||
value: '13km / 20 min',
|
||
formula: 'ETA = f(高精度图层拓扑, 城区车辆时速因子)',
|
||
tooltip: '将实时GPS坐标和地图路径分析绑定。计算公式：预计到达时间 = 高德物理路径至S2加氢站距离 (13 km) / 结合实时城区拥堵和红绿灯预测的平均速度，测定为20分钟。'
|
||
},
|
||
{
|
||
labelCn: '调度建议站点',
|
||
labelEn: 'STATION ADVICE',
|
||
value: 'Station S2',
|
||
formula: 'S_score = f(预计等候时间, 加氢价格, 里程氢耗)',
|
||
tooltip: '云端多指标评估打分。对比本网络内的加氢站负荷，S2站当前队列少（等候约6分钟），加氢机负荷利用率好、运氢损耗低，加权算出综合推荐指数最高。'
|
||
},
|
||
{
|
||
labelCn: '动态调度等级',
|
||
labelEn: 'DISPATCH PRI',
|
||
value: 'P2 High / 高',
|
||
formula: 'Priority = (R_remain < 150 km且气压极低 ? P2 : P4)',
|
||
tooltip: '安全等级触发阀值器。由于氢气瓶残压极低、在保供城配干线段可能发生抛锚，云端算法自动将任务补能调优级提升至 P2 (高级)，以自动调度资源保障车辆补能。'
|
||
},
|
||
].map((m, i) => (
|
||
<div key={i} className="relative group/indicator bg-neutral-900/60 p-2.5 rounded border border-neutral-900/40 flex flex-col justify-center text-left cursor-help hover:bg-neutral-900/90 hover:border-amber-400/40 transition-all duration-200">
|
||
<span className="text-[11px] font-bold text-neutral-300 tracking-wide flex items-center gap-1 select-none">
|
||
{m.labelCn}
|
||
<span className="text-[8px] text-neutral-500 font-mono">ⓘ</span>
|
||
</span>
|
||
<span className="text-[8px] font-mono text-neutral-500 uppercase tracking-wider mt-0.5">{m.labelEn}</span>
|
||
<span className="text-xs font-mono font-extrabold text-amber-400 mt-1">{m.value}</span>
|
||
|
||
{/* Interactive Tooltip Card */}
|
||
<div className="absolute bottom-[105%] left-1/2 -translate-x-1/2 w-64 p-3 bg-neutral-950 border border-neutral-800 rounded-lg shadow-2xl opacity-0 pointer-events-none group-hover/indicator:opacity-100 group-hover/indicator:pointer-events-auto transition-all duration-300 z-50 text-[10px] text-neutral-300 space-y-2 leading-normal">
|
||
<div className="flex items-center justify-between border-b border-neutral-800 pb-1.5 font-sans font-bold text-white text-[11px]">
|
||
<span>{m.labelCn} · 取值逻辑</span>
|
||
<span className="text-[8px] font-mono text-neutral-500">{m.labelEn}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-[9px] font-mono font-bold text-emerald-400 block pb-0.5">算法公式/测算逻辑：</span>
|
||
<code className="block bg-neutral-950 p-1.5 rounded font-mono text-[9px] text-amber-400 break-all border border-neutral-900">{m.formula}</code>
|
||
</div>
|
||
<div>
|
||
<span className="text-[9px] font-sans font-bold text-neutral-400 block pb-0.5">生成说明：</span>
|
||
<p className="text-neutral-400 text-[10px] leading-relaxed font-sans">{m.tooltip}</p>
|
||
</div>
|
||
{/* Triangle Arrow */}
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-neutral-950" />
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-[5px] border-x-transparent border-t-[5px] border-t-neutral-800 -z-10" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scenario 03 */}
|
||
<div className="bg-[#090909]/95 border border-neutral-800/80 rounded-xl flex flex-col justify-between hover:border-red-400/40 transition-all group shadow-2xl relative">
|
||
<div>
|
||
{/* Visual card header image */}
|
||
<div className="w-full h-[150px] relative overflow-hidden bg-neutral-900 border-b border-neutral-900 rounded-t-xl">
|
||
<img
|
||
src={scenarioDatacenterImage}
|
||
alt="Carbon Ledger Scenario"
|
||
className="w-full h-full object-cover opacity-85 group-hover:scale-105 transition-transform duration-500"
|
||
referrerPolicy="no-referrer"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent pointer-events-none" />
|
||
<div className="absolute bottom-3 left-4 flex flex-col">
|
||
<span className="text-[10px] font-mono text-red-400 tracking-widest font-bold">SCENARIO 03 / ESG TRUST</span>
|
||
<span className="text-sm font-extrabold text-white mt-0.5">碳汇资产核算与披露</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Card Content */}
|
||
<div className="p-5 space-y-4">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 text-[12px] font-bold text-neutral-300">
|
||
<Cpu size={13} className="text-[#00F2FF]" />
|
||
<span>LNBox 原始采集数据</span>
|
||
</div>
|
||
<p className="text-xs text-neutral-400 bg-neutral-950 p-3 rounded border border-neutral-900 leading-relaxed">
|
||
安全可信网关 Box ID、车辆唯一样本 ID、
|
||
可信核算行驶轨迹、低碳氢燃料替代高位温室气体燃油量、
|
||
车辆与云端双向时间锁定同步记录（防篡改校验码）。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2 text-[12px] font-bold text-red-400">
|
||
<Workflow size={13} />
|
||
<span>OneOS AI 生成决策</span>
|
||
</div>
|
||
<p className="text-xs text-neutral-400 bg-neutral-950 p-3 rounded border border-neutral-900 leading-relaxed">
|
||
自动入账并归集绿氢碳汇资产分类凭证编号 <span className="text-red-400 font-mono font-bold">Ledger-0602-001</span>，
|
||
形成防篡改资产台账，支持零人工干预的 ESG 自助信息公开与披露。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Indicators Table */}
|
||
<div className="p-4 bg-neutral-950/80 border-t border-neutral-900 grid grid-cols-2 gap-2.5 shrink-0 rounded-b-xl">
|
||
{[
|
||
{
|
||
labelCn: 'ESG信披凭证',
|
||
labelEn: 'ESG REPORT',
|
||
value: 'Ledger-001',
|
||
formula: 'Serial_No = ID_Ledger(0602-001)',
|
||
tooltip: '根据国际ISSB及TCFD框架自动对应、生成的ESG碳权信披台账审计流水号，对应并锁定了当前可信行驶里程对应的减碳额，可直接由上市公司一键导出绿氢碳汇专报落款同步备案。'
|
||
},
|
||
{
|
||
labelCn: '可信存证护盾',
|
||
labelEn: 'PROOF SHIELD',
|
||
value: 'Ready',
|
||
formula: 'HSM_State = Sec_Level(FIPS_140_2)',
|
||
tooltip: '安全存证守护状态。LNBox 硬件网关内置硬件安全包，采用FIPS美国联邦信息安全标准级别的加密校验。Ready 代表设备完好、未检测到任何物理破坏及GPS欺骗模拟，数据绝对纯真。'
|
||
},
|
||
{
|
||
labelCn: '大模型核算模型',
|
||
labelEn: 'FACTOR MODEL',
|
||
value: 'AI-Model-H2',
|
||
formula: 'E_h2 = Graph_Neural_Inference_Core',
|
||
tooltip: 'OneOS 绿氢智能碳账户专属计算大模型算法（AI-Model-H2），能根据车载冷链箱温、车辆荷载、车载极化曲线衰耗模型和实时环境气温对基准损耗做出多环拟合，极大地提高了碳核证的权威严谨性。'
|
||
},
|
||
{
|
||
labelCn: '绿氢核证状态',
|
||
labelEn: 'TRACE STATUS',
|
||
value: '核定完成 / 预备存证',
|
||
formula: 'Audit_Status = Core_Certified',
|
||
tooltip: 'OneOS 平台对车端里程、能耗数据完成了高可信原始核算与智能签名闭环，符合国际ESG公信框架，支持零改动弹性平移至多方碳普惠联盟。'
|
||
},
|
||
].map((m, i) => (
|
||
<div key={i} className="relative group/indicator bg-neutral-900/60 p-2.5 rounded border border-neutral-900/40 flex flex-col justify-center text-left cursor-help hover:bg-neutral-900/90 hover:border-red-400/40 transition-all duration-200">
|
||
<span className="text-[11px] font-bold text-neutral-300 tracking-wide flex items-center gap-1 select-none">
|
||
{m.labelCn}
|
||
<span className="text-[8px] text-neutral-500 font-mono">ⓘ</span>
|
||
</span>
|
||
<span className="text-[8px] font-mono text-neutral-500 uppercase tracking-wider mt-0.5">{m.labelEn}</span>
|
||
<span className="text-xs font-mono font-extrabold text-red-400 mt-1">{m.value}</span>
|
||
|
||
{/* Interactive Tooltip Card */}
|
||
<div className="absolute bottom-[105%] left-1/2 -translate-x-1/2 w-64 p-3 bg-neutral-950 border border-neutral-800 rounded-lg shadow-2xl opacity-0 pointer-events-none group-hover/indicator:opacity-100 group-hover/indicator:pointer-events-auto transition-all duration-300 z-50 text-[10px] text-neutral-300 space-y-2 leading-normal">
|
||
<div className="flex items-center justify-between border-b border-neutral-800 pb-1.5 font-sans font-bold text-white text-[11px]">
|
||
<span>{m.labelCn} · 取值逻辑</span>
|
||
<span className="text-[8px] font-mono text-neutral-500">{m.labelEn}</span>
|
||
</div>
|
||
<div>
|
||
<span className="text-[9px] font-mono font-bold text-emerald-400 block pb-0.5">算法公式/测算逻辑：</span>
|
||
<code className="block bg-neutral-950 p-1.5 rounded font-mono text-[9px] text-red-400 break-all border border-neutral-900">{m.formula}</code>
|
||
</div>
|
||
<div>
|
||
<span className="text-[9px] font-sans font-bold text-neutral-400 block pb-0.5">生成说明：</span>
|
||
<p className="text-neutral-400 text-[10px] leading-relaxed font-sans">{m.tooltip}</p>
|
||
</div>
|
||
{/* Triangle Arrow */}
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-neutral-950" />
|
||
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-[5px] border-x-transparent border-t-[5px] border-t-neutral-800 -z-10" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* Linear Flowchart Diagram */}
|
||
<div className="w-full max-w-[1780px] bg-[#070707] border border-neutral-800 rounded-xl relative overflow-hidden py-6 px-6 shrink-0 mt-5 shadow-inner">
|
||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/20 to-transparent" />
|
||
<div className="text-center md:text-left mb-6">
|
||
<span className="text-[9px] font-mono tracking-[0.2em] text-[#00F2FF] uppercase font-bold">End-to-End Pipeline</span>
|
||
<h3 className="text-sm font-bold text-white tracking-wider mt-1">车端原始数据到绿氢碳资产入账全链路</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-stretch relative">
|
||
{[
|
||
{ step: '01', title: '车端物理数据采集', desc: 'LNBox 实时高可信采集车辆里程、轨迹、瓶温、瓶压、路线。' },
|
||
{ step: '02', title: '可信网关边缘处理', desc: '边缘层防篡改锁定，加入可信哈希并双安全通道上云。' },
|
||
{ step: '03', title: 'AI大模型融合核算', desc: '结合能耗曲线，排除环境异常，精准对齐国际车型因子。' },
|
||
{ step: '04', title: '碳资产认证与存证', desc: '核算双碳替代量并生成可信存证，自动录入ESG系统。' },
|
||
{ step: '05', title: '数据智能闭环决策', desc: '输出车辆余氢续航预测、加氢站低成本补能路线推荐，完成闭环。' }
|
||
].map((step, idx) => (
|
||
<div key={idx} className="flex flex-col justify-between p-3.5 bg-neutral-950 rounded border border-neutral-900/60 relative group hover:border-[#00F2FF]/30 transition-all">
|
||
<div>
|
||
<div className="flex items-center justify-between border-b border-neutral-900 pb-2">
|
||
<span className="text-[11px] font-mono text-[#00F2FF] font-bold">STEP {step.step}</span>
|
||
<span className="text-[8px] font-mono text-neutral-600 font-bold uppercase">SECURED</span>
|
||
</div>
|
||
<h4 className="text-[12px] font-bold text-neutral-200 mt-2.5">{step.title}</h4>
|
||
<p className="text-[11px] text-neutral-500 mt-1.5 leading-relaxed">{step.desc}</p>
|
||
</div>
|
||
|
||
{/* Connection Chevron for Desktop (don't show on last item) */}
|
||
{idx < 4 && (
|
||
<div className="hidden md:flex absolute top-1/2 -right-3 transform -translate-y-1/2 z-20 text-[#00F2FF] animate-pulse">
|
||
<ChevronRight size={14} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Carbon Factors & Methodology Database */}
|
||
<div className="w-full max-w-[1780px] bg-[#070707] border border-neutral-800 rounded-xl relative overflow-hidden p-6 shrink-0 mt-5 shadow-2xl text-left">
|
||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#00F2FF]/30 to-transparent" />
|
||
|
||
{/* Header of the console */}
|
||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 border-b border-neutral-900 pb-5 mb-5">
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
|
||
<span className="text-[10px] font-mono tracking-[0.2em] text-emerald-400 uppercase font-bold">LOCAL ACCOUNTING MATRIX</span>
|
||
</div>
|
||
<h3 className="text-sm font-extrabold text-white tracking-wider">OneOS 智能碳账户因子库与方法学参考台账</h3>
|
||
<p className="text-[11px] text-neutral-500 font-sans leading-relaxed">
|
||
本模块基于多地区自愿温室气体减排与碳普惠政策设立，用于多车型碳核算体系的本地高置信检验。系统采用即插即用型因数规则，将车端原始遥测流与云端计算逻辑解耦，面向未来阶段的全国或多极区块链联盟共识对接预留通用扩展通道。
|
||
</p>
|
||
</div>
|
||
|
||
{/* Selector Buttons */}
|
||
<div className="flex gap-2 bg-neutral-950 p-[3px] border border-neutral-900 rounded select-none">
|
||
<button
|
||
onClick={() => setDbTab('factors')}
|
||
className={`px-3 py-1.5 rounded text-[11px] font-bold tracking-wider transition-all duration-200 ${dbTab === 'factors' ? 'bg-[#111] text-[#00F2FF] border border-neutral-800/60 shadow' : 'text-neutral-500 hover:text-neutral-300'}`}
|
||
>
|
||
碳核算因子参考库
|
||
</button>
|
||
<button
|
||
onClick={() => setDbTab('methodologies')}
|
||
className={`px-3 py-1.5 rounded text-[11px] font-bold tracking-wider transition-all duration-200 ${dbTab === 'methodologies' ? 'bg-[#111] text-[#00F2FF] border border-neutral-800/60 shadow' : 'text-neutral-500 hover:text-neutral-300'}`}
|
||
>
|
||
方法学管理参考库
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{dbTab === 'factors' ? (
|
||
<div className="space-y-4">
|
||
{/* Database Table Info Banner */}
|
||
<div className="bg-[#0b0c0d] border border-neutral-800 rounded p-3.5 text-[11px] text-neutral-300 flex items-start gap-3 leading-relaxed font-sans">
|
||
<span className="text-[#00F2FF] text-xs mt-0.5">ⓘ</span>
|
||
<div>
|
||
<strong className="text-neutral-200 font-bold block pb-1">多区域碳排放因子装配式核定：</strong>
|
||
当前系统已原生嵌入了中国不同经济示范区（如嘉兴、北京、广州等）发布的专属氢燃料汽车及柴油货车温室气体减排测算方法学。计算后台支持按地区、车型及吨位秒级切换与灵活装配对应的核算因子，具备极强的全局业务扩展与核准承袭能力。
|
||
</div>
|
||
</div>
|
||
|
||
{/* Factor Table */}
|
||
<div className="overflow-x-auto border border-neutral-900 rounded-lg bg-neutral-950/40">
|
||
<table className="w-full text-left border-collapse text-[12px] font-sans">
|
||
<thead>
|
||
<tr className="border-b border-neutral-900 bg-neutral-950/80 text-neutral-400 font-bold">
|
||
<th className="p-3">所属地区/城市</th>
|
||
<th className="p-3">对应运输方式</th>
|
||
<th className="p-3">动力燃料类型</th>
|
||
<th className="p-3">适用载重量型号</th>
|
||
<th className="p-3">碳核算计算公式</th>
|
||
<th className="p-3 text-right">百公里参考排放/减排因子</th>
|
||
<th className="p-3 text-right">核证上链确权状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-neutral-900/60 font-mono text-neutral-300">
|
||
{[
|
||
{ city: '浙江省嘉兴市', type: '公路货运', fuel: '柴油 (基准替换车)', model: '4.5吨轻型货车', formula: '可信里程(Km) × 0.3000', em: '30.00 kgCO2/100km', status: '参考对比基准' },
|
||
{ city: '浙江省嘉兴市', type: '公路货运', fuel: '柴油 (基准替换车)', model: '18吨中型货车', formula: '可信里程(Km) × 0.7000', em: '70.00 kgCO2/100km', status: '参考对比基准' },
|
||
{ city: '浙江省嘉兴市', type: '公路货运', fuel: '柴油 (基准替换车)', model: '49吨重卡牵引', formula: '可信里程(Km) × 1.0000', em: '100.00 kgCO2/100km', status: '参考对比基准' },
|
||
{ city: '浙江省嘉兴市', type: '氢能城配 (车端)', fuel: '氢气 (OneOS 场景)', model: '4.5吨轻型冷链车', formula: '消耗氢气量(kg) × 3.0927', em: '6.1854 kgCO2/100km', status: '本地已核证 (待上链)' },
|
||
{ city: '浙江省嘉兴市', type: '氢能货运 (车端)', fuel: '氢气 (OneOS 场景)', model: '18吨厢式货车', formula: '消耗氢气量(kg) × 3.0927', em: '17.0098 kgCO2/100km', status: '本地已核证 (待上链)' },
|
||
{ city: '浙江省嘉兴市', type: '氢能重卡 (车端)', fuel: '氢气 (OneOS 场景)', model: '49吨牵引车辆', formula: '消耗氢气量(kg) × 3.0927', em: '30.9270 kgCO2/100km', status: '本地已核证 (待上链)' },
|
||
{ city: '北京市', type: '公路货运', fuel: '柴油 (基准替换车)', model: '4.5吨货车', formula: '可信里程(Km) × 0.3240', em: '32.40 kgCO2/100km', status: '参考对比基准' },
|
||
{ city: '北京市', type: '氢能储配 (车端)', fuel: '氢气 (OneOS 场景)', model: '4.5吨轻型冷链车', formula: '消耗氢气量(kg) × 3.0927', em: '6.6610 kgCO2/100km', status: '本地已核证 (待上链)' },
|
||
].map((row, i) => (
|
||
<tr key={i} className="hover:bg-neutral-900/40 transition-colors">
|
||
<td className="p-3 font-sans font-medium text-neutral-300">{row.city}</td>
|
||
<td className="p-3 font-sans text-neutral-400">{row.type}</td>
|
||
<td className={`p-3 font-sans text-[12px] font-bold ${row.fuel.includes('氢气') ? 'text-emerald-400' : 'text-amber-500/80'}`}>{row.fuel}</td>
|
||
<td className="p-3 text-neutral-300 font-sans">{row.model}</td>
|
||
<td className="p-3 text-neutral-400 text-[11px] break-all max-w-[280px]">
|
||
<code className="bg-neutral-950/80 px-1.5 py-1 rounded text-neutral-200 border border-neutral-900/50">{row.formula}</code>
|
||
</td>
|
||
<td className="p-3 text-right font-bold text-[#00F2FF]">{row.em}</td>
|
||
<td className="p-3 text-right font-sans">
|
||
<span className={`px-2 py-1 rounded text-[9px] font-bold ${row.status.includes('核证') ? 'bg-emerald-950/30 text-emerald-400 border border-emerald-900/30' : 'bg-neutral-900 text-neutral-500'}`}>
|
||
{row.status}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{/* Database Table Info Banner */}
|
||
<div className="bg-[#0b0c0d] border border-neutral-800 rounded p-3.5 text-[11px] text-neutral-400 flex items-start gap-3 leading-relaxed font-sans">
|
||
<span className="text-[#00F2FF] text-xs mt-0.5">ⓘ</span>
|
||
<div>
|
||
<strong className="text-white font-bold block pb-1">依据官方自愿温室气体减排标准：</strong>
|
||
OneOS 智能碳核算体系严格对应了中国多地生态环境管理部门发布的公共碳减排与碳普惠政策，确保车辆运行里程和能源替代结算的高置信审计标准。数据仅限本地缓存，当前尚未连通区块链底层接口。
|
||
</div>
|
||
</div>
|
||
|
||
{/* Methodology Table */}
|
||
<div className="overflow-x-auto border border-neutral-900 rounded-lg bg-neutral-950/40 font-mono">
|
||
<table className="w-full text-left border-collapse text-[12px] font-sans">
|
||
<thead>
|
||
<tr className="border-b border-neutral-900 bg-neutral-950/80 text-neutral-400 font-bold font-sans">
|
||
<th className="p-3">涵盖及特定地区</th>
|
||
<th className="p-3">方法学政策/机制名称</th>
|
||
<th className="p-3">主导/发布机构</th>
|
||
<th className="p-3">政策颁布执行日期</th>
|
||
<th className="p-3">适用车型/基准约束范围</th>
|
||
<th className="p-3 text-right">OneOS 本地对齐算法</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-neutral-900/60 font-mono text-neutral-300">
|
||
{[
|
||
{ region: '浙江省嘉兴市', name: '《氢燃料电池货车碳减排项目方法学》(JXPHCER-03-004-V01)', org: '嘉兴市生态环境局', date: '2025-05-19', scope: '4.5吨轻冷链, 18吨厢式中货卡, 49吨牵引卡车', calc: '绿氢替代碳系数核减算法' },
|
||
{ region: '北京市', name: '《北京市碳普惠方法学 氢燃料电池汽车(试行)》', org: '北京市生态环境局', date: '2025-07-03', scope: '货运车辆, 重型物流卡车, 4.5T厢式冷链车', calc: '北京温室二氧化碳基准减法' },
|
||
{ region: '广东省广州市', name: '《广州市氢燃料电池汽车行驶碳普惠方法学(2024试行版)》', org: '广州市生态环境局', date: '2024-11-20', scope: '冷链城配载客载货车, 环卫作业车辆', calc: '广州绿色行驶替代系数核定' },
|
||
].map((row, i) => (
|
||
<tr key={i} className="hover:bg-neutral-900/40 transition-colors">
|
||
<td className="p-3 font-sans font-medium text-neutral-300">{row.region}</td>
|
||
<td className="p-3 font-sans text-neutral-200 font-bold leading-normal max-w-[280px] text-[11px]">{row.name}</td>
|
||
<td className="p-3 font-sans text-neutral-400">{row.org}</td>
|
||
<td className="p-3 text-neutral-400">{row.date}</td>
|
||
<td className="p-3 text-neutral-400 font-sans">{row.scope}</td>
|
||
<td className="p-3 text-right font-bold text-emerald-400 font-sans">{row.calc}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
</main>
|
||
|
||
{/* 3. Global Dashboard Footer Accent */}
|
||
<footer className="w-full bg-[#050505] border-t border-neutral-900 relative flex-shrink-0 z-30">
|
||
<div className="absolute top-0 left-0 right-0 h-0.5 overflow-hidden">
|
||
<div className="absolute inset-0 bg-[#00F2FF] opacity-10 animate-pulse" />
|
||
<div className={`absolute left-0 top-0 h-full w-[45%] bg-gradient-to-r ${activeTheme.gradient} shadow-[0_0_15px_${activeTheme.accent}]`} />
|
||
</div>
|
||
<div className="py-5 px-6 md:px-12 flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<span className="text-[10px] tracking-[0.25em] text-neutral-600 font-mono uppercase text-center md:text-left">
|
||
© 2026 OneOSS. ALL INDUSTRIAL TELEMETRY AND FACTOR ASSURANCE SYSTEMS REGISTERED.
|
||
</span>
|
||
<div className="flex items-center gap-6 text-[9px] font-mono text-neutral-500 uppercase tracking-[0.15em]">
|
||
<span>Secured Node ID: OOSS-LNBOX-999-ACTIVE</span>
|
||
<span className="hidden md:inline">•</span>
|
||
<span>Link Strength: 100% SECURE</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|