ICEN UI 设计系统

贡献日历

贡献日历（renderCalendar，GitHub 提交图同款）：dates + values 自动按周布局，月份标签 + 星期列 + 5 档色阶图例。周格热力（renderHeatmap）的日历完整形态。

近 18 周提交

<div class="chart-grid">  <div style="grid-column:1/-1">    <p class="chart-cap">近 18 周提交</p>    <div class="chart" id="calendar-demo"></div>  </div></div>

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import '@icen.ai/ui/kit/chart-calendar';

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add chart-calendar

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/chart-calendar.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { renderCalendar } from '@icen.ai/ui/kit/chart-calendar'; renderCalendar(el, {  dates: ['2026-06-01', '2026-06-02', /* … */],   // ISO 日期（旧 → 新）  values: [5, 12, /* … */],                        // 与 dates 配对});// 或精确形态 data: [{ date, value }[]]；色阶 tone 可覆盖// 交互：配 renderChart({ type: 'calendar', dates, values }) 走通用层