feat: WebUI 重构与更新

webui/static/js/components/CompactionStats.js

@@ -0,0 +1,52 @@
+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>
+    `;
+}