feat(ui): add timestamps to lifecycle timeline and replace time distribution cards with table
This commit is contained in:
sinohqb
parent
d61657eedb
commit
ff734c72e5
@ -97,11 +97,19 @@ function decisionEvents(logs: DecisionLog[]): ActivityEvent[] {
|
||||
}))
|
||||
}
|
||||
|
||||
function LifecycleTimeline({ currentStage, abnormal }: { currentStage: string; abnormal: boolean }) {
|
||||
function LifecycleTimeline({ ev, currentStage, abnormal }: { ev: IntelligentEval; currentStage: string; abnormal: boolean }) {
|
||||
const currentIndex = STAGE_CONFIG.findIndex((s) => s.key === currentStage)
|
||||
|
||||
// Map stages to timestamps
|
||||
const stageTimes: Record<string, string | null> = {
|
||||
planning: ev.created_at,
|
||||
approval: ev.started_at, // Approval completed when execution started
|
||||
executing: ev.started_at,
|
||||
done: ev.completed_at,
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '12px 0' }}>
|
||||
{STAGE_CONFIG.map((stage, idx) => {
|
||||
const Icon = stage.icon
|
||||
const isCompleted = idx < currentIndex
|
||||
@ -117,10 +125,11 @@ function LifecycleTimeline({ currentStage, abnormal }: { currentStage: string; a
|
||||
: colors.bgSubtle
|
||||
|
||||
const textColor = isCompleted || isCurrent ? '#fff' : colors.textSecondary
|
||||
const time = stageTimes[stage.key]
|
||||
|
||||
return (
|
||||
<div key={stage.key} style={{ display: 'flex', alignItems: 'center', flex: idx < STAGE_CONFIG.length - 1 ? 1 : 'none' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
|
||||
<div key={stage.key} style={{ display: 'flex', alignItems: 'flex-start', flex: idx < STAGE_CONFIG.length - 1 ? 1 : 'none' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, minWidth: 80 }}>
|
||||
<div
|
||||
style={{
|
||||
width: 40,
|
||||
@ -138,10 +147,15 @@ function LifecycleTimeline({ currentStage, abnormal }: { currentStage: string; a
|
||||
>
|
||||
{isCompleted ? <CheckCircleOutlined /> : <Icon />}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: isCurrent ? colors.primary : colors.textSecondary, fontWeight: isCurrent ? 600 : 400 }}>
|
||||
<div style={{ fontSize: 12, color: isCurrent ? colors.primary : colors.textSecondary, fontWeight: isCurrent ? 600 : 400, textAlign: 'center' }}>
|
||||
{stage.title}
|
||||
{isCurrent && <div style={{ fontSize: 11, color: colors.textMuted, marginTop: 2 }}>当前阶段</div>}
|
||||
</div>
|
||||
{time && (
|
||||
<div style={{ fontSize: 11, color: colors.textMuted, textAlign: 'center' }}>
|
||||
{formatDateTime(time).split(' ')[1] || formatDateTime(time)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{idx < STAGE_CONFIG.length - 1 && (
|
||||
<div
|
||||
@ -149,8 +163,7 @@ function LifecycleTimeline({ currentStage, abnormal }: { currentStage: string; a
|
||||
flex: 1,
|
||||
height: 2,
|
||||
background: isCompleted ? statusColors.completed : colors.border,
|
||||
margin: '0 8px',
|
||||
marginBottom: 28,
|
||||
margin: '20px 8px 0',
|
||||
transition: 'all 0.3s',
|
||||
}}
|
||||
/>
|
||||
@ -162,67 +175,82 @@ function LifecycleTimeline({ currentStage, abnormal }: { currentStage: string; a
|
||||
)
|
||||
}
|
||||
|
||||
function TimeDistributionCards({ slots }: { slots: ExecutionProgress['slots'] }) {
|
||||
function TimeDistributionTable({ slots }: { slots: ExecutionProgress['slots'] }) {
|
||||
return (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
|
||||
{slots.map((slot) => {
|
||||
const plannedPct = slot.planned > 0 ? 100 : 0
|
||||
const createdPct = slot.planned > 0 ? (slot.created / slot.planned) * 100 : 0
|
||||
const completedPct = slot.planned > 0 ? (slot.completed / slot.planned) * 100 : 0
|
||||
<div style={{ border: `1px solid ${colors.border}`, borderRadius: 8, overflow: 'hidden' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||||
<thead>
|
||||
<tr style={{ background: colors.bgSubtle, borderBottom: `1px solid ${colors.border}` }}>
|
||||
<th style={{ padding: '10px 12px', textAlign: 'left', fontWeight: 500, fontSize: 12, color: colors.textSecondary }}>时段</th>
|
||||
<th style={{ padding: '10px 12px', textAlign: 'center', fontWeight: 500, fontSize: 12, color: colors.textSecondary }}>计划</th>
|
||||
<th style={{ padding: '10px 12px', textAlign: 'center', fontWeight: 500, fontSize: 12, color: colors.textSecondary }}>已创建</th>
|
||||
<th style={{ padding: '10px 12px', textAlign: 'center', fontWeight: 500, fontSize: 12, color: colors.textSecondary }}>已完成</th>
|
||||
<th style={{ padding: '10px 12px', textAlign: 'left', fontWeight: 500, fontSize: 12, color: colors.textSecondary, minWidth: 120 }}>进度</th>
|
||||
<th style={{ padding: '10px 12px', textAlign: 'center', fontWeight: 500, fontSize: 12, color: colors.textSecondary }}>状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{slots.map((slot) => {
|
||||
const pct = slot.planned > 0 ? Math.round((slot.completed / slot.planned) * 100) : 0
|
||||
const isComplete = slot.completed >= slot.planned && slot.planned > 0
|
||||
const isPast = slot.is_past
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={slot.time_slot}
|
||||
size="small"
|
||||
style={{
|
||||
border: slot.is_current ? `2px solid ${colors.primary}` : `1px solid ${colors.border}`,
|
||||
background: slot.is_current ? `${colors.primary}08` : colors.bgContainer,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 600 }}>{slot.time_slot}</div>
|
||||
{slot.is_current && (
|
||||
<Tag color={colors.primary} style={{ fontSize: 11, margin: 0 }}>
|
||||
<ClockCircleOutlined style={{ marginRight: 4 }} />
|
||||
当前
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}>
|
||||
<span>计划</span>
|
||||
<span>{slot.planned}</span>
|
||||
</div>
|
||||
<div style={{ height: 6, background: colors.bgSubtle, borderRadius: 3, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${plannedPct}%`, height: '100%', background: colors.textMuted, borderRadius: 3 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}>
|
||||
<span>已创建</span>
|
||||
<span>{slot.created}/{slot.planned}</span>
|
||||
</div>
|
||||
<div style={{ height: 6, background: colors.bgSubtle, borderRadius: 3, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${createdPct}%`, height: '100%', background: colors.primary, borderRadius: 3 }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: colors.textSecondary, marginBottom: 4 }}>
|
||||
<span>已完成</span>
|
||||
<span>{slot.completed}/{slot.planned}</span>
|
||||
</div>
|
||||
<div style={{ height: 6, background: colors.bgSubtle, borderRadius: 3, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${completedPct}%`, height: '100%', background: statusColors.completed, borderRadius: 3 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
return (
|
||||
<tr
|
||||
key={slot.time_slot}
|
||||
style={{
|
||||
borderBottom: `1px solid ${colors.border}`,
|
||||
background: slot.is_current ? `${colors.primary}08` : 'transparent',
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: '12px', display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontWeight: 500 }}>{slot.time_slot}</span>
|
||||
{slot.is_current && (
|
||||
<Tag color={colors.primary} style={{ fontSize: 11, margin: 0, padding: '0 6px' }}>
|
||||
<ClockCircleOutlined style={{ marginRight: 2 }} />
|
||||
当前
|
||||
</Tag>
|
||||
)}
|
||||
</td>
|
||||
<td style={{ padding: '12px', textAlign: 'center' }}>{slot.planned}</td>
|
||||
<td style={{ padding: '12px', textAlign: 'center', color: slot.created > 0 ? colors.text : colors.textMuted }}>
|
||||
{slot.created}
|
||||
</td>
|
||||
<td style={{ padding: '12px', textAlign: 'center', color: slot.completed > 0 ? statusColors.completed : colors.textMuted }}>
|
||||
{slot.completed}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{ flex: 1, height: 6, background: colors.bgSubtle, borderRadius: 3, overflow: 'hidden' }}>
|
||||
<div
|
||||
style={{
|
||||
width: `${pct}%`,
|
||||
height: '100%',
|
||||
background: isComplete ? statusColors.completed : colors.primary,
|
||||
borderRadius: 3,
|
||||
transition: 'width 0.3s',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span style={{ fontSize: 12, color: colors.textSecondary, minWidth: 36, textAlign: 'right' }}>{pct}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '12px', textAlign: 'center' }}>
|
||||
{isComplete ? (
|
||||
<Tag color={statusColors.completed} style={{ fontSize: 11, margin: 0 }}>已完成</Tag>
|
||||
) : isPast ? (
|
||||
<Tag color={statusColors.failed} style={{ fontSize: 11, margin: 0 }}>未达标</Tag>
|
||||
) : slot.is_current ? (
|
||||
<Tag color={colors.primary} style={{ fontSize: 11, margin: 0 }}>进行中</Tag>
|
||||
) : (
|
||||
<Tag style={{ fontSize: 11, margin: 0 }}>待执行</Tag>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -273,7 +301,7 @@ export default function ExecutionProcess({ ev }: { ev: IntelligentEval }) {
|
||||
return (
|
||||
<div style={{ height: '100%', overflowY: 'auto', padding: '16px 16px 24px' }}>
|
||||
<Card size="small" title="生命周期" style={{ marginBottom: 16 }}>
|
||||
<LifecycleTimeline currentStage={progress.current_stage} abnormal={abnormal} />
|
||||
<LifecycleTimeline ev={ev} currentStage={progress.current_stage} abnormal={abnormal} />
|
||||
{progress.blocker != null && (
|
||||
<Alert
|
||||
type={abnormal ? 'error' : 'warning'}
|
||||
@ -296,7 +324,7 @@ export default function ExecutionProcess({ ev }: { ev: IntelligentEval }) {
|
||||
{progress.slots.length === 0 ? (
|
||||
<Empty description="暂无时段分布（粗计划未提交或评估未开始执行）" />
|
||||
) : (
|
||||
<TimeDistributionCards slots={progress.slots} />
|
||||
<TimeDistributionTable slots={progress.slots} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user