KpiHeadBar.tsx
1.03 KB
// REQ-USR-003: KPI 头条(标题 + 今日未处理/未清总数统计 + AI 占位按钮,复刻原型 .kpi-head)。
import { Button } from 'antd';
import { ThunderboltOutlined } from '@ant-design/icons';
import type { KPI_STATS } from './dashboardData';
import styles from './HomePage.module.css';
interface KpiHeadBarProps {
stats: typeof KPI_STATS;
}
export default function KpiHeadBar({ stats }: KpiHeadBarProps) {
return (
<div className={`${styles.panel} ${styles.kpiHead}`}>
<span className={styles.kpiHeadTitle}>KPI监控</span>
<span className={styles.kpiStat}>
<span>今日未处理:</span>
<b>{stats.todayPending}</b>
</span>
<span className={styles.kpiSep}>|</span>
<span className={`${styles.kpiStat} ${styles.kpiStatBlue}`}>
<span>未清总数:</span>
<b>{stats.openTotal}</b>
</span>
<Button type="primary" className={styles.aiBtn} icon={<ThunderboltOutlined />}>
小ai同学,请帮我安排今日工作
</Button>
</div>
);
}