跳到主要内容
AI TradeDesign System
Design System / Layout

布局

以信息的关系决定布局,以共享刻度保持秩序。

与工作台共享外观偏好

工作台结构

导航
220 px
顶栏 · 最小 68 px
主证据区
表格 / 图表 / 研究内容
辅助信息
按内容回流

工作台内容最大 1440px;小于 768px 时侧栏收进抽屉。今日市场在 lg 分为主辅两列,观察页在 2xl 增加辅助栏,不强制所有页面使用同一栅格。

4pt 间距刻度

space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
space-832px
space-1040px
space-1248px

密度

上方切换宽松 / 紧凑。紧凑模式仅在精细指针设备生效,触屏保留宽松行高;可在「数据展示」页比较实际表格。

--ait-size-row-hCSS variable
--ait-size-head-hCSS variable
--ait-size-cell-pxCSS variable

可访问与交互

  • 保留可见焦点,所有动作可以通过键盘访问。
  • 涨跌同时使用数值正负号,状态同时使用图标和文字。
  • 保持内容回流;必要时让表格容器滚动,不裁切整页。
  • 动效尊重 prefers-reduced-motion;加载和失败在原模块说明。

所有数据示例仅用于组件排版演练,不构成投资建议。