feat(plugins): 悬浮状态胶囊(B3 落地,复刻 ZCode 药丸⇄面板二态)
This commit is contained in:
@@ -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: '进行中', // 分组标题可省略
|
||||
|
||||
Reference in New Issue
Block a user