Feat: Supports retrieving assets from scratch projects and importing …

…them into the assets list (goplus#126) * feat: Import the scratch file and get the assets * feat: ui design for upload scratch proj and render download list * fix: offline upload sprite * fix: the style of scratch list and import button position * feat: list multi check * fix: delete test infomations * feat: rename scratch assets * fix: code format * feat: Import the scratch file and get the assets * feat: ui design for upload scratch proj and render download list * fix: offline upload sprite * fix: the style of scratch list and import button position * feat: list multi check * fix: delete test infomations * feat: rename scratch assets * fix: code format * fix: change the getAssetList url and change multiselect style * feat: add comment to functions * fix: tsc about existsByName * fix: change LoadFromScratchDemo.vuename * fix: delete spxEditor LoadFromScratch demo component * fix: tsc about import route * fix: scratch.ts, file-saver * fix: remove duplicate existsByName * fix: abstract setTopFileIndex function * fix: reuse file.ts getMimeFromExt * fix: deleteLoadFromScratchDemo * fix: delete scratch.ts * fix: add parseScratchFile * delete: getMimeType --------- Co-authored-by: 姚昕玥 <[email protected]>
luoliwoshang · Feb 29, 2024 · 8b0b797 · 8b0b797
1 parent d4f28b8
commit 8b0b797
Show file tree

Hide file tree

Showing 14 changed files with 581 additions and 99 deletions.
diff --git a/spx-gui/src/api/asset.ts b/spx-gui/src/api/asset.ts
@@ -2,7 +2,7 @@
  * @Author: Yao xinyue
  * @Date: 2024-01-22 11:17:08
  * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-02-21 21:01:22
+ * @LastEditTime: 2024-02-29 15:14:19
  * @FilePath: /builder/spx-gui/src/api/asset.ts
  * @Description:
  */
@@ -36,9 +36,12 @@ export function getAssetList({
   isOrderByTime?: boolean
   isOrderByHot?: boolean
 }): Promise<PageAssetResponse> {
-  let url = `/list/asset/${pageIndex}/${pageSize}/${assetType}`
   const params = new URLSearchParams()
 
+  params.append('pageIndex', pageIndex.toString())
+  params.append('pageSize', pageSize.toString())
+  params.append('assetType', assetType.toString())
+
   if (category) {
     params.append('category', category)
   }
@@ -48,9 +51,8 @@ export function getAssetList({
   if (isOrderByHot) {
     params.append('isOrderByHot', '1')
   }
-  if (Array.from(params).length > 0) {
-    url += `?${params.toString()}`
-  }
+
+  const url = `/list/asset?${params.toString()}`
 
   return service({
     url: url,
@@ -158,13 +160,13 @@ export function addAssetClickCount(
  * @param {number} assetType
  * @return { SearchAssetResponse }
  */
-export function generateGifByCostumes(name:string, files: File[]): Promise<string> {
+export function generateGifByCostumes(name: string, files: File[]): Promise<string> {
   const url = `/spirits/upload`
   const formData = new FormData()
-  formData.append('name',name)
+  formData.append('name', name)
   files.forEach((file) => {
-    formData.append('files', file);
-  });
+    formData.append('files', file)
+  })
 
   return service({
     url: url,

diff --git a/spx-gui/src/assets/image/library/error.svg b/spx-gui/src/assets/image/library/error.svg
diff --git a/spx-gui/src/assets/image/sounds/sounds-import.svg b/spx-gui/src/assets/image/sounds/sounds-import.svg
diff --git a/spx-gui/src/class/backdrop.ts b/spx-gui/src/class/backdrop.ts
@@ -1,8 +1,8 @@
 /*
  * @Author: TuGitee [email protected]
  * @Date: 2024-01-19 21:53:50
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-19 09:10:03
+ * @LastEditors: xuning [email protected]
+ * @LastEditTime: 2024-02-29 14:14:20
  * @FilePath: /spx-gui/src/class/backdrop.ts
  * @Description: The class of a backdrop.
  */
@@ -11,6 +11,7 @@ import { AssetBase } from "@/class/asset-base";
 import { isInstance, getAllFromLocal } from "@/util/class";
 import type { RawDir } from "@/types/file";
 import { useProjectStore } from "@/store/modules/project";
+import FileWithUrl from "@/class/file-with-url";
 
 /**
  * @class Backdrop
@@ -84,6 +85,11 @@ export class Backdrop extends AssetBase {
         return await getAllFromLocal(Backdrop);
     }
 
+    setTopFileIndex (file: FileWithUrl, index: number){
+        this.files.splice(index, 1)
+        this.files.unshift(file)
+    }
+
     /**
      * @constructor create a new backdrop
      * @param {string} name the name of the backdrop

diff --git a/spx-gui/src/components/sprite-list/AssetAddBtn.vue b/spx-gui/src/components/sprite-list/AssetAddBtn.vue
@@ -34,13 +34,6 @@
       </n-upload>
 
       <!-- Sprite Upload -->
-      <!-- <n-upload
-        v-else
-        :action="uploadActionUrl"
-        @before-upload="beforeSpriteUpload"
-      >
-        <n-button color="#fff" :text-color="commonColor">  {{ $t("stage.upload") }} </n-button>
-      </n-upload> -->
       <div v-else>
         <n-button color="#fff" :text-color="commonColor" @click="showUploadModal = true">
           {{ $t('stage.upload') }}
@@ -116,13 +109,6 @@
         multiple
         @change="hanleWatchFileList"
       />
-      <!-- <n-upload
-          style="flex-grow: 1; margin: 0 8px"
-          :action="uploadActionUrl"
-          @before-upload="beforeSpriteUpload"
-          list-type="image-card"
-          multiple
-        /> -->
     </div>
     <div style="width: 100%; text-align: center">
       <n-button @click="handleSubmitSprite()">
@@ -292,15 +278,14 @@ const hanleWatchFileList = (data: { file: UploadFileInfo; fileList: UploadFileIn
  * @Author: Xu Ning
  * @Date: 2024-02-21 17:48:33
  */
-const handleSubmitSprite = async () => {
+const handleSubmitSprite = () => {
   let uploadFilesArr: File[] = [];
   uploadFileList.value.forEach((fileItem: UploadFileInfo) => {
     if (fileItem && fileItem.file) {
       uploadFilesArr.push(fileItem.file)
     }
   })
-  let gif = await generateGifByCostumes(uploadSpriteName.value, uploadFilesArr)
-  console.log(gif,'gif')
+  let gif = generateGifByCostumes(uploadSpriteName.value, uploadFilesArr)
   let sprite = new Sprite(uploadSpriteName.value, uploadFilesArr)
   spriteStore.addItem(sprite)
   uploadSpriteName.value = ''

diff --git a/spx-gui/src/components/sprite-list/ImageCardCom.vue b/spx-gui/src/components/sprite-list/ImageCardCom.vue
@@ -2,19 +2,19 @@
  * @Author: Xu Ning
  * @Date: 2024-01-18 17:11:19
  * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-02-06 12:54:20
+ * @LastEditTime: 2024-02-29 14:15:39
  * @FilePath: /builder/spx-gui/src/components/sprite-list/ImageCardCom.vue
  * @Description:
 -->
 <template>
-  <div v-if="props.type === 'sprite'" :class="computedProperties.cardClassName" >
+  <div v-if="props.type === 'sprite'" :class="computedProperties.cardClassName">
     <div class="delete-button" @click="deleteSprite(props.asset.name)">×</div>
     <n-image
       preview-disabled
       :width="computedProperties.imageWidth"
       :height="computedProperties.imageHeight"
       :src="computedProperties.spriteUrl"
-      fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      :fallback-src="error"
     />
     {{ props.asset.name }}
   </div>
@@ -23,50 +23,54 @@
     v-else
     :key="index"
     :class="computedProperties.cardClassName"
+    :style="index == 0 ? firstBackdropStyle : ''"
+    @click="setTopFileIndex(file, index)"
   >
     <div class="delete-button" @click="deleteBackdrop(file)">×</div>
     <n-image
       preview-disabled
       :width="computedProperties.imageWidth"
       :height="computedProperties.imageHeight"
       :src="file.url"
-      fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      :fallback-src="error"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 // ----------Import required packages / components-----------
-import { defineProps, computed } from "vue";
-import { NImage } from "naive-ui";
-import { useSpriteStore } from '@/store/modules/sprite';
-import { useBackdropStore } from '@/store/modules/backdrop';
-import { AssetBase } from "@/class/asset-base";
-import { Backdrop } from "@/class/backdrop";
-import FileWithUrl from "@/class/file-with-url";
+import { defineProps, computed } from 'vue'
+import { NImage } from 'naive-ui'
+import { useSpriteStore } from '@/store/modules/sprite'
+import { useBackdropStore } from '@/store/modules/backdrop'
+import { AssetBase } from '@/class/asset-base'
+import { Backdrop } from '@/class/backdrop'
+import FileWithUrl from '@/class/file-with-url'
+import error from '@/assets/image/library/error.svg'
 
 // ----------props & emit------------------------------------
 interface PropType {
-  type?: string;
-  asset: AssetBase | Backdrop;
+  type?: string
+  asset: AssetBase | Backdrop
 }
-const props = defineProps<PropType>();
-const spriteStore = useSpriteStore();
-const backdropStore = useBackdropStore();
+const props = defineProps<PropType>()
+const spriteStore = useSpriteStore()
+const backdropStore = useBackdropStore()
+const firstBackdropStyle = { 'box-shadow': '0px 0px 0px 4px #FF81A7' }
 
 // ----------computed properties-----------------------------
 // Computed card style/ image width/ image height/ spriteUrl/ backdropFiles by props.type.
 const computedProperties = computed(() => {
-  const isBg = props.type === "bg";
-  const hasFiles = props.asset && props.asset.files && props.asset.files.length > 0;
+  const isBg = props.type === 'bg'
+  const hasFiles = props.asset && props.asset.files && props.asset.files.length > 0
   return {
-    cardClassName: isBg ? "bg-list-card" : "sprite-list-card",
+    cardClassName: isBg ? 'bg-list-card' : 'sprite-list-card',
     imageWidth: isBg ? 40 : 75,
     imageHeight: isBg ? 40 : 75,
-    spriteUrl: !isBg && hasFiles ? props.asset.files[0].url : "",
+    spriteUrl: !isBg && hasFiles ? props.asset.files[0].url : '',
     backdropFiles: isBg && hasFiles ? props.asset.files : []
-  };
-});
+  }
+})
 
 // ----------methods-----------------------------------------
 /**
@@ -77,7 +81,7 @@ const computedProperties = computed(() => {
  */
 const deleteSprite = (name: string) => {
   spriteStore.removeItemByName(name)
-};
+}
 
 /**
  * @description: A Function about deleting backdrop's file.
@@ -87,14 +91,26 @@ const deleteSprite = (name: string) => {
  */
 const deleteBackdrop = (file: FileWithUrl) => {
   backdropStore.backdrop.removeFile(file)
-};
+}
+
+/**
+ * @description: A Function about change backdrop' file index to top.
+ * @param {*} file
+ * @param {*} index
+ * @return {*}
+ */
+const setTopFileIndex = (file: FileWithUrl, index: number) => {
+  if (index != 0) {
+    backdropStore.backdrop.setTopFileIndex(file, index)
+  }
+}
 </script>
 
 <style scoped lang="scss">
-@import "@/assets/theme.scss";
+@import '@/assets/theme.scss';
 
 @mixin listCardBase {
-  font-family:'Heyhoo';
+  font-family: 'Heyhoo';
   margin: 10px auto;
   border-radius: 20px;
   box-shadow: 0 0 5px $sprite-list-card-box-shadow;