Odyssey UI v1.0.0

Components

Navigation

帮助用户定位与穿行的结构性组件：顶部 Appbar、侧边 Sidebar / Nav、Tabs、Breadcrumb、Pagination 与 Steps。交互态由 odyssey.js 的 data-ody-* 属性驱动，全部键盘可及、亮暗自适应。

下方每个预览都是真实渲染的 .ody-* 组件。本页顶栏与左侧文档目录本身即 Appbar 与 Nav 的线上范例。

Appbar / Navbar

应用级顶栏：左侧 __brand（__tile 徽标 + __name），可选水平导航 __nav，__spacer 撑开，右侧 __right 收纳图标动作。默认 position:sticky；窄屏下 __nav 自动隐藏，改用抽屉。

Acme
MK 
<header class="ody-appbar">
  <a class="ody-appbar__brand" href="#">
    <span class="ody-appbar__tile"><svg>…</svg></span>
    <span class="ody-appbar__name">Acme</span>
  </a>
  <nav class="ody-appbar__nav" aria-label="主导航">
    <a href="#" class="is-active">Dashboard</a>
    <a href="#">Projects</a>
    <a href="#">Reports</a>
  </nav>
  <span class="ody-appbar__spacer"></span>
  <div class="ody-appbar__right">
    <button class="ody-iconbtn" type="button" aria-label="搜索"><svg>…</svg></button>
    <button class="ody-iconbtn" type="button" aria-label="通知"><svg>…</svg></button>
    <span class="ody-avatar">MK</span>
  </div>
</header>

垂直导航：.ody-nav 内以 __label 分组、__item 为条目、.is-active 标记当前页；子层用 __sub 缩进嵌套，__divider 分隔区块。放进 .ody-sidebar > .ody-sidebar__body 即成可滚动侧栏。

<aside class="ody-sidebar">
  <div class="ody-sidebar__body">
    <nav class="ody-nav" aria-label="示例导航">
      <div class="ody-nav__label">Workspace</div>
      <a class="ody-nav__item is-active" href="#"><svg>…</svg><span>Dashboard</span></a>
      <a class="ody-nav__item" href="#"><svg>…</svg><span>Projects</span></a>
      <div class="ody-nav__sub">
        <a class="ody-nav__item" href="#"><span>Active</span></a>
        <a class="ody-nav__item" href="#"><span>Archived</span></a>
      </div>
      <a class="ody-nav__item" href="#"><svg>…</svg><span>Reports</span></a>
      <div class="ody-nav__divider"></div>
      <div class="ody-nav__label">Settings</div>
      <a class="ody-nav__item" href="#"><svg>…</svg><span>Team</span></a>
    </nav>
  </div>
</aside>

Tabs

容器加 data-ody-tabs，每个 [role="tab"] 用 data-ody-panel="#id" 绑定对应 .ody-tabpanel。odyssey.js 自动接管 .is-active 切换、aria-selected 与方向键导航；未标 .is-active 时默认激活首个。三种视觉：line（默认）、--card、--segmented。

Line（默认）

概览面板：项目健康度、关键指标与最近变更一览。
活动面板：成员操作与系统事件的时间线。
设置面板：可见性、通知与集成偏好。
<div data-ody-tabs>
  <div class="ody-tabs" role="tablist" aria-label="Line tabs">
    <button class="ody-tab is-active" role="tab" id="ln1" data-ody-panel="#pn-ln1">Overview</button>
    <button class="ody-tab" role="tab" id="ln2" data-ody-panel="#pn-ln2">Activity</button>
    <button class="ody-tab" role="tab" id="ln3" data-ody-panel="#pn-ln3">Settings</button>
  </div>
  <div class="ody-tabpanel is-active" id="pn-ln1">概览面板…</div>
  <div class="ody-tabpanel" id="pn-ln2">活动面板…</div>
  <div class="ody-tabpanel" id="pn-ln3">设置面板…</div>
</div>

Card（--card，可带图标）

Preview 面板内容。
Code 面板内容。
已锁定。
<div data-ody-tabs>
  <div class="ody-tabs ody-tabs--card" role="tablist" aria-label="Card tabs">
    <button class="ody-tab is-active" role="tab" id="cd1" data-ody-panel="#pn-cd1"><svg>…</svg>Preview</button>
    <button class="ody-tab" role="tab" id="cd2" data-ody-panel="#pn-cd2"><svg>…</svg>Code</button>
    <button class="ody-tab" role="tab" id="cd3" data-ody-panel="#pn-cd3" disabled>Locked</button>
  </div>
  <div class="ody-tabpanel is-active" id="pn-cd1">Preview 面板内容。</div>
  <div class="ody-tabpanel" id="pn-cd2">Code 面板内容。</div>
  <div class="ody-tabpanel" id="pn-cd3">已锁定。</div>
</div>

Segmented（--segmented）

按天聚合的数据视图。
按周聚合的数据视图。
按月聚合的数据视图。
<div data-ody-tabs>
  <div class="ody-tabs ody-tabs--segmented" role="tablist" aria-label="Segmented tabs">
    <button class="ody-tab is-active" role="tab" id="sg1" data-ody-panel="#pn-sg1">Day</button>
    <button class="ody-tab" role="tab" id="sg2" data-ody-panel="#pn-sg2">Week</button>
    <button class="ody-tab" role="tab" id="sg3" data-ody-panel="#pn-sg3">Month</button>
  </div>
  <div class="ody-tabpanel is-active" id="pn-sg1">按天聚合…</div>
  <div class="ody-tabpanel" id="pn-sg2">按周聚合…</div>
  <div class="ody-tabpanel" id="pn-sg3">按月聚合…</div>
</div>

层级路径：链接项用 <a>，分隔符 __sep，当前页用 __item + aria-current="page"。分隔符可用字符（/）或内联 SVG 箭头。

<nav class="ody-breadcrumb" aria-label="面包屑">
  <a href="#">Home</a>
  <span class="ody-breadcrumb__sep" aria-hidden="true">/</span>
  <a href="#">Components</a>
  <span class="ody-breadcrumb__sep" aria-hidden="true">/</span>
  <span class="ody-breadcrumb__item" aria-current="page">Navigation</span>
</nav>

<!-- 箭头分隔符：把 __sep 内容换成内联 SVG -->
<span class="ody-breadcrumb__sep" aria-hidden="true"><svg>…</svg></span>

Pagination

分页条：页码用 <a> 或 <button>，当前页加 .is-current + aria-current="page"，禁用态用 .is-disabled / aria-disabled="true"；省略号用 .ody-pager__item，__spacer 可把统计信息推到右侧。

<nav class="ody-pager" aria-label="分页">
  <a href="#" class="is-disabled" aria-disabled="true" aria-label="上一页"><svg>…</svg></a>
  <a href="#" class="is-current" aria-current="page">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <span class="ody-pager__item" aria-hidden="true">…</span>
  <a href="#">12</a>
  <a href="#" aria-label="下一页"><svg>…</svg></a>
</nav>

<!-- button 变体 + __spacer 推出右侧统计 -->
<nav class="ody-pager">
  <button type="button" class="is-current" aria-current="page">4</button>
  …
  <span class="ody-pager__spacer"></span>
  <span class="ody-muted ody-num">共 240 条 · 第 4 / 20 页</span>
</nav>

Steps

流程指示：每个 .ody-step 含 __index（序号或对勾）与 __label，相邻步骤间插 __line 连接线。状态：.is-done（已完成）、.is-active（进行中）、默认（未开始）。

Account
Shipping
3Payment
4Review
<div class="ody-steps" role="list" aria-label="结账流程">
  <div class="ody-step is-done" role="listitem">
    <span class="ody-step__index"><svg>…对勾…</svg></span>
    <span class="ody-step__label">Account</span>
  </div>
  <span class="ody-step__line"></span>
  <div class="ody-step is-done" role="listitem">
    <span class="ody-step__index"><svg>…对勾…</svg></span>
    <span class="ody-step__label">Shipping</span>
  </div>
  <span class="ody-step__line"></span>
  <div class="ody-step is-active" role="listitem" aria-current="step">
    <span class="ody-step__index">3</span>
    <span class="ody-step__label">Payment</span>
  </div>
  <span class="ody-step__line"></span>
  <div class="ody-step" role="listitem">
    <span class="ody-step__index">4</span>
    <span class="ody-step__label">Review</span>
  </div>
</div>