---
description: "按状态分列的板：卡片所在列就是它的状态，把卡拖到别的列 = 变更状态。任务、商机、工单这类有明确阶段流转（管道/分诊）的数据，状态是主轴时用它"
---

# 看板

按状态分列的板：**卡片所在列就是它的状态**，把卡拖到别的列 = 变更状态。任务、商机、工单这类有明确阶段流转（管道/分诊）的数据，状态是主轴时用它。

<iframe src="/skills/dashboard/assets/demo-kanban.html"
        style="width:100%;height:560px;border:1px solid #8884;border-radius:10px"
        loading="lazy" title="形状 demo：看板"></iframe>

试这几下：

- **拖**一张卡到别的列 —— 悬停列会高亮接收区，放手即变更状态（toast 确认）
- 不方便拖就点卡片上的 **◀ ▶** —— 键盘也可达，效果等价
- 列头实时汇总本列**单数与金额**

## 规矩

- **一个状态枚举驱动列**；移动卡片必须持久化新状态 —— 真实版在放手时乐观调用 `Repository.update(cardId, { status: to })`，失败回滚 + toast
- 指针与键盘**双可达**：蓝本用 dnd-kit（指针 + 键盘 + 列内排序 + 拖拽浮层），demo 用平台原生 HTML5 DnD + 箭头按钮近似最小实现；要列内排序、插入间隙这些完整体验，用蓝本模板
- 记录带排序/位置字段时，列内顺序也要持久化

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

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

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

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