QueueLane
queue-lane优先级泳道队列板 · 横向泳道 + 道头聚合队列指标(深度/平均等待/吞吐) · 只读队列监视器(区别 Kanban 拖拽工作流·FIFO+aging) + maxVisible 折叠「还有 N 条」 + onItemClick · groupByLane 保序分组纯函数带单测 · 任务总线/优先级队列(零依赖)
用法
基础用法
lanes 定义泳道（id/label/tone 色条/meta 指标），items 按 laneId 分组，道内顺序即 FIFO。道头缺省渲染条数 + meta。
P0 紧急2 条均等 0.4s
- 实时风控审批#1Sonnet 4.6等 0.2s
- 支付异常诊断#2Opus 4.7等 0.5s
P1 高3 条均等 1.2s
- 工单意图分类#1Haiku 4.5等 0.9s
- 代码评审建议#2Sonnet 4.6等 1.4s
- 合同条款抽取#3Opus 4.7等 1.8s
P2 普通4 条均等 3.5s
- 周报摘要生成#1Haiku 4.5等 3.1s
- 图像内容审核#2DeepSeek V4等 4.0s
- FAQ 向量召回#3Haiku 4.5等 2.7s
- 翻译批处理#4DeepSeek V4等 5.2s
P3 低2 条均等 12s
- 历史日志归档分析#1Haiku 4.5等 11s
- 离线知识库重建#2DeepSeek V4等 18s
tsx
<QueueLane
lanes={[
{ id: "p0", label: "P0 紧急", tone: "var(--color-chart-3)", meta: "均等 0.4s" },
{ id: "p1", label: "P1 高", tone: "var(--color-chart-4)", meta: "均等 1.2s" },
{ id: "p2", label: "P2 普通", tone: "var(--color-primary)", meta: "均等 3.5s" },
]}
items={jobs}
renderItem={(job, i) => <JobCard job={job} index={i} />}
/>超长队列折叠
maxVisible 限制每道直显条数，超出折叠为「还有 N 条」。
P0 紧急2 条均等 0.4s
- 实时风控审批#1Sonnet 4.6等 0.2s
- 支付异常诊断#2Opus 4.7等 0.5s
P1 高3 条均等 1.2s
- 工单意图分类#1Haiku 4.5等 0.9s
- 代码评审建议#2Sonnet 4.6等 1.4s
- 合同条款抽取#3Opus 4.7等 1.8s
P2 普通4 条均等 3.5s
- 周报摘要生成#1Haiku 4.5等 3.1s
- 图像内容审核#2DeepSeek V4等 4.0s
- FAQ 向量召回#3Haiku 4.5等 2.7s
- 翻译批处理#4DeepSeek V4等 5.2s
P3 低2 条均等 12s
- 历史日志归档分析#1Haiku 4.5等 11s
- 离线知识库重建#2DeepSeek V4等 18s
tsx
<QueueLane
lanes={lanes}
items={jobs}
maxVisible={4}
renderItem={(job, i) => <JobCard job={job} index={i} />}
/>点击下钻
卡片默认只读；传 onItemClick 后卡片可点击 / 键盘可达（Enter / Space），用于查看详情，不改变队列顺序。
文本生成2 条吞吐 42/min
- 营销文案改写#1Sonnet 4.6等 0.8s
- 邮件草拟#2Haiku 4.5等 1.1s
代码2 条吞吐 18/min
- 单测补全#1Sonnet 4.6等 1.6s
- SQL 优化建议#2Opus 4.7等 2.2s
图像1 条吞吐 9/min
- 海报生成#1图像编排器等 4.5s
检索增强2 条吞吐 65/min
- 政策问答召回#1Haiku 4.5等 0.3s
- 工单相似检索#2Haiku 4.5等 0.5s
tsx
<QueueLane
lanes={lanes}
items={jobs}
onItemClick={(job) => openDetail(job.id)}
renderItem={(job, i) => <JobCard job={job} index={i} />}
/>何时用
监视「按优先级/分类划分的多条有序队列」时用——任务总线、调度队列、按 P0-P3 排队。队列顺序由调度器决定（FIFO），用户不能拖拽改序；要人工拖拽改状态/改顺序的工作流看板用 Kanban。QueueLane 是只读监视器，胜在道头能聚合队列指标。
导入
ts
import { QueueLane, groupByLane } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| lanes* | QueueLaneDef[] | — | 泳道定义，顺序即展示顺序。{id, label, tone?, meta?}；tone 为 CSS 颜色/token 变量，原样写入 inline style 不做枚举映射 |
| items* | T[] | — | 受控队列项数组，按 laneId 分组，道内顺序 = 数组原始顺序（FIFO）。每项须含 {id, laneId}；laneId 未命中任一 lane 则该项被丢弃 |
| maxVisible | number | — | 每道最多直显条数，超出折叠为「还有 N 条」。缺省不折叠（全显） |
| orientation | "horizontal" | "vertical" | "horizontal" | 泳道排布方向。horizontal：泳道横向并列，每道竖向排队 |
| className | string | — | 外层类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onItemClick | (item: T) => void | 点击队列项回调（卡片只读，仅查看/下钻，不改队列顺序） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| renderItem* | (item: T, index: number) => ReactNode | 渲染函数：渲染单个队列项；index 为该项在所属道内的队列位次（0 = 队首） |
| renderLaneHeader | (lane: QueueLaneDef, items: T[]) => ReactNode | 渲染函数：自定义道头（拿该道队列做指标聚合）。缺省渲染 label + 条数 + lane.meta |
禁忌 / 坑
- items 是受控、FIFO 顺序即数组顺序，组件本身不排序也不允许拖拽——排序/aging 逻辑在调用方完成后再喂进来。
item.laneId必须命中某条 lane.id，否则该项被静默丢弃（不报错）；新增 lane 时记得同步 laneId 映射。- lane.tone 原样写入 inline style，可用任意 CSS 颜色；若用 token 变量须带
--color-前缀，见 [[hulian-token-color-var-needs-color-prefix]]。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
P0 紧急2 条均等 0.4s
- 实时风控审批#1Sonnet 4.6等 0.2s
- 支付异常诊断#2Opus 4.7等 0.5s
P1 高3 条均等 1.2s
- 工单意图分类#1Haiku 4.5等 0.9s
- 代码评审建议#2Sonnet 4.6等 1.4s
- 合同条款抽取#3Opus 4.7等 1.8s
P2 普通4 条均等 3.5s
- 周报摘要生成#1Haiku 4.5等 3.1s
- 图像内容审核#2DeepSeek V4等 4.0s
- FAQ 向量召回#3Haiku 4.5等 2.7s
- 翻译批处理#4DeepSeek V4等 5.2s
P3 低2 条均等 12s
- 历史日志归档分析#1Haiku 4.5等 11s
- 离线知识库重建#2DeepSeek V4等 18s
<QueueLane
lanes={[
{ id: "p0", label: "P0 紧急", tone: "var(--color-chart-3)", meta: "均等 0.4s" },
{ id: "p1", label: "P1 高", tone: "var(--color-chart-4)" },
]}
items={queue}
maxVisible={4}
onItemClick={(job) => openDetail(job.id)}
renderItem={(job, i) => <JobCard job={job} rank={i + 1} />}
/>