ak-screen 功能页

主终端每个入口都会进入一张功能页：作战、编队、干员、采购中心、公开招募、干员寻访、基建、仓库，以及左侧的好友和情报。功能页继承入口指令的色调（paper、muted、dark、cyan），顶部标题栏、底部信号线和进场快门使用同一个信号色。在 仿罗德岛主终端 中点击任意入口即可体验，资源会在功能页之间流转：作战掉落进入仓库，访问好友获得的信用可以在采购中心消费。

ak-screen

功能页绝对定位铺满最近的定位祖先，适合放在终端容器内。打开时先播放一次快门，随后标题栏信号线展开、内容从右侧滑入；离开时添加 .is-leaving 再隐藏。打开后把焦点移到 .ak-screen__title（需 tabindex="-1"），关闭后把焦点还给入口按钮，并让背后的终端 inert。

PREVIEW / SCREEN/BASICFunction screen

Store

Store / Credit Exchange

采购中心

信用 300

信用交易所 Refreshes daily

SOURCE / HTML

<div style="position: relative; width: 100%; height: 400px; container-type: inline-size">
  <section class="ak-screen ak-screen--cyan" aria-label="采购中心">
    <span class="ak-screen__watermark" aria-hidden="true">Store</span>
    <header class="ak-screen__bar">
      <button class="ak-screen__back" type="button"><span aria-hidden="true">‹</span> 返回</button>
      <div class="ak-screen__heading">
        <span class="ak-screen__eyebrow">Store / Credit Exchange</span>
        <h2 class="ak-screen__title">采购中心</h2>
      </div>
      <div class="ak-screen__meta"><span>信用 <b>300</b></span></div>
    </header>
    <div class="ak-screen__body">
      <p class="ak-screen__section-title">信用交易所 <small>Refreshes daily</small></p>
      <div class="ak-screen__grid" style="--ak-screen-grid-min: 7rem">
        <button class="ak-item ak-item--tier-3" type="button"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__name">电路板</span><span class="ak-item__price">80 信用</span></button>
        <button class="ak-item ak-item--tier-4" type="button"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__name">核心芯片</span><span class="ak-item__price">160 信用</span></button>
        <button class="ak-item ak-item--tier-2" type="button"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__name">合金块</span><span class="ak-item__price">40 信用</span></button>
        <button class="ak-item ak-item--tier-5 ak-item--sold" type="button" disabled><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__name">结晶组件</span><span class="ak-item__price">已售罄</span></button>
      </div>
    </div>
  </section>
</div>

结构	说明
.ak-screen__bar	标题栏，包含返回按钮、标题和右侧资源
.ak-screen__back	返回按钮，右侧斜切
.ak-screen__eyebrow / .ak-screen__title	英文路径与中文标题
.ak-screen__meta	资源或计数，内部 .ak-icon 按字号缩放
.ak-screen__body	可滚动内容区
.ak-screen__section-title	区块标题，small 为英文注记
.ak-screen__grid	自适应网格，最小列宽由 --ak-screen-grid-min 控制
.ak-screen__split	主区与侧栏两列，窄容器下合并为一列
.ak-screen__panel	深色面板
.ak-screen__actions	右对齐操作区
.ak-screen__watermark	右下角大号英文水印

Variable	Description
--ak-screen-surface	页面底色
--ak-screen-bar	标题栏底色，由色调修饰符设置
--ak-screen-bar-text	标题栏文字色
--ak-screen-signal	信号线、快门边缘颜色
--ak-screen-padding	内容区内边距
--ak-screen-gap	网格与面板间距
--ak-screen-grid-min	.ak-screen__grid 最小列宽

ak-slot 干员位

用于编队、干员档案、寻访结果和招募结果。底部信号线表示职业，顶部细线和星级表示稀有度。作为 button 使用时支持 aria-pressed 选中态；.ak-slot--reveal 配合 --ak-slot-index 依次闪入。

PREVIEW / SLOT/BASICOperator slots

VAN ★★★★★ Aster 先锋 · LV.60

+空位

SOURCE / HTML

<div style="display: grid; width: min(100%, 44rem); grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem">
  <div class="ak-slot ak-slot--vanguard ak-slot--rarity-5">
    <span class="ak-slot__code" aria-hidden="true">VAN</span>
    <span class="ak-slot__rarity" aria-label="5 星">★★★★★</span>
    <strong class="ak-slot__name">Aster</strong>
    <span class="ak-slot__meta">先锋 · LV.60</span>
  </div>
  <button class="ak-slot ak-slot--guard ak-slot--rarity-6" type="button" aria-pressed="true">
    <span class="ak-slot__code" aria-hidden="true">GRD</span>
    <span class="ak-slot__rarity" aria-label="6 星">★★★★★★</span>
    <strong class="ak-slot__name">Brass</strong>
    <span class="ak-slot__meta">近卫 · LV.80</span>
  </button>
  <button class="ak-slot ak-slot--medic ak-slot--rarity-4" type="button" aria-pressed="false">
    <span class="ak-slot__code" aria-hidden="true">MED</span>
    <span class="ak-slot__rarity" aria-label="4 星">★★★★</span>
    <strong class="ak-slot__name">Flint</strong>
    <span class="ak-slot__meta">医疗 · LV.50</span>
  </button>
  <div class="ak-slot ak-slot--empty"><span aria-hidden="true">+</span><span class="ak-slot__meta">空位</span></div>
</div>

修饰符	说明
.ak-slot--vanguard … .ak-slot--specialist	八种职业信号色，对应 --ak-role-*
.ak-slot--rarity-1 … .ak-slot--rarity-6	稀有度，对应 --ak-rarity-*
.ak-slot--empty	空位
.ak-slot--reveal	寻访与招募结果的闪入动画

Variable	Description
--ak-slot-signal	职业信号色
--ak-slot-rarity	稀有度色
--ak-slot-index	闪入动画的错位序号

ak-item 物资格

用于掉落、仓库和商店。图标留空时绘制一个按品阶着色的菱形；放入 svg.ak-icon 可替换为自定义图标。作为 button 使用时支持悬停、按压和 disabled。

PREVIEW / ITEM/BASICMaterial items

×120家具零件

×24合金块

×9电路板

×2核心芯片

×1结晶组件

×1信标晶核

SOURCE / HTML

<div style="display: grid; width: min(100%, 40rem); grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.6rem">
  <div class="ak-item ak-item--tier-1"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__count">×120</span><span class="ak-item__name">家具零件</span></div>
  <div class="ak-item ak-item--tier-2"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__count">×24</span><span class="ak-item__name">合金块</span></div>
  <div class="ak-item ak-item--tier-3"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__count">×9</span><span class="ak-item__name">电路板</span></div>
  <div class="ak-item ak-item--tier-4"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__count">×2</span><span class="ak-item__name">核心芯片</span></div>
  <div class="ak-item ak-item--tier-5"><span class="ak-item__icon" aria-hidden="true"></span><span class="ak-item__count">×1</span><span class="ak-item__name">结晶组件</span></div>
  <div class="ak-item ak-item--tier-6"><span class="ak-item__icon"><svg class="ak-icon" aria-hidden="true"><use href="#icon-vip-diamond-fill"></use></svg></span><span class="ak-item__count">×1</span><span class="ak-item__name">信标晶核</span></div>
</div>

修饰符	说明
.ak-item--tier-1 … .ak-item--tier-6	品阶，对应 --ak-rarity-*
.ak-item--sold	已售罄

Variable	Description
--ak-item-tier	品阶色，驱动图标、光晕与底边