diff --git a/spx-gui/src/components/sprite-list/SpriteEditBtn.vue b/spx-gui/src/components/sprite-list/SpriteEditBtn.vue
index 758ce756c..25e31c9c7 100644
--- a/spx-gui/src/components/sprite-list/SpriteEditBtn.vue
+++ b/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))
diff --git a/spx-gui/src/components/sprite-list/SpriteList.vue b/spx-gui/src/components/sprite-list/SpriteList.vue
index ac846fbc5..60b7797f8 100644
--- a/spx-gui/src/components/sprite-list/SpriteList.vue
+++ b/spx-gui/src/components/sprite-list/SpriteList.vue
@@ -1,9 +1,9 @@
 <!--
  * @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>
@@ -11,7 +11,7 @@
     <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,7 +39,7 @@
 
 <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";
@@ -53,10 +47,11 @@ 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,6 +102,7 @@ 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;
@@ -105,36 +110,41 @@ const getImageCardStyle = (name: string) => {
     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;
   }
diff --git a/spx-gui/src/components/spx-stage/BackdropLayer.vue b/spx-gui/src/components/spx-stage/BackdropLayer.vue
deleted file mode 100644
index a933b26c9..000000000
--- a/spx-gui/src/components/spx-stage/BackdropLayer.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <v-layer>
-    <v-image
-      v-if="imageRef"
-      :config="{
-        image: imageRef,
-      }"
-    />
-  </v-layer>
-</template>
-<script setup lang="ts">
-import { useBackdropStore } from "@/store/modules/backdrop";
-import { watchEffect } from "vue";
-import { ref } from "vue";
-
-const backdropStore = useBackdropStore();
-const imageRef = ref<HTMLImageElement | null>(null);
-
-watchEffect(() => {
-  const src = backdropStore.backdrop.files[0]?.url;
-  if (!src) {
-    imageRef.value = null;
-    return;
-  }
-  const image = new Image();
-  image.src = src;
-  image.onload = () => {
-    imageRef.value = image;
-  };
-});
-</script>
diff --git a/spx-gui/src/components/spx-stage/Costume.vue b/spx-gui/src/components/spx-stage/Costume.vue
deleted file mode 100644
index 7cc0f9c9c..000000000
--- a/spx-gui/src/components/spx-stage/Costume.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 14:19:57
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-01-26 17:04:41
- * @FilePath: /spx-gui/src/components/spx-stage/Costume.vue
- * @Description: 
--->
-<template>
-    <v-image @dragend="handleDragEnd" :config="{
-        image: image,
-        draggable: true,
-        x: SpritePosition.x,
-        y: SpritePosition.y,
-        rotation: SpriteRotation,
-        offsetX: props.costume_config.x,
-        offsetY: props.costume_config.y,
-        scaleX:props.sprite_config.size,
-        scaleY:props.sprite_config.size
-    }" />
-</template>
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import { defineProps, onMounted, ref, computed, watchEffect, onUnmounted } from "vue"
-import Calf from "./calf-0.png"
-
-
-
-// ----------props & emit------------------------------------
-const props = defineProps<{
-    sprite_config: {
-        x: number,
-        y: number,
-        heading: number,
-        size:number
-    },
-    costume_config: {
-        x: number,
-        y: number,
-        url: string
-    }
-}>()
-// define the emits
-const emits = defineEmits<{
-    // when ths costume dragend,emit the sprite position
-    (e: 'onDragEnd', spirte: { x: number, y: number; }): void
-}>()
-
-
-
-
-// ----------data related -----------------------------------
-// TODO use the spx's costume image
-const image = ref<HTMLImageElement>()
-
-// ----------computed properties-----------------------------
-// Computed spx's sprite position to konva's relative position by about changing sprite postion
-const SpritePosition = computed(() => {
-    return getRelativePosition(
-        props.sprite_config.x,
-        props.sprite_config.y
-    );
-})
-
-// Computed spx's sprite heading to konva's rotation by about changing sprite heading
-const SpriteRotation = computed(() => {
-    return getRotation(props.sprite_config.heading);
-})
-
-// watch the url change to change the image
-const stop = watchEffect(() => {
-    
-    const _image = new window.Image();
-    _image.src = props.costume_config.url;
-    _image.onload = () => {
-        image.value = _image;
-        console.log(_image.width, _image.height)
-    };
-})
-
-// ----------lifecycle hooks---------------------------------
-
-// TODO:use the costume image
-onUnmounted(() => stop())
-
-// ----------methods-----------------------------------------
-/**
- * @description: map spx's sprite position to konva's relative position
- * @param {*} x
- * @param {*} y
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 14:52:50
- */
-const getRelativePosition = (x: number, y: number): { x: number; y: number; } => {
-    // 返回计算后的位置  stage.width / 2 + x ，stage.height / 2 + y
-    return {
-        x: 500 / 2 + x,
-        y: 300 / 2 - y,
-    };
-};
-
-/**
- * @description: map spx's sprite heading to konva's rotation
- * @param {*} heading
- * @return {*}
- */
-const getRotation = (heading: number): number => {
-    return heading - 90
-};
-
-
-/**
- * @description: map konva's relative postion to spx's position
- * @param {*} x
- * @param {*} y
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:28:36
- */
-const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
-    return {
-        x: x - 500 / 2,
-        y: 300 / 2 - y,
-    }
-}
-
-/**
- * @description: when ths costume dragend,map and emit the sprite position
- * @param {*} event
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:44:18
- */
-const handleDragEnd = (event) => {
-    console.log(getSpxPostion(event.target.attrs.x, event.target.attrs.y))
-    emits('onDragEnd', { ...getSpxPostion(event.target.attrs.x, event.target.attrs.y) })
-}
-
-</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/spx-stage/Sprite.vue b/spx-gui/src/components/spx-stage/Sprite.vue
deleted file mode 100644
index fee25b2df..000000000
--- a/spx-gui/src/components/spx-stage/Sprite.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-24 15:48:38
- * @LastEditors: xuning 453594138@qq.com
- * @LastEditTime: 2024-02-06 12:56:22
- * @FilePath: /spx-gui/src/components/spx-stage/Sprite.vue
- * @Description: 
--->
-<template>
-  <Costume
-    @on-drag-end="onDragEnd"
-    :sprite_config="{
-      x: currentCostume.sx as number,
-      y: currentCostume.sy as number,
-      heading: currentCostume.heading,
-      size: currentCostume.size
-    }"
-    :costume_config="{
-      x: currentCostume.cx as number,
-      y: currentCostume.cy as number,
-      url: currentCostume.url as string
-    }"
-  ></Costume>
-</template>
-<script lang="ts" setup>
-// TODO:use the interface from filemanager
-import type { SpriteConfig, Costume as CostumeConfig } from '@/interface/file'
-// import SpriteType from '@/class/sprite'
-//TODO xn 
-import Costume from './Costume.vue'
-import { defineProps, onMounted, computed, defineEmits, type ComputedRef } from 'vue'
-
-// ----------props & emit------------------------------------
-// const props = defineProps<{
-//   config: SpriteType
-// }>()
-const props = defineProps<{
-  config: any
-}>()
-
-// when ths costume dragend,emit the sprite position
-const emits = defineEmits<{
-  (e: 'onDragEnd', spirte: { x: number; y: number }): void
-}>()
-
-// ----------computed properties-----------------------------
-// computed the current costume with current image
-const currentCostume: ComputedRef<CostumeConfig & SpriteConfig> = computed(() => {
-  console.log(props.config)
-  return props.config.currentCostumeConfig
-})
-
-onMounted(() => {
-  console.log(props.config)
-})
-
-// ----------methods-----------------------------------------
-
-/**
- * @description: function about the costume is dragged
- * @param {*} e
- * @param {*} y
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:39:27
- */
-const onDragEnd = (e: { x: number; y: number }) => {
-  emits('onDragEnd', e)
-}
-</script>
diff --git a/spx-gui/src/components/spx-stage/SpriteLayer.vue b/spx-gui/src/components/spx-stage/SpriteLayer.vue
deleted file mode 100644
index 5398b0915..000000000
--- a/spx-gui/src/components/spx-stage/SpriteLayer.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 16:13:37
- * @LastEditors: Xu Ning
- * @LastEditTime: 2024-02-05 11:16:22
- * @FilePath: /spx-gui/src/components/spx-stage/SpriteLayer.vue
- * @Description: 
--->
-<template>
-    <v-layer>
-        <Sprite v-if="spriteStore.current" @on-drag-end="onSpriteDragEnd"  :config="spriteStore.current" />
-    </v-layer>
-</template>
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import Sprite from "./Sprite.vue"
-import { ref, computed,onMounted } from "vue"
-// todo:use the filemanager's interface of spirteConfig
-// import { useSpriteStore } from "@/store";
-// const spriteStore = useSpriteStore()
-const spriteStore = {current:''}
-
-onMounted(()=>{
-    console.log(spriteStore.current)
-})
-// ----------methods-----------------------------------------
-
-/**
- * @todo set to store
- * @description: When the sprite is dragged, update the sprite's position to the store
- * @param {*} e
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:47:53
- */
-const onSpriteDragEnd = (e: { x: number, y: number }) => {
-    // spriteStore.current?.setSx(e.x)
-    // spriteStore.current?.setSy(e.y)
-}
-</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/spx-stage/SpxStage.vue b/spx-gui/src/components/spx-stage/SpxStage.vue
index 1eade491c..cb07c5257 100644
--- a/spx-gui/src/components/spx-stage/SpxStage.vue
+++ b/spx-gui/src/components/spx-stage/SpxStage.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang zhiyang
  * @Date: 2024-01-15 14:56:59
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 17:17:11
+ * @LastEditTime: 2024-02-07 18:02:21
  * @FilePath: /spx-gui/src/components/spx-stage/SpxStage.vue
  * @Description: 
 -->
@@ -35,7 +35,7 @@ const backdropStore = useBackdropStore();
 const projectStore = useProjectStore();
 const spriteStore = useSpriteStore();
 
-const currentSpriteNames = ref<String[]>([])
+const currentSpriteNames = ref<string[]>([])
 
 const onSpritesDragEnd = (e: SpriteDragEndEvent) => {
   spriteStore.setCurrentByName(e.targets[0].sprite.name)
diff --git a/spx-gui/src/components/spx-stage/StageViewer.vue b/spx-gui/src/components/spx-stage/StageViewer.vue
deleted file mode 100644
index 03f7f4c28..000000000
--- a/spx-gui/src/components/spx-stage/StageViewer.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-24 15:33:08
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-01-25 17:50:19
- * @FilePath: /builder/spx-gui/src/components/spx-stage/StageViewer.vue
- * @Description: 
--->
-<template>
-    <!-- <div style="position:absolute;right: 0; display: flex;justify-content: end;align-items: center;flex-direction: column;">
-        <div>spriteX:<n-input-number v-model:value="sprite.x"></n-input-number></div>
-        <div>spriteY:<n-input-number v-model:value="sprite.y"></n-input-number></div>
-        <div>heading: <n-input-number :min="-180" :max="180" placeholder="请输入角度"
-                v-model:value="sprite.heading"></n-input-number></div>
-        <div>costumeIndex: <n-input-number :min="0" :max="sprite.costumes.length - 1"
-                v-model:value="sprite.costumeIndex"></n-input-number></div>
-        <div>costumeX:<n-input-number v-model:value="currentCostume.x"></n-input-number></div>
-        <div>costumeY:<n-input-number v-model:value="currentCostume.y"></n-input-number></div>
-    </div> -->
-    <div id="stage-viewer">
-        <div class="stage-viewer-wrapper" :style="{ width: stageConfig.width, height: stageConfig.height }">
-            <v-stage :config="stageConfig">
-                <BackdropLayer />
-                <SpriteLayer />
-            </v-stage>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-// ----------Import required packages / components-----------
-import { computed } from "vue"
-import { useStageStore } from "@/store"
-import SpriteLayer from "./SpriteLayer.vue"
-import BackdropLayer from "./BackdropLayer.vue"
-
-// ----------props & emit------------------------------------
-const stageStore = useStageStore()
-
-// ----------computed properties-----------------------------
-
-const stageConfig = computed(() => {
-    return {
-        ...stageStore.stageConfig
-    }
-})
-
-
-</script>
-<style>
-#stage-viewer {
-    height: 300px;
-    display: flex;
-    justify-content: center;
-}
-
-.stage-viewer-wrapper {
-    border: 1px solid black;
-}
-</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/spx-stage/calf-0.png b/spx-gui/src/components/spx-stage/calf-0.png
deleted file mode 100644
index 241477242..000000000
Binary files a/spx-gui/src/components/spx-stage/calf-0.png and /dev/null differ
diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
index 429d931f4..a1fc77356 100644
--- a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
+++ b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:18:34
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 16:13:43
+ * @LastEditTime: 2024-02-07 16:40:21
  * @FilePath: /spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
  * @Description:
 -->
@@ -83,7 +83,7 @@ const projectId = computed(() => project.value.title)
 
 const currentSprite = ref<Sprite | null>(null);
 
-const currentSpriteNames = ref<String[]>([])
+const currentSpriteNames = ref<string[]>([])
 
 
 const sprites: ComputedRef<StageSprite[]> = computed(() => {
diff --git a/spx-gui/src/components/stage-viewer/SpriteLayer.vue b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
index 79ef1fdc8..bdae5a169 100644
--- a/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+++ b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 15:31:49
+ * @LastEditTime: 2024-02-07 16:40:01
  * @FilePath: /spx-gui/src/components/stage-viewer/SpriteLayer.vue
  * @Description: 
 -->
@@ -30,7 +30,7 @@ const props = defineProps<{
     offsetConfig: { offsetX: number, offsetY: number },
     mapConfig: MapConfig
     sprites: StageSprite[]
-    currentSpriteNames: String[]
+    currentSpriteNames: string[]
 }>()
 
 const isVisibleInStage = (sprite: StageSprite) => {
diff --git a/spx-gui/src/components/stage-viewer/index.ts b/spx-gui/src/components/stage-viewer/index.ts
index 7051acbfe..d433cc039 100644
--- a/spx-gui/src/components/stage-viewer/index.ts
+++ b/spx-gui/src/components/stage-viewer/index.ts
@@ -71,7 +71,7 @@ export interface StageViewerProps {
     mapConfig?: MapConfig // some spx project havent this config,the stage size will depend on the SceneSize
     sprites: StageSprite[] // sprite list
     backdrop?: StageBackdrop // backdrop 
-    currentSpriteNames: String[]
+    currentSpriteNames: string[]
 }