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

import { Maximize2, RotateCcw, X } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';

import { PlatformActionButton } from '../../../../../packages/shared/src/components/PlatformActionButton';
import { PlatformIconButton } from '../../../../../packages/shared/src/components/PlatformIconButton';
import { ThemedModal } from '../../components/modal/ThemedModal';
import type { ProjectResourceCardPreviewState } from './resourceCardPreviewModel';
import {
  ResourceModelViewer,
  type ResourceModelViewerHandle,
} from './ResourceModelViewer';
import type { ProjectResource } from './resourceProjectionModel';

/**
 * 引擎模型的**放大预览浮层**：在独立浮层里给出与 3D 建模软件一致的视角操作。
 *
 * 卡片上仍然是静态缩略图（一张画布上十几张模型卡共用缩略图那一个 WebGL 上下文）；
 * 只有打开这个浮层时才会新建一个交互式上下文，关闭即释放。浮层内的指针与滚轮事件由
 * three 的 OrbitControls 独占：左键旋转、右键/中键平移、滚轮推拉。
 */
export function ResourceModelPreviewDialog({
  resource,
  identity,
  preview,
  onRequestPreview,
  onClose,
}: {
  resource: ProjectResource;
  identity: string;
  preview: ProjectResourceCardPreviewState;
  onRequestPreview: (
    resource: ProjectResource,
    identity: string,
    reason: 'detail',
  ) => void;
  onClose: () => void;
}) {
  const [resetSignal, setResetSignal] = useState(0);
  const viewerHandleRef = useRef<ResourceModelViewerHandle | null>(null);

  useEffect(() => {
    onRequestPreview(resource, identity, 'detail');
  }, [resource, identity, onRequestPreview]);

  const handleReady = useCallback((handle: ResourceModelViewerHandle) => {
    viewerHandleRef.current = handle;
  }, []);

  const sourceUrl =
    preview.status === 'loaded' ? (preview.preview.sourceUrl ?? null) : null;

  return (
    <ThemedModal
      open
      ariaLabel="模型预览"
      onClose={onClose}
      panelClassName="game-resource-model-preview"
    >
      <header className="game-resource-model-preview__header">
        <strong title={resource.label}>{resource.label}</strong>
        <div className="game-resource-model-preview__actions">
          <PlatformActionButton
            tone="secondary"
            onClick={() => setResetSignal((current) => current + 1)}
          >
            <RotateCcw size={15} aria-hidden="true" />
            <span>复位视角</span>
          </PlatformActionButton>
          <PlatformIconButton
            label="关闭模型预览"
            title="关闭"
            icon={<X size={18} aria-hidden="true" />}
            onClick={onClose}
          />
        </div>
      </header>
      <div className="game-resource-model-preview__body">
        {preview.status === 'failed' ? (
          <>
            <p role="alert">{preview.error}</p>
            {preview.retryable ? (
              <PlatformActionButton
                tone="secondary"
                onClick={() => onRequestPreview(resource, identity, 'detail')}
              >
                重试
              </PlatformActionButton>
            ) : null}
          </>
        ) : preview.status === 'loaded' && !sourceUrl ? (
          <p role="alert">没有可预览的模型内容</p>
        ) : sourceUrl ? (
          <ResourceModelViewer
            source={{
              sourceUrl,
              mediaType:
                preview.status === 'loaded'
                  ? preview.preview.mediaType
                  : resource.mediaType,
            }}
            resetSignal={resetSignal}
            onReady={handleReady}
          />
        ) : (
          <p role="status">正在加载模型…</p>
        )}
        <p className="game-resource-model-preview__hint">
          <Maximize2 size={13} aria-hidden="true" />
          <span>左键拖拽旋转 · 右键或中键拖拽平移 · 滚轮缩放</span>
        </p>
      </div>
    </ThemedModal>
  );
}