单独的插件广告窗口

cc-inspector/src/ga/type.ts

@@ -91,6 +91,10 @@ export enum GA_EventName {
    * 展示广告
    */
   ShowAd = "show_ad",
+  /**
+   * 用户主动使用inspector检查游戏节点
+   */
+  DoInspector = "do_inspector",
 }
 export enum GA_Button {
   Github = "github",

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

@@ -1,36 +1,24 @@
 <template>
-  <div v-show="ads.length && isShow" class="ad">
-    <div class="header">
-      <div class="title">Recommend</div>
-      <div class="line"></div>
-      <div class="close" @click="onClose" :title="closeTitle">
-        <div class="icon">x</div>
-      </div>
-    </div>
+  <div v-show="ads.length" class="ad">
     <div class="body" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-      <div class="left slide" @click="onClickBtnLeft">
-        <div class="arrow">&lt;</div>
-      </div>
-      <div class="list" ref="elAd" @wheel="onWheel">
+      <div class="list ccui-scrollbar">
         <Banner v-for="(item, index) in ads" :data="item" :key="index"></Banner>
       </div>
-      <div class="right slide" @click="onClickBtnRight">
-        <div class="arrow">&gt;</div>
-      </div>
     </div>
   </div>
 </template>
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
 import { defineComponent, onMounted, onUnmounted, ref, toRaw } from "vue";
-import { AdItem, getAdData } from "./loader";
-import { emitter, Msg } from "./const";
-import { ga } from "./util";
 import { GA_EventName } from "../../ga/type";
+import Banner from "./banner.vue";
+import { emitter, Msg } from "./const";
+import { AdItem, getAdData } from "./loader";
+import { ga } from "./util";
 const { CCButton } = ccui.components;
 export default defineComponent({
   name: "ad",
-  components: { CCButton },
+  components: { CCButton, Banner },
   setup(props, { emit }) {
     onMounted(async () => {
       const data = await getAdData();
@@ -48,191 +36,44 @@ export default defineComponent({
       }
       ads.value = data.data;
       console.log("get ads ", toRaw(ads.value));
-      closeTitle.value = `display again in ${data.showDuration} minute`;
 
-      visibleAd(data.showDuration);
-      adScroll(data.scrollDuration);
-    });
-    onUnmounted(() => {
-      clearInterval(timer);
+      ga(GA_EventName.ShowAd);
     });
+    onUnmounted(() => {});
     function testBanner() {
       const data = new AdItem();
       data.name = "ad test 11111111111 11111111111 44444444444444  5555555555555 111111111111111111 2222222222222222 33333333333333 444444444444444";
       data.store = "http://www.baidu.com";
       emitter.emit(Msg.ChangeAd, data);
     }
-    let timer = null;
-    const key = "close-time";
-    function adScroll(scrollDuration: number) {
-      timer = setInterval(() => {
-        // return;
-        if (stopAutoScroll) {
-          return;
-        }
-        if (elAd.value) {
-          const el = elAd.value as HTMLElement;
 
-          let left = el.scrollLeft + adWidth;
-          if (el.scrollLeft + el.clientWidth >= el.scrollWidth) {
-            left = 0;
-          }
-          el.scrollTo({ left, behavior: "smooth" });
-        }
-      }, scrollDuration * 1000);
-    }
-    function visibleAd(showDuration: number) {
-      const time = Number(localStorage.getItem(key) || "0");
-      if (time) {
-        // 单位分钟
-        const diff = (Date.now() - time) / 1000 / 60;
-        isShow.value = diff >= showDuration;
-        if (isShow.value && ads.value.length) {
-          ga(GA_EventName.ShowAd);
-        }
-      }
-    }
-    const closeTitle = ref("");
     let ads = ref<AdItem[]>([]);
-    const elAd = ref<HTMLElement>(null);
-    const adWidth = 300;
-    const isShow = ref(true);
-    let stopAutoScroll = false;
 
     return {
-      isShow,
-      elAd,
       ads,
-      closeTitle,
-      onClose() {
-        isShow.value = false;
-        localStorage.setItem(key, Date.now().toString());
-        ga(GA_EventName.CloseAd);
-      },
-      onWheel(event: WheelEvent) {
-        if (!elAd.value) {
-          return;
-        }
-        event.preventDefault();
-        const div = elAd.value as HTMLElement;
-        if (event.deltaY > 0) {
-          div.scrollTo({ left: div.scrollLeft + adWidth, behavior: "smooth" });
-        } else {
-          div.scrollTo({ left: div.scrollLeft - adWidth, behavior: "smooth" });
-        }
-      },
-      async onClickBtnLeft() {
-        if (elAd.value) {
-          const el = elAd.value as HTMLElement;
-          el.scrollTo({ left: el.scrollLeft - adWidth, behavior: "smooth" });
-        }
-      },
-      async onClickBtnRight() {
-        if (elAd.value) {
-          const el = elAd.value as HTMLElement;
-          el.scrollTo({ left: el.scrollLeft + adWidth, behavior: "smooth" });
-        }
-      },
-      onMouseEnter() {
-        stopAutoScroll = true;
-      },
-      onMouseLeave() {
-        stopAutoScroll = false;
-      },
+      onMouseEnter() {},
+      onMouseLeave() {},
     };
   },
 });
 </script>
 <style lang="less" scoped>
+@color-bg: #8d8d8da6;
+@color-hover: #f9c04e;
+@color-active: #ffaa00;
 .ad {
   display: flex;
-  .header {
-    display: flex;
-    align-items: flex-end;
-    .title {
-      box-shadow: 0px 0px 2px 0px;
-      font-size: 12px;
-      user-select: none;
-      background-color: white;
-      // border-top-left-radius: 5px;
-      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;
-      color: rgb(138, 138, 138);
-      width: 20px;
-      height: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      .icon {
-        user-select: none;
-        font-size: 14px;
-        &:hover {
-          color: black;
-        }
-        &:active {
-          color: #ffaa00;
-        }
-      }
-    }
-  }
+  flex-direction: column;
+
   .body {
     display: flex;
-    position: relative;
+    overflow: hidden;
     .list {
       flex: 1;
       display: flex;
-      flex-direction: row;
-      overflow: hidden;
-    }
-    .left {
-      left: 0;
-      background-image: linear-gradient(to left, rgba(0, 0, 0, 0), @color-bg);
-      &:hover {
-        background-image: linear-gradient(to left, rgba(0, 0, 0, 0), @color-hover);
-      }
-      &:active {
-        background-image: linear-gradient(to left, rgba(0, 0, 0, 0), @color-active);
-      }
-    }
-    .right {
-      right: 0px;
-      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), @color-bg);
-      &:hover {
-        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), @color-hover);
-      }
-      &:active {
-        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), @color-active);
-      }
-    }
-
-    .slide {
-      display: flex;
-      height: 100%;
-      width: 20px;
-      cursor: pointer;
-      flex-direction: row;
+      flex-direction: column;
       align-items: center;
-      position: absolute;
-      justify-content: center;
-
-      .arrow {
-        user-select: none;
-        font-size: 22px;
-        font-weight: bold;
-
-        color: rgb(133, 133, 133);
-      }
+      overflow: auto;
     }
   }
 }

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

@@ -9,13 +9,18 @@
       <i class="iconfont icon_cocos cocos" @mousedown="onMouseDown" @mouseenter="onMouseEnterCocosLogo"></i>
     </div>
     <!-- <Memory></Memory> -->
+    <CCDialog></CCDialog>
   </div>
 </template>
 <script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
 import { defineComponent, onMounted, ref, toRaw } from "vue";
+import { GA_EventName } from "../../ga/type";
+import Ad from "./ad.vue";
 import Banner from "./banner.vue";
 import Memory from "./memory.vue";
-
+import { ga } from "./util";
+const { CCDialog } = ccui.components;
 interface ListItem {
   icon: string;
   txt: string;
@@ -23,20 +28,30 @@ interface ListItem {
 }
 export default defineComponent({
   name: "ad",
-  components: { Banner, Memory },
+  components: { CCDialog, Banner, Memory },
   setup() {
     const keyAssistant = "assistant";
 
     const listArray = ref<ListItem[]>([
       {
-        icon: "icon_shop_cart",
-        txt: "Recommend Plugins",
-        cb: () => {},
+        icon: "icon_shop_cart ani_shop_cart",
+        txt: "Recommended Plugins",
+        cb: () => {
+          ccui.dialog.showDialog({
+            title: "Recommended Plugins",
+            comp: Ad,
+            width: 310,
+            closeCB: () => {
+              ga(GA_EventName.CloseAd);
+            },
+          });
+        },
       },
       {
         icon: "icon_target",
         txt: "Inspect Game",
         cb: () => {
+          ga(GA_EventName.DoInspector);
           showBtns.value = false;
           picking.value = true;
           const cursor = document.body.style.cursor;
@@ -131,9 +146,17 @@ export default defineComponent({
 </script>
 
 <style scoped lang="less">
-@color-bg: #8d8d8da6;
-@color-hover: #f9c04e;
-@color-active: #ffaa00;
+@keyframes color-change {
+  0% {
+    color: #f00;
+  }
+  50% {
+    color: #0f0;
+  }
+  100% {
+    color: #f00;
+  }
+}
 .ad {
   position: fixed;
   z-index: 99999;
@@ -177,6 +200,9 @@ export default defineComponent({
         .icon {
           font-size: 20px;
         }
+        .ani_shop_cart {
+          animation: color-change 2s infinite;
+        }
       }
     }
     .cocos {

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

@@ -80,8 +80,9 @@ export default defineComponent({
 }
 .banner {
   border: 2px solid #d2d2d2;
-  border-bottom: 0;
   background-color: #ffffff;
+  background-position: center center;
+  background-size: cover;
   overflow: hidden;
   min-width: 300px;
   max-width: 300px;
@@ -95,7 +96,7 @@ export default defineComponent({
 
   &:hover {
     border: 2px solid #949494;
-    border-bottom: 0;
+
     background-color: #d1d1d1;
   }
   .text {