#任务工作区

任务工作区把标题、按时间排序的记录、底部输入器和可选产物检查器放在同一个有边界的应用区域中。

npm install @a3s-lab/ui@0.4.1

<section class="task-workspace">
  <header class="workspace-header">
    <button type="button" data-task-inspector-trigger>打开文件</button>
  </header>
  <div data-task-body>
    <main data-task-main>
      <section class="agent-transcript">...</section>
      <form class="agent-composer">...</form>
    </main>
    <aside id="task-files" class="task-pane" data-task-inspector>...</aside>
  </div>
</section>

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

#用法

<section class="task-workspace">
  <header class="workspace-header">
    <button type="button" data-task-inspector-trigger>打开文件</button>
  </header>
  <div data-task-body>
    <main data-task-main>
      <section class="agent-transcript">...</section>
      <form class="agent-composer">...</form>
    </main>
    <aside id="task-files" class="task-pane" data-task-inspector>...</aside>
  </div>
</section>

#参数

#JavaScript API

导入 @a3s-lab/ui/all，或者先导入 @a3s-lab/ui/runtime，再导入 @a3s-lab/ui/task-workspace。控制器只初始化一次，并在根元素上提供 openInspector()、closeInspector()、toggleInspector() 与 refresh()。状态变化后会派发 a3s:task-inspector-change，详情为 { open, mode, source }。

#状态和变体

低于 900 像素时，检查器退出网格，只在 data-inspector="open" 时覆盖显示。低于 520 像素时改为底部浮层。控制器会为关闭状态设置 inert 与 aria-hidden="true"，打开时移除这些属性，并支持 Escape、遮罩关闭和焦点归还。所有状态下任务记录与输入器的 DOM 顺序保持不变。产品若需要在所有宽度彻底移除检查器，可使用 data-inspector="hidden"。

#无障碍

为任务记录、检查器和控件提供名称。关闭检查器时把焦点还给触发器。只播报有边界的执行状态变化，不把整段任务记录设为实时区域。