feat(plugins): 悬浮状态胶囊(B3 落地,复刻 ZCode 药丸⇄面板二态)

This commit is contained in:
Rick Ye
2026-09-11 15:49:50 +08:00
parent 1326f9b672
commit ad16ed7239
8 changed files with 315 additions and 200 deletions
+8 -5
View File
@@ -2,12 +2,15 @@
> 前置:[L0](./01-hello-plugin.md)。宿主开放 5 个数据驱动 UI 槽位 + 1 个 iframe 页形态。**数据驱动**意味着插件只提交数据,渲染与样式由宿主统一负责——这是 UI 一致性的第一道保障(自定义视觉见 [DESIGN.md](./DESIGN.md) 与 [L4](./05-renderer-components.md))。
## 1. 状态胶囊(TitleBar 顶部)
## 1. 状态胶囊(悬浮胶囊:最小化药丸 ⇄ 展开面板)
顶栏胶囊是**紧凑状态条**,点击行为三档:
所有插件**共用一个悬浮胶囊**(标题栏右侧,ZCode 复刻)。插件照常 `setStatusItem`,宿主记录每次写入时间,两种形态:
- **最小化药丸**:展示「最新的消息」(全部插件中 `updatedAt` 最新的一条:tone 点 + 插件图标 + 文本;多于一条时带总数角标),点击展开面板;
- **展开面板**:每个插件一个**专属区域**——区域头(插件图标 + 名称 + 条目数)可收起/展开(记忆跨启动),区域内是该插件的条目与详情行;面板高度固定,内容太多向下滚动;点击面板外部 / Esc 收回药丸。
```js
// ① 纯展示
// ① 纯展示(只出现在药丸/区域行)
api.ui.setStatusItem('conn', { text: '已连接 · 3 任务' })
// ② 点击深链
@@ -18,12 +21,12 @@ api.ui.setStatusItem('conn', {
openView: { view: 'my-plugin' } // 点击跳到插件整页视图
})
// ③ 点击展开详情弹层(声明了 detail 时优先于 openView)
// ③ 携详情(声明 detail 时区域行下展开分组明细)
api.ui.setStatusItem('tasks', {
text: '任务 2/5',
tone: 'accent',
detail: {
title: '任务概览', // 缺省用胶囊文本
title: '任务概览', // 面板中省略(区域头已是插件名)
sections: [
{
title: '进行中', // 分组标题可省略