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

import { useState } from 'react';

import { PlatformActionButton } from '../../../../../packages/shared/src/components/PlatformActionButton';
import { PlatformSegmentedTabs } from '../../../../../packages/shared/src/components/PlatformSegmentedTabs';
import { PlatformTextField } from '../../../../../packages/shared/src/components/PlatformTextField';
import {
  GAME_CREATION_APP_ASSET_CATEGORIES,
  type GameCreationAppAssetCategory,
  gameCreationAppAssetCategory,
  type GameCreationAppAssetManifestEntry,
  gameCreationAppAssetTags,
  normalizeGameCreationAppAssetTags,
} from '../../../../../packages/shared/src/contracts/gameCreationApp';
import { ThemedModal } from '../../components/modal/ThemedModal';
import { resourceReferenceCategoryLabel } from '../../features/project-workspace/resourceReferences';

type UpdateLocalProjectResourceClassificationResult = {
  asset: GameCreationAppAssetManifestEntry;
  committedProjectRevision: number;
};

const RESOURCE_CLASSIFICATION_CATEGORY_OPTIONS =
  GAME_CREATION_APP_ASSET_CATEGORIES.map((category) => ({
    id: category,
    label: resourceReferenceCategoryLabel(category),
  }));

/** 标签草稿沿用写入路径的归一化边界，只按中英文逗号、顿号与换行切分。 */
function splitResourceClassificationTagsDraft(value: string) {
  return normalizeGameCreationAppAssetTags(value.split(/[,，、\n]/u));
}

function resourceClassificationErrorMessage(error: unknown) {
  if (typeof error === 'string' && error.trim()) return error;
  if (error instanceof Error && error.message) return error.message;
  return '保存资源分类与标签失败';
}

type ResourceClassificationPanelProps = {
  projectPath: string;
  projectId: string;
  asset: GameCreationAppAssetManifestEntry;
  onClose: () => void;
  onSaved: (result: UpdateLocalProjectResourceClassificationResult) => void;
};

export function ResourceClassificationPanel({
  projectPath,
  projectId,
  asset,
  onClose,
  onSaved,
}: ResourceClassificationPanelProps) {
  const [category, setCategory] = useState<GameCreationAppAssetCategory>(() =>
    gameCreationAppAssetCategory(asset),
  );
  const [tagsDraft, setTagsDraft] = useState(() =>
    gameCreationAppAssetTags(asset).join('、'),
  );
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function saveResourceClassification() {
    const invoke = window.__TAURI__?.core?.invoke;
    if (!invoke) {
      setError('资源分类与标签需要在客户端内保存');
      return;
    }
    setSaving(true);
    setError(null);
    try {
      const status = await invoke<{ revision: number }>(
        'get_local_game_project_revision',
        { projectPath },
      );
      if (!Number.isSafeInteger(status.revision) || status.revision < 0) {
        throw new Error('项目 revision 无效');
      }
      const result =
        await invoke<UpdateLocalProjectResourceClassificationResult>(
          'update_local_project_resource_classification',
          {
            input: {
              projectPath,
              expectedProjectId: projectId,
              expectedProjectRevision: status.revision,
              assetId: asset.id,
              category,
              tags: splitResourceClassificationTagsDraft(tagsDraft),
            },
          },
        );
      onSaved(result);
    } catch (saveError) {
      setError(resourceClassificationErrorMessage(saveError));
    } finally {
      setSaving(false);
    }
  }

  return (
    <ThemedModal
      open
      ariaLabel="资源分类与标签"
      onClose={onClose}
      panelClassName="game-approval-dialog game-resource-classification-dialog"
    >
      <header>
        <div>
          <h2>资源分类与标签</h2>
          <p>{asset.localPath}</p>
        </div>
        <button type="button" aria-label="关闭资源分类与标签" onClick={onClose}>
          ×
        </button>
      </header>
      <div className="game-resource-classification-body">
        <PlatformSegmentedTabs
          items={RESOURCE_CLASSIFICATION_CATEGORY_OPTIONS}
          activeId={category}
          onChange={setCategory}
          columns="threeToSix"
          gap="sm"
          size="compact"
        />
        <PlatformTextField
          aria-label="资源标签"
          placeholder="用、或逗号分隔标签"
          value={tagsDraft}
          onChange={(event) => setTagsDraft(event.currentTarget.value)}
        />
        {error ? (
          <p className="game-resource-classification-error" role="alert">
            {error}
          </p>
        ) : null}
      </div>
      <footer>
        <PlatformActionButton
          tone="secondary"
          onClick={onClose}
          disabled={saving}
        >
          取消
        </PlatformActionButton>
        <PlatformActionButton
          onClick={() => void saveResourceClassification()}
          disabled={saving}
        >
          保存
        </PlatformActionButton>
      </footer>
    </ThemedModal>
  );
}