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-27 15:40:58 +08:00
parent 1af85b2940
commit 1a5786502a
7 changed files with 100 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/pages/Dashboard/components/DeploymentFormModal.tsx
View File

@ -75,12 +75,11 @@ const DeploymentFormModal: React.FC<DeploymentFormModalProps> = ({
// 通知信息（使用环境配置的通知设置）
notification: {
notificationChannelId: environment.notificationConfig?.notificationChannelId,
deployNotificationEnabled: environment.notificationConfig?.deployNotificationEnabled,
deployNotificationTemplateId: environment.notificationConfig?.deployNotificationTemplateId,
preApprovalNotificationEnabled: environment.notificationConfig?.preApprovalNotificationEnabled,
preApprovalNotificationTemplateId: environment.notificationConfig?.preApprovalNotificationTemplateId,
buildNotificationEnabled: environment.notificationConfig?.buildNotificationEnabled,
buildNotificationTemplateId: environment.notificationConfig?.buildNotificationTemplateId,
buildFailureFileEnabled: environment.notificationConfig?.buildFailureFileEnabled,
buildFailureNotificationTemplateId: environment.notificationConfig?.buildFailureNotificationTemplateId,
},
};
}, [app, environment, teamId, currentUser]); // 只在这些依赖变化时重新生成

5
frontend/src/pages/Dashboard/types.ts
View File

@ -60,12 +60,11 @@ export interface ApplicationConfig {
export interface NotificationConfig {
notificationChannelId: number;
deployNotificationEnabled: boolean;
deployNotificationTemplateId: number;
preApprovalNotificationEnabled: boolean;
preApprovalNotificationTemplateId: number;
buildNotificationEnabled: boolean;
buildNotificationTemplateId: number;
buildFailureFileEnabled: boolean;
buildFailureNotificationTemplateId: number;
}
export interface DeployEnvironment {

24
frontend/src/pages/Deploy/Team/List/components/ApplicationManageDialog.tsx
View File

@ -292,15 +292,15 @@ const ApplicationManageDialog: React.FC<ApplicationManageDialogProps> = ({
{/* 表格 */}
<div className="border rounded-lg overflow-hidden">
<div className="max-h-[50vh] overflow-y-auto">
<Table minWidth="690px">
<div className="max-h-[50vh] overflow-auto">
<Table minWidth="750px">
<TableHeader>
<TableRow>
<TableHead width="100px">应用ID</TableHead>
<TableHead width="150px">应用编码</TableHead>
<TableHead width="200px">应用名称</TableHead>
<TableHead width="160px">创建时间</TableHead>
<TableHead width="80px" sticky>操作</TableHead>
<TableHead width="80px" className="whitespace-nowrap">应用ID</TableHead>
<TableHead width="160px" className="whitespace-nowrap">应用编码</TableHead>
<TableHead width="200px" className="whitespace-nowrap">应用名称</TableHead>
<TableHead width="180px" className="whitespace-nowrap">创建时间</TableHead>
<TableHead width="80px" sticky className="whitespace-nowrap">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -316,20 +316,20 @@ const ApplicationManageDialog: React.FC<ApplicationManageDialogProps> = ({
) : data?.content && data.content.length > 0 ? (
data.content.map((record) => (
<TableRow key={record.id}>
<TableCell width="100px" className="font-medium">
<TableCell width="80px" className="font-medium whitespace-nowrap">
{record.applicationId}
</TableCell>
<TableCell width="150px">
<TableCell width="160px" className="whitespace-nowrap">
{record.applicationCode || '-'}
</TableCell>
<TableCell width="200px">
<TableCell width="200px" className="whitespace-nowrap">
{record.applicationName || '-'}
</TableCell>
<TableCell width="160px">
<TableCell width="180px" className="whitespace-nowrap">
{record.createTime || '-'}
</TableCell>
<TableCell width="80px" sticky>
<div className="flex items-center justify-end gap-1">
<div className="flex items-center justify-end">
<Button
variant="ghost"
size="sm"

14
frontend/src/pages/Deploy/Team/List/components/NotificationChannelCell.tsx
View File

@ -37,10 +37,10 @@ const getChannelIcon = (channelType?: string) => {
// 通知类型配置
const notificationTypes = [
{
key: 'deployNotificationEnabled',
label: '部署',
key: 'preApprovalNotificationEnabled',
label: '审批前',
variant: 'success' as const,
description: '部署状态变更时发送通知'
description: '提交部署申请进入审批时发送通知'
},
{
key: 'buildNotificationEnabled',
@ -50,9 +50,9 @@ const notificationTypes = [
},
{
key: 'buildFailureFileEnabled',
label: '失败文件',
label: '失败日志',
variant: 'destructive' as const,
description: '构建失败文件时发送通知'
description: '构建失败时发送日志文件'
}
];
@ -71,11 +71,9 @@ export const NotificationChannelCell: React.FC<NotificationChannelCellProps> = (
const {
notificationChannelName,
deployNotificationEnabled,
preApprovalNotificationEnabled,
buildNotificationEnabled,
buildFailureFileEnabled,
updateTime,
updateBy
} = notificationConfig;
// 计算启用的通知类型

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

@ -44,12 +44,11 @@ const formSchema = z
.object({
id: z.number().optional(),
notificationChannelId: z.number().nullish(),
deployNotificationEnabled: z.boolean().default(false),
deployNotificationTemplateId: z.number().nullish(),
preApprovalNotificationEnabled: z.boolean().default(false),
preApprovalNotificationTemplateId: z.number().nullish(),
buildNotificationEnabled: z.boolean().default(false),
buildNotificationTemplateId: z.number().nullish(),
buildFailureFileEnabled: z.boolean().default(false),
buildFailureNotificationTemplateId: z.number().nullish(),
})
.optional(),
})
@ -57,7 +56,7 @@ const formSchema = z
(data) => {
// 如果启用了任意通知类型，则通知渠道必填
if (
(data.notificationConfig?.deployNotificationEnabled ||
(data.notificationConfig?.preApprovalNotificationEnabled ||
data.notificationConfig?.buildNotificationEnabled ||
data.notificationConfig?.buildFailureFileEnabled) &&
!data.notificationConfig?.notificationChannelId
@ -104,7 +103,7 @@ export const NotificationConfigDialog: React.FC<
const [submitting, setSubmitting] = useState(false);
const [loading, setLoading] = useState(false);
const [configId, setConfigId] = useState<number | null>(null);
const [currentConfig, setCurrentConfig] = useState<any>(null); // 存储完整的环境配置
const [currentConfig, setCurrentConfig] = useState<any>(null);
const [notificationChannels, setNotificationChannels] = useState<
NotificationChannel[]
>([]);
@ -119,12 +118,11 @@ export const NotificationConfigDialog: React.FC<
defaultValues: {
notificationConfig: {
notificationChannelId: undefined,
deployNotificationEnabled: false,
deployNotificationTemplateId: undefined,
preApprovalNotificationEnabled: false,
preApprovalNotificationTemplateId: undefined,
buildNotificationEnabled: false,
buildNotificationTemplateId: undefined,
buildFailureFileEnabled: false,
buildFailureNotificationTemplateId: undefined,
},
},
});
@ -171,22 +169,20 @@ export const NotificationConfigDialog: React.FC<
if (config) {
setConfigId(config.id);
setCurrentConfig(config); // 保存完整配置
setCurrentConfig(config);
form.reset({
notificationConfig: config.notificationConfig || {
notificationChannelId: undefined,
deployNotificationEnabled: false,
deployNotificationTemplateId: undefined,
preApprovalNotificationEnabled: false,
preApprovalNotificationTemplateId: undefined,
buildNotificationEnabled: false,
buildNotificationTemplateId: undefined,
buildFailureFileEnabled: false,
buildFailureNotificationTemplateId: undefined,
},
});
}
} catch (error: any) {
if (error.response?.status === 404) {
// 配置不存在
toast({
title: '提示',
description: '请先配置该环境的基本信息',
@ -205,7 +201,6 @@ export const NotificationConfigDialog: React.FC<
}
};
// 对话框打开时初始化
useEffect(() => {
if (open) {
loadNotificationChannels();
@ -213,7 +208,6 @@ export const NotificationConfigDialog: React.FC<
}
}, [open, teamId, environmentId]);
// 监听通知渠道变化，重新加载模板列表
const selectedChannelId = form.watch('notificationConfig.notificationChannelId');
useEffect(() => {
@ -226,9 +220,6 @@ export const NotificationConfigDialog: React.FC<
}, [selectedChannelId, notificationChannels, open]);
const handleSubmit = async (data: FormData) => {
console.log('表单提交数据:', data);
console.log('当前配置:', currentConfig);
if (!configId || !currentConfig) {
toast({
title: '错误',
@ -240,22 +231,19 @@ export const NotificationConfigDialog: React.FC<
setSubmitting(true);
try {
// 构建通知配置对象
let notificationConfig = undefined;
if (data.notificationConfig?.notificationChannelId) {
notificationConfig = {
id: data.notificationConfig.id,
notificationChannelId: data.notificationConfig.notificationChannelId,
deployNotificationEnabled: data.notificationConfig.deployNotificationEnabled ?? false,
deployNotificationTemplateId: data.notificationConfig.deployNotificationTemplateId ?? undefined,
preApprovalNotificationEnabled: data.notificationConfig.preApprovalNotificationEnabled ?? false,
preApprovalNotificationTemplateId: data.notificationConfig.preApprovalNotificationTemplateId ?? undefined,
buildNotificationEnabled: data.notificationConfig.buildNotificationEnabled ?? false,
buildNotificationTemplateId: data.notificationConfig.buildNotificationTemplateId ?? undefined,
buildFailureFileEnabled: data.notificationConfig.buildFailureFileEnabled ?? false,
buildFailureNotificationTemplateId: data.notificationConfig.buildFailureNotificationTemplateId ?? undefined,
};
}
// 构建完整的提交数据（保留原有配置，只更新通知部分）
const payload = {
teamId: currentConfig.teamId,
environmentId: currentConfig.environmentId,
@ -266,8 +254,6 @@ export const NotificationConfigDialog: React.FC<
notificationConfig,
};
console.log('最终提交的 payload:', payload);
await updateTeamEnvironmentConfig(configId, payload);
toast({
@ -308,7 +294,7 @@ export const NotificationConfigDialog: React.FC<
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)}>
<DialogBody className="space-y-4">
{/* 通知渠道选择 - 始终显示 */}
{/* 通知渠道选择 */}
<FormField
control={form.control}
name="notificationConfig.notificationChannelId"
@ -326,25 +312,16 @@ export const NotificationConfigDialog: React.FC<
<SelectTrigger
clearable
hasValue={!!field.value}
onClear={() => {
field.onChange(null);
}}
onClear={() => field.onChange(null)}
>
<SelectValue
placeholder={
loadingChannels
? '加载中...'
: '请选择通知渠道'
}
placeholder={loadingChannels ? '加载中...' : '请选择通知渠道'}
/>
</SelectTrigger>
</FormControl>
<SelectContent>
{notificationChannels.map((channel) => (
<SelectItem
key={channel.id}
value={channel.id.toString()}
>
<SelectItem key={channel.id} value={channel.id.toString()}>
{channel.name} ({channel.channelType})
</SelectItem>
))}
@ -358,65 +335,40 @@ export const NotificationConfigDialog: React.FC<
)}
/>
{/* 部署通知 */}
{/* 审批前提醒 */}
<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>
<FormLabel className="text-base">审批前提醒</FormLabel>
</div>
{/* 中间：开关 */}
<FormField
control={form.control}
name="notificationConfig.deployNotificationEnabled"
name="notificationConfig.preApprovalNotificationEnabled"
render={({ field }) => (
<FormItem className="mb-0">
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItem>
)}
/>
{/* 右侧：模板选择 */}
<FormField
control={form.control}
name="notificationConfig.deployNotificationTemplateId"
name="notificationConfig.preApprovalNotificationTemplateId"
render={({ field }) => (
<FormItem className="mb-0">
<FormControl>
<ClearableSelect
value={field.value?.toString()}
onValueChange={(value) =>
field.onChange(value ? Number(value) : null)
}
onValueChange={(value) => field.onChange(value ? Number(value) : null)}
disabled={loadingTemplates}
>
<SelectTrigger
clearable
hasValue={!!field.value}
onClear={() => {
field.onChange(null);
}}
>
<SelectValue
placeholder={
loadingTemplates
? '加载中...'
: '请选择通知模板（可选）'
}
/>
<SelectTrigger clearable hasValue={!!field.value} onClear={() => field.onChange(null)}>
<SelectValue placeholder={loadingTemplates ? '加载中...' : '请选择通知模板（可选）'} />
</SelectTrigger>
<SelectContent>
{notificationTemplates.map((template) => (
<SelectItem
key={template.id}
value={template.id.toString()}
>
<SelectItem key={template.id} value={template.id.toString()}>
{template.name}
</SelectItem>
))}
@ -428,43 +380,30 @@ export const NotificationConfigDialog: React.FC<
)}
/>
</div>
{/* 描述文字行 */}
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
<div className="text-sm text-muted-foreground">
部署状态变更时发送通知
</div>
<div className="text-sm text-muted-foreground">提交部署申请进入审批时发送通知</div>
<div></div>
<div className="text-sm text-muted-foreground">
部署通知模板
</div>
<div className="text-sm text-muted-foreground">审批前提醒模板</div>
</div>
</div>
{/* 构建通知 */}
<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
control={form.control}
name="notificationConfig.buildNotificationEnabled"
render={({ field }) => (
<FormItem className="mb-0">
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItem>
)}
/>
{/* 右侧：模板选择 */}
<FormField
control={form.control}
name="notificationConfig.buildNotificationTemplateId"
@ -473,32 +412,15 @@ export const NotificationConfigDialog: React.FC<
<FormControl>
<ClearableSelect
value={field.value?.toString()}
onValueChange={(value) =>
field.onChange(value ? Number(value) : null)
}
onValueChange={(value) => field.onChange(value ? Number(value) : null)}
disabled={loadingTemplates}
>
<SelectTrigger
clearable
hasValue={!!field.value}
onClear={() => {
field.onChange(null);
}}
>
<SelectValue
placeholder={
loadingTemplates
? '加载中...'
: '请选择通知模板（可选）'
}
/>
<SelectTrigger clearable hasValue={!!field.value} onClear={() => field.onChange(null)}>
<SelectValue placeholder={loadingTemplates ? '加载中...' : '请选择通知模板（可选）'} />
</SelectTrigger>
<SelectContent>
{notificationTemplates.map((template) => (
<SelectItem
key={template.id}
value={template.id.toString()}
>
<SelectItem key={template.id} value={template.id.toString()}>
{template.name}
</SelectItem>
))}
@ -510,114 +432,46 @@ export const NotificationConfigDialog: React.FC<
)}
/>
</div>
{/* 描述文字行 */}
<div className="grid grid-cols-[1fr_auto_1fr] gap-4">
<div className="text-sm text-muted-foreground">
构建状态变更时发送通知
</div>
<div className="text-sm text-muted-foreground">构建状态变更时发送通知</div>
<div></div>
<div className="text-sm text-muted-foreground">
构建通知模板
</div>
<div className="text-sm text-muted-foreground">构建通知模板</div>
</div>
</div>
{/* 失败日志 */}
<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
control={form.control}
name="notificationConfig.buildFailureFileEnabled"
render={({ field }) => (
<FormItem className="mb-0">
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItem>
)}
/>
{/* 右侧：模板选择 */}
<FormField
control={form.control}
name="notificationConfig.buildFailureNotificationTemplateId"
render={({ field }) => (
<FormItem className="mb-0">
<FormControl>
<ClearableSelect
value={field.value?.toString()}
onValueChange={(value) =>
field.onChange(value ? Number(value) : null)
}
disabled={loadingTemplates}
>
<SelectTrigger
clearable
hasValue={!!field.value}
onClear={() => {
field.onChange(null);
}}
>
<SelectValue
placeholder={
loadingTemplates
? '加载中...'
: '请选择通知模板（可选）'
}
/>
</SelectTrigger>
<SelectContent>
{notificationTemplates.map((template) => (
<SelectItem
key={template.id}
value={template.id.toString()}
>
{template.name}
</SelectItem>
))}
</SelectContent>
</ClearableSelect>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</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 className="grid grid-cols-[1fr_auto_1fr] gap-4">
<div className="text-sm text-muted-foreground">构建失败时是否发送日志文件</div>
<div></div>
<div></div>
</div>
</div>
</DialogBody>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={submitting}
>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
取消
</Button>
<Button type="submit" disabled={submitting}>
{submitting && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
{submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
保存
</Button>
</DialogFooter>

10
frontend/src/pages/Deploy/Team/List/types.ts
View File

@ -53,12 +53,11 @@ export interface NotificationConfig {
teamId?: number;
environmentId?: number;
notificationChannelId?: number;
deployNotificationEnabled?: boolean;
deployNotificationTemplateId?: number;
preApprovalNotificationEnabled?: boolean;
preApprovalNotificationTemplateId?: number;
buildNotificationEnabled?: boolean;
buildNotificationTemplateId?: number;
buildFailureFileEnabled?: boolean;
buildFailureNotificationTemplateId?: number;
notificationChannelName?: string; // 关联数据
channelType?: string; // 渠道类型：WEWORK, EMAIL, DINGTALK等
updateTime?: string; // 更新时间
@ -96,12 +95,11 @@ export interface TeamEnvironmentConfigRequest {
notificationConfig?: {
id?: number;
notificationChannelId?: number;
deployNotificationEnabled?: boolean;
deployNotificationTemplateId?: number;
preApprovalNotificationEnabled?: boolean;
preApprovalNotificationTemplateId?: number;
buildNotificationEnabled?: boolean;
buildNotificationTemplateId?: number;
buildFailureFileEnabled?: boolean;
buildFailureNotificationTemplateId?: number;
};
}

64
frontend/src/pages/System/Online/List/index.tsx
View File

@ -210,19 +210,19 @@ const OnlineUserList: React.FC = () => {
</CardHeader>
<CardContent>
<div className="rounded-md border">
<Table>
<Table minWidth="1400px">
<TableHeader>
<TableRow>
<TableHead className="w-[120px]">用户名</TableHead>
<TableHead className="w-[120px]">昵称</TableHead>
<TableHead className="w-[150px]">部门</TableHead>
<TableHead className="w-[180px]">登录时间</TableHead>
<TableHead className="w-[120px]">在线时长</TableHead>
<TableHead className="w-[180px]">最后活跃</TableHead>
<TableHead className="w-[140px]">IP地址</TableHead>
<TableHead className="w-[120px]">浏览器</TableHead>
<TableHead className="w-[120px]">操作系统</TableHead>
<TableHead className="w-[100px] text-right">操作</TableHead>
<TableHead width="100px">用户名</TableHead>
<TableHead width="100px">昵称</TableHead>
<TableHead width="120px">部门</TableHead>
<TableHead width="160px">登录时间</TableHead>
<TableHead width="100px">在线时长</TableHead>
<TableHead width="160px">最后活跃</TableHead>
<TableHead width="130px">IP地址</TableHead>
<TableHead width="110px">浏览器</TableHead>
<TableHead width="120px">操作系统</TableHead>
<TableHead width="120px" sticky>操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -235,26 +235,28 @@ const OnlineUserList: React.FC = () => {
) : data?.content && data.content.length > 0 ? (
data.content.map((user) => (
<TableRow key={user.userId}>
<TableCell className="font-medium">{user.username}</TableCell>
<TableCell>{user.nickname}</TableCell>
<TableCell>{user.departmentName || '-'}</TableCell>
<TableCell>{formatTime(user.loginTime)}</TableCell>
<TableCell>{formatDuration(user.onlineDuration)}</TableCell>
<TableCell>{formatTime(user.lastActiveTime)}</TableCell>
<TableCell>{user.ipAddress || '-'}</TableCell>
<TableCell>{user.browser || '-'}</TableCell>
<TableCell>{user.os || '-'}</TableCell>
<TableCell className="text-right">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => handleKickClick(user)}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<LogOut className="h-4 w-4 mr-1" />
强制下线
</Button>
<TableCell width="100px" className="font-medium">{user.username}</TableCell>
<TableCell width="100px">{user.nickname}</TableCell>
<TableCell width="120px">{user.departmentName || '-'}</TableCell>
<TableCell width="160px">{formatTime(user.loginTime)}</TableCell>
<TableCell width="100px">{formatDuration(user.onlineDuration)}</TableCell>
<TableCell width="160px">{formatTime(user.lastActiveTime)}</TableCell>
<TableCell width="130px">{user.ipAddress || '-'}</TableCell>
<TableCell width="110px">{user.browser || '-'}</TableCell>
<TableCell width="120px">{user.os || '-'}</TableCell>
<TableCell width="120px" sticky>
<div className="flex justify-end">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => handleKickClick(user)}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<LogOut className="h-4 w-4 mr-1" />
强制下线
</Button>
</div>
</TableCell>
</TableRow>
))