AskaEth
fae1b61d9e
两位 reviewer 都量到：`CHAR_ADVANCE_EM = 0.5` 是估的，14 × 0.5 × 72 = 504px 实际能放 83 字符， 「72 字符」只活在名字里。改成实测： - 口径：`BodyMedium` 14px / Segoe UI Regular / 无 letter-spacing（iced 0.14 不支持字距）， 样本 = 实例页详情那段正文（361 字符，大小写/标点/空格/`→` 混排），FreeType getlength 实测 **2185.00px / 361 = 6.0526 px/字符 = 0.43233em**（旧 0.5 高估 15.7%）； 交叉验证：同段首行 78 字符渲染墨迹 484px，FreeType 对同一串 479px，差 1%（抗锯齿外扩）。 - `CHAR_ADVANCE_EM` 0.5 → **0.43233**；`measure_cap_px()` 加 **floor** → **435** （435.79 四舍五入成 436 就会让最后一两个字符挤不进 72 字符的承诺）；下限 315 → 272。 - 版面连带重算：`META_CARD_MIN_WIDTH` 160 → **136**（3×136 + 2×12 = 432 ≤ 435，否则 1180 宽下 元信息网格会从 3 列掉到 2 列）。**816 / 720 两个两列阈值不受影响**（它们由 LIST/DETAIL/FORM 宽度算， 与行宽上限无关），单测里的绝对值断言原样成立。 - 单测：`line_length_is_capped_at_72_characters` 里新增 tower 要求的断言 —— 用**实测步进** （样本字符数 + 实测宽度，独立于常量）反算「上限列宽能放多少字符」≤ 72（实际 71.87）， 并加一条回归护栏：同一实测步进下旧口径 504px = 83.3 字符，改回 0.5em 立刻红。 - 文档：`layout.rs` §3 补「怎么重新量」（字体、样本、工具、交叉验证、CJK 不适用）与全部数字； `mod.rs` / 四页文档里的 ≤504 同步改 435。
343 lines
11 KiB
Rust
343 lines
11 KiB
Rust
//! 实例页：**list-detail** 的唯一用例。
|
||
//!
|
||
//! ## 版式（由 [`super::layout`] 决议，页面不自己算宽度）
|
||
//!
|
||
//! | 版面 | 结构 | 退化行为 |
|
||
//! |---|---|---|
|
||
//! | `ListDetail`（窗口 ≥840） | 左列 336 固定、**独立滚动**；右列详情，正文列 ≤435 | — |
|
||
//! | `SingleColumn`（<840） | 列表与详情**整页切换**：本页只渲染详情列（≤435，居中） | 顶部给「Back to instances」，列表退成上一屏 |
|
||
//!
|
||
//! 为什么窄窗不是「上下堆」：官方 compact 下 list-detail 的口径是一次只显示一个 pane（列表 → 详情，
|
||
//! 整页切换）。上下堆会把详情挤到折叠线以下，等于详情不存在。
|
||
//!
|
||
//! ## 判据
|
||
//!
|
||
//! 列表行 `Component::ListItem`（BodyLarge / BodySmall，圆角 `Small`），行高 = `row_height + Space::X3`
|
||
//! = 56（两行行文；`row_height` 44 是单行列表的节奏）。选中行 `SecondaryContainer` + full 圆角（M3 列表）。
|
||
|
||
mod data;
|
||
|
||
#[cfg(test)]
|
||
mod tests;
|
||
|
||
pub(super) use data::SELECTED;
|
||
use data::{Entry, DEMO, NOTE};
|
||
|
||
use iced::widget::{column, container, row, scrollable};
|
||
use iced::{Alignment, Background, Border, Element, Length, Padding};
|
||
|
||
use unlucky_design::color::Role;
|
||
use unlucky_design::component_map::Component;
|
||
use unlucky_design::elevation::MaterialLayer;
|
||
use unlucky_design::icons::IconKind;
|
||
use unlucky_design::shape::ShapeScale;
|
||
use unlucky_design::spacing::Space;
|
||
use unlucky_design::typography::TypeRole;
|
||
|
||
use crate::theme::Ui;
|
||
|
||
use super::frame::{self, Header};
|
||
use super::layout::{self, FrameMetrics, PageLayout};
|
||
use super::{Action, Message};
|
||
|
||
/// 整页（`selected = None` 时详情区显示空态）。
|
||
pub fn view<'a>(
|
||
ui: &'a Ui,
|
||
metrics: FrameMetrics,
|
||
selected: Option<usize>,
|
||
) -> Element<'a, Message> {
|
||
let header = Header::new("Instances")
|
||
.subtitle("Local versions and their mod loaders")
|
||
.action(frame::text_action(ui, "New instance", Action::NewInstance))
|
||
.action(frame::text_action(ui, "Import", Action::Import));
|
||
|
||
let body = match metrics.layout {
|
||
PageLayout::ListDetail => {
|
||
let detail = match selected {
|
||
Some(_) => detail(ui, metrics),
|
||
None => detail_empty(ui),
|
||
};
|
||
frame::panes(metrics, list_column(ui, selected), detail)
|
||
}
|
||
_ => match selected {
|
||
Some(_) => narrow_detail(ui, metrics),
|
||
None => frame::single_column(metrics, detail_empty(ui)),
|
||
},
|
||
};
|
||
|
||
frame::page(ui, metrics, header, body)
|
||
}
|
||
|
||
// --------------------------------------------------------------- 列表列
|
||
|
||
fn list_column<'a>(ui: &'a Ui, selected: Option<usize>) -> Element<'a, Message> {
|
||
let head = container(
|
||
row![
|
||
container(frame::text_role(
|
||
ui,
|
||
TypeRole::LabelMedium,
|
||
false,
|
||
"ALL INSTANCES",
|
||
ui.color(Role::OnSurfaceVariant),
|
||
))
|
||
.width(Length::Fill)
|
||
.align_y(Alignment::Center),
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::LabelMedium,
|
||
false,
|
||
"12",
|
||
ui.color(Role::OnSurfaceVariant),
|
||
),
|
||
]
|
||
.width(Length::Fill)
|
||
.align_y(Alignment::Center),
|
||
)
|
||
.width(Length::Fill)
|
||
.padding(Padding {
|
||
top: ui.space(Space::X3),
|
||
right: ui.space(Space::X3),
|
||
bottom: ui.space(Space::X1),
|
||
left: ui.space(Space::X3),
|
||
});
|
||
|
||
let rows = column(
|
||
DEMO.iter()
|
||
.enumerate()
|
||
.map(|(index, entry)| list_row(ui, entry, selected == Some(index)))
|
||
.collect::<Vec<_>>(),
|
||
)
|
||
.spacing(ui.space(Space::X1))
|
||
.padding(Padding::from([0.0, ui.space(Space::X2)]))
|
||
.width(Length::Fill);
|
||
|
||
// **独立滚动**：只有列表列这一条 scrollable，详情列不跟着滚。
|
||
let scroller = scrollable(rows)
|
||
.height(Length::Fill)
|
||
.style(frame::scroll_style(ui));
|
||
|
||
container(column![head, scroller].height(Length::Fill))
|
||
.width(Length::Fill)
|
||
.height(Length::Fill)
|
||
.style(move |_theme| container::Style {
|
||
background: Some(Background::Color(ui.layer(MaterialLayer::Card))),
|
||
border: Border {
|
||
radius: ui.radius_dp(ShapeScale::Large),
|
||
..Border::default()
|
||
},
|
||
..container::Style::default()
|
||
})
|
||
.into()
|
||
}
|
||
|
||
fn list_row<'a>(ui: &'a Ui, entry: &'a Entry, selected: bool) -> Element<'a, Message> {
|
||
let spec = Component::ListItem.spec();
|
||
let height = ui.metrics().row_height + Space::X3.dp();
|
||
|
||
let name_color = if selected {
|
||
ui.color(Role::OnSecondaryContainer)
|
||
} else {
|
||
ui.color(Role::OnSurface)
|
||
};
|
||
let support_color = if selected {
|
||
ui.color(Role::OnSecondaryContainer)
|
||
} else {
|
||
ui.color(Role::OnSurfaceVariant)
|
||
};
|
||
|
||
let texts = column![
|
||
frame::text_role(ui, spec.text, false, entry.name, name_color),
|
||
frame::text_role(
|
||
ui,
|
||
spec.support.unwrap_or(TypeRole::BodySmall),
|
||
false,
|
||
entry.loader,
|
||
support_color,
|
||
),
|
||
]
|
||
.spacing(0.0)
|
||
.width(Length::Fill);
|
||
|
||
let inner = row![
|
||
frame::glyph_box(IconKind::Instances, support_color, frame::ICON_PX),
|
||
texts,
|
||
frame::glyph(IconKind::ChevronRight, support_color, frame::ICON_SMALL_PX),
|
||
]
|
||
.spacing(ui.space(Space::X3))
|
||
.width(Length::Fill)
|
||
.align_y(Alignment::Center);
|
||
|
||
container(inner)
|
||
.width(Length::Fill)
|
||
.height(height)
|
||
.padding(Padding::from([0.0, ui.space(Space::X2)]))
|
||
.align_y(Alignment::Center)
|
||
.style(move |_theme| container::Style {
|
||
background: selected.then(|| Background::Color(ui.color(Role::SecondaryContainer))),
|
||
border: Border {
|
||
radius: ui.radius(ShapeScale::Full, height),
|
||
..Border::default()
|
||
},
|
||
..container::Style::default()
|
||
})
|
||
.into()
|
||
}
|
||
|
||
// --------------------------------------------------------------- 详情列
|
||
|
||
fn detail<'a>(ui: &'a Ui, metrics: FrameMetrics) -> Element<'a, Message> {
|
||
let entry = &DEMO[SELECTED];
|
||
|
||
frame::left_aligned(
|
||
metrics.column,
|
||
column![
|
||
detail_head(ui, entry),
|
||
meta_grid(ui, metrics, entry),
|
||
frame::divider(ui),
|
||
body_paragraph(ui),
|
||
frame::divider(ui),
|
||
action_row(ui),
|
||
]
|
||
.spacing(ui.space(Space::X4))
|
||
.width(Length::Fill),
|
||
)
|
||
}
|
||
|
||
fn narrow_detail<'a>(ui: &'a Ui, metrics: FrameMetrics) -> Element<'a, Message> {
|
||
// 窄窗：列表退成上一屏，本屏只放详情（官方 compact 的 list-detail 口径）。
|
||
let entry = &DEMO[SELECTED];
|
||
|
||
frame::single_column(
|
||
metrics,
|
||
column![
|
||
row![frame::text_action(ui, "Back to instances", Action::Back)]
|
||
.width(Length::Fill)
|
||
.align_y(Alignment::Center),
|
||
detail_head(ui, entry),
|
||
meta_grid(ui, metrics, entry),
|
||
frame::divider(ui),
|
||
body_paragraph(ui),
|
||
frame::divider(ui),
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::BodySmall,
|
||
false,
|
||
"Below 840 px the list and the detail share one column, so opening an instance replaces \
|
||
this screen (full-page switch). Widen the window to see both panes again.",
|
||
ui.color(Role::OnSurfaceVariant),
|
||
),
|
||
action_row(ui),
|
||
]
|
||
.spacing(ui.space(Space::X4))
|
||
.width(Length::Fill),
|
||
)
|
||
}
|
||
|
||
fn detail_head<'a>(ui: &'a Ui, entry: &'a Entry) -> Element<'a, Message> {
|
||
let titles = column![
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::TitleLarge,
|
||
true,
|
||
entry.name,
|
||
ui.color(Role::OnSurface)
|
||
),
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::BodySmall,
|
||
false,
|
||
entry.version,
|
||
ui.color(Role::OnSurfaceVariant),
|
||
),
|
||
]
|
||
.spacing(ui.space(Space::X1))
|
||
.width(Length::Fill);
|
||
|
||
row![
|
||
titles,
|
||
frame::text_action(ui, "Play", Action::Play),
|
||
frame::text_action(ui, "More", Action::More),
|
||
]
|
||
.spacing(ui.space(Space::X2))
|
||
.width(Length::Fill)
|
||
.align_y(Alignment::Center)
|
||
.into()
|
||
}
|
||
|
||
/// 元信息网格：列数由 [`layout::meta_columns`] 决定（1180 → 3 列，900 → 2 列）。
|
||
fn meta_grid<'a>(ui: &'a Ui, metrics: FrameMetrics, entry: &'a Entry) -> Element<'a, Message> {
|
||
let cells = [
|
||
("VERSION", entry.version),
|
||
("LOADER", entry.loader),
|
||
("MEMORY", entry.memory),
|
||
("JAVA", entry.java),
|
||
("MODS", entry.mods),
|
||
("LAST PLAYED", entry.last_played),
|
||
];
|
||
|
||
let mut grid = column![].spacing(layout::META_GAP).width(Length::Fill);
|
||
let columns = metrics.meta_columns.clamp(1, cells.len());
|
||
|
||
for chunk in cells.chunks(columns) {
|
||
let mut cells_row = row![].spacing(layout::META_GAP).width(Length::Fill);
|
||
for (label, value) in chunk {
|
||
let cell = frame::card(
|
||
ui,
|
||
column![
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::LabelMedium,
|
||
false,
|
||
label,
|
||
ui.color(Role::OnSurfaceVariant),
|
||
),
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::BodyMedium,
|
||
false,
|
||
value,
|
||
ui.color(Role::OnSurface)
|
||
),
|
||
]
|
||
.spacing(ui.space(Space::X1))
|
||
.width(Length::Fill),
|
||
);
|
||
cells_row = cells_row.push(container(cell).width(Length::Fill));
|
||
}
|
||
grid = grid.push(cells_row);
|
||
}
|
||
|
||
grid.into()
|
||
}
|
||
|
||
fn body_paragraph<'a>(ui: &'a Ui) -> Element<'a, Message> {
|
||
frame::text_role(
|
||
ui,
|
||
TypeRole::BodyMedium,
|
||
false,
|
||
NOTE,
|
||
ui.color(Role::OnSurfaceVariant),
|
||
)
|
||
}
|
||
|
||
fn action_row<'a>(ui: &'a Ui) -> Element<'a, Message> {
|
||
row![
|
||
frame::text_action(ui, "Duplicate", Action::Duplicate),
|
||
frame::text_action(ui, "Open folder", Action::OpenFolder),
|
||
frame::text_action(ui, "Delete", Action::Delete),
|
||
]
|
||
.spacing(ui.space(Space::X2))
|
||
.align_y(Alignment::Center)
|
||
.into()
|
||
}
|
||
|
||
fn detail_empty<'a>(ui: &'a Ui) -> Element<'a, Message> {
|
||
frame::empty_state(
|
||
ui,
|
||
IconKind::Instances,
|
||
"No instance selected",
|
||
"Pick an instance on the left to see its version, loader and launch options.",
|
||
Vec::new(),
|
||
)
|
||
}
|