feat: 修复仪表盘数据管线 — 补充应用发布种子数据 + 修复limit参数解析 + LDAP认证集成 + User类型完善

后端改进:
- 修复 dashboard/recent-alerts 的 limit 参数解析 (原代码错误地将数字解析为日期)
- 为 dashboard/recent-releases 添加 limit 参数解析支持
- 新增 generateAppReleases 种子数据生成函数 (10条应用发布记录)
- 修复 AlertEvent 的 rule_name/rule_id/severity 数据一致性
- 添加 go-ldap/ldap/v3 依赖并集成 LDAP 认证处理器
- 添加 seed.go 自动种子数据初始化 (admin用户+LDAP配置)
- User model 添加 AuthSource/LDAPConfig 字段

前端改进:
- 修复 User 类型定义以匹配后端 API (real_name/is_admin/auth_source等)
- 修复 Header.tsx 的 real_name 属性引用导致 TypeScript 编译错误
- 统一 API 服务层、暗色主题样式、组件联调优化

验证:
- go build ./... 编译通过
- npm run build 构建通过
- 仪表盘发布历史、告警消息等区域数据正常展示
- 健康检查 /health 正常

frontend/src/components/deploy/AppRelease.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { cn } from '@/lib/utils';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -52,25 +52,42 @@ import {
   ArrowRight,
   Terminal,
 } from 'lucide-react';
-import { appReleases } from '@/mocks/data';
-import type { AppRelease } from '@/types';
+import { releaseApi } from '@/services/api';
 
 export function AppReleaseManager() {
   const [searchQuery, setSearchQuery] = useState('');
   const [envFilter, setEnvFilter] = useState<string>('all');
   const [statusFilter, setStatusFilter] = useState<string>('all');
-  const [selectedRelease, setSelectedRelease] = useState<AppRelease | null>(null);
+  const [releases, setReleases] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedRelease, setSelectedRelease] = useState<any | null>(null);
 
-  const filteredReleases = appReleases.filter((release) => {
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const data = await releaseApi.getReleases();
+      setReleases(data.list || []);
+    } catch (error) {
+      console.error('Failed to load releases:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredReleases = releases.filter((release) => {
     const matchesSearch =
-      release.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      release.version.includes(searchQuery);
+      (release.app_name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (release.version || '').includes(searchQuery);
     const matchesEnv = envFilter === 'all' || release.environment === envFilter;
     const matchesStatus = statusFilter === 'all' || release.status === statusFilter;
     return matchesSearch && matchesEnv && matchesStatus;
   });
 
-  const getStatusBadge = (status: AppRelease['status']) => {
+  const getStatusBadge = (status: any) => {
     switch (status) {
       case 'success':
         return (
@@ -119,26 +136,35 @@ export function AppReleaseManager() {
     }
   };
 
-  const getEnvBadge = (env: AppRelease['environment']) => {
-    const colors = {
+  const getEnvBadge = (env: any) => {
+    const colors: Record<string, string> = {
       dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
       test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
       staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
       prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
     };
-    const labels = {
+    const labels: Record<string, string> = {
       dev: '开发环境',
       test: '测试环境',
       staging: '预发布',
       prod: '生产环境',
     };
     return (
-      <Badge variant="outline" className={colors[env]}>
-        {labels[env]}
+      <Badge variant="outline" className={colors[env] || colors.dev}>
+        {labels[env] || env}
       </Badge>
     );
   };
 
+  const handleRollback = async (id: any) => {
+    try {
+      await releaseApi.rollbackRelease(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to rollback release:', error);
+    }
+  };
+
   // 模拟流水线步骤
   const pipelineSteps = [
     { name: '代码检出', status: 'success', duration: '15s' },
@@ -178,7 +204,7 @@ export function AppReleaseManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-slate-500">今日发布</p>
-                <p className="text-2xl font-bold text-slate-100">12</p>
+                <p className="text-2xl font-bold text-slate-100">{releases.length}</p>
               </div>
               <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                 <Rocket className="h-5 w-5" />
@@ -191,7 +217,9 @@ export function AppReleaseManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-slate-500">发布成功</p>
-                <p className="text-2xl font-bold text-emerald-400">10</p>
+                <p className="text-2xl font-bold text-emerald-400">
+                  {releases.filter((r) => r.status === 'success').length}
+                </p>
               </div>
               <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
                 <CheckCircle className="h-5 w-5" />
@@ -204,7 +232,9 @@ export function AppReleaseManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-slate-500">发布失败</p>
-                <p className="text-2xl font-bold text-red-400">1</p>
+                <p className="text-2xl font-bold text-red-400">
+                  {releases.filter((r) => r.status === 'failed').length}
+                </p>
               </div>
               <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
                 <XCircle className="h-5 w-5" />
@@ -217,7 +247,11 @@ export function AppReleaseManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-sm text-slate-500">成功率</p>
-                <p className="text-2xl font-bold text-blue-400">83.3%</p>
+                <p className="text-2xl font-bold text-blue-400">
+                  {releases.length > 0
+                    ? `${Math.round((releases.filter((r) => r.status === 'success').length / releases.length) * 100)}%`
+                    : '0%'}
+                </p>
               </div>
               <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                 <History className="h-5 w-5" />
@@ -278,17 +312,23 @@ export function AppReleaseManager() {
                   <TableHead className="text-slate-400">代码</TableHead>
                   <TableHead className="text-slate-400">发布人</TableHead>
                   <TableHead className="text-slate-400">开始时间</TableHead>
-                  <TableHead className="text-slate-400">耗时</TableHead>
                   <TableHead className="text-slate-400 text-right">操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {filteredReleases.map((release) => (
+                {loading ? (
+                  <TableRow className="border-slate-800">
+                    <TableCell colSpan={8} className="text-center text-slate-500 py-8">
+                      <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
+                      加载中...
+                    </TableCell>
+                  </TableRow>
+                ) : filteredReleases.map((release) => (
                   <TableRow key={release.id} className="border-slate-800 hover:bg-slate-800/50">
                     <TableCell>
                       <div className="flex items-center gap-2">
                         <Rocket className="h-4 w-4 text-slate-500" />
-                        <span className="text-sm font-medium text-slate-200">{release.appName}</span>
+                        <span className="text-sm font-medium text-slate-200">{release.app_name}</span>
                       </div>
                     </TableCell>
                     <TableCell>
@@ -304,7 +344,7 @@ export function AppReleaseManager() {
                         <span>{release.branch}</span>
                         <span className="mx-1">·</span>
                         <GitCommit className="h-3 w-3" />
-                        <span>{release.commitId}</span>
+                        <span>{release.commit_id}</span>
                       </div>
                     </TableCell>
                     <TableCell>
@@ -312,12 +352,7 @@ export function AppReleaseManager() {
                     </TableCell>
                     <TableCell>
                       <span className="text-sm text-slate-400">
-                        {new Date(release.startedAt).toLocaleString()}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-400">
-                        {release.duration ? `${Math.floor(release.duration / 60)}m ${release.duration % 60}s` : '--'}
+                        {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}
                       </span>
                     </TableCell>
                     <TableCell className="text-right">
@@ -338,7 +373,12 @@ export function AppReleaseManager() {
                           </Button>
                         )}
                         {release.status === 'success' && (
-                          <Button variant="ghost" size="sm" className="h-8 text-slate-400 hover:text-amber-400">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 text-slate-400 hover:text-amber-400"
+                            onClick={() => handleRollback(release.id)}
+                          >
                             <RotateCcw className="h-4 w-4 mr-1" />
                             回滚
                           </Button>
@@ -359,13 +399,13 @@ export function AppReleaseManager() {
           <DialogHeader>
             <DialogTitle className="text-slate-100 flex items-center gap-2">
               <Rocket className="h-5 w-5 text-blue-400" />
-              {selectedRelease?.appName}
+              {selectedRelease?.app_name}
               <Badge variant="outline" className="border-slate-700 text-slate-400">
                 {selectedRelease?.version}
               </Badge>
             </DialogTitle>
             <DialogDescription className="text-slate-500">
-              流水线: {selectedRelease?.pipeline}
+              环境: {selectedRelease?.environment}
             </DialogDescription>
           </DialogHeader>
 
@@ -412,7 +452,7 @@ export function AppReleaseManager() {
               <h4 className="text-sm font-medium text-slate-300">构建日志</h4>
               <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
                 <div className="space-y-1">
-                  <p>[10:00:00] Starting pipeline for {selectedRelease?.appName}...</p>
+                  <p>[10:00:00] Starting pipeline for {selectedRelease?.app_name}...</p>
                   <p>[10:00:15] Checkout code from branch {selectedRelease?.branch}</p>
                   <p>[10:00:30] Installing dependencies...</p>
                   <p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>

frontend/src/components/deploy/PipelineManager.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -56,7 +56,7 @@ import {
   FileCode,
   Workflow,
 } from 'lucide-react';
-import { pipelines, pipelineExecutions, releases } from '@/mocks/data';
+import { pipelineApi } from '@/services/api';
 
 interface PipelineStage {
   id: string;
@@ -66,74 +66,6 @@ interface PipelineStage {
   logs: string[];
 }
 
-interface Pipeline {
-  id: string;
-  name: string;
-  description: string;
-  repository: string;
-  branch: string;
-  stages: PipelineStage[];
-  lastRun: string;
-  lastStatus: 'success' | 'failed' | 'running' | 'never';
-  triggerType: 'manual' | 'auto';
-  createdAt: string;
-}
-
-const mockPipelines: Pipeline[] = [
-  {
-    id: 'pipe-001',
-    name: 'frontend-build-and-deploy',
-    description: '前端项目构建与部署',
-    repository: 'https://gitlab.company.com/frontend/app.git',
-    branch: 'main',
-    stages: [
-      { id: 'stage-1', name: '代码检出', status: 'success', duration: '15s', logs: ['检出代码...', '代码检出完成'] },
-      { id: 'stage-2', name: '依赖安装', status: 'success', duration: '45s', logs: ['安装依赖...', '依赖安装完成'] },
-      { id: 'stage-3', name: '代码检查', status: 'success', duration: '30s', logs: ['执行 ESLint...', '代码检查通过'] },
-      { id: 'stage-4', name: '构建打包', status: 'success', duration: '2m 15s', logs: ['开始构建...', '构建完成'] },
-      { id: 'stage-5', name: '部署到测试环境', status: 'success', duration: '30s', logs: ['部署中...', '部署完成'] },
-    ],
-    lastRun: '2025-04-14 10:30:00',
-    lastStatus: 'success',
-    triggerType: 'auto',
-    createdAt: '2025-01-15',
-  },
-  {
-    id: 'pipe-002',
-    name: 'backend-api-deploy',
-    description: '后端API服务部署',
-    repository: 'https://gitlab.company.com/backend/api.git',
-    branch: 'develop',
-    stages: [
-      { id: 'stage-1', name: '代码检出', status: 'success', duration: '12s', logs: [] },
-      { id: 'stage-2', name: '单元测试', status: 'success', duration: '1m 30s', logs: [] },
-      { id: 'stage-3', name: '构建镜像', status: 'running', duration: '45s', logs: ['构建Docker镜像...'] },
-      { id: 'stage-4', name: '推送镜像', status: 'pending', duration: '-', logs: [] },
-      { id: 'stage-5', name: '部署到K8s', status: 'pending', duration: '-', logs: [] },
-    ],
-    lastRun: '2025-04-14 11:15:00',
-    lastStatus: 'running',
-    triggerType: 'manual',
-    createdAt: '2025-02-01',
-  },
-  {
-    id: 'pipe-003',
-    name: 'database-migration',
-    description: '数据库迁移脚本执行',
-    repository: 'https://gitlab.company.com/database/migrations.git',
-    branch: 'main',
-    stages: [
-      { id: 'stage-1', name: '代码检出', status: 'success', duration: '10s', logs: [] },
-      { id: 'stage-2', name: '数据库备份', status: 'success', duration: '2m 00s', logs: [] },
-      { id: 'stage-3', name: '执行迁移', status: 'failed', duration: '15s', logs: ['迁移失败: 表已存在'] },
-    ],
-    lastRun: '2025-04-14 09:00:00',
-    lastStatus: 'failed',
-    triggerType: 'manual',
-    createdAt: '2025-01-20',
-  },
-];
-
 const pipelineTemplates = [
   { id: 'template-1', name: 'Node.js 项目', description: '适用于 Node.js 前端项目', stages: ['代码检出', '依赖安装', '代码检查', '构建打包', '部署'] },
   { id: 'template-2', name: 'Go 项目', description: '适用于 Go 后端项目', stages: ['代码检出', '单元测试', '构建', '构建镜像', '部署'] },
@@ -141,9 +73,24 @@ const pipelineTemplates = [
   { id: 'template-4', name: 'Python 项目', description: '适用于 Python 项目', stages: ['代码检出', '依赖安装', '代码检查', '测试', '部署'] },
 ];
 
+function parseStages(stages: any): PipelineStage[] {
+  if (Array.isArray(stages)) return stages;
+  if (typeof stages === 'string') {
+    try {
+      const parsed = JSON.parse(stages);
+      if (Array.isArray(parsed)) return parsed;
+    } catch {
+      return stages.split(',').map((s, i) => ({ id: `stage-${i + 1}`, name: s.trim(), status: 'success' as const, duration: '-', logs: [] }));
+    }
+  }
+  return [];
+}
+
 export function PipelineManager() {
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | null>(null);
+  const [pipelines, setPipelines] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedPipeline, setSelectedPipeline] = useState<any | null>(null);
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
   const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
@@ -156,13 +103,29 @@ export function PipelineManager() {
     template: '',
   });
 
-  const filteredPipelines = mockPipelines.filter(
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const data = await pipelineApi.getPipelines();
+      setPipelines(data.list || []);
+    } catch (error) {
+      console.error('Failed to load pipelines:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredPipelines = pipelines.filter(
     (p) =>
-      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      p.description.toLowerCase().includes(searchQuery.toLowerCase())
+      (p.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (p.description || '').toLowerCase().includes(searchQuery.toLowerCase())
   );
 
-  const getStatusBadge = (status: Pipeline['lastStatus']) => {
+  const getStatusBadge = (status: any) => {
     switch (status) {
       case 'success':
         return (
@@ -209,14 +172,40 @@ export function PipelineManager() {
     }
   };
 
-  const handleCreatePipeline = () => {
-    // Mock create
-    setIsCreateDialogOpen(false);
-    setNewPipeline({ name: '', description: '', repository: '', branch: 'main', template: '' });
+  const handleCreatePipeline = async () => {
+    try {
+      await pipelineApi.createPipeline({
+        name: newPipeline.name,
+        description: newPipeline.description,
+        repository: newPipeline.repository,
+        branch: newPipeline.branch,
+      });
+      setIsCreateDialogOpen(false);
+      setNewPipeline({ name: '', description: '', repository: '', branch: 'main', template: '' });
+      loadData();
+    } catch (error) {
+      console.error('Failed to create pipeline:', error);
+    }
   };
 
-  const handleRunPipeline = () => {
-    setIsRunDialogOpen(false);
+  const handleDeletePipeline = async (id: any) => {
+    try {
+      await pipelineApi.deletePipeline(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to delete pipeline:', error);
+    }
+  };
+
+  const handleRunPipeline = async () => {
+    if (!selectedPipeline) return;
+    try {
+      await pipelineApi.triggerPipeline(selectedPipeline.id);
+      setIsRunDialogOpen(false);
+      loadData();
+    } catch (error) {
+      console.error('Failed to trigger pipeline:', error);
+    }
   };
 
   return (
@@ -246,7 +235,7 @@ export function PipelineManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-slate-400 text-sm">流水线总数</p>
-                <p className="text-2xl font-bold text-slate-100">{mockPipelines.length}</p>
+                <p className="text-2xl font-bold text-slate-100">{pipelines.length}</p>
               </div>
               <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                 <Workflow className="h-5 w-5 text-blue-400" />
@@ -260,7 +249,7 @@ export function PipelineManager() {
               <div>
                 <p className="text-slate-400 text-sm">运行中</p>
                 <p className="text-2xl font-bold text-blue-400">
-                  {mockPipelines.filter((p) => p.lastStatus === 'running').length}
+                  {pipelines.filter((p) => p.status === 'running').length}
                 </p>
               </div>
               <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
@@ -274,7 +263,9 @@ export function PipelineManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-slate-400 text-sm">今日成功</p>
-                <p className="text-2xl font-bold text-emerald-400">12</p>
+                <p className="text-2xl font-bold text-emerald-400">
+                  {pipelines.filter((p) => p.status === 'success').length}
+                </p>
               </div>
               <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
                 <CheckCircle className="h-5 w-5 text-emerald-400" />
@@ -287,7 +278,9 @@ export function PipelineManager() {
             <div className="flex items-center justify-between">
               <div>
                 <p className="text-slate-400 text-sm">今日失败</p>
-                <p className="text-2xl font-bold text-red-400">2</p>
+                <p className="text-2xl font-bold text-red-400">
+                  {pipelines.filter((p) => p.status === 'failed').length}
+                </p>
               </div>
               <div className="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
                 <XCircle className="h-5 w-5 text-red-400" />
@@ -310,6 +303,14 @@ export function PipelineManager() {
         </div>
       </div>
 
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+        </div>
+      ) : filteredPipelines.length === 0 ? (
+        <div className="text-center text-slate-500 py-12">暂无流水线数据</div>
+      ) : null}
+
       {/* Pipeline List */}
       <div className="space-y-4">
         {filteredPipelines.map((pipeline) => (
@@ -319,9 +320,9 @@ export function PipelineManager() {
                 <div className="flex-1">
                   <div className="flex items-center gap-3">
                     <h3 className="font-medium text-slate-100">{pipeline.name}</h3>
-                    {getStatusBadge(pipeline.lastStatus)}
+                    {getStatusBadge(pipeline.status)}
                     <Badge variant="outline" className="border-slate-700 text-slate-400">
-                      {pipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
+                      {pipeline.trigger_type === 'auto' ? '自动触发' : '手动触发'}
                     </Badge>
                   </div>
                   <p className="text-sm text-slate-400 mt-1">{pipeline.description}</p>
@@ -332,15 +333,15 @@ export function PipelineManager() {
                     </span>
                     <span className="flex items-center gap-1">
                       <Clock className="h-3 w-3" />
-                      上次运行: {pipeline.lastRun}
+                      上次运行: {pipeline.updated_at || '--'}
                     </span>
                   </div>
 
                   {/* Pipeline Stages */}
                   <div className="mt-4">
                     <div className="flex items-center gap-2">
-                      {pipeline.stages.map((stage, index) => (
-                        <div key={stage.id} className="flex items-center">
+                      {parseStages(pipeline.stages).map((stage: PipelineStage, index: number) => (
+                        <div key={stage.id || index} className="flex items-center">
                           <div
                             className={`flex items-center gap-1 px-2 py-1 rounded text-xs ${
                               stage.status === 'success'
@@ -355,7 +356,7 @@ export function PipelineManager() {
                             {getStageStatusIcon(stage.status)}
                             <span className="ml-1">{stage.name}</span>
                           </div>
-                          {index < pipeline.stages.length - 1 && (
+                          {index < parseStages(pipeline.stages).length - 1 && (
                             <ChevronRight className="h-4 w-4 text-slate-600 mx-1" />
                           )}
                         </div>
@@ -391,7 +392,7 @@ export function PipelineManager() {
                   <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
                     <Edit className="h-4 w-4" />
                   </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400">
+                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400" onClick={() => handleDeletePipeline(pipeline.id)}>
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </div>
@@ -513,9 +514,9 @@ export function PipelineManager() {
                 </TabsList>
                 <TabsContent value="stages" className="mt-4">
                   <div className="space-y-2">
-                    {selectedPipeline.stages.map((stage, index) => (
+                    {parseStages(selectedPipeline.stages).map((stage: PipelineStage, index: number) => (
                       <div
-                        key={stage.id}
+                        key={stage.id || index}
                         className={`p-3 rounded-lg border cursor-pointer transition-all ${
                           activeStage === stage.id
                             ? 'border-blue-500 bg-blue-500/10'
@@ -562,7 +563,7 @@ export function PipelineManager() {
                     <div>
                       <Label className="text-slate-400">触发方式</Label>
                       <p className="text-slate-200">
-                        {selectedPipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
+                        {selectedPipeline.trigger_type === 'auto' ? '自动触发' : '手动触发'}
                       </p>
                     </div>
                   </div>

frontend/src/components/deploy/ReleaseManager.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -54,95 +54,7 @@ import {
   Check,
   X,
 } from 'lucide-react';
-import { appReleases } from '@/mocks/data';
-
-interface Release {
-  id: string;
-  appName: string;
-  version: string;
-  environment: 'production' | 'staging' | 'development';
-  status: 'pending' | 'approved' | 'deploying' | 'success' | 'failed' | 'rolled_back';
-  commitId: string;
-  branch: string;
-  applicant: string;
-  approver?: string;
-  description: string;
-  createdAt: string;
-  deployedAt?: string;
-  rollbackVersion?: string;
-}
-
-const mockReleases: Release[] = [
-  {
-    id: 'rel-001',
-    appName: '用户中心服务',
-    version: 'v2.3.1',
-    environment: 'production',
-    status: 'success',
-    commitId: 'a1b2c3d',
-    branch: 'main',
-    applicant: '张三',
-    approver: '李四',
-    description: '修复用户登录异常问题，优化性能',
-    createdAt: '2025-04-14 09:00:00',
-    deployedAt: '2025-04-14 10:30:00',
-  },
-  {
-    id: 'rel-002',
-    appName: '订单服务',
-    version: 'v1.5.0',
-    environment: 'production',
-    status: 'pending',
-    commitId: 'e4f5g6h',
-    branch: 'release/v1.5.0',
-    applicant: '王五',
-    description: '新增订单批量导出功能',
-    createdAt: '2025-04-14 11:00:00',
-  },
-  {
-    id: 'rel-003',
-    appName: '支付网关',
-    version: 'v3.0.2',
-    environment: 'staging',
-    status: 'deploying',
-    commitId: 'i7j8k9l',
-    branch: 'develop',
-    applicant: '赵六',
-    approver: '李四',
-    description: '集成新的支付渠道',
-    createdAt: '2025-04-14 10:00:00',
-    deployedAt: '2025-04-14 11:15:00',
-  },
-  {
-    id: 'rel-004',
-    appName: '消息推送服务',
-    version: 'v1.2.0',
-    environment: 'production',
-    status: 'failed',
-    commitId: 'm0n1o2p',
-    branch: 'main',
-    applicant: '张三',
-    approver: '李四',
-    description: '优化推送性能',
-    createdAt: '2025-04-14 08:00:00',
-    deployedAt: '2025-04-14 08:30:00',
-  },
-  {
-    id: 'rel-005',
-    appName: '数据分析平台',
-    version: 'v2.0.0',
-    environment: 'production',
-    status: 'rolled_back',
-    commitId: 'q3r4s5t',
-    branch: 'main',
-    applicant: '王五',
-    approver: '李四',
-    description: '新版数据分析引擎',
-    createdAt: '2025-04-13 14:00:00',
-    deployedAt: '2025-04-13 15:00:00',
-    rollbackVersion: 'v1.9.8',
-  },
-];
+import { releaseApi } from '@/services/api';
 
 const applications = [
   { id: 'app-1', name: '用户中心服务', currentVersion: 'v2.3.0' },
@@ -156,7 +68,9 @@ export function ReleaseManager() {
   const [searchQuery, setSearchQuery] = useState('');
   const [envFilter, setEnvFilter] = useState<string>('all');
   const [statusFilter, setStatusFilter] = useState<string>('all');
-  const [selectedRelease, setSelectedRelease] = useState<Release | null>(null);
+  const [releases, setReleases] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedRelease, setSelectedRelease] = useState<any | null>(null);
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
   const [isApproveDialogOpen, setIsApproveDialogOpen] = useState(false);
@@ -169,16 +83,32 @@ export function ReleaseManager() {
     description: '',
   });
 
-  const filteredReleases = mockReleases.filter((release) => {
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const data = await releaseApi.getReleases();
+      setReleases(data.list || []);
+    } catch (error) {
+      console.error('Failed to load releases:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredReleases = releases.filter((release) => {
     const matchesSearch =
-      release.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      release.version.includes(searchQuery);
+      (release.app_name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (release.version || '').includes(searchQuery);
     const matchesEnv = envFilter === 'all' || release.environment === envFilter;
     const matchesStatus = statusFilter === 'all' || release.status === statusFilter;
     return matchesSearch && matchesEnv && matchesStatus;
   });
 
-  const getStatusBadge = (status: Release['status']) => {
+  const getStatusBadge = (status: any) => {
     switch (status) {
       case 'success':
         return (
@@ -222,34 +152,78 @@ export function ReleaseManager() {
             已回滚
           </Badge>
         );
+      default:
+        return null;
     }
   };
 
-  const getEnvironmentBadge = (env: Release['environment']) => {
-    const colors = {
+  const getEnvironmentBadge = (env: any) => {
+    const colors: Record<string, string> = {
       production: 'border-red-500/30 text-red-400 bg-red-500/10',
       staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
       development: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
     };
-    const labels = {
+    const labels: Record<string, string> = {
       production: '生产环境',
       staging: '预发环境',
       development: '开发环境',
     };
     return (
-      <Badge variant="outline" className={colors[env]}>
-        {labels[env]}
+      <Badge variant="outline" className={colors[env] || colors.development}>
+        {labels[env] || env}
       </Badge>
     );
   };
 
-  const handleCreateRelease = () => {
-    setIsCreateDialogOpen(false);
-    setNewRelease({ appId: '', version: '', environment: 'staging', branch: '', commitId: '', description: '' });
+  const handleCreateRelease = async () => {
+    try {
+      await releaseApi.createRelease({
+        app_name: applications.find((a) => a.id === newRelease.appId)?.name || newRelease.appId,
+        version: newRelease.version,
+        environment: newRelease.environment,
+        branch: newRelease.branch,
+        commit_id: newRelease.commitId,
+        description: newRelease.description,
+      });
+      setIsCreateDialogOpen(false);
+      setNewRelease({ appId: '', version: '', environment: 'staging', branch: '', commitId: '', description: '' });
+      loadData();
+    } catch (error) {
+      console.error('Failed to create release:', error);
+    }
   };
 
-  const handleApprove = (approved: boolean) => {
-    setIsApproveDialogOpen(false);
+  const handleApprove = async (approved: boolean) => {
+    if (!selectedRelease) return;
+    try {
+      if (approved) {
+        await releaseApi.approveRelease(selectedRelease.id);
+      } else {
+        await releaseApi.rollbackRelease(selectedRelease.id);
+      }
+      setIsApproveDialogOpen(false);
+      loadData();
+    } catch (error) {
+      console.error('Failed to process approval:', error);
+    }
+  };
+
+  const handleDeploy = async (id: any) => {
+    try {
+      await releaseApi.deployRelease(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to deploy release:', error);
+    }
+  };
+
+  const handleRollback = async (id: any) => {
+    try {
+      await releaseApi.rollbackRelease(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to rollback release:', error);
+    }
   };
 
   return (
@@ -272,7 +246,7 @@ export function ReleaseManager() {
           <CardContent className="p-4">
             <p className="text-slate-400 text-sm">待审批</p>
             <p className="text-2xl font-bold text-amber-400">
-              {mockReleases.filter((r) => r.status === 'pending').length}
+              {releases.filter((r) => r.status === 'pending').length}
             </p>
           </CardContent>
         </Card>
@@ -280,7 +254,7 @@ export function ReleaseManager() {
           <CardContent className="p-4">
             <p className="text-slate-400 text-sm">发布中</p>
             <p className="text-2xl font-bold text-blue-400">
-              {mockReleases.filter((r) => r.status === 'deploying').length}
+              {releases.filter((r) => r.status === 'deploying').length}
             </p>
           </CardContent>
         </Card>
@@ -288,7 +262,7 @@ export function ReleaseManager() {
           <CardContent className="p-4">
             <p className="text-slate-400 text-sm">今日成功</p>
             <p className="text-2xl font-bold text-emerald-400">
-              {mockReleases.filter((r) => r.status === 'success').length}
+              {releases.filter((r) => r.status === 'success').length}
             </p>
           </CardContent>
         </Card>
@@ -296,7 +270,7 @@ export function ReleaseManager() {
           <CardContent className="p-4">
             <p className="text-slate-400 text-sm">今日失败</p>
             <p className="text-2xl font-bold text-red-400">
-              {mockReleases.filter((r) => r.status === 'failed').length}
+              {releases.filter((r) => r.status === 'failed').length}
             </p>
           </CardContent>
         </Card>
@@ -304,7 +278,7 @@ export function ReleaseManager() {
           <CardContent className="p-4">
             <p className="text-slate-400 text-sm">已回滚</p>
             <p className="text-2xl font-bold text-slate-400">
-              {mockReleases.filter((r) => r.status === 'rolled_back').length}
+              {releases.filter((r) => r.status === 'rolled_back').length}
             </p>
           </CardContent>
         </Card>
@@ -346,6 +320,12 @@ export function ReleaseManager() {
         </select>
       </div>
 
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+        </div>
+      ) : null}
+
       {/* Release List */}
       <div className="space-y-3">
         {filteredReleases.map((release) => (
@@ -354,7 +334,7 @@ export function ReleaseManager() {
               <div className="flex items-start justify-between">
                 <div className="flex-1">
                   <div className="flex items-center gap-3">
-                    <h3 className="font-medium text-slate-100">{release.appName}</h3>
+                    <h3 className="font-medium text-slate-100">{release.app_name}</h3>
                     {getStatusBadge(release.status)}
                     {getEnvironmentBadge(release.environment)}
                   </div>
@@ -369,19 +349,18 @@ export function ReleaseManager() {
                     </span>
                     <span className="flex items-center gap-1">
                       <GitCommit className="h-3 w-3" />
-                      {release.commitId}
+                      {release.commit_id}
                     </span>
                     <span className="flex items-center gap-1">
                       <User className="h-3 w-3" />
-                      申请人: {release.applicant}
+                      发布人: {release.deployer}
                     </span>
                   </div>
-                  <p className="text-sm text-slate-500 mt-2">{release.description}</p>
                   <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
-                    <span>创建: {release.createdAt}</span>
-                    {release.deployedAt && <span>部署: {release.deployedAt}</span>}
-                    {release.rollbackVersion && (
-                      <span className="text-red-400">回滚至: {release.rollbackVersion}</span>
+                    <span>创建: {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}</span>
+                    {release.updated_at && <span>部署: {new Date(release.updated_at).toLocaleString()}</span>}
+                    {release.rollback_to && (
+                      <span className="text-red-400">回滚至: {release.rollback_to}</span>
                     )}
                   </div>
                 </div>
@@ -402,13 +381,23 @@ export function ReleaseManager() {
                     </Button>
                   )}
                   {release.status === 'approved' && (
-                    <Button variant="outline" size="sm" className="border-blue-600 text-blue-400 hover:bg-blue-600/20">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="border-blue-600 text-blue-400 hover:bg-blue-600/20"
+                      onClick={() => handleDeploy(release.id)}
+                    >
                       <Play className="h-4 w-4 mr-1" />
                       开始发布
                     </Button>
                   )}
                   {(release.status === 'success' || release.status === 'failed') && (
-                    <Button variant="outline" size="sm" className="border-amber-600 text-amber-400 hover:bg-amber-600/20">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="border-amber-600 text-amber-400 hover:bg-amber-600/20"
+                      onClick={() => handleRollback(release.id)}
+                    >
                       <RotateCcw className="h-4 w-4 mr-1" />
                       回滚
                     </Button>
@@ -531,13 +520,13 @@ export function ReleaseManager() {
           <DialogHeader>
             <DialogTitle>审批发布</DialogTitle>
             <DialogDescription className="text-slate-500">
-              {selectedRelease?.appName} - {selectedRelease?.version}
+              {selectedRelease?.app_name} - {selectedRelease?.version}
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
             <div className="p-4 bg-slate-800 rounded-lg">
               <p className="text-sm text-slate-400">发布说明</p>
-              <p className="text-slate-200 mt-1">{selectedRelease?.description}</p>
+              <p className="text-slate-200 mt-1">{selectedRelease?.description || '无'}</p>
             </div>
             <div className="mt-4">
               <Label className="text-slate-300">审批意见</Label>