| 名称 | 状态 | 操作 |
|---|---|---|
| gateway | 运行中 | |
| accounts | 运行中 | |
| billing | 降级 | |
| archive | 已停止 |
<div class="table-wrap"> <table class="admin-table"> <thead> <tr><th>名称</th><th>状态</th><th class="ops">操作</th></tr> </thead> <tbody> <tr><td>gateway</td><td><span class="pill ok">运行中</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> <tr><td>accounts</td><td><span class="pill ok">运行中</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> <tr><td>billing</td><td><span class="pill warn">降级</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr> <tr><td>archive</td><td><span class="pill bad">已停止</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">启用</button></td></tr> </tbody> </table></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/table';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add table
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/table.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="table-wrap"> <table class="admin-table"> <thead><tr><th>名称</th><th class="ops">操作</th></tr></thead> <tbody> <tr><td>gateway</td><td class="ops"><button class="btn btn-sm">编辑</button></td></tr> </tbody> </table></div>