fix(plugins): 悬浮胶囊细节修正——药丸收窄加高、面板高度自适应、区域头控件收拢

This commit is contained in:
Rick Ye
2026-09-11 16:08:56 +08:00
parent 781a6c8beb
commit a052b6a2c4
3 changed files with 9 additions and 9 deletions
@@ -166,7 +166,7 @@ export function PluginFloatingCapsule({
type="button"
title="插件状态(点击展开)"
onClick={() => setOpen(true)}
className="flex max-w-48 shrink-0 items-center gap-1.5 rounded-full border border-line bg-surface px-2 py-0.5 text-[11px] leading-[18px] text-ink-2 shadow-card transition-colors hover:border-line-strong hover:text-ink"
className="flex h-7 max-w-36 shrink-0 items-center gap-1.5 rounded-full border border-line bg-surface px-2.5 text-[11.5px] text-ink-2 shadow-card transition-colors hover:border-line-strong hover:text-ink"
>
<span
aria-hidden
@@ -185,25 +185,25 @@ export function PluginFloatingCapsule({
return (
<div ref={rootRef} className="relative shrink-0">
<div className="absolute right-0 top-full z-50 mt-1.5 flex w-80 flex-col overflow-hidden rounded-card border border-line bg-surface text-left shadow-overlay">
{/* 固定高度内容区:分组手风琴 + 溢出滚动 */}
<div className="h-[min(480px,58vh)] overflow-y-auto overscroll-contain px-1.5 py-1.5">
{/* 最大高度封顶,高度随内容自适应;溢出才滚动 */}
<div className="max-h-[min(480px,58vh)] overflow-y-auto overscroll-contain px-1.5 py-1.5">
{[...byPlugin.entries()].map(([pluginId, pluginEntries], areaIdx) => {
const plugin = plugins.find((p) => p.manifest.id === pluginId)
const areaCollapsed = collapsedAreas.includes(pluginId)
return (
<div key={pluginId} className={areaIdx > 0 ? 'mt-1 border-t border-line pt-1' : ''}>
{/* 区域头 = 插件名;第一个区域右侧是收回药丸的 ⤡ */}
<div className="flex w-full items-center gap-1 rounded-control pr-0.5">
{/* 区域头 = 插件名;控件只占自身大小(图标/箭头贴标题),第一个区域右侧是收回药丸的 ⤡ */}
<div className="flex items-center gap-0.5 px-1 py-0.5">
<button
type="button"
aria-expanded={!areaCollapsed}
onClick={() => toggleArea(pluginId)}
className="flex min-w-0 flex-1 items-center gap-1.5 rounded-control px-2 py-1.5 text-left transition-colors hover:bg-hover"
className="flex min-w-0 items-center gap-1.5 rounded-control px-1.5 py-1 text-left transition-colors hover:bg-hover"
>
{plugin ? (
<PluginIconValue icon={plugin.manifest.icon} size={14} className="shrink-0 text-ink-2" />
) : null}
<span className="min-w-0 flex-1 truncate text-[12.5px] font-medium text-ink">
<span className="min-w-0 truncate text-[12.5px] font-medium text-ink">
{plugin?.manifest.name ?? pluginId}
</span>
<LuChevronDown
+1 -1
View File
@@ -181,7 +181,7 @@ api.ui.onSettingsAction((key) => {}) // button 条目点击回调(key = 按钮
| 侧栏入口(B1) | manifest icon/name/order;点进插件整页视图 | ✅ |
| 插件整页 Main | 内置组件级 / 外置 renderer 组件 / 外置 iframe;聊天列 display:none 保活 | ✅ |
| 面板 tab(B6) | `panel: true`;SidePanel 零改动承载(内置组件 / 外置 renderer 组件 / iframe) | ✅ |
| 状态胶囊(B2+B3) | `setStatusItem` 数据驱动,**悬浮胶囊**挂 main 区右上角(ZCode 复刻):最小化药丸展示最新一条消息(宿主记录 updatedAt),展开面板头即插件名、`detail` 分组为手风琴(默认收起显示 标题+trailing 徽标,点击展开行)、固定高度滚动、行尾彩色数值与行内深链 | ✅ |
| 状态胶囊(B2+B3) | `setStatusItem` 数据驱动,**悬浮胶囊**挂 main 区右上角(ZCode 复刻):最小化药丸展示最新一条消息(宿主记录 updatedAt),展开面板头即插件名、`detail` 分组为手风琴(默认收起显示 标题+trailing 徽标,点击展开行)、最大高度随内容自适应、行尾彩色数值与行内深链 | ✅ |
| 深链 | `openView(view, params)`(main 侧 IPC 广播 / 页侧桥直通) | ✅ |
| 工具栏按钮(B5) | `registerToolbarButton` 数据已通,Composer 工具行渲染 | ⏳ 下版本 |
| 聊天流富组件(B4) | ```类型``` 围栏块 → 宿主元组件(data-table/stat-grid/step-list/kv-card) | ⏳ 下版本 |
+1 -1
View File
@@ -7,7 +7,7 @@
所有插件**共用一个悬浮胶囊**,悬浮于 main 区域右上角(侧面板打开时自动左移让位;ZCode 复刻)。插件照常 `setStatusItem`,宿主记录每次写入时间,两种形态:
- **最小化药丸**:展示「最新的消息」(全部插件中 `updatedAt` 最新的一条:tone 点 + 插件图标 + 文本;多于一条时带总数角标),点击展开面板;
- **展开面板**:面板头就是插件名(第一个区域的右侧是收回药丸的 ⤡);多个插件时各占一个区域、区域头可收起/展开(记忆跨启动)。区域内 `detail` 的**分组是手风琴**——默认收起只显示「分组标题 + 行尾徽标」,点击展开 rows(ZCode 式「计划 ›」);无标题分组直接平铺。面板高度固定,内容太多向下滚动;点击面板外部 / Esc 收回药丸。
- **展开面板**:面板头就是插件名(第一个区域的右侧是收回药丸的 ⤡);多个插件时各占一个区域、区域头可收起/展开(记忆跨启动)。区域内 `detail` 的**分组是手风琴**——默认收起只显示「分组标题 + 行尾徽标」,点击展开 rows(ZCode 式「计划 ›」);无标题分组直接平铺。面板最大高度封顶(min(480px,58vh)),高度随内容自适应,溢出才滚动;点击面板外部 / Esc 收回药丸。
```js
// ① 纯展示(只出现在药丸/区域行)