diff --git a/web-fe/.umirc.ts b/web-fe/.umirc.ts index f6a705b..daf1c96 100644 --- a/web-fe/.umirc.ts +++ b/web-fe/.umirc.ts @@ -49,7 +49,7 @@ export default defineConfig({ // changeOrigin: true, }, '/api/files': { - target: 'http://10.100.51.85:8112', + target: 'http://10.100.51.85:8113', }, }, }); diff --git a/web-fe/src/pages/components/Layout/index.tsx b/web-fe/src/pages/components/Layout/index.tsx index 0d3ec8f..22d8291 100644 --- a/web-fe/src/pages/components/Layout/index.tsx +++ b/web-fe/src/pages/components/Layout/index.tsx @@ -80,60 +80,60 @@ const MainLayout: React.FC = () => { return ( - - -
{!collapsed && VDI管理平台}
- + - }> - 用户 - - }> - 终端 - - }> - 镜像列表 - - }> - 我的 - - -
- - -
-
- - {!collapsed && Nex管理平台} + - - + }> + 终端 + + }> + 用户 + + }> + 镜像列表 + + }> + 我的 + + + + + +
+
+ + + + +
-
); }; diff --git a/web-fe/src/pages/images/components/modalShow/modalShow.tsx b/web-fe/src/pages/images/components/modalShow/modalShow.tsx index 3818805..0372e91 100644 --- a/web-fe/src/pages/images/components/modalShow/modalShow.tsx +++ b/web-fe/src/pages/images/components/modalShow/modalShow.tsx @@ -76,37 +76,25 @@ const ImportModal: React.FC = ({ // 上传镜像时间相关 const [elapsedTime, setElapsedTime] = useState(0); // 上传时间 const timerRef = useRef(null); - - // const [uploadCompleted, _setUploadCompleted] = useState(false); - // const uploadCompletedRef = useRef(false); - - // const setUploadCompleted = (value: boolean) => { - // uploadCompletedRef.current = value; - // _setUploadCompleted(value); - // }; + // 上传完成状态 + const uploadCompletedRef = useRef(false); + // 手动取消状态 + const isManualCancel = useRef(false); // 是否手动取消上传 // 处理页面刷新/关闭 - // useEffect(() => { - // const handleBeforeUnload = (e: BeforeUnloadEvent) => { - // if (isUploading && !uploadCompletedRef.current) { - // e.preventDefault(); - // e.returnValue = '镜像正在上传中,确定要离开吗?'; + useEffect(() => { + const handleBeforeUnload = (e: BeforeUnloadEvent) => { + if (isUploading && !uploadCompletedRef.current) { + e.preventDefault(); + e.returnValue = '镜像正在上传中,确定要离开吗?'; + return e.returnValue; + + } + }; - // // 使用 sendBeacon 发送取消请求 - // const params = new URLSearchParams(); - // params.append('file_id', fileId.current); - // const blob = new Blob([params.toString()], { - // type: 'application/x-www-form-urlencoded', - // }); - // navigator.sendBeacon('/api/cancel-upload', blob); - - // return e.returnValue; - // } - // }; - - // window.addEventListener('beforeunload', handleBeforeUnload); - // return () => window.removeEventListener('beforeunload', handleBeforeUnload); - // }, [isUploading]); + window.addEventListener('beforeunload', handleBeforeUnload); + return () => window.removeEventListener('beforeunload', handleBeforeUnload); + }, [isUploading]); // 计时器清理(仅组件卸载时执行) useEffect(() => { @@ -117,30 +105,14 @@ const ImportModal: React.FC = ({ }; }, []); - // // 上传取消逻辑(依赖 isUploading 和 uploadCompletedRef) - // useEffect(() => { - // return () => { - // if (isUploading && !uploadCompletedRef.current && fileId.current) { - // const params = new URLSearchParams(); - // params.append('file_id', fileId.current); - // cancelUploadImagesAPI(params).then((res) => { - // if (res.code === CODE) { - // message.success('上传已取消'); - // } else { - // message.error('取消上传失败'); - // } - // }); - // } - // }; - // }, [isUploading]); // 保留原有依赖 - // 添加重置状态函数 const resetState = () => { - // setUploadCompleted(false); // 重置上传完成状态 setUploadProgress(0); setIsUploading(false); setUploadStatus(READY); setUploadMessage(''); + uploadCompletedRef.current = false; // 重置上传完成状态 + isManualCancel.current = false; // 重置手动取消状态 completedChunks.current = 0; totalChunks.current = 0; fileId.current = ''; @@ -162,13 +134,6 @@ const ImportModal: React.FC = ({ } }; - // 当弹窗关闭时重置状态 - useEffect(() => { - if (!visible) { - resetState(); - } - }, [visible]); - // 4. 上传单个分片 const uploadChunk = async ( chunk: Blob, @@ -206,8 +171,9 @@ const ImportModal: React.FC = ({ // 根据后端返回的状态进行判断 if (response.success) { if (response.status === 'completed') { + uploadCompletedRef.current = true; // 设置上传完成状态 + isManualCancel.current = false; // 重置手动取消状态 // 文件上传完成,设置进度为100% - // setUploadCompleted(true); // 标记上传完成 setUploadProgress(100); // 这里已经正确设置了100% setIsUploading(false); setUploadStatus(SUCCESS); @@ -297,8 +263,11 @@ const ImportModal: React.FC = ({ hasError = true; // 设置错误标记 setIsUploading(false); setUploadStatus(ERROR); - setUploadMessage(result.message || '文件上传失败,请重试'); - message.error(result.message ||'文件上传失败'); + // 只有当不是用户取消时才显示错误消息 + if (!isManualCancel.current) { + setUploadMessage(result.message || '文件上传失败'); + message.error(result.message || '文件上传失败'); + } // 中止其他正在进行的上传 if (abortController.current) { @@ -326,6 +295,8 @@ const ImportModal: React.FC = ({ // 2. 开始上传 const startUpload = async (file: File) => { try { + isManualCancel.current=false; + uploadCompletedRef.current = false; setIsUploading(true); setUploadStatus(UPLOADING); setUploadMessage('正在准备上传...'); @@ -421,12 +392,17 @@ const ImportModal: React.FC = ({ // 取消上传 const cancelUpload = async () => { - // 先更新 ref 再更新 state - // uploadCompletedRef.current = true; - // _setUploadCompleted(true); - if (abortController.current) { - abortController.current.abort(); - abortController.current = null; + // 1. 立即标记状态 + isManualCancel.current = true; + uploadCompletedRef.current = true; // 标记完成(阻止 beforeunload) + + // 2. 清空上传队列(阻止新请求) + uploadQueue.current = []; + // 3. 中止所有进行中的请求 + const oldController = abortController.current; + abortController.current = new AbortController(); // 新建控制器 + if (oldController) { + oldController.abort(); // 中止旧请求 } // 如果有正在上传的文件,调用后端取消上传API if (fileId.current) { @@ -458,11 +434,10 @@ const ImportModal: React.FC = ({ -
1. 文件上传后需要组装,需要时间,请耐心等待。
-
- 2. 文件上传中请勿刷新或者离开页面,否则会导致文件上传失败。 -
+
+
1. 上传过程中刷新或离开将导致上传中断。
+
2. 大文件上传可能需要较长时间,建议保持网络稳定。
+
3. 最后阶段需要校验文件完整性,请耐心等待。
} type="warning" @@ -530,31 +505,25 @@ const ImportModal: React.FC = ({ ); + const handleCancel = () => { + if (isUploading) { + cancelUpload().finally(() => { + resetState(); // 确保取消完成后再重置 + onCancel(); + }); + } else { + resetState(); + onCancel(); + } + }; + return ( { - if (isUploading) { - cancelUpload(); - } else { - // 如果不是上传状态,直接重置状态 - resetState(); - } - onCancel(); - }} + onCancel={handleCancel} footer={[ - , ]} diff --git a/web-fe/src/pages/images/index.tsx b/web-fe/src/pages/images/index.tsx index e8b59dd..8555ab3 100644 --- a/web-fe/src/pages/images/index.tsx +++ b/web-fe/src/pages/images/index.tsx @@ -195,7 +195,7 @@ const ImageList: React.FC = () => { key: 'bt_path', title: 'BT路径', dataIndex: 'bt_path', - width: 250, + width: 180, defaultVisible: true, ellipsis: true, render: (text: string) => text ? {text}:'--' @@ -224,7 +224,7 @@ const ImageList: React.FC = () => { key: 'image_status', title: '镜像状态', dataIndex: 'image_status', - width: 80, + width: 90, render: (text: number) => (text ? getStatusTag(text) : '--'), defaultVisible: true, }, @@ -232,7 +232,7 @@ const ImageList: React.FC = () => { key: 'create_time', title: '创建时间', dataIndex: 'create_time', - width: 180, + width: 160, render: (text: string) => text ? ( @@ -247,7 +247,7 @@ const ImageList: React.FC = () => { { key: 'action', title: '操作', - width: 100, + width: 90, fixed: 'right' as 'right', render: (_: any, record: IMAGES.ImageItem) => ( diff --git a/web-fe/src/pages/login/index.tsx b/web-fe/src/pages/login/index.tsx index 8d03f97..4af190c 100644 --- a/web-fe/src/pages/login/index.tsx +++ b/web-fe/src/pages/login/index.tsx @@ -42,7 +42,7 @@ const LoginPage: React.FC = () => {

紫光汇智

-
VDI 虚拟桌面管理平台
+
Nex管理平台

专业的虚拟桌面基础设施解决方案

提供安全、高效、灵活的桌面云服务

@@ -69,7 +69,7 @@ const LoginPage: React.FC = () => {

系统登录

-

欢迎使用VDI管理平台

+

欢迎使用Nex管理平台

{
- +

演示账号:admin / 123456

diff --git a/web-fe/src/services/images.ts b/web-fe/src/services/images.ts index 5fdcbdc..eb8ca78 100644 --- a/web-fe/src/services/images.ts +++ b/web-fe/src/services/images.ts @@ -6,7 +6,7 @@ const BASE_URL = '/api/nex/v1'; // 查询镜像列表 export async function getImagesList(params:any) { // return request(`${BASE_URL}/queryimagesList`, { - return request(`${BASE_URL}/image/select/page`, { + return request(`${BASE_URL}/image/select/page`, { method: 'POST', data: params, });