---
description: "行只有「主标签 + 次要说明」、不需要成列对齐时，别上表格——用紧凑列表：首部头像、主次两行文本、尾部状态和时间，一行一条塞得更密。人员、动态、通知流都是它。蓝本给两个变体：lite（平铺 + 本地搜索）和 lazy（分区首次展开才取数）"
---

# 紧凑列表（密集行 + 懒加载分区）

行只有「主标签 + 次要说明」、不需要成列对齐时，别上表格——用紧凑列表：首部头像、主次两行文本、尾部状态和时间，一行一条塞得更密。人员、动态、通知流都是它。蓝本给两个变体：lite（平铺 + 本地搜索）和 lazy（分区首次展开才取数）。

<iframe src="/skills/dashboard/assets/demo-list-view.html"
        style="width:100%;height:600px;border:1px solid #8884;border-radius:10px"
        loading="lazy" title="形状 demo：紧凑列表"></iframe>

试这几下：

- 平铺模式搜索标题 / 人名 / 内容——即时过滤，无结果有空态行
- 列表底部**加载更多**——先出骨架行再补一批（模拟增量取数）
- 切到**按类型分组**——分区首次展开先骨架屏后出行；收起再展开是即时的（已缓存）
- 点任意行弹详情，**前往处理**用 toast 模拟跳转

## 规矩

- **密度即卖点**：紧凑行、次要文字弱化、没有任何表格骨架——无表头、无列线。行结构固定：头像/图标 + 主行 + 次行 + 尾部 meta
- **空态和加载态显式处理**：搜索无结果给空态行；lazy 变体首次展开给骨架屏，取到后缓存、不重复取。demo 用 `setTimeout` 模拟取数，真实版换成该分区的列表查询（`useQuery`）
- **影响结果集的搜索/筛选，真实资源要进 URL**；demo 和蓝本捆绑示例一样放局部 `useState`
- **变体二选一**：lite 平铺给短列表（本地过滤就够），lazy 分区给量大且天然分组的数据。真实版都从 `Repository` 经 `useResourceList`/`useQuery` 驱动，替掉内存数组

> 蓝本：`add-list-view.md`[^add-list-view]（open-dashboard @ `aa9815f`，MIT，Invariants 已消化进上面「规矩」）

??? abstract "demo 源码：`assets/demo-list-view.html`（自包含、未压缩）"

    ```html
    --8<-- "skills/dashboard/assets/demo-list-view.html"
    ```

[^add-list-view]: [`add-list-view.md`](https://github.com/ahpxex/open-dashboard/blob/aa9815f426e9520841c4aa15a341bfd9f866091f/.claude/skills/add-component/references/add-list-view.md)，2026-07-28 读。