mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-04-12 05:01:03 +00:00
优化popup的工具列表
This commit is contained in:
xu_yanfeng
parent
2ed30d32aa
commit
063aa8a12b
@ -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)}`);
|
||||
return;
|
||||
// console.warn(`add failed, ad.duration is ${item.duration}, ${JSON.stringify(item)}`);
|
||||
}
|
||||
this.data.push(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
sortByName() {
|
||||
this.data.sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export async function getAdData(): Promise<AdData | null> {
|
||||
|
||||
@ -24,15 +24,7 @@
|
||||
<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" @click="onClickTry($event, item.url)"> {{ item.name }} </a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<Tools></Tools>
|
||||
</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;
|
||||
},
|
||||
|
||||
45
src/views/popup/tool-item.vue
Normal file
45
src/views/popup/tool-item.vue
Normal file
@ -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>
|
||||
48
src/views/popup/tool.vue
Normal file
48
src/views/popup/tool.vue
Normal file
@ -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>
|
||||
14
src/views/popup/type.ts
Normal file
14
src/views/popup/type.ts
Normal file
@ -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[] = [];
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user