Create 2026 admin theme interactions

src/layout/AdminLayout/AdminLayout.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     class="flex h-screen overflow-hidden flex-col transition-colors duration-300 lg:flex-row"
-    :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
+    :class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
   >
     <!-- Sidebar -->
     <aside
       class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r lg:relative lg:h-screen lg:translate-x-0"
       :class="[
         isDarkMode
-          ? 'border-gray-700 bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl'
-          : 'border-gray-200 bg-white',
+          ? 'border-[#344951] bg-[#203039]/90 backdrop-filter backdrop-blur-xl'
+          : 'border-[#d5e1e3] bg-[#f8fbfb]/92 backdrop-blur-xl',
         isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
         'transition-transform duration-300 ease-in-out lg:transition-none'
       ]"
@@ -21,19 +21,19 @@
       >
         <div class="flex items-center">
           <div
-            class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
+            class="rounded-full bg-gradient-to-r from-[#6f9cad] via-[#91b7b3] to-[#b7b0c4] p-1 animate-spin-slow"
           >
-            <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
+            <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#203039]' : 'bg-[#f8fbfb]']">
               <BoxIcon
                 class="w-6 h-6"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+                :class="[isDarkMode ? 'text-[#9cc5d2]' : 'text-[#5f8fa3]']"
               />
             </div>
           </div>
           <h1
             @click="router.push('/')"
             class="ml-2 text-xl font-semibold cursor-pointer"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+            :class="[isDarkMode ? 'text-[#eef5f5]' : 'text-[#263f48]']"
           >
             {{ t('common.appName') }}
           </h1>
@@ -53,12 +53,13 @@
               :class="[
                 route.name === item.id
                   ? isDarkMode
-                    ? 'border-indigo-400 bg-gray-700/70 text-indigo-200'
-                    : 'border-indigo-500 bg-gray-100 text-indigo-700'
+                    ? 'border-[#9cc5d2] bg-[#2b414a] text-[#d8ebef]'
+                    : 'border-[#6f9cad] bg-[#e3eef0] text-[#315f73]'
                   : isDarkMode
-                    ? 'border-transparent text-gray-400 hover:bg-gray-700'
-                    : 'border-transparent text-gray-600 hover:bg-gray-100'
+                    ? 'border-transparent text-[#aabdc2] hover:bg-[#263941]'
+                    : 'border-transparent text-[#5b737b] hover:bg-[#e7f0f1]'
               ]"
+              @click="closeSidebarForMobile"
             >
               <component :is="item.icon" class="mr-3 h-5 w-5 shrink-0" />
               {{ item.name }}
@@ -68,14 +69,14 @@
       </nav>
 
       <!-- 退出登录按钮 -->
-      <div class="p-4 border-t" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+      <div class="p-4 border-t" :class="[isDarkMode ? 'border-[#344951]' : 'border-[#d5e1e3]']">
         <button
           @click="handleLogout"
           class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
           :class="[
             isDarkMode
-              ? 'text-gray-400 hover:bg-gray-700 hover:text-white'
-              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+              ? 'text-[#aabdc2] hover:bg-[#263941] hover:text-[#eef5f5]'
+              : 'text-[#5b737b] hover:bg-[#e7f0f1] hover:text-[#263f48]'
           ]"
         >
           <LogOutIcon class="w-5 h-5 mr-3" />
@@ -89,7 +90,7 @@
       <!-- Header -->
       <header
         class="shadow-md border-b transition-colors duration-300 h-16"
-        :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"
+        :class="[isDarkMode ? 'bg-[#203039] border-[#344951]' : 'bg-[#f8fbfb] border-[#d5e1e3]']"
       >
         <div class="flex items-center justify-between h-16 px-4">
           <button @click="toggleSidebar" class="lg:hidden">
@@ -101,7 +102,7 @@
       <!-- Content -->
       <main
         class="min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
+        :class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
       >
         <router-view />
       </main>
@@ -163,6 +164,12 @@ const toggleSidebar = () => {
   isSidebarOpen.value = !isSidebarOpen.value
 }
 
+const closeSidebarForMobile = () => {
+  if (window.innerWidth < 1024) {
+    isSidebarOpen.value = false
+  }
+}
+
 // 响应式处理
 const handleResize = () => {
   if (window.innerWidth >= 1024) {