From 7d4197aca5b4c50357e0574990c01f9253393ba2 Mon Sep 17 00:00:00 2001
From: xu_yanfeng <xu_yanfeng@126.com>
Date: Sun, 19 Jan 2025 10:30:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E5=8C=BA?=
 =?UTF-8?q?=E5=88=86=E7=89=88=E6=9C=AC=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E4=B8=80=E6=AE=B5=E6=97=B6=E9=97=B4=E5=86=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cc-inspector/src/scripts/inject-view/app.vue  | 38 ++++++++++++++-----
 .../src/scripts/inject-view/loader.ts         |  6 +--
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/cc-inspector/src/scripts/inject-view/app.vue b/cc-inspector/src/scripts/inject-view/app.vue
index 259ac6e..501f74b 100644
--- a/cc-inspector/src/scripts/inject-view/app.vue
+++ b/cc-inspector/src/scripts/inject-view/app.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="ad" v-show="ads.length && isShow" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+  <div class="ad" v-show="ads.length && isShow">
     <div class="header">
-      <div class="title">Creator插件推荐</div>
+      <div class="title">Creator Plugin Recommendation</div>
       <div style="flex: 1"></div>
-      <div class="close" @click="onClose">
+      <div class="close" @click="onClose" :title="closeTitle">
         <i class="icon iconfont icon_close"></i>
       </div>
     </div>
-    <div class="body">
+    <div class="body" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
       <div class="left slide" @click="onClickBtnLeft">
         <i class="iconfont icon_arrow_left arrow"></i>
       </div>
@@ -21,18 +21,21 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref, toRaw } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, toRaw } from "vue";
+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";
-import { GA_EventName } from "../../ga/type";
 export default defineComponent({
   name: "ad",
   components: { Banner },
   setup() {
     let ads = ref<AdItem[]>([]);
     let stopAutoScroll = false;
+    const key = "close-time";
+    let timer = null;
+    const closeTitle = ref("");
     onMounted(async () => {
       const data = await getAdData();
       if (!data) {
@@ -49,8 +52,13 @@ export default defineComponent({
       }
       ads.value = data.data;
       console.log("get ads ", toRaw(ads.value));
+      closeTitle.value = `display again in ${data.showDuration} minute`;
 
-      setInterval(() => {
+      visibleAd(data.showDuration);
+      adScroll(data.scrollDuration);
+    });
+    function adScroll(scrollDuration: number) {
+      timer = setInterval(() => {
         // return;
         if (stopAutoScroll) {
           return;
@@ -64,9 +72,19 @@ export default defineComponent({
           }
           el.scrollTo({ left, behavior: "smooth" });
         }
-      }, data.scrollDuration * 1000);
+      }, 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;
+      }
+    }
+    onUnmounted(() => {
+      clearInterval(timer);
     });
-
     function testBanner() {
       const data = new AdItem();
       data.name = "ad test 11111111111 11111111111 44444444444444  5555555555555 111111111111111111 2222222222222222 33333333333333 444444444444444";
@@ -77,11 +95,13 @@ export default defineComponent({
     const adWidth = 300;
     const isShow = ref(true);
     return {
+      closeTitle,
       isShow,
       elAd,
       ads,
       onClose() {
         isShow.value = false;
+        localStorage.setItem(key, Date.now().toString());
         ga(GA_EventName.CloseAd);
       },
       onMouseEnter() {
diff --git a/cc-inspector/src/scripts/inject-view/loader.ts b/cc-inspector/src/scripts/inject-view/loader.ts
index c0a56a0..a27a940 100644
--- a/cc-inspector/src/scripts/inject-view/loader.ts
+++ b/cc-inspector/src/scripts/inject-view/loader.ts
@@ -1,5 +1,5 @@
+import CCPlugin from "../../../cc-plugin.config";
 import { githubMirrorMgr } from "./github";
-
 export class AdItem {
   /**
    * 广告的名字
@@ -43,7 +43,6 @@ export class AdItem {
 }
 export class AdData {
   desc: string = "";
-  version: string = "";
   /**
    * 是否启用广告
    */
@@ -68,7 +67,6 @@ export class AdData {
   data: Array<AdItem> = [];
   parse(data: AdData) {
     this.desc = data.desc;
-    this.version = data.version;
     this.valid = !!data.valid;
     this.showDuration = data.showDuration || 10;
     this.scrollDuration = data.scrollDuration || 3;
@@ -99,7 +97,7 @@ export class AdData {
 }
 
 export async function getAdData(): Promise<AdData | null> {
-  const data = await githubMirrorMgr.getData("ad.json");
+  const data = await githubMirrorMgr.getData(`ad-${CCPlugin.manifest.version}.json`);
   if (data) {
     const ad = new AdData();
     ad.parse(data as AdData);