浏览器翻转 <ExplorerFlip />
一个文件浏览窗口，先显示熟悉的“文件夹”视图；按一次 → 每一行翻成完整的键名或真实路径，右侧再出现一段说明。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 揭晓 · 表面样子和真实样子
- 元件
ExplorerFlip·#explorer-flip- 互動
- build: reveal 时第 1 步翻成键名，第 2 步出现说明；完整状态显示键名
適合
- 说明“看起来是 A，其实是 B”的数据结构（前缀、别名、映射）
- 有 3–6 个具体的条目
不適合
- 只是展示文件列表：用 Screenshot 或 Terminal
- 条目超过 6 个
內容上限
| 1 | path ≤ 32 个拉丁字符 |
| 2 | rows 3–6 行：name ≤ 24 个拉丁字符（以 / 结尾画成文件夹），key ≤ 40 个拉丁字符，size ≤ 10 个字符 |
| 3 | views 各 ≤ 6 字 |
| 4 | note ≤ 60 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
path · 必填 | string | 窗口地址栏 |
rows · 必填 | { name, key, size? }[] | 行 |
views | [string, string] | 两个视图标签 |
note | string | 翻转后出现的说明 |
範例程式碼
<ExplorerFlip kicker="扁平命名空间" title="…" path="s3://admin-created" rows={[{ name: 'Finance/', key: 'Finance/statement1.pdf', size: '1 个对象' }, …]} note="…" />