<button class="ui-btn ui-btn--primary" type="button">主操作</button>
<button class="ui-btn ui-btn--default ui-btn--lg" type="button">次操作 / 大</button>

<!-- 加载态：JS 切换 class，宽度不变 -->
<button class="ui-btn ui-btn--primary is-loading" type="button">提交中</button>

<!-- 可切换按钮用 aria-pressed 表达选中态 -->
<button class="ui-btn ui-btn--default" aria-pressed="true">已选中</button>

<button class="ui-icon-btn" type="button" aria-label="设置" data-tooltip="设置">…</button>

<span class="ui-avatar"><img src="avatar.png" alt="张三"></span>
<span class="ui-avatar">张<span class="ui-avatar__status ui-avatar__status--online"></span></span>

<label class="ui-check">
  <input type="checkbox" checked>
  <span class="ui-check__box"></span>
  <span class="ui-check__label">选项文字</span>
</label>

<div class="ui-switch">
  <input type="checkbox" id="sw">
  <span class="ui-switch__track"></span>
  <label class="ui-switch__label" for="sw">开关文字</label>
</div>

<div class="ui-dropzone" data-ui="dropzone" tabindex="0" role="button">
  <input type="file" multiple hidden>
  <div class="ui-dropzone__title">点击选择，或把文件拖到这里</div>
  <div class="ui-dropzone__hint">支持 PNG、JPG、PDF，单个不超过 10 MB</div>
</div>
<div class="ui-file-list" data-ui-file-list></div>

<script>
  document.querySelector('.ui-dropzone').addEventListener('ui:file', function (e) {
    console.log(e.detail.files);   // FileList 数组，交给你的上传逻辑
  });
</script>

UI.toast('已复制到剪贴板');
UI.toast({ message: '保存成功', description: '更新了 3 个字段', type: 'success' });
UI.toast({ message: '这条不会自动消失', duration: 0, position: 'bottom' });
// type: info | success | warning | danger

<button class="ui-btn ui-btn--primary" data-ui="modal" data-target="#myModal">打开</button>

<div class="ui-modal" id="myModal" role="dialog" aria-modal="true" aria-labelledby="t">
  <div class="ui-modal__dialog">
    <div class="ui-modal__header">
      <div class="ui-modal__title" id="t">标题</div>
      <button class="ui-icon-btn ui-icon-btn--sm" data-ui-close>×</button>
    </div>
    <div class="ui-modal__body">内容</div>
    <div class="ui-modal__footer">
      <button class="ui-btn ui-btn--default" data-ui-close>取消</button>
      <button class="ui-btn ui-btn--primary">确定</button>
    </div>
  </div>
</div>

<!-- 命令式 -->
UI.modal.open('#myModal'); UI.modal.close('#myModal');

<!-- 气泡提示：鼠标与键盘都能触发 -->
<button class="ui-btn ui-btn--default" data-tooltip="提示文字" data-tooltip-placement="top">…</button>

<!-- 二次确认 -->
<span class="ui-popconfirm-host" data-ui="popconfirm"
      data-popconfirm-title="确认删除该密钥？"
      data-popconfirm-desc="删除后调用会立即失败，且无法恢复。"
      data-popconfirm-ok="删除">
  <button class="ui-btn ui-btn--danger-outline" data-ui="popconfirm-trigger">删除密钥</button>
</span>

<!-- 或命令式：await UI.confirm({ title, description, confirmText }) -->

<div class="ui-progress"><div class="ui-progress__bar" style="width: 68%"></div></div>
<div class="ui-progress is-indeterminate"><div class="ui-progress__bar"></div></div>

<div class="ui-ring" style="--ui-ring-value: 72"><span class="ui-ring__value">72%</span></div>

<div class="ui-tabs" data-ui="tabs">
  <div class="ui-tabs__list" role="tablist">
    <button class="ui-tab" role="tab" id="t1" aria-controls="p1" aria-selected="true">全部</button>
    <button class="ui-tab" role="tab" id="t2" aria-controls="p2" aria-selected="false">处理中</button>
  </div>
  <div class="ui-tabpanel" role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0">…</div>
  <div class="ui-tabpanel" role="tabpanel" id="p2" aria-labelledby="t2" tabindex="0" hidden>…</div>
</div>

<div class="ui-stat">
  <div class="ui-stat__label">今日调用次数</div>
  <div class="ui-stat__value">18,204</div>
  <div class="ui-stat__trend ui-stat__trend--up">较昨日 +12.4%</div>
</div>

<div class="ui-table-wrap" data-ui="table-sort">
  <table class="ui-table ui-table--striped">
    <thead>
      <tr>
        <th><button class="ui-table__sort" data-sort="0" aria-sort="none">订单号</button></th>
        <th class="ui-table__cell-num">金额</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>#A-018</td><td class="ui-table__cell-num" data-value="12800">¥ 12,800</td></tr>
    </tbody>
  </table>
</div>

<script>
  document.querySelector('[data-ui="table-sort"]').addEventListener('ui:sort', function (e) {
    // 需要服务端排序时在这里发请求；纯前端排序库已内置
    console.log(e.detail.index, e.detail.direction);
  });
</script>

<div class="ui-collapse" data-ui="collapse">   <!-- 加 data-accordion 变手风琴 -->
  <div class="ui-collapse__item">
    <button class="ui-collapse__header" aria-expanded="true" aria-controls="p1">问题</button>
    <div class="ui-collapse__panel" id="p1">答案</div>
  </div>
</div>

<div class="ui-container">…</div>              <!-- max-width 1200 + 24 边距 -->
<div class="ui-container ui-container--wide">…</div>

<div class="ui-grid ui-grid--3">…</div>          <!-- 3 列，1024 降 2 列，768 降 1 列 -->
<div class="ui-grid ui-grid--auto">…</div>       <!-- 自动填充，最小 240px -->
<div class="ui-grid ui-grid--sidebar">…</div>    <!-- 260px + 自适应 -->

<div class="ui-stack ui-stack--4">…</div>       <!-- 纵向 16px 节奏 -->
<div class="ui-row ui-row--between">…</div>      <!-- 横向两端对齐 -->