ICEN UI 设计系统

AI 任务清单

任务清单 .ai-todo：进度条（feedback progress 视觉）+ N/M 计数 + 7 态条目；running 条目用 activeForm 替换文案（Claude Code 模式）。renderAiTodo(el, items) 渲染；data-ai-todo-interactive 容器可点击循环状态 pending → running → done（icen:ai-todo-toggle {index, status}），默认只读。

点击任意任务循环状态 pending → running → done（running 时文案切 activeForm）

<div id="ai-todo-demo" data-ai-todo-interactive style="width:100%"></div><p class="demo-label" id="ai-todo-log" style="margin-top:8px">点击任意任务循环状态 pending → running → done（running 时文案切 activeForm）</p>

安装

bun add @icen.ai/ui

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

import '@icen.ai/ui/kit/ai-todo';

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

bunx --bun @icen.ai/ui add ai-todo

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

用法

import { renderAiTodo, initAiTodo } from '@icen.ai/ui/kit/ai-todo'; renderAiTodo(el, [  { content: '搭建 tokens 合并构建', status: 'done' },  { content: '联调接口', status: 'running', activeForm: '正在联调接口…' },  // Claude Code 模式运行文案  { content: '写测试', status: 'pending' },]);initAiTodo();   // data-ai-todo-interactive 容器可点击循环状态（icen:ai-todo-toggle {index, status}） <!-- 静态手写等价契约 --><div class="ai-todo" data-ai-todo-interactive>  <div class="ai-todo-head"><span class="ai-todo-progress">2/5</span>    <div class="ai-todo-bar" role="progressbar"><i style="width:40%"></i></div></div>  <div class="ai-todo-item is-running">    <span class="ai-item-status"></span>    <span class="ai-todo-text">实现登录页</span>    <span class="ai-todo-active">正在实现登录页…</span>  </div></div>