优化 SiteCard 组件，添加删除确认功能并调整样式

src/components/cards/SiteCard.vue

@@ -9,6 +9,7 @@ import api from '@/api'
 import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { formatFileSize } from '@/@core/utils/formatters'
+import { useConfirm } from 'vuetify-use-dialog'
 
 // 输入参数
 const cardProps = defineProps({
@@ -19,6 +20,9 @@ const cardProps = defineProps({
 // 定义触发的自定义事件
 const emit = defineEmits(['update', 'remove'])
 
+// 确认框
+const createConfirm = useConfirm()
+
 // 图标
 const siteIcon = ref<string>('')
 
@@ -103,6 +107,25 @@ function openSitePage() {
   window.open(cardProps.site?.url, '_blank')
 }
 
+// 调用API删除站点信息
+async function deleteSiteInfo() {
+  const isConfirmed = await createConfirm({
+    title: '确认',
+    content: `是否确认删除站点？`,
+  })
+
+  if (!isConfirmed) return
+
+  try {
+    const result: { [key: string]: any } = await api.delete(`site/${cardProps.site?.id}`)
+    if (result.success) emit('remove')
+    else $toast.error(`${cardProps.site?.name} 删除失败：${result.message}`)
+  } catch (error) {
+    $toast.error(`${cardProps.site?.name} 删除失败！`)
+    console.error(error)
+  }
+}
+
 // 根据站点状态显示不同的状态图标
 const statColor = computed(() => {
   if (isNullOrEmptyObject(siteStats.value)) {
@@ -309,7 +332,6 @@ onMounted(() => {
           </template>
           <span>测试站点连通性</span>
         </VTooltip>
-
         <VTooltip>
           <template #activator="{ props }">
             <IconBtn v-bind="props" elevation="0" class="site-action-btn" @click.stop="handleSiteUserData">
@@ -318,7 +340,6 @@ onMounted(() => {
           </template>
           <span>查看站点数据</span>
         </VTooltip>
-
         <VTooltip v-if="!cardProps.site?.public">
           <template #activator="{ props }">
             <IconBtn v-bind="props" elevation="0" class="site-action-btn" @click.stop="handleSiteUpdate">
@@ -327,7 +348,6 @@ onMounted(() => {
           </template>
           <span>更新Cookie/UA</span>
         </VTooltip>
-
         <VTooltip>
           <template #activator="{ props }">
             <IconBtn v-bind="props" elevation="0" class="site-action-btn more-btn">
@@ -340,7 +360,7 @@ onMounted(() => {
                     </template>
                     <VListItemTitle>编辑站点</VListItemTitle>
                   </VListItem>
-                  <VListItem variant="plain" @click.stop="emit('remove')">
+                  <VListItem variant="plain" @click.stop="deleteSiteInfo">
                     <template #prepend>
                       <VIcon icon="mdi-delete-outline" size="small" color="error" />
                     </template>
@@ -666,9 +686,8 @@ onMounted(() => {
 
 /* 数据统计 */
 .site-stats {
-  border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.05);
   margin-block-start: auto;
-  padding-block-start: 6px;
+  padding-block-start: 1rem;
 }
 
 .site-data-values {
@@ -960,12 +979,12 @@ onMounted(() => {
   border: none;
   border-radius: 8px;
   background-color: rgba(var(--v-theme-surface), 1);
-  block-size: 36px;
+  block-size: 32px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 5%);
   color: rgba(var(--v-theme-on-surface), 0.8);
   cursor: pointer;
   inline-size: 36px;
-  margin-block-end: 8px;
+  margin-block-end: 4px;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 

src/components/dialog/SiteAddEditDialog.vue

@@ -5,14 +5,10 @@ import { doneNProgress, startNProgress } from '@/api/nprogress'
 import { numberValidator, requiredValidator } from '@/@validators'
 import api from '@/api'
 import { useDisplay } from 'vuetify'
-import { useConfirm } from 'vuetify-use-dialog'
 
 // 显示器宽度
 const display = useDisplay()
 
-// 确认框
-const createConfirm = useConfirm()
-
 // 输入参数
 const props = defineProps({
   siteid: Number,
@@ -108,25 +104,6 @@ async function addSite() {
   doneNProgress()
 }
 
-// 调用API删除站点信息
-async function deleteSiteInfo() {
-  const isConfirmed = await createConfirm({
-    title: '确认',
-    content: `是否确认删除站点？`,
-  })
-
-  if (!isConfirmed) return
-
-  try {
-    const result: { [key: string]: any } = await api.delete(`site/${siteForm.value?.id}`)
-    if (result.success) emit('remove')
-    else $toast.error(`${siteForm.value?.name} 删除失败：${result.message}`)
-  } catch (error) {
-    $toast.error(`${siteForm.value?.name} 删除失败！`)
-    console.error(error)
-  }
-}
-
 // 调用API更新站点信息
 async function updateSiteInfo() {
   startNProgress()
@@ -338,9 +315,6 @@ onMounted(async () => {
         </VForm>
       </VCardText>
       <VCardActions class="pt-3">
-        <VBtn v-if="props.oper !== 'add'" color="error" @click="deleteSiteInfo" variant="outlined" class="me-3">
-          删除
-        </VBtn>
         <VSpacer />
         <VBtn
           v-if="props.oper === 'add'"