openxiangda-cli 2.0.0-alpha.85 → 2.0.0-alpha.89

package/template/apps/web/src/platform-client.ts

@@ -4,8 +4,12 @@ import {
   type DataFilePreview,
   type DataFileRef,
   type DataFileUploadPlan,
+  type DataFieldSourcePage,
+  type DataFieldSourceQuery,
+  type DataExportRequest,
   type DataPage,
   type DataQuery,
+  type DataWhere,
   type DataRecord,
   type DataResourceSurface,
   type DataTransactionOperation,
@@ -13,10 +17,22 @@ import {
   type DataTransactionResult,
   type DirectoryEntryPage,
   type DirectoryResolveRequest,
-  type CurrentUser,
+  type RoleSessionContext,
+  type RoleSubjectChoice,
+  type RoleSubjectChoicePage,
+  type ResourceReferenceValue,
 } from 'openxiangda-contracts/browser';
-import { applicationCode, runtimeMount } from './runtime-meta';
 import { useSyncExternalStore } from 'react';
+import {
+  buildResourceWhere,
+  type GenericResourceQuery,
+} from './components/platform-fields/resource-query';
+export type { GenericResourceQuery } from './components/platform-fields/resource-query';
+import {
+  applicationApiPath,
+  applicationCode,
+  runtimeMount,
+} from './runtime-meta';
 
 interface PlatformEnvelope<T> {
   code: number | string;
@@ -53,14 +69,18 @@ export function useGlobalRequestLoading() {
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
   beginGlobalRequest();
   try {
+    const headers = new Headers(init?.headers);
+    if (!headers.has('accept')) headers.set('accept', 'application/json');
+    if (init?.body && !headers.has('content-type')) {
+      headers.set('content-type', 'application/json');
+    }
+    if (activeRoleSessionId && roleSessionBoundPath(path)) {
+      headers.set('x-openxiangda-role-session-id', activeRoleSessionId);
+    }
     const response = await fetch(path, {
       credentials: 'include',
       ...init,
-      headers: {
-        accept: 'application/json',
-        ...(init?.body ? { 'content-type': 'application/json' } : {}),
-        ...init?.headers,
-      },
+      headers,
     });
     const payload = (await response.json().catch(() => null)) as PlatformEnvelope<T> | T | null;
     const envelope = payload && typeof payload === 'object' && 'code' in payload ? (payload as PlatformEnvelope<T>) : null;
@@ -81,18 +101,74 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
   }
 }
 
+async function requestBlob(path: string, init?: RequestInit) {
+  beginGlobalRequest();
+  try {
+    const headers = new Headers(init?.headers);
+    headers.set('accept', 'text/csv');
+    if (init?.body && !headers.has('content-type')) {
+      headers.set('content-type', 'application/json');
+    }
+    if (activeRoleSessionId && roleSessionBoundPath(path)) {
+      headers.set('x-openxiangda-role-session-id', activeRoleSessionId);
+    }
+    const response = await fetch(path, {
+      credentials: 'include',
+      ...init,
+      headers,
+    });
+    if (!response.ok) {
+      const payload = (await response.json().catch(() => null)) as PlatformEnvelope<unknown> | null;
+      const requestId = payload?.requestId ? ` (requestId: ${payload.requestId})` : '';
+      throw Object.assign(
+        new Error(`${payload?.errorCode || `HTTP_${response.status}`}: ${payload?.message || '平台导出失败'}${requestId}`),
+        {
+          code: payload?.errorCode || `HTTP_${response.status}`,
+          status: response.status,
+          data: payload?.data ?? null,
+        }
+      );
+    }
+    const disposition = response.headers.get('content-disposition') || '';
+    const encodedName = /filename\*=UTF-8''([^;]+)/i.exec(disposition)?.[1];
+    return {
+      blob: await response.blob(),
+      fileName: encodedName ? decodeURIComponent(encodedName) : undefined,
+      rowLimit: Number(response.headers.get('x-openxiangda-export-row-limit') || 10_000),
+    };
+  } finally {
+    endGlobalRequest();
+  }
+}
+
+function roleSessionBoundPath(path: string) {
+  if (path.startsWith(applicationServiceBase())) return true;
+  const mount = runtimeMount();
+  return Boolean(
+    mount &&
+      path.startsWith(
+        `/service/openxiangda-app-api/v2/${encodeURIComponent(mount.appCode)}/${encodeURIComponent(mount.environmentKey)}/`
+      )
+  );
+}
+
+export async function requestApplicationApi<T>(
+  path: string,
+  init?: RequestInit
+) {
+  return await request<T>(applicationApiPath(path), init);
+}
+
 export interface RuntimeIdentity {
   userId: string;
   roleCodes: string[];
   capabilityCodes: string[];
   isAppSuperAdmin: boolean;
-  authorization?: {
-    mode: 'union' | 'focused_role';
-    focusedRoleCode: string | null;
-    availableRoles: Array<{ code: string; name: string }>;
-    hasAppSuperAdminGrant: boolean;
-    contextRevision: number;
-  };
+  identityScope: string;
+  subjectProfile: RoleSessionContext['subjectProfile'] | null;
+  currentRoleSubject: RoleSubjectChoice | null;
+  roleSubjectPage: RoleSubjectChoicePage | null;
+  roleSwitchingAvailable: boolean;
   environment: {
     id: string;
     key: 'preproduction' | 'production';
@@ -109,85 +185,206 @@ interface ConnectedCurrent {
   principal: Pick<RuntimeIdentity, 'userId' | 'roleCodes' | 'capabilityCodes' | 'isAppSuperAdmin'>;
 }
 
-type DeployedCurrent = CurrentUser;
+export interface RuntimeAuthorization {
+  state: RoleSessionContext['state'];
+  identity: RuntimeIdentity | null;
+  roleContext: RoleSessionContext | null;
+}
 
 let activeIdentity: RuntimeIdentity | undefined;
+let activeRoleSessionId: string | undefined;
+
+function applicationServiceBase() {
+  return `/service/openxiangda-api/v2/applications/${applicationCode()}`;
+}
+
+function validateRoleContext(context: RoleSessionContext): RuntimeAuthorization {
+  const mount = runtimeMount();
+  if (
+    !mount ||
+    context.schemaVersion !== SCHEMA_VERSIONS.roleSessionContext ||
+    context.environment.key !== mount.environmentKey
+  ) {
+    throw new Error('OPENXIANGDA_ROLE_SESSION_CONTEXT_INVALID');
+  }
+  if (context.state !== 'active') {
+    if (context.roleSession || context.principal || context.currentRoleSubject) {
+      throw new Error('OPENXIANGDA_ROLE_SESSION_CONTEXT_INACTIVE_INVALID');
+    }
+    activeIdentity = undefined;
+    activeRoleSessionId = undefined;
+    return { state: context.state, identity: null, roleContext: context };
+  }
+  if (
+    !context.roleSession ||
+    !context.principal ||
+    !context.currentRoleSubject ||
+    !context.identityScope ||
+    !context.principal.activeRoleCode ||
+    context.principal.appCode !== mount.appCode ||
+    context.principal.roleSessionId !== context.roleSession.id ||
+    context.principal.activeRoleCode !== context.currentRoleSubject.role.code
+  ) {
+    throw new Error('OPENXIANGDA_ROLE_SESSION_CONTEXT_ACTIVE_INVALID');
+  }
+  activeRoleSessionId = context.roleSession.id;
+  activeIdentity = {
+    userId: context.principal.userId,
+    roleCodes: [context.principal.activeRoleCode],
+    capabilityCodes: context.principal.capabilities,
+    isAppSuperAdmin: context.principal.isAppSuperAdmin,
+    identityScope: context.identityScope,
+    subjectProfile: context.subjectProfile,
+    currentRoleSubject: context.currentRoleSubject,
+    roleSubjectPage: context.roleSubjectPage,
+    roleSwitchingAvailable: true,
+    environment: {
+      id: context.environment.id,
+      key: context.environment.key,
+      activeAppVersionId: context.environment.activeAppVersionId,
+      headRevision: context.environment.headRevision,
+      authzRevisionId: context.principal.authzRevisionId,
+      authzVersion: context.principal.authzVersion,
+      scopeDataVersion: context.principal.scopeDataVersion,
+    },
+  };
+  return { state: context.state, identity: activeIdentity, roleContext: context };
+}
 
-export async function loadCurrentIdentity(): Promise<RuntimeIdentity> {
+export async function loadRuntimeAuthorization(): Promise<RuntimeAuthorization> {
   const mount = runtimeMount();
   if (mount) {
-    const current = await request<DeployedCurrent>(
-      `${nativeBase()}/current-user?environmentKey=${encodeURIComponent(mount.environmentKey)}`
+    const context = await request<RoleSessionContext>(
+      `${nativeBase()}/authz/role-session/context?environmentKey=${encodeURIComponent(mount.environmentKey)}`
     );
-    if (
-      current.schemaVersion !== SCHEMA_VERSIONS.currentUser ||
-      current.appCode !== mount.appCode ||
-      current.environment.key !== mount.environmentKey ||
-      current.principal.type !== 'user'
-    ) {
-      throw new Error('OPENXIANGDA_DEPLOYED_CURRENT_USER_INVALID');
+    return validateRoleContext(context);
+  }
+  const current = await request<ConnectedCurrent>(
+    `${applicationServiceBase()}/dev-sessions/current`
+  );
+  activeRoleSessionId = undefined;
+  activeIdentity = {
+    ...current.principal,
+    identityScope: `connected-dev:${applicationCode()}:${current.environment.key}:${current.principal.userId}`,
+    subjectProfile: null,
+    currentRoleSubject: null,
+    roleSubjectPage: null,
+    roleSwitchingAvailable: false,
+    environment: current.environment,
+  };
+  return { state: 'active', identity: activeIdentity, roleContext: null };
+}
+
+export async function loadRoleSubjects(input: {
+  keyword?: string;
+  cursor?: string;
+  limit?: number;
+} = {}) {
+  const query = new URLSearchParams({
+    environmentKey: currentEnvironmentKey(),
+    limit: String(Math.min(Math.max(input.limit || 20, 1), 50)),
+  });
+  if (input.keyword?.trim()) query.set('keyword', input.keyword.trim());
+  if (input.cursor) query.set('cursor', input.cursor);
+  return request<RoleSubjectChoicePage>(
+    `${nativeBase()}/authz/role-session/context/role-subjects?${query}`
+  );
+}
+
+export async function switchRuntimeRole(
+  targetRoleSubjectKey: string,
+  expectedRoleSessionId: string | null
+) {
+  const context = await request<RoleSessionContext>(
+    `${nativeBase()}/authz/role-session/context/switch`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        targetRoleSubjectKey,
+        expectedRoleSessionId,
+        environmentKey: currentEnvironmentKey(),
+      }),
     }
-    activeIdentity = {
-      ...current.principal,
-      environment: current.environment,
-      authorization: current.authorization,
-    };
-    return activeIdentity;
+  );
+  const authorization = validateRoleContext(context);
+  if (!authorization.identity) {
+    throw new Error('OPENXIANGDA_ROLE_SESSION_SWITCH_INACTIVE');
   }
-  const current = await request<ConnectedCurrent>(`/service/openxiangda-api/v2/applications/${applicationCode()}/dev-sessions/current`);
-  activeIdentity = { ...current.principal, environment: current.environment };
-  return activeIdentity;
+  publishRoleSessionInvalidation();
+  return authorization;
 }
 
-const AUTHORIZATION_CHANNEL = 'openxiangda.authorization-context/v2';
-const AUTHORIZATION_STORAGE_KEY =
-  'openxiangda.authorization-context-invalidated/v2';
+const ROLE_SESSION_CHANNEL = 'openxiangda.role-session-context/v2';
+const ROLE_SESSION_STORAGE_KEY =
+  'openxiangda.role-session-context-invalidated/v2';
 
-type AuthorizationInvalidation = {
-  type: 'authorization-context-invalidated';
+type RoleSessionInvalidation = {
+  type: 'role-session-context-invalidated';
   appCode: string;
   environmentKey: 'preproduction' | 'production';
-  contextRevision: number;
   recordedAt: number;
 };
 
-function validAuthorizationInvalidation(
+function validRoleSessionInvalidation(
   value: unknown
-): value is AuthorizationInvalidation {
+): value is RoleSessionInvalidation {
   if (!value || typeof value !== 'object') return false;
-  const candidate = value as Partial<AuthorizationInvalidation>;
+  const candidate = value as Partial<RoleSessionInvalidation>;
   return (
-    candidate.type === 'authorization-context-invalidated' &&
+    candidate.type === 'role-session-context-invalidated' &&
     typeof candidate.appCode === 'string' &&
     (candidate.environmentKey === 'preproduction' ||
       candidate.environmentKey === 'production') &&
-    Number.isSafeInteger(candidate.contextRevision) &&
     typeof candidate.recordedAt === 'number'
   );
 }
 
-export function subscribeAuthorizationInvalidation(listener: () => void) {
+function publishRoleSessionInvalidation() {
+  const mount = runtimeMount();
+  if (!mount || typeof window === 'undefined') return;
+  const event: RoleSessionInvalidation = {
+    type: 'role-session-context-invalidated',
+    appCode: mount.appCode,
+    environmentKey: mount.environmentKey,
+    recordedAt: Date.now(),
+  };
+  try {
+    const channel = new BroadcastChannel(ROLE_SESSION_CHANNEL);
+    channel.postMessage(event);
+    channel.close();
+  } catch {
+    // Storage below is the cross-tab fallback.
+  }
+  try {
+    window.localStorage.setItem(ROLE_SESSION_STORAGE_KEY, JSON.stringify(event));
+  } catch {
+    // The active tab has already updated from the server response.
+  }
+}
+
+export function subscribeRoleSessionInvalidation(listener: () => void) {
   const mount = runtimeMount();
   if (!mount || typeof window === 'undefined') return () => undefined;
   const receive = (value: unknown) => {
     if (
-      validAuthorizationInvalidation(value) &&
+      validRoleSessionInvalidation(value) &&
       value.appCode === mount.appCode &&
       value.environmentKey === mount.environmentKey
     ) {
       activeIdentity = undefined;
+      activeRoleSessionId = undefined;
       listener();
     }
   };
   let channel: BroadcastChannel | undefined;
   try {
-    channel = new BroadcastChannel(AUTHORIZATION_CHANNEL);
+    channel = new BroadcastChannel(ROLE_SESSION_CHANNEL);
     channel.onmessage = event => receive(event.data);
   } catch {
     channel = undefined;
   }
   const onStorage = (event: StorageEvent) => {
-    if (event.key !== AUTHORIZATION_STORAGE_KEY || !event.newValue) return;
+    if (event.key !== ROLE_SESSION_STORAGE_KEY || !event.newValue) return;
     try {
       receive(JSON.parse(event.newValue));
     } catch {
@@ -206,6 +403,7 @@ export async function logoutCurrentUser() {
     method: 'POST',
   });
   activeIdentity = undefined;
+  activeRoleSessionId = undefined;
 }
 
 function currentEnvironmentKey() {
@@ -216,6 +414,23 @@ function currentEnvironmentKey() {
 
 export type DirectoryKind = 'user' | 'department';
 
+export interface ChinaDivisionListItem {
+  adcode: string;
+  citycode?: string;
+  name: string;
+  level?: string;
+  center?: string;
+  parentAdcode?: string;
+  hasChildren: boolean;
+}
+
+export async function loadChinaDivisions(parentAdcode?: string) {
+  const params = new URLSearchParams();
+  if (parentAdcode) params.set('parentAdcode', parentAdcode);
+  const suffix = params.size ? `?${params}` : '';
+  return await request<ChinaDivisionListItem[]>(`/china-divisions/${suffix}`);
+}
+
 export async function searchDirectory(kind: DirectoryKind, options: { keyword: string; cursor?: string }) {
   const params = new URLSearchParams({
     environmentKey: currentEnvironmentKey(),
@@ -262,66 +477,37 @@ export async function resolveDirectory(kind: DirectoryKind, ids: string[]) {
   );
 }
 
-export async function searchResource(resourceCode: string, labelField: string, options: { keyword: string; cursor?: string }) {
-  const pageSize = 20;
-  const offset = options.cursor ? Number(options.cursor) : 0;
-  const query: DataQuery = {
-    schemaVersion: SCHEMA_VERSIONS.dataQuery,
-    filters: options.keyword.trim()
-      ? [
-          {
-            field: labelField,
-            operator: 'ilike',
-            value: `%${options.keyword.trim()}%`,
-          },
-        ]
-      : [],
-    order: [{ field: labelField, direction: 'asc' }],
-    limit: pageSize,
-    offset: Number.isSafeInteger(offset) && offset >= 0 ? offset : 0,
+export async function searchResource(
+  resourceCode: string,
+  fieldCode: string,
+  options: {
+    operation: 'create' | 'update';
+    keyword: string;
+    cursor?: string;
+    bindings?: Record<string, unknown>;
+  }
+) {
+  const query: DataFieldSourceQuery = {
+    schemaVersion: SCHEMA_VERSIONS.dataFieldSourceQuery,
+    operation: options.operation,
+    ...(options.keyword.trim() ? { keyword: options.keyword.trim() } : {}),
+    ...(options.cursor ? { cursor: options.cursor } : {}),
+    ...(options.bindings && Object.keys(options.bindings).length
+      ? { bindings: options.bindings }
+      : {}),
   };
-  const page = await request<DataPage<Record<string, unknown>>>(`${dataBase(resourceCode)}/query`, {
+  return await request<DataFieldSourcePage>(
+    `${nativeBase()}/data-resources/${encodeURIComponent(
+      resourceCode
+    )}/fields/${encodeURIComponent(fieldCode)}/source/query`,
+    {
     method: 'POST',
     body: JSON.stringify({
       ...query,
       environmentKey: currentEnvironmentKey(),
     }),
-  });
-  return {
-    items: page.items.map((item) => ({
-      id: String(item.id),
-      label: String(item[labelField] ?? item.id),
-      selectable: true,
-    })),
-    nextCursor: page.items.length >= pageSize ? String(page.offset + page.items.length) : null,
-  };
-}
-
-export async function resolveResource(resourceCode: string, ids: string[], labelField: string) {
-  if (ids.length === 0) throw new Error('OPENXIANGDA_RESOURCE_RESOLVE_IDS_REQUIRED');
-  if (ids.length > 50) throw new Error('OPENXIANGDA_RESOURCE_RESOLVE_IDS_EXCEEDED');
-  const items = await Promise.all(
-    ids.map(async (id) => {
-      const record = await request<DataRecord<Record<string, unknown>>>(
-        `${dataBase(resourceCode)}/records/${encodeURIComponent(id)}?environmentKey=${encodeURIComponent(currentEnvironmentKey())}`
-      );
-      return {
-        id,
-        label: String(record.data[labelField] ?? id),
-        selectable: true,
-      };
-    })
+    }
   );
-  return { items, nextCursor: null };
-}
-
-export interface GenericResourceQuery {
-  page: number;
-  pageSize: number;
-  keyword?: string;
-  searchField?: string;
-  filters?: Record<string, unknown>;
-  sort?: { field: string; order: 'asc' | 'desc' };
 }
 
 export function createNativeResourceClient(code: string, surface: DataResourceSurface) {
@@ -331,38 +517,6 @@ export function createNativeResourceClient(code: string, surface: DataResourceSu
     if (!declaredFields.has(field)) throw new Error(`OPENXIANGDA_RESOURCE_QUERY_FIELD_NOT_DECLARED:${code}:${field}`);
     return field;
   };
-  const filtersFor = (query: GenericResourceQuery) => {
-    const filters: NonNullable<DataQuery['filters']> = [];
-    if (query.keyword?.trim()) {
-      const searchable = surface.list?.searchableFields || [];
-      const field = searchable.includes(query.searchField || '') ? query.searchField! : searchable[0];
-      if (field)
-        filters.push({
-          field: assertField(field),
-          operator: 'ilike',
-          value: `%${query.keyword.trim()}%`,
-        });
-    }
-    for (const [fieldCode, value] of Object.entries(query.filters || {})) {
-      if (value === undefined || value === null || value === '') continue;
-      // A list state can outlive a resource route during client-side navigation.
-      // Ignore filters from the previous resource instead of constructing an
-      // invalid Native Data query for the current resource.
-      if (!declaredFields.has(fieldCode)) continue;
-      const field = surface.fields[fieldCode];
-      if (Array.isArray(value) && value.length === 2 && ['date', 'datetime', 'number', 'money', 'percent'].includes(field?.widget || '')) {
-        if (value[0] !== undefined && value[0] !== null && value[0] !== '')
-          filters.push({ field: fieldCode, operator: 'gte', value: value[0] });
-        if (value[1] !== undefined && value[1] !== null && value[1] !== '')
-          filters.push({ field: fieldCode, operator: 'lte', value: value[1] });
-      } else if (Array.isArray(value) && ['multi', 'directory-user', 'directory-department', 'resource'].includes(field?.widget || '')) {
-        filters.push({ field: fieldCode, operator: 'cs', value });
-      } else {
-        filters.push({ field: fieldCode, operator: 'eq', value });
-      }
-    }
-    return filters;
-  };
   return {
     async list(query: GenericResourceQuery) {
       const fallbackSort = surface.list?.defaultSort || {
@@ -371,9 +525,10 @@ export function createNativeResourceClient(code: string, surface: DataResourceSu
       };
       const requestedSort = query.sort || fallbackSort;
       const sort = declaredFields.has(requestedSort.field) ? requestedSort : fallbackSort;
+      const where = buildResourceWhere(code, surface, query);
       const body: DataQuery = {
         schemaVersion: SCHEMA_VERSIONS.dataQuery,
-        filters: filtersFor(query),
+        ...(where ? { where } : {}),
         order: [{ field: sort.field, direction: sort.order || 'asc' }],
         limit: query.pageSize,
         offset: (query.page - 1) * query.pageSize,
@@ -387,6 +542,28 @@ export function createNativeResourceClient(code: string, surface: DataResourceSu
       });
       return { rows: page.items, total: page.total };
     },
+    async exportCsv(query: GenericResourceQuery, select: string[]) {
+      const fallbackSort = surface.list?.defaultSort || {
+        field: Object.keys(surface.fields)[0] || 'id',
+        order: 'asc' as const,
+      };
+      const requestedSort = query.sort || fallbackSort;
+      const sort = declaredFields.has(requestedSort.field) ? requestedSort : fallbackSort;
+      const where = buildResourceWhere(code, surface, query);
+      const body: DataExportRequest = {
+        schemaVersion: SCHEMA_VERSIONS.dataExportRequest,
+        select: select.map(assertField),
+        ...(where ? { where } : {}),
+        order: [{ field: sort.field, direction: sort.order || 'asc' }],
+      };
+      return await requestBlob(`${base}/export`, {
+        method: 'POST',
+        body: JSON.stringify({
+          ...body,
+          environmentKey: currentEnvironmentKey(),
+        }),
+      });
+    },
     async get(id: string) {
       const record = await request<DataRecord<Record<string, unknown>>>(
         `${base}/records/${encodeURIComponent(id)}?environmentKey=${encodeURIComponent(currentEnvironmentKey())}`
@@ -487,6 +664,10 @@ export function dataFileContentUrl(resource: string, fileId: string, disposition
   return `${dataBase(resource)}/files/${encodeURIComponent(fileId)}/content?${query}`;
 }
 
+export function dataRichTextImageSource(resource: string, fileId: string) {
+  return `${dataBase(resource)}/files/${encodeURIComponent(fileId)}/content?disposition=inline`;
+}
+
 export async function loadDataFilePreview(resource: string, fileId: string) {
   return request<DataFilePreview>(
     `${dataBase(resource)}/files/${encodeURIComponent(fileId)}/preview?environmentKey=${encodeURIComponent(currentEnvironmentKey())}`
@@ -494,10 +675,34 @@ export async function loadDataFilePreview(resource: string, fileId: string) {
 }
 
 export async function fetchDataFileBlob(resource: string, fileId: string) {
+  const headers = new Headers({ accept: 'application/octet-stream,*/*' });
+  if (activeRoleSessionId) {
+    headers.set('x-openxiangda-role-session-id', activeRoleSessionId);
+  }
   const response = await fetch(dataFileContentUrl(resource, fileId, 'inline'), {
     credentials: 'include',
-    headers: { accept: 'application/octet-stream,*/*' },
+    headers,
   });
   if (!response.ok) throw new Error(`FILE_CONTENT_READ_FAILED: HTTP_${response.status}`);
   return response.blob();
 }
+
+export async function downloadDataFile(
+  resource: string,
+  fileId: string,
+  fileName: string
+) {
+  const blob = await fetchDataFileBlob(resource, fileId);
+  const url = URL.createObjectURL(blob);
+  try {
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = fileName;
+    anchor.rel = 'noopener';
+    document.body.append(anchor);
+    anchor.click();
+    anchor.remove();
+  } finally {
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+}