Unlucky Launcher v0.2.3

crates/app-iced/src/components/gallery/inputs.rs

@@ -0,0 +1,341 @@
+//! gallery 里的输入类小节（D30 的状态矩阵登记）：TextField / Search / Slider / Menu。
+//!
+//! ## 为什么分成四个 `part`
+//!
+//! 一整段（四组件 × 五态 × 两式）比 760 高的窗口还高，`--screen=gallery` 的截图只能看到顶部。
+//! 所以本文件把证据拆成四个自足的 `part`（[`text_field_part`] / [`search_part`] /
+//! [`slider_part`] / [`menu_part`]），[`section`] 按 D30 的顺序把它们竖排——
+//! 出图时用副本工程把 `section()` 换成单个 `part`（只调段序、不改组件代码，报告里有 diff 与说明）。
+//!
+//! ## 矩阵形状
+//!
+//! ```text
+//! TextField（两行 × 五态）            列 = enabled / hovered / pressed / focused / disabled
+//!   filled    | [字段] | ...
+//!   outlined  | [字段] | ...
+//!   另加三格：空 / 有值 / 错误（9.7 的判据要单独一眼）
+//!
+//! Search  （五行 + 一个展开面板）
+//! Slider  （五态一行 + 0% / 50% / 100% 三行 + 离散 4 段一行）
+//! Menu    （五态各一项的一只菜单 + 一只「展开态」菜单：选中 / 分隔线 / 禁用）
+//! ```
+//!
+//! ## 每个格子都强制状态
+//!
+//! 与按钮家族同一个理由：截图时没法让 20 个控件同时 hover。`state(..)` 只是取证开关，
+//! 不动任何状态机——图上的五态与运行期五态同源。
+
+use iced::widget::{column, container, row, text};
+use iced::{Element, Length};
+
+use unlucky_design::color::Role;
+use unlucky_design::icons::IconKind;
+use unlucky_design::spacing::Space;
+use unlucky_design::typography::TypeRole;
+
+use crate::theme::Ui;
+
+use super::super::inputs::{
+    self, Field, FieldVariant, Menu, MenuItem, SearchBar, SearchView, Slider,
+};
+use super::super::interaction::Interaction;
+use super::{cell_width, heading, row_label, state_cells, DemoMessage};
+
+/// 演示消息（组件只认泛型，gallery 的映射在这里落地）。
+fn pressed(id: &'static str) -> DemoMessage {
+    DemoMessage::Pressed(id)
+}
+
+/// 输入类家族整段（四个 part 竖排；见模块文档的「为什么分成四个 part」）。
+pub(super) fn section<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    column![
+        heading(
+            ui,
+            "inputs · text field / search / slider / menu",
+            "12b §9/§11/§8 + 15 §20：TextField 高 56（无标签 40）· Search 条 56 药丸 + 图标可视边 16 \
+             （= pad 12 + offset 4）· Slider 轨 16 + 竖条 4×44 · Menu 项 48 + L2 阴影"
+        ),
+        text_field_part(ui),
+        search_part(ui),
+        slider_part(ui),
+        menu_part(ui),
+    ]
+    .spacing(ui.space(Space::X8))
+    .into()
+}
+
+/// 一行小字（图例/说明）。
+fn note<'a>(ui: &'a Ui, value: &'a str) -> Element<'a, DemoMessage> {
+    let style = ui.style(TypeRole::BodySmall);
+    text(value)
+        .size(style.size_px)
+        .font(ui.font_of(style))
+        .color(ui.color(Role::OnSurfaceVariant))
+        .into()
+}
+
+/// 固定宽的矩阵格。
+fn cell<'a>(ui: &'a Ui, content: impl Into<Element<'a, DemoMessage>>) -> Element<'a, DemoMessage> {
+    container(content)
+        .width(Length::Fixed(cell_width(ui)))
+        .into()
+}
+
+/// 五态列头。
+fn state_header<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let style = ui.style(TypeRole::LabelSmall);
+    let mut head = row![row_label(ui, "")].spacing(ui.space(Space::X2));
+    for (name, width) in state_cells(ui) {
+        head = head.push(
+            container(
+                text(name)
+                    .size(style.size_px)
+                    .font(ui.font_of(style))
+                    .color(ui.color(Role::OnSurfaceVariant)),
+            )
+            .width(Length::Fixed(width)),
+        );
+    }
+    head.into()
+}
+
+/// 一行矩阵（左侧标签 + 五格）。
+fn state_row<'a>(
+    ui: &'a Ui,
+    label: &'a str,
+    cells: Vec<Element<'a, DemoMessage>>,
+) -> Element<'a, DemoMessage> {
+    row![
+        row_label(ui, label),
+        row(cells).spacing(ui.space(Space::X2))
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}
+
+/// TextField：两式 × 五态 + 空 / 有值 / 错误 三格。
+fn text_field_part<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let mut matrix = column![state_header(ui)].spacing(ui.space(Space::X2));
+
+    for variant in FieldVariant::ALL {
+        let cells = Interaction::ALL
+            .iter()
+            .map(|state| {
+                cell(
+                    ui,
+                    inputs::text_field(
+                        ui,
+                        Field::new("实例一")
+                            .variant(variant)
+                            .label("名称")
+                            .state(*state),
+                        |_| pressed("field"),
+                    ),
+                )
+            })
+            .collect::<Vec<_>>();
+        matrix = matrix.push(state_row(ui, variant.name(), cells));
+    }
+
+    // 三格用 **320** 宽（= 2 个矩阵格）：9.2 的最小宽 280 只在这里可验（矩阵格 160 更窄）
+    let wide = Length::Fixed(cell_width(ui) * 2.0);
+    let extras = row![
+        inputs::text_field(
+            ui,
+            Field::new("")
+                .label("名称")
+                .placeholder("请输入名称")
+                .width(wide),
+            |_| pressed("field"),
+        ),
+        inputs::text_field(
+            ui,
+            Field::new("1.21.4")
+                .label("名称")
+                .leading(IconKind::Folder)
+                .width(wide),
+            |_| pressed("field"),
+        ),
+        inputs::text_field(
+            ui,
+            Field::new("")
+                .variant(FieldVariant::Outlined)
+                .label("名称")
+                .placeholder("必填")
+                .trailing(IconKind::Error)
+                .supporting("该名称已被占用")
+                .error()
+                .width(wide),
+            |_| pressed("field"),
+        ),
+    ]
+    .spacing(ui.space(Space::X2));
+
+    column![
+        note(
+            ui,
+            "列 = 五态 · 行 = 两式。静息指示线/描边 1px、聚焦与错误 2px（A1 FocusOutlineWidth）；\
+             错误态线/标签/辅助文本全 Error"
+        ),
+        matrix,
+        note(
+            ui,
+            "另加：空（占位 OnSurfaceVariant）/ 有值（带前置图标 24）/ 错误（2px + 辅助文本）"
+        ),
+        extras,
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}
+
+/// Search：五态 bar 竖排 + 一个展开的 docked 面板。
+fn search_part<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let bar_width = ui.space(Space::X8) * 12.0;
+    let mut bars = column![].spacing(ui.space(Space::X2));
+    for state in Interaction::ALL {
+        let bar = inputs::search_bar(
+            ui,
+            SearchBar::new("")
+                .placeholder("搜索实例 / 版本 / mod")
+                .state(state)
+                .width(Length::Fixed(bar_width)),
+            |_| pressed("search"),
+        );
+        bars = bars.push(
+            row![row_label(ui, state.name()), bar]
+                .spacing(ui.space(Space::X2))
+                .align_y(iced::Alignment::Center),
+        );
+    }
+
+    let results: &[&str] = &[
+        "实例：原版 1.21.4",
+        "版本：Fabric 0.16.9",
+        "mod：Sodium 0.6.5",
+    ];
+    let view = inputs::search_view(
+        ui,
+        SearchView::new("1.21", results, "没有匹配的实例").placeholder("搜索实例 / 版本 / mod"),
+        |_| pressed("search"),
+    );
+
+    column![
+        note(
+            ui,
+            "bar：高 56 · 圆角 full(28) · SurfaceContainerHigh · 图标可视边 16 = pad 12 + offset 4（M69 不变量）· \
+             聚焦 1px Secondary；view：docked，头部 56 + 1px Outline 分隔 + 结果区最小高 240"
+        ),
+        row![bars, view].spacing(ui.space(Space::X6)),
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}
+
+/// Slider：五态一行 + 0%/50%/100% 三行 + 离散 4 段一行。
+fn slider_part<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let cells = Interaction::ALL
+        .iter()
+        .map(|state| {
+            let enabled = !state.is_disabled();
+            let mut spec = Slider::new(ui, 0.5).state(*state);
+            if enabled {
+                spec = spec.on_change(|_| pressed("slider"));
+            }
+            cell(ui, inputs::slider(spec))
+        })
+        .collect::<Vec<_>>();
+
+    let track_width = ui.space(Space::X8) * 14.0;
+    let mut values = column![].spacing(ui.space(Space::X2));
+    for (label, fraction) in [("0%", 0.0), ("50%", 0.5), ("100%", 1.0)] {
+        let spec = Slider::new(ui, fraction)
+            .on_change(|_| pressed("slider"))
+            .state(Interaction::Enabled);
+        values = values.push(
+            row![
+                row_label(ui, label),
+                container(inputs::slider(spec)).width(Length::Fixed(track_width)),
+            ]
+            .spacing(ui.space(Space::X2))
+            .align_y(iced::Alignment::Center),
+        );
+    }
+
+    // 离散：4 段 = 3 个内部停靠点（25 / 50 / 75%），当前 25% ⇒ 能看到 50% 与 75% 两个点
+    let discrete = row![
+        row_label(ui, "离散 4"),
+        container(inputs::slider(
+            Slider::new(ui, 0.25)
+                .steps(4)
+                .on_change(|_| pressed("slider"))
+                .state(Interaction::Enabled)
+        ))
+        .width(Length::Fixed(track_width)),
+    ]
+    .spacing(ui.space(Space::X2))
+    .align_y(iced::Alignment::Center);
+
+    column![
+        note(
+            ui,
+            "轨 16 full（Primary / SecondaryContainer）· 竖条 4×44 full（overflow 上下各 14）· \
+             focus/pressed 收窄到 2 · 命中 48 · 离散停靠点 4"
+        ),
+        state_row(ui, "五态", cells),
+        note(ui, "0% / 50% / 100%：竖条在两端贴边但不越界（左缘 = 轨道左缘，右缘 = 轨道右缘）"),
+        values,
+        note(
+            ui,
+            "离散：steps(4) ⇒ 3 个内部停靠点（25/50/75%），未激活轨在停靠点两侧留 6 空隙，\n             激活段只画到竖条中心",
+        ),
+        discrete,
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}
+
+/// Menu：一只五态菜单 + 一只展开态菜单（选中 / 分组线 / 禁用）。
+fn menu_part<'a>(ui: &'a Ui) -> Element<'a, DemoMessage> {
+    let width = ui.space(Space::X8) * 8.0;
+
+    let mut states = Menu::new().width(Length::Fixed(width));
+    for state in Interaction::ALL {
+        let mut item = MenuItem::new("重命名", pressed("menu")).state(state);
+        if state.is_disabled() {
+            item = MenuItem::disabled("重命名").state(state);
+        }
+        states = states.item(item.leading(IconKind::Folder));
+    }
+
+    let open = Menu::new()
+        .width(Length::Fixed(width))
+        .item(MenuItem::new("重命名", pressed("menu")).leading(IconKind::Folder))
+        .item(
+            MenuItem::new("复制实例", pressed("menu"))
+                .leading(IconKind::Download)
+                .trailing(IconKind::Check)
+                .selected(),
+        )
+        .divider()
+        .item(MenuItem::disabled("删除").leading(IconKind::Trash));
+
+    column![
+        note(
+            ui,
+            "容器 SurfaceContainer + L2 阴影（blur 6 / offset 2 / Shadow 角色）· 圆角 4（令牌表）· \
+             项高 48 · 水平 12 · 上下留白 8 · 选中项 SecondaryContainer 指示器内缩 4、圆角 8"
+        ),
+        row![
+            column![note(ui, "五态（每项强制一态）"), inputs::menu(ui, states)]
+                .spacing(ui.space(Space::X2)),
+            column![
+                note(ui, "展开：含选中项 / 分组分隔线（复用 divider）/ 不可点项"),
+                inputs::menu(ui, open)
+            ]
+            .spacing(ui.space(Space::X2)),
+        ]
+        .spacing(ui.space(Space::X6)),
+    ]
+    .spacing(ui.space(Space::X2))
+    .into()
+}