create-pardx-scaffold 0.1.0

package/template/apps/web/lib/upload/uploader.ts

@@ -0,0 +1,439 @@
+import {
+  getUploadTokenPrivate,
+  initMultipartUpload,
+  getChunkUploadToken,
+  completeUpload,
+  abortUpload,
+  type UploadTokenData,
+  type InitMultipartUploadData,
+  type CompleteUploadData,
+  type UploadMetadata,
+} from './api';
+import { UploadError, UploadErrorCode } from './errors';
+import { encryptParams } from '@repo/utils/encrypt';
+import { calculateSHA256, createFileChunks } from '@repo/utils/file';
+
+// 上传结果类型
+export type UploadResult =
+  | UploadTokenData
+  | InitMultipartUploadData
+  | CompleteUploadData;
+
+export interface UploadProgress {
+  loaded: number;
+  total: number;
+  percentage: number;
+  partNumber?: number; // 分片编号
+}
+
+export interface UploadCallbacks {
+  onStart?: (fileId: string, uploadId?: string) => void;
+  onCalculating?: (progress: number) => void; // SHA256 计算进度 (0-100)
+  onProgress?: (progress: UploadProgress) => void;
+  onComplete?: (result: UploadResult) => void;
+  onError?: (error: Error) => void;
+}
+
+export interface UploadParams {
+  file: File;
+  folderId: string;
+  spaceId: string;
+  callbacks?: UploadCallbacks;
+  metadata?: UploadMetadata; // 秒传后处理元数据
+}
+
+/**
+ * 上传文件到 S3
+ */
+async function uploadToS3(
+  url: string,
+  chunk: Blob | File,
+  partNumber?: number,
+  onProgress?: (progress: UploadProgress) => void,
+): Promise<{ ETag: string; PartNumber: number }> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    const progressHandler = (event: ProgressEvent) => {
+      if (event.lengthComputable && onProgress) {
+        // 确保进度值在 0-100 范围内
+        const percentage = Math.min(
+          100,
+          Math.max(0, Math.round((event.loaded / event.total) * 100)),
+        );
+        onProgress({
+          loaded: event.loaded,
+          total: event.total,
+          percentage,
+          partNumber,
+        });
+      }
+    };
+
+    const cleanup = () => {
+      xhr.upload.removeEventListener('progress', progressHandler);
+      xhr.removeEventListener('load', loadHandler);
+      xhr.removeEventListener('error', errorHandler);
+      xhr.removeEventListener('abort', abortHandler);
+    };
+
+    const loadHandler = () => {
+      cleanup();
+      if (xhr.status === 200) {
+        let etag = '';
+
+        // 尝试从响应头获取 ETag
+        // 注意：如果服务器没有设置 Access-Control-Expose-Headers: ETag，
+        // 浏览器会阻止访问 ETag 头，导致抛出错误
+        try {
+          const etagHeader = xhr.getResponseHeader('ETag');
+          if (etagHeader) {
+            etag = etagHeader.replace(/"/g, '');
+          }
+        } catch (error) {
+          // CORS 限制：浏览器阻止访问 ETag 头
+          // 这通常发生在服务器没有设置 Access-Control-Expose-Headers: ETag 时
+          console.warn('无法从响应头获取 ETag（CORS 限制）:', error);
+        }
+
+        // 如果响应头中没有 ETag，尝试从响应体中解析
+        if (!etag) {
+          try {
+            const responseText = xhr.responseText;
+            if (responseText) {
+              // 尝试解析 JSON 响应（如果服务器在响应体中返回 ETag）
+              const response = JSON.parse(responseText);
+              if (response.ETag || response.etag) {
+                etag = String(response.ETag || response.etag).replace(/"/g, '');
+              }
+            }
+          } catch {
+            // 响应体可能不是 JSON 或为空
+            // 忽略错误，继续处理
+          }
+        }
+
+        // 如果仍然没有 ETag
+        if (!etag) {
+          console.error('Failed to get ETag from response');
+          reject(new UploadError(UploadErrorCode.GET_ETAG_FAILED));
+          return;
+        }
+
+        resolve({
+          ETag: etag,
+          PartNumber: partNumber || 1,
+        });
+      } else {
+        reject(
+          new UploadError(UploadErrorCode.UPLOAD_STATUS_ERROR, undefined, {
+            status: xhr.status,
+          }),
+        );
+      }
+    };
+
+    const errorHandler = () => {
+      cleanup();
+      reject(new UploadError(UploadErrorCode.NETWORK_ERROR));
+    };
+
+    const abortHandler = () => {
+      cleanup();
+      reject(new UploadError(UploadErrorCode.UPLOAD_CANCELLED));
+    };
+
+    xhr.upload.addEventListener('progress', progressHandler);
+    xhr.addEventListener('load', loadHandler);
+    xhr.addEventListener('error', errorHandler);
+    xhr.addEventListener('abort', abortHandler);
+
+    xhr.open('PUT', url);
+    if (partNumber) {
+      xhr.setRequestHeader('PartNumber', partNumber.toString());
+    }
+    xhr.setRequestHeader(
+      'Content-Type',
+      chunk.type || 'application/octet-stream',
+    );
+    xhr.send(chunk);
+  });
+}
+
+/**
+ * 普通上传（文件 <= 8MB）
+ */
+async function uploadFullFile(
+  file: File,
+  filename: string,
+  fsize: number,
+  folderId: string,
+  spaceId: string,
+  sha256: string,
+  callbacks?: UploadCallbacks,
+  metadata?: UploadMetadata,
+): Promise<UploadResult> {
+  try {
+    // 获取上传 Token
+    const signature = encryptParams(filename, sha256);
+    const tokenResponse = await getUploadTokenPrivate({
+      filename,
+      signature,
+      fsize,
+      folderId,
+      spaceId,
+      metadata,
+    });
+
+    // 提取 fileId：优先从 fileSystem.id 获取（秒传情况），否则从 fileId 字段获取
+    const fileId = tokenResponse.fileSystem?.id || tokenResponse.fileId;
+
+    if (!fileId) {
+      throw new UploadError(UploadErrorCode.GET_FILE_ID_FAILED);
+    }
+
+    // 检查是否秒传（文件已存在）
+    if (tokenResponse.success && tokenResponse.fileSystem) {
+      // 文件已存在，直接返回完整响应
+      callbacks?.onStart?.(fileId);
+      callbacks?.onProgress?.({
+        loaded: fsize,
+        total: fsize,
+        percentage: 100,
+      });
+      callbacks?.onComplete?.(tokenResponse);
+      return tokenResponse;
+    }
+
+    // 文件不存在，需要上传
+    if (!tokenResponse.token || !tokenResponse.key) {
+      throw new UploadError(UploadErrorCode.GET_UPLOAD_TOKEN_FAILED);
+    }
+
+    callbacks?.onStart?.(fileId);
+
+    // 上传到 S3
+    await uploadToS3(tokenResponse.token, file, undefined, (progress) => {
+      callbacks?.onProgress?.(progress);
+    });
+
+    // 完成上传
+    const completeSignature = encryptParams(filename, sha256, fileId);
+    const completeResponse = await completeUpload({
+      signature: completeSignature,
+      filename,
+      fileId: fileId,
+      fsize,
+      spaceId,
+      key: tokenResponse.key,
+      metadata,
+    });
+
+    callbacks?.onComplete?.(completeResponse);
+    return completeResponse;
+  } catch (error) {
+    const uploadError =
+      error instanceof UploadError
+        ? error
+        : new UploadError(UploadErrorCode.UPLOAD_FAILED);
+    callbacks?.onError?.(uploadError);
+    throw uploadError;
+  }
+}
+
+/**
+ * 分片上传（文件 > 8MB）
+ */
+async function uploadChunkFile(
+  file: File,
+  filename: string,
+  fsize: number,
+  folderId: string,
+  spaceId: string,
+  sha256: string,
+  callbacks?: UploadCallbacks,
+  metadata?: UploadMetadata,
+): Promise<UploadResult> {
+  try {
+    // 初始化分片上传
+    const signature = encryptParams(filename, sha256);
+    const initResponse = await initMultipartUpload({
+      signature,
+      filename,
+      fsize,
+      spaceId,
+      folderId,
+      metadata,
+    });
+
+    // 提取 fileId：优先从 fileSystem.id 获取（秒传情况），否则从 fileId 字段获取
+    const fileId = initResponse.fileSystem?.id || initResponse.fileId;
+
+    if (!fileId) {
+      throw new UploadError(UploadErrorCode.GET_FILE_ID_FAILED);
+    }
+
+    // 检查是否秒传（文件已存在，没有 uploadId 表示秒传）
+    if (!initResponse.uploadId) {
+      callbacks?.onStart?.(fileId);
+      callbacks?.onProgress?.({
+        loaded: fsize,
+        total: fsize,
+        percentage: 100,
+      });
+      callbacks?.onComplete?.(initResponse);
+      return initResponse;
+    }
+
+    const uploadId = initResponse.uploadId;
+    callbacks?.onStart?.(fileId, uploadId);
+
+    // 创建分片
+    const chunks = createFileChunks(file);
+    const chunkProgress: number[] = new Array(chunks.length).fill(0);
+
+    // 上传所有分片（串行，避免进度计算问题）
+    const parts: { ETag: string; PartNumber: number }[] = [];
+
+    for (let i = 0; i < chunks.length; i++) {
+      const chunk = chunks[i];
+      if (!chunk) continue;
+      const partNumber = i + 1;
+
+      // 获取分片上传 Token
+      const chunkSignature = encryptParams(filename);
+      const chunkTokenResponse = await getChunkUploadToken({
+        signature: chunkSignature,
+        filename,
+        uploadId,
+        partNumber,
+        fsize,
+        spaceId,
+        folderId,
+        key: initResponse.key,
+      });
+
+      // 上传分片
+      const part = await uploadToS3(
+        chunkTokenResponse.token,
+        chunk,
+        partNumber,
+        (progress) => {
+          // 更新当前分片进度
+          chunkProgress[i] = progress.loaded;
+          // 计算总进度，确保在 0-99 范围内
+          const totalLoaded = chunkProgress.reduce((sum, p) => sum + p, 0);
+          const percentage = Math.min(
+            99,
+            Math.max(0, Math.round((totalLoaded / fsize) * 100)),
+          );
+
+          callbacks?.onProgress?.({
+            loaded: totalLoaded,
+            total: fsize,
+            percentage,
+            partNumber,
+          });
+        },
+      );
+
+      parts.push(part);
+    }
+
+    // 完成上传
+    const completeSignature = encryptParams(filename, sha256, fileId);
+    const completeResponse = await completeUpload({
+      signature: completeSignature,
+      filename,
+      fileId: fileId,
+      fsize,
+      spaceId,
+      uploadId,
+      parts,
+      key: initResponse.key,
+      metadata,
+    });
+
+    callbacks?.onComplete?.(completeResponse);
+    return completeResponse;
+  } catch (error) {
+    const uploadError =
+      error instanceof UploadError
+        ? error
+        : new UploadError(UploadErrorCode.UPLOAD_FAILED);
+    callbacks?.onError?.(uploadError);
+    throw uploadError;
+  }
+}
+
+/**
+ * 自动上传文件（根据文件大小选择普通上传或分片上传）
+ */
+export async function uploadFile(params: UploadParams): Promise<UploadResult> {
+  const { file, folderId, spaceId, callbacks, metadata } = params;
+  const filename = file.name;
+  const fsize = file.size;
+  const CHUNK_SIZE_THRESHOLD = 8 * 1024 * 1024; // 8MB
+
+  try {
+    // 计算 SHA256
+    callbacks?.onCalculating?.(0);
+
+    const sha256 = await calculateSHA256(file, (progress) => {
+      // calculateSHA256 已经返回 0-100 的进度值，无需再乘以 100
+      callbacks?.onCalculating?.(progress);
+    });
+
+    callbacks?.onCalculating?.(100);
+
+    // 根据文件大小选择上传方式
+    if (fsize > CHUNK_SIZE_THRESHOLD) {
+      return await uploadChunkFile(
+        file,
+        filename,
+        fsize,
+        folderId,
+        spaceId,
+        sha256,
+        callbacks,
+        metadata,
+      );
+    } else {
+      return await uploadFullFile(
+        file,
+        filename,
+        fsize,
+        folderId,
+        spaceId,
+        sha256,
+        callbacks,
+        metadata,
+      );
+    }
+  } catch (error) {
+    const uploadError =
+      error instanceof UploadError
+        ? error
+        : new UploadError(UploadErrorCode.UPLOAD_FAILED);
+    callbacks?.onError?.(uploadError);
+    throw uploadError;
+  }
+}
+
+/**
+ * 取消上传
+ */
+export async function cancelUpload(
+  filename: string,
+  fileId: string,
+  uploadId: string,
+  spaceId: string,
+): Promise<void> {
+  const signature = encryptParams(filename, '', fileId);
+  await abortUpload({
+    signature,
+    uploadId,
+    spaceId,
+    fileId,
+  });
+}

package/template/apps/web/lib/utils/reconnect.ts

@@ -0,0 +1,223 @@
+/**
+ * Reconnection Strategy Configuration
+ */
+export interface ReconnectConfig {
+  /** Maximum number of retry attempts (default: 5) */
+  maxRetries?: number;
+  /** Initial delay in milliseconds (default: 1000) */
+  initialDelay?: number;
+  /** Maximum delay in milliseconds (default: 30000) */
+  maxDelay?: number;
+  /** Exponential backoff multiplier (default: 2) */
+  backoffMultiplier?: number;
+  /** Add random jitter to delay (default: true) */
+  jitter?: boolean;
+  /** Callback when attempting reconnect */
+  onReconnecting?: (attempt: number, delay: number) => void;
+  /** Callback when reconnection succeeds */
+  onReconnected?: () => void;
+  /** Callback when all retries exhausted */
+  onMaxRetriesReached?: () => void;
+}
+
+/**
+ * Reconnection state
+ */
+export interface ReconnectState {
+  /** Current retry attempt */
+  attempt: number;
+  /** Whether currently reconnecting */
+  isReconnecting: boolean;
+  /** Next retry delay in ms */
+  nextDelay: number;
+  /** Whether max retries reached */
+  maxRetriesReached: boolean;
+}
+
+/**
+ * Reconnection Manager
+ *
+ * Handles automatic reconnection with exponential backoff
+ *
+ * @example
+ * ```typescript
+ * const reconnect = new ReconnectManager({
+ *   maxRetries: 5,
+ *   onReconnecting: (attempt, delay) => {
+ *     console.log(`Reconnecting in ${delay}ms (attempt ${attempt})`);
+ *   },
+ * });
+ *
+ * // On disconnect
+ * reconnect.scheduleReconnect(async () => {
+ *   await connectToServer();
+ * });
+ *
+ * // On successful connection
+ * reconnect.reset();
+ * ```
+ */
+export class ReconnectManager {
+  private config: Required<ReconnectConfig>;
+  private attempt = 0;
+  private timeoutId: ReturnType<typeof setTimeout> | null = null;
+  private isReconnecting = false;
+
+  constructor(config: ReconnectConfig = {}) {
+    this.config = {
+      maxRetries: config.maxRetries ?? 5,
+      initialDelay: config.initialDelay ?? 1000,
+      maxDelay: config.maxDelay ?? 30000,
+      backoffMultiplier: config.backoffMultiplier ?? 2,
+      jitter: config.jitter ?? true,
+      onReconnecting: config.onReconnecting ?? (() => {}),
+      onReconnected: config.onReconnected ?? (() => {}),
+      onMaxRetriesReached: config.onMaxRetriesReached ?? (() => {}),
+    };
+  }
+
+  /**
+   * Calculate delay for current attempt
+   */
+  private calculateDelay(): number {
+    const { initialDelay, maxDelay, backoffMultiplier, jitter } = this.config;
+
+    let delay = initialDelay * Math.pow(backoffMultiplier, this.attempt);
+    delay = Math.min(delay, maxDelay);
+
+    if (jitter) {
+      // Add random jitter (±25%)
+      const jitterAmount = delay * 0.25;
+      delay += (Math.random() - 0.5) * 2 * jitterAmount;
+    }
+
+    return Math.round(delay);
+  }
+
+  /**
+   * Get current state
+   */
+  getState(): ReconnectState {
+    return {
+      attempt: this.attempt,
+      isReconnecting: this.isReconnecting,
+      nextDelay: this.calculateDelay(),
+      maxRetriesReached: this.attempt >= this.config.maxRetries,
+    };
+  }
+
+  /**
+   * Schedule a reconnection attempt
+   */
+  async scheduleReconnect(reconnectFn: () => Promise<void>): Promise<boolean> {
+    if (this.isReconnecting) {
+      return false;
+    }
+
+    if (this.attempt >= this.config.maxRetries) {
+      this.config.onMaxRetriesReached();
+      return false;
+    }
+
+    this.isReconnecting = true;
+    const delay = this.calculateDelay();
+    this.attempt++;
+
+    this.config.onReconnecting(this.attempt, delay);
+
+    return new Promise((resolve) => {
+      this.timeoutId = setTimeout(async () => {
+        try {
+          await reconnectFn();
+          this.config.onReconnected();
+          this.reset();
+          resolve(true);
+        } catch {
+          this.isReconnecting = false;
+          // Try again
+          const success = await this.scheduleReconnect(reconnectFn);
+          resolve(success);
+        }
+      }, delay);
+    });
+  }
+
+  /**
+   * Cancel pending reconnection
+   */
+  cancel(): void {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    this.isReconnecting = false;
+  }
+
+  /**
+   * Reset reconnection state (call on successful connection)
+   */
+  reset(): void {
+    this.cancel();
+    this.attempt = 0;
+  }
+}
+
+/**
+ * Online/Offline detection hook utilities
+ */
+export function isOnline(): boolean {
+  return typeof navigator !== 'undefined' ? navigator.onLine : true;
+}
+
+/**
+ * Create online status listener
+ */
+export function createOnlineListener(
+  onOnline: () => void,
+  onOffline: () => void,
+): () => void {
+  if (typeof window === 'undefined') {
+    return () => {};
+  }
+
+  window.addEventListener('online', onOnline);
+  window.addEventListener('offline', onOffline);
+
+  return () => {
+    window.removeEventListener('online', onOnline);
+    window.removeEventListener('offline', onOffline);
+  };
+}
+
+/**
+ * Retry a function with exponential backoff
+ */
+export async function retryWithBackoff<T>(
+  fn: () => Promise<T>,
+  config: ReconnectConfig = {},
+): Promise<T> {
+  const manager = new ReconnectManager(config);
+
+  const attempt = async (): Promise<T> => {
+    try {
+      return await fn();
+    } catch (error) {
+      const state = manager.getState();
+      if (state.maxRetriesReached) {
+        throw error;
+      }
+
+      return new Promise((resolve, reject) => {
+        manager.scheduleReconnect(async () => {
+          try {
+            resolve(await fn());
+          } catch (retryError) {
+            reject(retryError);
+          }
+        });
+      });
+    }
+  };
+
+  return attempt();
+}