优化popup，增加更多的游戏开发工具

cc-plugin.config.ts

@@ -9,7 +9,7 @@ function i18n(key: string) {
 
 const manifest: CocosPluginManifest = {
   name: pkgName,
-  version: "2.1.6",
+  version: "2.1.7",
   description: "Debug games made with CocosCreator and display node trees and node properties",
   author: "xu_yanfeng",
   main: "./src/main.ts",

src/scripts/inject-view/ad.vue

@@ -34,7 +34,7 @@ export default defineComponent({
         console.log(`not find any ad`);
         return;
       }
-      ads.value = data.data;
+      ads.value = data.data.filter((item) => item.valid);
       console.log("get ads ", toRaw(ads.value));
 
       ga(GA_EventName.ShowAd);

src/scripts/inject-view/loader.ts

@@ -12,7 +12,7 @@ export class AdItem {
   /**
    * 插件的试用地址
    */
-  try: string = "";
+  try: string | Array<{ name: string; url: string }> = "";
   /**
    * 广告的store购买链接
    */
@@ -29,6 +29,14 @@ export class AdItem {
    * 背景图
    */
   img: string = "";
+  getTryInfos(): Array<{ name: string; url: string }> {
+    if (typeof this.try === "string" && this.try) {
+      return [{ name: this.name, url: this.try }];
+    } else if (Array.isArray(this.try)) {
+      return this.try;
+    }
+    return [];
+  }
   parse(data: AdItem) {
     this.name = data.name;
     this.store = data.store || "";
@@ -95,10 +103,6 @@ export class AdData {
           console.warn(`add failed, ad.duration is ${item.duration}, ${JSON.stringify(item)}`);
           return;
         }
-        if (!item.valid) {
-          console.warn(`add failed, ad is invalid, ${JSON.stringify(item)}`);
-          return;
-        }
         this.data.push(item);
       });
     }

src/views/popup/index.vue

@@ -1,10 +1,39 @@
 <template>
   <div class="popup">
-    <ol>
-      <li class="tips">Scan me on WeChat</li>
-      <li class="tips">Add me as a friend</li>
-    </ol>
-    <img class="png" src="./res/friend.png" alt="" />
+    <div class="tap">
+      <CCButtonGroup :choose-item="chooseItem" color="#ffffff" :items="items"></CCButtonGroup>
+    </div>
+    <div v-if="isViewSupport()" class="root" style="flex-direction: column; align-items: center">
+      <ol style="overflow: auto" class="ccui-scrollbar">
+        <li><a href="https://store.cocos.com/app/detail/2002" target="_blank">CocosStore打赏该插件</a></li>
+        <li><a href="https://store.cocos.com/app/search?name=xu_yanfeng" target="_blank">支持作者其他插件</a></li>
+        <li>
+          <div style="display: flex; flex-direction: column; align-items: flex-start">
+            请我喝杯咖啡
+            <img style="height: 320px; margin-top: 5px; object-fit: contain" src="./res/30.jpg" alt="" />
+          </div>
+        </li>
+      </ol>
+    </div>
+    <div v-if="isViewFriends()" class="root">
+      <div style="overflow: auto; display: flex; flex-direction: column; align-items: center" class="ccui-scrollbar">
+        <img style="height: 420px; object-fit: contain" src="./res/friend.png" alt="" />
+      </div>
+    </div>
+    <div v-show="isViewRecommend()" class="root iconfont ccui-scrollbar" style="overflow: auto">
+      <Ad></Ad>
+    </div>
+    <div v-if="isViewOnlineTools()" class="root">
+      <div>个人开发的web在线游戏工具，无须安装，欢迎自荐，收录更多游戏开发工具。</div>
+      <div style="overflow: auto; display: flex; flex: 1" class="ccui-scrollbar">
+        <ol>
+          <li v-for="(item, index) in onlineTools" :key="index">
+            <a :href="item.store" target="_blank" class="iconfont icon_shop_cart icon"></a>
+            <a :href="item.url" target="_blank" class="link"> {{ item.name }} </a>
+          </li>
+        </ol>
+      </div>
+    </div>
     <div class="foot">
       <div class="space"></div>
       <div v-if="version">ver:{{ version }}</div>
@@ -13,22 +42,29 @@
 </template>
 <script lang="ts">
 import ccui from "@xuyanfeng/cc-ui";
+import { ButtonGroupItem } from "@xuyanfeng/cc-ui/types/cc-button-group/const";
 import CCP from "cc-plugin/src/ccp/entry-render";
 import { ChromeConst } from "cc-plugin/src/chrome/const";
 import { defineComponent, onMounted, ref } from "vue";
 import { Page } from "../../core/types";
 import { ga } from "../../ga";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
+import Ad from "../../scripts/inject-view/ad.vue";
+import { getAdData } from "../../scripts/inject-view/loader";
+const { CCInput, CCButton, CCButtonGroup, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
+enum ViewType {
+  Support = "support",
+  Friends = "frends",
+  Recommend = "recommend",
+  OnlineTools = "onlineTools",
+}
+interface Tools {
+  name: string;
+  url: string;
+  store: string;
+}
 export default defineComponent({
   name: "popup",
-  components: {
-    CCInput,
-    CCButton,
-    CCInputNumber,
-    CCSelect,
-    CCCheckBox,
-    CCColor,
-  },
+  components: { CCInput, CCButton, CCInputNumber, Ad, CCSelect, CCCheckBox, CCColor, CCButtonGroup },
   setup(props, ctx) {
     ga.openView(Page.Popup);
     const title = ref(CCP.manifest.name);
@@ -48,12 +84,72 @@ export default defineComponent({
     function _onLongConnMsg(data: string, sender: any) {
       // console.log( title);
     }
-    onMounted(() => {
+    onMounted(async () => {
       _initLongConn();
+      const data = await getAdData();
+      if (data) {
+        data.data.forEach((item) => {
+          item.getTryInfos().forEach((info) => {
+            onlineTools.value.push({
+              name: info.name,
+              url: info.url,
+              store: item.store,
+            });
+          });
+        });
+      }
     });
+    const items = ref<ButtonGroupItem[]>([
+      {
+        text: "在线工具",
+        icon: "icon_fly",
+        click: () => {
+          viewType.value = ViewType.OnlineTools;
+        },
+      },
+      {
+        text: "支持我",
+        icon: "icon_cocos",
+        click: () => {
+          viewType.value = ViewType.Support;
+        },
+      },
+      {
+        text: "加我为好友",
+        icon: "icon_wechat",
+        click: () => {
+          viewType.value = ViewType.Friends;
+        },
+      },
+      {
+        text: "推荐",
+        icon: "icon_good",
+        click: () => {
+          viewType.value = ViewType.Recommend;
+        },
+      },
+    ]);
+    const viewType = ref<ViewType>(ViewType.Friends);
+    const onlineTools = ref<Tools[]>([]);
+    const chooseItem = ref(items.value[0]);
     return {
+      onlineTools,
+      isViewSupport() {
+        return viewType.value === ViewType.Support;
+      },
+      isViewFriends() {
+        return viewType.value === ViewType.Friends;
+      },
+      isViewRecommend() {
+        return viewType.value === ViewType.Recommend;
+      },
+      isViewOnlineTools() {
+        return viewType.value === ViewType.OnlineTools;
+      },
+      items,
       title,
       version,
+      chooseItem,
       onClickOptions() {
         if (chrome && chrome.tabs) {
           chrome.tabs.create({ url: ChromeConst.html.popup });
@@ -67,14 +163,41 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="less">
+@height: 500px;
+@width: 400px;
 .popup {
-  width: 300px;
   display: flex;
   flex-direction: column;
   padding: 10px;
-
-  .tips {
-    color: #000000;
+  max-width: @width;
+  min-width: @width;
+  max-height: @height;
+  min-height: @height;
+  overflow: hidden;
+  background-color: white;
+  .icon {
+    cursor: pointer;
+    margin-right: 5px;
+    &:hover {
+      color: #f9c04e;
+    }
+  }
+  .link {
+    &:hover {
+      color: #3dcb00;
+    }
+  }
+  .root {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    flex-direction: column;
+  }
+  .tap {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
   }
   .foot {
     display: flex;