change ui color

src/App.vue

@@ -516,74 +516,88 @@ body {
   height: 100%; 
 }
 
-/* --- 侧边栏优化 --- */
+/* --- 侧边栏优化 (清爽浅蓝重构) --- */
 .sidebar { 
-  width: 250px; 
-  background-color: var(--sidebar-bg); 
-  border-right: 1px solid var(--border-color); 
+  width: 240px; 
+  background-color: #F8FAFD;
+  border-right: 1px solid #E9EFF6;
   display: flex; 
   flex-direction: column; 
-  padding: 32px 0; 
+  padding: 40px 0 32px; 
   z-index: 10;
 }
 
 .sidebar-header { padding: 0 28px 36px; }
 .brand { font-size: 20px; font-weight: 700; color: var(--text-main); letter-spacing: -0.3px; }
 
+
 .sidebar-nav { flex: 1; }
 
 .nav-item, .nav-item-header { 
-  padding: 10px 24px; 
-  margin: 2px 12px;
+  padding: 12px 20px; 
+  margin: 4px 12px;
   display: flex; 
   align-items: center; 
   cursor: pointer; 
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
-  color: #424245; 
+  color: #4A5568; 
   font-size: 14px; 
   font-weight: 500; 
-  border-radius: 8px;
+  border-radius: 12px;
 }
 
 .nav-item:hover, .nav-item-header:hover { 
-  background-color: #F5F5F7; 
+  background-color: #EDF2F7; 
+  color: #2D3748;
 }
 
 .nav-item.active { 
-  background-color: #F0F7FF; 
-  color: var(--primary-color); 
+  background-color: #EBF4FF; 
+  color: #04448a; 
   font-weight: 600; 
 }
 
-.icon { margin-right: 10px; font-size: 16px; width: 20px; text-align: center; }
+.icon { margin-right: 12px; font-size: 18px; width: 24px; text-align: center; }
 
 .arrow { 
   margin-left: auto; 
   transition: transform 0.3s; 
   font-size: 10px; 
-  color: #C1C1C1; 
+  color: #A0AEC0; 
 }
-.arrow.open { transform: rotate(180deg); }
+.arrow.open { transform: rotate(180deg); color: #4A5568; }
 
 .nav-sub-items { margin-bottom: 8px; }
 .nav-sub-item { 
-  padding: 8px 24px 8px 54px; 
-  margin: 1px 12px;
+  padding: 10px 20px 10px 52px; 
+  margin: 2px 12px;
   cursor: pointer; 
   font-size: 13px; 
-  color: #6E6E73; 
+  color: #718096; 
   transition: all 0.2s; 
-  border-radius: 6px;
-}
-.nav-sub-item:hover { background-color: #F5F5F7; color: var(--text-main); }
-.nav-sub-item.active { 
-  color: var(--primary-color); 
-  font-weight: 600; 
-  background-color: #F0F7FF; 
+  border-radius: 10px;
 }
 
-.sidebar-footer { padding: 16px 28px; border-top: 1px solid var(--border-color); }
-.version { font-size: 11px; color: var(--text-sec); font-weight: 500; }
+.nav-sub-item:hover { 
+  background-color: #EDF2F7; 
+  color: #2D3748; 
+}
+.nav-sub-item.active { 
+  color: #007AFF; 
+  font-weight: 600; 
+  background-color: #EBF4FF; 
+}
+
+.sidebar-footer { 
+  padding: 20px 24px; 
+  border-top: 1px solid #E9EFF6; 
+}
+.version { 
+  font-size: 11px; 
+  color: #A0AEC0; 
+  font-weight: 600; 
+  letter-spacing: 0.5px;
+}
 
 /* --- 内容区 --- */
 .content {