11

preview-template/workbench/css/workbench.css

@@ -909,14 +909,14 @@ body {
 .pw-summary b { color: var(--pw-text); font-weight: 600; }
 
 .pw-pick-overlay {
-    position: fixed;
+    position: absolute;
     pointer-events: none;
     z-index: 99999;
     box-sizing: border-box;
-    background: rgba(46, 204, 113, 0.38);
-    border: 1px solid rgba(39, 174, 96, 0.95);
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
-    border-radius: 1px;
+    background: rgba(46, 204, 113, 0.42);
+    border: 2px solid rgba(39, 174, 96, 1);
+    border-radius: 2px;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 14px rgba(46, 204, 113, 0.35);
 }
 
 .pw-pick-overlay[hidden] {

preview-template/workbench/js/agent-pick.js

@@ -413,6 +413,24 @@
         return this._hitTestDetailed(clientX, clientY).uuid || '';
     };
 
+    /** 取 UITransform（多种查找方式，与命中逻辑一致） */
+    WorkbenchAgent.prototype._getUiTransform = function (node) {
+        var cc = this.cc;
+        if (!cc || !node || !node.getComponent) return null;
+        try {
+            var uit = (cc.UITransform && node.getComponent(cc.UITransform)) ||
+                node.getComponent('cc.UITransform') ||
+                node.getComponent('UITransform') ||
+                null;
+            if (uit && uit.getBoundingBoxToWorld) return uit;
+        } catch (e) { /* */ }
+        var comps = node.components || [];
+        for (var i = 0; i < comps.length; i++) {
+            if (comps[i] && typeof comps[i].getBoundingBoxToWorld === 'function') return comps[i];
+        }
+        return null;
+    };
+
     WorkbenchAgent.prototype._ensureOverlay = function () {
         var el = document.getElementById('pw-pick-overlay');
         if (!el) {
@@ -420,7 +438,10 @@
             el.id = 'pw-pick-overlay';
             el.className = 'pw-pick-overlay';
             el.hidden = true;
-            (document.body || document.documentElement).appendChild(el);
+            // 挂到画布容器内，避免被设备壳/全局样式盖住
+            var canvas = this._getCanvasEl();
+            var host = (canvas && canvas.parentElement) || document.body || document.documentElement;
+            host.appendChild(el);
         }
         this._overlay = el;
     };
@@ -439,24 +460,46 @@
             overlay.hidden = true;
             return;
         }
+        // 相对画布父容器定位（absolute），比 fixed 更稳
+        var canvas = this._getCanvasEl();
+        var parent = (canvas && canvas.parentElement) || overlay.parentNode;
+        var originLeft = 0;
+        var originTop = 0;
+        if (parent && parent.getBoundingClientRect) {
+            var pr = parent.getBoundingClientRect();
+            originLeft = pr.left;
+            originTop = pr.top;
+            if (getComputedStyle(parent).position === 'static') {
+                parent.style.position = 'relative';
+            }
+        }
         overlay.hidden = false;
-        overlay.style.position = 'fixed';
-        overlay.style.left = box.left + 'px';
-        overlay.style.top = box.top + 'px';
+        overlay.style.position = 'absolute';
+        overlay.style.left = (box.left - originLeft) + 'px';
+        overlay.style.top = (box.top - originTop) + 'px';
         overlay.style.width = box.width + 'px';
         overlay.style.height = box.height + 'px';
         overlay.style.zIndex = '99999';
+        overlay.style.display = 'block';
     };
 
     WorkbenchAgent.prototype._nodeClientRect = function (node) {
         var cc = this.cc;
         var canvas = this._getCanvasEl();
-        if (!cc || !canvas || !node || !node.isValid) return null;
-        var uit = node.getComponent && node.getComponent(cc.UITransform);
+        if (!cc || !canvas || !node) return null;
+        if (node.isValid === false) return null;
+        var uit = this._getUiTransform(node);
         if (!uit || !uit.getBoundingBoxToWorld) return null;
         var box = null;
         try { box = uit.getBoundingBoxToWorld(); } catch (e) { return null; }
         if (!box) return null;
+        var bx = Number(box.x);
+        var by = Number(box.y);
+        var bw = Number(box.width);
+        var bh = Number(box.height);
+        if (!isFinite(bx) || !isFinite(by) || !isFinite(bw) || !isFinite(bh)) return null;
+        if (bw < 0) { bx += bw; bw = -bw; }
+        if (bh < 0) { by += bh; bh = -bh; }
 
         var rect = canvas.getBoundingClientRect();
         var cbox = this._canvasWorldBox();
@@ -474,10 +517,10 @@
             oy = 0;
         }
         var corners = [
-            { x: box.x, y: box.y },
-            { x: box.x + box.width, y: box.y },
-            { x: box.x + box.width, y: box.y + box.height },
-            { x: box.x, y: box.y + box.height },
+            { x: bx, y: by },
+            { x: bx + bw, y: by },
+            { x: bx + bw, y: by + bh },
+            { x: bx, y: by + bh },
         ];
         var xs = [];
         var ys = [];
@@ -502,6 +545,12 @@
     };
 
     WorkbenchAgent.prototype._getOverlayRect = function () {
+        // 优先读最新计算框，避免 style 尚未写入
+        var node = this._findNode(this._selectedUuid);
+        if (node) {
+            var box = this._nodeClientRect(node);
+            if (box) return box;
+        }
         var overlay = this._overlay;
         if (!overlay || overlay.hidden) return null;
         return {

preview-template/workbench/js/host.js

@@ -139,13 +139,7 @@
         cap.title = '检视：点击选取节点';
         host.appendChild(cap);
 
-        // 选中节点绿色高亮（壳层，盖在预览上）
-        var hi = document.createElement('div');
-        hi.id = 'pw-pick-highlight';
-        hi.className = 'pw-pick-highlight pw-shell-only';
-        hi.hidden = true;
-        host.appendChild(hi);
-
+        // 选中高亮由游戏内 #pw-pick-overlay 绘制（壳层不再重复，避免坐标原点不一致）
         if (this.layout) this.layout.gameHost = host;
     };
 
@@ -337,6 +331,7 @@
         document.getElementById('pw-mode-game').addEventListener('click', function () {
             self._inspectOn = false;
             self._setInspectCapture(false);
+            self._setPickHighlight(null);
             self.bridge.call('pick.setMode', { mode: 'game' }).catch(function () { /* */ });
             document.getElementById('pw-mode-game').classList.add('active');
             document.getElementById('pw-mode-inspect').classList.remove('active');
@@ -641,33 +636,11 @@
     };
 
     /**
-     * 预览区绿色半透明高亮（壳层，盖在游戏 iframe 上）。
-     * @param {{left:number,top:number,width:number,height:number}|null} rect 游戏视口坐标
+     * 选中高亮由游戏 iframe 内绘制；壳层仅清理遗留节点，避免双框/错位。
      */
     PreviewWorkbenchHost.prototype._setPickHighlight = function (rect) {
         var el = document.getElementById('pw-pick-highlight');
-        if (!el) return;
-        if (!rect || !(rect.width > 0) || !(rect.height > 0)) {
-            el.hidden = true;
-            return;
-        }
-        var host = document.getElementById('pw-game-host');
-        var ox = 0;
-        var oy = 0;
-        if (host) {
-            var hr = host.getBoundingClientRect();
-            var iframe = this._iframe;
-            if (iframe) {
-                var ir = iframe.getBoundingClientRect();
-                ox = ir.left - hr.left;
-                oy = ir.top - hr.top;
-            }
-        }
-        el.hidden = false;
-        el.style.left = (ox + (rect.left || 0)) + 'px';
-        el.style.top = (oy + (rect.top || 0)) + 'px';
-        el.style.width = Math.max(2, rect.width || 0) + 'px';
-        el.style.height = Math.max(2, rect.height || 0) + 'px';
+        if (el && el.parentNode) el.parentNode.removeChild(el);
     };
 
     PreviewWorkbenchHost.prototype._setStatus = function (text, ok) {