fix(energy): 站名长名称不再换行 + 「羚牛/外部」改为「羚牛车辆/外部车辆」
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
问题 1:广州新锋交通联新加氢站 等长名称在右侧空间足够时仍折行
- mobile 列宽过宽:120px (kg) + 88px (chainPct) 占去 232px
- 子行 pl-9 缩进 (36px) 也吃掉空间
修复:
- mobile 列宽收紧 84/80,gap 缩到 2,子行缩进 pl-6
- 名字 + 单价徽章改为 inline-flex(whitespace-nowrap)
名字一行写完,单价徽章紧跟其后;空间不够时单价徽章自动换到下一行
- desktop 列宽 140/120/104(之前 140/140/120)
问题 2:氢/电 daily 客户类型 segmented control
「羚牛」→「羚牛车辆」,「外部」→「外部车辆」更明确
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -68,7 +68,7 @@ export default function HydrogenDaily() {
|
||||
customer === c ? 'bg-white shadow-sm text-slate-800' : 'text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{c === 'external' ? '外部' : '羚牛'}
|
||||
{c === 'external' ? '外部车辆' : '羚牛车辆'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -137,14 +137,14 @@ export default function HydrogenDaily() {
|
||||
{!(customer === 'external' && rows !== null && rows.length === 0) && (
|
||||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
||||
{/* 表头 */}
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_140px_140px_120px] gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
|
||||
<span>日期 / 加氢站</span>
|
||||
<span className="hidden md:block text-right">单价 (元/Kg)</span>
|
||||
<span className="text-right">加氢量 (Kg)</span>
|
||||
<span className="text-right">环比</span>
|
||||
</div>
|
||||
{/* 合计行 */}
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_140px_140px_120px] gap-3 px-3 py-2 bg-blue-50/50 text-[12px] text-blue-600 font-bold">
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-blue-50/50 text-[12px] text-blue-600 font-bold">
|
||||
<span>合计</span>
|
||||
<span className="hidden md:block" />
|
||||
<span className="text-right">{totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}</span>
|
||||
@@ -167,7 +167,7 @@ export default function HydrogenDaily() {
|
||||
<div key={r.date} className={`border-t border-slate-100 ${abnormalBg}`}>
|
||||
<button
|
||||
onClick={() => toggle(r.date)}
|
||||
className="w-full grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_140px_140px_120px] gap-3 px-3 py-2.5 text-left hover:bg-slate-50/60 transition-colors"
|
||||
className="w-full grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2.5 text-left hover:bg-slate-50/60 transition-colors"
|
||||
>
|
||||
<span className="flex items-center gap-1 text-[12px] text-slate-700 font-bold">
|
||||
<ChevronRight size={14} className={`transition-transform ${open ? 'rotate-90' : ''} text-slate-400`} />
|
||||
@@ -191,16 +191,16 @@ export default function HydrogenDaily() {
|
||||
{r.stations.map(s => (
|
||||
<div
|
||||
key={s.name}
|
||||
className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_140px_140px_120px] gap-3 px-3 py-2.5 pl-9 border-t border-slate-100 first:border-t-0 items-start"
|
||||
className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 pl-6 md:pl-9 border-t border-slate-100 first:border-t-0 items-center"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[12px] text-slate-700 font-medium leading-snug break-words">
|
||||
<div className="min-w-0 flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-[12px] text-slate-700 font-medium whitespace-nowrap">
|
||||
{s.name}
|
||||
</div>
|
||||
</span>
|
||||
{s.pricePerKg > 0 && (
|
||||
<div className="md:hidden mt-1 inline-flex items-center gap-1 text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold">
|
||||
单价 {s.pricePerKg} 元/Kg
|
||||
</div>
|
||||
<span className="md:hidden inline-flex items-center text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold whitespace-nowrap">
|
||||
{s.pricePerKg} 元/Kg
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="hidden md:block text-right text-[12px] text-slate-500 font-bold tabular-nums">{s.pricePerKg > 0 ? s.pricePerKg : '—'}</span>
|
||||
|
||||
Reference in New Issue
Block a user