snapshot: AlertCenter拆分前快照

frontend/src/components/deploy/AppRelease.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -30,6 +31,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
 import {
   Rocket,
   Plus,
@@ -53,14 +56,26 @@ import {
   Terminal,
 } from 'lucide-react';
 import { releaseApi } from '@/services/api';
+import { toast } from 'sonner';
 
 export function AppReleaseManager() {
+  const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = useState('');
   const [envFilter, setEnvFilter] = useState<string>('all');
   const [statusFilter, setStatusFilter] = useState<string>('all');
   const [releases, setReleases] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedRelease, setSelectedRelease] = useState<any | null>(null);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [newRelease, setNewRelease] = useState({
+    appName: '',
+    version: '',
+    environment: 'dev',
+    commitId: '',
+    commitMsg: '',
+    description: '',
+  });
 
   const loadData = async () => {
     try {
@@ -165,6 +180,33 @@ export function AppReleaseManager() {
     }
   };
 
+  // 新建发布提交（复用 releaseApi.createRelease） // Logan.Li
+  const handleCreateRelease = async () => {
+    if (!newRelease.appName.trim() || !newRelease.version.trim()) {
+      toast.error('请填写应用名称和版本号');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await releaseApi.createRelease({
+        app_name: newRelease.appName.trim(),
+        version: newRelease.version.trim(),
+        environment: newRelease.environment,
+        commit_id: newRelease.commitId.trim(),
+        commit_msg: newRelease.commitMsg.trim(),
+        description: newRelease.description.trim(),
+      });
+      toast.success('发布申请已提交');
+      setIsCreateDialogOpen(false);
+      setNewRelease({ appName: '', version: '', environment: 'dev', commitId: '', commitMsg: '', description: '' });
+      loadData();
+    } catch {
+      toast.error('创建失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   // 模拟流水线步骤
   const pipelineSteps = [
     { name: '代码检出', status: 'success', duration: '15s' },
@@ -186,11 +228,18 @@ export function AppReleaseManager() {
           <p className="text-sm text-slate-500 mt-1">CI/CD流水线管理与发布历史</p>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
+          <Button
+            variant="outline"
+            className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
+            onClick={() => navigate('/pipelines')}
+          >
             <Settings className="h-4 w-4 mr-2" />
             流水线配置
           </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+          <Button
+            className="bg-blue-600 hover:bg-blue-700 text-white"
+            onClick={() => setIsCreateDialogOpen(true)}
+          >
             <Plus className="h-4 w-4 mr-2" />
             新建发布
           </Button>
@@ -485,6 +534,93 @@ export function AppReleaseManager() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Create Release Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
+          <DialogHeader>
+            <DialogTitle className="text-slate-100">新建发布</DialogTitle>
+            <DialogDescription className="text-slate-500">创建新的应用版本发布申请</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <Label className="text-slate-300">应用名称</Label>
+              <Input
+                value={newRelease.appName}
+                onChange={(e) => setNewRelease({ ...newRelease, appName: e.target.value })}
+                placeholder="如：用户中心服务"
+                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label className="text-slate-300">版本号</Label>
+                <Input
+                  value={newRelease.version}
+                  onChange={(e) => setNewRelease({ ...newRelease, version: e.target.value })}
+                  placeholder="v1.0.0"
+                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                />
+              </div>
+              <div>
+                <Label className="text-slate-300">目标环境</Label>
+                <Select
+                  value={newRelease.environment}
+                  onValueChange={(value) => setNewRelease({ ...newRelease, environment: value })}
+                >
+                  <SelectTrigger className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="bg-slate-800 border-slate-700">
+                    <SelectItem value="dev">开发环境</SelectItem>
+                    <SelectItem value="test">测试环境</SelectItem>
+                    <SelectItem value="staging">预发布</SelectItem>
+                    <SelectItem value="prod">生产环境</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label className="text-slate-300">Commit ID</Label>
+                <Input
+                  value={newRelease.commitId}
+                  onChange={(e) => setNewRelease({ ...newRelease, commitId: e.target.value })}
+                  placeholder="abc1234"
+                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                />
+              </div>
+              <div>
+                <Label className="text-slate-300">提交信息</Label>
+                <Input
+                  value={newRelease.commitMsg}
+                  onChange={(e) => setNewRelease({ ...newRelease, commitMsg: e.target.value })}
+                  placeholder="feat: 新增功能"
+                  className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+                />
+              </div>
+            </div>
+            <div>
+              <Label className="text-slate-300">发布说明</Label>
+              <Textarea
+                value={newRelease.description}
+                onChange={(e) => setNewRelease({ ...newRelease, description: e.target.value })}
+                placeholder="描述本次发布的内容..."
+                className="mt-1 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setIsCreateDialogOpen(false)}>
+              取消
+            </Button>
+            <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleCreateRelease} disabled={submitting}>
+              {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
+              提交申请
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }