SusLobbyScreenContent

中心 / 大厅外壳 — back、标题芯片、tabs、空态 alert、child-view 宿主、Ready + Vs AI 页脚动作。

包

SusGame · 屏幕（商业）

SusGame · Screens

属性

名称	类型	默认值
`Title`	`Prop<string>`	`"Hub"`
`TitleStyle`	`Prop<string>`	`"chip"`
`Crumbs`	`Prop<List<string>>`	`[]`
`EmptyText`	`Prop<string>`	`"No data"`
`CanAct`	`Prop<bool>`	`false`
`HasData`	`Prop<bool>`	`false`
`ActionLabel`	`Prop<string>`	`"Ready"`
`SoloActionLabel`	`Prop<string>`	`"Vs AI"`
`IsReady`	`Prop<bool>`	`false`
`StatusKicker`	`Prop<string>`	`""`
`StatusIsError`	`Prop<bool>`	`false`
`StatusLink`	`Prop<string>`	`""`
`BlockReason`	`Prop<string>`	`""`

插槽

没有插槽。

事件

名称	字段	载荷
`StatusLinkClicked`	`OnStatusLinkClicked`	—

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

sc-lobby-footer
sc-lobby-header
sus-hidden
sus-lobby-screen
sus-lobby-screen__action
sus-lobby-screen__action-flash
sus-lobby-screen__action-line
sus-lobby-screen__action-sweep
sus-lobby-screen__back-btn
sus-lobby-screen__block-reason
sus-lobby-screen__child-view
sus-lobby-screen__content
sus-lobby-screen__crumbs
sus-lobby-screen__empty-text
sus-lobby-screen__footer-center
sus-lobby-screen__footer-end
sus-lobby-screen__footer-end-host
sus-lobby-screen__footer-start
sus-lobby-screen__footer-start-host
sus-lobby-screen__mark
sus-lobby-screen__row
sus-lobby-screen__row-icon
sus-lobby-screen__row-label
sus-lobby-screen__row-value
sus-lobby-screen__row-value--flash
sus-lobby-screen__rows
sus-lobby-screen__section
sus-lobby-screen__section-aside
sus-lobby-screen__section-body
sus-lobby-screen__section-dim
sus-lobby-screen__section-dim--auto
sus-lobby-screen__section-dim--on
sus-lobby-screen__section-foot
sus-lobby-screen__section-main
sus-lobby-screen__solo-action-btn
sus-lobby-screen__status
sus-lobby-screen__status-body
sus-lobby-screen__status-kicker
sus-lobby-screen__status-link
sus-lobby-screen__status-text
sus-lobby-screen__tabs
sus-lobby-screen__title
sus-lobby-screen__title-text
sus-lobby-screen__title-wrap
sus-lobby-screen__wallet
sus-lobby-screen--limbo
sus-lobby-screen--title-text

用法

绑定 chrome props；从宿主或子视图填充 Tabs / ChildViewHost。用 CanAct 控制页脚。

xml

<template>
  <sus:SusLobbyScreenContent
    :Title="Title.Value"
    :EmptyText="Empty.Value"
    :CanAct="Ready.Value"
    :ActionLabel="Act.Value"
    :SoloActionLabel="Solo.Value"
  />
</template>

<script>
public Prop<string> Title = new("Hub");
public Prop<string> Empty = new("No data");
public Prop<bool> Ready = new(false);
public Prop<string> Act = new("Ready");
public Prop<string> Solo = new("Vs AI");
</script>

csharp

var lobby = new SusLobbyScreenContent();
lobby.Title.Value = "Multiplayer";
lobby.EmptyText.Value = "No parties";
lobby.CanAct.Value = true;
lobby.ActionLabel.Value = "Ready";
lobby.SoloActionLabel.Value = "Vs AI";
// After mount:
lobby.Tabs.Items.Value = new List<SusTabs.TabItem> {
  new() { Title = "Parties", Value = "parties" },
  new() { Title = "Friends", Value = "friends" },
};
lobby.ChildViewHost.Add(myListView);
lobby.BackBtn.OnClick += () => { /* back */ };
lobby.ActionBtn.OnClick += () => { /* ready */ };
lobby.SoloActionBtn.OnClick += () => { /* vs AI */ };

Prop / API	Role
`Title`	头部芯片文本
`EmptyText`	空态 alert；空字符串 → 隐藏
`CanAct`	启用/禁用两个页脚按钮（`Disabled = !CanAct`）
`ActionLabel` / `SoloActionLabel`	Ready / Vs AI 文本
`HasData`	大厅有名单时为 `true`；仅当 `HasData` 为 `false` 且 `EmptyText` 非空时才显示空提示。`SetRows` 会替你设置它（非空列表为 `true`）
`TitleStyle`	`"chip"`（默认）或 `"text"` — 参见页头
`Crumbs`	标题上方的面包屑路径；最后一项 = 当前页面；为空 → 隐藏
`SetWallet(entries)` / `Wallet`	页头中的货币条（SusWallet）；在获得条目之前保持隐藏
`BlockReason`	主操作被阻止的原因，显示在页脚末端区域；为空 → 隐藏
`FooterStart` / `FooterEnd`	用于放置你自己页脚内容的空行宿主，位于操作按钮左右两侧
`BackBtn` / `Tabs` / `EmptyAlert` / `ActionBtn` / `SoloActionBtn`	宿主接线
`ActionWrap`	包裹 `ActionBtn` 的容器，带三个装饰节点，默认关闭
`ChildViewHost`	在此挂载列表/详情内容

上面新增的每一项默认都为空或隐藏，因此不设置它们的大厅在外观和尺寸上都与之前完全相同。

页头：标题样式、面包屑、钱包

页头行依次为返回按钮、品牌标志、标题块、选项卡、钱包。

标题样式。 TitleStyle = "chip" 以色调芯片显示标题（sus-lobby-screen__title）。 "text" 以普通标题显示（sus-lobby-screen__title-text）。两个节点始终存在，且都跟随 Title。唯一的开关是根类 sus-lobby-screen--title-text，因此皮肤无需代码即可重新设定任一节点的样式。其他任何值都回退为 "chip"。
面包屑。 Crumbs 是按路径顺序排列的 List<string>。它为 kit 的 SusBreadcrumbs（sus-lobby-screen__crumbs，分隔符 //）提供数据，后者叠放在 sus-lobby-screen__title-wrap 内的标题之上。kit 会把最后一项标记为 sus-breadcrumbs__item--current。空列表会隐藏路径。
钱包。 SetWallet(entries) 填充选项卡之后的货币条（sus-lobby-screen__wallet）并显示它。 null 或空列表会再次隐藏它。余额变化后要让某个数值脉冲，调用 Wallet.FlashValue(code)。

csharp

lobby.TitleStyle.Value = "text";
lobby.Crumbs.Value = new List<string> { "Hub", "Squads" };
lobby.SetWallet(new[]
{
    SusWallet.SusWalletEntry.Of("gold", "Gold", "12 400", "coin"),
    SusWallet.SusWalletEntry.Of("gems", "Gems", "35", "diamond"),
});
lobby.Wallet.FlashValue("gold");

SusLobbyScreen（路由屏幕）以 TitleStyle、Crumbs、BlockReason 和 Wallet props 镜像这些功能，还提供 SetWallet(entries) 和 FlashWalletValue(code)。

页脚：区域、阻止原因、操作装饰

页脚（sc-lobby-footer）有三个区域：

区域	类	内容
起始	`sus-lobby-screen__footer-start`	`FooterStart` 宿主（`sus-lobby-screen__footer-start-host`）
中央	`sus-lobby-screen__footer-center`	`ActionWrap`（Ready）和 `SoloActionBtn`
末端	`sus-lobby-screen__footer-end`	`BlockReason` 标签（`sus-lobby-screen__block-reason`），其后是 `FooterEnd` 宿主（`sus-lobby-screen__footer-end-host`）

起始区与末端区平分剩余宽度。中央区保持自然尺寸，因此无论两侧是否有内容，操作按钮都保持居中。把你自己的元素添加到 FooterStart / FooterEnd。这些内容的间距由你决定：宿主不添加任何间距。

BlockReason 是普通文本，例如 "Waiting for 2 players"。它不依赖 CanAct：何时值得显示原因由你决定，空字符串会将其隐藏。

csharp

lobby.CanAct.Value = false;
lobby.BlockReason.Value = "Waiting for 2 players";
lobby.FooterStart.Add(new Label("Region: EU"));

ActionWrap（sus-lobby-screen__action，position: relative）包含 ActionBtn 以及绘制在其上的三个装饰兄弟节点： sus-lobby-screen__action-flash、sus-lobby-screen__action-sweep 和 sus-lobby-screen__action-line。它们填满容器、忽略拾取（点击仍会到达按钮），默认为 display: none。包本身不附带任何动画。皮肤在自己的类下开启某个节点：

css

.my-skin .sus-lobby-screen__action-line {
    display: flex;
    border-bottom-width: 2px;
    border-bottom-color: var(--sk-color-primary);
}

常见覆盖的皮肤钩子

如果你的皮肤过去是手工重建该屏幕的某些部分，请改用内置钩子：

自定义变通做法	内置钩子
隐藏标题芯片并添加自己的标题标签	`TitleStyle = "text"` → `sus-lobby-screen__title-text`
带面包屑行的自定义标题列	`Crumbs` → `sus-lobby-screen__title-wrap`、`sus-lobby-screen__crumbs`（`sus-breadcrumbs__divider`、`sus-breadcrumbs__item--current`）
在页脚操作周围添加的侧栏	`sus-lobby-screen__footer-start` / `__footer-center` / `__footer-end`，宿主 `FooterStart` / `FooterEnd`
为特效在 Ready 按钮周围注入的额外节点	`sus-lobby-screen__action` 内的 `sus-lobby-screen__action-flash` / `__action-sweep` / `__action-line`
自定义的「为什么无法开始」标签	`BlockReason` → `sus-lobby-screen__block-reason`
页头中自定义的货币行	`SetWallet` → SusWallet 的类（`sus-wallet__item`、`__item-label`、`__item-value`、`__item--empty`、`__item-value--flash`）

备注

Root 上存在 USS 修饰符 --limbo，用于透明遮罩 hub（从宿主添加该类）。
Tabs 初始为空 — 宿主必须设置 Items / Model。
HasData 与 EmptyText 共同驱动空提示；SetRows 会切换它，因此你很少需要手动设置。

SusLobbyScreenContent ​

属性

插槽

事件

样式钩子 ​

用法 ​

页头：标题样式、面包屑、钱包 ​

页脚：区域、阻止原因、操作装饰 ​

常见覆盖的皮肤钩子 ​

备注 ​

SusLobbyScreenContent

样式钩子

用法

页头：标题样式、面包屑、钱包

页脚：区域、阻止原因、操作装饰

常见覆盖的皮肤钩子

备注