工具导航与动态面板

职责与结构

工具导航提供节点选择器、模板库和节点库三类可随时关闭的内容入口。节点选择器添加五类基础节点，模板库提供组合流程，节点库提供已命名、已保存演示配置的节点。左侧使用居中悬浮工具栏，底部面板向上展开；图库先选择预览，再通过明确“使用”操作加入本地示例画布。AI 节点承担处理能力，不另设 AI 对话入口。

工具按钮组 + 当前内容面板 + 主工作区。每个工具按钮具有稳定 key、图标、可访问名称、唯一面板关联与展开状态。节点面板仅包含五类图标标题按钮。模板库提供搜索和示例状态，节点库提供搜索与节点类型筛选。图库复用共享资源预览卡片：名称及类型在上，内嵌圆角预览在下；媒体左下用蓝色胶囊显示“节点 · N”，右下放置44px圆形玻璃“使用”箭头，不附加简介或可见操作文字。预览与使用为相邻独立按钮。不同工具保留各自的 DOM、输入和滚动位置。

变体与 Tokens

变体使用规则
项目	规范
左侧悬浮	工具栏在左侧保留的 72px 操作内边距中垂直居中，采用独立玻璃胶囊，不拉成整高侧栏。宽容器为 320px 内容面板及 12px 间隙占位，主内容按剩余宽度重排；容器不超过 760px 时，面板改为覆盖。
节点快捷添加	两种布局均按基础节点、系统节点、数据提取、AI节点、结果输出节点排列。每个按钮只显示图标和标题，点击后直接加入当前本地示例画布；不附加搜索、状态选择或图片。
底部图文图库	底部工具栏固定在所属画布内，宽面板向上覆盖。模板库和节点库采用图片封面样式，按面板宽度排列为横向卡片图库；每行最多四张卡片，内容按自身高度排布并在图库内滚动，窄容器自然减少列数。卡片先显示名称与类型，再显示填满内嵌媒体区的照片、蓝色数量胶囊和白色箭头按钮。当前复用资源页的工厂演示照片，实际接入时可为各资源配置自己的封面。节点选择器保持五个紧凑按钮。不改变画布尺寸，不随内部场景缩放或滚走。
共享资源预览卡片	模板库和节点库共同使用 resourcePreviewCardHTML，沿用共享液态玻璃材质、名称与类型头部、内嵌预览和44px圆形箭头操作。标题以16–24px半粗体随卡宽适配，副标题为12px；头部及外壳不固定高度，长标题自然增高。左下引用 .status-label 蓝色胶囊显示“节点 · N”，库项为1、模板为3，不使用价格或虚构运行状态。箭头无可见操作文字，具备包含“使用”和资源名称的可访问名称与原生提示。
已配置节点库	节点库保存基础、系统、数据提取、AI、结果输出五类共11个命名节点。系统类展示 ERP、CRM、MOM；其他类型展示条件分支、字段映射、销售与生产数据提取、客服回复、异常分析、审核报告输出和消息通知。左侧面板以图示展示配置，底部图库以照片作资源封面；配置、来源和筛选字段不依赖封面内容，加入画布后的图标按节点类型取得。全部为本地已保存配置示例，不展示运行或真实连接状态。
瞬时／持续内容	节点选择器作为瞬时选择面板，外部点击可关闭；模板库和节点库作为持续内容，外部点击保留。同一入口可再次点击关闭，所有面板都有明确关闭按钮。
图库控制与状态	模板库在标题下提供搜索和 ready / loading / empty / error / denied 示例状态，失败可重试。节点库在同一区域提供搜索与类型筛选，类型为全部及五类节点；搜索词与类型条件取交集，空结果明确说明可调整搜索或类型。控制区按容器宽度分配或换行，标签供辅助技术读取。节点库不附加模拟状态占位，节点快捷添加不设置这些控件。
当前、焦点与不可用	加号入口使用共享普通图标按钮，关闭时为白色表面，展开时继承共享科技蓝状态；其余工具入口使用 ghost。悬停、按下和键盘焦点复用按钮规范。仅初始化标记控件解除 disabled，真实不可用卡片的封面与“使用”按钮均保持禁用并提供原因。

左侧保留72px操作内边距，悬浮工具栏的命中区域为 --control-lg（44px），侧向内容面板宽320px；底部图库按面板容器宽度响应，最多四列、窄容器减列并保持内部滚动。卡片尺寸、媒体比例及文字层级引用共享 resource-preview-card.css，不在工具面板另造材质。圆形“使用”箭头组合 .btn.icon-only.lg.on-media，统一44px尺寸，继承共享圆角、玻璃反光和各态；左下数量复用 .status-label。标题16–24px、--weight-semibold，副标题12px，头部及外壳高度由内容决定，正常HTML文字不按缩略图比例缩小。图标为 --icon-md；面板表面、边框、模糊与阴影使用 --surface-pane、--glass-border、--glass-blur、--shadow-2。进入与退出通过 --tool-panel-duration 引用共享 --motion-panel（260ms），并使用 --ease，减少动效时取消位移过渡。

交互与状态示例

两个实例独立操作。节点选择器点击即添加；模板库提供三个流程和状态演示，节点库提供11个已命名节点，可结合搜索与五类筛选查找。图库封面只选择，点击“使用”才加入本例画布；节点库同时保留类型与演示配置。左侧工具栏居中悬浮，底部图库向上覆盖；示例不连接系统或发送消息。

左侧悬浮工具栏

宽容器推移 · 窄容器覆盖

工作空间 · 草案画布

客户服务流程

本地示例

从消息到回复3 个示意步骤

接入消息
读取客户请求与服务记录。
01
检索知识
找到相关资料与处理规则。
02
生成回复草案
由人工确认后继续处理。
03

留给业务内容的空间

工具栏悬浮在左侧保留内边距中；宽容器仅为内容面板占位，流程步骤按剩余宽度重排。

节点选择器已打开。此处操作只影响本页示例。

交互与无障碍

按钮组允许全部关闭，不使用 tablist。点击入口打开或切换面板，点击当前入口再次关闭；方向键按所在布局在工具按钮间移动，Home / End 到首尾，Enter / Space 激活。打开时聚焦内容首个明确目标；关闭前把内部焦点移回对应入口，再隐藏与 inert。Escape 只关闭当前实例面板。面板持久挂载，切换和关闭保留搜索词、类型筛选、选中项与滚动位置；模板状态切换不删除已有输入。节点按钮直接加入本例画布。模板库和节点库的封面仅选择并同步 aria-pressed，“使用”按钮才追加本例画布步骤与计数；节点库使用同时传递该节点的类型和保存配置。禁用项不可选择或使用。各实例默认独立，仅显式同组时互斥；所有演示动作只修改当前本地示例，不连接 ERP、CRM、MOM 或模型，也不发送通知、发布业务数据。

接入约定

接入参数与事件
项目	规范
标记与状态	根为 data-tool-panels，placement 为 left / bottom，mode 为 push / overlay；active 为当前 key，逻辑开关使用 data-tool-open，过渡阶段由 panel 的 opening / open / closing 管理。
关联与关闭策略	触发器 data-tool-trigger 与 panel data-tool-panel 使用同一 key；aria-controls 指向唯一 ID，aria-expanded 同步。panel 使用 region、aria-labelledby 与 tabindex=-1；data-tool-dismiss 为 transient / persistent。
初始化与生命周期	window.initToolPanels(host=document) 幂等初始化；getToolPanelController(root) 获取控制器，其 open / close / toggle / destroy 管理该实例。只启用 data-tool-init-disabled 控件；destroy 清理实例监听和定时器；业务观察器由适配器清理。
公开事件	toolpanelchange 冒泡并提供 detail.previous / active / reason；toolpanelclose 提供 detail.key / reason。示例使用提供 toolpaneluse，其 detail 包含 key / kind / label，kind 为 nodes / templates / library。节点库使用额外提供 nodeType 与 config。业务层通过事件接入动作，不重建面板。
内容与分组	图库 article 使用 data-tool-result / search，搜索使用 data-tool-filter，空结果使用 data-tool-empty。节点库 select 使用 data-tool-type-filter，其 all / basic / system / extract / ai / output 与搜索取交集；data-tool-result-count 显示当前结果数。封面 data-tool-choice 只选择；独立 data-tool-use 执行使用，两者各带可读 data-tool-label。节点 data-tool-choice 直接添加。data-tool-group 可声明互斥分组，未声明时不影响其他实例。
命名节点配置	节点库 article 的 data-tool-type 保存五类节点类型，data-tool-config 保存经 HTML 转义的 JSON，包含非空 title / summary / source / operation 演示字符串。封面与使用按钮的 data-tool-node-type 保持一致，data-tool-node-type-label 为中文类型名。source 是显示用演示来源，不包含系统地址或凭据。
资源预览卡片复用	scripts/resource-preview-card.mjs 的 resourcePreviewCardHTML 接收 title / subtitle / nodeCount / mediaHTML / mediaFit 和三个 attributes 对象。nodeCount 为整数，节点库传1、模板传3；底部图库使用cover照片，左侧使用contain图示。图库数据的cover包含本地src及真实width/height，可按资源替换，不进入业务config。article 保留筛选与配置属性，媒体内预览及44px圆形动作按钮分别保留 data-tool-choice / use，二者为兄弟，不嵌套按钮。共享 renderer 负责属性转义、数量胶囊、结构和箭头，不绑定工具业务事件。
状态与图文图库	模板控制区使用 data-tool-preview-state，feedback / feedback-message / retry 展示模拟状态；节点库不输出这些控件。body 仅保留结果、空结果与脚注。resource-preview-card__visual 中的缩略图由卡片名称与类型提供可访问说明，所有 img 使用空 alt，左侧节点装饰 SVG 使用 aria-hidden，避免重复播报。底部使用本地演示图片封面，不嵌入文字或配置SVG；左下以蓝色胶囊显示“节点 · N”，来源继续保存在搜索与配置字段，不增加介绍。data-tool-canvas-flow 与 data-tool-canvas-count 标记本地示例步骤和完整计数文字。业务接入替换封面、数据及适配器，并保留生命周期和焦点规则。

查看最小使用示例

<div class="tool-panels" data-tool-panels data-tool-placement="bottom"
  data-tool-mode="overlay" data-tool-state="closed" data-tool-active="">
  <div class="tool-panels__layout">
    <div class="tool-panels__rail" role="group" aria-label="选择工具">
      <button class="btn icon-only lg toggle tool-panels__trigger" type="button"
        data-tool-trigger="nodes" aria-controls="example-nodes-panel"
        aria-label="节点选择器" aria-expanded="false"
        disabled data-tool-init-disabled>…</button>
    </div>
    <div class="tool-panels__panels">
      <section class="tool-panel" id="example-nodes-panel" role="region"
        data-tool-panel="nodes" data-tool-dismiss="transient"
        aria-labelledby="example-nodes-title" tabindex="-1" hidden>
        <header class="tool-panel__header">
          <h4 id="example-nodes-title">节点选择器</h4>
          <button class="btn ghost icon-only tool-panel__close" type="button"
            data-tool-close aria-label="关闭节点选择器"
            disabled data-tool-init-disabled>×</button>
        </header>
        <div class="tool-panel__body" data-tool-body>
          <div class="tool-panel__results tool-panel__results--nodes">
            <button class="btn ghost button-option tool-panel__choice" type="button"
              data-tool-choice="basic" data-tool-label="基础节点"
              aria-label="添加基础节点" aria-pressed="false"
              disabled data-tool-init-disabled>
              <span class="tool-panel__choice-symbol">…</span>
              <span class="tool-panel__choice-copy"><strong>基础节点</strong></span>
            </button>
          </div>
        </div>
      </section>
    </div>
    <section class="tool-panels__main" aria-label="主工作区">
      <span data-tool-canvas-count>0 个示意步骤</span>
      <ol class="tool-panels__flow" data-tool-canvas-flow></ol>
    </section>
  </div>
</div>
// 同时引用共享 styles.css、tool-panels.css 与 tool-panels.js。
window.initToolPanels(root);
const controller = window.getToolPanelController(root);
controller.open("nodes", {focus:true, reason:"trigger"});
controller.close({reason:"close-button"});
// 页面卸载时 controller.destroy()；每个实例及面板使用唯一 ID。

维护位置：scripts/tool-panels.mjs；示例行为：scripts/tool-panels.js。组合应用见本页末尾引用。