a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
615 lines
32 KiB
JavaScript
615 lines
32 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 小羚羚氢能产业数字化平台方案书 · Axhub Runtime 可交互响应式汇报页
|
||
|
||
const Component = function (props) {
|
||
var useState = React.useState;
|
||
var useEffect = React.useEffect;
|
||
var useMemo = React.useMemo;
|
||
var useCallback = React.useCallback;
|
||
|
||
var antd = window.antd || {};
|
||
var App = antd.App || React.Fragment;
|
||
var Tag = antd.Tag;
|
||
|
||
var C_PRIMARY = '#16D1A1';
|
||
var C_PRIMARY_D = '#00BFA5';
|
||
var C_HERO_BG = '#071218';
|
||
var C_HERO_ACCENT = '#0d2a24';
|
||
var C_PAGE = '#f4f6f8';
|
||
var C_CARD = '#ffffff';
|
||
var C_TEXT = '#1a1f2e';
|
||
var C_MUTED = '#5c6578';
|
||
var C_LINE = 'rgba(15,23,42,0.08)';
|
||
var C_BLUE = '#2563eb';
|
||
var C_ORANGE = '#ea580c';
|
||
var C_PURPLE = '#7c3aed';
|
||
|
||
var FONT = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif';
|
||
|
||
var sectionNav = [
|
||
{ key: 'hero', label: '总览' },
|
||
{ key: 'chain', label: '产业链' },
|
||
{ key: 'roles', label: '用户角色' },
|
||
{ key: 'loops', label: '业务闭环' },
|
||
{ key: 'roadmap', label: '路线图' },
|
||
{ key: 'summary', label: '汇报要点' }
|
||
];
|
||
|
||
var kpiStats = [
|
||
{ label: '目标用户角色', value: '7', unit: '类', color: C_BLUE },
|
||
{ label: '业务闭环', value: '3', unit: '条', color: C_PRIMARY },
|
||
{ label: '产业链覆盖', value: '上中下游', unit: '', color: C_ORANGE },
|
||
{ label: '首期上线', value: '6', unit: '个月', color: C_PURPLE }
|
||
];
|
||
|
||
var chainSteps = [
|
||
{
|
||
key: 'upstream',
|
||
title: '上游 · 制氢采购',
|
||
desc: '制氢企业挂牌售氢、管束车调度、到站交付',
|
||
revenue: '交易撮合费 · 物流调度 · 数据监测',
|
||
color: C_BLUE,
|
||
icon: 'H₂'
|
||
},
|
||
{
|
||
key: 'mid',
|
||
title: '中游 · 加氢站',
|
||
desc: '预约接单、电子加氢卡结算、巡检与对账',
|
||
revenue: 'SaaS 服务费 · 支付通道 · 对账增值',
|
||
color: C_PRIMARY,
|
||
icon: '站'
|
||
},
|
||
{
|
||
key: 'down',
|
||
title: '下游 · 氢能车运营',
|
||
desc: '租赁/自营、交还车、能源与 ETC 账单闭环',
|
||
revenue: '租赁服务 · 资产管理 · 金融结算',
|
||
color: C_ORANGE,
|
||
icon: '车'
|
||
}
|
||
];
|
||
|
||
var roles = [
|
||
{
|
||
id: 'internal',
|
||
name: '内部用户',
|
||
sub: '羚牛氢能员工',
|
||
tag: '运营中枢',
|
||
color: C_BLUE,
|
||
capability: '合同-收款-交还车-结算全链路；车辆全生命周期；风控审批',
|
||
scenes: '业务员 / 运维 / 能源 / 财务 / 法务 / CEO',
|
||
detail: [
|
||
{ title: '租赁/自营闭环', text: '合同发起 → 客户评级/敏感客户校验 → 标准/非标审批 → 收款 → 交车 → 账单 → 还车 → 结算（含替换车）' },
|
||
{ title: '车辆全生命周期', text: '采购/外租 → 验车入库 → 维修/年审/保养/故障/事故 → 出库（出售/报废/停租）' }
|
||
]
|
||
},
|
||
{
|
||
id: 'captain',
|
||
name: '车队长',
|
||
sub: '车队管理者',
|
||
tag: '在线租车',
|
||
color: C_PRIMARY,
|
||
capability: '一键租车报价签约；车辆运行/账单/开票/对讲',
|
||
scenes: '注册验证、在线合同、实时定位',
|
||
detail: [
|
||
{ title: '租车签约流程', text: '选车型租期 → 推送业务员 → 自动报价 → 在线确认 → 电子合同签章' },
|
||
{ title: '交车后管控', text: '实时定位轨迹、氢电账单、ETC、合同账单、付款、开票、语音对讲' }
|
||
]
|
||
},
|
||
{
|
||
id: 'driver',
|
||
name: '氢能车司机',
|
||
sub: '自营 + 外部租赁',
|
||
tag: '运输执行',
|
||
color: C_ORANGE,
|
||
capability: '路线导航、能源账单、安全培训、预约加氢、故障救援',
|
||
scenes: '内外部司机差异化权限',
|
||
detail: [
|
||
{ title: '内部自营司机', text: '定位轨迹、路线规划导航、氢电ETC账单、安全考试、证照管理、预约加氢、紧急救援' },
|
||
{ title: '外部租赁司机', text: '轨迹导航、能源账单、安全培训、车辆证件、预约加氢、故障提报' }
|
||
]
|
||
},
|
||
{
|
||
id: 'station',
|
||
name: '加氢站用户',
|
||
sub: '站点运营',
|
||
tag: '加注服务',
|
||
color: C_PRIMARY_D,
|
||
capability: '预约接单、电子加氢卡、OCR 识别加氢量、氢费对账',
|
||
scenes: '特种设备/行驶证校验',
|
||
detail: [
|
||
{ title: '核心能力', text: '预约接单验证、电子加氢卡结算、加氢前中后检查、OCR 识别面板加氢量、氢费对账、氢气采购' }
|
||
]
|
||
},
|
||
{
|
||
id: 'repair',
|
||
name: '维修站用户',
|
||
sub: '维保服务',
|
||
tag: '派单对账',
|
||
color: C_PURPLE,
|
||
capability: '维修/保养派单接单、费用记录、运维核实对账',
|
||
scenes: '配件人工自动入账',
|
||
detail: [
|
||
{ title: '流程', text: '接收派单 → 记录维修过程与费用 → 生成维修记录 → 运维核实 → 在线对账账期结算' }
|
||
]
|
||
},
|
||
{
|
||
id: 'producer',
|
||
name: '制氢企业',
|
||
sub: '氢气供应',
|
||
tag: '氢气贸易',
|
||
color: C_BLUE,
|
||
capability: '在线挂牌售氢、管束车监测、询价成交与运费结算',
|
||
scenes: '对接加氢站采购',
|
||
detail: [
|
||
{ title: '商业模式', text: '企业验证 → 在线挂牌售氢（类商城）→ 管束车监测 → 询价成交 → 配送到站 → 运费结算' }
|
||
]
|
||
},
|
||
{
|
||
id: 'group',
|
||
name: '集团客户',
|
||
sub: '企业级客户',
|
||
tag: '集团总览',
|
||
color: C_ORANGE,
|
||
capability: '多项目车辆/账单/能源/ETC 总览；在线租车签约',
|
||
scenes: '类车队长但主体为企业',
|
||
detail: [
|
||
{ title: '与车队长差异', text: '企业级多项目、多合同、多车队统一视图；支持 APP 在线租车并生成合同闭环' }
|
||
]
|
||
}
|
||
];
|
||
|
||
var loops = [
|
||
{
|
||
id: 'ops',
|
||
title: '闭环一 · 租赁/自营运营',
|
||
tag: '核心收入',
|
||
color: C_BLUE,
|
||
flow: '意向单 → 报价 → 合同（评级/敏感客户审批）→ 交车 → 运营监控 → 账单收款 → 还车 → 结算 → 替换车'
|
||
},
|
||
{
|
||
id: 'asset',
|
||
title: '闭环二 · 车辆资产生命周期',
|
||
tag: '资产管控',
|
||
color: C_PRIMARY,
|
||
flow: '采购/外租 → 验车入库 → 维保/年审/故障/事故 → 能源消耗 → 出库处置 → OneOS 数据底座'
|
||
},
|
||
{
|
||
id: 'h2',
|
||
title: '闭环三 · 氢气贸易与加注',
|
||
tag: '产业延伸',
|
||
color: C_ORANGE,
|
||
flow: '制氢挂牌 → 加氢站询价采购 → 管束车配送 → 司机预约加氢 → 电子加氢卡结算 → 氢费对账 → 账单聚合'
|
||
}
|
||
];
|
||
|
||
var phases = [
|
||
{ id: 'p1', phase: '第一阶段', period: '0–6 月', focus: '内部用户 + 车队长 + 司机', deliver: '合同审批、交还车、替换车、基础账单', active: true },
|
||
{ id: 'p2', phase: '第二阶段', period: '6–12 月', focus: '加氢站 + 维修站', deliver: '预约加氢、电子加氢卡、维修派单对账' },
|
||
{ id: 'p3', phase: '第三阶段', period: '12–18 月', focus: '制氢企业 + 氢气商城', deliver: '挂牌售氢、管束车调度、到站结算' },
|
||
{ id: 'p4', phase: '第四阶段', period: '18–24 月', focus: '集团客户 + 数据智能', deliver: '集团总览、风控模型、产业数据分析' }
|
||
];
|
||
|
||
var summaryPoints = [
|
||
'小羚羚不是单一 App，而是氢能产业多端协同的数字化入口，与 OneOS Web 形成「大屏管控 + 手机执行」互补。',
|
||
'首期 6 个月聚焦租赁闭环与内部风控，快速产生业务价值；氢气贸易模块作为第二增长曲线。',
|
||
'客户评级与敏感客户审批内嵌合同流程，从源头降低收账风险，支撑非标业务合规扩张。',
|
||
'七类用户共用同一数据底座，避免信息孤岛，为智能调度与产业分析奠定基础。'
|
||
];
|
||
|
||
var activeSectionState = useState('hero');
|
||
var activeSection = activeSectionState[0];
|
||
var setActiveSection = activeSectionState[1];
|
||
|
||
var activeRoleState = useState('internal');
|
||
var activeRole = activeRoleState[0];
|
||
var setActiveRole = activeRoleState[1];
|
||
|
||
var activeChainState = useState('upstream');
|
||
var activeChain = activeChainState[0];
|
||
var setActiveChain = activeChainState[1];
|
||
|
||
var activeLoopState = useState('ops');
|
||
var activeLoop = activeLoopState[0];
|
||
var setActiveLoop = activeLoopState[1];
|
||
|
||
var activePhaseState = useState('p1');
|
||
var activePhase = activePhaseState[0];
|
||
var setActivePhase = activePhaseState[1];
|
||
|
||
var navOpenState = useState(false);
|
||
var navOpen = navOpenState[0];
|
||
var setNavOpen = navOpenState[1];
|
||
|
||
var selectedRole = useMemo(function () {
|
||
return roles.find(function (r) { return r.id === activeRole; }) || roles[0];
|
||
}, [activeRole]);
|
||
|
||
var selectedChain = useMemo(function () {
|
||
return chainSteps.find(function (c) { return c.key === activeChain; }) || chainSteps[0];
|
||
}, [activeChain]);
|
||
|
||
var selectedPhase = useMemo(function () {
|
||
return phases.find(function (p) { return p.id === activePhase; }) || phases[0];
|
||
}, [activePhase]);
|
||
|
||
var scrollToSection = useCallback(function (key) {
|
||
setActiveSection(key);
|
||
setNavOpen(false);
|
||
var el = document.getElementById('xll-section-' + key);
|
||
if (el && el.scrollIntoView) {
|
||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}, []);
|
||
|
||
useEffect(function () {
|
||
var sectionIds = sectionNav.map(function (s) { return s.key; });
|
||
function onScroll() {
|
||
var found = 'hero';
|
||
for (var i = 0; i < sectionIds.length; i++) {
|
||
var node = document.getElementById('xll-section-' + sectionIds[i]);
|
||
if (node) {
|
||
var rect = node.getBoundingClientRect();
|
||
if (rect.top <= 120) found = sectionIds[i];
|
||
}
|
||
}
|
||
setActiveSection(found);
|
||
}
|
||
window.addEventListener('scroll', onScroll, { passive: true });
|
||
return function () { window.removeEventListener('scroll', onScroll); };
|
||
}, []);
|
||
|
||
var css =
|
||
'*,*::before,*::after{box-sizing:border-box}' +
|
||
'.xll-plan{font-family:' + FONT + ';color:' + C_TEXT + ';background:' + C_PAGE + ';min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}' +
|
||
'.xll-plan a{color:inherit;text-decoration:none}' +
|
||
'.xll-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid ' + C_LINE + '}' +
|
||
'.xll-nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:16px}' +
|
||
'.xll-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:' + C_TEXT + ';flex-shrink:0}' +
|
||
'.xll-brand-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,' + C_PRIMARY + ',' + C_PRIMARY_D + ');color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}' +
|
||
'.xll-nav-links{display:flex;gap:4px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}' +
|
||
'.xll-nav-links::-webkit-scrollbar{display:none}' +
|
||
'.xll-nav-link{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;color:' + C_MUTED + ';cursor:pointer;border:none;background:transparent;white-space:nowrap;transition:color .2s,background .2s}' +
|
||
'.xll-nav-link:hover{color:' + C_TEXT + ';background:rgba(22,209,161,0.08)}' +
|
||
'.xll-nav-link.is-active{color:' + C_PRIMARY_D + ';background:rgba(22,209,161,0.14);font-weight:600}' +
|
||
'.xll-nav-toggle{display:none;padding:8px 12px;border-radius:8px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;font-size:13px}' +
|
||
'.xll-hero{position:relative;background:' + C_HERO_BG + ';color:#fff;overflow:hidden;padding:64px 20px 72px}' +
|
||
'.xll-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(22,209,161,0.18),transparent 55%),radial-gradient(ellipse 50% 40% at 10% 80%,rgba(37,99,235,0.12),transparent 50%);pointer-events:none}' +
|
||
'.xll-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black 20%,transparent 90%);pointer-events:none}' +
|
||
'.xll-hero-inner{position:relative;max-width:1200px;margin:0 auto}' +
|
||
'.xll-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}' +
|
||
'.xll-badge{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.88)}' +
|
||
'.xll-badge-accent{border-color:rgba(22,209,161,0.45);background:rgba(22,209,161,0.12);color:#6ee7c8}' +
|
||
'.xll-hero-title{font-size:clamp(28px,5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-0.02em;margin:0 0 16px;max-width:720px}' +
|
||
'.xll-hero-desc{font-size:clamp(14px,2.5vw,17px);line-height:1.65;color:rgba(255,255,255,0.72);max-width:640px;margin:0 0 28px}' +
|
||
'.xll-hero-quote{padding:16px 20px;border-radius:12px;border-left:3px solid ' + C_PRIMARY + ';background:' + C_HERO_ACCENT + ';font-size:14px;line-height:1.6;color:rgba(255,255,255,0.9);max-width:720px}' +
|
||
'.xll-hero-quote strong{color:#6ee7c8;font-weight:600}' +
|
||
'.xll-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-36px;position:relative;z-index:2;padding:0 20px;max-width:1200px;margin-left:auto;margin-right:auto}' +
|
||
'.xll-kpi{background:' + C_CARD + ';border-radius:16px;padding:20px 18px;border:1px solid ' + C_LINE + ';box-shadow:0 4px 24px rgba(15,23,42,0.06);transition:transform .25s,box-shadow .25s;cursor:default}' +
|
||
'.xll-kpi:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(15,23,42,0.1)}' +
|
||
'.xll-kpi-val{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-0.02em}' +
|
||
'.xll-kpi-unit{font-size:14px;font-weight:600;margin-left:2px;opacity:.75}' +
|
||
'.xll-kpi-label{font-size:12px;color:' + C_MUTED + ';margin-top:6px}' +
|
||
'.xll-main{max-width:1200px;margin:0 auto;padding:48px 20px 64px}' +
|
||
'.xll-section{margin-bottom:56px;scroll-margin-top:72px}' +
|
||
'.xll-section-head{margin-bottom:24px}' +
|
||
'.xll-section-tag{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:' + C_PRIMARY_D + ';margin-bottom:8px}' +
|
||
'.xll-section-title{font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-0.02em;margin:0 0 8px;color:' + C_TEXT + '}' +
|
||
'.xll-section-desc{font-size:14px;color:' + C_MUTED + ';max-width:640px;margin:0;line-height:1.6}' +
|
||
'.xll-chain-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}' +
|
||
'.xll-chain-tab{padding:10px 18px;border-radius:12px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:' + C_MUTED + ';transition:all .2s}' +
|
||
'.xll-chain-tab.is-active{color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(15,23,42,0.12)}' +
|
||
'.xll-chain-panel{background:#fff;border-radius:16px;border:1px solid ' + C_LINE + ';padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}' +
|
||
'.xll-chain-panel-title{font-size:20px;font-weight:800;margin:0 0 8px}' +
|
||
'.xll-chain-panel-desc{font-size:14px;color:' + C_MUTED + ';line-height:1.6;margin:0 0 12px}' +
|
||
'.xll-chain-revenue{font-size:13px;padding:10px 14px;border-radius:10px;background:rgba(22,209,161,0.08);color:' + C_PRIMARY_D + ';font-weight:500}' +
|
||
'.xll-chain-visual{aspect-ratio:16/10;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:900;color:rgba(255,255,255,0.95);position:relative;overflow:hidden}' +
|
||
'.xll-chain-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.12))}' +
|
||
'.xll-biz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}' +
|
||
'.xll-biz-card{background:#fff;border-radius:14px;padding:20px;border:1px solid ' + C_LINE + '}' +
|
||
'.xll-biz-card h4{margin:0 0 10px;font-size:15px;font-weight:700}' +
|
||
'.xll-biz-card p{margin:0;font-size:13px;color:' + C_MUTED + ';line-height:1.6}' +
|
||
'.xll-roles-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:20px;align-items:start}' +
|
||
'.xll-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}' +
|
||
'.xll-role-card{padding:14px 16px;border-radius:12px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;text-align:left;transition:all .2s;width:100%}' +
|
||
'.xll-role-card:hover{border-color:rgba(22,209,161,0.35);box-shadow:0 4px 16px rgba(15,23,42,0.06)}' +
|
||
'.xll-role-card.is-active{border-color:transparent;box-shadow:0 8px 24px rgba(15,23,42,0.1);transform:translateY(-1px)}' +
|
||
'.xll-role-name{font-size:14px;font-weight:700;margin-bottom:2px}' +
|
||
'.xll-role-sub{font-size:11px;color:' + C_MUTED + '}' +
|
||
'.xll-role-detail{background:#fff;border-radius:16px;border:1px solid ' + C_LINE + ';padding:24px;position:sticky;top:80px}' +
|
||
'.xll-role-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}' +
|
||
'.xll-role-detail h3{margin:0;font-size:20px;font-weight:800}' +
|
||
'.xll-role-cap{font-size:13px;color:' + C_MUTED + ';line-height:1.6;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid ' + C_LINE + '}' +
|
||
'.xll-role-block{margin-bottom:14px}' +
|
||
'.xll-role-block h5{margin:0 0 6px;font-size:13px;font-weight:700;color:' + C_TEXT + '}' +
|
||
'.xll-role-block p{margin:0;font-size:13px;color:' + C_MUTED + ';line-height:1.55}' +
|
||
'.xll-loops{display:flex;flex-direction:column;gap:12px}' +
|
||
'.xll-loop{padding:18px 20px;border-radius:14px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;transition:all .2s}' +
|
||
'.xll-loop:hover{border-color:rgba(22,209,161,0.3)}' +
|
||
'.xll-loop.is-active{border-color:transparent;box-shadow:0 8px 28px rgba(15,23,42,0.08)}' +
|
||
'.xll-loop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}' +
|
||
'.xll-loop.is-active .xll-loop-head{margin-bottom:12px}' +
|
||
'.xll-loop-title{font-size:15px;font-weight:700}' +
|
||
'.xll-loop-flow{font-size:13px;color:' + C_MUTED + ';line-height:1.65;padding-top:12px;border-top:1px dashed ' + C_LINE + '}' +
|
||
'.xll-roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}' +
|
||
'.xll-phase{padding:16px;border-radius:14px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;transition:all .2s;text-align:left;width:100%}' +
|
||
'.xll-phase:hover{border-color:rgba(22,209,161,0.35)}' +
|
||
'.xll-phase.is-active{border-color:transparent;box-shadow:0 8px 24px rgba(15,23,42,0.08)}' +
|
||
'.xll-phase-num{font-size:11px;font-weight:700;color:' + C_PRIMARY_D + ';margin-bottom:6px}' +
|
||
'.xll-phase-name{font-size:14px;font-weight:700;margin-bottom:4px}' +
|
||
'.xll-phase-period{font-size:12px;color:' + C_MUTED + '}' +
|
||
'.xll-phase-detail{background:#fff;border-radius:16px;border:1px solid ' + C_LINE + ';padding:24px}' +
|
||
'.xll-phase-detail h4{margin:0 0 12px;font-size:18px;font-weight:800}' +
|
||
'.xll-phase-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px}' +
|
||
'.xll-phase-meta dt{font-size:11px;font-weight:700;color:' + C_MUTED + ';text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}' +
|
||
'.xll-phase-meta dd{margin:0;font-size:14px;line-height:1.55}' +
|
||
'.xll-summary{background:linear-gradient(135deg,' + C_HERO_BG + ',' + C_HERO_ACCENT + ');border-radius:20px;padding:32px;color:#fff}' +
|
||
'.xll-summary h3{margin:0 0 20px;font-size:20px;font-weight:800}' +
|
||
'.xll-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}' +
|
||
'.xll-summary-item{display:flex;gap:12px;font-size:14px;line-height:1.6;color:rgba(255,255,255,0.88)}' +
|
||
'.xll-summary-num{flex-shrink:0;width:24px;height:24px;border-radius:8px;background:rgba(22,209,161,0.25);color:#6ee7c8;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}' +
|
||
'.xll-footer{text-align:center;padding:24px 20px 32px;font-size:12px;color:' + C_MUTED + '}' +
|
||
'@media(max-width:960px){.xll-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-24px}.xll-chain-panel{grid-template-columns:1fr}.xll-biz-grid{grid-template-columns:1fr}.xll-roles-layout{grid-template-columns:1fr}.xll-role-detail{position:static}.xll-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}.xll-phase-meta{grid-template-columns:1fr}}' +
|
||
'@media(max-width:640px){.xll-nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 16px 16px;border-bottom:1px solid ' + C_LINE + ';box-shadow:0 8px 24px rgba(15,23,42,0.08)}.xll-nav.is-open .xll-nav-links{display:flex}.xll-nav-toggle{display:block;margin-left:auto}.xll-nav-inner{position:relative;flex-wrap:wrap;height:auto;min-height:56px;padding-top:10px;padding-bottom:10px}.xll-kpi-row{grid-template-columns:1fr 1fr;gap:10px}.xll-role-grid{grid-template-columns:1fr}.xll-roadmap{grid-template-columns:1fr}.xll-hero{padding:48px 16px 56px}.xll-main{padding:32px 16px 48px}}';
|
||
|
||
function renderTag(text, color) {
|
||
if (Tag) {
|
||
return React.createElement(Tag, { color: color || C_PRIMARY, style: { borderRadius: 6, fontWeight: 600 } }, text);
|
||
}
|
||
return React.createElement('span', {
|
||
style: {
|
||
display: 'inline-block',
|
||
padding: '2px 8px',
|
||
borderRadius: 6,
|
||
fontSize: 11,
|
||
fontWeight: 600,
|
||
background: 'rgba(22,209,161,0.12)',
|
||
color: C_PRIMARY_D
|
||
}
|
||
}, text);
|
||
}
|
||
|
||
function renderNavLink(item) {
|
||
return React.createElement('button', {
|
||
key: item.key,
|
||
type: 'button',
|
||
className: 'xll-nav-link' + (activeSection === item.key ? ' is-active' : ''),
|
||
onClick: function () { scrollToSection(item.key); }
|
||
}, item.label);
|
||
}
|
||
|
||
return React.createElement(App, null,
|
||
React.createElement('div', { className: 'xll-plan' },
|
||
React.createElement('style', null, css),
|
||
|
||
React.createElement('nav', { className: 'xll-nav' + (navOpen ? ' is-open' : ''), 'aria-label': '方案导航' },
|
||
React.createElement('div', { className: 'xll-nav-inner' },
|
||
React.createElement('div', { className: 'xll-brand' },
|
||
React.createElement('div', { className: 'xll-brand-mark' }, '羚'),
|
||
React.createElement('span', null, '小羚羚 · 平台方案')
|
||
),
|
||
React.createElement('button', {
|
||
type: 'button',
|
||
className: 'xll-nav-toggle',
|
||
onClick: function () { setNavOpen(!navOpen); },
|
||
'aria-expanded': navOpen
|
||
}, navOpen ? '收起' : '导航'),
|
||
React.createElement('div', { className: 'xll-nav-links', role: 'tablist' },
|
||
sectionNav.map(renderNavLink)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('header', { id: 'xll-section-hero', className: 'xll-hero xll-section' },
|
||
React.createElement('div', { className: 'xll-hero-grid' }),
|
||
React.createElement('div', { className: 'xll-hero-inner' },
|
||
React.createElement('div', { className: 'xll-hero-badges' },
|
||
React.createElement('span', { className: 'xll-badge xll-badge-accent' }, '方案书 v1.0'),
|
||
React.createElement('span', { className: 'xll-badge' }, '手机端 · 小羚羚'),
|
||
React.createElement('span', { className: 'xll-badge' }, 'OneOS 生态')
|
||
),
|
||
React.createElement('h1', { className: 'xll-hero-title' }, '小羚羚氢能产业数字化平台方案'),
|
||
React.createElement('p', { className: 'xll-hero-desc' },
|
||
以手机端「小羚羚」为统一入口，连接内部运营、车队客户、司机、加氢站、维修站、制氢企业与集团客户，实现氢气采购—加氢站—氢能车运营全链路数字化闭环。'
|
||
),
|
||
React.createElement('div', { className: 'xll-hero-quote' },
|
||
React.createElement('strong', null, '一句话定位：'),
|
||
'小羚羚 = 氢能产业的「业务操作系统」—— 一端登录、多角色协同，把合同、车辆、能源、维保、氢气贸易串成可落地、可风控、可结算的完整商业链条。'
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('div', { className: 'xll-kpi-row' },
|
||
kpiStats.map(function (k) {
|
||
return React.createElement('div', { key: k.label, className: 'xll-kpi' },
|
||
React.createElement('div', { className: 'xll-kpi-val', style: { color: k.color } },
|
||
k.value,
|
||
k.unit ? React.createElement('span', { className: 'xll-kpi-unit' }, k.unit) : null
|
||
),
|
||
React.createElement('div', { className: 'xll-kpi-label' }, k.label)
|
||
);
|
||
})
|
||
),
|
||
|
||
React.createElement('main', { className: 'xll-main' },
|
||
|
||
React.createElement('section', { id: 'xll-section-chain', className: 'xll-section' },
|
||
React.createElement('div', { className: 'xll-section-head' },
|
||
React.createElement('div', { className: 'xll-section-tag' }, 'Business Plan'),
|
||
React.createElement('h2', { className: 'xll-section-title' }, '氢能产业链商业计划'),
|
||
React.createElement('p', { className: 'xll-section-desc' },
|
||
覆盖氢气采购、加氢站运营、氢能车租赁/自营三大环节，形成「制氢—储运—加注—运营—结算」一体化商业模式。'
|
||
)
|
||
),
|
||
React.createElement('div', { className: 'xll-chain-tabs', role: 'tablist' },
|
||
chainSteps.map(function (step) {
|
||
var isActive = activeChain === step.key;
|
||
return React.createElement('button', {
|
||
key: step.key,
|
||
type: 'button',
|
||
role: 'tab',
|
||
className: 'xll-chain-tab' + (isActive ? ' is-active' : ''),
|
||
style: isActive ? { background: step.color } : undefined,
|
||
onClick: function () { setActiveChain(step.key); }
|
||
}, step.title);
|
||
})
|
||
),
|
||
React.createElement('div', { className: 'xll-chain-panel', role: 'tabpanel' },
|
||
React.createElement('div', null,
|
||
React.createElement('h3', { className: 'xll-chain-panel-title' }, selectedChain.title),
|
||
React.createElement('p', { className: 'xll-chain-panel-desc' }, selectedChain.desc),
|
||
React.createElement('div', { className: 'xll-chain-revenue' }, '收入来源：' + selectedChain.revenue)
|
||
),
|
||
React.createElement('div', {
|
||
className: 'xll-chain-visual',
|
||
style: { background: 'linear-gradient(145deg,' + selectedChain.color + ',rgba(0,0,0,0.25))' },
|
||
'aria-hidden': true
|
||
}, selectedChain.icon)
|
||
),
|
||
React.createElement('div', { className: 'xll-biz-grid', style: { marginTop: 20 } },
|
||
chainSteps.map(function (step) {
|
||
return React.createElement('div', { key: step.key + '-biz', className: 'xll-biz-card' },
|
||
React.createElement('h4', null, step.title),
|
||
React.createElement('p', null, step.desc + '。' + step.revenue + '。')
|
||
);
|
||
})
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xll-section-roles', className: 'xll-section' },
|
||
React.createElement('div', { className: 'xll-section-head' },
|
||
React.createElement('div', { className: 'xll-section-tag' }, 'Platform'),
|
||
React.createElement('h2', { className: 'xll-section-title' }, '七类用户 · 一套数据底座'),
|
||
React.createElement('p', { className: 'xll-section-desc' },
|
||
点击角色卡片查看详细能力与业务场景，七端共用 OneOS 数据底座。'
|
||
)
|
||
),
|
||
React.createElement('div', { className: 'xll-roles-layout' },
|
||
React.createElement('div', { className: 'xll-role-grid', role: 'list' },
|
||
roles.map(function (role) {
|
||
var isActive = activeRole === role.id;
|
||
return React.createElement('button', {
|
||
key: role.id,
|
||
type: 'button',
|
||
className: 'xll-role-card' + (isActive ? ' is-active' : ''),
|
||
style: isActive ? { background: 'linear-gradient(135deg,rgba(22,209,161,0.06),#fff)', borderLeft: '3px solid ' + role.color } : { borderLeft: '3px solid transparent' },
|
||
onClick: function () { setActiveRole(role.id); }
|
||
},
|
||
React.createElement('div', { className: 'xll-role-name' }, role.name),
|
||
React.createElement('div', { className: 'xll-role-sub' }, role.sub)
|
||
);
|
||
})
|
||
),
|
||
React.createElement('div', { className: 'xll-role-detail' },
|
||
React.createElement('div', { className: 'xll-role-detail-head' },
|
||
React.createElement('h3', null, selectedRole.name),
|
||
renderTag(selectedRole.tag, selectedRole.color)
|
||
),
|
||
React.createElement('p', { className: 'xll-role-cap' }, selectedRole.capability),
|
||
selectedRole.detail.map(function (block, idx) {
|
||
return React.createElement('div', { key: idx, className: 'xll-role-block' },
|
||
React.createElement('h5', null, block.title),
|
||
React.createElement('p', null, block.text)
|
||
);
|
||
}),
|
||
React.createElement('p', { style: { fontSize: 12, color: C_MUTED, margin: '12px 0 0' } },
|
||
'关键场景：', selectedRole.scenes
|
||
)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xll-section-loops', className: 'xll-section' },
|
||
React.createElement('div', { className: 'xll-section-head' },
|
||
React.createElement('div', { className: 'xll-section-tag' }, 'Closed Loop'),
|
||
React.createElement('h2', { className: 'xll-section-title' }, '三大业务闭环总览'),
|
||
React.createElement('p', { className: 'xll-section-desc' }, '点击展开查看完整业务流转路径。')
|
||
),
|
||
React.createElement('div', { className: 'xll-loops' },
|
||
loops.map(function (loop) {
|
||
var isActive = activeLoop === loop.id;
|
||
return React.createElement('div', {
|
||
key: loop.id,
|
||
className: 'xll-loop' + (isActive ? ' is-active' : ''),
|
||
style: isActive ? { borderLeft: '3px solid ' + loop.color } : undefined,
|
||
role: 'button',
|
||
tabIndex: 0,
|
||
onClick: function () { setActiveLoop(isActive ? '' : loop.id); },
|
||
onKeyDown: function (e) {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
setActiveLoop(isActive ? '' : loop.id);
|
||
}
|
||
}
|
||
},
|
||
React.createElement('div', { className: 'xll-loop-head' },
|
||
React.createElement('span', { className: 'xll-loop-title' }, loop.title),
|
||
renderTag(loop.tag, loop.color)
|
||
),
|
||
isActive ? React.createElement('div', { className: 'xll-loop-flow' }, loop.flow) : null
|
||
);
|
||
})
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xll-section-roadmap', className: 'xll-section' },
|
||
React.createElement('div', { className: 'xll-section-head' },
|
||
React.createElement('div', { className: 'xll-section-tag' }, 'Roadmap'),
|
||
React.createElement('h2', { className: 'xll-section-title' }, '分阶段落地路线图'),
|
||
React.createElement('p', { className: 'xll-section-desc' }, '24 个月四阶段推进，先闭环后延伸。')
|
||
),
|
||
React.createElement('div', { className: 'xll-roadmap' },
|
||
phases.map(function (p, idx) {
|
||
var isActive = activePhase === p.id;
|
||
return React.createElement('button', {
|
||
key: p.id,
|
||
type: 'button',
|
||
className: 'xll-phase' + (isActive ? ' is-active' : ''),
|
||
style: isActive ? { borderLeft: '3px solid ' + C_PRIMARY } : undefined,
|
||
onClick: function () { setActivePhase(p.id); }
|
||
},
|
||
React.createElement('div', { className: 'xll-phase-num' }, 'PHASE ' + (idx + 1)),
|
||
React.createElement('div', { className: 'xll-phase-name' }, p.phase),
|
||
React.createElement('div', { className: 'xll-phase-period' }, p.period)
|
||
);
|
||
})
|
||
),
|
||
React.createElement('div', { className: 'xll-phase-detail' },
|
||
React.createElement('h4', null, selectedPhase.phase + ' · ' + selectedPhase.period),
|
||
React.createElement('dl', { className: 'xll-phase-meta' },
|
||
React.createElement('div', null,
|
||
React.createElement('dt', null, '重点模块'),
|
||
React.createElement('dd', null, selectedPhase.focus)
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('dt', null, '交付成果'),
|
||
React.createElement('dd', null, selectedPhase.deliver)
|
||
)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xll-section-summary', className: 'xll-section' },
|
||
React.createElement('div', { className: 'xll-summary' },
|
||
React.createElement('h3', null, '向管理层汇报要点'),
|
||
React.createElement('ul', { className: 'xll-summary-list' },
|
||
summaryPoints.map(function (text, i) {
|
||
return React.createElement('li', { key: i, className: 'xll-summary-item' },
|
||
React.createElement('span', { className: 'xll-summary-num' }, i + 1),
|
||
React.createElement('span', null, text)
|
||
);
|
||
})
|
||
)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('footer', { className: 'xll-footer' },
|
||
'文档版本 v1.0 · 羚牛氢能 · 小羚羚平台方案 · 供内部汇报使用 · OneOS 生态'
|
||
)
|
||
)
|
||
);
|
||
};
|
||
|
||
export default Component;
|