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 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-03-28 18:38:45 +08:00
parent f3fbb7116c
commit e38484d384
1 changed files with 20 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/App.tsx
View File

@@ -999,48 +999,34 @@ export default function App() {
<span className="text-xs font-bold text-gray-700">{model.model}</span> <span className="text-xs font-bold text-gray-700">{model.model}</span>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <span className="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-bold">资产 {model.total}</span>
onClick={(e) => { e.stopPropagation(); setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All' }); }} <span className="text-[10px] bg-orange-50 text-orange-600 px-1.5 py-0.5 rounded font-bold">库存 {model.inventory}</span>
className="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-bold active:bg-blue-100" <span className="text-[10px] bg-green-50 text-green-600 px-1.5 py-0.5 rounded font-bold">运营 {model.operating}</span>
>
资产 {model.total}
</button>
<span className="text-[10px] bg-green-50 text-green-600 px-1.5 py-0.5 rounded font-bold">
运营 {model.operating}
</span>
</div> </div>
</div> </div>
{expandedModels.has(model.model) && ( {expandedModels.has(model.model) && (
<div className="px-3 pb-3 pt-1 border-t border-gray-50 bg-gray-50/30"> <div className="px-3 pb-3 pt-1 border-t border-gray-50 bg-gray-50/30">
<div className="grid grid-cols-2 gap-y-3 gap-x-4 mt-2"> <div className="grid grid-cols-2 gap-y-3 gap-x-4 mt-2">
<div <div className="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-1 rounded transition-colors"
className="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-1 rounded transition-colors" onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Inventory', source: 'asset', title: `${model.model} - 库存` })}>
onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Inventory' })}
>
<span className="text-[10px] text-gray-400">总库存</span> <span className="text-[10px] text-gray-400">总库存</span>
<span className="text-xs font-bold text-blue-600">{model.inventory}</span> <span className="text-xs font-bold text-blue-600">{model.inventory}</span>
</div> </div>
<div <div className="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-1 rounded transition-colors"
className="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-1 rounded transition-colors" onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Pending', source: 'asset', title: `${model.model} - 待交车` })}>
onClick={() =>
setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Pending' })
}
>
<span className="text-[10px] text-gray-400">待交车</span> <span className="text-[10px] text-gray-400">待交车</span>
<span className="text-xs font-bold text-gray-600">{model.pending}</span> <span className="text-xs font-bold text-gray-600">{model.pending}</span>
</div> </div>
<div className="col-span-2 grid grid-cols-5 gap-1 py-2 border-y border-gray-100"> <div className="col-span-2 grid grid-cols-5 gap-1 py-2 border-y border-gray-100">
{['嘉兴', '广东', '北京', '新疆', '其他'].map((reg) => ( {['嘉兴', '广东', '北京', '新疆', '其他'].map(reg => (
<div key={reg} className="text-center"> <div key={reg} className="text-center">
<div className="text-[8px] text-gray-400 mb-0.5"> <div className="text-[8px] text-gray-400 mb-0.5">{reg === '嘉兴' ? '浙' : reg === '广东' ? '粤' : reg === '北京' ? '京' : reg === '新疆' ? '新' : '其'}</div>
{reg === '嘉兴' ? '江浙沪' : reg}
</div>
{(model.inventoryRegions[reg] || 0) > 0 ? ( {(model.inventoryRegions[reg] || 0) > 0 ? (
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setShowPlateNumbers({ batch: 'All', model: model.model, location: reg, category: 'Inventory' }); setShowPlateNumbers({ batch: 'All', model: model.model, location: reg, source: 'asset', title: `${model.model} - ${reg}` });
}} }}
className="text-[10px] font-bold text-blue-500 hover:underline" className="text-[10px] font-bold text-blue-500 hover:underline"
> >
@@ -1053,30 +1039,18 @@ export default function App() {
))} ))}
</div> </div>
<div className="col-span-2 grid grid-cols-3 gap-2 pt-1"> <div className="col-span-2 grid grid-cols-3 gap-2 pt-1">
<div <div className="bg-blue-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-blue-100/50 transition-colors"
className="bg-blue-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-blue-100/50 transition-colors" onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Delivered', source: 'asset', title: `${model.model} - 本周交车` })}>
onClick={() =>
setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Delivered' })
}
>
<span className="text-[8px] text-gray-400 mb-1">本周已交车</span> <span className="text-[8px] text-gray-400 mb-1">本周已交车</span>
<span className="text-xs font-bold text-blue-600">{model.weeklyDelivered}</span> <span className="text-xs font-bold text-blue-600">{model.weeklyDelivered}</span>
</div> </div>
<div <div className="bg-orange-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-orange-100/50 transition-colors"
className="bg-orange-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-orange-100/50 transition-colors" onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Returned', source: 'asset', title: `${model.model} - 本周还车` })}>
onClick={() =>
setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Returned' })
}
>
<span className="text-[8px] text-gray-400 mb-1">已还车</span> <span className="text-[8px] text-gray-400 mb-1">已还车</span>
<span className="text-xs font-bold text-orange-600">{model.weeklyReturned}</span> <span className="text-xs font-bold text-orange-600">{model.weeklyReturned}</span>
</div> </div>
<div <div className="bg-purple-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-purple-100/50 transition-colors"
className="bg-purple-50/50 p-2 rounded flex flex-col items-center cursor-pointer hover:bg-purple-100/50 transition-colors" onClick={() => setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Replaced', source: 'asset', title: `${model.model} - 本周替换` })}>
onClick={() =>
setShowPlateNumbers({ batch: 'All', model: model.model, location: 'All', category: 'Replaced' })
}
>
<span className="text-[8px] text-gray-400 mb-1">已替换</span> <span className="text-[8px] text-gray-400 mb-1">已替换</span>
<span className="text-xs font-bold text-purple-600">{model.weeklyReplaced}</span> <span className="text-xs font-bold text-purple-600">{model.weeklyReplaced}</span>
</div> </div>
@@ -2635,7 +2609,6 @@ export default function App() {
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm"> <div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
<div className="text-[10px] text-gray-400 uppercase mb-1">客户详情</div> <div className="text-[10px] text-gray-400 uppercase mb-1">客户详情</div>
<div className="text-sm font-bold text-gray-700">{cust.customer}</div> <div className="text-sm font-bold text-gray-700">{cust.customer}</div>
<div className="text-xs text-gray-500 mt-1">主责业务负责人: {cust.manager}</div>
</div> </div>
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm"> <div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
<div className="text-[10px] text-gray-400 uppercase mb-1">主要车型</div> <div className="text-[10px] text-gray-400 uppercase mb-1">主要车型</div>
@@ -2644,8 +2617,8 @@ export default function App() {
</div> </div>
</div> </div>
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm"> <div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
<div className="text-[10px] text-gray-400 uppercase mb-1">运营状态</div> <div className="text-[10px] text-gray-400 uppercase mb-1">业务经理</div>
<div className="text-sm font-bold text-green-600">正常运营中</div> <div className="text-sm font-bold text-gray-700">{cust.manager}</div>
</div> </div>
<div className="bg-white p-2 rounded border border-gray-100 shadow-sm"> <div className="bg-white p-2 rounded border border-gray-100 shadow-sm">
<div className="text-[10px] text-gray-400 uppercase mb-1">资产占比</div> <div className="text-[10px] text-gray-400 uppercase mb-1">资产占比</div>
@@ -2695,7 +2668,6 @@ export default function App() {
<div className="bg-gray-50 p-2 rounded border border-gray-100"> <div className="bg-gray-50 p-2 rounded border border-gray-100">
<div className="text-[8px] text-gray-400 uppercase mb-1">客户详情</div> <div className="text-[8px] text-gray-400 uppercase mb-1">客户详情</div>
<div className="text-[10px] font-bold text-gray-700">{cust.customer}</div> <div className="text-[10px] font-bold text-gray-700">{cust.customer}</div>
<div className="text-[8px] text-gray-500 mt-0.5">主责: {cust.manager}</div>
</div> </div>
<div className="bg-gray-50 p-2 rounded border border-gray-100"> <div className="bg-gray-50 p-2 rounded border border-gray-100">
<div className="text-[8px] text-gray-400 uppercase mb-1">主要车型</div> <div className="text-[8px] text-gray-400 uppercase mb-1">主要车型</div>
@@ -2704,8 +2676,8 @@ export default function App() {
</div> </div>
</div> </div>
<div className="bg-gray-50 p-2 rounded border border-gray-100"> <div className="bg-gray-50 p-2 rounded border border-gray-100">
<div className="text-[8px] text-gray-400 uppercase mb-1">运营状态</div> <div className="text-[8px] text-gray-400 uppercase mb-1">业务经理</div>
<div className="text-xs font-bold text-green-600">正常运营中</div> <div className="text-xs font-bold text-gray-700">{cust.manager}</div>
</div> </div>
<div className="bg-gray-50 p-2 rounded border border-gray-100"> <div className="bg-gray-50 p-2 rounded border border-gray-100">
<div className="text-[8px] text-gray-400 uppercase mb-1">资产占比</div> <div className="text-[8px] text-gray-400 uppercase mb-1">资产占比</div>