Skip to content

罗德岛主终端

这是用同一套 ak-ui CSS Core 重建的主终端界面:布局以 1366 × 653 为设计基准,左右菜单使用真实透视变换,背景、档案、侧栏和指令区按景深响应指针。点击资源、博士档案和任务,可以体验原生 Popover 与 Dialog。

PREVIEW / SHOWCASE/MAINRhodes Island terminal
为了更好的体验,请使用横屏浏览
132 理智/135
Mission / Daily

今日任务

完成三次作战3 / 3
部署二十名干员16 / 20

打开全屏终端 →

单独查看 Loading →

复用关系

界面区域复用的 Core module
顶部资源Counter / Counter Group 的 terminal 密度
博士档案Dashboard Profile / Popover
助理与公告Dashboard Plane / News / Utility
当前行动Sanity / Command / Popover
主菜单Command / Command Group
每日任务Dialog / Progress / Button
景深反馈Dashboard Layer / CSS 3D Plane
启动同步Loading Screen / Loading Track

由完整界面暴露的缺口

本次把视觉能力收敛进 ak-dashboardak-commandak-counterak-san:前者提供画布、景深和左右透视平面,后三者提供可在其他终端页面复用的材质与密度变体。角色背景、具体文案和任务数据仍属于示例,不进入 Core。

布局比例、菜单材质和透视参数从 Arknights UI H5 及其 MIT 源码 中测量并重新抽象为 token;Demo 沿用 ak-ui 仓库已有角色与背景图片,没有引入参考项目中的游戏拆包素材,也没有复制一套孤立实现。

竖屏沿用参考交互,只显示横屏提示;横屏和桌面端保持完整主终端结构。

Core 接口

  • 材质:--ak-dashboard-paper--ak-dashboard-muted--ak-dashboard-dark--ak-dashboard-cyan
  • 强调色:--ak-dashboard-accent--ak-dashboard-signal--ak-dashboard-info
  • 面板几何:--ak-dashboard-menu-width--ak-dashboard-menu-height--ak-dashboard-menu-top--ak-dashboard-menu-right
  • 五段节奏:--ak-dashboard-menu-resource-track--ak-dashboard-menu-operation-track--ak-dashboard-menu-card-inset--ak-dashboard-menu-card-trim
  • CSS 3D:--ak-dashboard-perspective--ak-dashboard-tilt--ak-layer-x--ak-layer-y
  • 景深控制:原生 createDashboardDepth();Vue Registry useDashboardDepth()
  • 指令材质:ak-command--paper / --muted / --dark / --cyan / --operation
  • 终端密度:ak-counter--terminalak-counter-group--terminalak-san-container--terminal
  • 启动状态:ak-loading-screenak-loading-trackdata-state="ready"

Unofficial Arknights-inspired interface study.