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 18:47:19 +08:00
parent cbe701a5af
commit e09d8d4be2
2 changed files with 53 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/Dashboard/hooks/useDeploymentData.ts
View File

@ -22,8 +22,10 @@ export function useDeploymentData(options: UseDeploymentDataOptions = {}) {
const [currentEnvId, setCurrentEnvId] = useState<number | null>(null);
const [deploying, setDeploying] = useState<Set<number>>(new Set());
const [isInitialLoad, setIsInitialLoad] = useState(true);
const [recentlyCompleted, setRecentlyCompleted] = useState(false); // 刚完成部署，保持较短轮询间隔
const intervalRef = useRef<NodeJS.Timeout | null>(null);
const recentlyCompletedTimerRef = useRef<NodeJS.Timeout | null>(null);
const optionsRef = useRef(options);
const toastRef = useRef(toast);
@ -110,6 +112,23 @@ export function useDeploymentData(options: UseDeploymentDataOptions = {}) {
});
});
// 部署完成后：立即刷新 + 保持较短轮询间隔一段时间
if (hasChanges && newDeploying.size === 0) {
// 立即刷新一次
setTimeout(() => {
loadData(false);
}, 1000);
// 设置"刚完成部署"状态，保持10秒轮询间隔，30秒后恢复正常
setRecentlyCompleted(true);
if (recentlyCompletedTimerRef.current) {
clearTimeout(recentlyCompletedTimerRef.current);
}
recentlyCompletedTimerRef.current = setTimeout(() => {
setRecentlyCompleted(false);
}, 30000);
}
return hasChanges ? newDeploying : prevDeploying;
});
}
@ -146,7 +165,14 @@ export function useDeploymentData(options: UseDeploymentDataOptions = {}) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// 定时刷新数据（智能轮询） - 简化版
// 计算轮询间隔：部署中5秒，刚完成10秒，空闲30秒
const getPollingInterval = useCallback(() => {
if (deploying.size > 0) return 5000;
if (recentlyCompleted) return 10000;
return 30000;
}, [deploying.size, recentlyCompleted]);
// 定时刷新数据（智能轮询）
useEffect(() => {
// 初始加载时不启动轮询
if (isInitialLoad) return;
@ -169,8 +195,7 @@ export function useDeploymentData(options: UseDeploymentDataOptions = {}) {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
// 智能间隔：有部署时5秒，无部署时30秒
const interval = deploying.size > 0 ? 5000 : 30000;
const interval = getPollingInterval();
intervalRef.current = setInterval(() => {
loadData(false);
}, interval);
@ -178,7 +203,7 @@ export function useDeploymentData(options: UseDeploymentDataOptions = {}) {
};
// 启动轮询 - 智能间隔
const interval = deploying.size > 0 ? 5000 : 30000;
const interval = getPollingInterval();
intervalRef.current = setInterval(() => {
loadData(false);
}, interval);
@ -192,7 +217,16 @@ export function useDeploymentData(options: UseDeploymentDataOptions = {}) {
}
document.removeEventListener('visibilitychange', handleVisibilityChange);
};
}, [isInitialLoad, deploying.size, loadData]);
}, [isInitialLoad, deploying.size, recentlyCompleted, loadData, getPollingInterval]);
// 清理 recentlyCompletedTimer
useEffect(() => {
return () => {
if (recentlyCompletedTimerRef.current) {
clearTimeout(recentlyCompletedTimerRef.current);
}
};
}, []);
// 切换团队
const handleTeamChange = useCallback((teamId: string) => {

28
frontend/src/pages/Workflow/Definition/List/index.tsx
View File

@ -414,13 +414,13 @@ const WorkflowDefinitionList: React.FC = () => {
<Table minWidth="1000px">
<TableHeader>
<TableRow>
<TableHead width="180px">流程名称</TableHead>
<TableHead width="140px">流程标识</TableHead>
<TableHead width="100px">分类</TableHead>
<TableHead width="140px">启动表单</TableHead>
<TableHead width="70px">版本</TableHead>
<TableHead width="100px">状态</TableHead>
<TableHead width="150px">创建时间</TableHead>
<TableHead minWidth="180px">流程名称</TableHead>
<TableHead minWidth="160px">流程标识</TableHead>
<TableHead minWidth="100px">分类</TableHead>
<TableHead minWidth="140px">启动表单</TableHead>
<TableHead minWidth="70px">版本</TableHead>
<TableHead minWidth="100px">状态</TableHead>
<TableHead minWidth="160px">创建时间</TableHead>
<TableHead width="180px" sticky>操作</TableHead>
</TableRow>
</TableHeader>
@ -441,20 +441,20 @@ const WorkflowDefinitionList: React.FC = () => {
const categoryInfo = record.category || categories.find(c => c.id === record.categoryId);
return (
<TableRow key={record.id} className="hover:bg-muted/50">
<TableCell width="180px" className="font-medium">{record.name}</TableCell>
<TableCell width="140px">
<TableCell minWidth="180px" className="font-medium whitespace-nowrap">{record.name}</TableCell>
<TableCell minWidth="160px" className="whitespace-nowrap">
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
{record.key}
</code>
</TableCell>
<TableCell width="100px">
<TableCell minWidth="100px" className="whitespace-nowrap">
{categoryInfo ? (
<Badge variant="outline">{categoryInfo.name}</Badge>
) : (
<Badge variant="outline">未分类</Badge>
)}
</TableCell>
<TableCell width="140px">
<TableCell minWidth="140px" className="whitespace-nowrap">
{record.formDefinitionName ? (
<Badge variant="secondary" className="font-normal">
{record.formDefinitionName}
@ -463,11 +463,11 @@ const WorkflowDefinitionList: React.FC = () => {
<span className="text-xs text-muted-foreground">无</span>
)}
</TableCell>
<TableCell width="70px">
<TableCell minWidth="70px" className="whitespace-nowrap">
<span className="font-mono text-sm">{record.flowVersion || 1}</span>
</TableCell>
<TableCell width="100px">{getStatusBadge(record.status || 'DRAFT')}</TableCell>
<TableCell width="150px">
<TableCell minWidth="100px" className="whitespace-nowrap">{getStatusBadge(record.status || 'DRAFT')}</TableCell>
<TableCell minWidth="160px" className="whitespace-nowrap">
<span className="text-xs text-muted-foreground">
{record.createTime ? new Date(record.createTime).toLocaleString('zh-CN', {
year: 'numeric',