表格

table

table-wrap 负责窄屏横向滚动；行 hover 高亮，ops 列右对齐放 btn-sm。

示例

名称	状态	操作
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/ui
import '@icen.ai/ui/components/table.css';

用法

<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>