From 05edad10f717c9bd3b2262d49f03b2e95d166305 Mon Sep 17 00:00:00 2001
From: xu_yanfeng <xu_yanfeng@126.com>
Date: Sun, 19 Jan 2025 12:12:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AA=E6=9C=89cocos=E6=B8=B8=E6=88=8F?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2=E6=89=8D=E6=B3=A8=E5=85=A5=E6=8F=92?=
 =?UTF-8?q?=E4=BB=B6=E6=8E=A8=E8=8D=90=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cc-inspector/src/scripts/inject-view/app.vue  | 13 ++++--
 cc-inspector/src/scripts/inject/index.ts      |  2 -
 .../src/scripts/inject/inject-view.ts         | 40 +++++++++++++------
 cc-inspector/src/scripts/inject/inspector.ts  |  2 +
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/cc-inspector/src/scripts/inject-view/app.vue b/cc-inspector/src/scripts/inject-view/app.vue
index 501f74b..69f3e25 100644
--- a/cc-inspector/src/scripts/inject-view/app.vue
+++ b/cc-inspector/src/scripts/inject-view/app.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="ad" v-show="ads.length && isShow">
     <div class="header">
-      <div class="title">Creator Plugin Recommendation</div>
-      <div style="flex: 1"></div>
+      <div class="title">Recommend</div>
+      <div class="line"></div>
       <div class="close" @click="onClose" :title="closeTitle">
         <i class="icon iconfont icon_close"></i>
       </div>
@@ -150,12 +150,13 @@ export default defineComponent({
   right: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  //overflow: hidden;
 
   .header {
     display: flex;
     align-items: flex-end;
     .title {
+      box-shadow: 0px 0px 2px 0px;
       font-size: 12px;
       user-select: none;
       background-color: white;
@@ -163,7 +164,13 @@ export default defineComponent({
       border-top-right-radius: 5px;
       padding: 3px 9px;
     }
+    .line {
+      height: 1px;
+      flex: 1;
+      box-shadow: 0px 0px 2px 0px;
+    }
     .close {
+      box-shadow: 0px 0px 3px 0px;
       background-color: white;
       border-top-left-radius: 10px;
       cursor: pointer;
diff --git a/cc-inspector/src/scripts/inject/index.ts b/cc-inspector/src/scripts/inject/index.ts
index 2c2bbf5..6492606 100644
--- a/cc-inspector/src/scripts/inject/index.ts
+++ b/cc-inspector/src/scripts/inject/index.ts
@@ -1,6 +1,4 @@
-import { InjectView } from "./inject-view";
 import { Inspector } from "./inspector";
 const inspector = new Inspector();
 inspector.init();
 window["CCInspector"] = inspector;
-const ad = new InjectView();
diff --git a/cc-inspector/src/scripts/inject/inject-view.ts b/cc-inspector/src/scripts/inject/inject-view.ts
index d814e22..8cd0a62 100644
--- a/cc-inspector/src/scripts/inject/inject-view.ts
+++ b/cc-inspector/src/scripts/inject/inject-view.ts
@@ -5,28 +5,44 @@ import { createApp } from "vue";
 import { DocumentEvent } from "../const";
 import App from "../inject-view/app.vue";
 export class InjectView {
+  private _inited = false;
+  private css: string[] = [];
   constructor() {
+    document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
+      const cssArray: string[] = event.detail;
+      this.css = cssArray;
+    });
+  }
+  public init() {
+    if (this._inited) {
+      return;
+    }
+    this._inited = true;
+    this.createUI();
+  }
+  private createUI() {
     const el = document.createElement("div");
-    el.attachShadow({ mode: "closed" });
     el.style.position = "absolute";
     el.style.zIndex = "99999";
     el.style.bottom = "0";
     el.style.right = "0";
     el.style.left = "0";
     document.body.appendChild(el);
+    const shadowRoot = el.attachShadow({ mode: "open" });
+    // load css
+    this.css.forEach((css) => {
+      const link = document.createElement("link");
+      link.href = css;
+      link.rel = "stylesheet";
+      shadowRoot.appendChild(link);
+    });
+    // vue
+    const root = document.createElement("div");
+    shadowRoot.appendChild(root);
     const app = createApp(App);
     // ccui.uiElement.setDoc(document);
     app.use(ccui);
-    app.mount(el);
-
-    document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
-      const cssArray: string[] = event.detail;
-      cssArray.forEach((css) => {
-        const link = document.createElement("link");
-        link.href = css;
-        link.rel = "stylesheet";
-        el.appendChild(link);
-      });
-    });
+    app.mount(root);
   }
 }
+export const injectView = new InjectView();
diff --git a/cc-inspector/src/scripts/inject/inspector.ts b/cc-inspector/src/scripts/inject/inspector.ts
index 16c1d8a..f7c18b1 100644
--- a/cc-inspector/src/scripts/inject/inspector.ts
+++ b/cc-inspector/src/scripts/inject/inspector.ts
@@ -3,6 +3,7 @@ import { uniq } from "lodash";
 import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseGameInfoData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
 import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectCircleData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../../views/devtools/data";
 import { InjectEvent } from "./event";
+import { injectView } from "./inject-view";
 import { getValue, trySetValueWithConfig } from "./setValue";
 import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types";
 import { isHasProperty } from "./util";
@@ -122,6 +123,7 @@ export class Inspector extends InjectEvent {
       const b = this._isCocosGame();
       if (b) {
         clearInterval(timer);
+        injectView.init();
         const version = this.getEngineVersion();
         if (b && version) {
           this.uploadEngineVersion(version);