任务计划

任务计划用有限步骤展示可观察的工作顺序，不把内部推理直接暴露为界面文案。计划创建、步骤流转、持久化与取消由宿主应用负责。

发布计划

四个步骤已完成两个

进行中

检查包变更
审阅导出入口和发布元数据。
已完成
运行聚焦检查
验证包与文档契约。
已完成
审阅界面状态
检查窄屏、深色和键盘行为。
进行中
准备交付
汇总已验证结果与剩余风险。
待处理

安装Terminal

npm install @a3s-lab/ui@0.4.0

<section class="task-plan" data-state="active" data-variant="plain">
  <header>
    <h2>执行计划</h2>
    <span data-plan-status>进行中</span>
  </header>
  <ol>
    <li class="plan-step" data-state="active" aria-current="step">...</li>
  </ol>
</section>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

<section class="task-plan" data-state="active" aria-labelledby="plan-title">
  <header>
    <h2 id="plan-title">发布计划</h2>
    ...
  </header>
  <ol>
    <li class="plan-step" data-state="complete">...</li>
    <li class="plan-step" data-state="active" aria-current="step">...</li>
  </ol>
  <footer>...</footer>
</section>

参数

API	取值	用途
`data-state`	`draft`、`active`、`paused`、`complete`、`error`	计划生命周期
`data-variant`	`plain`	移除计划自身表面，供检查器或会话分区直接承载
直接子 `<ol>`	必须	有序计划步骤
`data-plan-status`	推荐	可见生命周期文案
原生进度条语义	可选	有界总进度

状态与变体

暂停执行时保留已完成步骤和当前步骤。单个步骤失败时优先在该计划步骤上标记，只有整个计划无法继续时才使用计划级错误。父级表面已经拥有边界时才使用 data-variant="plain"；它移除任务计划的边框和行内边距，但不改变步骤语义。

<section class="task-plan" data-state="active" data-variant="plain">
  <header>
    <h2>执行计划</h2>
    <span data-plan-status>进行中</span>
  </header>
  <ol>
    <li class="plan-step" data-state="active" aria-current="step">...</li>
  </ol>
</section>

无障碍

使用标题命名整个区域，并且只出现一个 aria-current="step"。不显示可视进度条时仍需提供文本进度。

#任务计划

#用法

#参数

#状态与变体

#无障碍

任务计划

用法

参数

状态与变体

无障碍