[新增] 界面优化

openflare_server/web/features/pages/api/pages.ts

@@ -1,4 +1,5 @@
-import { apiRequest } from '@/lib/api/client';
+import { apiRequest, getApiUrl, ApiError } from '@/lib/api/client';
+import type { ApiEnvelope } from '@/types/api';
 
 import type {
   PagesDeployment,
@@ -42,13 +43,58 @@ export function uploadPagesDeployment(
   projectId: number,
   file: File,
   entryFile = 'index.html',
+  onProgress?: (percent: number) => void,
 ) {
-  const formData = new FormData();
-  formData.append('package', file);
-  formData.append('entry_file', entryFile);
-  return apiRequest<PagesDeployment>(`/pages/${projectId}/deployments/upload`, {
-    method: 'POST',
-    body: formData,
+  if (!onProgress) {
+    const formData = new FormData();
+    formData.append('package', file);
+    formData.append('entry_file', entryFile);
+    return apiRequest<PagesDeployment>(`/pages/${projectId}/deployments/upload`, {
+      method: 'POST',
+      body: formData,
+    });
+  }
+
+  return new Promise<PagesDeployment>((resolve, reject) => {
+    const formData = new FormData();
+    formData.append('package', file);
+    formData.append('entry_file', entryFile);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', getApiUrl(`/pages/${projectId}/deployments/upload`));
+    xhr.withCredentials = true;
+
+    xhr.upload.addEventListener('progress', (event) => {
+      if (event.lengthComputable) {
+        const percent = Math.round((event.loaded / event.total) * 100);
+        onProgress(percent);
+      }
+    });
+
+    xhr.onload = () => {
+      let payload: ApiEnvelope<PagesDeployment> | null = null;
+      try {
+        payload = JSON.parse(xhr.responseText) as ApiEnvelope<PagesDeployment>;
+      } catch {
+        payload = null;
+      }
+
+      if (xhr.status >= 200 && xhr.status < 300) {
+        if (payload && payload.success) {
+          resolve(payload.data);
+        } else {
+          reject(new ApiError(payload?.message || '请求失败', xhr.status));
+        }
+      } else {
+        reject(new ApiError(payload?.message || `请求失败（${xhr.status}）`, xhr.status));
+      }
+    };
+
+    xhr.onerror = () => {
+      reject(new ApiError('网络请求失败', 0));
+    };
+
+    xhr.send(formData);
   });
 }