diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index abcf701..7208056 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
-import { useThemeStore, useTabStore, useNotificationStore, useUserStore } from '@/store';
+import { useThemeStore, useNotificationStore, useUserStore } from '@/store';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -17,7 +17,6 @@ import {
   Search,
   Bell,
   Menu,
-  X,
   Settings,
   User,
   LogOut,
@@ -33,7 +32,6 @@ import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
 
 export function Header() {
   const { sidebarCollapsed, toggleSidebar } = useThemeStore();
-  const { tabs, activeTab, removeTab, setActiveTab } = useTabStore();
   const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
   const { user, logout } = useUserStore();
   const { theme, setTheme } = useTheme();
@@ -226,36 +224,7 @@ export function Header() {
         </div>
       </div>
 
-      {/* Tabs */}
-      {tabs.length > 0 && (
-        <div className="flex items-center h-9 px-2 bg-slate-950 border-b border-slate-800 overflow-x-auto">
-          {tabs.map((tab) => (
-            <div
-              key={tab.id}
-              className={cn(
-                'group flex items-center gap-2 px-3 py-1.5 text-sm border-r border-slate-800 cursor-pointer transition-colors whitespace-nowrap',
-                activeTab === tab.id
-                  ? 'bg-slate-900 text-slate-100'
-                  : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900/50'
-              )}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              <span>{tab.title}</span>
-              {tab.closable && (
-                <button
-                  className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-slate-700 transition-all"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeTab(tab.id);
-                  }}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
+      {/* Tabs 已移除 — 侧边栏导航已足够，tab 栏多余且遮挡内容 */}
     </header>
   );
 }
diff --git a/frontend/src/components/monitor/alert-center/AlertCenter.tsx b/frontend/src/components/monitor/alert-center/AlertCenter.tsx
index 31ce844..a2f53a0 100644
--- a/frontend/src/components/monitor/alert-center/AlertCenter.tsx
+++ b/frontend/src/components/monitor/alert-center/AlertCenter.tsx
@@ -46,18 +46,23 @@ export interface Alert {
   annotations: Record<string, string>;
 }
 
+// Logan.Li — 字段名与后端 alert.go AlertRule 对齐
 interface AlertRule {
-  id: string;
+  id: number;
   name: string;
   description: string;
   enabled: boolean;
-  severity: 'critical' | 'warning' | 'info';
-  query: string;
-  duration: string;
-  threshold: number;
-  labels: string[];
-  notificationChannels: string[];
-  lastEvaluated: string;
+  severity: string;
+  type?: string;
+  source?: string;
+  expression?: string;
+  duration?: number;
+  threshold?: number;
+  labels?: string;
+  annotations?: string;
+  notify_channels?: string;
+  created_at?: string;
+  updated_at?: string;
 }
 
 interface NotificationChannel {
@@ -103,7 +108,24 @@ const AlertCenter: React.FC = () => {
     setLoading(true);
     try {
       const res = await alertCenterApi.getAlerts();
-      const data = res.list || [];
+      const raw = (res.list || []) as any[];
+      // Logan.Li — 后端字段映射到前端 Alert 接口
+      const data: Alert[] = raw.map(a => ({
+        id: String(a.id),
+        title: a.rule_name || a.title || `告警 #${a.id}`,
+        description: a.message || a.description || '',
+        severity: a.severity || 'info',
+        status: a.status || 'firing',
+        source: a.target || a.source || '',
+        service: a.service || '',
+        metric: a.metric || '',
+        value: a.value || 0,
+        threshold: a.threshold || 0,
+        startedAt: a.started_at || a.startedAt || a.created_at || new Date().toISOString(),
+        resolvedAt: a.resolved_at || a.resolvedAt,
+        labels: typeof a.labels === 'string' ? (() => { try { return JSON.parse(a.labels || '{}'); } catch { return {}; } })() : (a.labels || {}),
+        annotations: typeof a.annotations === 'string' ? (() => { try { return JSON.parse(a.annotations || '{}'); } catch { return {}; } })() : (a.annotations || {}),
+      }));
       setAlerts(data);
       setStats({
         firing: data.filter((a: Alert) => a.status === 'firing').length,
@@ -171,7 +193,7 @@ const AlertCenter: React.FC = () => {
   const toggleRule = async (ruleId: string, enabled: boolean) => {
     try {
       await alertCenterApi.toggleRule(ruleId);
-      setRules(rules.map(r => r.id === ruleId ? { ...r, enabled } : r));
+      setRules(rules.map(r => String(r.id) === ruleId ? { ...r, enabled } : r));
       toast.success('规则状态已更新');
     } catch (error) {
       toast.error('更新失败');
@@ -531,20 +553,31 @@ const AlertCenter: React.FC = () => {
                       </div>
                       <p className="text-sm text-muted-foreground mb-2">{rule.description}</p>
                       <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                        <span className="font-mono bg-muted px-2 py-1 rounded">{rule.query}</span>
-                        <span>持续 {rule.duration}</span>
-                        <span>阈值: {rule.threshold}</span>
-                      </div>
-                      <div className="flex gap-1 mt-2">
-                        {rule.notificationChannels.map(ch => (
-                          <Badge key={ch} variant="outline" className="text-xs">{ch}</Badge>
-                        ))}
+                        {rule.expression && (
+                          <span className="font-mono bg-muted px-2 py-1 rounded">{rule.expression}</span>
+                        )}
+                        {rule.duration ? <span>持续 {rule.duration}秒</span> : null}
                       </div>
+                      {(() => {
+                        let channels: string[] = [];
+                        try {
+                          const raw = rule.notify_channels;
+                          if (raw) channels = Array.isArray(raw) ? raw : JSON.parse(raw);
+                        } catch { /* ignore */ }
+                        if (!channels.length) return null;
+                        return (
+                          <div className="flex gap-1 mt-2">
+                            {channels.map(ch => (
+                              <Badge key={ch} variant="outline" className="text-xs">{ch}</Badge>
+                            ))}
+                          </div>
+                        );
+                      })()}
                     </div>
                     <div className="flex items-center gap-2">
                       <Switch
                         checked={rule.enabled}
-                        onCheckedChange={(checked) => toggleRule(rule.id, checked)}
+                        onCheckedChange={(checked) => toggleRule(String(rule.id), checked)}
                       />
                       <Button variant="ghost" size="sm">
                         <Settings className="w-4 h-4" />
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index f0d3a3f..2c30c7d 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -524,13 +524,39 @@ export const auditApi = {
 
 // ==================== SQL 审计 API（暂无后端，返回空结果优雅降级） ====================
 export const sqlAuditApi = {
-  getRecords: async () => ({ data: [], total: 0 }),
-  getRules: async () => ({ data: [], total: 0 }),
-  analyzeSQL: async (_data: { sql: string }) => ({ data: { id: 0, riskLevel: 'low', rules: [] } }),
-  approve: async (_id: string) => ({ success: true }),
-  reject: async (_id: string) => ({ success: true }),
-  execute: async (_id: string) => ({ success: true }),
-  toggleRule: async (_ruleId: string, _enabled: boolean) => ({ success: true }),
+  getRecords: async (params?: Record<string, string>) => {
+    return http.get<ListResponse>('/sql-audit/records', params);
+  },
+  getRules: async () => {
+    return http.get<ListResponse>('/sql-audit/rules');
+  },
+  analyzeSQL: async (data: { sql: string; database_name?: string; application?: string }) => {
+    return http.post('/sql-audit/analyze', data);
+  },
+  approve: async (id: string | number) => {
+    return http.post(`/sql-audit/records/${id}/approve`);
+  },
+  reject: async (id: string | number) => {
+    return http.post(`/sql-audit/records/${id}/reject`);
+  },
+  execute: async (id: string | number) => {
+    return http.post(`/sql-audit/records/${id}/execute`);
+  },
+  deleteRecord: async (id: string | number) => {
+    return http.delete(`/sql-audit/records/${id}`);
+  },
+  createRule: async (data: any) => {
+    return http.post('/sql-audit/rules', data);
+  },
+  updateRule: async (id: string | number, data: any) => {
+    return http.put(`/sql-audit/rules/${id}`, data);
+  },
+  deleteRule: async (id: string | number) => {
+    return http.delete(`/sql-audit/rules/${id}`);
+  },
+  toggleRule: async (ruleId: string | number) => {
+    return http.post(`/sql-audit/rules/${ruleId}/toggle`);
+  },
 };
 
 // ==================== Ansible 自动化 API ====================