feat: asset library pagination and loading state (goplus#188)

* fix: search private asset params * delete: unexpected avatar dropdown's setting button * feat: add logo pics in navbar and header * fix: line-height of en/ch * fix: loading state * fix: toggle asset status bug * feat: asset library pagination * fix: format api url * fix: zindex of spritecard * fix: page empty status * fix: i18n in asset library * fix: PublicStatus * delete: const Library_Public * fix: move entrycode to right stage * feat: offline asset library btn * fix: click.stop to protect assetAddBtn state * fix: delete comment header * fix: logo and named go+ builder * fix: entrycode active style * fix: change chinese-copywriting * fix: delete settings.json * delete: isEntryCodeActive in spritelist
luoliwoshang · Mar 13, 2024 · 2ef4de7 · 2ef4de7
1 parent beef68b
commit 2ef4de7
Show file tree

Hide file tree

Showing 19 changed files with 210 additions and 101 deletions.
diff --git a/spx-gui/index.html b/spx-gui/index.html
@@ -11,10 +11,10 @@
 
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico">
+  <link rel="icon" href="/logo.jpg">
   <meta name="viewport"
     content="width=device-width, initial-scale=1.0">
-  <title>STEM EDU</title>
+  <title>Go+ Builder</title>
 </head>
 
 <body>

diff --git a/spx-gui/public/logo.jpg b/spx-gui/public/logo.jpg
diff --git a/spx-gui/src/App.vue b/spx-gui/src/App.vue
@@ -101,12 +101,10 @@ body {
 
 :lang(en) {
   font-size: 15.8px;
-  line-height: 1.6;
 }
 
 :lang(zh) {
   font-size: 16px;
-  line-height: 1.6;
 }
 
 .n-layout-header {

diff --git a/spx-gui/src/api/asset.ts b/spx-gui/src/api/asset.ts
@@ -2,14 +2,15 @@
  * @Author: Yao xinyue
  * @Date: 2024-01-22 11:17:08
  * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-03-11 18:34:52
+ * @LastEditTime: 2024-03-13 11:40:47
  * @FilePath: \spx-gui\src\api\asset.ts
  * @Description:
  */
 import { service } from '@/axios'
 import type { Asset, PageAssetResponse } from '@/interface/library.ts' // Adjust the import paths as needed
 import type { ResponseData } from '@/axios'
 import type { AxiosResponse } from 'axios'
+import { PublicStatus } from "@/class/project";
 
 export enum PublishState {
   NotPublished = -1,
@@ -30,7 +31,7 @@ export enum PublishState {
  * @returns PageAssetResponse
  */
 export function getAssetList({
-  assetLibraryType,
+  isPublic,
   pageIndex,
   pageSize,
   assetType,
@@ -39,7 +40,7 @@ export function getAssetList({
   isOrderByHot,
   author
 }: {
-  assetLibraryType: string
+  isPublic: number
   pageIndex: number
   pageSize: number
   assetType: number
@@ -49,18 +50,21 @@ export function getAssetList({
   author?: string
 }): Promise<PageAssetResponse> {
   const baseAssetUrl = '/assets/list'
-  let isPublic = ''
-  if (assetLibraryType == 'public') {
-    isPublic = PublishState.PublicAndPrivateLibrary.toString()
-  } else if (assetLibraryType == 'private') {
-    isPublic = PublishState.PrivateLibrary.toString()
+  let isPublicStr
+  if (isPublic == PublicStatus.public) {
+    isPublicStr = PublishState.PublicAndPrivateLibrary
+  } else if (isPublic == PublicStatus.private) {
+    isPublicStr = PublishState.PrivateLibrary
   }
+  console.log('isPublic', isPublic, 'isPublicStr', isPublicStr)
   const params = new URLSearchParams()
-  params.append('isPublic', isPublic)
   params.append('pageIndex', pageIndex.toString())
   params.append('pageSize', pageSize.toString())
   params.append('assetType', assetType.toString())
-
+
+  if (isPublicStr != null) {
+    params.append('isPublic', isPublicStr.toString())
+  }
   if (category) {
     params.append('category', category)
   }
@@ -102,20 +106,25 @@ export function getAsset(id: number): Promise<Asset> {
  * @param {number} assetType
  * @return { SearchAssetResponse }
  */
-export function searchAssetByName(pageIndex: number, pageSize: number,search: string, assetType: number): Promise<PageAssetResponse> {
+export function searchAssetByName(
+  pageIndex: number,
+  pageSize: number,
+  search: string,
+  assetType: number
+): Promise<PageAssetResponse> {
   const baseAssetUrl = `/assets/search`
-  
+
   const params = new URLSearchParams()
   params.append('pageIndex', pageIndex.toString())
   params.append('pageSize', pageSize.toString())
   params.append('search', search)
   params.append('assetType', assetType.toString())
 
   const url = `${baseAssetUrl}?${params.toString()}`
-  
+
   return service({
     url: url,
-    method: 'get',
+    method: 'get'
   })
 }
 
@@ -165,9 +174,7 @@ export async function saveAsset(
  * @param assetType The type of the asset. See src/constant/constant.ts for details.
  * @return {Promise<AxiosResponse<ResponseData<string>>>}
  */
-export function addAssetClickCount(
-  id: number
-): Promise<AxiosResponse<ResponseData<string>>> {
+export function addAssetClickCount(id: number): Promise<AxiosResponse<ResponseData<string>>> {
   const url = `/asset/${id}/click-count`
   return service({
     url: url,

diff --git a/spx-gui/src/api/project.ts b/spx-gui/src/api/project.ts
@@ -90,7 +90,7 @@ export async function updateProjectIsPublic(id: string, status: PublicStatus): P
  * @returns string
  */
 export function formatSpxCode(body: string): Promise<AxiosResponse<ResponseData<FormatResponse>>> {
-  const url = '/project/fmt'
+  const url = '/util/fmt'
   const formData = new FormData()
   formData.append('body', body)
 

diff --git a/spx-gui/src/assets/logo.jpg b/spx-gui/src/assets/logo.jpg
diff --git a/spx-gui/src/assets/logo.png b/spx-gui/src/assets/logo.png
diff --git a/spx-gui/src/components/loading/Loading.vue b/spx-gui/src/components/loading/Loading.vue
@@ -2,8 +2,8 @@
 <!--
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-15 09:16:18
- * @LastEditors: Xu Ning
- * @LastEditTime: 2024-01-18 11:19:56
+ * @LastEditors: xuning [email protected]
+ * @LastEditTime: 2024-03-13 15:20:13
  * @FilePath: /builder/spx-gui/src/components/loading/Loading.vue
  * @Description: 
 -->
@@ -16,7 +16,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import Logo from "@/assets/logo.png"
+import Logo from "@/assets/logo.jpg"
 </script>
 <style scoped>
 .loading {

diff --git a/spx-gui/src/components/sprite-list/AssetAddBtn.vue b/spx-gui/src/components/sprite-list/AssetAddBtn.vue
@@ -35,6 +35,7 @@
       <n-button
         v-if="props.type == 'backdrop'"
         color="#fff"
+        :disabled="networkStore.offline()"
         quaternary
         size="tiny"
         text-color="#fff"
@@ -44,6 +45,7 @@
       </n-button>
       <n-button
         v-else-if="props.type == 'sprite'"
+        :disabled="networkStore.offline()"
         color="#fff"
         :text-color="commonColor"
         @click="openLibraryFunc()"
@@ -97,7 +99,7 @@
         list-type="image-card"
         multiple
         @change="handleWatchFileList"
-      />
+      >{{ $t('list.uploadLimited') }}</n-upload>
     </div>
     <div class="modal-items">
       <p class="modal-items-p">{{ $t('list.category') }}:</p>
@@ -145,6 +147,7 @@ import { generateGifByCostumes, publishAsset, PublishState } from '@/api/asset'
 import { useI18n } from 'vue-i18n'
 import { AssetType } from '@/constant/constant'
 import { isValidAssetName } from '@/util/asset'
+import { useNetworkStore } from '@/store/modules/network'
 
 // ----------props & emit------------------------------------
 interface PropType {
@@ -155,6 +158,8 @@ const message = useMessage()
 const spriteStore = useSpriteStore()
 const backdropStore = useBackdropStore()
 const soundStore = useSoundStore()
+const networkStore = useNetworkStore()
+
 const { t } = useI18n({
   inheritLocale: true
 })

diff --git a/spx-gui/src/components/sprite-list/BackdropList.vue b/spx-gui/src/components/sprite-list/BackdropList.vue
@@ -1,14 +1,13 @@
 <!--
  * @Author: Xu Ning
  * @Date: 2024-01-18 17:08:16
- * @LastEditors: Hu JingJing
- * @LastEditTime: 2024-02-06 17:58:24
+ * @LastEditors: xuning [email protected]
+ * @LastEditTime: 2024-03-13 14:46:09
  * @FilePath: /builder/spx-gui/src/components/sprite-list/BackdropList.vue
  * @Description: 
 -->
 <template>
   <div class="stage-list">
-    {{ $t('stage.stage') }}
     <div class="stage-list-space">
       <AssetAddBtn :type="'backdrop'" />
       <ImageCardCom :type="'bg'" :asset="backdrop" :style="{ 'margin-bottom': '26px' }" />
@@ -29,7 +28,7 @@ const backdropStore = useBackdropStore()
 // ----------computed properties-----------------------------
 // Computed backdrop from backdropStore.
 const backdrop: ComputedRef<Backdrop> = computed(() => {
-  console.log('backdropStore.backdrop', backdropStore.backdrop,backdropStore.backdrop.files)
+  console.log('backdropStore.backdrop', backdropStore.backdrop, backdropStore.backdrop.files)
   return backdropStore.backdrop as Backdrop
 })
 </script>
@@ -41,8 +40,7 @@ const backdrop: ComputedRef<Backdrop> = computed(() => {
   padding: 10px;
   .stage-list-space {
     margin: 0 10px;
-    height: calc(100% - 40px);
-    overflow: scroll;
+    overflow-y: auto;
   }
 }
 </style>
diff --git a/spx-gui/src/components/sprite-list/ImageCardCom.vue b/spx-gui/src/components/sprite-list/ImageCardCom.vue
@@ -2,7 +2,7 @@
  * @Author: Xu Ning
  * @Date: 2024-01-18 17:11:19
  * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-03-11 17:30:22
+ * @LastEditTime: 2024-03-13 12:21:45
  * @FilePath: \spx-gui\src\components\sprite-list\ImageCardCom.vue
  * @Description:
 -->
@@ -24,11 +24,11 @@
     :key="index"
     :class="computedProperties.cardClassName"
     :style="index == 0 ? firstBackdropStyle : ''"
-    @click="() => index === 0 || (scene.scene.name && setSceneToTop(scene.scene.name))"
+    @click.stop="() => index === 0 || (scene.scene.name && setSceneToTop(scene.scene.name))"
   >
     <div
       class="delete-button"
-      @click="() => scene.scene.name && deleteBackdropScene(scene.scene.name)"
+      @click.stop="() => scene.scene.name && deleteBackdropScene(scene.scene.name)"
     >
       ×
     </div>
@@ -143,7 +143,6 @@ const setSceneToTop = (name: string) => {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     color: $sprite-list-card-close-button-x;
     border: 2px solid $sprite-list-card-close-button-border;
-    z-index: 10;
   }
 }
 

diff --git a/spx-gui/src/components/sprite-list/SpriteList.vue b/spx-gui/src/components/sprite-list/SpriteList.vue
@@ -2,7 +2,7 @@
  * @Author: Xu Ning
  * @Date: 2024-01-17 18:11:17
  * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-03-07 21:06:18
+ * @LastEditTime: 2024-03-13 15:43:24
  * @FilePath: \spx-gui\src\components\sprite-list\SpriteList.vue
  * @Description:
 -->
@@ -17,7 +17,7 @@
       </n-button>
     </div>
 
-    <n-grid cols="4" item-responsive responsive="screen">
+    <n-grid cols="4" item-responsive responsive="screen" style="height: 100%">
       <!-- S Layout Sprite List -->
       <n-grid-item class="asset-library-left" span="3">
         <!-- S Component SpriteEditBtn -->
@@ -28,13 +28,6 @@
             <!-- S Component Add Button -->
             <AssetAddBtn :type="'sprite'" />
             <!-- E Component Add Button type second step -->
-            <n-button
-              class="entry-code-btn"
-              :disabled="editorStore.editContentType === EditContentType.EntryCode"
-              @click="enableEditEntryCode"
-            >
-              Entry Code
-            </n-button>
             <!-- S Component ImageCardCom -->
             <ImageCardCom
               v-for="asset in spriteAssets"
@@ -50,8 +43,11 @@
       </n-grid-item>
       <!-- E Layout Sprite List -->
       <!-- S Layout Stage List -->
-      <n-grid-item class="asset-library-right" span="1">
-        <BackdropList />
+      <n-grid-item
+        class="asset-library-right"
+        span="1"
+      >
+      <StageEdit />
       </n-grid-item>
       <!-- E Layout Stage List -->
     </n-grid>
@@ -71,23 +67,20 @@
 
 <script setup lang="ts">
 // ----------Import required packages / components-----------
-import { type ComputedRef, computed, ref } from 'vue'
+import { type ComputedRef, computed, ref, watchEffect } from 'vue'
 import { NGrid, NGridItem, NFlex, NButton, NModal } from 'naive-ui'
 import { useSpriteStore } from '@/store/modules/sprite'
-import BackdropList from '@/components/sprite-list/BackdropList.vue'
+import StageEdit from '@/components/sprite-list/StageEdit.vue'
 import SpriteEditBtn from '@/components/sprite-list/SpriteEditBtn.vue'
 import ImageCardCom from '@/components/sprite-list/ImageCardCom.vue'
 import AssetAddBtn from '@/components/sprite-list/AssetAddBtn.vue'
 import { Sprite } from '@/class/sprite'
-import { watchEffect } from 'vue'
 import LoadFromScratch from 'comps/spx-library/LoadFromScratch.vue'
-import { EditContentType, useEditorStore } from '@/store'
+
 // ----------props & emit------------------------------------
 const currentActiveName = ref('')
-const editorStore = useEditorStore()
 const spriteStore = useSpriteStore()
 const { setCurrentByName } = spriteStore
-
 // ----------data related -----------------------------------
 // Style about import modal body.
 const bodyStyle = { margin: 'auto' }
@@ -112,10 +105,6 @@ const toggleCodeById = (name: string) => {
   setCurrentByName(name)
 }
 
-const enableEditEntryCode = () => {
-  editorStore.setEditContentType(EditContentType.EntryCode)
-}
-
 const getImageCardStyle = (name: string) => {
   return name === currentActiveName.value
     ? { marginBottom: '26px', boxShadow: '0px 0px 0px 4px #FF81A7' }
@@ -135,8 +124,6 @@ watchEffect(() => {
 @import '@/assets/theme.scss';
 
 .asset-library {
-  // TODO: Delete the background, it is just for check the position.
-  // background:#f0f0f0;
   height: calc(60vh - 60px - 24px - 24px);
   border: 2px solid #00142970;
   position: relative;
@@ -159,10 +146,18 @@ watchEffect(() => {
     border-radius: 0 0 10px 10px;
     z-index: 0;
   }
-
-  .asset-library-right {
+  @mixin libraryRightBase {
     max-height: calc(60vh - 60px - 24px);
-    overflow: scroll;
+    overflow-y: auto;
+  }
+  .asset-library-right {
+    @include libraryRightBase;
+    background: white;
+    border-left:2px dashed #8f98a1
+  }
+  .asset-library-right-click {
+    @include libraryRightBase;
+    background: #f7f7f7;
   }
 
   .asset-library-left {