67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { theme } from 'antd'
|
||
import { STATUS_COLOR_LEGEND } from './constants'
|
||
|
||
function getStatusStyle(key: string, token: ReturnType<typeof theme.useToken>['token']) {
|
||
const map: Record<string, { bg: string; border: string }> = {
|
||
completed: { bg: token.colorSuccessBg, border: token.colorSuccessBorder },
|
||
pending: { bg: token.colorWarningBg, border: token.colorWarningBorder },
|
||
rejected: { bg: token.colorErrorBg, border: token.colorErrorBorder },
|
||
inProgress: { bg: token.colorInfoBg, border: token.colorInfoBorder },
|
||
notStarted: { bg: token.colorFillQuaternary, border: token.colorBorderSecondary },
|
||
}
|
||
return map[key] ?? { bg: token.colorFillQuaternary, border: token.colorBorderSecondary }
|
||
}
|
||
|
||
export function StatusLegend() {
|
||
const { token } = theme.useToken()
|
||
return (
|
||
<div
|
||
style={{
|
||
marginBottom: 16,
|
||
padding: '12px 16px',
|
||
background: token.colorBgContainer,
|
||
borderRadius: 10,
|
||
border: `1px solid ${token.colorBorder}`,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
flexWrap: 'wrap',
|
||
gap: '0 4px',
|
||
}}
|
||
>
|
||
<span style={{ fontSize: 12, color: token.colorTextSecondary, marginRight: 8, lineHeight: '20px' }}>
|
||
颜色说明：
|
||
</span>
|
||
{STATUS_COLOR_LEGEND.map(({ key, label }) => {
|
||
const style = getStatusStyle(key, token)
|
||
return (
|
||
<span
|
||
key={key}
|
||
style={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
marginRight: 16,
|
||
fontSize: 12,
|
||
color: token.colorTextSecondary,
|
||
lineHeight: '20px',
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
display: 'inline-block',
|
||
width: 20,
|
||
height: 14,
|
||
borderRadius: 4,
|
||
background: style.bg,
|
||
border: `1px solid ${style.border}`,
|
||
marginRight: 6,
|
||
flexShrink: 0,
|
||
}}
|
||
/>
|
||
{label}
|
||
</span>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
}
|