From 6c3bd4d476efce18b64f86262129feea3a0a9a19 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 1 Apr 2026 15:01:09 +0800
Subject: [PATCH 1/3] chore: rollback mainlayout

---
 web/src/layouts/MainLayout.vue | 36 +++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 08076ad..81735f1 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -119,56 +119,56 @@ onMounted(() => {
   
       <!-- Sidebar -->
       <aside :class="[
-        'fixed lg:static inset-y-0 z-50 w-44 2xl:w-52 border-r bg-white dark:bg-slate-900 flex flex-col transition-all duration-300 ease-in-out',
+        'fixed lg:static inset-y-0 z-50 w-44 border-r bg-white dark:bg-slate-950 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 bg-white dark:bg-slate-900">
+        <div class="h-14 flex items-center justify-center px-4 font-semibold text-lg border-b relative bg-white dark:bg-slate-950">
           <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 overflow-y-auto custom-scrollbar bg-white dark:bg-slate-900">
+        <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto bg-white dark:bg-slate-950">
           <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-slate-100 dark:bg-slate-800 text-primary font-semibold shadow-sm']"
+              :class="['justify-start gap-3 h-9 px-3 w-full', isItemActive(item) && 'bg-accent text-accent-foreground']"
               @click="handleNavClick(navigate)">
-              <component :is="item.icon" class="h-3.5 w-3.5" />
-              <span class="text-[13px]">{{ item.label }}</span>
+              <component :is="item.icon" class="h-4 w-4" />
+              {{ item.label }}
             </Button>
           </RouterLink>
         </nav>
-        <div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-900">
-          <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"
+        <div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-950">
+          <Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-foreground"
             @click="logout">
-            <LogOut class="h-3.5 w-3.5" />
-            <span class="text-[13px]">退出登录</span>
+            <LogOut class="h-4 w-4" />
+            退出登录
           </Button>
         </div>
       </aside>
   
       <!-- Main Content Area -->
-      <main class="flex-1 flex flex-col min-w-0 relative bg-slate-50/30 dark:bg-slate-950/20">
+      <main class="flex-1 flex flex-col min-w-0 relative bg-gray-50/50 dark:bg-transparent">
         <!-- Top Navigation Bar -->
-        <header class="h-14 border-b bg-white dark:bg-slate-900 flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30 shadow-sm">
+        <header class="h-14 border-b bg-white dark:bg-slate-950 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-slate-50 dark:bg-slate-800" @click="mobileMenuOpen = true">
-              <Menu class="h-4 w-4" />
+            <Button variant="ghost" size="icon" class="h-8 w-8 lg:hidden shrink-0 border" @click="mobileMenuOpen = true">
+              <Menu class="h-5 w-5" />
             </Button>
-            <span class="text-xs text-muted-foreground truncate italic opacity-80" :title="sentence" style="color: #6b7280;">
+            <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-3">
+          <div class="flex items-center gap-2">
             <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">
+        <div class="flex-1 overflow-auto relative">
+          <div class="p-4 lg:p-6 mx-auto">
             <RouterView />
           </div>
         </div>

From 03fae25a48c0e5a418c64702223c1fad985c1ebc Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 1 Apr 2026 15:06:42 +0800
Subject: [PATCH 2/3] chore: rollback mainlayout -- reset menu

---
 web/src/layouts/MainLayout.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 81735f1..5f2f033 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -106,11 +106,11 @@ onMounted(() => {
 
 <template>
   <!-- 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">
+  <div class="h-screen w-full bg-slate-50/50 dark:bg-zinc-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-white dark:bg-slate-950 relative transition-all duration-500 overflow-hidden
+      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]">
       
@@ -119,27 +119,27 @@ onMounted(() => {
   
       <!-- Sidebar -->
       <aside :class="[
-        'fixed lg:static inset-y-0 z-50 w-44 border-r bg-white dark:bg-slate-950 flex flex-col transition-all duration-300 ease-in-out',
+        'fixed lg:static inset-y-0 z-50 w-44 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 bg-white dark:bg-slate-950">
+        <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 overflow-y-auto bg-white dark:bg-slate-950">
+        <nav class="flex-1 px-3 py-6 space-y-1 flex flex-col items-center overflow-y-auto">
           <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-accent text-accent-foreground']"
+              :class="['justify-center gap-3 h-9 px-3 w-full max-w-[140px]', isItemActive(item) && 'bg-accent text-accent-foreground font-semibold shadow-sm']"
               @click="handleNavClick(navigate)">
               <component :is="item.icon" class="h-4 w-4" />
               {{ item.label }}
             </Button>
           </RouterLink>
         </nav>
-        <div class="px-3 py-4 border-t flex justify-center bg-white dark:bg-slate-950">
-          <Button variant="ghost" class="justify-start gap-3 h-9 px-3 w-full text-muted-foreground hover:text-foreground"
+        <div class="px-3 py-4 border-t flex justify-center">
+          <Button variant="ghost" class="justify-center gap-3 h-9 px-3 w-content min-w-[120px] text-muted-foreground hover:text-foreground line-clamp-1"
             @click="logout">
             <LogOut class="h-4 w-4" />
             退出登录
@@ -148,9 +148,9 @@ onMounted(() => {
       </aside>
   
       <!-- Main Content Area -->
-      <main class="flex-1 flex flex-col min-w-0 relative bg-gray-50/50 dark:bg-transparent">
+      <main class="flex-1 flex flex-col min-w-0 relative">
         <!-- Top Navigation Bar -->
-        <header class="h-14 border-b bg-white dark:bg-slate-950 flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30">
+        <header class="h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30 shadow-sm">
           <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" @click="mobileMenuOpen = true">
               <Menu class="h-5 w-5" />
@@ -160,14 +160,14 @@ onMounted(() => {
               <span class="sm:hidden">{{ sentenceContent }}</span>
             </span>
           </div>
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-3">
             <SystemNotice />
             <ThemeToggle />
           </div>
         </header>
   
         <!-- Page View Container -->
-        <div class="flex-1 overflow-auto relative">
+        <div class="flex-1 overflow-auto relative bg-background/50">
           <div class="p-4 lg:p-6 mx-auto">
             <RouterView />
           </div>

From 82e199f31e0f9246e87b3d94d47a2f9f85d15f2e Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 1 Apr 2026 15:28:10 +0800
Subject: [PATCH 3/3] chore: opt 2k-4k style

---
 web/src/layouts/MainLayout.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 5f2f033..7d6339b 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -111,7 +111,10 @@ onMounted(() => {
     <!-- 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
+             2xl:max-w-[1800px] 2xl:max-h-[92vh] 2xl:rounded-[2.5rem] 
+             2xl:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.25),0_0_0_1px_rgba(255,255,255,0.05)]
+             2xl:ring-1 2xl:ring-slate-900/5 dark:2xl:ring-white/10
+             2xl:border 2xl:border-slate-200/60 dark:2xl:border-white/5
              3xl:max-w-[2200px] 3xl:max-h-[90vh]">
       
       <!-- Mobile Menu Overlay -->
@@ -138,11 +141,12 @@ onMounted(() => {
             </Button>
           </RouterLink>
         </nav>
-        <div class="px-3 py-4 border-t flex justify-center">
-          <Button variant="ghost" class="justify-center gap-3 h-9 px-3 w-content min-w-[120px] text-muted-foreground hover:text-foreground line-clamp-1"
+        <div class="px-3 py-4 2xl:pb-12 border-t flex justify-center">
+          <Button variant="ghost" 
+            class="justify-start 2xl:justify-center gap-3 h-9 px-3 w-content 2xl:w-full 2xl:max-w-[140px] text-muted-foreground hover:text-foreground transition-all whitespace-nowrap"
             @click="logout">
-            <LogOut class="h-4 w-4" />
-            退出登录
+            <LogOut class="h-4 w-4 shrink-0" />
+            <span class="truncate">退出登录</span>
           </Button>
         </div>
       </aside>
@@ -152,8 +156,8 @@ onMounted(() => {
         <!-- Top Navigation Bar -->
         <header class="h-14 border-b bg-background flex items-center justify-between px-4 lg:px-6 shrink-0 sticky top-0 z-30 shadow-sm">
           <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" @click="mobileMenuOpen = true">
-              <Menu class="h-5 w-5" />
+            <Button variant="ghost" size="icon" class="h-9 w-9 lg:hidden shrink-0" @click="mobileMenuOpen = true">
+              <Menu class="h-5 w-5 text-muted-foreground" />
             </Button>
             <span class="text-sm text-muted-foreground truncate" :title="sentence">
               <span class="hidden sm:inline">{{ sentence }}</span>