Odyssey UI v1.0.0

Components

Data display

呈现信息的静态与半交互组件：从卡片、表格、统计到标签、进度、时间线与骨架屏。全部只引用语义 --ody-* token，因此每个示例都在亮 / 暗两色下自动成立 —— 点右上角月亮图标即可切换预览。

下方每个 demo 都是真实的 .ody-* 组件，实时渲染；紧随其后的代码块可一键复制。

Card 卡片

.ody-card 是内容容器：可拆 __head / __body / __foot 三段；--hover 悬停抬升阴影，--list 让 body 无内边距以嵌 .ody-list。

月度请求量

过去 30 天聚合

正常

卡片主体承载任意内容：文本、表格、图表或表单。边框与阴影随主题自动调整。

<div class="ody-card">
  <div class="ody-card__head">
    <span class="ody-card__ico"><svg …></svg></span>
    <div class="ody-flex-1">
      <h3 class="ody-card__title">月度请求量</h3>
      <p class="ody-card__sub">过去 30 天聚合</p>
    </div>
    <span class="ody-pill ody-pill--ok"><span class="ody-dot ody-dot--ok"></span>正常</span>
  </div>
  <div class="ody-card__body">…</div>
  <div class="ody-card__foot">
    <button class="ody-btn ody-btn--primary ody-btn--sm">查看详情</button>
    <button class="ody-btn ody-btn--subtle ody-btn--sm">导出</button>
  </div>
</div>

悬停卡片与列表卡片

Hover 抬升

悬停时阴影加深，用于可点击入口。

  • Alpha 节点
  • Bravo 节点
  • Charlie 节点
<div class="ody-card ody-card--hover">
  <div class="ody-card__body">…</div>
</div>

<div class="ody-card ody-card--list">
  <ul class="ody-list">
    <li class="ody-list__item">Alpha 节点</li>
  </ul>
</div>

Table 表格

用 .ody-table-wrap 包裹 .ody-table 获得圆角、边框与横向滚动。数字列加 .ody-num 右对齐并启用等宽数字；主键单元格用 .ody-table__strong。

服务状态P95 延迟请求数
gateway健康42 ms1,284,933
relay降级318 ms402,118
cortex故障—0
 
<div class="ody-table-wrap">
  <table class="ody-table ody-table--hover">
    <thead>
      <tr><th>服务</th><th>状态</th>
        <th class="ody-num">P95 延迟</th><th class="ody-num">请求数</th></tr>
    </thead>
    <tbody>
      <tr>
        <td class="ody-table__strong">gateway</td>
        <td><span class="ody-pill ody-pill--ok"><span class="ody-dot ody-dot--ok"></span>健康</span></td>
        <td class="ody-num">42 ms</td><td class="ody-num">1,284,933</td>
      </tr>
    </tbody>
  </table>
</div>

变体：striped · bordered · compact

修饰类可叠加：--striped 斑马纹、--bordered 全网格线、--compact 紧凑行高。

区域配额已用
us-east500418
eu-west500205
ap-south30096
 
<table class="ody-table ody-table--striped ody-table--bordered ody-table--compact">
  …
</table>

粘性表头（sticky）

--sticky 让 thead th 在容器滚动时吸顶；给包裹层限高即可看到效果。

#事件耗时
01DNS 解析12 ms
02TLS 握手34 ms
03首字节58 ms
04内容下载91 ms
05DOM 解析140 ms
06首次绘制176 ms
07可交互220 ms
 
<div class="ody-table-wrap" style="max-height:180px">
  <table class="ody-table ody-table--sticky ody-table--hover">…</table>
</div>

Stat / KPI 统计

.ody-stat 拼装单个指标：__label / __value / __meta，可选 __meter 进度条。值可加 --ok / --warn / --down 着色。用 .ody-stat-grid 自动铺排一排 KPI。

可用性
99.98%
近 30 天 SLA
活跃会话
1,204
较昨日 +8.2%
错误率
2.4%
超出阈值 1.0%
<div class="ody-stat-grid">
  <div class="ody-stat">
    <div class="ody-stat__label"><svg …></svg>可用性</div>
    <div class="ody-stat__value ody-stat__value--ok">99.98%</div>
    <div class="ody-stat__meta">近 30 天 SLA</div>
  </div>
  <div class="ody-stat">
    <div class="ody-stat__label">活跃会话</div>
    <div class="ody-stat__value">1,204</div>
    <div class="ody-stat__meta">较昨日 +8.2%</div>
    <div class="ody-stat__meter"><i style="width:72%"></i></div>
  </div>
</div>

Tag / Pill 标签

.ody-tag 与 .ody-pill 共享全部色调修饰：--ok / --warn / --down / --info / --accent / --neutral。Pill 常配 .ody-dot 状态点，Tag 可带 __close 关闭按钮。

默认 成功 警告 危险 信息 强调 中性 
<span class="ody-tag">默认</span>
<span class="ody-tag ody-tag--ok">成功</span>
<span class="ody-tag ody-tag--warn">警告</span>
<span class="ody-tag ody-tag--down">危险</span>
<span class="ody-tag ody-tag--info">信息</span>
<span class="ody-tag ody-tag--accent">强调</span>
<span class="ody-tag ody-tag--neutral">中性</span>

Pill 状态点与可关闭 Tag

运行中 降级 宕机 env: prod 
<span class="ody-pill ody-pill--ok">
  <span class="ody-dot ody-dot--ok"></span>运行中
</span>

<span class="ody-tag ody-tag--accent">env: prod
  <button class="ody-tag__close" type="button" aria-label="移除标签">
    <svg …></svg>
  </button>
</span>

Badge 徽章

.ody-badge 是计数徽章，--dot 变为小圆点，--accent / --neutral 换色。用 .ody-badge-wrap 把徽章绝对定位到图标 / 头像右上角。

3 12 99+ 5 OD 
<span class="ody-badge">3</span>
<span class="ody-badge ody-badge--accent">12</span>
<span class="ody-badge ody-badge--dot"></span>

<span class="ody-badge-wrap">
  <button class="ody-iconbtn ody-iconbtn--outline"><svg …></svg></button>
  <span class="ody-badge">5</span>
</span>

Avatar 头像

.ody-avatar 支持文字缩写或 <img>；尺寸 --sm / --lg，--square 方角。.ody-avatar__group 让多个头像叠压成组。

A OD W3 SQ AL BR CH +4 
<span class="ody-avatar ody-avatar--sm">A</span>
<span class="ody-avatar">OD</span>
<span class="ody-avatar ody-avatar--lg">W3</span>
<span class="ody-avatar ody-avatar--square">SQ</span>

<span class="ody-avatar__group">
  <span class="ody-avatar">AL</span>
  <span class="ody-avatar">BR</span>
  <span class="ody-avatar">CH</span>
  <span class="ody-avatar">+4</span>
</span>

List / Description 列表与描述

.ody-list 是无样式列表容器，__item 提供分隔线与悬停底色；.ody-desc 是键值对描述列表（术语 __term / 值 __val）。

  • API 网关42ms
  • 对象存储318ms
  • 推理服务—
区域
us-east-1
实例
c7g.2xlarge
运行时长
14 天 6 小时
<ul class="ody-list ody-card">
  <li class="ody-list__item">
    <span class="ody-dot ody-dot--ok"></span>
    <span class="ody-flex-1">API 网关</span>
    <span class="ody-muted">42ms</span>
  </li>
</ul>

<dl class="ody-desc">
  <dt class="ody-desc__term">区域</dt><dd class="ody-desc__val">us-east-1</dd>
  <dt class="ody-desc__term">实例</dt><dd class="ody-desc__val">c7g.2xlarge</dd>
</dl>

Progress 进度条

.ody-progress 内嵌 __bar，用 width 表示百分比；色调 --ok / --warn / --down，--striped 加斜纹。

<div class="ody-progress">
  <div class="ody-progress__bar" style="width:64%"></div>
</div>

<div class="ody-progress ody-progress--ok">
  <div class="ody-progress__bar" style="width:88%"></div>
</div>

<div class="ody-progress ody-progress--down ody-progress--striped">
  <div class="ody-progress__bar" style="width:22%"></div>
</div>

环形进度（circle）

.ody-progress--circle 用 --ody-val 自定义属性（0–100）驱动 conic 扇形，中心可放 __val 文本。

25%
60%
92%
<div class="ody-progress--circle" style="--ody-val:60">
  <span class="ody-progress__val">60%</span>
</div>

Meter 度量条

.ody-meter 表示静态度量（如磁盘 / 配额占用），__fill 默认绿色，--warn / --down 表示接近或超限。

<span class="ody-meter">
  <span class="ody-meter__fill" style="width:34%"></span>
</span>

<span class="ody-meter ody-meter--warn">
  <span class="ody-meter__fill" style="width:71%"></span>
</span>

Skeleton 骨架屏

.ody-skeleton 是加载占位，带 shimmer 动画；变体 --text / --title / --circle / --block 对应不同形状。

<span class="ody-skeleton ody-skeleton--circle"></span>
<span class="ody-skeleton ody-skeleton--title"></span>
<span class="ody-skeleton ody-skeleton--text"></span>
<span class="ody-skeleton ody-skeleton--text" style="width:80%"></span>
<span class="ody-skeleton ody-skeleton--block"></span>

Divider 分隔线

.ody-divider 是水平分隔；--vert 竖向；.ody-divider__label 在中间嵌入文字。

上半部分内容

下半部分内容

或者
左 右 
<hr class="ody-divider">

<div class="ody-divider__label">或者</div>

<span class="ody-divider--vert"></span>

Timeline 时间线

.ody-timeline 竖向事件流，每个 __item 带一个 __dot（可着色 --ok / --warn / --down），配 __time / __title / __body。

  • 09:41

    部署成功

    v1.0.0 已推送到 3 个区域。

  • 09:52

    延迟升高

    relay P95 突破 300ms 阈值。

  • 10:03

    节点隔离

    cortex-2 已从负载均衡摘除。

<ul class="ody-timeline">
  <li class="ody-timeline__item">
    <span class="ody-timeline__dot ody-timeline__dot--ok"></span>
    <div class="ody-timeline__time">09:41</div>
    <p class="ody-timeline__title">部署成功</p>
    <p class="ody-timeline__body">v1.0.0 已推送到 3 个区域。</p>
  </li>
</ul>

Tooltip 工具提示

任意元素加 data-ody-tooltip="文本" 即可 hover / focus 显示气泡（纯 CSS 兜底），odyssey.js 会升级为可定位浮层，data-ody-placement 指定方向（top / bottom / left / right）。

<button class="ody-btn ody-btn--secondary"
        data-ody-tooltip="默认在上方弹出" data-ody-placement="top">
  上方
</button>

<span class="ody-iconbtn ody-iconbtn--outline" tabindex="0" role="button"
      data-ody-tooltip="也可用于图标按钮" data-ody-placement="right">
  <svg …></svg>
</span>

Code / Kbd 代码与按键

行内 .ody-code 标记代码片段，.ody-kbd 表示键盘按键，多行代码用 .ody-pre 代码块。

运行 npm run build 后按 Ctrl + C 终止。

curl -sSL https://holdfast.local/odyssey.css \
  -o dist/odyssey.css
<code class="ody-code">npm run build</code>

<kbd class="ody-kbd">Ctrl</kbd> + <kbd class="ody-kbd">C</kbd>

<pre class="ody-pre">curl -sSL … -o dist/odyssey.css</pre>