From 39290b4edd8e2260c652287dd99593b1b629bd6a Mon Sep 17 00:00:00 2001
From: duorameng <2997944583@qq.com>
Date: Wed, 15 Apr 2026 09:31:00 +0800
Subject: [PATCH] chore: update baihu dailog

---
 web/src/components/ui/BaihuDialog.vue        | 30 ++++++++++----------
 web/src/views/loginlogs/tabs/LoginLogTab.vue | 13 +++++----
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/web/src/components/ui/BaihuDialog.vue b/web/src/components/ui/BaihuDialog.vue
index 42d5231..fa6aa83 100644
--- a/web/src/components/ui/BaihuDialog.vue
+++ b/web/src/components/ui/BaihuDialog.vue
@@ -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">
-            <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">
-              {{ title }}
-            </DialogTitle>
-          </div>
-          <DialogDescription v-if="description || $slots.description" class="text-xs text-muted-foreground/60 leading-relaxed truncate">
+      <!-- 统一的 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" />
+        <!-- 标题 (a11y 语义) -->
+        <DialogTitle class="text-[13px] font-normal text-muted-foreground tracking-wide shrink-0 whitespace-nowrap">
+          {{ title }}
+        </DialogTitle>
+        <!-- 描述 / 副标题插槽 (占满剩余宽度，截断溢出) -->
+        <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>
-
-        <DialogClose 
+        </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>
diff --git a/web/src/views/loginlogs/tabs/LoginLogTab.vue b/web/src/views/loginlogs/tabs/LoginLogTab.vue
index aa7d0cf..18ac0c2 100644
--- a/web/src/views/loginlogs/tabs/LoginLogTab.vue
+++ b/web/src/views/loginlogs/tabs/LoginLogTab.vue
@@ -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>