优化popup的工具列表

src/scripts/inject-view/loader.ts

@@ -1,5 +1,6 @@
 import CCPlugin from "../../../cc-plugin.config";
 import { githubMirrorMgr } from "./github";
+
 export class AdItem {
   /**
    * 广告的名字
@@ -9,6 +10,10 @@ export class AdItem {
    * 鼠标悬浮提示
    */
   tip: string = "";
+  /**
+   * 分类，目前支持2类：ai绘图、我的插件
+   */
+  type: string = "";
   /**
    * 插件的试用地址
    */
@@ -29,11 +34,13 @@ export class AdItem {
    * 背景图
    */
   img: string = "";
-  getTryInfos(): Array<{ name: string; url: string }> {
+  getTryInfos(): Array<{ name: string; url: string; type: string }> {
     if (typeof this.try === "string" && this.try) {
-      return [{ name: this.name, url: this.try }];
+      return [{ name: this.name, url: this.try, type: this.type }];
     } else if (Array.isArray(this.try)) {
-      return this.try;
+      return this.try.map((el) => {
+        return { name: el.name, url: el.url, type: this.type };
+      });
     }
     return [];
   }
@@ -44,6 +51,7 @@ export class AdItem {
 
     this.try = data.try || "";
     this.tip = data.tip || "";
+    this.type = data.type || "";
     this.duration = data.duration || 0;
     this.valid = !!data.valid;
     const img = data.img || "";
@@ -80,7 +88,10 @@ export class AdData {
    * 展示的广告数量，-1为所有
    */
   showCount: number = -1;
-
+  /**
+   * 类型对应文本
+   */
+  keys: Record<string, string> = {};
   data: Array<AdItem> = [];
   parse(data: AdData) {
     this.desc = data.desc;
@@ -89,7 +100,7 @@ export class AdData {
     this.scrollDuration = data.scrollDuration || 3;
     this.randomIndex = !!data.randomIndex;
     this.showCount = data.showCount || -1;
-
+    this.keys = data.keys || {};
     if (data.data) {
       if (this.randomIndex) {
         data.data.sort(() => Math.random() - 0.5);
@@ -100,13 +111,17 @@ export class AdData {
         }
         const item = new AdItem().parse(el);
         if (!item.duration) {
-          console.warn(`add failed, ad.duration is ${item.duration}, ${JSON.stringify(item)}`);
+          // console.warn(`add failed, ad.duration is ${item.duration}, ${JSON.stringify(item)}`);
-          return;
         }
         this.data.push(item);
       });
     }
   }
+  sortByName() {
+    this.data.sort((a, b) => {
+      return a.name.localeCompare(b.name);
+    });
+  }
 }
 
 export async function getAdData(): Promise<AdData | null> {

src/views/popup/index.vue

@@ -24,15 +24,7 @@
       <Ad></Ad>
     </div>
     <div v-if="isViewOnlineTools()" class="root">
-      <div>个人开发的web在线游戏工具，无须安装，欢迎自荐，收录更多游戏开发工具。</div>
+      <Tools></Tools>
-      <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" @click="onClickTry($event, item.url)"> {{ item.name }} </a>
-          </li>
-        </ol>
-      </div>
     </div>
     <div class="foot">
       <div class="rate" @click="onClickRate">
@@ -55,7 +47,7 @@ import { Page } from "../../core/types";
 import { ga } from "../../ga";
 import { GA_EventName } from "../../ga/type";
 import Ad from "../../scripts/inject-view/ad.vue";
-import { getAdData } from "../../scripts/inject-view/loader";
+import Tools from "./tool.vue";
 const { CCInput, CCButton, CCButtonGroup, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
 enum ViewType {
   Support = "support",
@@ -63,14 +55,10 @@ enum ViewType {
   Recommend = "recommend",
   OnlineTools = "onlineTools",
 }
-interface Tools {
+
-  name: string;
-  url: string;
-  store: string;
-}
 export default defineComponent({
   name: "popup",
-  components: { CCInput, CCButton, CCInputNumber, Ad, CCSelect, CCCheckBox, CCColor, CCButtonGroup },
+  components: { CCInput, Tools, CCButton, CCInputNumber, Ad, CCSelect, CCCheckBox, CCColor, CCButtonGroup },
   setup(props, ctx) {
     ga.openView(Page.Popup);
     const title = ref(CCP.manifest.name);
@@ -92,18 +80,6 @@ export default defineComponent({
     }
     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[]>([
       {
@@ -140,7 +116,6 @@ export default defineComponent({
       },
     ]);
     const viewType = ref<ViewType>(ViewType.Friends);
-    const onlineTools = ref<Tools[]>([]);
     const chooseItem = ref(items.value[0]);
     const cocosStore = ref(PKG.manifest.store);
     const myPlugins = ref("https://store.cocos.com/app/search?name=xu_yanfeng");
@@ -154,10 +129,7 @@ export default defineComponent({
       onClickBuyPlugins() {
         ga.fireEventWithParam(GA_EventName.Popup, myPlugins.value);
       },
-      onClickTry(event: MouseEvent, url: string) {
+
-        ga.fireEventWithParam(GA_EventName.Popup, url);
-      },
-      onlineTools,
       isViewSupport() {
         return viewType.value === ViewType.Support;
       },

src/views/popup/tool-item.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="tool-item">
+    <div>{{ data.title }}</div>
+    <div style="overflow: auto; display: flex; flex: 1" class="ccui-scrollbar">
+      <ol>
+        <li v-for="(item, index) in data.items" :key="index">
+          <a v-if="item.store" :href="item.store" target="_blank" class="iconfont icon_shop_cart icon"></a>
+          <a :href="item.url" target="_blank" class="link" @click="onClickTry($event, item.url)"> {{ item.name }} </a>
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, PropType } from "vue";
+import { ga } from "../../ga";
+import { GA_EventName } from "../../ga/type";
+import { ToolItem } from "./type";
+const { CCButton } = ccui.components;
+export default defineComponent({
+  name: "tool-item",
+  components: { CCButton },
+  props: {
+    data: {
+      type: Object as PropType<ToolItem>,
+      required: true,
+      default: () => new ToolItem(""),
+    },
+  },
+  setup(props, { emit }) {
+    return {
+      onClickTry(event: MouseEvent, url: string) {
+        ga.fireEventWithParam(GA_EventName.Popup, url);
+      },
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.tool-item {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/views/popup/tool.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="tools ccui-scrollbar">
+    <Item v-for="(item, index) in list" :key="index" :data="item"></Item>
+  </div>
+</template>
+<script lang="ts">
+import ccui from "@xuyanfeng/cc-ui";
+import { defineComponent, onMounted, ref } from "vue";
+import { getAdData } from "../../scripts/inject-view/loader";
+import Item from "./tool-item.vue";
+import { ToolItem } from "./type";
+const { CCButton } = ccui.components;
+export default defineComponent({
+  name: "tools",
+  components: { CCButton, Item },
+  setup(props, { emit }) {
+    const list = ref<ToolItem[]>([]);
+    onMounted(async () => {
+      const data = await getAdData();
+      if (data) {
+        data.sortByName();
+        console.log(data);
+        data.data.forEach((item) => {
+          item.getTryInfos().forEach((info) => {
+            let arr = list.value.find((item) => item.type === info.type);
+            if (!arr) {
+              arr = new ToolItem(info.type);
+              arr.title = data.keys[info.type] || info.type || "推荐列表";
+              list.value.push(arr);
+            }
+            arr.items.push({ name: info.name, url: info.url, store: item.store });
+          });
+        });
+      }
+    });
+    return {
+      list,
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.tools {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+</style>

src/views/popup/type.ts

@@ -0,0 +1,14 @@
+export interface Tools {
+  name: string;
+  url: string;
+  store: string;
+}
+
+export class ToolItem {
+  constructor(type: string) {
+    this.type = type;
+  }
+  title: string = "";
+  type: string = "";
+  items: Tools[] = [];
+}