b2d0016a0d
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
- React 18 + Babel-in-browser SPA 原型，覆盖 8 个画板： 实时地图 / 车辆详情 / 历史查询 / 轨迹回放 / 事件规则 / 通知中心 / ESG 碳减排 / 移动端 - 设计系统：IBM Plex Sans + JetBrains Mono，亮/暗双主题，羚牛绿 #007143 - 数据模型：12 + 40 辆车，TBOX (T) / JT808+1078 (JT) / 双源 (B) - 部署：nginx 静态托管，Dockerfile + woodpecker.yml + docker-compose.yml - 镜像：harbor.lnh2e.com/lingniu-v1/ln-vdc:<branch>-<VERSION> - 容器端口 80，宿主映射 8112，含 /healthz 探活
56 lines
2.6 KiB
JavaScript
56 lines
2.6 KiB
JavaScript
// artboard-variant-light.jsx — light theme variation of overview
|
|
const ArtboardLightVariant = () => {
|
|
return (
|
|
<div className="app" style={{
|
|
"--bg-0": "oklch(0.985 0.003 250)",
|
|
"--bg-1": "oklch(1 0 0)",
|
|
"--bg-2": "oklch(0.97 0.005 250)",
|
|
"--bg-3": "oklch(0.93 0.008 250)",
|
|
"--fg-0": "oklch(0.20 0.018 250)",
|
|
"--fg-1": "oklch(0.32 0.015 250)",
|
|
"--fg-2": "oklch(0.50 0.015 250)",
|
|
"--fg-3": "oklch(0.65 0.015 250)",
|
|
"--border-1": "oklch(0.88 0.008 250 / 0.9)",
|
|
"--border-2": "oklch(0.78 0.010 250 / 0.9)",
|
|
"--accent": "oklch(0.62 0.150 175)",
|
|
"--accent-soft": "oklch(0.62 0.150 175 / 0.10)"
|
|
}}>
|
|
<Sidebar active="map"/>
|
|
<div style={{flex:1, display:"flex", flexDirection:"column", minWidth:0}}>
|
|
<Topbar
|
|
crumbs={["羚牛车辆数据中心", "实时监控", "总览"]}
|
|
kpis={[
|
|
{ lbl:"在线", val:"487/512", delta:"95.1%", deltaUp:true },
|
|
{ lbl:"行驶", val:"312" },
|
|
{ lbl:"告警", val:"8", delta:"+2", deltaUp:false },
|
|
]}
|
|
/>
|
|
<div style={{flex:1, display:"grid", gridTemplateColumns:"1fr 320px", minHeight:0}}>
|
|
<div style={{position:"relative", background:"#eef0f2"}}>
|
|
<FleetMap selectedId="浙F08638F" onSelect={()=>{}} variant="minimal"/>
|
|
</div>
|
|
<div style={{borderLeft:"1px solid var(--border-1)", background:"var(--bg-1)", padding:"14px 16px"}}>
|
|
<div className="eyebrow" style={{marginBottom:6}}>当前选中</div>
|
|
<div className="mono strong" style={{fontSize:18, fontWeight:600}}>浙F08638F</div>
|
|
<div className="muted" style={{fontSize:11, marginTop:4}}>孙超 · 状态告警</div>
|
|
<div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginTop:12, fontSize:11}}>
|
|
{[
|
|
{l:"速度", v:"0", u:"km/h"},
|
|
{l:"SOC", v:"9", u:"%"},
|
|
{l:"H₂", v:"0.8", u:"MPa"},
|
|
{l:"温度", v:"102", u:"°C"},
|
|
].map((k,i)=>(
|
|
<div key={i} style={{padding:8, background:"var(--bg-2)", borderRadius:4, border:"1px solid var(--border-1)"}}>
|
|
<div className="muted" style={{fontSize:10}}>{k.l}</div>
|
|
<div><span className="mono strong" style={{fontSize:18}}>{k.v}</span><span className="muted mono" style={{fontSize:10, marginLeft:3}}>{k.u}</span></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
window.ArtboardLightVariant = ArtboardLightVariant;
|