iter(g277): 新增日历热力图组件

apps/demo/main.ts

@@ -34,6 +34,7 @@ import {
   layout,
   jsonViewer,
   kbd,
+  heatmap,
   highlight,
   datePicker,
   transfer,
@@ -1836,6 +1837,22 @@ const content = h(
       card({ title: '转化率（30 天）' }, h('div', { style: 'display:flex;align-items:center;gap:12px' }, statistic({ value: signal(3.62), precision: 2, suffix: '%' }), sparkline({ values: [4.1, 3.9, 4.0, 3.8, 3.7, 3.9, 3.6], area: false }))),
     ),
   ),
+  section(
+    'sec-heat',
+    '日历热力图',
+    'heatmap：一周一列、七天一行，格子浓度表示当天数量（按最大值归一四档）；末列对齐到本周，悬停看具体日期与次数。',
+    (() => {
+      const today = new Date();
+      const values: { date: string; count: number }[] = [];
+      for (let i = 0; i < 84; i += 1) {
+        const d = new Date(today.getTime() - i * 86400000);
+        const key = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+        const count = (i * 7) % 5 === 0 ? 0 : (i * 3) % 7; // 伪随机但确定性：每次渲染同一图案
+        values.push({ date: key, count });
+      }
+      return heatmap({ values, weeks: 12, formatValue: (n, d) => d + ' 提交 ' + n + ' 次' });
+    })(),
+  ),
 );
 
 // 悬浮按钮：fixed 定位，挂 body 不参与页面布局