🎨 调整2026莫兰迪主题色

src/App.vue

@@ -42,11 +42,15 @@ const {
 }
 
 .light {
-  @apply bg-gradient-to-br from-blue-50 via-indigo-50 to-white;
+  background:
+    linear-gradient(135deg, #dfe9eb 0%, #edf3f2 46%, #f7f8f5 100%),
+    linear-gradient(90deg, rgba(103, 135, 145, 0.12), rgba(162, 172, 154, 0.1));
 }
 
 .dark {
-  @apply bg-gradient-to-br from-gray-900 via-indigo-900 to-black;
+  background:
+    linear-gradient(135deg, #10191e 0%, #17252b 48%, #223036 100%),
+    linear-gradient(90deg, rgba(113, 153, 168, 0.12), rgba(117, 143, 132, 0.08));
 }
 
 .fade-enter-active,
@@ -100,7 +104,7 @@ const {
   width: 50px;
   height: 50px;
   border: 3px solid #fff;
-  border-top: 3px solid #3498db;
+  border-top: 3px solid #6f98a6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

src/assets/style/main.css

@@ -154,3 +154,263 @@
     linear-gradient(135deg, rgba(42, 62, 72, 0.98), rgba(29, 48, 58, 0.96)),
     radial-gradient(circle at 0% 0%, rgba(117, 166, 184, 0.22), transparent 36%);
 }
+
+.bg-indigo-50,
+.bg-blue-50 {
+  background-color: #dce8eb !important;
+}
+
+.bg-indigo-100,
+.bg-blue-100 {
+  background-color: #d1e0e3 !important;
+}
+
+.bg-indigo-500,
+.bg-blue-500,
+.bg-cyan-500 {
+  background-color: #6f98a6 !important;
+}
+
+.bg-indigo-600,
+.bg-blue-600,
+.bg-cyan-600 {
+  background-color: #5f8796 !important;
+}
+
+.bg-indigo-700,
+.bg-blue-700,
+.bg-cyan-700 {
+  background-color: #527887 !important;
+}
+
+.bg-green-50 {
+  background-color: #e1eee8 !important;
+}
+
+.bg-green-100 {
+  background-color: #d4e5dd !important;
+}
+
+.bg-green-500,
+.bg-green-600 {
+  background-color: #6f9688 !important;
+}
+
+.bg-green-700 {
+  background-color: #5f8377 !important;
+}
+
+.bg-red-50 {
+  background-color: #f1e2e5 !important;
+}
+
+.bg-red-100 {
+  background-color: #e8d3d7 !important;
+}
+
+.bg-red-500,
+.bg-red-600 {
+  background-color: #9b6a72 !important;
+}
+
+.bg-red-700 {
+  background-color: #895c63 !important;
+}
+
+.bg-purple-50 {
+  background-color: #e7e2ea !important;
+}
+
+.bg-purple-100 {
+  background-color: #ddd6e2 !important;
+}
+
+.bg-purple-500,
+.bg-pink-500 {
+  background-color: #8c8294 !important;
+}
+
+.bg-purple-600,
+.bg-pink-600 {
+  background-color: #7b7284 !important;
+}
+
+.text-indigo-200,
+.text-blue-200 {
+  color: #d8e8eb !important;
+}
+
+.text-indigo-300,
+.text-blue-300 {
+  color: #b8d4dc !important;
+}
+
+.text-indigo-400,
+.text-blue-400,
+.text-cyan-400 {
+  color: #8fb2bf !important;
+}
+
+.text-indigo-500,
+.text-blue-500,
+.text-cyan-500 {
+  color: #6f98a6 !important;
+}
+
+.text-indigo-600,
+.text-blue-600,
+.text-cyan-600 {
+  color: #5f8796 !important;
+}
+
+.text-indigo-700,
+.text-blue-700 {
+  color: #3f6a77 !important;
+}
+
+.text-green-300,
+.text-green-400 {
+  color: #b6d6ca !important;
+}
+
+.text-green-500,
+.text-green-600,
+.text-green-700 {
+  color: #5f8377 !important;
+}
+
+.text-red-200,
+.text-red-300,
+.text-red-400 {
+  color: #e5c5ca !important;
+}
+
+.text-red-500,
+.text-red-600,
+.text-red-700 {
+  color: #8b5962 !important;
+}
+
+.text-purple-300,
+.text-purple-400 {
+  color: #d4c8dc !important;
+}
+
+.text-purple-500,
+.text-purple-600,
+.text-purple-700 {
+  color: #6f6379 !important;
+}
+
+.border-indigo-100,
+.border-blue-100 {
+  border-color: #cfe1e4 !important;
+}
+
+.border-indigo-300,
+.border-blue-300 {
+  border-color: #9db6bd !important;
+}
+
+.border-indigo-400,
+.border-indigo-500,
+.border-blue-500 {
+  border-color: #8fb2bf !important;
+}
+
+.border-indigo-600 {
+  border-color: #5f8796 !important;
+}
+
+.border-red-100 {
+  border-color: #e8d3d7 !important;
+}
+
+.border-red-200,
+.border-red-500 {
+  border-color: #c9a4aa !important;
+}
+
+.focus\:ring-indigo-500:focus,
+.focus\:ring-blue-500:focus,
+.focus\:ring-cyan-500:focus,
+.focus\:ring-purple-500:focus {
+  --tw-ring-color: #8fb2bf !important;
+}
+
+.focus\:border-indigo-500:focus,
+.focus\:border-cyan-500:focus {
+  border-color: #8fb2bf !important;
+}
+
+.hover\:bg-indigo-100:hover,
+.hover\:bg-blue-100:hover {
+  background-color: #cfe1e4 !important;
+}
+
+.hover\:bg-indigo-500:hover,
+.hover\:bg-blue-500:hover,
+.hover\:bg-cyan-500:hover {
+  background-color: #6f98a6 !important;
+}
+
+.hover\:bg-indigo-600:hover,
+.hover\:bg-blue-600:hover,
+.hover\:bg-cyan-600:hover {
+  background-color: #527887 !important;
+}
+
+.hover\:bg-indigo-700:hover,
+.hover\:bg-blue-700:hover,
+.hover\:bg-cyan-700:hover {
+  background-color: #466b78 !important;
+}
+
+.hover\:bg-green-100:hover {
+  background-color: #d4e5dd !important;
+}
+
+.hover\:bg-green-400:hover,
+.hover\:bg-green-600:hover,
+.hover\:bg-green-700:hover {
+  background-color: #5f8377 !important;
+}
+
+.hover\:bg-red-100:hover {
+  background-color: #e8d3d7 !important;
+}
+
+.hover\:bg-red-400:hover,
+.hover\:bg-red-600:hover,
+.hover\:bg-red-700:hover {
+  background-color: #895c63 !important;
+}
+
+.hover\:border-indigo-500:hover {
+  border-color: #8fb2bf !important;
+}
+
+.from-indigo-500,
+.from-indigo-600,
+.from-cyan-500,
+.from-cyan-600 {
+  --tw-gradient-from: #5f8796 var(--tw-gradient-from-position) !important;
+  --tw-gradient-to: rgba(95, 135, 150, 0) var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
+}
+
+.via-purple-500,
+.via-purple-600 {
+  --tw-gradient-to: rgba(140, 130, 148, 0) var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops:
+    var(--tw-gradient-from),
+    #8c8294 var(--tw-gradient-via-position),
+    var(--tw-gradient-to) !important;
+}
+
+.to-purple-500,
+.to-purple-600,
+.to-pink-500,
+.to-pink-600 {
+  --tw-gradient-to: #6f9688 var(--tw-gradient-to-position) !important;
+}

src/components/common/AlertComponent.vue

@@ -56,10 +56,10 @@ const { alerts } = storeToRefs(alertStore)
 const { removeAlert, startProgressTimer, stopProgressTimer } = alertStore
 
 const gradientClasses = {
-  success: 'from-green-500 to-green-600',
+  success: 'from-[#6f9688] to-[#5f8377]',
-  error: 'from-red-500 to-red-600',
+  error: 'from-[#9b6a72] to-[#895c63]',
-  warning: 'from-yellow-500 to-yellow-600',
+  warning: 'from-[#b2a16f] to-[#9b8b5e]',
-  info: 'from-blue-500 to-blue-600'
+  info: 'from-[#5f8796] to-[#527887]'
 }
 
 const alertIcons = {

src/components/common/BaseButton.vue

@@ -56,27 +56,27 @@ const variantClasses = computed(() => {
   const baseClasses = 'focus:ring-2 focus:ring-offset-2'
   
   if (props.variant === 'primary') {
-    return `${baseClasses} bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500`
+    return `${baseClasses} bg-[#5f8796] text-white shadow-[#9fb8bf]/35 hover:bg-[#527887] focus:ring-[#8fb2bf]`
   }
   
   if (props.variant === 'secondary') {
     return isDarkMode.value
-      ? `${baseClasses} bg-gray-700 text-gray-300 hover:bg-gray-600 focus:ring-gray-500 border border-gray-600`
+      ? `${baseClasses} border border-[#40545c] bg-[#263941] text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#2d4751] focus:ring-[#7199a8]`
-      : `${baseClasses} bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300`
+      : `${baseClasses} border border-[#c8d8dc] bg-[#edf4f5] text-[#415d66] hover:border-[#9db6bd] hover:bg-[#e2ecee] focus:ring-[#8fb2bf]`
   }
   
   if (props.variant === 'danger') {
-    return `${baseClasses} bg-red-600 text-white hover:bg-red-700 focus:ring-red-500`
+    return `${baseClasses} bg-[#9b6a72] text-white shadow-[#c9a4aa]/35 hover:bg-[#895c63] focus:ring-[#b98f97]`
   }
   
   if (props.variant === 'success') {
-    return `${baseClasses} bg-green-600 text-white hover:bg-green-700 focus:ring-green-500`
+    return `${baseClasses} bg-[#6f9688] text-white shadow-[#aac4ba]/35 hover:bg-[#5f8377] focus:ring-[#92b3a7]`
   }
   
   if (props.variant === 'outline') {
     return isDarkMode.value
-      ? `${baseClasses} border border-gray-600 text-gray-300 hover:bg-gray-700 focus:ring-gray-500`
+      ? `${baseClasses} border border-[#40545c] text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#263941] focus:ring-[#7199a8]`
-      : `${baseClasses} border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500`
+      : `${baseClasses} border border-[#c8d8dc] text-[#415d66] hover:border-[#9db6bd] hover:bg-[#edf4f5] focus:ring-[#8fb2bf]`
   }
   
   return ''

src/components/common/BorderProgressBar.vue

@@ -29,9 +29,9 @@ const drawProgress = () => {
 
   // 创建渐变
   const gradient = ctx.createLinearGradient(0, 0, width, height);
-  gradient.addColorStop(0, '#4f46e5');  // 靛蓝色
+  gradient.addColorStop(0, '#5f8796');
-  gradient.addColorStop(0.5, '#7c3aed'); // 紫色
+  gradient.addColorStop(0.5, '#6f9688');
-  gradient.addColorStop(1, '#db2777');  // 粉色
+  gradient.addColorStop(1, '#8c8294');
 
   // 绘制背景
   ctx.strokeStyle = 'rgba(229, 231, 235, 0.2)'; // 淡灰色半透明
@@ -151,4 +151,4 @@ watch(() => props.progress, drawProgress);
   height: 100%;
   transition: all 0.3s ease;
 }
-</style>
+</style>

src/components/common/DataPagination.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="mt-4 flex flex-col gap-3 border-t px-6 py-4 sm:flex-row sm:items-center sm:justify-between"
-    :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+    :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']"
   >
     <div
       class="flex items-center text-sm"
@@ -14,11 +14,11 @@
     <div class="flex flex-wrap items-center gap-2">
       <select
         :value="pageSize"
-        class="h-9 rounded-md border px-2 text-sm"
+        class="h-9 rounded-[30px] border px-3 text-sm shadow-sm transition-colors"
         :class="[
           isDarkMode
-            ? 'border-gray-700 bg-gray-800 text-gray-200'
+            ? 'border-[#40545c] bg-[#263941] text-[#d8e3e5] hover:border-[#7199a8]'
-            : 'border-gray-200 bg-white text-gray-700'
+            : 'border-[#c8d8dc] bg-[#edf4f5] text-[#415d66] hover:border-[#9db6bd]'
         ]"
         @change="$emit('page-size-change', Number(($event.target as HTMLSelectElement).value))"
       >
@@ -27,15 +27,15 @@
       <button
         @click="$emit('page-change', currentPage - 1)"
         :disabled="currentPage === 1"
-        class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
+        class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
         :class="[
           isDarkMode
             ? currentPage === 1
-              ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
+              ? 'cursor-not-allowed bg-[#223039] text-[#657a80]'
-              : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+              : 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
             : currentPage === 1
-              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              ? 'cursor-not-allowed bg-[#e8eeee] text-[#9aa9ad]'
-              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              : 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
         ]"
       >
         <ChevronLeftIcon class="w-4 h-4" />
@@ -47,13 +47,13 @@
           <button
             v-if="pageNum !== '...'"
             @click="$emit('page-change', pageNum as number)"
-            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
+            class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
             :class="[
               currentPage === pageNum
-                ? 'bg-indigo-600 text-white'
+                ? 'bg-[#5f8796] text-white shadow-[#9fb8bf]/35'
                 : isDarkMode
-                  ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                  ? 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  : 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
             ]"
           >
             {{ pageNum }}
@@ -67,15 +67,15 @@
       <button
         @click="$emit('page-change', currentPage + 1)"
         :disabled="currentPage >= totalPages"
-        class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200"
+        class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
         :class="[
           isDarkMode
             ? currentPage >= totalPages
-              ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
+              ? 'cursor-not-allowed bg-[#223039] text-[#657a80]'
-              : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+              : 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
             : currentPage >= totalPages
-              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              ? 'cursor-not-allowed bg-[#e8eeee] text-[#9aa9ad]'
-              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+              : 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
         ]"
       >
         下一页

src/components/common/SettingSwitch.vue

@@ -6,8 +6,14 @@
     <div class="flex items-center">
       <button
         type="button"
-        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent shadow-sm transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2"
-        :class="[modelValue === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
+        :class="[
+          modelValue === 1
+            ? 'bg-[#6f9688]'
+            : isDarkMode
+              ? 'bg-[#40545c]'
+              : 'bg-[#cfdadc]'
+        ]"
         role="switch"
         :aria-checked="modelValue === 1"
         @click="$emit('toggle')"

src/components/common/StatCard.vue

@@ -50,28 +50,28 @@ const isDarkMode = useInjectedDarkMode()
 
 const iconBgClass = computed(() => {
   const colorMap = {
-    indigo: isDarkMode.value ? 'bg-indigo-900' : 'bg-indigo-100',
+    indigo: isDarkMode.value ? 'bg-[#294047]' : 'bg-[#dcebed]',
-    purple: isDarkMode.value ? 'bg-purple-900' : 'bg-purple-100',
+    purple: isDarkMode.value ? 'bg-[#443d4b]' : 'bg-[#e7e2ea]',
-    green: isDarkMode.value ? 'bg-green-900' : 'bg-green-100',
+    green: isDarkMode.value ? 'bg-[#31564f]' : 'bg-[#e1eee8]',
-    blue: isDarkMode.value ? 'bg-blue-900' : 'bg-blue-100'
+    blue: isDarkMode.value ? 'bg-[#2d4851]' : 'bg-[#dce8eb]'
   }
   return colorMap[props.iconColor]
 })
 
 const iconClass = computed(() => {
   const colorMap = {
-    indigo: isDarkMode.value ? 'text-indigo-400' : 'text-indigo-600',
+    indigo: isDarkMode.value ? 'text-[#b8d4dc]' : 'text-[#3f6a77]',
-    purple: isDarkMode.value ? 'text-purple-400' : 'text-purple-600',
+    purple: isDarkMode.value ? 'text-[#d4c8dc]' : 'text-[#6f6379]',
-    green: isDarkMode.value ? 'text-green-400' : 'text-green-600',
+    green: isDarkMode.value ? 'text-[#c4dfd5]' : 'text-[#55796e]',
-    blue: isDarkMode.value ? 'text-blue-400' : 'text-blue-600'
+    blue: isDarkMode.value ? 'text-[#bfd9df]' : 'text-[#4b7380]'
   }
   return colorMap[props.iconColor]
 })
 
 const descriptionClass = computed(() => {
   const typeMap = {
-    success: isDarkMode.value ? 'text-green-400' : 'text-green-600',
+    success: isDarkMode.value ? 'text-[#b6d6ca]' : 'text-[#5f8377]',
-    error: isDarkMode.value ? 'text-red-400' : 'text-red-600',
+    error: isDarkMode.value ? 'text-[#e5c5ca]' : 'text-[#8b5962]',
     neutral: isDarkMode.value ? 'text-gray-400' : 'text-gray-600'
   }
   return typeMap[props.descriptionType]

src/components/common/ThemeToggle.vue

@@ -13,8 +13,12 @@ const toggleColorMode = () => {
 <template>
   <button
     @click="toggleColorMode"
-    class="p-2 rounded-full transition-all duration-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transform hover:rotate-180"
+    class="rounded-full p-2 shadow-sm transition-all duration-500 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2 transform hover:rotate-180"
-    :class="isDarkMode ? 'bg-gray-800 text-yellow-300' : 'bg-white text-gray-800'"
+    :class="
+      isDarkMode
+        ? 'bg-[#263941] text-[#d8c98e]'
+        : 'bg-[#edf4f5] text-[#4f6c75]'
+    "
   >
     <SunIcon v-if="!isDarkMode" class="w-6 h-6" />
     <MoonIcon v-else class="w-6 h-6" />

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-[#172126]' : 'bg-[#edf3f4]']"
+    :class="[isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]']"
   >
     <!-- 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-[#344951] bg-[#203039]/90 backdrop-filter backdrop-blur-xl'
+          ? 'border-[#31454d] bg-[#1a2930]/92 backdrop-filter backdrop-blur-xl'
-          : 'border-[#d5e1e3] bg-[#f8fbfb]/92 backdrop-blur-xl',
+          : 'border-[#c8d7da] bg-[#f2f6f5]/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-[#6f9cad] via-[#91b7b3] to-[#b7b0c4] p-1 animate-spin-slow"
+            class="rounded-full bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] p-1 animate-spin-slow"
           >
-            <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#203039]' : 'bg-[#f8fbfb]']">
+            <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-[#1a2930]' : 'bg-[#f2f6f5]']">
               <BoxIcon
                 class="w-6 h-6"
-                :class="[isDarkMode ? 'text-[#9cc5d2]' : 'text-[#5f8fa3]']"
+                :class="[isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']"
               />
             </div>
           </div>
           <h1
             @click="router.push('/')"
             class="ml-2 text-xl font-semibold cursor-pointer"
-            :class="[isDarkMode ? 'text-[#eef5f5]' : 'text-[#263f48]']"
+            :class="[isDarkMode ? 'text-[#edf4f4]' : 'text-[#2d4650]']"
           >
             {{ t('common.appName') }}
           </h1>
@@ -53,11 +53,11 @@
               :class="[
                 route.name === item.id
                   ? isDarkMode
-                    ? 'border-[#9cc5d2] bg-[#2b414a] text-[#d8ebef]'
+                    ? 'border-[#a5c8d0] bg-[#294047] text-[#dceff1]'
-                    : 'border-[#6f9cad] bg-[#e3eef0] text-[#315f73]'
+                    : 'border-[#6f98a6] bg-[#d5e4e6] text-[#315c69]'
                   : isDarkMode
-                    ? 'border-transparent text-[#aabdc2] hover:bg-[#263941]'
+                    ? 'border-transparent text-[#aebfc3] hover:bg-[#22353c]'
-                    : 'border-transparent text-[#5b737b] hover:bg-[#e7f0f1]'
+                    : 'border-transparent text-[#586f75] hover:bg-[#e5eeee]'
               ]"
               @click="closeSidebarForMobile"
             >
@@ -69,14 +69,14 @@
       </nav>
 
       <!-- 退出登录按钮 -->
-      <div class="p-4 border-t" :class="[isDarkMode ? 'border-[#344951]' : 'border-[#d5e1e3]']">
+      <div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
         <button
           @click="handleLogout"
           class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
           :class="[
             isDarkMode
-              ? 'text-[#aabdc2] hover:bg-[#263941] hover:text-[#eef5f5]'
+              ? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
-              : 'text-[#5b737b] hover:bg-[#e7f0f1] hover:text-[#263f48]'
+              : 'text-[#586f75] hover:bg-[#e5eeee] hover:text-[#2d4650]'
           ]"
         >
           <LogOutIcon class="w-5 h-5 mr-3" />
@@ -90,7 +90,7 @@
       <!-- Header -->
       <header
         class="shadow-md border-b transition-colors duration-300 h-16"
-        :class="[isDarkMode ? 'bg-[#203039] border-[#344951]' : 'bg-[#f8fbfb] border-[#d5e1e3]']"
+        :class="[isDarkMode ? 'bg-[#1a2930] border-[#31454d]' : 'bg-[#f2f6f5] border-[#c8d7da]']"
       >
         <div class="flex items-center justify-between h-16 px-4">
           <button @click="toggleSidebar" class="lg:hidden">
@@ -102,7 +102,7 @@
       <!-- Content -->
       <main
         class="min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
-        :class="[isDarkMode ? 'bg-[#172126]' : 'bg-[#edf3f4]']"
+        :class="[isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]']"
       >
         <router-view />
       </main>
@@ -230,11 +230,11 @@ const handleLogout = async () => {
 }
 
 input:checked + .slider {
-  background-color: #4f46e5;
+  background-color: #6f9688;
 }
 
 .dark input:checked + .slider {
-  background-color: #4f46e5;
+  background-color: #6f9688;
 }
 
 .slider:before {

src/views/manage/DashboardView.vue

@@ -100,7 +100,7 @@
           </div>
           <ActivityIcon
             class="h-5 w-5"
-            :class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']"
+            :class="[isDarkMode ? 'text-[#b8d4dc]' : 'text-[#5f8796]']"
           />
         </div>
 
@@ -226,7 +226,7 @@
             :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
           >
             <div
-              class="h-full rounded-full bg-indigo-500"
+              class="h-full rounded-full bg-[#6f98a6]"
               :style="{ width: `${dashboardData.todaySizeRatio}%` }"
             ></div>
           </div>
@@ -319,7 +319,7 @@
           </div>
           <DownloadCloudIcon
             class="h-5 w-5"
-            :class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']"
+            :class="[isDarkMode ? 'text-[#b8d4dc]' : 'text-[#5f8796]']"
           />
         </div>
         <div class="overflow-x-auto">
@@ -615,9 +615,9 @@ const MetricProgress = defineComponent({
   setup(props) {
     const toneClass = computed(() => {
       const classes = {
-        green: 'bg-green-500',
+        green: 'bg-[#6f9688]',
-        indigo: 'bg-indigo-500',
+        indigo: 'bg-[#5f8796]',
-        purple: 'bg-purple-500'
+        purple: 'bg-[#8c8294]'
       }
       return classes[props.tone]
     })

src/views/manage/FileManageView.vue

@@ -495,8 +495,8 @@
                   class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
                   :class="[
                     isDarkMode
-                      ? 'bg-indigo-900/20 text-indigo-300 hover:bg-indigo-900/30'
+                      ? 'bg-[#294047]/70 text-[#b8d4dc] hover:bg-[#34515a]'
-                      : 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
+                      : 'bg-[#dcebed] text-[#3f6a77] hover:bg-[#cfe1e4]'
                   ]"
                   @click="openFileDetail(file)"
                 >
@@ -510,8 +510,8 @@
                   class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
                   :class="[
                     isDarkMode
-                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                      ? 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      : 'bg-[#edf4f5] text-[#506972] hover:bg-[#e2ecee]'
                   ]"
                   @click="openTextPreview(file)"
                 >
@@ -527,8 +527,8 @@
                   class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-sm"
                   :class="[
                     isDarkMode
-                      ? 'bg-emerald-900/20 text-emerald-300 hover:bg-emerald-900/30'
+                      ? 'bg-[#31564f]/70 text-[#c4dfd5] hover:bg-[#3c675e]'
-                      : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
+                      : 'bg-[#e1eee8] text-[#55796e] hover:bg-[#d4e5dd]'
                   ]"
                   @click="downloadFile(file)"
                 >
@@ -544,8 +544,8 @@
                   class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
                   :class="[
                     isDarkMode
-                      ? 'bg-blue-900/20 text-blue-300 hover:bg-blue-900/30'
+                      ? 'bg-[#2d4851]/70 text-[#bfd9df] hover:bg-[#365862]'
-                      : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
+                      : 'bg-[#dce8eb] text-[#4b7380] hover:bg-[#cfdee2]'
                   ]"
                   @click="openEditModal(file)"
                 >
@@ -557,8 +557,8 @@
                   class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
                   :class="[
                     isDarkMode
-                      ? 'bg-red-900/20 text-red-300 hover:bg-red-900/30'
+                      ? 'bg-[#5f383f]/70 text-[#ecd1d6] hover:bg-[#71454d]'
-                      : 'bg-red-50 text-red-600 hover:bg-red-100'
+                      : 'bg-[#f1e2e5] text-[#8b5962] hover:bg-[#e8d3d7]'
                   ]"
                   @click="deleteFile(file.id)"
                 >

src/views/manage/LoginView.vue

@@ -2,7 +2,7 @@
   <div
     :class="[
       'min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-200 relative overflow-hidden',
-      isDarkMode ? 'bg-gray-900' : 'bg-gray-50'
+      isDarkMode ? 'bg-[#10191e]' : 'bg-[#dfe9eb]'
     ]"
   >
     <div class="absolute inset-0 z-0">
@@ -10,24 +10,24 @@
       <div class="floating-particles"></div>
     </div>
     <div
-      class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
+      class="max-w-md w-full space-y-8 backdrop-blur-lg p-8 rounded-[30px] border shadow-xl"
-      :class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']"
+      :class="[isDarkMode ? 'bg-[#1a2930]/82 border-[#31454d]' : 'bg-[#f2f6f5]/82 border-[#c8d7da]']"
     >
       <div>
         <div class="mx-auto h-16 w-16 relative">
           <div
-            class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow"
+            class="absolute inset-0 bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] rounded-full animate-spin-slow"
           ></div>
           <div
-            class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse"
+            class="absolute -inset-2 bg-gradient-to-r from-[#6f98a6] via-[#8eaaa8] to-[#b7b2a1] rounded-full opacity-45 blur-md animate-pulse"
           ></div>
           <div
             :class="[
               'absolute inset-1 rounded-full flex items-center justify-center',
-              isDarkMode ? 'bg-gray-800' : 'bg-white'
+              isDarkMode ? 'bg-[#1a2930]' : 'bg-[#f2f6f5]'
             ]"
           >
-            <BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-cyan-400' : 'text-cyan-600']" />
+            <BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-[#a5c8d0]' : 'text-[#5f8796]']" />
           </div>
         </div>
         <h2
@@ -63,10 +63,10 @@
               required
               v-model="password"
               :class="[
-                'appearance-none rounded-t-md relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm backdrop-blur-sm',
+                'appearance-none rounded-[30px] relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:border-[#8fb2bf] focus:z-10 sm:text-sm backdrop-blur-sm',
                 isDarkMode
-                  ? 'bg-gray-800/50 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
+                  ? 'bg-[#263941]/60 border-[#40545c] text-white placeholder-gray-400 hover:border-[#7199a8]'
-                  : 'bg-white/50 border-gray-300 text-gray-900 hover:border-gray-400'
+                  : 'bg-[#edf4f5]/70 border-[#c8d8dc] text-[#2d4650] hover:border-[#9db6bd]'
               ]"
               placeholder="密码"
             />
@@ -76,10 +76,10 @@
           <button
             type="submit"
             :class="[
-              'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 shadow-lg hover:shadow-cyan-500/50',
+              'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-[30px] text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#8fb2bf] shadow-lg',
               isDarkMode
-                ? 'bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600'
+                ? 'bg-gradient-to-r from-[#5f8796] to-[#6f9688] hover:from-[#527887] hover:to-[#5f8377] hover:shadow-[#6f98a6]/35'
-                : 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-700 hover:to-purple-700',
+                : 'bg-gradient-to-r from-[#5f8796] to-[#6f9688] hover:from-[#527887] hover:to-[#5f8377] hover:shadow-[#9fb8bf]/45',
               isLoading ? 'opacity-75 cursor-not-allowed' : ''
             ]"
             :disabled="isLoading"
@@ -147,7 +147,7 @@ const submitLogin = async () => {
 }
 
 input:focus {
-  box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 0 15px rgba(95, 135, 150, 0.24);
 }
 
 button:active:not(:disabled) {
@@ -156,8 +156,8 @@ button:active:not(:disabled) {
 
 .cyber-grid {
   background-image:
-    linear-gradient(transparent 95%, rgba(99, 102, 241, 0.1) 50%),
+    linear-gradient(transparent 95%, rgba(95, 135, 150, 0.1) 50%),
-    linear-gradient(90deg, transparent 95%, rgba(99, 102, 241, 0.1) 50%);
+    linear-gradient(90deg, transparent 95%, rgba(95, 135, 150, 0.1) 50%);
   background-size: 30px 30px;
   width: 100%;
   height: 100%;
@@ -179,7 +179,7 @@ button:active:not(:disabled) {
   position: absolute;
   width: 100%;
   height: 100%;
-  background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
+  background-image: radial-gradient(circle at center, rgba(95, 135, 150, 0.1) 0%, transparent 50%);
   animation: float 20s infinite linear;
 }
 
@@ -203,7 +203,7 @@ button:active:not(:disabled) {
 }
 
 button:hover:not(:disabled) {
-  box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
+  box-shadow: 0 0 25px rgba(95, 135, 150, 0.38);
 }
 
 .fade-enter-active,