diff --git a/preview-template/workbench/css/workbench.css b/preview-template/workbench/css/workbench.css index 69c0883..d68de63 100644 --- a/preview-template/workbench/css/workbench.css +++ b/preview-template/workbench/css/workbench.css @@ -911,7 +911,7 @@ body { .pw-pick-overlay { position: fixed; pointer-events: none; - z-index: 90; + z-index: 99999; box-sizing: border-box; background: rgba(46, 204, 113, 0.38); border: 1px solid rgba(39, 174, 96, 0.95); @@ -923,6 +923,23 @@ body { display: none !important; } +/* 壳层选中高亮:绿色半透明遮罩 */ +.pw-pick-highlight { + position: absolute; + pointer-events: none; + z-index: 16; + box-sizing: border-box; + background: rgba(46, 204, 113, 0.35); + border: 2px solid rgba(39, 174, 96, 0.95); + border-radius: 2px; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 12px rgba(46, 204, 113, 0.25); + transition: left 0.08s ease, top 0.08s ease, width 0.08s ease, height 0.08s ease; +} + +.pw-pick-highlight[hidden] { + display: none !important; +} + /* 壳层检视捕获:盖在游戏 iframe 上,确保点击一定能收到 */ .pw-pick-capture { position: absolute; diff --git a/preview-template/workbench/js/host.js b/preview-template/workbench/js/host.js index 7548c0c..a477a70 100644 --- a/preview-template/workbench/js/host.js +++ b/preview-template/workbench/js/host.js @@ -618,8 +618,16 @@ } self._setStatus('已选中 ' + label, true); if (self.panels.inspector) self.panels.inspector.loadUuid(res.uuid); + if (self.panels.hierarchy) self.panels.hierarchy.setSelectedUuid(res.uuid); + self._setPickHighlight(res.rect || null); + if (!res.rect && self.bridge) { + self.bridge.call('pick.getRect').then(function (rect) { + self._setPickHighlight(rect); + }).catch(function () { /* */ }); + } } else { self._setStatus('未命中 (' + Math.round(gameX) + ',' + Math.round(gameY) + ')', false); + self._setPickHighlight(null); } }).catch(function (err) { self._setStatus('选取失败', false); @@ -632,6 +640,36 @@ this._pickCaptureBound = true; }; + /** + * 预览区绿色半透明高亮(壳层,盖在游戏 iframe 上)。 + * @param {{left:number,top:number,width:number,height:number}|null} rect 游戏视口坐标 + */ + 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'; + }; + PreviewWorkbenchHost.prototype._setStatus = function (text, ok) { var el = document.getElementById('pw-engine-status'); if (!el) return;