shishengliang/lnbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve page readability, add thumbnail switcher, CI/CD config
Some checks failed
ci/woodpecker/manual/woodpecker Pipeline failed
Details

Browse Source 
- 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
This commit is contained in:
kkfluous
2026-06-05 16:14:55 +08:00
parent 9f4de27243
commit fc47801968
6 changed files with 3179 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
.woodpecker.yml Normal file
View File

@@ -0,0 +1,63 @@
steps:
- name: pnpm-build
image: node:22-alpine
when:
event:
- push
- pull_request
- manual
branch:
- master
- develop
- main
commands: |
cd $CI_WORKSPACE
npm install -g pnpm
pnpm install
pnpm build
# 获取分支名
BRANCH_NAME=$(echo $CI_COMMIT_BRANCH | tr / -)
echo "Branch name: $BRANCH_NAME"
# 版本号: 分支名-package.json版本
PKG_VERSION=$(node -e "console.log(require('./package.json').version)")
PROJECT_VERSION="$BRANCH_NAME-$PKG_VERSION"
echo "Docker tag: $PROJECT_VERSION"
echo $PROJECT_VERSION > $CI_WORKSPACE/project_version.txt
- name: docker-build
image: docker:24.0.5-cli
when:
event:
- push
- pull_request
- manual
branch:
- master
- develop
- main
volumes:
- /var/run/docker.sock:/var/run/docker.sock
commands: |
PROJECT_VERSION=$(cat $CI_WORKSPACE/project_version.txt)
MODULE_NAME=lnbox
echo "Building Docker image: $MODULE_NAME:$PROJECT_VERSION"
cd $CI_WORKSPACE
docker build -t harbor.lnh2e.com/lingniu-v1/$MODULE_NAME:$PROJECT_VERSION .
mkdir -p /root/.docker
cat > /root/.docker/config.json <<EOF
{
"auths": {
"harbor.lnh2e.com": {
"auth": "$(echo Y2ljZDpMbkBjaWNkMDE=)"
}
}
}
EOF
docker push harbor.lnh2e.com/lingniu-v1/$MODULE_NAME:$PROJECT_VERSION

30
Dockerfile Normal file
View File

@@ -0,0 +1,30 @@
FROM node:22-alpine as builder
WORKDIR /usr/src/app
COPY . .
RUN npm install pnpm -g
RUN pnpm install
RUN pnpm build
FROM nginx:1.26
COPY --from=0 /usr/src/app/dist /usr/share/nginx/html/lnbox
RUN echo "server {\
listen 80;\
server_name localhost;\
location / {\
return 301 /lnbox/;\
}\
location /lnbox {\
alias /usr/share/nginx/html/lnbox;\
index index.html index.htm;\
try_files \$uri \$uri/ /lnbox/index.html;\
}\
}" > /etc/nginx/conf.d/default.conf
EXPOSE 80

16
docker-compose.yml Normal file
View File

@@ -0,0 +1,16 @@
version: '3.8'
services:
lnbox:
image: harbor.lnh2e.com/lingniu-v1/lnbox:main-0.0.0
ports:
- "8029:80"
deploy:
replicas: 1
restart_policy:
condition: on-failure
placement:
constraints: [node.role == manager]
labels:
- portainer.hide=false
- project=lingniu

2795
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

394
src/App.tsx
View File

@@ -21,7 +21,6 @@ import scenarioDatacenterImage from './assets/images/scenario_datacenter_1779863
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}`}>
{/* Decorative micro LED accent on card edge */}
<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`}>
@@ -79,6 +78,14 @@ export default function App() {
// 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',
@@ -264,7 +271,7 @@ export default function App() {
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-6 p-6 md:p-12 lg:p-16 bg-[#090909]/90 relative">
<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">
@@ -285,7 +292,7 @@ export default function App() {
</div>
</div>
<div className="flex flex-col gap-6">
<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`} />
@@ -295,14 +302,14 @@ export default function App() {
</div>
{/* Title Matrix */}
<div className="space-y-2">
<h1 className="text-4xl md:text-5xl lg:text-6.5xl font-extrabold tracking-tight text-white leading-[1.1] font-sans">
<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 mt-1.5">
<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>
@@ -311,60 +318,60 @@ export default function App() {
</div>
{/* Copy Block in Chinese & English */}
<div className="space-y-4 max-w-xl text-neutral-400 text-sm leading-relaxed border-l-2 border-[#00F2FF]/40 pl-6 py-1">
<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-6 mt-6 border-t border-neutral-900 pt-8">
<div className="p-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
<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-2">
<div className="p-1.5 rounded bg-cyan-950/30 text-cyan-400">
<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-[12px] font-bold tracking-[0.1em] text-neutral-200">AI 碳因子引擎</span>
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">AI 碳因子引擎</span>
</div>
<p className="text-[11px] text-neutral-400 leading-normal mb-1">基于车型、路线、里程、能耗和场景数据，自动匹配碳因子并生成核算结果。</p>
<span className="text-[9px] font-mono text-neutral-500 block uppercase">AI CARBON FACTOR INFERENCE ENGINE</span>
<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-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
<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-2">
<div className="p-1.5 rounded bg-emerald-950/30 text-emerald-400">
<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-[12px] font-bold tracking-[0.1em] text-neutral-200">碳汇资产识别</span>
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">碳汇资产识别</span>
</div>
<p className="text-[11px] text-neutral-400 leading-normal mb-1">将车辆减排、绿色运输和氢能替代数据沉淀为可追溯、可展示的碳汇资产。</p>
<span className="text-[9px] font-mono text-neutral-500 block uppercase">CARBON SINK ASSET RECOGNITION</span>
<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-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
<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-2">
<div className="p-1.5 rounded bg-amber-950/30 text-amber-400">
<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-[12px] font-bold tracking-[0.1em] text-neutral-200">能源 AI 智能调度</span>
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">能源 AI 智能调度</span>
</div>
<p className="text-[11px] text-neutral-400 leading-normal mb-1">结合余氢、路线、加氢站资源 and 碳成本，支撑续航预测、补能决策和低碳调度。</p>
<span className="text-[9px] font-mono text-neutral-500 block uppercase">AUTONOMOUS ENERGY AI DISPATCH</span>
<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-4 rounded bg-neutral-950/40 border border-neutral-900 relative overflow-hidden group hover:border-neutral-800 transition-all">
<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-2">
<div className="p-1.5 rounded bg-[#00F2FF]/10 text-[#00F2FF]">
<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-[12px] font-bold tracking-[0.1em] text-neutral-200">氢能安全可信底座</span>
<span className="text-[13px] font-bold tracking-[0.08em] text-neutral-200">氢能安全可信底座</span>
</div>
<p className="text-[11px] text-neutral-400 leading-normal mb-1">监测氢气泄漏、压力、温度与阀控状态，为碳资产场景提供安全可信上下文。</p>
<span className="text-[9px] font-mono text-neutral-500 block uppercase">HYDROGEN SAFETY TELEMETRY NODE</span>
<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>
@@ -372,15 +379,15 @@ export default function App() {
{/* 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 bg-neutral-950 border border-neutral-900 rounded font-mono text-[9px] text-[#00F2FF]">
<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-6">
<span className="text-[9px] 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-1">OneOS 顶板盖透视图</h3>
<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">
@@ -440,17 +447,17 @@ export default function App() {
/>
{/* Status annotations overlaid inside card corner borders */}
<div className="absolute top-6 right-6 font-mono text-[7px] text-neutral-500 text-right z-10 flex flex-col gap-0.5 select-none">
<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-[7px] text-neutral-500 z-10 select-none">
<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-[8px] text-neutral-500 text-right space-y-0.5 z-10">
<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>
@@ -696,7 +703,7 @@ export default function App() {
<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">
<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' },
@@ -718,15 +725,19 @@ export default function App() {
</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 overflow-hidden relative group">
<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]">
<img
src={oneossTopFacet}
alt="OneOS AI Hardware cover plate"
className="w-full h-full max-h-[110px] object-contain opacity-95 brightness-[1.1] hover:scale-105 transition-all duration-300"
<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"
/>
@@ -740,21 +751,25 @@ export default function App() {
</div>
{/* Small operational thumbnails */}
<div className="grid grid-cols-3 gap-1 shrink-0">
<div className="border border-[#00F2FF]/40 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF] transition-all cursor-pointer">
<img src={oneossTopFacet} alt="Top Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
</div>
<div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
<img src={oneossSideFacet} alt="Side Facet" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
</div>
<div className="border border-neutral-800 rounded bg-[#101010] p-1 flex items-center justify-center h-[30px] overflow-hidden hover:border-[#00F2FF]/50 transition-all cursor-pointer">
<img src={oneossBoxImage} alt="Full Box" className="max-h-full max-w-full object-contain" referrerPolicy="no-referrer" />
</div>
<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">
<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' },
@@ -777,8 +792,8 @@ export default function App() {
</div>
{/* Vertical flow connector pointing up from Data Security to Central Hardware (Modification 1) */}
<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">
{/* 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 */}
@@ -843,7 +858,7 @@ export default function App() {
</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 (Modification 2) */}
{/* 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]" />
@@ -901,24 +916,21 @@ export default function App() {
<div className="text-[7.5px] font-mono text-neutral-500 uppercase">Operational Scenarios</div>
</div>
{/* Scenario 1: Fleet Operations (Modification 3) */}
{/* 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-[9px] font-extrabold text-neutral-200">氢能车队运营</span>
<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>
{/* Horizontal split body */}
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
{/* Left: Thumbnail */}
<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>
{/* Right: Combined bullet checks */}
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
<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>
@@ -931,24 +943,21 @@ export default function App() {
</div>
</div>
{/* Scenario 2: Refueling Station Operations (Modification 3) */}
{/* 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-[9px] font-extrabold text-neutral-200">加氢站运营</span>
<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>
{/* Horizontal split body */}
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
{/* Left: Thumbnail */}
<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>
{/* Right: Combined bullet checks */}
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
<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>
@@ -961,24 +970,21 @@ export default function App() {
</div>
</div>
{/* Scenario 3: Energy & Data Center Computes (Modification 3) */}
{/* 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-[9px] font-extrabold text-neutral-200">能源/算力中心</span>
<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>
{/* Horizontal split body */}
<div className="flex flex-row items-center gap-1.5 flex-1 min-h-0 py-1">
{/* Left: Thumbnail */}
<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>
{/* Right: Combined bullet checks */}
<div className="flex-1 flex flex-col justify-center gap-0.5 text-[8.5px] font-mono leading-tight pl-0.5 overflow-hidden">
<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>
@@ -994,7 +1000,7 @@ export default function App() {
</div>
{/* Bottom value matrix (价值输出层 中英双语 - Extremely Compact Layout for Full screen) */}
{/* 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" />
@@ -1044,12 +1050,12 @@ export default function App() {
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-1 max-w-3xl px-4 flex-shrink-0">
<div className="inline-flex items-center gap-2 px-2.5 py-0.5 bg-[#121212]/80 border border-neutral-800 text-[9px] uppercase tracking-widest text-[#00F2FF] rounded font-mono mb-1.5">
<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">
<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">
@@ -1073,19 +1079,19 @@ export default function App() {
/>
<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-[9px] font-mono text-[#00F2FF] uppercase tracking-widest font-bold">SCENARIO 01 / COLD-CHAIN</span>
<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-4 space-y-4">
<div className="space-y-1.5">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-neutral-300">
<Cpu size={12} className="text-[#00F2FF]" />
<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-2.5 rounded border border-neutral-900 leading-relaxed">
<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>、
@@ -1093,12 +1099,12 @@ export default function App() {
</p>
</div>
<div className="space-y-1.5">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-[#00F2FF]">
<Workflow size={12} />
<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-2.5 rounded border border-neutral-900 leading-relaxed">
<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 绿氢可信碳账户，支持多区域核算方法学扩展。
@@ -1108,7 +1114,7 @@ export default function App() {
</div>
{/* Indicators Table */}
<div className="p-4 bg-neutral-950/80 border-t border-neutral-900 grid grid-cols-2 gap-2 mt-2 shrink-0 rounded-b-xl">
<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: '氢消耗碳因子',
@@ -1139,27 +1145,27 @@ export default function App() {
tooltip: '当前已由OneOS平台引擎完成设备端高可信原始核算、哈希闭环与存证落底，配有标准化区块链对外接口，支持对公信减排平台的无缝扩展对接。'
},
].map((m, i) => (
<div key={i} className="relative group/indicator bg-neutral-900/60 p-2 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-[10px] font-bold text-neutral-300 tracking-wide flex items-center gap-1 select-none">
<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-[7px] font-mono text-neutral-500 uppercase tracking-wider">{m.labelEn}</span>
<span className="text-xs font-mono font-extrabold text-[#00F2FF] mt-0.5">{m.value}</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-1.5 leading-normal">
<div className="flex items-center justify-between border-b border-neutral-800 pb-1 font-sans font-bold text-white text-[11px]">
<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-[7px] font-mono text-neutral-500">{m.labelEn}</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-[8px] text-[#00F2FF] break-all border border-neutral-900">{m.formula}</code>
<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-[9.5px] leading-relaxed font-sans">{m.tooltip}</p>
<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" />
@@ -1183,19 +1189,19 @@ export default function App() {
/>
<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-[9px] font-mono text-amber-400 uppercase tracking-widest font-bold">SCENARIO 02 / HYDROGEN DISPATCH</span>
<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-4 space-y-4">
<div className="space-y-1.5">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-neutral-300">
<Cpu size={12} className="text-[#00F2FF]" />
<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-2.5 rounded border border-neutral-900 leading-relaxed">
<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>、
@@ -1203,12 +1209,12 @@ export default function App() {
</p>
</div>
<div className="space-y-1.5">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-amber-400">
<Workflow size={12} />
<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-2.5 rounded border border-neutral-900 leading-relaxed text-left">
<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>，
@@ -1219,7 +1225,7 @@ export default function App() {
</div>
{/* Indicators Table */}
<div className="p-4 bg-neutral-950/80 border-t border-neutral-900 grid grid-cols-2 gap-2 mt-2 shrink-0 rounded-b-xl">
<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: '当前剩余续航',
@@ -1250,27 +1256,27 @@ export default function App() {
tooltip: '安全等级触发阀值器。由于氢气瓶残压极低、在保供城配干线段可能发生抛锚，云端算法自动将任务补能调优级提升至 P2 (高级)，以自动调度资源保障车辆补能。'
},
].map((m, i) => (
<div key={i} className="relative group/indicator bg-neutral-900/60 p-2 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-[10px] font-bold text-neutral-300 tracking-wide flex items-center gap-1 select-none">
<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-[7px] font-mono text-neutral-500 uppercase tracking-wider">{m.labelEn}</span>
<span className="text-xs font-mono font-extrabold text-amber-400 mt-0.5">{m.value}</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-1.5 leading-normal">
<div className="flex items-center justify-between border-b border-neutral-800 pb-1 font-sans font-bold text-white text-[11px]">
<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-[7px] font-mono text-neutral-500">{m.labelEn}</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-[8px] text-amber-400 break-all border border-neutral-900">{m.formula}</code>
<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-[9.5px] leading-relaxed font-sans">{m.tooltip}</p>
<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" />
@@ -1294,31 +1300,31 @@ export default function App() {
/>
<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-[9px] font-mono text-red-400 tracking-widest font-bold">SCENARIO 03 / ESG TRUST</span>
<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-4 space-y-4">
<div className="space-y-1.5">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-neutral-300">
<Cpu size={12} className="text-[#00F2FF]" />
<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-2.5 rounded border border-neutral-900 leading-relaxed">
<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-1.5">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-red-400">
<Workflow size={12} />
<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-2.5 rounded border border-neutral-900 leading-relaxed">
<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>
@@ -1327,7 +1333,7 @@ export default function App() {
</div>
{/* Indicators Table */}
<div className="p-4 bg-neutral-950/80 border-t border-neutral-900 grid grid-cols-2 gap-2 mt-2 shrink-0 rounded-b-xl">
<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信披凭证',
@@ -1358,27 +1364,27 @@ export default function App() {
tooltip: 'OneOS 平台对车端里程、能耗数据完成了高可信原始核算与智能签名闭环，符合国际ESG公信框架，支持零改动弹性平移至多方碳普惠联盟。'
},
].map((m, i) => (
<div key={i} className="relative group/indicator bg-neutral-900/60 p-2 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-[10px] font-bold text-neutral-300 tracking-wide flex items-center gap-1 select-none">
<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-[7px] font-mono text-neutral-500 uppercase tracking-wider">{m.labelEn}</span>
<span className="text-xs font-mono font-extrabold text-red-400 mt-0.5">{m.value}</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-1.5 leading-normal">
<div className="flex items-center justify-between border-b border-neutral-800 pb-1 font-sans font-bold text-white text-[11px]">
<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-[7px] font-mono text-neutral-500">{m.labelEn}</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-[8px] text-red-400 break-all border border-neutral-900">{m.formula}</code>
<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-[9.5px] leading-relaxed font-sans">{m.tooltip}</p>
<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" />
@@ -1392,11 +1398,11 @@ export default function App() {
</div>
{/* Linear Flowchart Diagram */}
<div className="w-full max-w-[1780px] bg-[#070707] border border-neutral-800 rounded-xl relative overflow-hidden py-5 px-6 shrink-0 mt-5 shadow-inner">
<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-5">
<span className="text-[8px] 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-0.5">车端原始数据到绿氢碳资产入账全链路</h3>
<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">
@@ -1407,14 +1413,14 @@ export default function App() {
{ step: '04', title: '碳资产认证与存证', desc: '核算双碳替代量并生成可信存证，自动录入ESG系统。' },
{ step: '05', title: '数据智能闭环决策', desc: '输出车辆余氢续航预测、加氢站低成本补能路线推荐，完成闭环。' }
].map((step, idx) => (
<div key={idx} className="flex flex-col justify-between p-3 bg-neutral-950 rounded border border-neutral-900/60 relative group hover:border-[#00F2FF]/30 transition-all">
<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-1.5">
<span className="text-[10px] font-mono text-[#00F2FF] font-bold">STEP {step.step}</span>
<span className="text-[7.5px] font-mono text-neutral-600 font-bold uppercase">SECURED</span>
<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-[11px] font-bold text-neutral-200 mt-2">{step.title}</h4>
<p className="text-[10px] text-neutral-500 mt-1 leading-normal">{step.desc}</p>
<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) */}
@@ -1428,19 +1434,19 @@ export default function App() {
</div>
</div>
{/* Carbon Factors & Methodology Database (Injected for realistic data reference) */}
<div className="w-full max-w-[1780px] bg-[#070707] border border-neutral-800 rounded-xl relative overflow-hidden p-5 shrink-0 mt-5 shadow-2xl text-left">
{/* 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-4 mb-4">
<div className="space-y-0.5">
<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-[10px] text-neutral-500 font-sans">
<p className="text-[11px] text-neutral-500 font-sans leading-relaxed">
本模块基于多地区自愿温室气体减排与碳普惠政策设立，用于多车型碳核算体系的本地高置信检验。系统采用即插即用型因数规则，将车端原始遥测流与云端计算逻辑解耦，面向未来阶段的全国或多极区块链联盟共识对接预留通用扩展通道。
</p>
</div>
@@ -1449,13 +1455,13 @@ export default function App() {
<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-[10px] 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'}`}
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-[10px] 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'}`}
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>
@@ -1464,27 +1470,27 @@ export default function App() {
{dbTab === 'factors' ? (
<div className="space-y-4">
{/* Database Table Warning Banner */}
<div className="bg-[#0b0c0d] border border-neutral-800 rounded p-3 text-[10px] text-neutral-300 flex items-start gap-2 leading-relaxed font-sans">
{/* 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-0.5">多区域碳排放因子装配式核定：</strong>
<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-[11px] font-sans">
<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-2.5">所属地区/城市</th>
<th className="p-2.5">对应运输方式</th>
<th className="p-2.5">动力燃料类型</th>
<th className="p-2.5">适用载重量型号</th>
<th className="p-2.5">碳核算计算公式</th>
<th className="p-2.5 text-right">百公里参考排放/减排因子</th>
<th className="p-2.5 text-right">核证上链确权状态</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">碳核算计算公式</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">
@@ -1499,16 +1505,16 @@ export default function App() {
{ 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-2.5 font-sans font-medium text-neutral-300">{row.city}</td>
<td className="p-2.5 font-sans text-neutral-400">{row.type}</td>
<td className={`p-2.5 font-sans text-[11px] font-bold ${row.fuel.includes('氢气') ? 'text-emerald-400' : 'text-amber-500/80'}`}>{row.fuel}</td>
<td className="p-2.5 text-neutral-300 font-sans">{row.model}</td>
<td className="p-2.5 text-neutral-400 text-[10px] break-all max-w-[280px]">
<code className="bg-neutral-950/80 px-1.5 py-0.5 rounded text-neutral-200 border border-neutral-900/50">{row.formula}</code>
<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-2.5 text-right font-bold text-[#00F2FF]">{row.em}</td>
<td className="p-2.5 text-right font-sans">
<span className={`px-1.5 py-0.5 rounded text-[8.5px] font-bold ${row.status.includes('核证') ? 'bg-emerald-950/30 text-emerald-400 border border-emerald-900/30' : 'bg-neutral-900 text-neutral-500'}`}>
<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>
@@ -1520,26 +1526,26 @@ export default function App() {
</div>
) : (
<div className="space-y-4">
{/* Database Table Warning Banner */}
<div className="bg-[#0b0c0d] border border-neutral-800 rounded p-3 text-[10px] text-neutral-400 flex items-start gap-2 leading-relaxed font-sans">
{/* 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-0.5">依据官方自愿温室气体减排标准：</strong>
<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-[11px] font-sans">
<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-2.5">涵盖及特定地区</th>
<th className="p-2.5">方法学政策/机制名称</th>
<th className="p-2.5">主导/发布机构</th>
<th className="p-2.5">政策颁布执行日期</th>
<th className="p-2.5">适用车型/基准约束范围</th>
<th className="p-2.5 text-right">OneOS 本地对齐算法</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">适用车型/基准约束范围</th>
<th className="p-3 text-right">OneOS 本地对齐算法</th>
</tr>
</thead>
<tbody className="divide-y divide-neutral-900/60 font-mono text-neutral-300">
@@ -1549,12 +1555,12 @@ export default function App() {
{ 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-2.5 font-sans font-medium text-neutral-300">{row.region}</td>
<td className="p-2.5 font-sans text-neutral-200 font-bold leading-normal max-w-[280px] text-[10.5px]">{row.name}</td>
<td className="p-2.5 font-sans text-neutral-400">{row.org}</td>
<td className="p-2.5 text-neutral-400">{row.date}</td>
<td className="p-2.5 text-neutral-400 font-sans">{row.scope}</td>
<td className="p-2.5 text-right font-bold text-emerald-400 font-sans">{row.calc}</td>
<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>

1
vite.config.ts
View File

@@ -5,6 +5,7 @@ import {defineConfig} from 'vite';
export default defineConfig(() => {
return {
base: '/lnbox/',
plugins: [react(), tailwindcss()],
resolve: {
alias: {