53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import { html } from 'htm/preact';
|
|
|
|
const styles = {
|
|
compactionStats: {
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border-color)',
|
|
borderRadius: 'var(--radius-lg)',
|
|
padding: '16px'
|
|
},
|
|
compactionTitle: {
|
|
fontSize: '15px',
|
|
fontWeight: 600,
|
|
color: 'var(--text-primary)',
|
|
marginBottom: '12px'
|
|
},
|
|
compactionGrid: {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
|
|
gap: '8px'
|
|
},
|
|
compactionItem: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '6px 0',
|
|
fontSize: '13px',
|
|
gap: "24px"
|
|
}
|
|
};
|
|
|
|
function formatNumber(num) {
|
|
return num.toLocaleString('zh-CN');
|
|
}
|
|
|
|
export function CompactionStats({ stats }) {
|
|
if (!stats) return null;
|
|
|
|
return html`
|
|
<div style=${styles.compactionStats}>
|
|
<div style=${styles.compactionTitle}>Compaction 统计</div>
|
|
<div style=${styles.compactionGrid}>
|
|
${Object.entries(stats).map(([key, value]) => html`
|
|
<div key=${key} style=${styles.compactionItem}>
|
|
<span style=${{ color: 'var(--text-secondary)' }}>${key}</span>
|
|
<span style=${{ color: 'var(--text-primary)', fontWeight: 500 }}>
|
|
${typeof value === 'number' ? formatNumber(value) : value}
|
|
</span>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|