add nettest

This commit is contained in:
jxxghp
2023-07-18 20:50:13 +08:00
parent 2efde56a82
commit 453ef0f183
9 changed files with 307 additions and 200 deletions

1
components.d.ts vendored
View File

@@ -9,6 +9,7 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
DialogCloseBtn: typeof import('./src/@core/components/DialogCloseBtn.vue')['default']
ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']

View File

@@ -0,0 +1,15 @@
<script lang="ts" setup>
// 定义触发的自定义事件
const emit = defineEmits(["click"]);
// 按钮点击
const onClick = () => {
emit("click");
};
</script>
<template>
<IconBtn class="absolute right-3 top-3" @click="onClick">
<VIcon icon="mdi-close" />
</IconBtn>
</template>

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import NameTestView from "@/views/system/NametestView.vue";
import NetTestView from "@/views/system/NettestView.vue";
// App捷径
const appsMenu = ref(false);
@@ -26,14 +27,13 @@ const netTestDialog = ref(false);
</IconBtn>
</template>
<!-- Menu Content -->
<VCard title="捷径">
<VDivider />
<VCard>
<VCardItem class="border-b">
<VCardTitle>捷径</VCardTitle>
</VCardItem>
<div class="ps ps--active-y">
<VRow class="ma-0 mt-n1">
<VCol
cols="6"
class="text-center border-t cursor-pointer pa-0 shortcut-icon border-e"
>
<VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
<VListItem @click="nameTestDialog = true" class="pa-4">
<VAvatar size="48" variant="tonal">
<VIcon icon="mdi-text-recognition" />
@@ -45,7 +45,7 @@ const netTestDialog = ref(false);
<VCol
@click="() => {}"
cols="6"
class="text-center border-t cursor-pointer pa-0 shortcut-icon"
class="text-center cursor-pointer pa-0 shortcut-icon"
>
<VListItem @click="netTestDialog = true" class="pa-4">
<VAvatar size="48" variant="tonal">
@@ -61,18 +61,20 @@ const netTestDialog = ref(false);
</VMenu>
<!-- 名称测试弹窗 -->
<VDialog v-model="nameTestDialog" max-width="800">
<NameTestView />
<VCard title="名称识别测试">
<DialogCloseBtn @click="nameTestDialog = false" />
<VCardItem>
<NameTestView />
</VCardItem>
</VCard>
</VDialog>
<!-- 网络测试弹窗 -->
<VDialog v-model="netTestDialog" max-width="600">
<VCard title="网络测试">
<DialogCloseBtn @click="netTestDialog = false" />
<VCardItem>
<NetTestView />
</VCardItem>
<VCardActions>
<VSpacer />
<VBtn @click="netTestDialog = false">关闭</VBtn>
</VCardActions>
</VCard>
</VDialog>
</template>

View File

@@ -46,154 +46,136 @@ const nameTest = async () => {
</script>
<template>
<VCard title="名称识别测试">
<VCardItem>
<VForm @submit.prevent="() => {}">
<VRow class="pt-2">
<VCol cols="12">
<VTextField
v-model="nameTestForm.title"
label="标题"
:rules="[requiredValidator]"
<VForm @submit.prevent="() => {}">
<VRow class="pt-2">
<VCol cols="12">
<VTextField
v-model="nameTestForm.title"
label="标题"
:rules="[requiredValidator]"
/>
</VCol>
<VCol cols="12">
<VTextarea v-model="nameTestForm.subtitle" label="副标题" rows="2" auto-grow />
</VCol>
</VRow>
<VRow>
<VCol cols="12" class="text-center">
<VBtn @click="nameTest" :disabled="nameTestLoading">
<template #prepend>
<VIcon icon="mdi-text-recognition"></VIcon>
</template>
{{ nameTestText }}
</VBtn>
</VCol>
</VRow>
</VForm>
<VExpandTransition>
<div v-show="showResult">
<VCol>
<div
class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
v-if="nameTestResult?.meta_info?.name"
>
<div class="ma-auto" v-if="nameTestResult?.media_info?.poster_path">
<VImg
width="10rem"
aspect-ratio="2/3"
class="object-cover aspect-w-2 aspect-h-3 rounded ring-1 ring-gray-500 shadow"
:src="nameTestResult?.media_info?.poster_path"
cover
/>
</VCol>
<VCol cols="12">
<VTextarea
v-model="nameTestForm.subtitle"
label="副标题"
rows="2"
auto-grow
/>
</VCol>
</VRow>
<VRow>
<VCol cols="12" class="text-center">
<VBtn @click="nameTest" :disabled="nameTestLoading">
<template #prepend>
<VIcon icon="mdi-text-recognition"></VIcon>
</template>
{{ nameTestText }}
</VBtn>
</VCol>
</VRow>
</VForm>
<VExpandTransition>
<div v-show="showResult">
<VCol>
<div
class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row"
v-if="nameTestResult?.meta_info?.name"
</div>
<div>
<VCardItem class="pb-1">
<VCardTitle>
{{ nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name }}
{{ nameTestResult?.meta_info?.season_episode }}
</VCardTitle>
<VCardSubtitle>
{{ nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year }}
</VCardSubtitle>
</VCardItem>
<VCardText
v-if="nameTestResult?.media_info?.overview"
class="line-clamp-4 overflow-hidden text-ellipsis ..."
>
<div class="ma-auto" v-if="nameTestResult?.media_info?.poster_path">
<VImg
width="10rem"
aspect-ratio="2/3"
class="object-cover aspect-w-2 aspect-h-3 rounded ring-1 ring-gray-500 shadow"
:src="nameTestResult?.media_info?.poster_path"
cover
/>
</div>
{{ nameTestResult?.media_info?.overview }}
</VCardText>
<div>
<VCardItem>
<VCardTitle>
{{
nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name
}}
{{ nameTestResult?.meta_info?.season_episode }}
</VCardTitle>
<VCardSubtitle>
{{
nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year
}}
</VCardSubtitle>
</VCardItem>
<VCardText
v-if="nameTestResult?.media_info?.overview"
class="line-clamp-4 overflow-hidden text-ellipsis ..."
>
{{ nameTestResult?.media_info?.overview }}
</VCardText>
<VCardItem>
<!-- 类型 -->
<VChip
variant="elevated"
class="me-1 mb-1 text-white bg-blue-500"
v-if="
nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
"
>
{{
nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
}}</VChip
>
<!-- 二级分类 -->
<VChip
variant="elevated"
class="me-1 mb-1 text-white bg-blue-500"
v-if="nameTestResult?.media_info?.category"
>
{{ nameTestResult?.media_info?.category }}
</VChip>
<!-- TMDBID -->
<VChip
variant="elevated"
color="success"
class="me-1 mb-1"
v-if="nameTestResult?.media_info?.tmdb_id"
>
{{ nameTestResult?.media_info?.tmdb_id }}
</VChip>
<!-- meta_info -->
<VChip
v-if="nameTestResult?.meta_info?.edition"
variant="elevated"
class="me-1 mb-1 text-white bg-red-500"
>
{{ nameTestResult?.meta_info?.edition }}</VChip
>
<VChip
v-if="nameTestResult?.meta_info?.resource_pix"
variant="elevated"
class="me-1 mb-1 text-white bg-red-500"
>
{{ nameTestResult?.meta_info?.resource_pix }}
</VChip>
<VChip
v-if="nameTestResult?.meta_info?.video_encode"
variant="elevated"
class="me-1 mb-1 text-white bg-orange-500"
>
{{ nameTestResult?.meta_info?.video_encode }}
</VChip>
<VChip
v-if="nameTestResult?.meta_info?.audio_encode"
variant="elevated"
class="me-1 mb-1 text-white bg-orange-500"
>
{{ nameTestResult?.meta_info?.audio_encode }}
</VChip>
<VChip
v-if="nameTestResult?.meta_info?.resource_team"
variant="elevated"
class="me-1 mb-1 text-white bg-cyan-500"
>
{{ nameTestResult?.meta_info?.resource_team }}
</VChip>
</VCardItem>
</div>
</div>
<VAlert
icon="mdi-alert-circle-outline"
v-if="!nameTestResult?.meta_info?.name"
>
识别失败无法识别到有效信息
</VAlert>
</VCol>
<VCardItem>
<!-- 类型 -->
<VChip
variant="elevated"
class="me-1 mb-1 text-white bg-blue-500"
v-if="nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type"
>
{{
nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
}}</VChip
>
<!-- 二级分类 -->
<VChip
variant="elevated"
class="me-1 mb-1 text-white bg-blue-500"
v-if="nameTestResult?.media_info?.category"
>
{{ nameTestResult?.media_info?.category }}
</VChip>
<!-- TMDBID -->
<VChip
variant="elevated"
color="success"
class="me-1 mb-1"
v-if="nameTestResult?.media_info?.tmdb_id"
>
{{ nameTestResult?.media_info?.tmdb_id }}
</VChip>
<!-- meta_info -->
<VChip
v-if="nameTestResult?.meta_info?.edition"
variant="elevated"
class="me-1 mb-1 text-white bg-red-500"
>
{{ nameTestResult?.meta_info?.edition }}</VChip
>
<VChip
v-if="nameTestResult?.meta_info?.resource_pix"
variant="elevated"
class="me-1 mb-1 text-white bg-red-500"
>
{{ nameTestResult?.meta_info?.resource_pix }}
</VChip>
<VChip
v-if="nameTestResult?.meta_info?.video_encode"
variant="elevated"
class="me-1 mb-1 text-white bg-orange-500"
>
{{ nameTestResult?.meta_info?.video_encode }}
</VChip>
<VChip
v-if="nameTestResult?.meta_info?.audio_encode"
variant="elevated"
class="me-1 mb-1 text-white bg-orange-500"
>
{{ nameTestResult?.meta_info?.audio_encode }}
</VChip>
<VChip
v-if="nameTestResult?.meta_info?.resource_team"
variant="elevated"
class="me-1 mb-1 text-white bg-cyan-500"
>
{{ nameTestResult?.meta_info?.resource_team }}
</VChip>
</VCardItem>
</div>
</div>
</VExpandTransition>
</VCardItem>
</VCard>
<VAlert icon="mdi-alert-circle-outline" v-if="!nameTestResult?.meta_info?.name">
识别失败无法识别到有效信息
</VAlert>
</VCol>
</div>
</VExpandTransition>
</template>

View File

@@ -1,87 +1,194 @@
<script setup lang="ts">
import avatar1 from "@images/avatars/avatar-1.png";
import avatar2 from "@images/avatars/avatar-2.png";
import avatar3 from "@images/avatars/avatar-3.png";
import avatar4 from "@images/avatars/avatar-4.png";
import api from "@/api";
import douban from "@images/logos/douban.png";
import github from "@images/logos/github.png";
import slack from "@images/logos/slack.png";
import telegram from "@images/logos/telegram.webp";
import tmdb from "@images/logos/tmdb.png";
import wechat from "@images/logos/wechat.png";
interface Status {
Online: string;
Away: string;
Offline: string;
"In Meeting": string;
OK: string;
Fail: string;
Normal: string;
}
interface Users {
avatar: string;
interface Address {
image: string;
name: string;
url: string;
proxy: boolean;
status: keyof Status;
lastVisited: string;
time: string;
message: string;
btntext: string;
btndisable: boolean;
}
const users: Users[] = [
// 测试集
const targets = ref<Address[]>([
{
avatar: avatar1,
name: "Caroline Black",
status: "Online",
lastVisited: "13 minutes ago",
image: tmdb,
name: "api.themoviedb.org",
url: "https://api.themoviedb.org",
proxy: true,
status: "Normal",
time: "",
message: "",
btntext: "测试",
btndisable: false,
},
{
avatar: avatar2,
name: "Alfred Copeland",
status: "Away",
lastVisited: "11 minutes ago",
image: tmdb,
name: "api.tmdb.org",
url: "https://api.tmdb.org",
proxy: true,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
{
avatar: avatar3,
name: "Celia Schneider",
status: "Offline",
lastVisited: "9 minutes ago",
image: tmdb,
name: "www.themoviedb.org",
url: "https://www.themoviedb.org",
proxy: true,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
{
avatar: avatar4,
name: "Max Rogan",
status: "In Meeting",
lastVisited: "28 minutes ago",
image: telegram,
name: "api.telegram.org",
url: "https://api.telegram.org",
proxy: true,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
];
{
image: wechat,
name: "qyapi.weixin.qq.com",
url: "https://qyapi.weixin.qq.com",
proxy: false,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
{
image: douban,
name: "frodo.douban.com",
url: "https://frodo.douban.com",
proxy: false,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
{
image: slack,
name: "slack.com",
url: "https://slack.com",
proxy: false,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
{
image: github,
name: "github.com",
url: "https://github.com",
proxy: true,
status: "Normal",
time: "",
message: "未测试",
btntext: "测试",
btndisable: false,
},
]);
const resolveStatusColor: Status = {
Online: "success",
Away: "warning",
Offline: "secondary",
"In Meeting": "error",
OK: "success",
Fail: "error",
Normal: "",
};
// 调用API测试网络连接
const netTest = async (index: number) => {
try {
const target = targets.value[index];
target.btntext = "测试中...";
target.btndisable = true;
const result: { [key: string]: any } = await api.get("system/nettest", {
params: {
url: target.url,
proxy: target.proxy,
},
});
if (result.success) {
target.status = "OK";
target.message = "正常";
} else {
target.status = "Fail";
target.message = result.message;
}
target.time = result.data?.time;
target.btntext = "测试";
target.btndisable = false;
} catch (error) {
console.error(error);
}
};
// 加载时测试所有连接
onMounted(async () => {
for (let i = 0; i < targets.value.length; i++) {
await netTest(i);
}
});
</script>
<template>
<VList lines="two" border rounded>
<template v-for="(user, index) of users" :key="user.name">
<template v-for="(target, index) of targets" :key="target.name">
<VListItem>
<template #prepend>
<VAvatar :image="user.avatar" />
<VAvatar :image="target.image" />
</template>
<VListItemTitle>
{{ user.name }}
{{ target.name }}
</VListItemTitle>
<VListItemSubtitle class="mt-1 me-2">
<VBadge
dot
location="start center"
offset-x="2"
:color="resolveStatusColor[user.status]"
:color="resolveStatusColor[target.status]"
class="me-3"
>
<span class="ms-4">{{ user.status }}</span>
<span class="ms-4">{{ target.message }}</span>
</VBadge>
<span class="text-xs text-wrap text-disabled">{{ user.lastVisited }}</span>
<span class="text-xs text-wrap text-disabled" v-if="target.time">
{{ target.time }} ms
</span>
</VListItemSubtitle>
<template #append>
<VBtn size="small"> Add </VBtn>
<VBtn size="small" @click="netTest(index)" :disabled="target.btndisable">
{{ target.btntext }}
</VBtn>
</template>
</VListItem>
<VDivider v-if="index !== users.length - 1" />
<VDivider v-if="index !== targets.length - 1" />
</template>
</VList>
</template>