From aa4ac4834ad92e12f541ed10237909a92ca0df69 Mon Sep 17 00:00:00 2001
From: duorameng <2997944583@qq.com>
Date: Tue, 7 Apr 2026 19:33:02 +0800
Subject: [PATCH] chore: opt middle screen style -- fix tasks view

---
 web/src/views/loginlogs/tabs/LoginLogTab.vue    | 13 ++++++-------
 web/src/views/loginlogs/tabs/SystemEventTab.vue |  4 ++--
 web/src/views/tasks/Tasks.vue                   | 14 +++++++-------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/web/src/views/loginlogs/tabs/LoginLogTab.vue b/web/src/views/loginlogs/tabs/LoginLogTab.vue
index 0b941fc..58a82ab 100644
--- a/web/src/views/loginlogs/tabs/LoginLogTab.vue
+++ b/web/src/views/loginlogs/tabs/LoginLogTab.vue
@@ -179,9 +179,9 @@ onMounted(loadLogs)
                         <span :class="['h-1.5 w-1.5 rounded-full shrink-0', log.status === 'success' ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.3)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.3)]']"></span>
                         <span class="font-medium truncate text-sm">{{ log.username }}</span>
                     </div>
-                    <div class="w-32 shrink-0">
-                        <code class="text-[11px] text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded truncate cursor-pointer hover:bg-muted/80 transition-colors inline-block tabular-nums"
-                            @click="showIpInfo(log.ip)">{{ log.ip }}</code>
+                    <div class="w-32 shrink-0 overflow-hidden">
+                        <code class="block w-full text-[11px] text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded truncate cursor-pointer hover:bg-muted/80 transition-colors tabular-nums"
+                            @click="showIpInfo(log.ip)" :title="log.ip">{{ log.ip }}</code>
                     </div>
                     <span class="flex-1 min-w-0 text-xs text-muted-foreground line-clamp-1">
                         {{ log.user_agent || '-' }}
@@ -199,10 +199,9 @@ onMounted(loadLogs)
                         <span :class="['h-2 w-2 rounded-full shrink-0', log.status === 'success' ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.3)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.3)]']"></span>
                         <span class="truncate">{{ log.username }}</span>
                     </div>
-                    <div class="w-40 shrink-0">
-                        <code
-                            class="text-xs text-muted-foreground bg-muted px-2 py-1 rounded truncate cursor-pointer hover:bg-muted/80 transition-colors inline-block tabular-nums"
-                            @click="showIpInfo(log.ip)">{{ log.ip }}</code>
+                    <div class="w-40 shrink-0 overflow-hidden">
+                        <code class="block w-full text-xs text-muted-foreground bg-muted px-2 py-1 rounded truncate cursor-pointer hover:bg-muted/80 transition-colors tabular-nums"
+                            @click="showIpInfo(log.ip)" :title="log.ip">{{ log.ip }}</code>
                     </div>
                     <span class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
                         <TextOverflow :text="log.user_agent || '-'" title="User Agent" />
diff --git a/web/src/views/loginlogs/tabs/SystemEventTab.vue b/web/src/views/loginlogs/tabs/SystemEventTab.vue
index c6be2e6..f20fd33 100644
--- a/web/src/views/loginlogs/tabs/SystemEventTab.vue
+++ b/web/src/views/loginlogs/tabs/SystemEventTab.vue
@@ -227,7 +227,7 @@ function onDialogClose(open: boolean) {
 
             <!-- ========== 2. 中屏表头 (Medium 640px - 1024px) ========== -->
             <div class="hidden sm:flex lg:hidden items-center gap-4 px-4 py-2 border-b bg-muted/20 text-sm text-muted-foreground font-medium">
-                <span class="w-48 shrink-0">事件信息</span>
+                <span class="w-60 shrink-0">事件信息</span>
                 <span class="flex-1 min-w-0">详情内容</span>
                 <span class="w-40 shrink-0 text-right">发生时间</span>
             </div>
@@ -265,7 +265,7 @@ function onDialogClose(open: boolean) {
                 <div v-for="log in logs" :key="`medium-${log.id}`"
                     class="hidden sm:flex lg:hidden items-center gap-4 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer group"
                     :class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
-                    <div class="w-48 shrink-0 flex items-center gap-3 min-w-0 font-medium text-sm">
+                    <div class="w-60 shrink-0 flex items-center gap-3 min-w-0 font-medium text-sm">
                         <component :is="getLevelIcon(log.level)" :class="['h-3.5 w-3.5 shrink-0 opacity-80',
                             log.level === LOG_LEVEL.INFO ? 'text-blue-500' :
                                 log.level === LOG_LEVEL.WARNING ? 'text-yellow-500' : 'text-red-500']" />
diff --git a/web/src/views/tasks/Tasks.vue b/web/src/views/tasks/Tasks.vue
index b233e1a..83d81a0 100644
--- a/web/src/views/tasks/Tasks.vue
+++ b/web/src/views/tasks/Tasks.vue
@@ -325,23 +325,23 @@ watch(() => route.query.agent_id, (newVal: any) => {
 
 <template>
   <div class="space-y-6">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
       <div class="flex flex-col shrink-0">
         <h2 class="text-xl sm:text-2xl font-bold tracking-tight">定时任务</h2>
         <p class="text-muted-foreground text-sm">管理和调度自动化执行任务</p>
       </div>
 
-      <div class="flex flex-col sm:flex-row gap-3 w-full sm:flex-1 sm:justify-end">
+      <div class="flex flex-col sm:flex-row flex-wrap gap-3 w-full lg:flex-1 lg:justify-end">
         <!-- 搜索与标签 -->
-        <div class="flex flex-col sm:flex-row items-center gap-2 w-full sm:w-auto">
-          <div class="relative w-full sm:w-36 md:w-40 lg:w-48 group">
+        <div class="flex flex-col sm:flex-row items-center gap-2 w-full sm:flex-1 sm:w-auto text-sm">
+          <div class="relative w-full sm:flex-1 lg:max-w-[240px] group">
             <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
-            <Input v-model="filterName" placeholder="搜索任务..." class="h-9 pl-9 w-full text-sm bg-muted/20 border-muted-foreground/10 focus:bg-background"
+            <Input v-model="filterName" placeholder="搜索任务..." class="h-9 pl-9 w-full bg-muted/20 border-muted-foreground/10 focus:bg-background"
               @input="handleSearch" />
           </div>
-          <div class="relative w-full sm:w-32 md:w-36 lg:w-40 group">
+          <div class="relative w-full sm:flex-1 lg:max-w-[180px] group">
             <Tag class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
-            <Input v-model="filterTags" placeholder="搜索标签..." class="h-9 pl-9 w-full text-sm bg-muted/20 border-muted-foreground/10 focus:bg-background"
+            <Input v-model="filterTags" placeholder="搜索标签..." class="h-9 pl-9 w-full bg-muted/20 border-muted-foreground/10 focus:bg-background"
               @input="handleSearch" />
           </div>
         </div>