mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-12 02:21:06 +08:00
add nametest
This commit is contained in:
jxxghp
@@ -1,6 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
import NameTestView from "@/views/system/NametestView.vue";
|
||||
import NetTestView from "@/views/system/NettestView.vue";
|
||||
// App捷径
|
||||
const appsMenu = ref(false);
|
||||
|
||||
// 名称测试弹窗
|
||||
const nameTestDialog = ref(false);
|
||||
|
||||
// 网络测试弹窗
|
||||
const netTestDialog = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -26,7 +34,7 @@ const appsMenu = ref(false);
|
||||
cols="6"
|
||||
class="text-center border-t cursor-pointer pa-0 shortcut-icon border-e"
|
||||
>
|
||||
<VListItem @click="() => {}" class="pa-4">
|
||||
<VListItem @click="nameTestDialog = true" class="pa-4">
|
||||
<VAvatar size="48" variant="tonal">
|
||||
<VIcon icon="mdi-text-recognition" />
|
||||
</VAvatar>
|
||||
@@ -39,7 +47,7 @@ const appsMenu = ref(false);
|
||||
cols="6"
|
||||
class="text-center border-t cursor-pointer pa-0 shortcut-icon"
|
||||
>
|
||||
<VListItem @click="() => {}" class="pa-4">
|
||||
<VListItem @click="netTestDialog = true" class="pa-4">
|
||||
<VAvatar size="48" variant="tonal">
|
||||
<VIcon icon="mdi-network-outline" />
|
||||
</VAvatar>
|
||||
@@ -51,4 +59,20 @@ const appsMenu = ref(false);
|
||||
</div>
|
||||
</VCard>
|
||||
</VMenu>
|
||||
<!-- 名称测试弹窗 -->
|
||||
<VDialog v-model="nameTestDialog" max-width="800">
|
||||
<NameTestView />
|
||||
</VDialog>
|
||||
<!-- 网络测试弹窗 -->
|
||||
<VDialog v-model="netTestDialog" max-width="600">
|
||||
<VCard title="网络测试">
|
||||
<VCardItem>
|
||||
<NetTestView />
|
||||
</VCardItem>
|
||||
<VCardActions>
|
||||
<VSpacer />
|
||||
<VBtn @click="netTestDialog = false">关闭</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
|
||||
199
src/views/system/NameTestView.vue
Normal file
199
src/views/system/NameTestView.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import { requiredValidator } from "@/@validators";
|
||||
import api from "@/api";
|
||||
import { Context } from "@/api/types";
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
// 识别结果
|
||||
const nameTestResult = ref<Context>();
|
||||
|
||||
// 名称识别表单
|
||||
const nameTestForm = reactive({
|
||||
title: "",
|
||||
subtitle: "",
|
||||
});
|
||||
|
||||
// 识别按钮状态
|
||||
const nameTestLoading = ref(false);
|
||||
// 识别按钮文本
|
||||
const nameTestText = ref("识别");
|
||||
|
||||
// 是否显示结果
|
||||
const showResult = ref(false);
|
||||
|
||||
// 调用API识别
|
||||
const nameTest = async () => {
|
||||
if (!nameTestForm.title) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
nameTestLoading.value = true;
|
||||
nameTestText.value = "识别中...";
|
||||
showResult.value = false;
|
||||
nameTestResult.value = await api.get("media/recognize", {
|
||||
params: {
|
||||
title: nameTestForm.title,
|
||||
subtitle: nameTestForm.subtitle,
|
||||
},
|
||||
});
|
||||
nameTestLoading.value = false;
|
||||
nameTestText.value = "重新识别";
|
||||
showResult.value = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard title="名称识别测试">
|
||||
<VCardItem>
|
||||
<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
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</VExpandTransition>
|
||||
</VCardItem>
|
||||
</VCard>
|
||||
</template>
|
||||
87
src/views/system/NetTestView.vue
Normal file
87
src/views/system/NetTestView.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<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";
|
||||
|
||||
interface Status {
|
||||
Online: string;
|
||||
Away: string;
|
||||
Offline: string;
|
||||
"In Meeting": string;
|
||||
}
|
||||
|
||||
interface Users {
|
||||
avatar: string;
|
||||
name: string;
|
||||
status: keyof Status;
|
||||
lastVisited: string;
|
||||
}
|
||||
|
||||
const users: Users[] = [
|
||||
{
|
||||
avatar: avatar1,
|
||||
name: "Caroline Black",
|
||||
status: "Online",
|
||||
lastVisited: "13 minutes ago",
|
||||
},
|
||||
{
|
||||
avatar: avatar2,
|
||||
name: "Alfred Copeland",
|
||||
status: "Away",
|
||||
lastVisited: "11 minutes ago",
|
||||
},
|
||||
{
|
||||
avatar: avatar3,
|
||||
name: "Celia Schneider",
|
||||
status: "Offline",
|
||||
lastVisited: "9 minutes ago",
|
||||
},
|
||||
{
|
||||
avatar: avatar4,
|
||||
name: "Max Rogan",
|
||||
status: "In Meeting",
|
||||
lastVisited: "28 minutes ago",
|
||||
},
|
||||
];
|
||||
|
||||
const resolveStatusColor: Status = {
|
||||
Online: "success",
|
||||
Away: "warning",
|
||||
Offline: "secondary",
|
||||
"In Meeting": "error",
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VList lines="two" border rounded>
|
||||
<template v-for="(user, index) of users" :key="user.name">
|
||||
<VListItem>
|
||||
<template #prepend>
|
||||
<VAvatar :image="user.avatar" />
|
||||
</template>
|
||||
<VListItemTitle>
|
||||
{{ user.name }}
|
||||
</VListItemTitle>
|
||||
<VListItemSubtitle class="mt-1 me-2">
|
||||
<VBadge
|
||||
dot
|
||||
location="start center"
|
||||
offset-x="2"
|
||||
:color="resolveStatusColor[user.status]"
|
||||
class="me-3"
|
||||
>
|
||||
<span class="ms-4">{{ user.status }}</span>
|
||||
</VBadge>
|
||||
|
||||
<span class="text-xs text-wrap text-disabled">{{ user.lastVisited }}</span>
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template #append>
|
||||
<VBtn size="small"> Add </VBtn>
|
||||
</template>
|
||||
</VListItem>
|
||||
<VDivider v-if="index !== users.length - 1" />
|
||||
</template>
|
||||
</VList>
|
||||
</template>
|
||||
Reference in New Issue
Block a user