From 2efde56a828db8edc6588a59f72eaf959230b802 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 18 Jul 2023 17:03:51 +0800
Subject: [PATCH] add nametest

---
 src/layouts/components/ShortcutBar.vue |  28 +++-
 src/views/system/NameTestView.vue      | 199 +++++++++++++++++++++++++
 src/views/system/NetTestView.vue       |  87 +++++++++++
 3 files changed, 312 insertions(+), 2 deletions(-)
 create mode 100644 src/views/system/NameTestView.vue
 create mode 100644 src/views/system/NetTestView.vue

diff --git a/src/layouts/components/ShortcutBar.vue b/src/layouts/components/ShortcutBar.vue
index 3e03c743..a3d6ceca 100644
--- a/src/layouts/components/ShortcutBar.vue
+++ b/src/layouts/components/ShortcutBar.vue
@@ -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>
diff --git a/src/views/system/NameTestView.vue b/src/views/system/NameTestView.vue
new file mode 100644
index 00000000..c9986698
--- /dev/null
+++ b/src/views/system/NameTestView.vue
@@ -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>
diff --git a/src/views/system/NetTestView.vue b/src/views/system/NetTestView.vue
new file mode 100644
index 00000000..ded07c35
--- /dev/null
+++ b/src/views/system/NetTestView.vue
@@ -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>