| 名称 | 区域 | 状态 | 实例数 | 操作 |
|---|---|---|---|---|
| gateway | us-east-1 | 运行中 | 4 | |
| accounts | us-west-2 | 运行中 | 2 | |
| billing | eu-west-1 | 降级 | 2 | |
| archive | ap-northeast-1 | 已停止 | 0 | |
| search | us-east-1 | 运行中 | 6 | |
| 合计 | 14 | |||
<div class="icen-table-wrap icen-table-wrap--bordered"> <table class="icen-table icen-table--zebra"> <caption class="icen-table-caption">服务实例清单 · 2026 年 7 月</caption> <thead> <tr><th>名称</th><th>区域</th><th>状态</th><th class="icen-num">实例数</th><th class="icen-ops">操作</th></tr> </thead> <tbody> <tr><td>gateway</td><td>us-east-1</td><td><span class="icen-pill icen-pill--success">运行中</span></td><td class="icen-num">4</td><td class="icen-ops"><button class="icen-btn icen-btn-sm">编辑</button><button class="icen-btn icen-btn-sm">停用</button></td></tr> <tr><td>accounts</td><td>us-west-2</td><td><span class="icen-pill icen-pill--success">运行中</span></td><td class="icen-num">2</td><td class="icen-ops"><button class="icen-btn icen-btn-sm">编辑</button><button class="icen-btn icen-btn-sm">停用</button></td></tr> <tr class="icen-row-warning"><td>billing</td><td>eu-west-1</td><td><span class="icen-pill icen-pill--warning">降级</span></td><td class="icen-num">2</td><td class="icen-ops"><button class="icen-btn icen-btn-sm">编辑</button><button class="icen-btn icen-btn-sm">停用</button></td></tr> <tr class="icen-row-error"><td>archive</td><td>ap-northeast-1</td><td><span class="icen-pill icen-pill--error">已停止</span></td><td class="icen-num">0</td><td class="icen-ops"><button class="icen-btn icen-btn-sm">编辑</button><button class="icen-btn icen-btn-sm">启用</button></td></tr> <tr><td>search</td><td>us-east-1</td><td><span class="icen-pill icen-pill--success">运行中</span></td><td class="icen-num">6</td><td class="icen-ops"><button class="icen-btn icen-btn-sm">编辑</button><button class="icen-btn icen-btn-sm">停用</button></td></tr> </tbody> <tfoot> <tr><td colspan="3">合计</td><td class="icen-num">14</td><td></td></tr> </tfoot> </table></div>特性
- 滚动：
icen-table-wrap负责窄屏横向滚动 - 行：hover 高亮；ops 列右对齐放
icen-btn-sm - 增强：
--zebra斑马纹、caption标题、--sticky-col首列粘滞、行状态色（row-success/warning/error）、row-expand展开行
接口
- 初始化
initTableSort()（kit 一行入口可直接命名导入）- 导出
-
initTableSort共享行为模块，清单含族内导出 - 事件
-
icen:check-changeicen:page-changeicen:rating-changeicen:segmented-changeicen:sort-changeicen:step-changeicen:stepper-changeicen:switch-changedetail 契约见IcenEventMap；共享行为模块，清单含族内事件 - 类型
dist/behaviors/controls.d.mts（随 npm 包发布，含全部 JSDoc 约束）
安装
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';import { initTableSort } from '@icen.ai/ui';initTableSort();也可以用脚手架直接打印引入行：
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="icen-table-wrap [--bordered]"> <table class="icen-table [--zebra] [--compact|--dense] [--sticky-col]"> <caption class="icen-table-caption">标题</caption> <thead><tr><th>名称</th><th class="icen-ops">操作</th></tr></thead> <tbody> <tr class="icen-row-link [.is-selected] [.row-success|.row-warning|.row-error]"> <td>gateway</td> <td class="icen-ops"><button class="icen-btn icen-btn-sm">编辑</button></td> </tr> </tbody> <tfoot><tr><td>合计</td></tr></tfoot> </table></div>