From 2b2c8af2cbcde7b0497eaed521fca3bf62038dbb Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 1 Apr 2026 11:35:16 +0800
Subject: [PATCH] chore: opt all screen palce

---
 web/src/layouts/MainLayout.vue        |  8 +--
 web/src/views/dashboard/Dashboard.vue | 76 +++++++++++++--------------
 web/src/views/tasks/RepoDialog.vue    |  2 +-
 web/src/views/tasks/TaskDialog.vue    |  2 +-
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 457e545..81a68ec 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -111,7 +111,7 @@ onMounted(() => {
 
     <!-- Sidebar -->
     <aside :class="[
-      'fixed lg:static inset-y-0 z-50 w-44 border-r bg-background flex flex-col transition-transform duration-300 ease-in-out',
+      '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">
@@ -140,8 +140,8 @@ onMounted(() => {
     </aside>
 
     <!-- Main Content -->
-    <main class="flex-1 overflow-auto w-full lg:w-auto min-w-0 relative">
-      <div class="h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6">
+    <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" />
@@ -156,7 +156,7 @@ onMounted(() => {
           <ThemeToggle />
         </div>
       </div>
-      <div class="p-4 lg:p-6">
+      <div class="w-full max-w-[2000px] p-4 lg:p-6 2xl:p-12 flex-1">
         <RouterView />
       </div>
     </main>
diff --git a/web/src/views/dashboard/Dashboard.vue b/web/src/views/dashboard/Dashboard.vue
index aa3268b..eba0687 100644
--- a/web/src/views/dashboard/Dashboard.vue
+++ b/web/src/views/dashboard/Dashboard.vue
@@ -441,47 +441,47 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <div>
-      <h2 class="text-2xl font-bold tracking-tight">数据仪表</h2>
-      <p class="text-muted-foreground">查看系统运行状态和统计数据</p>
-    </div>
+    <div class="space-y-4 xl:space-y-6 2xl:space-y-10">
+      <div>
+        <h2 class="text-2xl 2xl:text-4xl font-bold tracking-tight">数据仪表</h2>
+        <p class="text-muted-foreground 2xl:text-lg">查看系统运行状态和统计数据</p>
+      </div>
 
-    <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">
-          <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 font-bold">{{ displayStats[item.key as keyof Stats] }}</div>
-        </CardContent>
-      </Card>
-    </div>
+      <div class="grid gap-4 xl:gap-6 2xl:gap-8 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>
+          <CardContent>
+            <div class="text-xl sm:text-2xl 2xl:text-4xl font-bold">{{ displayStats[item.key as keyof Stats] }}</div>
+          </CardContent>
+        </Card>
+      </div>
 
-    <div class="grid gap-4 lg:grid-cols-10">
-      <Card class="lg:col-span-7 h-[400px] sm:h-[400px]">
-        <CardHeader class="pb-2">
-          <CardTitle class="text-base sm:text-lg">执行统计</CardTitle>
-          <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行情况</CardDescription>
-        </CardHeader>
-        <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">
-            加载中...
-          </div>
-        </CardContent>
-      </Card>
+      <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]">
+          <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>
+          </CardHeader>
+          <CardContent class="relative h-[300px] 2xl:h-[400px]">
+            <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">
+              加载中...
+            </div>
+          </CardContent>
+        </Card>
 
-      <Card class="lg:col-span-3 h-[400px] sm:h-[400px]">
-        <CardHeader class="pb-2">
-          <CardTitle class="text-base sm:text-lg">任务占比</CardTitle>
-          <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行分布</CardDescription>
-        </CardHeader>
-        <CardContent class="relative h-[300px]">
-          <div id="pie-chart" class="w-full h-full"></div>
+        <Card class="lg:col-span-3 h-[400px] 2xl:h-[500px]">
+          <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>
+          </CardHeader>
+          <CardContent class="relative h-[300px] 2xl:h-[400px]">
+            <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">
             加载中...
diff --git a/web/src/views/tasks/RepoDialog.vue b/web/src/views/tasks/RepoDialog.vue
index bd86f35..aaa0c89 100644
--- a/web/src/views/tasks/RepoDialog.vue
+++ b/web/src/views/tasks/RepoDialog.vue
@@ -420,7 +420,7 @@ async function save() {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="sm:max-w-[620px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent>
+    <DialogContent class="max-w-[95vw] sm:max-w-[700px] xl:max-w-[950px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent>
       <div class="flex flex-col max-h-[85vh]">
         <DialogHeader class="px-6 pr-12 pt-6 pb-2 shrink-0">
           <div class="flex items-center justify-between">
diff --git a/web/src/views/tasks/TaskDialog.vue b/web/src/views/tasks/TaskDialog.vue
index 00c5273..740b7b3 100644
--- a/web/src/views/tasks/TaskDialog.vue
+++ b/web/src/views/tasks/TaskDialog.vue
@@ -443,7 +443,7 @@ async function save() {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="sm:max-w-[560px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent>
+    <DialogContent class="max-w-[95vw] sm:max-w-[600px] xl:max-w-[850px] p-0 overflow-hidden border-none bg-background shadow-2xl transition-all duration-300" style="text-rendering: optimizeLegibility;" @openAutoFocus.prevent>
       <div class="flex flex-col max-h-[85vh]">
         <DialogHeader class="px-6 pr-12 pt-6 pb-2 shrink-0 border-b border-muted/50">
           <DialogTitle class="text-xl font-bold py-2">