feat(gui):modify the active logic of sprite-card

spx-gui/src/components/sprite-list/SpriteEditBtn.vue

@@ -2,7 +2,7 @@
  * @Author: Xu Ning
  * @Date: 2024-01-18 17:09:35
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 17:23:47
+ * @LastEditTime: 2024-02-07 17:43:33
  * @FilePath: /spx-gui/src/components/sprite-list/SpriteEditBtn.vue
  * @Description: 
 -->
@@ -62,8 +62,7 @@ import { useSpriteStore } from '@/store/modules/sprite'
 const spriteStore = useSpriteStore()
 
 // ----------data related -----------------------------------
-// Ref about show sprite state
-const isSpriteShow = ref<boolean>(true)
+
 
 const x = computed(() => (spriteStore.current ? spriteStore.current.config.x : 0))
 const y = computed(() => (spriteStore.current ? spriteStore.current.config.y : 0))

spx-gui/src/components/sprite-list/SpriteList.vue

@@ -1,17 +1,17 @@
 <!--
  * @Author: Xu Ning
  * @Date: 2024-01-17 18:11:17
- * @LastEditors: Xu Ning
- * @LastEditTime: 2024-02-05 16:51:53
- * @FilePath: /builder/spx-gui/src/components/sprite-list/SpriteList.vue
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-07 17:53:50
+ * @FilePath: /spx-gui/src/components/sprite-list/SpriteList.vue
  * @Description: 
 -->
 <template>
   <div class="asset-library">
     <div class="asset-library-edit-button">Edit</div>
     <n-grid cols="4" item-responsive responsive="screen">
       <!-- S Layout Sprite List -->
-      <n-grid-item  class="asset-library-left" span="3">
+      <n-grid-item class="asset-library-left" span="3">
         <!-- S Component SpriteEditBtn -->
         <SpriteEditBtn />
         <!-- E Component SpriteEditBtn -->
@@ -21,14 +21,8 @@
             <SpriteAddBtn :type="'sprite'" />
             <!-- E Component Add Button type second step -->
             <!-- S Component ImageCardCom -->
-            <ImageCardCom
-              v-for="asset in spriteAssets"
-              :key="asset.name"
-              :type="'sprite'"
-              :asset="asset"
-              :style="getImageCardStyle(asset.name)"
-              @click="toggleCodeById(asset.name)"
-            />
+            <ImageCardCom v-for="asset in spriteAssets" :key="asset.name" :type="'sprite'" :asset="asset"
+              :style="getImageCardStyle(asset.name)" @click="toggleCodeById(asset.name)" />
             <!-- E Component ImageCardCom -->
           </n-flex>
         </div>
@@ -45,18 +39,19 @@
 
 <script setup lang="ts">
 // ----------Import required packages / components-----------
-import { type ComputedRef, computed,ref } from "vue";
+import { type ComputedRef, computed, ref, watch } from "vue";
 import { NGrid, NGridItem, NFlex } from "naive-ui";
 import { useSpriteStore } from '@/store/modules/sprite';
 import BackdropList from "@/components/sprite-list/BackdropList.vue";
 import SpriteEditBtn from "@/components/sprite-list/SpriteEditBtn.vue";
 import ImageCardCom from "@/components/sprite-list/ImageCardCom.vue";
 import SpriteAddBtn from "@/components/sprite-list/SpriteAddBtn.vue";
 import { Sprite } from "@/class/sprite";
+import { watchEffect } from "vue";
 
 // ----------props & emit------------------------------------
 const currentActiveName = ref('');
-const spriteStore = useSpriteStore(); 
+const spriteStore = useSpriteStore();
 const { setCurrentByName } = spriteStore;
 
 // ----------computed properties-----------------------------
@@ -73,7 +68,7 @@ const spriteAssets: ComputedRef<Sprite[]> = computed(
  * @Date: 2024-02-01 10:51:23
  */
 const toggleCodeById = (name: string) => {
-  console.log('name',name)
+  console.log('name', name)
   currentActiveName.value = name;
   setCurrentByName(name);
 };
@@ -83,10 +78,19 @@ const getImageCardStyle = (name: string) => {
     ? { marginBottom: '26px', boxShadow: '0px 0px 0px 4px #FF81A7' }
     : { marginBottom: '26px' };
 };
+
+watchEffect(() => {
+  if (spriteStore.current) {
+    currentActiveName.value = spriteStore.current.name;
+  } else {
+    currentActiveName.value = '';
+  }
+})
 </script>
 
 <style scoped lang="scss">
 @import "@/assets/theme.scss";
+
 .asset-library {
   // TODO: Delete the background, it is just for check the position.
   // background:#f0f0f0;
@@ -98,43 +102,49 @@ const getImageCardStyle = (name: string) => {
   margin: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+
   .asset-library-edit-button {
     background: rgba(255, 170, 0, 0.5);
     width: 80px;
     height: auto;
     text-align: center;
     position: absolute;
     top: -2px;
-    left:8px;
+    left: 8px;
     font-size: 18px;
     border: 2px solid #00142970;
     border-radius: 0 0 10px 10px;
     z-index: 2;
   }
+
   .asset-library-right {
     max-height: calc(60vh - 60px - 24px);
     overflow: scroll;
   }
-  .asset-library-left{
-    margin-top:30px;
+
+  .asset-library-left {
+    margin-top: 30px;
     max-height: calc(60vh - 60px - 24px - 40px);
     overflow: scroll;
-    padding:10px;
+    padding: 10px;
   }
 }
 </style>
 
 <style lang="scss">
 @import "@/assets/theme.scss";
+
 // ! no scoped, it will change global style
 .n-card {
   width: 80vw;
   border-radius: 25px;
+
   .n-card-header {
     border-radius: 25px 25px 0 0;
     background: $asset-library-card-title-1;
     text-align: center;
   }
+
   .n-card__content {
     padding: 0 !important;
   }