From f06b09a5c7c0c2fb87e65480b8f95e9b0eaaed08 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 1 Apr 2026 11:53:05 +0800
Subject: [PATCH] chore: opt large screen style

---
 web/src/layouts/MainLayout.vue        | 136 ++++++++++++++++----------
 web/src/views/dashboard/Dashboard.vue |  34 +++----
 2 files changed, 102 insertions(+), 68 deletions(-)

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 81a68ec..1ddb513 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -105,60 +105,94 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-screen overflow-hidden bg-muted/40">
-    <!-- Mobile Menu Overlay -->
-    <div v-if="mobileMenuOpen" class="fixed inset-0 bg-black/50 z-40 lg:hidden" @click="mobileMenuOpen = false" />
-
-    <!-- Sidebar -->
-    <aside :class="[
-      'fixed lg:static inset-y-0 z-50 w-44 2xl:w-60 border-r bg-background flex flex-col transition-all duration-300 ease-in-out',
-      mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
-    ]">
-      <div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b relative">
-        <span>{{ siteSettings.title }}</span>
-        <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
-          <X class="h-4 w-4" />
-        </Button>
-      </div>
-      <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center">
-        <RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
-          <Button variant="ghost"
-            :class="['justify-start gap-3 h-9 px-3', isItemActive(item) && 'bg-accent text-accent-foreground']"
-            @click="handleNavClick(navigate)">
-            <component :is="item.icon" class="h-4 w-4" />
-            {{ item.label }}
+  <!-- Root Container: Handles the background and centering on 2K+ screens -->
+  <div class="h-screen w-full bg-slate-50/50 dark:bg-slate-950 flex items-center justify-center 2xl:p-8 3xl:p-12 transition-all duration-500 overflow-hidden">
+    
+    <!-- Application Card: The main floating surface -->
+    <div :style="mobileMenuOpen ? 'transform: scale(0.98); opacity: 0.9;' : ''"
+      class="flex h-full w-full bg-background relative transition-all duration-500 overflow-hidden
+             2xl:max-w-[1800px] 2xl:max-h-[92vh] 2xl:rounded-[2.5rem] 2xl:shadow-[0_40px_100px_-20px_rgba(0,0,0,0.12)] 2xl:border 2xl:border-slate-200/60 dark:2xl:border-slate-800/40
+             3xl:max-w-[2200px] 3xl:max-h-[90vh]">
+      
+      <!-- Mobile Menu Overlay -->
+      <div v-if="mobileMenuOpen" class="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-40 lg:hidden" @click="mobileMenuOpen = false" />
+  
+      <!-- Sidebar -->
+      <aside :class="[
+        'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-background flex flex-col transition-all duration-300 ease-in-out',
+        mobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+      ]">
+        <div class="h-14 flex items-center justify-center px-4 font-bold text-lg border-b relative">
+          <span>{{ siteSettings.title }}</span>
+          <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden absolute right-2" @click="mobileMenuOpen = false">
+            <X class="h-4 w-4" />
           </Button>
-        </RouterLink>
-      </nav>
-      <div class="px-3 py-4 border-t flex justify-center">
-        <Button variant="ghost" class="justify-start gap-3 h-9 px-3 text-muted-foreground hover:text-foreground"
-          @click="logout">
-          <LogOut class="h-4 w-4" />
-          退出登录
-        </Button>
-      </div>
-    </aside>
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-auto w-full lg:w-auto min-w-0 relative flex flex-col items-center bg-gray-50/50 dark:bg-transparent">
-      <div class="w-full h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6 2xl:px-10 shrink-0">
-        <div class="flex items-center gap-3 flex-1 min-w-0">
-          <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0" @click="mobileMenuOpen = true">
-            <Menu class="h-5 w-5" />
+        </div>
+        <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto custom-scrollbar">
+          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to" custom v-slot="{ navigate }">
+            <Button variant="ghost"
+              :class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-primary/5 text-primary font-semibold shadow-sm']"
+              @click="handleNavClick(navigate)">
+              <component :is="item.icon" class="h-3.5 w-3.5" />
+              <span class="text-[13px]">{{ item.label }}</span>
+            </Button>
+          </RouterLink>
+        </nav>
+        <div class="px-3 py-4 border-t flex justify-center">
+          <Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors"
+            @click="logout">
+            <LogOut class="h-3.5 w-3.5" />
+            <span class="text-[13px]">退出登录</span>
           </Button>
-          <span class="text-sm text-muted-foreground truncate" :title="sentence">
-            <span class="hidden sm:inline">{{ sentence }}</span>
-            <span class="sm:hidden">{{ sentenceContent }}</span>
-          </span>
         </div>
-        <div class="flex items-center gap-2">
-          <SystemNotice />
-          <ThemeToggle />
+      </aside>
+  
+      <!-- Main Content Area -->
+      <main class="flex-1 flex flex-col min-w-0 relative bg-white/5 dark:bg-slate-900/10">
+        <!-- Top Navigation Bar -->
+        <header class="h-14 border-b bg-background/80 backdrop-blur-md flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30">
+          <div class="flex items-center gap-3 flex-1 min-w-0">
+            <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border bg-muted/20" @click="mobileMenuOpen = true">
+              <Menu class="h-4 w-4" />
+            </Button>
+            <span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence">
+              <span class="hidden sm:inline">{{ sentence }}</span>
+              <span class="sm:hidden">{{ sentenceContent }}</span>
+            </span>
+          </div>
+          <div class="flex items-center gap-3">
+            <SystemNotice />
+            <ThemeToggle />
+          </div>
+        </header>
+  
+        <!-- Page View Container -->
+        <div class="flex-1 overflow-auto custom-scrollbar relative">
+          <div class="p-4 lg:p-6 2xl:p-10 mx-auto">
+            <RouterView />
+          </div>
         </div>
-      </div>
-      <div class="w-full max-w-[2000px] p-4 lg:p-6 2xl:p-12 flex-1">
-        <RouterView />
-      </div>
-    </main>
+      </main>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+}
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.05);
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/web/src/views/dashboard/Dashboard.vue b/web/src/views/dashboard/Dashboard.vue
index eba0687..7192356 100644
--- a/web/src/views/dashboard/Dashboard.vue
+++ b/web/src/views/dashboard/Dashboard.vue
@@ -441,32 +441,32 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="space-y-4 xl:space-y-6 2xl:space-y-10">
+    <div class="space-y-4">
       <div>
-        <h2 class="text-2xl 2xl:text-4xl font-bold tracking-tight">数据仪表</h2>
-        <p class="text-muted-foreground 2xl:text-lg">查看系统运行状态和统计数据</p>
+        <h2 class="text-2xl font-bold tracking-tight">数据仪表</h2>
+        <p class="text-muted-foreground">查看系统运行状态和统计数据</p>
       </div>
 
-      <div class="grid gap-4 xl:gap-6 2xl:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
+      <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
         <Card v-for="item in statItems" :key="item.key" class="cursor-pointer hover:bg-accent/50 transition-colors"
           @click="navigateTo(item.route)">
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2 2xl:pb-4">
-            <CardTitle class="text-xs sm:text-sm 2xl:text-base font-medium">{{ item.label }}</CardTitle>
-            <component :is="item.icon" class="h-4 w-4 2xl:h-5 2xl:w-5 text-muted-foreground" />
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-xs sm:text-sm font-medium">{{ item.label }}</CardTitle>
+            <component :is="item.icon" class="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div class="text-xl sm:text-2xl 2xl:text-4xl font-bold">{{ displayStats[item.key as keyof Stats] }}</div>
+            <div class="text-xl sm:text-2xl font-bold">{{ displayStats[item.key as keyof Stats] }}</div>
           </CardContent>
         </Card>
       </div>
 
-      <div class="grid gap-4 xl:gap-6 2xl:gap-8 lg:grid-cols-10">
-        <Card class="lg:col-span-7 h-[400px] 2xl:h-[500px]">
+      <div class="grid gap-4 lg:grid-cols-10">
+        <Card class="lg:col-span-7 h-[400px]">
           <CardHeader class="pb-2">
-            <CardTitle class="text-base sm:text-lg 2xl:text-xl">执行统计</CardTitle>
-            <CardDescription class="text-xs sm:text-sm 2xl:text-base">最近{{ chartDays }}天任务执行情况</CardDescription>
+            <CardTitle class="text-base sm:text-lg">执行统计</CardTitle>
+            <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行情况</CardDescription>
           </CardHeader>
-          <CardContent class="relative h-[300px] 2xl:h-[400px]">
+          <CardContent class="relative h-[300px]">
             <div id="stats-chart" class="w-full h-full"></div>
             <div v-if="!chartsLoaded"
               class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">
@@ -475,12 +475,12 @@ onUnmounted(() => {
           </CardContent>
         </Card>
 
-        <Card class="lg:col-span-3 h-[400px] 2xl:h-[500px]">
+        <Card class="lg:col-span-3 h-[400px]">
           <CardHeader class="pb-2">
-            <CardTitle class="text-base sm:text-lg 2xl:text-xl">任务占比</CardTitle>
-            <CardDescription class="text-xs sm:text-sm 2xl:text-base">最近{{ chartDays }}天任务执行分布</CardDescription>
+            <CardTitle class="text-base sm:text-lg">任务占比</CardTitle>
+            <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行分布</CardDescription>
           </CardHeader>
-          <CardContent class="relative h-[300px] 2xl:h-[400px]">
+          <CardContent class="relative h-[300px]">
             <div id="pie-chart" class="w-full h-full"></div>
           <div v-if="!chartsLoaded"
             class="absolute inset-0 flex items-center justify-center text-muted-foreground text-sm bg-card">