chore: update baihu dailog

This commit is contained in:
duorameng
2026-04-15 09:31:00 +08:00
parent f42e33ad27
commit 39290b4edd
2 changed files with 23 additions and 20 deletions
+11 -11
View File
@@ -5,7 +5,6 @@ import { computed } from 'vue'
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogClose
@@ -56,26 +55,27 @@ const sizeClasses = {
'transition-all duration-300'
]"
>
<!-- 统一的 Header 风格 (参考日志详情) -->
<div class="flex items-center justify-between px-4 h-11 border-b bg-muted/20 shrink-0">
<DialogHeader class="space-y-1 text-left flex-1 min-w-0">
<div class="flex items-center gap-2">
<!-- 统一的 Header 风格 -->
<div class="flex items-center px-4 h-11 border-b bg-muted/20 shrink-0 gap-2 overflow-hidden">
<!-- 图标 -->
<component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 text-primary shrink-0" />
<DialogTitle class="text-[13px] font-normal text-muted-foreground tracking-wide truncate">
<!-- 标题 (a11y 语义) -->
<DialogTitle class="text-[13px] font-normal text-muted-foreground tracking-wide shrink-0 whitespace-nowrap">
{{ title }}
</DialogTitle>
</div>
<DialogDescription v-if="description || $slots.description" class="text-xs text-muted-foreground/60 leading-relaxed truncate">
<!-- 描述 / 副标题插槽 (占满剩余宽度截断溢出) -->
<div class="flex-1 min-w-0 overflow-hidden">
<DialogDescription v-if="description || $slots.description" class="truncate text-xs leading-none">
<slot name="description">{{ description }}</slot>
</DialogDescription>
<DialogDescription v-else class="sr-only">
{{ title || '提示对话框' }}
</DialogDescription>
</DialogHeader>
</div>
<!-- 关闭按钮 -->
<DialogClose
v-if="showClose"
class="h-7 w-7 rounded-md opacity-70 transition-all hover:opacity-100 hover:bg-muted flex items-center justify-center -mr-1"
class="h-7 w-7 rounded-md opacity-70 transition-all hover:opacity-100 hover:bg-muted flex items-center justify-center shrink-0 ml-auto -mr-1"
>
<X class="h-4 w-4 text-muted-foreground" />
<span class="sr-only">关闭</span>
+8 -5
View File
@@ -212,9 +212,9 @@ onMounted(loadLogs)
</div>
<!-- IP 地理位置弹窗 -->
<BaihuDialog v-model:open="ipDialogOpen" title="IP 详情信息">
<BaihuDialog v-model:open="ipDialogOpen" title="IP 详情">
<template #description>
<code class="text-[10px] bg-muted px-2 py-0.5 rounded-md font-mono">{{ selectedIp }}</code>
<code class="text-[10px] bg-primary/10 text-primary px-2 py-0.5 rounded font-mono tracking-wider">{{ selectedIp }}</code>
</template>
<div v-if="ipGeoLoading" class="flex items-center justify-center py-12">
@@ -241,9 +241,12 @@ onMounted(loadLogs)
<span class="text-muted-foreground shrink-0">组织</span>
<span class="font-medium truncate text-right">{{ ipGeoInfo.organization || '-' }}</span>
</div>
<div class="flex justify-between items-center text-sm gap-2">
<span class="text-muted-foreground shrink-0">ASN</span>
<span class="font-medium truncate text-right">{{ ipGeoInfo.asn }} - {{ ipGeoInfo.asn_organization || '-' }}</span>
<div class="flex justify-between items-start text-sm gap-2">
<span class="text-muted-foreground shrink-0 mt-0.5">ASN</span>
<div class="text-right min-w-0">
<div class="font-medium font-mono text-xs text-primary/80">AS{{ ipGeoInfo.asn }}</div>
<div class="text-xs text-muted-foreground truncate" :title="ipGeoInfo.asn_organization">{{ ipGeoInfo.asn_organization || '-' }}</div>
</div>
</div>
</div>