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

src/views/system/NameTestView.vue

@@ -46,154 +46,136 @@ const nameTest = async () => {
 </script>
 
 <template>
-  <VCard title="名称识别测试">
+  <VForm @submit.prevent="() => {}">
-    <VCardItem>
+    <VRow class="pt-2">
-      <VForm @submit.prevent="() => {}">
+      <VCol cols="12">
-        <VRow class="pt-2">
+        <VTextField
-          <VCol cols="12">
+          v-model="nameTestForm.title"
-            <VTextField
+          label="标题"
-              v-model="nameTestForm.title"
+          :rules="[requiredValidator]"
-              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>
+          </div>
-          <VCol cols="12">
+
-            <VTextarea
+          <div>
-              v-model="nameTestForm.subtitle"
+            <VCardItem class="pb-1">
-              label="副标题"
+              <VCardTitle>
-              rows="2"
+                {{ nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name }}
-              auto-grow
+                {{ nameTestResult?.meta_info?.season_episode }}
-            />
+              </VCardTitle>
-          </VCol>
+              <VCardSubtitle>
-        </VRow>
+                {{ nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year }}
-        <VRow>
+              </VCardSubtitle>
-          <VCol cols="12" class="text-center">
+            </VCardItem>
-            <VBtn @click="nameTest" :disabled="nameTestLoading">
+
-              <template #prepend>
+            <VCardText
-                <VIcon icon="mdi-text-recognition"></VIcon>
+              v-if="nameTestResult?.media_info?.overview"
-              </template>
+              class="line-clamp-4 overflow-hidden text-ellipsis ..."
-              {{ 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">
+              {{ nameTestResult?.media_info?.overview }}
-                <VImg
+            </VCardText>
-                  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>
-                <VCardItem>
+              <!-- 类型 -->
-                  <VCardTitle>
+              <VChip
-                    {{
+                variant="elevated"
-                      nameTestResult?.media_info?.title || nameTestResult?.meta_info?.name
+                class="me-1 mb-1 text-white bg-blue-500"
-                    }}
+                v-if="nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type"
-                    {{ nameTestResult?.meta_info?.season_episode }}
+              >
-                  </VCardTitle>
+                {{
-                  <VCardSubtitle>
+                  nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
-                    {{
+                }}</VChip
-                      nameTestResult?.media_info?.year || nameTestResult?.meta_info?.year
+              >
-                    }}
+              <!-- 二级分类 -->
-                  </VCardSubtitle>
+              <VChip
-                </VCardItem>
+                variant="elevated"
-
+                class="me-1 mb-1 text-white bg-blue-500"
-                <VCardText
+                v-if="nameTestResult?.media_info?.category"
-                  v-if="nameTestResult?.media_info?.overview"
+              >
-                  class="line-clamp-4 overflow-hidden text-ellipsis ..."
+                {{ nameTestResult?.media_info?.category }}
-                >
+              </VChip>
-                  {{ nameTestResult?.media_info?.overview }}
+              <!-- TMDBID -->
-                </VCardText>
+              <VChip
-
+                variant="elevated"
-                <VCardItem>
+                color="success"
-                  <!-- 类型 -->
+                class="me-1 mb-1"
-                  <VChip
+                v-if="nameTestResult?.media_info?.tmdb_id"
-                    variant="elevated"
+              >
-                    class="me-1 mb-1 text-white bg-blue-500"
+                {{ nameTestResult?.media_info?.tmdb_id }}
-                    v-if="
+              </VChip>
-                      nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
+              <!-- meta_info -->
-                    "
+              <VChip
-                  >
+                v-if="nameTestResult?.meta_info?.edition"
-                    {{
+                variant="elevated"
-                      nameTestResult?.media_info?.type || nameTestResult?.meta_info?.type
+                class="me-1 mb-1 text-white bg-red-500"
-                    }}</VChip
+              >
-                  >
+                {{ nameTestResult?.meta_info?.edition }}</VChip
-                  <!-- 二级分类 -->
+              >
-                  <VChip
+              <VChip
-                    variant="elevated"
+                v-if="nameTestResult?.meta_info?.resource_pix"
-                    class="me-1 mb-1 text-white bg-blue-500"
+                variant="elevated"
-                    v-if="nameTestResult?.media_info?.category"
+                class="me-1 mb-1 text-white bg-red-500"
-                  >
+              >
-                    {{ nameTestResult?.media_info?.category }}
+                {{ nameTestResult?.meta_info?.resource_pix }}
-                  </VChip>
+              </VChip>
-                  <!-- TMDBID -->
+              <VChip
-                  <VChip
+                v-if="nameTestResult?.meta_info?.video_encode"
-                    variant="elevated"
+                variant="elevated"
-                    color="success"
+                class="me-1 mb-1 text-white bg-orange-500"
-                    class="me-1 mb-1"
+              >
-                    v-if="nameTestResult?.media_info?.tmdb_id"
+                {{ nameTestResult?.meta_info?.video_encode }}
-                  >
+              </VChip>
-                    {{ nameTestResult?.media_info?.tmdb_id }}
+              <VChip
-                  </VChip>
+                v-if="nameTestResult?.meta_info?.audio_encode"
-                  <!-- meta_info -->
+                variant="elevated"
-                  <VChip
+                class="me-1 mb-1 text-white bg-orange-500"
-                    v-if="nameTestResult?.meta_info?.edition"
+              >
-                    variant="elevated"
+                {{ nameTestResult?.meta_info?.audio_encode }}
-                    class="me-1 mb-1 text-white bg-red-500"
+              </VChip>
-                  >
+              <VChip
-                    {{ nameTestResult?.meta_info?.edition }}</VChip
+                v-if="nameTestResult?.meta_info?.resource_team"
-                  >
+                variant="elevated"
-                  <VChip
+                class="me-1 mb-1 text-white bg-cyan-500"
-                    v-if="nameTestResult?.meta_info?.resource_pix"
+              >
-                    variant="elevated"
+                {{ nameTestResult?.meta_info?.resource_team }}
-                    class="me-1 mb-1 text-white bg-red-500"
+              </VChip>
-                  >
+            </VCardItem>
-                    {{ nameTestResult?.meta_info?.resource_pix }}
+          </div>
-                  </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>
+        <VAlert icon="mdi-alert-circle-outline" v-if="!nameTestResult?.meta_info?.name">
-    </VCardItem>
+          识别失败，无法识别到有效信息！
-  </VCard>
+        </VAlert>
+      </VCol>
+    </div>
+  </VExpandTransition>
 </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>