Imported from noconfuse/toolkitPage (AGENTS.md). Install upstream with npx skills add noconfuse/toolkitPage. Copyright stays with the author.

Toolkit Page — 项目约定

工具页面统一布局约束（强制）

所有工具页面必须遵循以下两列布局，通过通用骨架 ToolWorkbench 实现：

┌─ 外壳（可拖拽上传）────────────────────────────────────────┐
│ ┌─ 左主区（flex:1，占满一屏）──────────────┐┌─ 右栏（常驻）──┐ │
│ │  工具名称 + 描述 ⓘ help 提示 ││  ① 配置属性面板（表单控件）│ │
│ │  资源操作区（flex:1 占满剩余空间）       ││  ② 资源信息（大小/尺寸，处理前/后）│ │
│ │  （画布 / 列表 / 空状态）                ││  ③ 工作流胶囊（有需要）│ │
│ │  处理进度条（处理阶段）                  ││                  │ │
│ │  功能按钮栏（贴底）                      ││                  │ │
│ └─────────────────────────────────────────┘└──────────────────┘ │
└────────────────────────────────────────────────────────────────┘

左列（自上而下）

1. 工具名称（help 提示）：标题 + 描述，标题右侧 info 图标（usage 槽位）悬停弹出说明/快捷键。
2. 资源操作区：children（有内容时）或空状态拖拽区（emptyState）。必须 flex: 1 占满左栏剩余空间，保证下方操作栏不被顶到页面中间。
3. 处理进度条：处理中显示 LinearProgress 与阶段说明，放在 actions 槽位顶部。
4. 功能按钮栏：主操作按钮（如"转换为 PDF"）固定在左栏底部，使用 actions 槽位。禁止放在右栏或页面中部——即使内容不足一屏，按钮栏也必须贴底。

右列（自上而下）

1. 配置属性面板：表单控件（config 槽位），如方向切换、参数设置。
2. 资源信息：resource 槽位（SidebarResourceInfo），显示名称/大小/尺寸，处理前 → 处理后。
3. 工作流胶囊：flow 槽位（FlowPill），有跨工具流转需求时才显示。

使用说明不在右栏展示：说明/快捷键内容统一放在左列标题旁的 usage（help 提示 tooltip）。

实现要点

• 左主区是 flex column：头部固定 → 资源操作区 flex:1, minHeight:0 → actions 贴底（flexShrink: 0）。
• 右栏常驻：未上传内容时也渲染（显示"尚未上传资源"占位），边框线不消失。
• 右栏各区块用细分隔线隔开（首个可见区块无顶部分割线）。
• 左右两栏 padding 保持一致（COLUMN_PAD）。
• 移动端（< lg）右栏折叠为左栏下方上下排列。

ToolWorkbench 槽位速查