fix(plugins): 悬浮胶囊细节修正——药丸收窄加高、面板高度自适应、区域头控件收拢
This commit is contained in:
@@ -166,7 +166,7 @@ export function PluginFloatingCapsule({
|
|||||||
type="button"
|
type="button"
|
||||||
title="插件状态(点击展开)"
|
title="插件状态(点击展开)"
|
||||||
onClick={() => setOpen(true)}
|
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
|
<span
|
||||||
aria-hidden
|
aria-hidden
|
||||||
@@ -185,25 +185,25 @@ export function PluginFloatingCapsule({
|
|||||||
return (
|
return (
|
||||||
<div ref={rootRef} className="relative shrink-0">
|
<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="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) => {
|
{[...byPlugin.entries()].map(([pluginId, pluginEntries], areaIdx) => {
|
||||||
const plugin = plugins.find((p) => p.manifest.id === pluginId)
|
const plugin = plugins.find((p) => p.manifest.id === pluginId)
|
||||||
const areaCollapsed = collapsedAreas.includes(pluginId)
|
const areaCollapsed = collapsedAreas.includes(pluginId)
|
||||||
return (
|
return (
|
||||||
<div key={pluginId} className={areaIdx > 0 ? 'mt-1 border-t border-line pt-1' : ''}>
|
<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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
aria-expanded={!areaCollapsed}
|
aria-expanded={!areaCollapsed}
|
||||||
onClick={() => toggleArea(pluginId)}
|
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 ? (
|
{plugin ? (
|
||||||
<PluginIconValue icon={plugin.manifest.icon} size={14} className="shrink-0 text-ink-2" />
|
<PluginIconValue icon={plugin.manifest.icon} size={14} className="shrink-0 text-ink-2" />
|
||||||
) : null}
|
) : 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}
|
{plugin?.manifest.name ?? pluginId}
|
||||||
</span>
|
</span>
|
||||||
<LuChevronDown
|
<LuChevronDown
|
||||||
|
|||||||
+1
-1
@@ -181,7 +181,7 @@ api.ui.onSettingsAction((key) => {}) // button 条目点击回调(key = 按钮
|
|||||||
| 侧栏入口(B1) | manifest icon/name/order;点进插件整页视图 | ✅ |
|
| 侧栏入口(B1) | manifest icon/name/order;点进插件整页视图 | ✅ |
|
||||||
| 插件整页 Main | 内置组件级 / 外置 renderer 组件 / 外置 iframe;聊天列 display:none 保活 | ✅ |
|
| 插件整页 Main | 内置组件级 / 外置 renderer 组件 / 外置 iframe;聊天列 display:none 保活 | ✅ |
|
||||||
| 面板 tab(B6) | `panel: true`;SidePanel 零改动承载(内置组件 / 外置 renderer 组件 / iframe) | ✅ |
|
| 面板 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 广播 / 页侧桥直通) | ✅ |
|
| 深链 | `openView(view, params)`(main 侧 IPC 广播 / 页侧桥直通) | ✅ |
|
||||||
| 工具栏按钮(B5) | `registerToolbarButton` 数据已通,Composer 工具行渲染 | ⏳ 下版本 |
|
| 工具栏按钮(B5) | `registerToolbarButton` 数据已通,Composer 工具行渲染 | ⏳ 下版本 |
|
||||||
| 聊天流富组件(B4) | ```类型``` 围栏块 → 宿主元组件(data-table/stat-grid/step-list/kv-card) | ⏳ 下版本 |
|
| 聊天流富组件(B4) | ```类型``` 围栏块 → 宿主元组件(data-table/stat-grid/step-list/kv-card) | ⏳ 下版本 |
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
所有插件**共用一个悬浮胶囊**,悬浮于 main 区域右上角(侧面板打开时自动左移让位;ZCode 复刻)。插件照常 `setStatusItem`,宿主记录每次写入时间,两种形态:
|
所有插件**共用一个悬浮胶囊**,悬浮于 main 区域右上角(侧面板打开时自动左移让位;ZCode 复刻)。插件照常 `setStatusItem`,宿主记录每次写入时间,两种形态:
|
||||||
|
|
||||||
- **最小化药丸**:展示「最新的消息」(全部插件中 `updatedAt` 最新的一条:tone 点 + 插件图标 + 文本;多于一条时带总数角标),点击展开面板;
|
- **最小化药丸**:展示「最新的消息」(全部插件中 `updatedAt` 最新的一条:tone 点 + 插件图标 + 文本;多于一条时带总数角标),点击展开面板;
|
||||||
- **展开面板**:面板头就是插件名(第一个区域的右侧是收回药丸的 ⤡);多个插件时各占一个区域、区域头可收起/展开(记忆跨启动)。区域内 `detail` 的**分组是手风琴**——默认收起只显示「分组标题 + 行尾徽标」,点击展开 rows(ZCode 式「计划 ›」);无标题分组直接平铺。面板高度固定,内容太多向下滚动;点击面板外部 / Esc 收回药丸。
|
- **展开面板**:面板头就是插件名(第一个区域的右侧是收回药丸的 ⤡);多个插件时各占一个区域、区域头可收起/展开(记忆跨启动)。区域内 `detail` 的**分组是手风琴**——默认收起只显示「分组标题 + 行尾徽标」,点击展开 rows(ZCode 式「计划 ›」);无标题分组直接平铺。面板最大高度封顶(min(480px,58vh)),高度随内容自适应,溢出才滚动;点击面板外部 / Esc 收回药丸。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// ① 纯展示(只出现在药丸/区域行)
|
// ① 纯展示(只出现在药丸/区域行)
|
||||||
|
|||||||
Reference in New Issue
Block a user