merge(frontend): sync main styles with auth flow

frontend/src/components/AuditLogTable.vue

@@ -189,11 +189,11 @@ tr.tr-hover:hover td {
 .pg-btn.active {
   background: var(--accent-dim);
   border-color: var(--accent-dim);
-  color: #CFFCE9;
+  color: var(--active-text);
 }
 
 .pg-btn:hover {
-  border-color: #3A4356;
+  border-color: var(--hover-border);
   color: var(--text-hi);
 }
 

frontend/src/components/Layout/AppHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="topbar">
     <div class="brand">
-      <div class="mark">xi</div>
+      <img src="/logo-qiniu.png" alt="logo" class="mark-img" />
       xinfra <span class="sub">统一基础设施平台</span>
     </div>
     <span class="env-pill">● 生产环境</span>
@@ -11,6 +11,14 @@
       搜索集群 / 节点 / 服务实例
       <kbd>⌘K</kbd>
     </div>
+    <div class="theme-switch" @click="toggleTheme" :title="theme === 'light' ? '切换到深色模式' : '切换到浅色模式'">
+      <el-icon v-if="theme === 'light'" :size="18">
+        <Moon />
+      </el-icon>
+      <el-icon v-else :size="18">
+        <Sunny />
+      </el-icon>
+    </div>
     <div class="identity">
       <div class="avatar">{{ userInitial }}</div>
       <div>
@@ -25,7 +33,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
+import { useTheme } from '@/composables/useTheme'
 import { useAuth } from '@/composables/useAuth'
+import { Moon, Sunny } from '@element-plus/icons-vue'
 
 const authStore = useAuthStore()
 const { logout } = useAuth()
@@ -34,6 +44,8 @@ const userInitial = computed(() => {
   return user.value?.display_name?.charAt(0) || 'U'
 })
 
+const { theme, toggleTheme } = useTheme()
+
 const handleLogout = () => {
   logout()
 }
@@ -56,27 +68,20 @@ const handleLogout = () => {
   gap: 9px;
   font-weight: 600;
   letter-spacing: 0.3px;
-  font-size: 15px;
+  font-size: 18px;
 }
 
-.brand .mark {
-  width: 22px;
-  height: 22px;
-  border-radius: 5px;
-  background: linear-gradient(135deg, var(--accent), #1C8F69);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 600;
-  color: #08140F;
+.brand .mark-img {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  object-fit: contain;
 }
 
 .brand .sub {
   color: var(--text-dim);
   font-weight: 400;
-  font-size: 12px;
+  font-size: 15px;
   margin-left: 4px;
 }
 
@@ -86,10 +91,10 @@ const handleLogout = () => {
 
 .env-pill {
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: 14px;
   color: var(--accent);
   border: 1px solid var(--accent-dim);
-  background: #0F261D;
+  background: var(--accent-dim);
   padding: 3px 9px;
   border-radius: 20px;
   letter-spacing: 0.4px;
@@ -104,50 +109,52 @@ const handleLogout = () => {
   border-radius: 6px;
   padding: 6px 10px;
   color: var(--text-dim);
-  font-size: 12.5px;
-  width: 240px;
+  font-size: 15px;
+  width: 280px;
 }
 
 .search-box kbd {
   margin-left: auto;
   font-family: var(--mono);
-  font-size: 10px;
-  background: #262C38;
+  font-size: 12px;
+  background: var(--bg-panel);
   padding: 1px 5px;
   border-radius: 3px;
   color: var(--text-dim);
+  border: 1px solid var(--line);
 }
 
 .identity {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 12.5px;
+  font-size: 15px;
   color: var(--text-mid);
 }
 
 .identity .avatar {
-  width: 26px;
-  height: 26px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
-  background: #2A3142;
+  background: var(--bg-panel-2);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: 14px;
   color: var(--text-hi);
+  border: 1px solid var(--line);
 }
 
 .identity .ldap-tag {
   font-family: var(--mono);
-  font-size: 10px;
+  font-size: 12px;
   color: var(--text-dim);
 }
 
 .logout-button {
   color: var(--text-dim);
-  font-size: 12px;
+  font-size: 14px;
   padding: 4px 6px;
 }
 
@@ -155,4 +162,36 @@ const handleLogout = () => {
   color: var(--text-hi);
   background: var(--bg-panel-2);
 }
+
+.theme-switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-mid);
+  background: var(--bg-panel-2);
+  border: 1px solid var(--line);
+}
+
+.theme-switch:hover {
+  background: var(--bg-panel);
+  color: var(--text-hi);
+  border-color: var(--accent);
+}
+
+.theme-switch:active {
+  transform: scale(0.95);
+}
+
+.theme-switch .el-icon {
+  transition: transform 0.3s ease;
+}
+
+.theme-switch:hover .el-icon {
+  transform: rotate(15deg);
+}
 </style>

frontend/src/components/Layout/AppSidebar.vue

@@ -84,7 +84,7 @@
 }
 
 .nav-label {
-  font-size: 10.5px;
+  font-size: 13px;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 1px;
@@ -97,10 +97,10 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 10px;
+  padding: 10px 10px;
   border-radius: 6px;
   color: var(--text-mid);
-  font-size: 13px;
+  font-size: 16px;
   font-weight: 500;
   cursor: pointer;
   margin-bottom: 2px;
@@ -111,7 +111,7 @@
 .nav-item .ic {
   width: 16px;
   text-align: center;
-  font-size: 13px;
+  font-size: 16px;
   opacity: 0.85;
 }
 
@@ -121,31 +121,33 @@
 }
 
 .nav-item.active {
-  background: #13261F;
+  background: var(--accent-dim);
   color: var(--accent);
-  border-color: var(--accent-dim);
+  border-color: var(--accent);
 }
 
 .nav-item .badge {
   margin-left: auto;
   font-family: var(--mono);
-  font-size: 10px;
-  background: #262C38;
+  font-size: 12px;
+  background: var(--bg-panel-2);
   color: var(--text-dim);
   padding: 1px 6px;
   border-radius: 10px;
+  border: 1px solid var(--line);
 }
 
 .nav-item.active .badge {
-  background: var(--accent-dim);
-  color: #CFFCE9;
+  background: var(--accent);
+  color: #FFFFFF;
+  border-color: var(--accent);
 }
 
 .sidebar-foot {
   margin-top: auto;
   padding: 10px;
   border-top: 1px solid var(--line-soft);
-  font-size: 11px;
+  font-size: 14px;
   color: var(--text-dim);
   line-height: 1.6;
 }

frontend/src/components/SubsystemCard.vue

@@ -27,26 +27,26 @@ const props = defineProps<{
 
 const bgColor = computed(() => {
   const colors: Record<string, string> = {
-    W: '#1C2A3A',
-    DM: '#1C3A2E',
-    CC: '#3A1C28',
-    AP: '#1C2A3A',
-    QP: '#241B0A',
-    GF: '#1B202B',
+    W: 'var(--logo-w-bg)',
+    DM: 'var(--logo-dm-bg)',
+    CC: 'var(--logo-cc-bg)',
+    AP: 'var(--logo-ap-bg)',
+    QP: 'var(--logo-qp-bg)',
+    GF: 'var(--logo-gf-bg)',
   }
-  return colors[props.system.icon] || '#262C38'
+  return colors[props.system.icon] || 'var(--bg-panel-2)'
 })
 
 const iconColor = computed(() => {
   const colors: Record<string, string> = {
-    W: '#7FB8FF',
-    DM: '#7FFFC2',
-    CC: '#FF8E9C',
-    AP: '#8EC8FF',
-    QP: '#FFC97A',
-    GF: '#F2B544',
+    W: 'var(--tag-blue-text)',
+    DM: 'var(--tag-green-text)',
+    CC: 'var(--err)',
+    AP: 'var(--tag-blue-text)',
+    QP: 'var(--tag-amber-text)',
+    GF: 'var(--warn)',
   }
-  return colors[props.system.icon] || '#9AA3B5'
+  return colors[props.system.icon] || 'var(--text-mid)'
 })
 
 const description = computed(() => {
@@ -85,7 +85,7 @@ const handleClick = async () => {
 }
 
 .ext-card:hover {
-  border-color: #3A4356;
+  border-color: var(--hover-border);
 }
 
 .ext-top {