Genarrative/apps/ai-game-creator-shell/src/view/project-development/ResourceAssetDeleteDialog.tsx

import { PlatformActionButton } from '../../../../../packages/shared/src/components/PlatformActionButton';
import { ThemedModal } from '../../components/modal/ThemedModal';

export type ResourceAssetReferenceVersion = {
  versionId: string;
  projectRevision: number;
  createdAt: number;
};

function referenceVersionTimeLabel(createdAt: number) {
  if (!Number.isSafeInteger(createdAt) || createdAt < 0) return '时间未知';
  return new Intl.DateTimeFormat('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  }).format(new Date(createdAt * 1000));
}

type ResourceAssetDeleteDialogProps = {
  open: boolean;
  localPath: string;
  referencedVersions: readonly ResourceAssetReferenceVersion[];
  deleteReferencedVersions: boolean;
  deleting: boolean;
  onChangeDeleteReferencedVersions: (value: boolean) => void;
  onClose: () => void;
  onConfirm: () => void;
};

/**
 * 素材删除确认面板。被版本引用时列出引用它的版本，并给出「把相关游戏版本一并删除」勾选，
 * 默认不勾：只删素材，版本保留悬空绑定。
 */
export function ResourceAssetDeleteDialog({
  open,
  localPath,
  referencedVersions,
  deleteReferencedVersions,
  deleting,
  onChangeDeleteReferencedVersions,
  onClose,
  onConfirm,
}: ResourceAssetDeleteDialogProps) {
  return (
    <ThemedModal
      open={open}
      ariaLabel="确认删除资源"
      onClose={onClose}
      // 删除在飞时头部 × / 取消 / 删除都已禁用，Escape 与遮罩也必须一起挡住，
      // 否则面板看着像"取消了"，后台的删除其实还在跑。
      closeOnBackdrop={!deleting}
      closeOnEscape={!deleting}
      panelClassName="game-approval-dialog game-resource-delete-dialog"
    >
      <header>
        <div>
          <h2>删除资源</h2>
          <p>{localPath}</p>
        </div>
        <button
          type="button"
          aria-label="关闭删除资源确认"
          onClick={onClose}
          disabled={deleting}
        >
          ×
        </button>
      </header>
      {referencedVersions.length > 0 ? (
        <div className="game-resource-delete-body">
          <p className="game-resource-delete-summary">
            {`被 ${referencedVersions.length} 个游戏版本使用`}
          </p>
          <ul className="game-resource-delete-versions">
            {referencedVersions.map((version) => (
              <li key={version.versionId}>
                <span>{version.versionId}</span>
                <small>{referenceVersionTimeLabel(version.createdAt)}</small>
              </li>
            ))}
          </ul>
          <label className="game-resource-delete-option">
            <input
              type="checkbox"
              checked={deleteReferencedVersions}
              disabled={deleting}
              onChange={(event) =>
                onChangeDeleteReferencedVersions(event.currentTarget.checked)
              }
            />
            <span>把相关游戏版本一并删除</span>
          </label>
        </div>
      ) : null}
      <footer>
        <PlatformActionButton
          tone="secondary"
          onClick={onClose}
          disabled={deleting}
        >
          取消
        </PlatformActionButton>
        <PlatformActionButton
          tone="danger"
          onClick={onConfirm}
          disabled={deleting}
          aria-label="确认删除资源"
        >
          删除
        </PlatformActionButton>
      </footer>
    </ThemedModal>
  );
}