yggdrasil/pages/components_showcase/

business_previews.rs

//! Local examples for business components. The production controllers stay in components/.
use leptos::prelude::*;

use crate::api::database::sql_console::SqlResult;
use crate::components::assets::asset_picker::{PickerAsset, PickerGallery, PickerSelectionFooter};
use crate::components::assets::asset_upload::{
    UploadDropZoneContent, UploadItem, UploadPanel, UploadStatus,
};
use crate::components::assets::AssetSelection;
use crate::components::code_runner::runner::RunnerExample;
use crate::components::code_runner::CodeRunner;
use crate::components::sql_result_table::SqlResultTable;
use crate::components::ui::{
    Button, ButtonSize, ButtonVariant, Icon, IconButton, IconName, ModalShell, SegmentedControl,
    SegmentedItem, TablePager,
};

pub(super) fn preview(slug: &str, detail: bool) -> Option<AnyView> {
    Some(match slug {
        "asset-picker-modal" => view! { <PickerDemo detail=detail/> }.into_any(),
        "asset-upload-modal" => view! { <UploadDemo detail=detail/> }.into_any(),
        "code-runner" => view! { <RunnerDemo detail=detail/> }.into_any(),
        "sql-result-table" => view! { <SqlTableDemo detail=detail/> }.into_any(),
        _ => return None,
    })
}

const IMAGES: [(&str, &str, &str); 5] = [
    (
        "/images/samples/clay-circle.webp",
        "纸面与陶土.webp",
        "暖白纸面上的一轮陶土色圆",
    ),
    (
        "/images/samples/hairline-grid.webp",
        "细线网格.webp",
        "细线网格上连起的几个点",
    ),
    (
        "/images/samples/ink-dusk.webp",
        "夜色弧线.webp",
        "深色背景上层层展开的陶土色弧线",
    ),
    (
        "/images/samples/stacked.webp",
        "叠放的卡片.webp",
        "两张叠放的卡片",
    ),
    (
        "/images/samples/contours.webp",
        "等高线.webp",
        "起伏的等高线",
    ),
];

fn picker_page(query: &str, page: i32) -> (Vec<PickerAsset>, i64) {
    let query = query.trim().to_lowercase();
    let matches: Vec<PickerAsset> = IMAGES
        .iter()
        .filter(|(_, name, alt)| {
            query.is_empty()
                || name.to_lowercase().contains(&query)
                || alt.to_lowercase().contains(&query)
        })
        .map(|(url, name, alt)| PickerAsset {
            url: (*url).to_string(),
            thumbnail: (*url).to_string(),
            filename: (*name).to_string(),
            alt: Some((*alt).to_string()),
            fresh: false,
        })
        .collect();
    let total = matches.len() as i64;
    let start = ((page - 1).max(0) as usize) * 3;
    (matches.into_iter().skip(start).take(3).collect(), total)
}

fn sample_selected() -> Vec<AssetSelection> {
    IMAGES[..2]
        .iter()
        .map(|(url, _, alt)| AssetSelection {
            url: (*url).to_string(),
            alt: Some((*alt).to_string()),
        })
        .collect()
}

/// 演示弹窗头部：与正式弹窗同为 `.asset-modal-head`，关闭前多一个「恢复默认」。
#[component]
fn DemoModalHead(
    title: &'static str,
    #[prop(into)] on_reset: Callback<()>,
    #[prop(into)] on_close: Callback<()>,
) -> impl IntoView {
    view! {
        <div class="asset-modal-head">
            <h2>{title}</h2>
            <div class="flex items-center gap-1">
                <Button
                    variant=ButtonVariant::Ghost
                    size=ButtonSize::Sm
                    icon=IconName::RotateCcw
                    onclick=move |_| on_reset.run(())
                >
                    "恢复默认"
                </Button>
                <IconButton
                    icon=IconName::X
                    label="关闭"
                    size=ButtonSize::Sm
                    onclick=move |_| on_close.run(())
                />
            </div>
        </div>
    }
}

#[component]
fn PickerDemo(detail: bool) -> impl IntoView {
    let visible = RwSignal::new(false);
    let closing = RwSignal::new(false);
    let selected = RwSignal::new(sample_selected());
    let multi = RwSignal::new(true);
    let query = RwSignal::new(String::new());
    let page = RwSignal::new(1_i32);
    let confirmed: RwSignal<Vec<AssetSelection>> = RwSignal::new(Vec::new());
    let result_label = move || {
        confirmed.with(|items| {
            items
                .iter()
                .map(|item| item.url.clone())
                .collect::<Vec<_>>()
                .join("、")
        })
    };
    let root_class = if detail {
        "showcase-picker-demo showcase-picker-detail"
    } else {
        "showcase-picker-demo"
    };
    view! {
        <div class=root_class>
            {detail
                .then(|| {
                    view! {
                        <div class="showcase-demo-bar">
                            <Button
                                variant=ButtonVariant::Secondary
                                size=ButtonSize::Sm
                                onclick=move |_| {
                                    selected.set(Vec::new());
                                    page.set(1);
                                    visible.set(true);
                                }
                            >
                                "打开素材选择弹窗"
                            </Button>
                            <span>"本地演示，选择不会写入文章。"</span>
                        </div>
                    }
                })}
            {move || {
                (!visible.get())
                    .then(|| {
                        view! {
                            <div class="showcase-picker-panel">
                                <PickerDemoContent
                                    detail=detail
                                    selected=selected
                                    multi=multi
                                    query=query
                                    page=page
                                    confirmed=confirmed
                                    visible=visible
                                />
                            </div>
                        }
                    })
            }}
            {detail
                .then(|| {
                    view! {
                        <ModalShell
                            visible=visible
                            closing=closing
                            title="选择图片"
                            overlay_padding="p-4 sm:p-6"
                            panel_class="asset-modal asset-picker"
                        >
                            <DemoModalHead
                                title="选择图片"
                                on_reset=move |_| {
                                    selected.set(sample_selected());
                                    multi.set(true);
                                    query.set(String::new());
                                    page.set(1);
                                    confirmed.set(Vec::new());
                                    closing.set(true);
                                    visible.set(false);
                                }
                                on_close=move |_| {
                                    closing.set(true);
                                    visible.set(false);
                                }
                            />
                            <PickerDemoContent
                                detail=true
                                selected=selected
                                multi=multi
                                query=query
                                page=page
                                confirmed=confirmed
                                visible=visible
                            />
                        </ModalShell>
                    }
                })}
            {move || {
                (detail && !confirmed.with(Vec::is_empty))
                    .then(|| {
                        view! {
                            <p class="showcase-demo-result">
                                {move || format!("已确认：{}", result_label())}
                            </p>
                        }
                    })
            }}
        </div>
    }
}

#[component]
fn PickerDemoContent(
    detail: bool,
    selected: RwSignal<Vec<AssetSelection>>,
    multi: RwSignal<bool>,
    query: RwSignal<String>,
    page: RwSignal<i32>,
    confirmed: RwSignal<Vec<AssetSelection>>,
    visible: RwSignal<bool>,
) -> impl IntoView {
    let items = Signal::derive(move || picker_page(&query.get(), page.get()).0);
    let total = Signal::derive(move || picker_page(&query.get(), page.get()).1);
    let mode = Signal::derive(move || if multi.get() { "multi" } else { "single" }.to_string());
    let on_pick = Callback::new(move |picks: Vec<AssetSelection>| {
        confirmed.set(picks);
        visible.set(false);
    });
    // 不带外框：卡片预览外包 .showcase-picker-panel，弹窗里直接排进 .asset-modal。
    view! {
        <div class="asset-modal-bar">
            <label class="field field-sm admin-filter-search asset-modal-search">
                <Icon name=IconName::Search size=14/>
                <span class="sr-only">"搜索素材"</span>
                <input
                    type="search"
                    placeholder="文件名或替代文本"
                    prop:value=move || query.get()
                    on:input=move |e| {
                        query.set(event_target_value(&e));
                        page.set(1);
                    }
                />
            </label>
            {detail
                .then(|| {
                    view! {
                        <SegmentedControl
                            items=vec![
                                SegmentedItem::new("single".to_string(), "单选"),
                                SegmentedItem::new("multi".to_string(), "多选"),
                            ]
                            value=mode
                            on_change=move |value: String| {
                                multi.set(value == "multi");
                                selected.set(Vec::new());
                            }
                            aria_label="选择方式"
                        />
                    }
                })}
        </div>
        {move || {
            let multi = multi.get();
            view! {
                <PickerGallery
                    items=items
                    selected=selected
                    multi=multi
                    loading=false
                    uploading=false
                    error=Signal::stored(None::<String>)
                    uploading_preview=Signal::stored(None::<String>)
                    on_pick=on_pick
                />
            }
        }}
        {move || {
            (total.get() > 3)
                .then(|| {
                    view! {
                        <div class="asset-modal-pager">
                            <TablePager
                                page=page
                                total=total
                                per_page=3
                                unit="张"
                                on_change=move |next: i32| {
                                    page.set(next.clamp(1, ((total.get_untracked() + 2) / 3) as i32))
                                }
                            />
                        </div>
                    }
                })
        }}
        {move || {
            multi.get().then(|| view! { <PickerSelectionFooter selected=selected on_pick=on_pick/> })
        }}
    }
}

#[component]
fn UploadDemo(detail: bool) -> impl IntoView {
    let visible = RwSignal::new(false);
    let closing = RwSignal::new(false);
    let items = RwSignal::new(sample_upload_items());
    let generation = RwSignal::new(0_u64);
    let root_class = if detail {
        "showcase-upload-demo showcase-upload-detail"
    } else {
        "showcase-upload-demo"
    };
    view! {
        <div class=root_class>
            {detail
                .then(|| {
                    view! {
                        <div class="showcase-demo-bar">
                            <Button
                                variant=ButtonVariant::Secondary
                                size=ButtonSize::Sm
                                onclick=move |_| visible.set(true)
                            >
                                "打开上传弹窗"
                            </Button>
                            <Button
                                variant=ButtonVariant::Ghost
                                size=ButtonSize::Sm
                                onclick=move |_| {
                                    generation.update(|value| *value += 1);
                                    items.set(Vec::new());
                                }
                            >
                                "空状态"
                            </Button>
                            <Button
                                variant=ButtonVariant::Ghost
                                size=ButtonSize::Sm
                                onclick=move |_| {
                                    generation.update(|value| *value += 1);
                                    items.set(sample_upload_items());
                                }
                            >
                                "代表状态"
                            </Button>
                            <span>"本地演示，示例文件不会上传。"</span>
                        </div>
                    }
                })}
            {move || {
                (!visible.get()).then(|| view! { <UploadDemoPanel items=items generation=generation/> })
            }}
            {detail
                .then(|| {
                    view! {
                        <ModalShell
                            visible=visible
                            closing=closing
                            title="上传素材"
                            panel_class="asset-modal asset-uploader"
                        >
                            <DemoModalHead
                                title="上传素材"
                                on_reset=move |_| {
                                    generation.update(|value| *value += 1);
                                    items.set(sample_upload_items());
                                    closing.set(true);
                                    visible.set(false);
                                }
                                on_close=move |_| {
                                    closing.set(true);
                                    visible.set(false);
                                }
                            />
                            <UploadDemoPanel items=items generation=generation/>
                        </ModalShell>
                    }
                })}
        </div>
    }
}

fn sample_upload_items() -> Vec<UploadItem> {
    [
        ("封面.webp", "1.2 MB", UploadStatus::Done),
        ("相册-02.png", "860 KB", UploadStatus::Uploading),
        ("草稿插图.jpg", "420 KB", UploadStatus::Queued),
        (
            "超大原图.png",
            "8.4 MB",
            UploadStatus::Failed("大小超过 5MB 限制".to_string()),
        ),
    ]
    .into_iter()
    .enumerate()
    .map(|(index, (name, size, status))| UploadItem {
        id: index as u64 + 1,
        name: name.to_string(),
        size: size.to_string(),
        status,
        removing: false,
    })
    .collect()
}

#[component]
fn UploadDemoPanel(items: RwSignal<Vec<UploadItem>>, generation: RwSignal<u64>) -> impl IntoView {
    let on_retry = move |id: u64| {
        let ticket = generation.get_untracked();
        items.update(|list| {
            if let Some(item) = list.iter_mut().find(|item| item.id == id) {
                item.status = UploadStatus::Uploading;
            }
        });
        leptos::task::spawn_local(async move {
            crate::utils::time::sleep_ms(350).await;
            if generation.try_get_untracked() != Some(ticket) {
                return;
            }
            let _ = items.try_update(|list| {
                if let Some(item) = list.iter_mut().find(|item| item.id == id) {
                    item.status = UploadStatus::Done;
                }
            });
        });
    };
    let on_remove = move |id: u64| items.update(|list| list.retain(|item| item.id != id));
    view! {
        <UploadPanel items=items on_retry=on_retry on_remove=on_remove>
            <button
                type="button"
                class="asset-drop w-full border-0"
                on:click=move |_| {
                    items
                        .update(|list| {
                            let next = list.iter().map(|item| item.id).max().unwrap_or(0) + 1;
                            list.push(UploadItem {
                                id: next,
                                name: format!("示例文件-{next}.webp"),
                                size: "540 KB".to_string(),
                                status: UploadStatus::Queued,
                                removing: false,
                            });
                        })
                }
            >
                <UploadDropZoneContent
                    title="加入示例文件"
                    hint="本地状态演示，不读取电脑文件或发起上传。"
                />
            </button>
        </UploadPanel>
    }
}

#[component]
fn RunnerDemo(detail: bool) -> impl IntoView {
    let failed = RwSignal::new(false);
    let host_id = if detail {
        "showcase-runner-detail"
    } else {
        "showcase-runner-card"
    };
    // 详情页直接加载；卡片预览等运行器进入视野后再加载编辑器和终端。
    let near_viewport = crate::hooks::use_near_viewport(host_id.to_string(), "0px");
    let visible = move || detail || near_viewport.get();
    let root_class = if detail {
        "showcase-runner-demo showcase-runner-detail"
    } else {
        "showcase-runner-demo"
    };
    view! {
        <div class=root_class id=host_id>
            {detail
                .then(|| {
                    view! {
                        <div class="showcase-demo-bar">
                            <SegmentedControl
                                items=vec![
                                    SegmentedItem::new("ok".to_string(), "正常输出"),
                                    SegmentedItem::new("error".to_string(), "错误输出"),
                                ]
                                value=Signal::derive(move || {
                                    if failed.get() { "error" } else { "ok" }.to_string()
                                })
                                on_change=move |value: String| failed.set(value == "error")
                                aria_label="输出示例"
                            />
                            <span>"固定输出示例，与编辑后的代码无关；不会执行程序。"</span>
                        </div>
                    }
                })}
            {move || {
                if visible() {
                    let sample = if failed.get() {
                        RunnerExample {
                            stdout: "开始整理 3 个条目…\n".to_string(),
                            stderr: "示例错误：第 2 个条目缺少标题\n".to_string(),
                            status: "退出码: 1 · 输出示例".to_string(),
                            error: "运行错误示例".to_string(),
                        }
                    } else {
                        RunnerExample {
                            stdout: "开始整理 3 个条目…\n✓ 已整理 3 个条目\n".to_string(),
                            stderr: "".to_string(),
                            status: "退出码: 0 · 输出示例".to_string(),
                            error: String::new(),
                        }
                    };
                    // 切换输出示例时整体重建运行器，让它按新的固定输出初始化。
                    view! {
                        <div>
                            <CodeRunner
                                source="print('让想法生根')\n".to_string()
                                language="python".to_string()
                                instance_id=if detail { 3101 } else { 3100 }
                                example_output=sample
                            />
                        </div>
                    }
                        .into_any()
                } else {
                    view! {
                        <div class="showcase-browser-placeholder">
                            "运行器进入视野后加载编辑器和终端…"
                        </div>
                    }
                        .into_any()
                }
            }}
        </div>
    }
}

#[derive(Clone, Copy, PartialEq, Eq)]
enum SqlPreset {
    Posts,
    Comments,
    Metrics,
}

fn sample_sql_result(preset: SqlPreset, detail: bool) -> (SqlResult, &'static str, &'static str) {
    match preset {
        SqlPreset::Posts => {
            let columns = if detail {
                vec![
                    "id".to_string(),
                    "title".to_string(),
                    "slug".to_string(),
                    "published".to_string(),
                    "views".to_string(),
                    "deleted_at".to_string(),
                ]
            } else {
                vec![
                    "id".to_string(),
                    "title".to_string(),
                    "published".to_string(),
                    "views".to_string(),
                ]
            };
            let mut rows = vec![
                if detail {
                    vec![
                        serde_json::json!(108),
                        serde_json::json!("让想法生根"),
                        serde_json::json!("roots-of-thought"),
                        serde_json::json!(true),
                        serde_json::json!(1280),
                        serde_json::Value::Null,
                    ]
                } else {
                    vec![
                        serde_json::json!(108),
                        serde_json::json!("让想法生根"),
                        serde_json::json!(true),
                        serde_json::json!(1280),
                    ]
                },
                if detail {
                    vec![
                        serde_json::json!(107),
                        serde_json::json!("在时间的缝隙里种下文字"),
                        serde_json::json!("writing-in-time"),
                        serde_json::json!(true),
                        serde_json::json!(856),
                        serde_json::Value::Null,
                    ]
                } else {
                    vec![
                        serde_json::json!(107),
                        serde_json::json!("在时间的缝隙里种下文字"),
                        serde_json::json!(true),
                        serde_json::json!(856),
                    ]
                },
                if detail {
                    vec![
                        serde_json::json!(106),
                        serde_json::json!("未命名草稿：微风与山岗"),
                        serde_json::json!("draft-whispering-wind"),
                        serde_json::json!(false),
                        serde_json::json!(42),
                        serde_json::Value::Null,
                    ]
                } else {
                    vec![
                        serde_json::json!(106),
                        serde_json::json!("未命名草稿：微风与山岗"),
                        serde_json::json!(false),
                        serde_json::json!(42),
                    ]
                },
            ];
            if detail {
                rows.push(vec![
                    serde_json::json!(105),
                    serde_json::json!("已归档随笔：初春记事"),
                    serde_json::json!("archived-early-notes"),
                    serde_json::json!(false),
                    serde_json::json!(310),
                    serde_json::json!("2026-09-01 14:20"),
                ]);
            }
            let query = if detail {
                "SELECT id, title, slug, published, views, deleted_at FROM posts ORDER BY id DESC LIMIT 4;"
            } else {
                "SELECT id, title, published, views FROM posts LIMIT 3;"
            };
            let stats = if detail {
                "4 行 · 12ms"
            } else {
                "3 行 · 8ms"
            };
            (
                SqlResult {
                    columns,
                    rows,
                    statement_type: "SELECT".to_string(),
                    ..Default::default()
                },
                query,
                stats,
            )
        }
        SqlPreset::Comments => {
            let columns = vec![
                "id".to_string(),
                "post_id".to_string(),
                "author".to_string(),
                "content".to_string(),
                "is_approved".to_string(),
                "created_at".to_string(),
            ];
            let rows = vec![
                vec![
                    serde_json::json!(34),
                    serde_json::json!(108),
                    serde_json::json!("叶子"),
                    serde_json::json!("风吹过的时候，树叶也在点头。"),
                    serde_json::json!(true),
                    serde_json::json!("2026-09-28 09:12"),
                ],
                vec![
                    serde_json::json!(33),
                    serde_json::json!(108),
                    serde_json::json!("林中客"),
                    serde_json::json!("文字很有力量，期待下一篇更新！"),
                    serde_json::json!(true),
                    serde_json::json!("2026-09-28 09:25"),
                ],
                vec![
                    serde_json::json!(32),
                    serde_json::json!(107),
                    serde_json::json!("待审访客"),
                    serde_json::json!(
                        "这是一条待审核留言，用于验证长文本在表格中的截断展示与点击展开详情效果。"
                    ),
                    serde_json::json!(false),
                    serde_json::json!("2026-09-27 22:40"),
                ],
            ];
            (
                SqlResult {
                    columns,
                    rows,
                    statement_type: "SELECT".to_string(),
                    ..Default::default()
                },
                "SELECT id, post_id, author, content, is_approved, created_at FROM comments ORDER BY id DESC;",
                "3 行 · 9ms",
            )
        }
        SqlPreset::Metrics => {
            let columns = vec![
                "metric".to_string(),
                "category".to_string(),
                "value".to_string(),
                "unit".to_string(),
                "healthy".to_string(),
                "updated_at".to_string(),
            ];
            let rows = vec![
                vec![
                    serde_json::json!("db_pool_active"),
                    serde_json::json!("database"),
                    serde_json::json!(8),
                    serde_json::json!("conns"),
                    serde_json::json!(true),
                    serde_json::json!("2026-09-28 09:50"),
                ],
                vec![
                    serde_json::json!("cache_hit_rate"),
                    serde_json::json!("memory"),
                    serde_json::json!(94.6),
                    serde_json::json!("%"),
                    serde_json::json!(true),
                    serde_json::json!("2026-09-28 09:50"),
                ],
                vec![
                    serde_json::json!("p99_latency"),
                    serde_json::json!("query"),
                    serde_json::json!(18.2),
                    serde_json::json!("ms"),
                    serde_json::json!(true),
                    serde_json::json!("2026-09-28 09:50"),
                ],
                vec![
                    serde_json::json!("disk_usage_warn"),
                    serde_json::json!("storage"),
                    serde_json::json!(88.4),
                    serde_json::json!("%"),
                    serde_json::json!(false),
                    serde_json::json!("2026-09-28 09:50"),
                ],
            ];
            (
                SqlResult {
                    columns,
                    rows,
                    statement_type: "SELECT".to_string(),
                    ..Default::default()
                },
                "SELECT metric, category, value, unit, healthy, updated_at FROM system_metrics;",
                "4 行 · 15ms",
            )
        }
    }
}
#[component]
fn SqlTableDemo(detail: bool) -> impl IntoView {
    let preset = RwSignal::new(SqlPreset::Posts);
    let active = Signal::derive(move || {
        match preset.get() {
            SqlPreset::Posts => "posts",
            SqlPreset::Comments => "comments",
            SqlPreset::Metrics => "metrics",
        }
        .to_string()
    });
    let root_class = if detail {
        "showcase-sql-demo showcase-sql-detail"
    } else {
        "showcase-sql-demo"
    };

    view! {
        <div class=root_class>
            {detail
                .then(|| {
                    view! {
                        <div class="showcase-demo-bar">
                            <SegmentedControl
                                items=vec![
                                    SegmentedItem::new("posts".to_string(), "文章"),
                                    SegmentedItem::new("comments".to_string(), "评论"),
                                    SegmentedItem::new("metrics".to_string(), "系统指标"),
                                ]
                                value=active
                                on_change=move |value: String| {
                                    preset
                                        .set(
                                            match value.as_str() {
                                                "comments" => SqlPreset::Comments,
                                                "metrics" => SqlPreset::Metrics,
                                                _ => SqlPreset::Posts,
                                            },
                                        )
                                }
                                aria_label="示例查询"
                            />
                            <span>"点击任意行展开完整字段。"</span>
                        </div>
                    }
                })}
            // 与系统页 SQL 控制台的结果区同一结构；切换示例时整体重建，表格展开状态随之复位。
            {move || {
                let preset = preset.get();
                let (result, query_text, stats_text) = sample_sql_result(preset, detail);
                let initial_expanded = (detail && preset == SqlPreset::Posts).then_some(0_usize);
                view! {
                    <section class="admin-panel sys-section sys-result">
                        <div class="sys-section-head">
                            <code class="showcase-sql-query">{query_text}</code>
                            <span>{stats_text}</span>
                        </div>
                        <div>
                            <SqlResultTable result=result initial_expanded=initial_expanded/>
                        </div>
                    </section>
                }
            }}
        </div>
    }
}