重构消息通知弹窗

frontend/src/pages/Deploy/Team/List/components/TeamApplicationDialog.tsx

@@ -25,7 +25,9 @@ import { useToast } from '@/components/ui/use-toast';
 import type {
   TeamApplication,
   Application,
+  BuildType,
 } from '../types';
+import { BUILD_TYPE_OPTIONS } from '../types';
 import type { RepositoryBranchResponse } from '@/pages/Resource/Git/List/types';
 import type { WorkflowDefinition } from '@/pages/Workflow/Definition/List/types';
 import { getExternalSystemList } from '@/pages/Resource/External/List/service';
@@ -46,6 +48,7 @@ interface TeamApplicationDialogProps {
   onSave: (data: {
     id?: number;
     appId: number;
+    buildType: BuildType | null;
     branch: string;
     deploySystemId: number | null;
     deployJob: string;
@@ -78,6 +81,7 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
   // 表单状态
   const [formData, setFormData] = useState({
     appId: null as number | null,
+    buildType: 'JENKINS' as BuildType | null,
     branch: '',
     deploySystemId: null as number | null,
     deployJob: '',
@@ -111,6 +115,7 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
         // 编辑模式：填充现有数据
         setFormData({
           appId: application.applicationId,
+          buildType: application.buildType || 'JENKINS',
           branch: application.branch || '',
           deploySystemId: application.deploySystemId || null,
           deployJob: application.deployJob || '',
@@ -144,6 +149,7 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
         // 新建模式：重置表单
         setFormData({
           appId: null,
+          buildType: 'JENKINS',
           branch: '',
           deploySystemId: null,
           deployJob: '',
@@ -221,6 +227,7 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
   const handleAppChange = (appId: number) => {
     setFormData({
       appId: appId,
+      buildType: formData.buildType,
       branch: '',
       deploySystemId: null,
       deployJob: '',
@@ -232,6 +239,18 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
     setBranches([]);
   };
 
+  // 处理构建类型选择
+  const handleBuildTypeChange = (buildType: BuildType) => {
+    setFormData({
+      ...formData,
+      buildType,
+      // 切换构建类型时清空 Jenkins 相关配置
+      deploySystemId: null,
+      deployJob: '',
+    });
+    setJenkinsJobs([]);
+  };
+
   // 处理 Jenkins 系统选择
   const handleJenkinsSystemChange = (systemId: number) => {
     setFormData({
@@ -297,9 +316,10 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
       await onSave({
         id: mode === 'edit' && application ? application.id : undefined,
         appId: formData.appId,
+        buildType: formData.buildType,
         branch: formData.branch,
-        deploySystemId: formData.deploySystemId,
+        deploySystemId: formData.buildType === 'JENKINS' ? formData.deploySystemId : null,
-        deployJob: formData.deployJob,
+        deployJob: formData.buildType === 'JENKINS' ? formData.deployJob : '',
         workflowDefinitionId: formData.workflowDefinitionId,
         codeSourceSystemId: formData.codeSourceSystemId,
         codeSourceProjectId: formData.codeSourceProjectId,
@@ -328,14 +348,14 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-2xl h-[680px] flex flex-col">
         <DialogHeader>
           <DialogTitle>
             {mode === 'edit' ? '编辑' : '添加'}应用配置 - {environmentName}
           </DialogTitle>
         </DialogHeader>
 
-        <DialogBody>
+        <DialogBody className="flex-1 overflow-y-auto">
           <div className="space-y-4">
           {/* 应用选择 */}
           <div className="space-y-2">
@@ -378,6 +398,140 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
             )}
           </div>
 
+          {/* 构建类型选择 */}
+          <div className="space-y-2">
+            <Label>
+              构建类型 <span className="text-destructive">*</span>
+            </Label>
+            <Select
+              value={formData.buildType || ''}
+              onValueChange={(value) => handleBuildTypeChange(value as BuildType)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="选择构建类型" />
+              </SelectTrigger>
+              <SelectContent>
+                {BUILD_TYPE_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">
+              Jenkins构建：通过Jenkins执行构建任务；脚本部署：通过自定义脚本执行部署
+            </p>
+          </div>
+
+          {/* Jenkins 系统 - 仅在构建类型为 JENKINS 时显示 */}
+          {formData.buildType === 'JENKINS' && (
+            <div className="space-y-2">
+              <Label>Jenkins系统</Label>
+              <Select
+                value={formData.deploySystemId?.toString() || ''}
+                onValueChange={(value) =>
+                  handleJenkinsSystemChange(Number(value))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="选择Jenkins系统" />
+                </SelectTrigger>
+                <SelectContent>
+                  {jenkinsSystems.length === 0 ? (
+                    <div className="p-4 text-center text-sm text-muted-foreground">
+                      暂无Jenkins系统
+                    </div>
+                  ) : (
+                    jenkinsSystems.map((system) => (
+                      <SelectItem key={system.id} value={system.id.toString()}>
+                        {system.name}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Jenkins Job - 仅在构建类型为 JENKINS 时显示 */}
+          {formData.buildType === 'JENKINS' && (
+            <div className="space-y-2">
+              <Label>Jenkins Job</Label>
+              {formData.deploySystemId ? (
+                <Popover open={jobPopoverOpen} onOpenChange={setJobPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      disabled={loadingJobs || jenkinsJobs.length === 0}
+                      className={cn(
+                        'w-full justify-between',
+                        !formData.deployJob && 'text-muted-foreground'
+                      )}
+                    >
+                      <span className="truncate">
+                        {formData.deployJob ||
+                          (loadingJobs
+                            ? '加载中...'
+                            : jenkinsJobs.length === 0
+                            ? '无Job'
+                            : '选择Job')}
+                      </span>
+                      <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0">
+                    <div className="flex items-center border-b px-3">
+                      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                      <input
+                        placeholder="搜索Job..."
+                        className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+                        value={jobSearchValue}
+                        onChange={(e) => setJobSearchValue(e.target.value)}
+                      />
+                    </div>
+                    <ScrollArea className="h-[200px]">
+                      <div className="p-1">
+                        {filteredJobs.length === 0 ? (
+                          <div className="p-4 text-center text-sm text-muted-foreground">
+                            未找到Job
+                          </div>
+                        ) : (
+                          filteredJobs.map((job) => (
+                            <div
+                              key={job.id}
+                              className={cn(
+                                'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent',
+                                job.jobName === formData.deployJob && 'bg-accent'
+                              )}
+                              onClick={() => {
+                                setFormData({
+                                  ...formData,
+                                  deployJob: job.jobName,
+                                });
+                                setJobSearchValue('');
+                                setJobPopoverOpen(false);
+                              }}
+                            >
+                              <span className="flex-1 truncate">
+                                {job.jobName}
+                              </span>
+                              {job.jobName === formData.deployJob && (
+                                <Check className="ml-2 h-4 w-4" />
+                              )}
+                            </div>
+                          ))
+                        )}
+                      </div>
+                    </ScrollArea>
+                  </PopoverContent>
+                </Popover>
+              ) : (
+                <Input placeholder="请先选择Jenkins系统" disabled />
+              )}
+            </div>
+          )}
+
           {/* 代码源选择 */}
           <div className="space-y-2">
             <Label>代码源</Label>
@@ -588,111 +742,6 @@ const TeamApplicationDialog: React.FC<TeamApplicationDialogProps> = ({
             )}
           </div>
 
-          {/* Jenkins 系统 */}
-          <div className="space-y-2">
-            <Label>Jenkins系统</Label>
-            <Select
-              value={formData.deploySystemId?.toString() || ''}
-              onValueChange={(value) =>
-                handleJenkinsSystemChange(Number(value))
-              }
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="选择Jenkins系统" />
-              </SelectTrigger>
-              <SelectContent>
-                {jenkinsSystems.length === 0 ? (
-                  <div className="p-4 text-center text-sm text-muted-foreground">
-                    暂无Jenkins系统
-                  </div>
-                ) : (
-                  jenkinsSystems.map((system) => (
-                    <SelectItem key={system.id} value={system.id.toString()}>
-                      {system.name}
-                    </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* Jenkins Job */}
-          <div className="space-y-2">
-            <Label>Jenkins Job</Label>
-            {formData.deploySystemId ? (
-              <Popover open={jobPopoverOpen} onOpenChange={setJobPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    disabled={loadingJobs || jenkinsJobs.length === 0}
-                    className={cn(
-                      'w-full justify-between',
-                      !formData.deployJob && 'text-muted-foreground'
-                    )}
-                  >
-                    <span className="truncate">
-                      {formData.deployJob ||
-                        (loadingJobs
-                          ? '加载中...'
-                          : jenkinsJobs.length === 0
-                          ? '无Job'
-                          : '选择Job')}
-                    </span>
-                    <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-full p-0">
-                  <div className="flex items-center border-b px-3">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <input
-                      placeholder="搜索Job..."
-                      className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
-                      value={jobSearchValue}
-                      onChange={(e) => setJobSearchValue(e.target.value)}
-                    />
-                  </div>
-                  <ScrollArea className="h-[200px]">
-                    <div className="p-1">
-                      {filteredJobs.length === 0 ? (
-                        <div className="p-4 text-center text-sm text-muted-foreground">
-                          未找到Job
-                        </div>
-                      ) : (
-                        filteredJobs.map((job) => (
-                          <div
-                            key={job.id}
-                            className={cn(
-                              'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent',
-                              job.jobName === formData.deployJob && 'bg-accent'
-                            )}
-                            onClick={() => {
-                              setFormData({
-                                ...formData,
-                                deployJob: job.jobName,
-                              });
-                              setJobSearchValue('');
-                              setJobPopoverOpen(false);
-                            }}
-                          >
-                            <span className="flex-1 truncate">
-                              {job.jobName}
-                            </span>
-                            {job.jobName === formData.deployJob && (
-                              <Check className="ml-2 h-4 w-4" />
-                            )}
-                          </div>
-                        ))
-                      )}
-                    </div>
-                  </ScrollArea>
-                </PopoverContent>
-              </Popover>
-            ) : (
-              <Input placeholder="请先选择Jenkins系统" disabled />
-            )}
-          </div>
-
           {/* 工作流定义 */}
           <div className="space-y-2">
             <Label>流程</Label>

frontend/src/pages/Deploy/Team/List/components/TeamApplicationManageDialog.tsx

@@ -136,6 +136,7 @@ export const TeamApplicationManageDialog: React.FC<
   const handleSaveApplication = async (data: {
     id?: number;
     appId: number;
+    buildType: 'JENKINS' | 'NATIVE' | null;
     branch: string;
     deploySystemId: number | null;
     deployJob: string;
@@ -149,6 +150,7 @@ export const TeamApplicationManageDialog: React.FC<
       teamId,
       applicationId: data.appId,
       environmentId: editingEnvironment.id,
+      buildType: data.buildType || undefined,
       branch: data.branch,
       deploySystemId: data.deploySystemId || undefined,
       deployJob: data.deployJob,
@@ -240,6 +242,7 @@ export const TeamApplicationManageDialog: React.FC<
                     <TableRow>
                       <TableHead>应用名称</TableHead>
                       <TableHead>环境</TableHead>
+                      <TableHead>构建类型</TableHead>
                       <TableHead>分支</TableHead>
                       <TableHead>Jenkins系统</TableHead>
                       <TableHead>Jenkins Job</TableHead>
@@ -258,11 +261,18 @@ export const TeamApplicationManageDialog: React.FC<
                         <TableCell>
                           {getEnvironmentName(app.environmentId)}
                         </TableCell>
+                        <TableCell>
+                          {app.buildType === 'JENKINS' ? 'Jenkins构建' : app.buildType === 'NATIVE' ? '脚本部署' : '-'}
+                        </TableCell>
                         <TableCell>{app.branch || '-'}</TableCell>
                         <TableCell>
-                          {app.deploySystemName || `系统 ${app.deploySystemId}`}
+                          {app.buildType === 'JENKINS' 
+                            ? (app.deploySystemName || (app.deploySystemId ? `系统 ${app.deploySystemId}` : '-'))
+                            : '-'}
+                        </TableCell>
+                        <TableCell>
+                          {app.buildType === 'JENKINS' ? (app.deployJob || '-') : '-'}
                         </TableCell>
-                        <TableCell>{app.deployJob || '-'}</TableCell>
                         <TableCell>
                           {app.workflowDefinitionName || '-'}
                         </TableCell>

frontend/src/pages/Deploy/Team/List/types.ts

@@ -105,6 +105,19 @@ export interface TeamEnvironmentConfigRequest {
 
 // ==================== 团队应用关联相关 ====================
 
+/**
+ * 构建类型枚举
+ */
+export type BuildType = 'JENKINS' | 'NATIVE';
+
+/**
+ * 构建类型选项
+ */
+export const BUILD_TYPE_OPTIONS = [
+  { value: 'JENKINS', label: 'Jenkins构建' },
+  { value: 'NATIVE', label: '脚本部署' },
+] as const;
+
 /**
  * 团队应用关联响应
  */
@@ -112,6 +125,7 @@ export interface TeamApplication extends BaseResponse {
   teamId: number;
   applicationId: number;
   environmentId: number;
+  buildType?: BuildType;  // 构建类型
   branch?: string;
   deploySystemId?: number;
   deployJob?: string;
@@ -135,6 +149,7 @@ export interface TeamApplicationRequest {
   teamId: number;
   applicationId: number;
   environmentId: number;
+  buildType?: BuildType;  // 构建类型
   branch?: string;
   deploySystemId?: number;
   deployJob?: string;