ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构消息通知弹窗

Browse Source
This commit is contained in:
dengqichen 2025-11-13 16:55:47 +08:00
parent 828a0da526
commit 8b26c0d196
2 changed files with 243 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/src/pages/Deploy/Team/List/components/NotificationConfigDialog.tsx
View File

@ -145,10 +145,10 @@ export const NotificationConfigDialog: React.FC<
}; };
// 加载通知模板列表 // 加载通知模板列表
const loadNotificationTemplates = async () => { const loadNotificationTemplates = async (channelType?: string) => {
setLoadingTemplates(true); setLoadingTemplates(true);
try { try {
const templates = await getNotificationTemplates(); const templates = await getNotificationTemplates(channelType);
setNotificationTemplates(templates || []); setNotificationTemplates(templates || []);
} catch (error: any) { } catch (error: any) {
toast({ toast({
@ -207,11 +207,22 @@ export const NotificationConfigDialog: React.FC<
useEffect(() => { useEffect(() => {
if (open) { if (open) {
loadNotificationChannels(); loadNotificationChannels();
loadNotificationTemplates();
loadEnvironmentConfig(); loadEnvironmentConfig();
} }
}, [open, teamId, environmentId]); }, [open, teamId, environmentId]);
// 监听通知渠道变化，重新加载模板列表
const selectedChannelId = form.watch('notificationConfig.notificationChannelId');
useEffect(() => {
if (open && notificationChannels.length > 0) {
const selectedChannel = notificationChannels.find(
(channel) => channel.id === selectedChannelId
);
loadNotificationTemplates(selectedChannel?.type);
}
}, [selectedChannelId, notificationChannels, open]);
const handleSubmit = async (data: FormData) => { const handleSubmit = async (data: FormData) => {
console.log('表单提交数据:', data); console.log('表单提交数据:', data);
console.log('当前配置:', currentConfig); console.log('当前配置:', currentConfig);
@ -346,18 +357,19 @@ export const NotificationConfigDialog: React.FC<
/> />
{/* 部署通知 */} {/* 部署通知 */}
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4"> <div className="rounded-lg border p-4 space-y-2">
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
{/* 左侧：通知类型标题 */}
<div>
<FormLabel className="text-base">部署通知</FormLabel>
</div>
{/* 中间：开关 */}
<FormField <FormField
control={form.control} control={form.control}
name="notificationConfig.deployNotificationEnabled" name="notificationConfig.deployNotificationEnabled"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between space-y-0"> <FormItem className="mb-0">
<div className="space-y-0.5 flex-1">
<FormLabel className="text-base">部署通知</FormLabel>
<div className="text-sm text-muted-foreground">
部署状态变更时发送通知
</div>
</div>
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
@ -368,11 +380,13 @@ export const NotificationConfigDialog: React.FC<
)} )}
/> />
{/* 右侧：模板选择 */}
<FormField <FormField
control={form.control} control={form.control}
name="notificationConfig.deployNotificationTemplateId" name="notificationConfig.deployNotificationTemplateId"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col justify-center space-y-2"> <FormItem className="mb-0">
<FormControl>
<ClearableSelect <ClearableSelect
value={field.value?.toString()} value={field.value?.toString()}
onValueChange={(value) => onValueChange={(value) =>
@ -380,7 +394,6 @@ export const NotificationConfigDialog: React.FC<
} }
disabled={loadingTemplates} disabled={loadingTemplates}
> >
<FormControl>
<SelectTrigger <SelectTrigger
clearable clearable
hasValue={!!field.value} hasValue={!!field.value}
@ -396,7 +409,6 @@ export const NotificationConfigDialog: React.FC<
} }
/> />
</SelectTrigger> </SelectTrigger>
</FormControl>
<SelectContent> <SelectContent>
{notificationTemplates.map((template) => ( {notificationTemplates.map((template) => (
<SelectItem <SelectItem
@ -408,28 +420,38 @@ export const NotificationConfigDialog: React.FC<
))} ))}
</SelectContent> </SelectContent>
</ClearableSelect> </ClearableSelect>
<div className="text-sm text-muted-foreground"> </FormControl>
部署通知模板
</div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
{/* 描述文字行 */}
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
<div className="text-sm text-muted-foreground">
部署状态变更时发送通知
</div>
<div></div>
<div className="text-sm text-muted-foreground">
部署通知模板
</div>
</div>
</div>
{/* 构建通知 */} {/* 构建通知 */}
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4"> <div className="rounded-lg border p-4 space-y-2">
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
{/* 左侧：通知类型标题 */}
<div>
<FormLabel className="text-base">构建通知</FormLabel>
</div>
{/* 中间：开关 */}
<FormField <FormField
control={form.control} control={form.control}
name="notificationConfig.buildNotificationEnabled" name="notificationConfig.buildNotificationEnabled"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between space-y-0"> <FormItem className="mb-0">
<div className="space-y-0.5 flex-1">
<FormLabel className="text-base">构建通知</FormLabel>
<div className="text-sm text-muted-foreground">
构建状态变更时发送通知
</div>
</div>
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
@ -440,11 +462,13 @@ export const NotificationConfigDialog: React.FC<
)} )}
/> />
{/* 右侧：模板选择 */}
<FormField <FormField
control={form.control} control={form.control}
name="notificationConfig.buildNotificationTemplateId" name="notificationConfig.buildNotificationTemplateId"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col justify-center space-y-2"> <FormItem className="mb-0">
<FormControl>
<ClearableSelect <ClearableSelect
value={field.value?.toString()} value={field.value?.toString()}
onValueChange={(value) => onValueChange={(value) =>
@ -452,7 +476,6 @@ export const NotificationConfigDialog: React.FC<
} }
disabled={loadingTemplates} disabled={loadingTemplates}
> >
<FormControl>
<SelectTrigger <SelectTrigger
clearable clearable
hasValue={!!field.value} hasValue={!!field.value}
@ -468,7 +491,6 @@ export const NotificationConfigDialog: React.FC<
} }
/> />
</SelectTrigger> </SelectTrigger>
</FormControl>
<SelectContent> <SelectContent>
{notificationTemplates.map((template) => ( {notificationTemplates.map((template) => (
<SelectItem <SelectItem
@ -480,28 +502,38 @@ export const NotificationConfigDialog: React.FC<
))} ))}
</SelectContent> </SelectContent>
</ClearableSelect> </ClearableSelect>
<div className="text-sm text-muted-foreground"> </FormControl>
构建通知模板
</div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
{/* 描述文字行 */}
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
<div className="text-sm text-muted-foreground">
构建状态变更时发送通知
</div>
<div></div>
<div className="text-sm text-muted-foreground">
构建通知模板
</div>
</div>
</div>
{/* 失败日志 */} {/* 失败日志 */}
<div className="grid grid-cols-2 gap-4 rounded-lg border p-4"> <div className="rounded-lg border p-4 space-y-2">
<div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
{/* 左侧：通知类型标题 */}
<div>
<FormLabel className="text-base">失败日志</FormLabel>
</div>
{/* 中间：开关 */}
<FormField <FormField
control={form.control} control={form.control}
name="notificationConfig.buildFailureFileEnabled" name="notificationConfig.buildFailureFileEnabled"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between space-y-0"> <FormItem className="mb-0">
<div className="space-y-0.5 flex-1">
<FormLabel className="text-base">失败日志</FormLabel>
<div className="text-sm text-muted-foreground">
构建失败时是否发送日志
</div>
</div>
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
@ -512,11 +544,13 @@ export const NotificationConfigDialog: React.FC<
)} )}
/> />
{/* 右侧：模板选择 */}
<FormField <FormField
control={form.control} control={form.control}
name="notificationConfig.buildFailureNotificationTemplateId" name="notificationConfig.buildFailureNotificationTemplateId"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col justify-center space-y-2"> <FormItem className="mb-0">
<FormControl>
<ClearableSelect <ClearableSelect
value={field.value?.toString()} value={field.value?.toString()}
onValueChange={(value) => onValueChange={(value) =>
@ -524,7 +558,6 @@ export const NotificationConfigDialog: React.FC<
} }
disabled={loadingTemplates} disabled={loadingTemplates}
> >
<FormControl>
<SelectTrigger <SelectTrigger
clearable clearable
hasValue={!!field.value} hasValue={!!field.value}
@ -540,7 +573,6 @@ export const NotificationConfigDialog: React.FC<
} }
/> />
</SelectTrigger> </SelectTrigger>
</FormControl>
<SelectContent> <SelectContent>
{notificationTemplates.map((template) => ( {notificationTemplates.map((template) => (
<SelectItem <SelectItem
@ -552,14 +584,23 @@ export const NotificationConfigDialog: React.FC<
))} ))}
</SelectContent> </SelectContent>
</ClearableSelect> </ClearableSelect>
<div className="text-sm text-muted-foreground"> </FormControl>
失败日志通知模板
</div>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div> </div>
{/* 描述文字行 */}
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
<div className="text-sm text-muted-foreground">
构建失败时是否发送日志
</div>
<div></div>
<div className="text-sm text-muted-foreground">
失败日志通知模板
</div>
</div>
</div>
</DialogBody> </DialogBody>
<DialogFooter> <DialogFooter>

6
frontend/src/pages/Deploy/Team/List/service.ts
View File

@ -177,7 +177,9 @@ export const deleteTeamEnvironmentConfig = (id: number) =>
/** /**
* 获取通知模板列表 * 获取通知模板列表
*/ */
export const getNotificationTemplates = () => export const getNotificationTemplates = (channelType?: string) =>
request.get<any[]>('/api/v1/notification-template/list'); request.get<any[]>('/api/v1/notification-template/list', {
params: channelType ? { channelType } : undefined
});