add nettest

components.d.ts

@@ -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']

src/@core/components/DialogCloseBtn.vue

@@ -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>

src/layouts/components/ShortcutBar.vue

@@ -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="捷径">
+    <VCard>
-      <VDivider />
+      <VCardItem class="border-b">
+        <VCardTitle>捷径</VCardTitle>
+      </VCardItem>
       <div class="ps ps--active-y">
         <VRow class="ma-0 mt-n1">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
-            cols="6"
-            class="text-center border-t 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">
+    <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>

src/views/system/NameTestView.vue

@@ -46,8 +46,6 @@ const nameTest = async () => {
 </script>
 
 <template>
-  <VCard title="名称识别测试">
-    <VCardItem>
   <VForm @submit.prevent="() => {}">
     <VRow class="pt-2">
       <VCol cols="12">
@@ -58,12 +56,7 @@ const nameTest = async () => {
         />
       </VCol>
       <VCol cols="12">
-            <VTextarea
+        <VTextarea v-model="nameTestForm.subtitle" label="副标题" rows="2" auto-grow />
-              v-model="nameTestForm.subtitle"
-              label="副标题"
-              rows="2"
-              auto-grow
-            />
       </VCol>
     </VRow>
     <VRow>
@@ -95,17 +88,13 @@ const nameTest = async () => {
           </div>
 
           <div>
-                <VCardItem>
+            <VCardItem class="pb-1">
               <VCardTitle>
-                    {{
+                {{ nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name }}
-                      nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name
-                    }}
                 {{ nameTestResult?.meta_info?.season_episode }}
               </VCardTitle>
               <VCardSubtitle>
-                    {{
+                {{ nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year }}
-                      nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year
-                    }}
               </VCardSubtitle>
             </VCardItem>
 
@@ -121,9 +110,7 @@ const nameTest = async () => {
               <VChip
                 variant="elevated"
                 class="me-1 mb-1 text-white bg-blue-500"
-                    v-if="
+                v-if="nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type"
-                      nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
-                    "
               >
                 {{
                   nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
@@ -185,15 +172,10 @@ const nameTest = async () => {
             </VCardItem>
           </div>
         </div>
-            <VAlert
+        <VAlert icon="mdi-alert-circle-outline" v-if="!nameTestResult?.meta_info?.name">
-              icon="mdi-alert-circle-outline"
-              v-if="!nameTestResult?.meta_info?.name"
-            >
           识别失败，无法识别到有效信息！
         </VAlert>
       </VCol>
     </div>
   </VExpandTransition>
-    </VCardItem>
-  </VCard>
 </template>

src/views/system/NetTestView.vue

@@ -1,87 +1,194 @@
 <script setup lang="ts">
-import avatar1 from "@images/avatars/avatar-1.png";
+import api from "@/api";
-import avatar2 from "@images/avatars/avatar-2.png";
+import douban from "@images/logos/douban.png";
-import avatar3 from "@images/avatars/avatar-3.png";
+import github from "@images/logos/github.png";
-import avatar4 from "@images/avatars/avatar-4.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;
+  OK: string;
-  Away: string;
+  Fail: string;
-  Offline: string;
+  Normal: string;
-  "In Meeting": string;
 }
 
-interface Users {
+interface Address {
-  avatar: string;
+  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,
+    image: tmdb,
-    name: "Caroline Black",
+    name: "api.themoviedb.org",
-    status: "Online",
+    url: "https://api.themoviedb.org",
-    lastVisited: "13 minutes ago",
+    proxy: true,
+    status: "Normal",
+    time: "",
+    message: "",
+    btntext: "测试",
+    btndisable: false,
   },
   {
-    avatar: avatar2,
+    image: tmdb,
-    name: "Alfred Copeland",
+    name: "api.tmdb.org",
-    status: "Away",
+    url: "https://api.tmdb.org",
-    lastVisited: "11 minutes ago",
+    proxy: true,
+    status: "Normal",
+    time: "",
+    message: "未测试",
+    btntext: "测试",
+    btndisable: false,
   },
   {
-    avatar: avatar3,
+    image: tmdb,
-    name: "Celia Schneider",
+    name: "www.themoviedb.org",
-    status: "Offline",
+    url: "https://www.themoviedb.org",
-    lastVisited: "9 minutes ago",
+    proxy: true,
+    status: "Normal",
+    time: "",
+    message: "未测试",
+    btntext: "测试",
+    btndisable: false,
   },
   {
-    avatar: avatar4,
+    image: telegram,
-    name: "Max Rogan",
+    name: "api.telegram.org",
-    status: "In Meeting",
+    url: "https://api.telegram.org",
-    lastVisited: "28 minutes ago",
+    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",
+  OK: "success",
-  Away: "warning",
+  Fail: "error",
-  Offline: "secondary",
+  Normal: "",
-  "In Meeting": "error",
 };
+
+// 调用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>