agent-loft 0.2.36 → 0.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-loft",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "type": "module",
   "description": "多个 agent 的工作台：把本机 Claude Code / Codex 放到一处统一管理，用飞书和 Web 页面随时驱动——会话、审批、模型切换都共用",
   "keywords": [

package/web/css/remote.css

@@ -53,6 +53,17 @@
   }
 }
 
+/* 顶栏下沿的渐变、模糊是给滚动的聊天内容用的：远程控制页下面是工具栏，会被它盖住一截 */
+.main.remote-view .topbar {
+  padding-bottom: 8px;
+  background: var(--bg);
+}
+
+.main.remote-view .topbar::before,
+.main.remote-view .topbar::after {
+  display: none;
+}
+
 .remote-head {
   display: flex;
   align-items: center;
@@ -313,18 +324,48 @@
   opacity: 0.4;
 }
 
-/* 浏览器全屏时只剩画面 */
-.remote-body:fullscreen .desk-status {
+/* 全屏时只剩画面 */
+.remote-body.full .desk-status {
   display: none;
 }
 
-/* 不支持元素全屏（iPhone）：铺满整个页面，盖住顶栏、侧栏，弹窗和提示还在上面 */
+/* 不支持元素全屏（iPhone）：铺满整个页面，盖住顶栏、侧栏，弹窗和提示还在上面。
+   左右不留安全区：画面本来就居中、两边是黑边，刘海落在黑边里 */
 .remote-body.desk-full {
   position: fixed;
   inset: 0;
   z-index: 35;
   background: #111;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + var(--kb-inset, 0px)) env(safe-area-inset-left);
+  padding: env(safe-area-inset-top) 0 var(--kb-inset, 0px);
+}
+
+/* 全屏时下面那排键默认收起，左上角的按钮拉出来；拉出来时是深色、矮一点的一条 */
+.remote-body.full .desk-keys {
+  padding: 4px max(8px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
+  border-top: none;
+  background: #111;
+}
+
+.remote-body.full:not(.keys-open) .desk-keys {
+  display: none;
+}
+
+/* 有软键盘垫着时不用再让出底部安全区 */
+.remote-body.desk-full .desk-keys {
+  padding-bottom: calc(4px + max(0px, env(safe-area-inset-bottom) - var(--kb-inset, 0px)));
+}
+
+.remote-body.full .desk-keys .term-key {
+  height: 30px;
+  border-color: #333;
+  background: #262626;
+  color: #eee;
+}
+
+.remote-body.full .desk-keys .term-key.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
 }
 
 /* 没连着时画面中间的「连接桌面」 */
@@ -341,7 +382,7 @@
 }
 
 .desk-idle[hidden],
-.desk-exitfull[hidden] {
+.desk-fbtn[hidden] {
   display: none;
 }
 
@@ -362,12 +403,26 @@
   height: 16px;
 }
 
-/* 全屏时左上角「退出全屏」 */
-.desk-exitfull {
+/* 全屏时左上角「退出全屏」「按键」 */
+.desk-fullbar {
   position: absolute;
-  left: 10px;
+  left: max(10px, env(safe-area-inset-left));
   top: 10px;
   z-index: 3;
+  display: flex;
+  gap: 8px;
+}
+
+.desk-fullbar[hidden] {
+  display: none;
+}
+
+.desk-fbtn.on {
+  background: var(--accent);
+  color: var(--accent-fg);
+}
+
+.desk-fbtn {
   display: grid;
   place-items: center;
   width: 34px;
@@ -378,7 +433,7 @@
   color: #fff;
 }
 
-.desk-exitfull svg {
+.desk-fbtn svg {
   width: 18px;
   height: 18px;
 }

package/web/views/desktop.js

@@ -57,8 +57,12 @@ export function showDesktop(pane, tools) {
       h("div", { class: "muted" }, "远程桌面未连接"),
       h("button", { class: "btn primary", onclick: reconnect }, icon("plug"), "连接桌面"),
     );
-    D.exitFull = h("button", { class: "desk-exitfull", hidden: true, title: "退出全屏", "aria-label": "退出全屏", onclick: () => setFull(false) }, icon("shrink"));
-    D.viewport = h("div", { class: "desk-viewport" }, D.screen, D.zoomBadge, D.hint, D.idle, D.exitFull);
+    D.keysBtn = isTouch
+      ? h("button", { class: "desk-fbtn", title: "按键", "aria-label": "按键", onclick: () => toggleFullKeys() }, icon("keyboard"))
+      : null;
+    D.exitFull = h("button", { class: "desk-fbtn", title: "退出全屏", "aria-label": "退出全屏", onclick: () => setFull(false) }, icon("shrink"));
+    D.fullBar = h("div", { class: "desk-fullbar", hidden: true }, D.exitFull, D.keysBtn);
+    D.viewport = h("div", { class: "desk-viewport" }, D.screen, D.zoomBadge, D.hint, D.idle, D.fullBar);
     D.keyInput = isTouch ? mobileKeyInput() : null;
     D.keyRow = isTouch ? keyRow() : null;
     fill(pane, D.status, D.viewport, D.keyRow, D.keyInput);
@@ -104,6 +108,8 @@ async function connect() {
   rfb.resizeSession = false;
   rfb.viewOnly = D.viewOnly;
   rfb.showDotCursor = true;
+  // 画面没铺满时的边：和外框一个颜色，别再多出一圈灰
+  rfb.background = "#111";
   rfb.qualityLevel = 6;
   rfb.compressionLevel = 2;
   rfb.addEventListener("connect", () => {
@@ -282,11 +288,25 @@ function setFull(on) {
   syncFull();
 }
 
-/** 全屏时画面上一个「退出全屏」（手机上没有 Esc；真全屏在电脑上按 Esc 就行，不显示） */
+/**
+ * 全屏时画面左上角「退出全屏」（手机上没有 Esc；真全屏在电脑上按 Esc 就行，不显示）。
+ * 手机上全屏时下面那排键先收起来，左上角的「按键」拉出来
+ */
 function syncFull() {
   if (!D.pane) return;
   const pseudo = D.pane.classList.contains("desk-full");
-  D.exitFull.hidden = !(pseudo || (isTouch && fsElement() === D.pane));
+  const full = pseudo || fsElement() === D.pane;
+  if (full !== D.pane.classList.contains("full")) {
+    D.pane.classList.toggle("full", full);
+    toggleFullKeys(false);
+  }
+  D.fullBar.hidden = !(pseudo || (isTouch && full));
+}
+
+function toggleFullKeys(open = !D.pane.classList.contains("keys-open")) {
+  D.pane.classList.toggle("keys-open", open);
+  D.keysBtn?.classList.toggle("on", open);
+  if (!open && document.activeElement === D.keyInput) D.keyInput.blur();
 }
 document.addEventListener("fullscreenchange", syncFull);
 document.addEventListener("webkitfullscreenchange", syncFull);