mirror of
https://gitcode.com/JianFeeeee/HomeAgent.git
synced 2026-10-15 12:15:16 +00:00
feat(gui+waiter): computeruse 补高级操作、修 HiDPI 坐标；记录 PiDeck 借鉴
## computeruse 高级操作 此前两端（GUI 本机桥 / waiter 设备侧）都只有 9 个基础 action （click/move/scroll/keypress/type…），与业界 computer-use 的基本盘差距明显。 现补到 18 个，两端对齐： drag 拖拽（分步移动，见下） hover 只悬停不点击（触发 tooltip / 悬浮菜单） mousedown/up 按下与释放分离，可配对做「按住」 tripleclick 三击选中整行 middleclick 中键 hotkey/combo 组合键（ctrl+c 这类） wait/sleep 显式等待，等 UI/动画完成再下一步 display 显示器几何（bounds + scaleFactor + primary），多屏定位必需 ★ 拖拽**分步移动**（默认 12 步，上限 60）而不是一步到位：canvas 拖拽、 列表排序、滑动条这类应用依赖中间 mousemove 事件，一步到位会失效。 ## 修 HiDPI 坐标错位（GUI 侧） 截图给模型的是**物理像素**，而 SetCursorPos / xdotool / cliclick 期望 **逻辑点(DIP)**。旧代码只加了 display bounds 的原点偏移，完全没换算 scaleFactor ⇒ 150% 缩放屏上点击系统性偏移（越靠右下偏得越多）。 现在按目标屏 scaleFactor 换算，并提供 `physical:false` 让调用方声明 「坐标已是逻辑点」以免二次换算。 ## 组合键归一化（waiter 侧） 旧实现把模型给的 key 字符串原样丢给 `xdotool key`，于是 "Ctrl+C"、 "ctrl + c"、"CTRL-C" 全部失效。新增 normKeySpec：统一 + 与空格分隔、 统一小写、去重复修饰键。 顺带修 waiter 的 `type`：加 `--clearmodifiers`，避免残留的 Ctrl/Alt 把后续输入变成快捷键（旧实现一次输入就可能污染后续所有按键）。 ## scroll 修正（两端） 旧实现固定滚 `click 4/5`（上/下），忽略方向语义也不支持横向。 现按 dy 正负给方向、按量级分步、支持 dx 横向滚动。 ## 显式声明借鉴 PiDeck 用户要求声明 GUI 借鉴了 PiDeck 的设计与实现。做法： 1. 新增 `cmd/gui/DESIGN-NOTES.md` —— 逐项列出借鉴自 PiDeck 的设计 （三点渐次明暗 / 运行态呼吸光晕 / 工具调用分组卡）、PiDeck 的原始 实现（@keyframes 名与 CSS 片段）、HomeAgent 的落地位置、以及**动机**， 并明确区分「本仓自行决策」的部分（如「只有 1 个工具时不分组」是本地决定， 不是 PiDeck 做法）。 2. app.js / style.css 的相关代码处补出处注释。 3. 判据 computeruse.test.mjs 钉住这几条声明，防止后续丢失。 参考方式为阅读 PiDeck 打包产物 app.asar 中的 CSS 实现后**独立重写**， 未复制其代码或资源文件。 ## 判据 新增 cmd/gui/computeruse.test.mjs（进 npm test），30 条断言： · 两端各 9 项高级操作 · HiDPI 换算与 physical 开关 · 组合键归一化、type 的 --clearmodifiers · 拖拽分步移动（两端） · PiDeck 借鉴声明四处（含 DESIGN-NOTES.md 存在） 判据：cmd/gui npm test 全绿（114 条）。
This commit is contained in:
JianFeeeee
@ -1290,9 +1290,27 @@ code {
|
||||
border: 1px solid var(--kv-border);
|
||||
border-left: 3px solid var(--accent);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition:
|
||||
border-color 0.2s var(--ease-out),
|
||||
background 0.2s var(--ease-out);
|
||||
background 0.2s var(--ease-out),
|
||||
box-shadow 0.2s var(--ease-out);
|
||||
}
|
||||
|
||||
/* 运行中的工具卡：极淡的呼吸光晕。
|
||||
参考 PiDeck 的 .turn-row--running:before —— 用一层几乎看不见的
|
||||
accent 底色缓慢呼吸来表达"正在跑"，而不是放一个转圈。
|
||||
转圈的语义是"在加载某个确定的东西"，而工具执行没有进度可转。 */
|
||||
.tool-card.tc-running::before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: -1px -3px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--accent) 4%, transparent);
|
||||
opacity: 0;
|
||||
animation: haRunBreathe 2.2s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
.tool-card.tc-running {
|
||||
border-left-color: var(--accent);
|
||||
@ -1303,6 +1321,15 @@ code {
|
||||
.tool-card.tc-error {
|
||||
border-left-color: var(--error, #db3694);
|
||||
}
|
||||
@keyframes haRunBreathe {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.tool-card .tc-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1357,14 +1384,114 @@ code {
|
||||
background: rgba(219, 54, 148, 0.18);
|
||||
color: #ff9ec6;
|
||||
}
|
||||
/* 工具卡内的活动指示：三点脉冲。
|
||||
旧实现是 11px 的 border 转圈（.tc-spinner）—— 与上一条同样的问题，
|
||||
且在 11px 尺寸下转圈糊成一团。改为 PiDeck 的 tool-activity-dot 三点。 */
|
||||
/* ===== 工具调用组卡（参考 PiDeck 的 tool-group-card）=====
|
||||
一轮里多个工具调用折成一张卡：收起时只留「脉冲点 + 计数 + 状态摘要」，
|
||||
展开才逐个看细节。相比每工具一张卡，回复正文不会被推到很下面。 */
|
||||
.tool-group-card {
|
||||
border: 1px solid var(--kv-border);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: var(--radius-sm);
|
||||
margin: 6px 0;
|
||||
font-size: 11px;
|
||||
background: var(--bg-panel, var(--bg-hover));
|
||||
overflow: hidden;
|
||||
}
|
||||
.tool-group-card.tone-error {
|
||||
border-left-color: var(--error, #db3694);
|
||||
}
|
||||
.tool-group-card.tone-done {
|
||||
border-left-color: rgba(23, 169, 100, 0.8);
|
||||
}
|
||||
.tool-group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: background 0.2s var(--ease-out);
|
||||
}
|
||||
.tool-group-head:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
.tool-group-card .tool-group-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 运行中的组：脉冲点呼吸（PiDeck 的 toolGroupDotPulse：缩放+透明度） */
|
||||
.tool-group-card.tone-running .tool-group-dot {
|
||||
background: var(--loading-top, var(--accent));
|
||||
animation: haGroupDotPulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
.tool-group-card.tone-error .tool-group-dot {
|
||||
background: var(--error, #db3694);
|
||||
}
|
||||
.tool-group-card.tone-done .tool-group-dot {
|
||||
background: rgba(23, 169, 100, 0.9);
|
||||
}
|
||||
@keyframes haGroupDotPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
.tool-group-count {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.tool-group-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.tool-group-head .tc-caret {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
transition: transform 0.15s var(--ease-out);
|
||||
}
|
||||
.tool-group-head.open .tc-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.tool-group-body {
|
||||
padding: 0 6px 4px;
|
||||
border-top: 1px solid var(--kv-border);
|
||||
}
|
||||
.tool-group-body .tool-card {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.tool-card .tc-spinner {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(63, 110, 245, 0.25);
|
||||
border-top-color: #3f6ef5;
|
||||
animation: spin 0.7s linear infinite;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tool-card .tc-spinner::before,
|
||||
.tool-card .tc-spinner::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
animation: haDots 1.1s ease-in-out infinite;
|
||||
}
|
||||
.tool-card .tc-spinner::after {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.tool-card .tc-caret {
|
||||
font-size: 10px;
|
||||
@ -1587,6 +1714,25 @@ code {
|
||||
.msg-bubble .live-spinner + .text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 正在生成的那条消息：整条气泡的呼吸光晕。
|
||||
参考 PiDeck 的 .turn-row--running:before —— 一层几乎看不见的
|
||||
accent 底色缓慢明暗交替。比对单点动画的优势：余光就能感知
|
||||
「agent 正在回」，不必把视线缩到气泡里那几个点上。 */
|
||||
.msg-bubble.msg-running {
|
||||
position: relative;
|
||||
}
|
||||
.msg-bubble.msg-running::before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: -4px -6px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--accent) 4%, transparent);
|
||||
opacity: 0;
|
||||
animation: haRunBreathe 2.2s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
.msg-bubble.grow-in {
|
||||
animation: bubbleGrow 0.5s var(--ease-out) both;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user