43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { Tag } from 'antd-mobile'
|
||
|
|
import type { RiskAlert, RiskLevel } from '../types'
|
||
|
|
|
||
|
|
type RiskAlertSectionProps = {
|
||
|
|
risks: RiskAlert[]
|
||
|
|
}
|
||
|
|
|
||
|
|
const levelMeta: Record<RiskLevel, { color: 'danger' | 'warning' | 'default'; label: string }> = {
|
||
|
|
red: { color: 'danger', label: '红色' },
|
||
|
|
yellow: { color: 'warning', label: '黄色' },
|
||
|
|
gray: { color: 'default', label: '灰色' },
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RiskAlertSection({ risks }: RiskAlertSectionProps) {
|
||
|
|
return (
|
||
|
|
<section className="section-block">
|
||
|
|
<div className="section-title-row">
|
||
|
|
<div>
|
||
|
|
<p className="section-kicker">Risk</p>
|
||
|
|
<h2>风险预警</h2>
|
||
|
|
</div>
|
||
|
|
<span className="risk-count">{risks.length} 条</span>
|
||
|
|
</div>
|
||
|
|
<div className="risk-list">
|
||
|
|
{risks.map((risk) => {
|
||
|
|
const meta = levelMeta[risk.level]
|
||
|
|
return (
|
||
|
|
<button className="risk-item" key={risk.id} type="button">
|
||
|
|
<div className="risk-header">
|
||
|
|
<Tag color={meta.color}>{meta.label}</Tag>
|
||
|
|
<span>{risk.type}</span>
|
||
|
|
<time>{risk.discoveredAt}</time>
|
||
|
|
</div>
|
||
|
|
<strong>{risk.title}</strong>
|
||
|
|
<p>{risk.description}</p>
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|