feat(spx-gui): separate UI and icons for importing Scratch projects and assets (#2535)

* feat(spx-gui): separate UI and icons for importing Scratch projects and assets

* feat(spx-gui): add 'Beta' tag to Scratch import option

Author: Overu

spx-gui/src/apis/common/exception.ts

@@ -30,6 +30,7 @@ export enum ApiExceptionCode {
   errorNotFound = 40400,
   errorTooManyRequests = 42900,
   errorRateLimitExceeded = 42901,
+  errorScratchFeatureNotSupported = 50101,
   errorUnknown = 50000
 }
 
@@ -83,6 +84,10 @@ const codeMessages: Record<ApiExceptionCode, LocaleMessage> = {
     en: 'resource not exist',
     zh: '资源不存在'
   },
+  [ApiExceptionCode.errorScratchFeatureNotSupported]: {
+    en: 'Some Scratch features are not supported yet',
+    zh: '部分 Scratch 特性暂不支持'
+  },
   [ApiExceptionCode.errorUnknown]: {
     en: 'something wrong with the server',
     zh: '服务器出问题了'

spx-gui/src/apis/sb2xbp.ts

@@ -1,21 +1,22 @@
+import { DefaultException } from '@/utils/exception'
 import { client } from './common'
+import { humanizeFileSize } from '@/utils/utils'
+
+const maxFileSize = 32 * 1024 * 1024 // 32MB
 
 /**
  * Convert Scratch project (.sb2/.sb3) to XBuilder project (.xbp) via backend `/scratch-convert` endpoint.
  * The backend is expected to return the converted xbp as binary response (200).
  *
  * Uses shared `client` so token, Sentry headers and timeout behavior are consistent with other APIs.
- *
- * @param file - The Scratch project file (.sb2 or .sb3) to convert
- * @param signal - Optional AbortSignal to cancel the request
- * @returns Promise that resolves to a Blob containing the converted .xbp file
- * @throws {ApiException} When the server returns an error response
- * @throws {TimeoutException} When the request exceeds the timeout duration
  */
 export async function convertScratchToXbp(file: File, signal?: AbortSignal) {
-  const MAX_FILE_SIZE = 32 * 1024 * 1024 // 32MB
-  if (file.size > MAX_FILE_SIZE) {
-    throw new Error('File too large. Maximum size is 32MB')
+  if (file.size > maxFileSize) {
+    const maxFileSizeHumanized = humanizeFileSize(maxFileSize)
+    throw new DefaultException({
+      en: `File size exceeds limit (max ${maxFileSizeHumanized.en})`,
+      zh: `文件尺寸超限（最大 ${maxFileSizeHumanized.zh})`
+    })
   }
   const form = new FormData()
   form.append('file', file, file.name)

spx-gui/src/components/asset/scratch/LoadFromScratch.vue

@@ -164,7 +164,7 @@ const importSelected = useMessageHandle(
   },
   // TODO: more detailed error message
   { en: 'Error encountered when importing assets', zh: '素材导入遇到错误' },
-  { en: 'Assets imprted', zh: '素材导入成功' }
+  { en: 'Assets imported', zh: '素材导入成功' }
 )
 </script>
 

spx-gui/src/components/asset/scratch/LoadFromScratchModal.vue

@@ -1,7 +1,7 @@
 <template>
   <UIFormModal
     :radar="{ name: 'Load from Scratch modal', desc: 'Modal for importing assets from Scratch' }"
-    :title="$t({ en: 'Import assets from Scratch', zh: '从 Scratch 导入资源' })"
+    :title="$t({ en: 'Import assets from Scratch', zh: '从 Scratch 项目文件导入素材' })"
     :visible="visible"
     style="width: 928px"
     @update:visible="emit('cancelled')"

spx-gui/src/components/editor/navbar/EditorNavbar.vue

@@ -5,7 +5,7 @@
       <NavbarDropdown
         :trigger-radar="{
           name: 'Project menu',
-          desc: 'Hover to see project options (create/open/publish/unpublish/remove project, import/export project file, import from Scratch, etc.)'
+          desc: 'Hover to see project options (create/open/publish/unpublish/remove project, import/export project file, import Scratch project file, import assets from Scratch, etc.)'
         }"
       >
         <template #trigger>
@@ -21,19 +21,23 @@
               <template #icon><img :src="importProjectSvg" /></template>
               {{ $t({ en: 'Import project file...', zh: '导入项目文件...' }) }}
             </UIMenuItem>
-            <UIMenuItem @click="handleExportProjectFile">
-              <template #icon><img :src="exportProjectSvg" /></template>
-              {{ $t({ en: 'Export project file', zh: '导出项目文件' }) }}
+            <UIMenuItem class="import-scratch" @click="handleImportFromScratch">
+              <template #icon><img :src="importScratchSvg" /></template>
+              <span class="item-text">
+                {{ $t({ en: 'Import Scratch project file', zh: '导入 Scratch 项目文件' }) }}
+              </span>
+              <!-- TODO: temporary, will be handled uniformly after the tag design specification is complete -->
+              <div class="beta">Beta</div>
+            </UIMenuItem>
+            <UIMenuItem @click="handleImportAssetsFromScratch">
+              <template #icon><img :src="importAssetsScratchSvg" /></template>
+              {{ $t({ en: 'Import assets from Scratch', zh: '从 Scratch 项目文件导入素材' }) }}
             </UIMenuItem>
           </UIMenuGroup>
           <UIMenuGroup :disabled="project == null">
-            <UIMenuItem @click="handleImportFromScratch">
-              <template #icon><img :src="importScratchSvg" /></template>
-              {{ $t({ en: 'Import assets from Scratch file', zh: '从 Scratch 项目文件导入' }) }}
-            </UIMenuItem>
-            <UIMenuItem @click="handleConvertFromScratch">
-              <template #icon><img :src="importScratchSvg" /></template>
-              {{ $t({ en: 'Convert Scratch project to XBuilder', zh: 'Scratch 项目转 XBuilder 项目' }) }}
+            <UIMenuItem @click="handleExportProjectFile">
+              <template #icon><img :src="exportProjectSvg" /></template>
+              {{ $t({ en: 'Export project file', zh: '导出项目文件' }) }}
             </UIMenuItem>
           </UIMenuGroup>
           <UIMenuGroup :disabled="project == null || !isOnline">
@@ -99,7 +103,7 @@
     </template>
     <template #right>
       <UIButtonGroup
-        v-radar="{ name: 'editor mode menu', desc: 'Hover to see editor mode options (default, map)' }"
+        v-radar="{ name: 'Editor mode menu', desc: 'Hover to see editor mode options (default, map)' }"
         class="editor-mode-wrapper"
         type="text"
         variant="secondary"
@@ -109,15 +113,15 @@
         <UITooltip>
           <template #trigger>
             <UIButtonGroupItem :value="EditMode.Default">
-              <div class="icon" v-html="gamePreviewSvg"></div>
+              <div class="icon" v-html="defaultModeSvg"></div>
             </UIButtonGroupItem>
           </template>
           {{ $t({ en: 'Default Mode', zh: '默认模式' }) }}
         </UITooltip>
         <UITooltip>
           <template #trigger>
             <UIButtonGroupItem :value="EditMode.Map">
-              <div class="icon" v-html="globalConfig"></div>
+              <div class="icon" v-html="mapEditModeSvg"></div>
             </UIButtonGroupItem>
           </template>
           {{ $t({ en: 'Map Edit Mode', zh: '地图编辑模式' }) }}
@@ -165,15 +169,16 @@ import importProjectSvg from './icons/import-project.svg'
 import exportProjectSvg from './icons/export-project.svg'
 import removeProjectSvg from './icons/remove-project.svg'
 import importScratchSvg from './icons/import-scratch.svg'
+import importAssetsScratchSvg from './icons/import-assets-scratch.svg'
 import publishSvg from './icons/publish.svg'
 import unpublishSvg from './icons/unpublish.svg'
 import projectPageSvg from './icons/project-page.svg'
 import offlineSvg from './icons/offline.svg?raw'
 import savingSvg from './icons/saving.svg?raw'
 import failedToSaveSvg from './icons/failed-to-save.svg?raw'
 import cloudCheckSvg from './icons/cloud-check.svg?raw'
-import gamePreviewSvg from './icons/game-preview.svg?raw'
-import globalConfig from './icons/global-config.svg?raw'
+import defaultModeSvg from './icons/default-mode.svg?raw'
+import mapEditModeSvg from './icons/map-edit-mode.svg?raw'
 
 const props = defineProps<{
   project: Project | null
@@ -246,7 +251,7 @@ const handleExportProjectFile = useMessageHandle(
 ).fn
 
 const loadFromScratchModal = useLoadFromScratchModal()
-const handleImportFromScratch = useMessageHandle(
+const handleImportAssetsFromScratch = useMessageHandle(
   async () => {
     const { state, project } = props
     if (state == null || project == null) throw new Error('Editor state or project is not available')
@@ -259,9 +264,8 @@ const handleImportFromScratch = useMessageHandle(
   }
 ).fn
 
-const convertScratchMessage = { en: 'Convert Scratch to XBuilder project', zh: 'Scratch 项目转 XBuilder 项目' }
-
-const handleConvertFromScratch = useMessageHandle(
+const importScratchMessage = { en: 'Import Scratch project file', zh: '导入 Scratch 项目文件' }
+const handleImportFromScratch = useMessageHandle(
   async () => {
     const { project } = props
     if (project == null) throw new Error('project is not available')
@@ -271,7 +275,7 @@ const handleConvertFromScratch = useMessageHandle(
     // upload to backend via api helper and get converted xbp blob
     const blob = await m.withLoading(
       convertScratchToXbp(file, project.getSignal()),
-      i18n.t({ en: 'Converting Scratch project', zh: '正在转换 Scratch 项目' })
+      i18n.t({ en: 'Converting Scratch project file', zh: '正在转换 Scratch 项目文件' })
     )
 
     if (blob == null) throw new Error('Failed to convert Scratch project')
@@ -280,13 +284,13 @@ const handleConvertFromScratch = useMessageHandle(
       type: 'application/zip'
     })
 
-    const action = { name: convertScratchMessage }
+    const action = { name: importScratchMessage }
     await m.withLoading(
       project.history.doAction(action, () => project!.loadXbpFile(xbpFile)),
-      i18n.t({ en: 'Importing converted project', zh: '导入已转换的项目中' })
+      i18n.t({ en: 'Importing converted project file', zh: '导入已转换的项目文件' })
     )
   },
-  { en: 'Failed to convert Scratch project', zh: 'Scratch 转换失败' }
+  { en: 'Failed to import Scratch project file', zh: '导入 Scratch 项目文件失败' }
 ).fn
 
 const publishProject = usePublishProject()
@@ -386,6 +390,26 @@ const autoSaveStateIcon = computed<AutoSaveStateIcon | null>(() => {
 </script>
 
 <style lang="scss" scoped>
+.import-scratch {
+  padding: 8px;
+
+  .item-text {
+    flex: 1;
+    margin-right: 8px;
+  }
+
+  .beta {
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid var(--ui-color-grey-400);
+    background: var(--ui-color-grey-300);
+    padding: 0 8px;
+    font-size: 12px;
+    line-height: 20px;
+    color: var(--ui-color-grey-900);
+  }
+}
+
 .owner-info,
 .project-name {
   overflow: hidden;