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

Author: Overu

spx-gui/src/apis/sb2xbp.ts

@@ -1,21 +1,17 @@
+import { DefaultException } from '@/utils/exception'
 import { client } from './common'
 
+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) {
+    throw new DefaultException({ en: 'File too large. Maximum size is 32MB', zh: '文件太大，最大支持 32MB' })
   }
   const form = new FormData()
   form.append('file', file, file.name)

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

@@ -21,12 +21,14 @@
               <template #icon><img :src="importProjectSvg" /></template>
               {{ $t({ en: 'Import project file...', zh: '导入项目文件...' }) }}
             </UIMenuItem>
-
-            <UIMenuItem @click="handleImportFromScratch">
+            <UIMenuItem class="import-scratch" @click="handleImportFromScratch">
               <template #icon><img :src="importScratchSvg" /></template>
-              {{ $t({ en: 'Import Scratch project file', zh: '导入 Scratch 项目文件' }) }}
+              <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 项目文件导入素材' }) }}
@@ -388,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;