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

refactor(scheduling): optimize UI for clarity and information density

Browse Source 
- Summary cards: white bg + color border, remove icons, more compact
- SuggestionList: replace badge stacking with compact 2-line layout,
  use color bars for priority, fix completion rate format (0.16 → 16.4%)
- SuggestionDetail: bottom-sheet on mobile, compact inline metrics
  instead of grid cards, reduce vertical space per candidate
- Follows ui-ux-pro-max Data-Dense Dashboard guidelines

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-16 21:04:26 +08:00
parent 495f4bf44f
commit 6ee811c937
3 changed files with 139 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/modules/scheduling/SchedulingModule.tsx
View File

@@ -81,51 +81,21 @@ export default function SchedulingModule() {
<>
{/* Summary Cards */}
<div className="grid grid-cols-3 gap-2">
{/* Card 1: 已达标车辆 */}
<div className="bg-emerald-50 border border-emerald-100 p-4 rounded-2xl">
<div className="flex items-center gap-1.5 mb-2">
<CheckCircle size={14} className="text-emerald-600" />
<span className="text-[11px] font-semibold text-emerald-700">已达标车辆</span>
</div>
<div className="text-2xl font-black text-emerald-700">{data.summary.qualifiedCount}</div>
<div className="text-[10px] text-emerald-500 mt-1">达标概率 ≥ 120%</div>
<div className="bg-white border border-emerald-100 p-3 rounded-2xl">
<div className="text-[10px] font-bold text-emerald-600 mb-1">已达标</div>
<div className="text-xl font-black text-emerald-700">{data.summary.qualifiedCount}<span className="text-[10px] font-normal text-emerald-400 ml-1">台</span></div>
</div>
{/* Card 2: 无望达标 */}
<div className="bg-rose-50 border border-rose-100 p-4 rounded-2xl">
<div className="flex items-center gap-1.5 mb-2">
<AlertTriangle size={14} className="text-rose-600" />
<span className="text-[11px] font-semibold text-rose-700">无望达标</span>
</div>
<div className="text-2xl font-black text-rose-700">{data.summary.hopelessCount}</div>
<div className="text-[10px] text-rose-500 mt-1">达标概率 &lt; 60%</div>
<div className="bg-white border border-rose-100 p-3 rounded-2xl">
<div className="text-[10px] font-bold text-rose-500 mb-1">无望达标</div>
<div className="text-xl font-black text-rose-700">{data.summary.hopelessCount}<span className="text-[10px] font-normal text-rose-400 ml-1">台</span></div>
</div>
{/* Card 3: 可干预 */}
<div className="bg-blue-50 border border-blue-100 p-4 rounded-2xl">
<div className="flex items-center gap-1.5 mb-2">
<TrendingUp size={14} className="text-blue-600" />
<span className="text-[11px] font-semibold text-blue-700">可干预</span>
</div>
<div className="text-2xl font-black text-blue-700">{data.summary.suggestionCount}</div>
<div className="text-[10px] text-blue-500 mt-1">
预计可新增达标 +{data.summary.estimatedGain} 台
</div>
<div className="bg-white border border-blue-100 p-3 rounded-2xl">
<div className="text-[10px] font-bold text-blue-600 mb-1">可干预</div>
<div className="text-xl font-black text-blue-700">{data.summary.suggestionCount}<span className="text-[10px] font-normal text-blue-400 ml-1">条</span></div>
<div className="text-[9px] text-blue-400 mt-0.5">+{data.summary.estimatedGain} 台可达标</div>
</div>
</div>
{/* Refresh Button */}
<div className="flex justify-end">
<button
onClick={loadData}
disabled={loading}
className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-600 transition-colors px-3 py-1.5 rounded-xl hover:bg-slate-100"
>
<RotateCcw size={13} className={loading ? 'animate-spin' : ''} />
刷新
</button>
</div>
{/* Suggestion List */}
<SuggestionList
suggestions={data.suggestions}