ExistIcon component

components.d.ts

@@ -11,6 +11,7 @@ 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']
+    ExistIcon: typeof import('./src/@core/components/ExistIcon.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/@core/components/ExistIcon.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="absolute top-0 right-0 flex items-center justify-between p-2">
+    <div class="pointer-events-none z-40 flex items-center">
+      <div
+        class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700"
+      >
+        <div
+          class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/cards/SiteCard.vue

@@ -2,6 +2,7 @@
 import { numberValidator, requiredValidator } from "@/@validators";
 import api from "@/api";
 import { Site } from "@/api/types";
+import ExistIcon from "@core/components/ExistIcon.vue";
 import { useToast } from "vue-toast-notification";
 // 输入参数
 const props = defineProps({
@@ -197,33 +198,7 @@ onMounted(() => {
       <VCardSubtitle>{{ props.site?.url }}</VCardSubtitle>
     </VCardItem>
 
-    <div
+    <ExistIcon v-if="siteForm.is_active" />
-      class="absolute top-0 right-0 flex items-center justify-between p-2"
-      v-if="siteForm.is_active"
-    >
-      <div class="pointer-events-none z-40 flex items-center">
-        <div
-          class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700"
-        >
-          <div
-            class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <VCardText class="py-2">
       <VTooltip text="浏览器仿真" v-if="siteForm.render">