feat(design): M69 令牌补齐 —— 圆角分层 / 组件微度量 / 骨架值与一像素线
G13（D32 分层）：新增 shape::ComponentRadius（白名单只有 Micro=2）、 MICRO_CONTROL_MAX_SIZE=24 与纯函数 radius_layer_for()；微半径走 radius_px(size) -> Option<f32>，尺寸 >24dp 一律 None，靠签名而不是自觉拦。 ShapeScale 与 rank() 一个字未动，2 不进刻度。 G11：LayoutMetrics 加 search_bar_height=56 / nav_rail_width=88 / nav_drawer_width=240 / divider_thickness=1；删除语义相反的 nav_expanded_width=88 / nav_collapsed_width=48（D33：展开 drawer 240 / 折叠 rail 88；值 88 的后继是新名字 nav_rail_width，48 无后继）。 G10：新增 component_map::ComponentMetrics（12 字段 + 4 个命名常量 + indicator_width），入口 Component::metrics()；框内几何与 LayoutMetrics 的 骨架值分工写进模块文档，骨架级尺寸在 CM 里留 0 不许重复。 G9：Component 末尾追加 Checkbox / Radio / Search / NavigationDrawer / Divider（20 -> 25），同步 table.rs 槽位、ALL 与 name()；ComponentSpec 新增 micro_radius（Some 时 shape 必须是占位 None，由构造器 + 测试钉死）。 G12：新增 spacing::stroke::HAIRLINE = 1.0（crate 根再导出为 unlucky_design::stroke），divider_thickness 直接引用它。 其余：lib.rs 的「OKLCh 近似」文案改回真实口径（真 HCT / ColorSpec2021）； component_map 单测拆到 tests.rs 以免 mod.rs 超 400 行；测试 145 -> 165。
This commit is contained in:
AskaEth committed
1 parent
b89cc91b78
commit
141e9b12c7
9 files changed
+1066
-145
No files matched your search
@@ -1,8 +1,37 @@
|
||||
//! 形状 / 高程 / 动效之外的「尺子」：4px 栅格与骨架尺寸。
|
||||
//! 形状 / 高程 / 动效之外的「尺子」：4px 栅格、骨架尺寸、一像素线。
|
||||
//!
|
||||
//! 源流有两条：`DevDocs/ops/slint-reference/crates/app/ui/theme/metrics.slint`（M52 定稿的骨架节奏），
|
||||
//! 以及 `ui-integration-contract.md` §3「间距只允许 4/8/12/16/24/32」。M3 同样用 4dp 栅格，
|
||||
//! 所以这层**不用改口径**，只是把值搬进唯一真源。
|
||||
//!
|
||||
//! ## 职责边界：`LayoutMetrics` vs `ComponentMetrics`（M69 / G10）
|
||||
//!
|
||||
//! | 结构 | 管什么 | 例子 |
|
||||
//! |---|---|---|
|
||||
//! | [`LayoutMetrics`] | **窗口骨架与布局节奏**：标题栏/页头/行的节奏、dock 宽度（导航、AI 面板）、命中区 | [`LayoutMetrics::nav_drawer_width`] / [`LayoutMetrics::search_bar_height`] / `touch_target` |
|
||||
//! | `component_map::ComponentMetrics` | **单个控件内部几何**：外框尺寸、微圆角、描边/环线宽、状态层直径、内点、图标偏移 | checkbox 20×20 + 描边 2 + 状态层 Ø40 |
|
||||
//! | [`stroke::HAIRLINE`] | **一像素线**的唯一真源：分隔线厚度、容器描边、聚焦指示 | [`LayoutMetrics::divider_thickness`] |
|
||||
//!
|
||||
//! 判据：一个值若随窗口/列宽变化、或决定一块面板占多宽，归 LM；若它只在某个控件自己的方框
|
||||
//! 内起作用（画进去的那几个像素），归 CM。**同一个值不许两边各写一份**。
|
||||
|
||||
/// 一像素线（G12）：全站 1px 线的**唯一真源**。
|
||||
///
|
||||
/// 为什么要单独开一个命名空间：`1.0` 在项目里同时承担三种语义——分隔线厚度、容器描边宽度、
|
||||
/// 聚焦指示描边宽度。各自抄字面量就会漂成 1.0 / 1.5 / 2.0 混排（M66 的 G12 正是这么来的）。
|
||||
/// 从这里取，语义和数值只有一个落点。
|
||||
///
|
||||
/// iced 侧怎么落地（适配层照此抄，别再自己定 `STROKE_PX`）：
|
||||
/// - **容器描边**：`Border { width: unlucky_design::stroke::HAIRLINE, .. }`（卡片/输入框/chip/菜单）；
|
||||
/// - **分隔线**：[`LayoutMetrics::divider_thickness`]（数值就是 [`stroke::HAIRLINE`]）——
|
||||
/// 横向分隔线是容器高度、纵向是宽度，都取它；
|
||||
/// - **聚焦环**：内描边与外描边**都用**它（M3 的聚焦指示是 1dp，做成 2dp 就是加粗）；
|
||||
/// - **不用于**：elevation 的 blur / offset（那是 [`crate::elevation`] 的量）、
|
||||
/// 图标描边（图标走 SVG 的 viewBox 单位，见 [`crate::icons::stroke_width_for`]）。
|
||||
pub mod stroke {
|
||||
/// 一像素线宽度（逻辑 px @100% DPI = 1dp；DividerTokens.Thickness）。
|
||||
pub const HAIRLINE: f32 = 1.0;
|
||||
}
|
||||
|
||||
/// 栅格基数（dp）。
|
||||
pub const GRID: f32 = 4.0;
|
||||
@@ -63,10 +92,31 @@ pub struct LayoutMetrics {
|
||||
pub titlebar_height: f32,
|
||||
/// 标题栏按钮宽度（关闭/最大化/最小化）。
|
||||
pub titlebar_button_width: f32,
|
||||
/// 展开态导航宽度。
|
||||
pub nav_expanded_width: f32,
|
||||
/// 收起态导航宽度。
|
||||
pub nav_collapsed_width: f32,
|
||||
/// 展开态导航（drawer 形态）宽度。
|
||||
///
|
||||
/// **G11 语义修正（M69 / D33）**：D16「左侧固定、允许折叠」落地为**同一个常驻容器**的两种
|
||||
/// 宽度——展开 240（drawer）、折叠 88（rail）。旧字段 `nav_expanded_width = 88` 的名字与值
|
||||
/// 相反（88 其实是 rail），已删除，**不留别名**：两个名字指同一个量等于把选择权还给组件层。
|
||||
///
|
||||
/// 官方 `NavigationDrawerTokens.ContainerWidth = 360`、`MinimumDrawerWidth = 240`；
|
||||
/// 本项目取官方下限 240——360 + AI 面板 320 = 680 = 1180 窗宽的 58%，内容区只剩 500 放不下两列卡片。
|
||||
pub nav_drawer_width: f32,
|
||||
/// 折叠态导航（rail 形态）宽度。
|
||||
///
|
||||
/// 88 = 12b §5.1 对官方 rail 96 的登记偏离（−8）：指示器宽 88 − 2×16 = 56 仍成立，
|
||||
/// 再窄就装不下 56 宽的选中指示器。
|
||||
pub nav_rail_width: f32,
|
||||
/// 搜索条高度（G11）。
|
||||
///
|
||||
/// 官方 `SearchBarTokens.ContainerHeight = 56`。**不走 [`LayoutMetrics::control_height`]（40）**：
|
||||
/// 搜索条是页级入口而不是密集行控件；56 也顺带 ≥ 命中下限 48。圆角由 `ShapeScale::Full`
|
||||
/// 按边长折算（56 → 28，正好等于官方 `SearchBarCornerRadius`）。
|
||||
pub search_bar_height: f32,
|
||||
/// 分隔线厚度（G11 + G12）。
|
||||
///
|
||||
/// 官方 `DividerTokens.Thickness = 1.0.dp`。值就是 [`stroke::HAIRLINE`]——**一像素线不受 4px
|
||||
/// 栅格约束**，所以它不在栅格测试的表里（测试里显式豁免并写明原因）。
|
||||
pub divider_thickness: f32,
|
||||
/// 导航项高度。
|
||||
pub nav_item_height: f32,
|
||||
/// 导航项间距。
|
||||
@@ -103,8 +153,14 @@ impl LayoutMetrics {
|
||||
pub const DESKTOP: Self = Self {
|
||||
titlebar_height: 48.0,
|
||||
titlebar_button_width: 46.0,
|
||||
nav_expanded_width: 88.0,
|
||||
nav_collapsed_width: 48.0,
|
||||
// G11 / D33：展开 = drawer 240，折叠 = rail 88（旧 `nav_expanded_width=88` /
|
||||
// `nav_collapsed_width=48` 的名字与值相反，已删）。
|
||||
nav_drawer_width: 240.0,
|
||||
nav_rail_width: 88.0,
|
||||
// G11：官方 SearchBarTokens.ContainerHeight = 56。
|
||||
search_bar_height: 56.0,
|
||||
// G11/G12：官方 DividerTokens.Thickness = 1.0dp → 一像素线的唯一真源。
|
||||
divider_thickness: stroke::HAIRLINE,
|
||||
nav_item_height: 44.0,
|
||||
nav_item_gap: 4.0,
|
||||
page_header_height: 56.0,
|
||||
@@ -146,8 +202,13 @@ mod tests {
|
||||
// 受 4px 栅格约束的字段（间距/高度/宽度类）。
|
||||
// `titlebar_button_width` 刻意不在表内：46 对齐 Windows 11 原生 caption 按钮宽度，
|
||||
// 属 OS 惯例值，单列一条断言钉住，不让它静默漂移。
|
||||
// `divider_thickness` 同理不在表内：它是**一像素线**（1 不是 4 的倍数），
|
||||
// 归 `stroke::HAIRLINE` 那条规则管，下面单独断言。
|
||||
for (name, value) in [
|
||||
("titlebar_height", m.titlebar_height),
|
||||
("nav_drawer_width", m.nav_drawer_width),
|
||||
("nav_rail_width", m.nav_rail_width),
|
||||
("search_bar_height", m.search_bar_height),
|
||||
("nav_item_height", m.nav_item_height),
|
||||
("nav_item_gap", m.nav_item_gap),
|
||||
("page_header_height", m.page_header_height),
|
||||
@@ -165,6 +226,37 @@ mod tests {
|
||||
m.titlebar_button_width, 46.0,
|
||||
"标题栏按钮宽度应对齐 Win11 原生 caption"
|
||||
);
|
||||
// 一像素线的显式豁免（不是「忘了加进表」，是它本来就不受栅格约束）。
|
||||
assert_eq!(m.divider_thickness, stroke::HAIRLINE);
|
||||
assert_ne!(m.divider_thickness % GRID, 0.0);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn nav_widths_follow_the_two_form_decision() {
|
||||
// D33：左侧导航是同一容器的两种宽度，展开（drawer）必须比折叠（rail）宽。
|
||||
let m = LayoutMetrics::DESKTOP;
|
||||
assert_eq!(m.nav_drawer_width, 240.0, "展开 drawer 取官方下限 240");
|
||||
assert_eq!(m.nav_rail_width, 88.0, "折叠 rail 为 88（登记偏离官方 96）");
|
||||
assert!(m.nav_rail_width < m.nav_drawer_width);
|
||||
// rail 里的选中指示器 = 容器宽 − 2×16；88 − 32 = 56，再窄就装不下 56 宽指示器。
|
||||
assert_eq!(m.nav_rail_width - Space::X4.dp() * 2.0, 56.0);
|
||||
// 内容区下限：1180 窗宽 − drawer − AI 面板 仍 ≥600（够放两列卡片）。
|
||||
assert!(1180.0 - m.nav_drawer_width - m.ai_panel_width >= 600.0);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn search_bar_height_is_a_page_level_entry() {
|
||||
let m = LayoutMetrics::DESKTOP;
|
||||
assert_eq!(m.search_bar_height, 56.0, "官方 ContainerHeight = 56");
|
||||
assert!(
|
||||
m.search_bar_height >= m.touch_target,
|
||||
"页级入口必须 ≥ 命中下限"
|
||||
);
|
||||
// 圆角走 ShapeScale::Full，56 → 28，正好是官方 SearchBarCornerRadius。
|
||||
assert_eq!(
|
||||
crate::shape::ShapeScale::Full.radius_px(m.search_bar_height),
|
||||
28.0
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
||||
Reference in new issue
Block a user