From 84175f426805ca52983eb6a8edb082a82d68d678 Mon Sep 17 00:00:00 2001 From: panw Date: Thu, 14 May 2026 16:55:47 +0800 Subject: [PATCH] feat: add preview template and devtools assets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增了预览页面模板以及配套的开发者工具所需的样式和脚本文件，包含节点树面板、属性检查面板、性能监控面板等开发工具功能。 --- preview-template/devtools/assets/index.js | 1 + preview-template/devtools/assets/style.css | 1 + preview-template/index.ejs | 49 ++++++++++++++++++++++ 3 files changed, 51 insertions(+) create mode 100644 preview-template/devtools/assets/index.js create mode 100644 preview-template/devtools/assets/style.css create mode 100644 preview-template/index.ejs diff --git a/preview-template/devtools/assets/index.js b/preview-template/devtools/assets/index.js new file mode 100644 index 00000000..f9b40606 --- /dev/null +++ b/preview-template/devtools/assets/index.js @@ -0,0 +1 @@ +(function(){"use strict";var Q,m,Ae,Ue,I,Re,De,Be,Fe,ye,we,be,ee={},te=[],Lt=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,ne=Array.isArray;function P(t,e){for(var n in e)t[n]=e[n];return t}function Se(t){t&&t.parentNode&&t.parentNode.removeChild(t)}function zt(t,e,n){var o,i,r,l={};for(r in e)r=="key"?o=e[r]:r=="ref"?i=e[r]:l[r]=e[r];if(arguments.length>2&&(l.children=arguments.length>3?Q.call(arguments,2):n),typeof t=="function"&&t.defaultProps!=null)for(r in t.defaultProps)l[r]===void 0&&(l[r]=t.defaultProps[r]);return oe(t,l,o,i,null)}function oe(t,e,n,o,i){var r={type:t,props:e,key:n,ref:o,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:i??++Ae,__i:-1,__u:0};return i==null&&m.vnode!=null&&m.vnode(r),r}function L(t){return t.children}function j(t,e){this.props=t,this.context=e}function X(t,e){if(e==null)return t.__?X(t.__,t.__i+1):null;for(var n;ee&&I.sort(Be),t=I.shift(),e=I.length,At(t)}finally{I.length=ie.__r=0}}function Oe(t,e,n,o,i,r,l,s,_,a,d){var c,h,f,v,S,b,y,g=o&&o.__k||te,N=e.length;for(_=Ut(n,e,g,_,N),c=0;c0?l=t.__k[r]=oe(l.type,l.props,l.key,l.ref?l.ref:null,l.__v):t.__k[r]=l,_=r+h,l.__=t,l.__b=t.__b+1,s=null,(a=l.__i=Rt(l,n,_,c))!=-1&&(c--,(s=n[a])&&(s.__u|=2)),s==null||s.__v==null?(a==-1&&(i>d?h--:i_?h--:h++,l.__u|=4))):t.__k[r]=null;if(c)for(r=0;r(d?1:0)){for(i=n-1,r=n+1;i>=0||r=0?i--:r++])!=null&&!(2&a.__u)&&s==a.key&&_==a.type)return l}return-1}function qe(t,e,n){e[0]=="-"?t.setProperty(e,n??""):t[e]=n==null?"":typeof n!="number"||Lt.test(e)?n:n+"px"}function re(t,e,n,o,i){var r,l;e:if(e=="style")if(typeof n=="string")t.style.cssText=n;else{if(typeof o=="string"&&(t.style.cssText=o=""),o)for(e in o)n&&e in n||qe(t.style,e,"");if(n)for(e in n)o&&n[e]==o[e]||qe(t.style,e,n[e])}else if(e[0]=="o"&&e[1]=="n")r=e!=(e=e.replace(Fe,"$1")),l=e.toLowerCase(),e=l in t||e=="onFocusOut"||e=="onFocusIn"?l.slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=n,n?o?n.u=o.u:(n.u=ye,t.addEventListener(e,r?be:we,r)):t.removeEventListener(e,r?be:we,r);else{if(i=="http://www.w3.org/2000/svg")e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(e!="width"&&e!="height"&&e!="href"&&e!="list"&&e!="form"&&e!="tabIndex"&&e!="download"&&e!="rowSpan"&&e!="colSpan"&&e!="role"&&e!="popover"&&e in t)try{t[e]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&e[4]!="-"?t.removeAttribute(e):t.setAttribute(e,e=="popover"&&n==1?"":n))}}function Ve(t){return function(e){if(this.l){var n=this.l[e.type+t];if(e.t==null)e.t=ye++;else if(e.t0?t:ne(t)?t.map(je):P({},t)}function Dt(t,e,n,o,i,r,l,s,_){var a,d,c,h,f,v,S,b=n.props||ee,y=e.props,g=e.type;if(g=="svg"?i="http://www.w3.org/2000/svg":g=="math"?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),r!=null){for(a=0;a=n.__.length&&n.__.push({}),n.__[t]}function M(t,e){var n=rt(se++,3);!w.__s&<(n.__H,e)&&(n.__=t,n.u=e,C.__H.__h.push(n))}function z(t){return le=5,G(function(){return{current:t}},[])}function G(t,e){var n=rt(se++,7);return lt(n.__H,e)&&(n.__=t(),n.__H=e,n.__h=t),n.__}function A(t,e){return le=8,G(function(){return t},e)}function Xt(){for(var t;t=Ke.shift();){var e=t.__H;if(t.__P&&e)try{e.__h.some(ce),e.__h.some(Pe),e.__h=[]}catch(n){e.__h=[],w.__e(n,t.__v)}}}w.__b=function(t){C=null,Qe&&Qe(t)},w.__=function(t,e){t&&e.__k&&e.__k.__m&&(t.__m=e.__k.__m),it&&it(t,e)},w.__r=function(t){et&&et(t),se=0;var e=(C=t.__c).__H;e&&(xe===C?(e.__h=[],C.__h=[],e.__.some(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(e.__h.some(ce),e.__h.some(Pe),e.__h=[],se=0)),xe=C},w.diffed=function(t){tt&&tt(t);var e=t.__c;e&&e.__H&&(e.__H.__h.length&&(Ke.push(e)!==1&&Je===w.requestAnimationFrame||((Je=w.requestAnimationFrame)||Ot)(Xt)),e.__H.__.some(function(n){n.u&&(n.__H=n.u),n.u=void 0})),xe=C=null},w.__c=function(t,e){e.some(function(n){try{n.__h.some(ce),n.__h=n.__h.filter(function(o){return!o.__||Pe(o)})}catch(o){e.some(function(i){i.__h&&(i.__h=[])}),e=[],w.__e(o,n.__v)}}),nt&&nt(t,e)},w.unmount=function(t){ot&&ot(t);var e,n=t.__c;n&&n.__H&&(n.__H.__.some(function(o){try{ce(o)}catch(i){e=i}}),n.__H=void 0,e&&w.__e(e,n.__v))};var st=typeof requestAnimationFrame=="function";function Ot(t){var e,n=function(){clearTimeout(o),st&&cancelAnimationFrame(e),setTimeout(t)},o=setTimeout(n,35);st&&(e=requestAnimationFrame(n))}function ce(t){var e=C,n=t.__c;typeof n=="function"&&(t.__c=void 0,n()),C=e}function Pe(t){var e=C;t.__c=t.__(),C=e}function lt(t,e){return!t||t.length!==e.length||e.some(function(n,o){return n!==t[o]})}var Yt=Symbol.for("preact-signals");function Me(){if(U>1)U--;else{var t,e=!1;for(function(){var i=ue;for(ue=void 0;i!==void 0;)i.S.v===i.v&&(i.S.i=i.i),i=i.o}();J!==void 0;){var n=J;for(J=void 0,ae++;n!==void 0;){var o=n.u;if(n.u=void 0,n.f&=-3,!(8&n.f)&&_t(n))try{n.c()}catch(i){e||(t=i,e=!0)}n=o}}if(ae=0,U--,e)throw t}}var p=void 0;function ct(t){var e=p;p=void 0;try{return t()}finally{p=e}}var J=void 0,U=0,ae=0,at=0,ue=void 0,_e=0;function ut(t){if(p!==void 0){var e=t.n;if(e===void 0||e.t!==p)return e={i:0,S:t,p:p.s,n:void 0,t:p,e:void 0,x:void 0,r:e},p.s!==void 0&&(p.s.n=e),p.s=e,t.n=e,32&p.f&&t.S(e),e;if(e.i===-1)return e.i=0,e.n!==void 0&&(e.n.p=e.p,e.p!==void 0&&(e.p.n=e.n),e.p=p.s,e.n=void 0,p.s.n=e,p.s=e),e}}function k(t,e){this.v=t,this.i=0,this.n=void 0,this.t=void 0,this.l=0,this.W=e==null?void 0:e.watched,this.Z=e==null?void 0:e.unwatched,this.name=e==null?void 0:e.name}k.prototype.brand=Yt,k.prototype.h=function(){return!0},k.prototype.S=function(t){var e=this,n=this.t;n!==t&&t.e===void 0&&(t.x=n,this.t=t,n!==void 0?n.e=t:ct(function(){var o;(o=e.W)==null||o.call(e)}))},k.prototype.U=function(t){var e=this;if(this.t!==void 0){var n=t.e,o=t.x;n!==void 0&&(n.x=o,t.e=void 0),o!==void 0&&(o.e=n,t.x=void 0),t===this.t&&(this.t=o,o===void 0&&ct(function(){var i;(i=e.Z)==null||i.call(e)}))}},k.prototype.subscribe=function(t){var e=this;return Ie(function(){var n=e.value,o=p;p=void 0;try{t(n)}finally{p=o}},{name:"sub"})},k.prototype.valueOf=function(){return this.value},k.prototype.toString=function(){return this.value+""},k.prototype.toJSON=function(){return this.value},k.prototype.peek=function(){var t=p;p=void 0;try{return this.value}finally{p=t}},Object.defineProperty(k.prototype,"value",{get:function(){var t=ut(this);return t!==void 0&&(t.i=this.i),this.v},set:function(t){if(t!==this.v){if(ae>100)throw new Error("Cycle detected");(function(n){U!==0&&ae===0&&n.l!==at&&(n.l=at,ue={S:n,v:n.v,i:n.i,o:ue})})(this),this.v=t,this.i++,_e++,U++;try{for(var e=this.t;e!==void 0;e=e.x)e.t.N()}finally{Me()}}}});function T(t,e){return new k(t,e)}function _t(t){for(var e=t.s;e!==void 0;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function dt(t){for(var e=t.s;e!==void 0;e=e.n){var n=e.S.n;if(n!==void 0&&(e.r=n),e.S.n=e,e.i=-1,e.n===void 0){t.s=e;break}}}function ft(t){for(var e=t.s,n=void 0;e!==void 0;){var o=e.p;e.i===-1?(e.S.U(e),o!==void 0&&(o.n=e.n),e.n!==void 0&&(e.n.p=o)):n=e,e.S.n=e.r,e.r!==void 0&&(e.r=void 0),e=o}t.s=n}function R(t,e){k.call(this,void 0),this.x=t,this.s=void 0,this.g=_e-1,this.f=4,this.W=e==null?void 0:e.watched,this.Z=e==null?void 0:e.unwatched,this.name=e==null?void 0:e.name}R.prototype=new k,R.prototype.h=function(){if(this.f&=-3,1&this.f)return!1;if((36&this.f)==32||(this.f&=-5,this.g===_e))return!0;if(this.g=_e,this.f|=1,this.i>0&&!_t(this))return this.f&=-2,!0;var t=p;try{dt(this),p=this;var e=this.x();(16&this.f||this.v!==e||this.i===0)&&(this.v=e,this.f&=-17,this.i++)}catch(n){this.v=n,this.f|=16,this.i++}return p=t,ft(this),this.f&=-2,!0},R.prototype.S=function(t){if(this.t===void 0){this.f|=36;for(var e=this.s;e!==void 0;e=e.n)e.S.S(e)}k.prototype.S.call(this,t)},R.prototype.U=function(t){if(this.t!==void 0&&(k.prototype.U.call(this,t),this.t===void 0)){this.f&=-33;for(var e=this.s;e!==void 0;e=e.n)e.S.U(e)}},R.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;t!==void 0;t=t.x)t.t.N()}},Object.defineProperty(R.prototype,"value",{get:function(){if(1&this.f)throw new Error("Cycle detected");var t=ut(this);if(this.h(),t!==void 0&&(t.i=this.i),16&this.f)throw this.v;return this.v}});function Te(t,e){return new R(t,e)}function ht(t){var e=t.m;if(t.m=void 0,typeof e=="function"){U++;var n=p;p=void 0;try{e()}catch(o){throw t.f&=-2,t.f|=8,Ee(t),o}finally{p=n,Me()}}}function Ee(t){for(var e=t.s;e!==void 0;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,ht(t)}function qt(t){if(p!==this)throw new Error("Out-of-order effect");ft(this),p=t,this.f&=-2,8&this.f&&Ee(this),Me()}function O(t,e){this.x=t,this.m=void 0,this.s=void 0,this.u=void 0,this.f=32,this.name=e==null?void 0:e.name}O.prototype.c=function(){var t=this.S();try{if(8&this.f||this.x===void 0)return;var e=this.x();typeof e=="function"&&(this.m=e)}finally{t()}},O.prototype.S=function(){if(1&this.f)throw new Error("Cycle detected");this.f|=1,this.f&=-9,ht(this),dt(this),U++;var t=p;return p=this,qt.bind(this,t)},O.prototype.N=function(){2&this.f||(this.f|=2,this.u=J,J=this)},O.prototype.d=function(){this.f|=8,1&this.f||Ee(this)},O.prototype.dispose=function(){this.d()};function Ie(t,e){var n=new O(t,e);try{n.c()}catch(i){throw n.d(),i}var o=n.d.bind(n);return o[Symbol.dispose]=o,o}var de,fe;function Y(t,e){m[t]=e.bind(null,m[t]||function(){})}function he(t){if(fe){var e=fe;fe=void 0,e()}fe=t&&t.S()}function vt(t){var e=this,n=t.data,o=D(n);o.value=n;var i=G(function(){for(var r=e.__v;r=r.__;)if(r.__c){r.__c.__$f|=4;break}return e.__$u.c=function(){var l,s=e.__$u.S(),_=i.value;s(),Ue(_)||((l=e.base)==null?void 0:l.nodeType)!==3?(e.__$f|=1,e.setState({})):e.base.data=_},Te(function(){var l=o.value.value;return l===0?0:l===!0?"":l||""})},[]);return i.value}vt.displayName="_st",Object.defineProperties(k.prototype,{constructor:{configurable:!0,value:void 0},type:{configurable:!0,value:vt},props:{configurable:!0,get:function(){return{data:this}}},__b:{configurable:!0,value:1}}),Y("__b",function(t,e){if(typeof e.type=="string"){var n,o=e.props;for(var i in o)if(i!=="children"){var r=o[i];r instanceof k&&(n||(e.__np=n={}),n[i]=r,o[i]=r.peek())}}t(e)}),Y("__r",function(t,e){t(e),he();var n,o=e.__c;o&&(o.__$f&=-2,(n=o.__$u)===void 0&&(o.__$u=n=function(i){var r;return Ie(function(){r=this}),r.c=function(){o.__$f|=1,o.setState({})},r}())),de=o,he(n)}),Y("__e",function(t,e,n,o){he(),de=void 0,t(e,n,o)}),Y("diffed",function(t,e){he(),de=void 0;var n;if(typeof e.type=="string"&&(n=e.__e)){var o=e.__np,i=e.props;if(o){var r=n.U;if(r)for(var l in r){var s=r[l];s!==void 0&&!(l in o)&&(s.d(),r[l]=void 0)}else n.U=r={};for(var _ in o){var a=r[_],d=o[_];a===void 0?(a=Vt(n,_,d,i),r[_]=a):a.o(d,i)}}}t(e)});function Vt(t,e,n,o){var i=e in t&&t.ownerSVGElement===void 0,r=T(n);return{o:function(l,s){r.value=l,o=s},d:Ie(function(){var l=r.value.value;o[e]!==l&&(o[e]=l,i?t[e]=l:l?t.setAttribute(e,l):t.removeAttribute(e))})}}Y("unmount",function(t,e){if(typeof e.type=="string"){var n=e.__e;if(n){var o=n.U;if(o){n.U=void 0;for(var i in o){var r=o[i];r&&r.d()}}}}else{var l=e.__c;if(l){var s=l.__$u;s&&(l.__$u=void 0,s.d())}}t(e)}),Y("__h",function(t,e,n,o){(o<3||o===9)&&(e.__$f|=2),t(e,n,o)}),j.prototype.shouldComponentUpdate=function(t,e){if(this.__R)return!0;var n=this.__$u,o=n&&n.s!==void 0;for(var i in e)return!0;if(this.__f||typeof this.u=="boolean"&&this.u===!0){if(!(o||2&this.__$f||4&this.__$f)||1&this.__$f)return!0}else if(!(o||4&this.__$f)||3&this.__$f)return!0;for(var r in t)if(r!=="__source"&&t[r]!==this.props[r])return!0;for(var l in this.props)if(!(l in t))return!0;return!1};function D(t){return G(function(){return T(t)},[])}function E(t){var e=z(t);return e.current=t,de.__$f|=4,G(function(){return Te(function(){return e.current()})},[])}const H=T(null),He=T(1),B=T(!!localStorage.getItem("cc_devtools_show")),F=T(!1),q=T([]),$=T(new Set);Te(()=>H.value!==null);const ve=T("");B.subscribe(t=>{t?localStorage.setItem("cc_devtools_show","1"):localStorage.removeItem("cc_devtools_show")});const V=()=>window.cc,pe=()=>{var t,e;return(e=(t=V())==null?void 0:t.director)==null?void 0:e.getScene()},pt=()=>!!V()&&!!pe(),Zt=t=>{var e;return!!t&&((e=V())==null?void 0:e.isValid(t))},jt=t=>((t==null?void 0:t.components)??[]).map(e=>({name:e.__classname__,target:e})),Gt=(t,e)=>(t==null?void 0:t.getChildByUuid(e))??null,mt=t=>{let e=pe();for(const n of t)if(e=Gt(e,n),!e)return null;return e},gt=t=>{let e=1;for(;window["temp"+e]!==void 0;)e++;window["temp"+e]=t,console.log("temp"+e,t)},Jt=t=>{const e=V();if(!e)return;let n;const o=t.getComponent(e.UITransformComponent);if(o)n=Kt(o,e);else{const h=e.v3();t.getWorldPosition(h),n=e.rect(h.x,h.y,0,0)}const i=new e.Node("__DevTools_Highlight__");pe().addChild(i),i.addComponent(e.Canvas);const l=new e.Node,s=l.addComponent(e.GraphicsComponent),_=l.addComponent(e.UITransformComponent);i.addChild(l);const a=e.v3(n.center.x,n.center.y,0),d=e.v3();i.getComponent(e.UITransformComponent).convertToNodeSpaceAR(a,d),l.setPosition(d),l.layer=t.layer,n.width===0||n.height===0?(s.circle(0,0,100),s.fillColor=e.Color.GREEN,s.fill()):(_.width=n.width,_.height=n.height,s.rect(-_.width/2,-_.height/2,_.width,_.height),s.fillColor=new e.Color().fromHEX("#E91E6390"),s.fill()),setTimeout(()=>{e.isValid(i)&&i.destroy()},2e3)};function Kt(t,e){const n=e.mat4();if(t.node.parent){t.node.parent.getWorldMatrix(n);const o=n,i=e.mat4();e.Mat4.fromRTS(i,t.node.getRotation(),t.node.getPosition(),t.node.getScale());const r=t._contentSize.width,l=t._contentSize.height,s=e.rect(-t._anchorPoint.x*r,-t._anchorPoint.y*l,r,l);return e.Mat4.multiply(n,o,i),s.transformMat4(n),s}return t.getBoundingBox()}function yt(t,e){var o;const n=[];for(const i of t){const r=[...e,i.uuid],l={uuid:i.uuid,name:i.name,active:i.activeInHierarchy,children:((o=i.children)==null?void 0:o.length)>0?yt(i.children,r):[],path:r};n.push(l)}return n}function wt(t,e,n=0){const o=e.toLowerCase(),i=[];for(const r of t)r.name.toLowerCase().includes(o)&&i.push({node:r,depth:n}),i.push(...wt(r.children,e,n+1));return i}function Qt(t,e){const n=e.toLowerCase(),o=new Set;function i(r,l){const s=r.name.toLowerCase().includes(n);let _=!1;for(const a of r.children)i(a,[...l,r.uuid])&&(_=!0);if(s||_)for(const a of l)o.add(a);return s||_}for(const r of t)i(r,[]);return o}function bt(t,e){for(const n of t){if(n.uuid===e)return[n.uuid];const o=bt(n.children,e);if(o)return[n.uuid,...o]}}function en({text:t,query:e}){if(!e)return u("span",{class:"tree-label",children:t});const n=t.toLowerCase().indexOf(e.toLowerCase());return n===-1?u("span",{class:"tree-label",children:t}):u("span",{class:"tree-label",children:[t.slice(0,n),u("mark",{class:"tree-highlight",children:t.slice(n,n+e.length)}),t.slice(n+e.length)]})}function tn({node:t,query:e}){const n=E(()=>$.value.has(t.uuid)),o=E(()=>{var s;return((s=H.value)==null?void 0:s.uuid)===t.uuid}),i=t.children.length>0,r=A(()=>{const s=mt(t.path);H.value=s??null},[t.path]),l=A(s=>{s.stopPropagation();const _=new Set($.value);_.has(t.uuid)?_.delete(t.uuid):_.add(t.uuid),$.value=_},[t.uuid]);return u("div",{class:"tree-node",children:[u("div",{class:`tree-row${o.value?" selected":""}${t.active?"":" inactive"}`,style:{paddingLeft:"8px"},onClick:r,children:[u("span",{class:`tree-arrow${i?"":" invisible"}${n.value?" expanded":""}`,onClick:l,children:"›"}),u(en,{text:t.name,query:e})]}),i&&n.value&&u("div",{class:"tree-children",children:t.children.map(s=>u(Ne,{node:s,depth:1},s.uuid))})]})}function Ne({node:t,depth:e}){const n=E(()=>$.value.has(t.uuid)),o=E(()=>{var s;return((s=H.value)==null?void 0:s.uuid)===t.uuid}),i=t.children.length>0,r=A(s=>{s.stopPropagation();const _=mt(t.path);H.value=_??null},[t.path]),l=A(s=>{s.stopPropagation();const _=new Set($.value);_.has(t.uuid)?_.delete(t.uuid):_.add(t.uuid),$.value=_},[t.uuid]);return u("div",{class:"tree-node",children:[u("div",{class:`tree-row${o.value?" selected":""}${t.active?"":" inactive"}`,style:{paddingLeft:`${e*14+6}px`},onClick:r,children:[u("span",{class:`tree-arrow${i?"":" invisible"}${n.value?" expanded":""}`,onClick:l,children:"›"}),u("span",{class:"tree-label",children:t.name})]}),i&&n.value&&u("div",{class:"tree-children",children:t.children.map(s=>u(Ne,{node:s,depth:e+1},s.uuid))})]})}function nn(){const t=D(!1),e=z(null),n=E(()=>ve.value.trim()),o=E(()=>n.value?wt(q.value,n.value):null);M(()=>{if(!n.value)return;const s=Qt(q.value,n.value);s.size!==0&&($.value=new Set([...$.value,...s]))},[n.value]),M(()=>{let s,_=!1;function a(){pt()&&(_||(_=!0,t.value=!0),q.value=yt(pe().children,[]),He.value=-He.value),s=requestAnimationFrame(a)}const d=setInterval(()=>{pt()&&(clearInterval(d),s=requestAnimationFrame(a))},500);return()=>{clearInterval(d),cancelAnimationFrame(s)}},[]);const i=A(s=>{ve.value=s.target.value},[]),r=A(()=>{var a;const s=H.value;if(ve.value="",(a=e.current)==null||a.focus(),!s)return;const _=bt(q.value,s.uuid);if(_&&_.length>1){const d=new Set($.value);for(let c=0;c<_.length-1;c++)d.add(_[c]);$.value=d}requestAnimationFrame(()=>{var h,f;const d=(f=(h=e.current)==null?void 0:h.closest(".tree-panel"))==null?void 0:f.querySelector(".tree-scroll"),c=d==null?void 0:d.querySelector(".tree-row.selected");c==null||c.scrollIntoView({block:"center",behavior:"smooth"})})},[]),l=A(s=>{s.key==="Escape"&&r()},[r]);return u("div",{class:"tree-panel",children:[u("div",{class:"panel-header",children:"节点树"}),u("div",{class:"tree-search-bar",children:[u("span",{class:"tree-search-icon",children:"⌕"}),u("input",{ref:e,class:"tree-search-input",type:"text",placeholder:"搜索节点…",value:ve.value,onInput:i,onKeyDown:l}),n.value&&u("button",{class:"tree-search-clear",onClick:r,title:"清空",children:"✕"})]}),u("div",{class:"tree-scroll",children:t.value?o.value!==null?o.value.length===0?u("div",{class:"tree-empty",children:"未找到匹配节点"}):u(L,{children:[u("div",{class:"tree-search-count",children:[o.value.length," 个结果"]}),o.value.map(({node:s})=>u(tn,{node:s,query:n.value},s.uuid))]}):q.value.length===0?u("div",{class:"tree-empty",children:"场景为空"}):q.value.map(s=>u(Ne,{node:s,depth:0},s.uuid)):u("div",{class:"tree-empty",children:"等待引擎初始化…"})})]})}const Le=class Le{static get node(){return H.value}static get nodeName(){var e;return((e=this.node)==null?void 0:e.name)??""}static set nodeName(e){this.node&&(this.node.name=e)}static get x(){var e;return((e=this.node)==null?void 0:e.getPosition().x)??0}static set x(e){if(!this.node)return;const n=this.node.getPosition();this.node.setPosition(e,n.y,n.z)}static get y(){var e;return((e=this.node)==null?void 0:e.getPosition().y)??0}static set y(e){if(!this.node)return;const n=this.node.getPosition();this.node.setPosition(n.x,e,n.z)}static get z(){var e;return((e=this.node)==null?void 0:e.getPosition().z)??0}static set z(e){if(!this.node)return;const n=this.node.getPosition();this.node.setPosition(n.x,n.y,e)}static get scaleX(){var e;return((e=this.node)==null?void 0:e.getScale().x)??1}static set scaleX(e){if(!this.node)return;const n=this.node.getScale();this.node.setScale(e,n.y,n.z)}static get scaleY(){var e;return((e=this.node)==null?void 0:e.getScale().y)??1}static set scaleY(e){if(!this.node)return;const n=this.node.getScale();this.node.setScale(n.x,e,n.z)}static get scaleZ(){var e;return((e=this.node)==null?void 0:e.getScale().z)??1}static set scaleZ(e){if(!this.node)return;const n=this.node.getScale();this.node.setScale(n.x,n.y,e)}};Le.props=[{name:"Name",key:"nodeName"},{name:"X",key:"x"},{name:"Y",key:"y"},{name:"Z",key:"z"},{name:"Scale X",key:"scaleX"},{name:"Scale Y",key:"scaleY"},{name:"Scale Z",key:"scaleZ"}];let me=Le;function on(t){return t==null?"unknown":typeof t=="object"&&t.__classname__?t.__classname__:typeof t}function rn(t){return`#${t.toHEX()}`}function sn(t){return new(V()).Color().fromHEX(t)}function St(t){return Number.isInteger(t)?String(t):parseFloat(t.toFixed(3)).toString()}function ln({model:t,propKey:e}){const n=z(null);return M(()=>{const o=n.current;if(!o||document.activeElement===o)return;const i=t[e];parseFloat(o.value)!==i&&(o.value=St(i))}),u("input",{ref:n,type:"number",class:"prop-input",defaultValue:St(t[e]),step:"0.1",onInput:o=>{const i=parseFloat(o.target.value);isNaN(i)||(t[e]=i)}})}function cn({model:t,propKey:e}){const n=z(null);return M(()=>{const o=n.current;if(!o||document.activeElement===o)return;const i=String(t[e]??"");o.value!==i&&(o.value=i)}),u("input",{ref:n,type:"text",class:"prop-input",defaultValue:t[e],onInput:o=>{t[e]=o.target.value}})}function kt({model:t,propName:e,propKey:n}){const o=t[n],i=on(o);return u("div",{class:"prop-row",children:[u("span",{class:"prop-name",children:e}),u("div",{class:"prop-value",children:[i==="number"&&u(ln,{model:t,propKey:n}),i==="string"&&u(cn,{model:t,propKey:n}),i==="boolean"&&u("input",{type:"checkbox",class:"prop-checkbox",checked:o,onChange:r=>{t[n]=r.target.checked}}),i==="cc.Color"&&u("input",{type:"color",class:"prop-color",value:rn(o),onChange:r=>{t[n]=sn(r.target.value)}}),!["number","string","boolean","cc.Color"].includes(i)&&u("span",{class:"prop-unknown",children:String(o)})]})]})}function an(t,e){switch(t){case"cc.UITransform":return new un(e);case"cc.Label":return new _n(e);case"cc.Sprite":return new dn(e);default:return null}}class un{constructor(e){this.getter=e,this.props=[{name:"Width",key:"width"},{name:"Height",key:"height"},{name:"Anchor X",key:"anchorX"},{name:"Anchor Y",key:"anchorY"}]}get width(){var e;return((e=this.getter())==null?void 0:e.contentSize.width)??0}set width(e){const n=this.getter();n&&n.setContentSize(e,n.contentSize.height)}get height(){var e;return((e=this.getter())==null?void 0:e.contentSize.height)??0}set height(e){const n=this.getter();n&&n.setContentSize(n.contentSize.width,e)}get anchorX(){var e;return((e=this.getter())==null?void 0:e.anchorPoint.x)??0}set anchorX(e){const n=this.getter();n&&n.setAnchorPoint(e,n.anchorPoint.y)}get anchorY(){var e;return((e=this.getter())==null?void 0:e.anchorPoint.y)??0}set anchorY(e){const n=this.getter();n&&n.setAnchorPoint(n.anchorPoint.x,e)}}class _n{constructor(e){this.getter=e,this.props=[{name:"String",key:"string"},{name:"Color",key:"color"},{name:"Font Size",key:"fontSize"},{name:"Line Height",key:"lineHeight"}]}get string(){var e;return((e=this.getter())==null?void 0:e.string)??""}set string(e){const n=this.getter();n&&(n.string=e)}get color(){var e;return(e=this.getter())==null?void 0:e.color}set color(e){const n=this.getter();n&&(n.color=e)}get fontSize(){var e;return((e=this.getter())==null?void 0:e.fontSize)??0}set fontSize(e){const n=this.getter();n&&(n.fontSize=e)}get lineHeight(){var e;return((e=this.getter())==null?void 0:e.lineHeight)??0}set lineHeight(e){const n=this.getter();n&&(n.lineHeight=e)}}class dn{constructor(e){this.getter=e,this.props=[{name:"Color",key:"color"}]}get color(){var e;return(e=this.getter())==null?void 0:e.color}set color(e){const n=this.getter();n&&(n.color=e)}}function fn({name:t,component:e,updateKey:n}){const o=D(!1),i=an(t,()=>e);return u("div",{class:"comp-panel",children:[u("div",{class:"comp-header",onClick:()=>{o.value=!o.value},children:[u("input",{type:"checkbox",class:"comp-enabled",checked:e==null?void 0:e.enabled,onClick:r=>r.stopPropagation(),onChange:r=>{e&&(e.enabled=r.target.checked)}}),u("span",{class:"comp-name",children:t}),u("span",{class:"comp-arrow",children:o.value?"›":"⌄"}),u("button",{class:"icon-btn",title:"输出到控制台",onClick:r=>{r.stopPropagation(),gt(e)},children:">"})]}),!o.value&&i&&u("div",{class:"comp-props",children:i.props.map(r=>u(kt,{model:i,propName:r.name,propKey:r.key},r.key))}),!o.value&&!i&&u("div",{class:"comp-empty",children:"（无可编辑属性）"})]})}function hn(){const t=E(()=>H.value),e=E(()=>He.value);if(!t.value||!Zt(t.value))return u("div",{class:"prop-panel",children:[u("div",{class:"panel-header",children:"属性"}),u("div",{class:"prop-empty",children:"未选中节点"})]});const n=t.value,o=jt(n);return u("div",{class:"prop-panel",children:[u("div",{class:"panel-header",children:"属性"}),u("div",{class:"prop-scroll",children:[u("div",{class:"comp-panel",children:[u("div",{class:"comp-header",children:[u("input",{type:"checkbox",class:"comp-enabled",checked:n.active,onChange:i=>{n.active=i.target.checked}}),u("span",{class:"comp-name",children:"Node"}),u("div",{style:"flex:1"}),u("button",{class:"icon-btn",title:"高亮节点",onClick:()=>Jt(n),children:"⊡"}),u("button",{class:"icon-btn",title:"输出到控制台",onClick:()=>gt(n),children:">"})]}),u("div",{class:"comp-props",children:me.props.map(i=>u(kt,{model:me,propName:i.name,propKey:i.key},i.key))})]}),u("div",{class:"divider"}),o.map(({name:i,target:r})=>u(fn,{name:i,component:r,updateKey:e.value},i))]})]})}const Ct=["fps","draws","frame","instances","tricount","logic","physics","render","textureMemory","bufferMemory"];function $t(){const t=D(Ct.map(i=>({key:i,desc:i,value:"—"}))),e=z(null),n=D(window.innerWidth-260),o=D(60);return M(()=>{if(!F.value)return;function i(){var _;const l=V();if(!((_=l==null?void 0:l.profiler)!=null&&_.stats))return;const s=l.profiler.stats;t.value=Ct.map(a=>{const d=s[a];if(!d)return{key:a,desc:a,value:"—"};const c=d.isInteger?String(d.counter._value|0):d.counter._value.toFixed(2);return{key:a,desc:d.desc??a,value:c}})}i();const r=setInterval(i,1e3);return()=>clearInterval(r)},[F.value]),M(()=>{var f;const i=(f=e.current)==null?void 0:f.querySelector(".profiler-drag");if(!i)return;let r=0,l=0,s=0,_=0,a=!1;function d(v){a&&(n.value=s+(v.clientX-r),o.value=_+(v.clientY-l))}function c(){a=!1,document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",c)}function h(v){a=!0,r=v.clientX,l=v.clientY,s=n.value,_=o.value,document.addEventListener("mousemove",d),document.addEventListener("mouseup",c)}return i.addEventListener("mousedown",h),()=>i.removeEventListener("mousedown",h)},[F.value]),F.value?u("div",{ref:e,class:"profiler-float",style:{left:`${n.value}px`,top:`${o.value}px`},children:[u("div",{class:"profiler-drag",children:[u("span",{children:"Profiler"}),u("button",{class:"icon-btn",onClick:()=>{F.value=!1},children:"✕"})]}),u("div",{class:"profiler-body",children:t.value.map(i=>u("div",{class:"profiler-row",children:[u("span",{class:"profiler-desc",children:i.desc}),u("span",{class:"profiler-val",children:i.value})]},i.key))})]}):null}const xt=240,Pt=600,Mt="cc_devtools_width";function vn(){const t=parseInt(localStorage.getItem(Mt)??"",10);return isNaN(t)?320:Math.min(Pt,Math.max(xt,t))}function pn(){const t=document.querySelector(".toolbar");return t?t.getBoundingClientRect().height:42}function Tt(t){const e=document.getElementById("content");e&&(e.style.paddingRight=`${t+16}px`)}function Et(){const t=document.getElementById("content");t&&(t.style.paddingRight="")}function It({toolbarH:t}){const e=B.value;return u("button",{class:`ccdev-toggle${e?" active":""}`,style:{top:`${Math.round(t/2)}px`},onClick:()=>{B.value=!B.value},title:e?"关闭 DevTools":"打开 DevTools",children:u("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",children:[u("path",{d:"M8 2l1.88 1.88"}),u("path",{d:"M14.12 3.88L16 2"}),u("path",{d:"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"}),u("path",{d:"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"}),u("path",{d:"M12 20v-9"}),u("path",{d:"M6.53 9C4.6 8.8 3 7.1 3 5"}),u("path",{d:"M6 13H2"}),u("path",{d:"M3 21c0-2.1 1.7-3.9 3.8-4"}),u("path",{d:"M20.97 5c0 2.1-1.6 3.8-3.5 4"}),u("path",{d:"M22 13h-4"}),u("path",{d:"M17.2 17c2.1.1 3.8 1.9 3.8 4"})]})})}function mn(){const t=E(()=>B.value),e=z(null),n=z(null),o=D(pn());window.__ccDevToolsToggle=()=>{B.value=!B.value},window.__ccProfilerToggle=()=>{F.value=!F.value},M(()=>{let s=null;function _(){const a=document.querySelector(".toolbar");return a?(o.value=Math.round(a.getBoundingClientRect().bottom),s=new ResizeObserver(()=>{o.value=Math.round(a.getBoundingClientRect().bottom)}),s.observe(a),!0):!1}if(!_()){const a=setInterval(()=>{_()&&clearInterval(a)},100);return()=>clearInterval(a)}return()=>s==null?void 0:s.disconnect()},[]),M(()=>{if(t.value){const s=vn();document.documentElement.style.setProperty("--devtools-width",`${s}px`),Tt(s)}else Et();return()=>{Et()}},[t.value]),M(()=>{const s=n.current,_=e.current;if(!s||!_)return;let a=0,d=0;function c(v){const S=a-v.clientX,b=Math.min(Pt,Math.max(xt,d+S));document.documentElement.style.setProperty("--devtools-width",`${b}px`),Tt(b)}function h(){if(!s)return;s.classList.remove("dragging");const v=document.getElementById("content");v&&(v.style.pointerEvents="");const S=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--devtools-width"),10);localStorage.setItem(Mt,String(S)),document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",h),document.body.style.cursor="",document.body.style.userSelect=""}function f(v){if(!s||!_)return;v.preventDefault(),a=v.clientX,d=_.getBoundingClientRect().width,s.classList.add("dragging");const S=document.getElementById("content");S&&(S.style.pointerEvents="none"),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.addEventListener("mousemove",c),document.addEventListener("mouseup",h)}return s.addEventListener("mousedown",f),()=>s.removeEventListener("mousedown",f)},[t.value]);const i=8,r=`${o.value+i}px`,l=`calc(100vh - ${o.value+i*2}px)`;return t.value?u(L,{children:[u(It,{toolbarH:o.value}),u("div",{id:"cc-devtools",ref:e,style:{top:r,height:l},children:[u("div",{id:"cc-devtools-resize",ref:n,title:"拖拽调整面板宽度"}),u("a",{class:"ccdev-github",href:"https://github.com/potato47/ccc-devtools",target:"_blank",title:"GitHub",children:u("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",children:u("path",{d:"M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"})})}),u(nn,{}),u(hn,{})]}),u($t,{})]}):u(L,{children:[u(It,{toolbarH:o.value}),u($t,{})]})}function Ht(){const t=document.getElementById("cc-devtools-root");t&&Ft(u(mn,{}),t)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Ht):Ht()})(); diff --git a/preview-template/devtools/assets/style.css b/preview-template/devtools/assets/style.css new file mode 100644 index 00000000..cc350412 --- /dev/null +++ b/preview-template/devtools/assets/style.css @@ -0,0 +1 @@ +:root{--bg-base: #16161e;--bg-panel: #1c1c28;--bg-control: #252535;--bg-hover: #2e2e48;--bg-selected: rgba(108, 99, 255, .22);--border: rgba(255, 255, 255, .08);--border-focus: rgba(108, 99, 255, .6);--accent: #6c63ff;--accent-light: #a89dff;--text-primary: #d0d0f0;--text-muted: #7878a0;--text-dim: rgba(208, 208, 240, .35);--radius: 5px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif}.ccdev-toggle{position:fixed;right:12px;transform:translateY(-50%);z-index:9999;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--bg-control);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.ccdev-toggle:hover{background:var(--bg-hover);border-color:var(--border-focus);color:var(--accent-light)}.ccdev-toggle.active{background:#6c63ff2e;border-color:var(--accent);color:var(--accent-light)}#cc-devtools{position:fixed;top:42px;right:8px;width:var(--devtools-width, 320px);height:calc(100vh - 42px);background:var(--bg-base);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;z-index:8888;font-family:var(--font);font-size:12px;color:var(--text-primary);overflow:hidden;box-shadow:0 8px 32px #00000080;transition:width 0s}.ccdev-github{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);border-radius:4px;transition:color .15s,background .15s}.ccdev-github:hover{color:var(--text-primary);background:var(--bg-hover)}#cc-devtools-resize{position:absolute;left:0;top:0;width:5px;height:100%;cursor:ew-resize;z-index:1;background:transparent;transition:background .15s}#cc-devtools-resize:hover,#cc-devtools-resize.dragging{background:#6c63ff66}#cc-devtools *{box-sizing:border-box}.panel-header{height:32px;line-height:32px;padding:0 10px;background:var(--bg-panel);border-bottom:1px solid var(--border);color:var(--text-muted);font-size:11px;letter-spacing:.8px;text-transform:uppercase;flex-shrink:0}.tree-panel{display:flex;flex-direction:column;flex:1;min-height:0;border-bottom:2px solid var(--border)}.tree-search-bar{display:flex;align-items:center;height:32px;padding:0 8px;gap:6px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0}.tree-search-icon{color:var(--text-muted);font-size:15px;flex-shrink:0;line-height:1;margin-top:1px}.tree-search-input{flex:1;height:22px;background:var(--bg-control);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:11px;padding:0 6px;outline:none;transition:border-color .15s;min-width:0}.tree-search-input::placeholder{color:var(--text-muted)}.tree-search-input:focus{border-color:var(--border-focus)}.tree-search-clear{flex-shrink:0;width:18px;height:18px;padding:0;background:transparent;border:none;border-radius:50%;color:var(--text-muted);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}.tree-search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.tree-search-count{padding:4px 10px;font-size:10px;color:var(--text-muted);letter-spacing:.3px}.tree-highlight{background:#6c63ff73;color:#fff;border-radius:2px;padding:0 1px}.tree-scroll{flex:1;overflow-y:auto;overflow-x:hidden}.tree-scroll::-webkit-scrollbar{width:4px}.tree-scroll::-webkit-scrollbar-track{background:transparent}.tree-scroll::-webkit-scrollbar-thumb{background:#6c63ff4d;border-radius:2px}.tree-empty{padding:16px 12px;color:var(--text-muted);font-style:italic}.tree-node{display:block}.tree-row{display:flex;align-items:center;height:24px;cursor:pointer;border-radius:3px;margin:1px 4px;transition:background .12s;-webkit-user-select:none;user-select:none}.tree-row:hover{background:var(--bg-hover)}.tree-row.selected{background:var(--bg-selected)}.tree-row.inactive .tree-label{opacity:.35}.tree-arrow{width:16px;text-align:center;color:var(--text-muted);font-size:13px;flex-shrink:0;transition:transform .15s;display:inline-block}.tree-arrow.expanded{transform:rotate(90deg)}.tree-arrow.invisible{visibility:hidden}.tree-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}.prop-panel{display:flex;flex-direction:column;flex:1;min-height:0}.prop-scroll{flex:1;overflow-y:auto;overflow-x:hidden}.prop-scroll::-webkit-scrollbar{width:4px}.prop-scroll::-webkit-scrollbar-track{background:transparent}.prop-scroll::-webkit-scrollbar-thumb{background:#6c63ff4d;border-radius:2px}.prop-empty{padding:16px 12px;color:var(--text-muted);font-style:italic}.divider{height:1px;background:var(--border);margin:2px 0}.comp-panel{border-bottom:1px solid var(--border)}.comp-header{display:flex;align-items:center;height:28px;padding:0 8px;cursor:pointer;background:var(--bg-panel);gap:6px;-webkit-user-select:none;user-select:none}.comp-header:hover{background:var(--bg-hover)}.comp-name{flex:1;color:var(--accent-light);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comp-arrow{color:var(--text-muted);font-size:13px;width:14px;text-align:center}.comp-props{padding:4px 0}.comp-empty{padding:6px 12px;color:var(--text-muted);font-style:italic}.comp-enabled{accent-color:var(--accent);cursor:pointer}.prop-row{display:flex;align-items:center;height:26px;padding:0 8px;gap:8px}.prop-row:hover{background:#ffffff08}.prop-name{width:72px;flex-shrink:0;color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prop-value{flex:1;display:flex;align-items:center}.prop-input{width:100%;height:22px;padding:0 6px;background:var(--bg-control);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:11px;outline:none;transition:border-color .15s}.prop-input:focus{border-color:var(--border-focus)}.prop-checkbox{accent-color:var(--accent);cursor:pointer}.prop-color{width:100%;height:22px;padding:1px 3px;background:var(--bg-control);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}.prop-unknown{color:var(--text-muted);font-size:11px}.icon-btn{height:20px;min-width:20px;padding:0 5px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--text-muted);font-size:11px;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0}.icon-btn:hover{background:var(--bg-hover);border-color:var(--border-focus);color:var(--accent-light)}.profiler-float{position:fixed;width:220px;background:var(--bg-panel);border:1px solid rgba(108,99,255,.4);border-radius:6px;box-shadow:0 8px 32px #0009;z-index:9999;overflow:hidden}.profiler-drag{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 8px;background:var(--bg-hover);cursor:move;-webkit-user-select:none;user-select:none;font-size:11px;color:var(--text-muted);letter-spacing:.5px}.profiler-body{padding:4px 0}.profiler-row{display:flex;justify-content:space-between;align-items:center;padding:3px 10px;font-size:11px}.profiler-row:hover{background:#ffffff0a}.profiler-desc{color:var(--text-muted)}.profiler-val{color:var(--accent-light);font-family:monospace;font-size:12px}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield} diff --git a/preview-template/index.ejs b/preview-template/index.ejs new file mode 100644 index 00000000..e964dcd8 --- /dev/null +++ b/preview-template/index.ejs @@ -0,0 +1,49 @@ + + + + + <%=title%> + + + + + + + + + + + + + + + + <%- include(cocosToolBar, {config: config}) %> +
+
+
+
+ +
+
+
+
+
+
<%=tip_sceneIsEmpty%>
+
+
+
Error (Please open the console to see detailed errors)
+
+
+
+
+
+
+
+ <%- include(cocosTemplate, {}) %> + + +