shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 移动端文字截断问题
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
- KPI卡片添加 whitespace-nowrap 防止文字折行截断
- 小屏隐藏图标省空间
- 运营/库存明细换行展示（自营/租赁、库存/异动）
- 地区缩写改为完整名称（江浙沪/广东/北京/新疆/其他）

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-03-26 15:06:51 +08:00
parent 363399faed
commit d3c85a62e6
1 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/App.tsx
View File

@@ -196,80 +196,76 @@ export default function App() {
{/* Header Summary - Ultra Compact */}
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2 mb-6">
{/* Total Assets */}
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
<div className="w-7 h-7 rounded bg-gray-50 flex items-center justify-center text-gray-400">
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
<div className="w-7 h-7 rounded bg-gray-50 flex-shrink-0 flex items-center justify-center text-gray-400 hidden sm:flex">
<Truck size={14} />
</div>
<div>
<div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">资产总数</div>
<div className="min-w-0">
<div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5 whitespace-nowrap">资产总数</div>
<div className="text-base font-bold text-gray-800 leading-none">{SUMMARY.totalAssets.toLocaleString()}</div>
</div>
</div>
{/* Operating */}
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
<div className="w-7 h-7 rounded bg-blue-50 flex items-center justify-center text-blue-500">
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
<div className="w-7 h-7 rounded bg-blue-50 flex-shrink-0 flex items-center justify-center text-blue-500 hidden sm:flex">
<Activity size={14} />
</div>
<div>
<div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总运营</div>
<div className="flex items-baseline gap-1">
<span className="text-base font-bold text-blue-600 leading-none">{SUMMARY.operating.total}</span>
<span className="text-[8px] text-gray-400 leading-none">
自{SUMMARY.operating.self} 租{SUMMARY.operating.leased}
</span>
<div className="min-w-0">
<div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5 whitespace-nowrap">总运营</div>
<div className="text-base font-bold text-blue-600 leading-none">{SUMMARY.operating.total}</div>
<div className="text-[8px] text-gray-400 leading-none mt-0.5 whitespace-nowrap">
自营{SUMMARY.operating.self} 租赁{SUMMARY.operating.leased}
</div>
</div>
</div>
{/* Inventory */}
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
<div className="w-7 h-7 rounded bg-gray-50 flex items-center justify-center text-gray-500">
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
<div className="w-7 h-7 rounded bg-gray-50 flex-shrink-0 flex items-center justify-center text-gray-500 hidden sm:flex">
<Warehouse size={14} />
</div>
<div>
<div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5">总库存</div>
<div className="flex items-baseline gap-1">
<span className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</span>
<span className="text-[8px] text-gray-400 leading-none">
库{SUMMARY.inventory.inStock} 异{SUMMARY.inventory.abnormal}
</span>
<div className="min-w-0">
<div className="text-[9px] text-gray-400 font-medium uppercase leading-none mb-0.5 whitespace-nowrap">总库存</div>
<div className="text-base font-bold text-gray-800 leading-none">{SUMMARY.inventory.total}</div>
<div className="text-[8px] text-gray-400 leading-none mt-0.5 whitespace-nowrap">
库存{SUMMARY.inventory.inStock} 异动{SUMMARY.inventory.abnormal}
</div>
</div>
</div>
{/* Pending */}
<div
className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 cursor-pointer hover:bg-blue-50 transition-colors"
className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0 cursor-pointer hover:bg-blue-50 transition-colors"
onClick={() => setShowPlateNumbers({ batch: 'All', model: 'All', location: 'All', category: 'Pending' })}
>
<div className="w-7 h-7 rounded bg-blue-50 flex items-center justify-center text-blue-500">
<div className="w-7 h-7 rounded bg-blue-50 flex-shrink-0 flex items-center justify-center text-blue-500 hidden sm:flex">
<PlusCircle size={14} />
</div>
<div>
<div className="text-[9px] text-blue-500 font-bold uppercase leading-none mb-0.5">待交车</div>
<div className="min-w-0">
<div className="text-[9px] text-blue-500 font-bold uppercase leading-none mb-0.5 whitespace-nowrap">待交车</div>
<div className="text-base font-bold text-blue-600 leading-none">{SUMMARY.pendingDelivery}</div>
</div>
</div>
{/* New */}
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
<div className="w-7 h-7 rounded bg-green-50 flex items-center justify-center text-green-500">
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
<div className="w-7 h-7 rounded bg-green-50 flex-shrink-0 flex items-center justify-center text-green-500 hidden sm:flex">
<PlusCircle size={14} />
</div>
<div>
<div className="text-[9px] text-green-500 font-bold uppercase leading-none mb-0.5">本周新增</div>
<div className="min-w-0">
<div className="text-[9px] text-green-500 font-bold uppercase leading-none mb-0.5 whitespace-nowrap">本周新增</div>
<div className="text-base font-bold text-green-600 leading-none">{SUMMARY.weeklyNew}</div>
</div>
</div>
{/* Removed */}
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2">
<div className="w-7 h-7 rounded bg-red-50 flex items-center justify-center text-red-500">
<div className="bg-white p-2 rounded-sm border border-gray-100 shadow-sm flex items-center gap-2 min-w-0">
<div className="w-7 h-7 rounded bg-red-50 flex-shrink-0 flex items-center justify-center text-red-500 hidden sm:flex">
<MinusCircle size={14} />
</div>
<div>
<div className="text-[9px] text-red-500 font-bold uppercase leading-none mb-0.5">本周移除</div>
<div className="min-w-0">
<div className="text-[9px] text-red-500 font-bold uppercase leading-none mb-0.5 whitespace-nowrap">本周移除</div>
<div className="text-base font-bold text-red-600 leading-none">{SUMMARY.weeklyRemoved}</div>
</div>
</div>
@@ -626,7 +622,7 @@ export default function App() {
{['嘉兴', '广东', '北京', '新疆', '其他'].map((reg) => (
<div key={reg} className="text-center">
<div className="text-[8px] text-gray-400 mb-0.5">
{reg === '嘉兴' ? '浙' : reg === '广东' ? '粤' : reg === '北京' ? '京' : reg === '新疆' ? '新' : '其'}
{reg === '嘉兴' ? '江浙沪' : reg}
</div>
{(model.inventoryRegions[reg] || 0) > 0 ? (
<button