取消shadowRoot，界面增加cocos小助手

cc-inspector/src/scripts/inject-view/app.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="ad" v-show="ads.length && isShow">
+  <div class="ad" ref="rootEl" v-show="!picking">
+    <div class="title" @mousedown="onMouseDown">
+      <i class="iconfont icon_cocos cocos"></i>
+      <div>Assistant</div>
+    </div>
+    <div class="pick" @click="onPick">
+      <i class="iconfont icon_target target"></i>
+      <div>inspect</div>
+    </div>
+    <div v-show="ads.length && isShow">
       <div class="header">
         <div class="title">Recommend</div>
         <div class="line"></div>
@@ -19,6 +28,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, toRaw } from "vue";
@@ -37,6 +47,7 @@ export default defineComponent({
     let timer = null;
     const closeTitle = ref("");
     onMounted(async () => {
+      return;
       const data = await getAdData();
       if (!data) {
         console.log(`get ad failed`);
@@ -97,7 +108,11 @@ export default defineComponent({
     const elAd = ref<HTMLElement>(null);
     const adWidth = 300;
     const isShow = ref(true);
+    const picking = ref(false);
+    const rootEl = ref<HTMLDivElement>(null);
     return {
+      rootEl,
+      picking,
       closeTitle,
       isShow,
       elAd,
@@ -137,6 +152,38 @@ export default defineComponent({
           el.scrollTo({ left: el.scrollLeft + adWidth, behavior: "smooth" });
         }
       },
+      onMouseDown(event: MouseEvent) {
+        const root = toRaw(rootEl.value) as HTMLDivElement;
+        if (!root) {
+          return;
+        }
+        const startY = event.pageY;
+        const startTop = root.offsetTop;
+        function onMouseMove(e: MouseEvent) {
+          const dy = e.pageY - startY;
+          let top = startTop + dy;
+          if (top < 0) {
+            top = 0;
+          }
+          root.style.top = `${top}px`;
+        }
+
+        function onMouseUp(e: MouseEvent) {
+          document.removeEventListener("mousemove", onMouseMove, true);
+          document.removeEventListener("mouseup", onMouseUp, true);
+        }
+        document.addEventListener("mousemove", onMouseMove, true);
+        document.addEventListener("mouseup", onMouseUp, true);
+      },
+      onPick() {
+        picking.value = true;
+        const cursor = document.body.style.cursor;
+        document.body.style.cursor = "zoom-in";
+        document.addEventListener("mousedown", () => {
+          document.body.style.cursor = cursor;
+          picking.value = false;
+        });
+      },
     };
   },
 });
@@ -147,13 +194,49 @@ export default defineComponent({
 @color-hover: #f9c04e;
 @color-active: #ffaa00;
 .ad {
-  position: absolute;
+  position: fixed;
-  bottom: 0;
+  z-index: 99999;
-  left: 0;
+  top: 0px;
-  right: 0;
+  right: 0px;
   display: flex;
   flex-direction: column;
+  background-color: white;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
   // overflow: hidden;
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: move;
+    font-size: 14px;
+    user-select: none;
+    background-color: rgb(0, 0, 0);
+    border: 1px solid black;
+    color: white;
+    padding: 0 4px;
+    border-top-left-radius: 5px;
+    // border-bottom-left-radius: 5px;
+    .cocos {
+      color: rgb(85, 192, 224);
+    }
+  }
+  .pick {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: black;
+    user-select: none;
+    &:hover {
+      color: rgb(101, 163, 249);
+    }
+    &:active {
+      color: rgb(255, 187, 0);
+    }
+    .target {
+      font-size: 19px;
+    }
+  }
 
   .header {
     display: flex;

cc-inspector/src/scripts/inject/inject-view.ts

@@ -7,7 +7,6 @@ import App from "../inject-view/app.vue";
 export class InjectView {
   private _inited = false;
   private css: string[] = [];
-  private shadowRoot: ShadowRoot | null = null;
   private hasLoadCss = false;
   constructor() {
     document.addEventListener(DocumentEvent.LoadInjectCss, (event: CustomEvent) => {
@@ -24,9 +23,6 @@ export class InjectView {
     this.createUI();
   }
   private loadCss() {
-    if (!this.shadowRoot) {
-      return;
-    }
     if (this.hasLoadCss) {
       return;
     }
@@ -38,30 +34,20 @@ export class InjectView {
       const link = document.createElement("link");
       link.href = css;
       link.rel = "stylesheet";
-      this.shadowRoot.appendChild(link);
+      document.head.appendChild(link);
     });
   }
   private createUI() {
     const el = document.createElement("div");
-    el.style.position = "fixed";
+    el.setAttribute("app", "");
-    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" });
-    shadowRoot.ATTRIBUTE_NODE;
-    this.shadowRoot = shadowRoot;
-
     // load css
     this.loadCss();
     // vue
-    const root = document.createElement("div");
-    shadowRoot.appendChild(root);
     const app = createApp(App);
     // ccui.uiElement.setDoc(document);
     app.use(ccui);
-    app.mount(root);
+    app.mount(el);
   }
 }
 export const injectView = new InjectView();