From a74073f9c179fff5b4942a6a68c85db45967c5fd Mon Sep 17 00:00:00 2001
From: Germey <germey@acedata.cloud>
Date: Wed, 24 Jul 2024 02:15:38 +0800
Subject: [PATCH] update suno list and player

---
 src/components/suno/RecentPanel.vue           |   9 +-
 src/components/suno/config/TypeSelector.vue   |   6 +-
 src/components/suno/footer/PlayerAction.vue   |  37 --
 src/components/suno/footer/PlayerSong.vue     |  58 ---
 .../{footer/Footer.vue => player/Player.vue}  |  10 +-
 src/components/suno/player/PlayerAction.vue   |  32 ++
 .../{footer => player}/PlayerController.vue   |  41 +--
 .../suno/{footer => player}/PlayerSlider.vue  |  26 +-
 src/components/suno/player/PlayerSong.vue     |  51 +++
 .../{footer => player}/PlayerVolumeSlider.vue |   8 +-
 src/components/suno/task/Preview.vue          |  99 +++++-
 src/pages/suno/Index.vue                      |  11 -
 src/store/suno/actions.ts                     | 333 +++++++++---------
 src/store/suno/index.ts                       |  27 +-
 src/store/suno/models.ts                      |   3 +-
 src/store/suno/mutations.ts                   | 240 ++++++-------
 src/store/suno/persist.ts                     |   2 +-
 src/store/suno/state.ts                       |  45 +--
 18 files changed, 534 insertions(+), 504 deletions(-)
 delete mode 100644 src/components/suno/footer/PlayerAction.vue
 delete mode 100644 src/components/suno/footer/PlayerSong.vue
 rename src/components/suno/{footer/Footer.vue => player/Player.vue} (75%)
 create mode 100644 src/components/suno/player/PlayerAction.vue
 rename src/components/suno/{footer => player}/PlayerController.vue (52%)
 rename src/components/suno/{footer => player}/PlayerSlider.vue (68%)
 create mode 100644 src/components/suno/player/PlayerSong.vue
 rename src/components/suno/{footer => player}/PlayerVolumeSlider.vue (82%)

diff --git a/src/components/suno/RecentPanel.vue b/src/components/suno/RecentPanel.vue
index 60095c40..664ef909 100644
--- a/src/components/suno/RecentPanel.vue
+++ b/src/components/suno/RecentPanel.vue
@@ -29,7 +29,7 @@
   </div>
   <div class="flex-1 flex flex-col">
     <div class="h-20">
-      <Footer />
+      <player />
     </div>
   </div>
 </template>
@@ -37,9 +37,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskPreview from './task/Preview.vue';
-import Footer from '@/components/suno/footer/Footer.vue';
+import Player from '@/components/suno/player/Player.vue';
 import { ElSkeleton, ElSkeletonItem } from 'element-plus';
-import { ISunoAudio, ISunoAudioLyric, ISunoTask } from '@/models';
+// import { ISunoAudio, ISunoAudioLyric, ISunoTask } from '@/models';
 
 export default defineComponent({
   name: 'RecentPanel',
@@ -47,7 +47,7 @@ export default defineComponent({
     TaskPreview,
     ElSkeleton,
     ElSkeletonItem,
-    Footer
+    Player
   },
   data() {
     return {
@@ -90,7 +90,6 @@ export default defineComponent({
     .tasks {
       width: 100%;
       .task {
-        margin-bottom: 15px;
         width: 100%;
         height: fit-content;
         text-align: left;
diff --git a/src/components/suno/config/TypeSelector.vue b/src/components/suno/config/TypeSelector.vue
index 883554c8..941e00e5 100644
--- a/src/components/suno/config/TypeSelector.vue
+++ b/src/components/suno/config/TypeSelector.vue
@@ -32,15 +32,15 @@ export default defineComponent({
       options: [
         {
           label: this.$t('suno.model.model1'),
-          value: this.$t('suno.value.model1')
+          value: 'chirp-v2-xxl-alpha'
         },
         {
           label: this.$t('suno.model.model2'),
-          value: this.$t('suno.value.model2')
+          value: 'chirp-v3-0'
         },
         {
           label: this.$t('suno.model.model3'),
-          value: this.$t('suno.value.model3')
+          value: 'chirp-v3-5'
         }
       ]
     };
diff --git a/src/components/suno/footer/PlayerAction.vue b/src/components/suno/footer/PlayerAction.vue
deleted file mode 100644
index 4c62023c..00000000
--- a/src/components/suno/footer/PlayerAction.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="flex justify-end items-center gap-x-2.5">
-    <span class="text-xs"> {{ useFormatDuring(currentTime) }} / {{ useFormatDuring(duration) }} </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { MusicList, TextMessage } from '@icon-park/vue-next';
-import { useFormatDuring } from '@/utils/number';
-import IconPark from '@/components/common/IconPark.vue';
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-const store = useStore();
-
-// 创建响应式引用
-// 状态
-const currentTime = computed({
-  get: () => store.state.suno.player.currentTime,
-  set: (value) => store.commit('suno/setCurrentTime', value)
-});
-
-const duration = computed({
-  get: () => store.state.suno.player.duration,
-  set: (value) => store.commit('suno/setDuration', value)
-});
-
-const showPlayList = computed({
-  get: () => store.state.suno.player.showPlayList,
-  set: (value) => store.commit('suno/setShowPlayList', value)
-});
-
-// Getter
-const playListCount = computed(() => store.getters['suno/playListCount']);
-// const { currentTime, duration, playListCount, showPlayList } = storeToRefs(usePlayerStore());
-</script>
-
-<style lang="scss"></style>
diff --git a/src/components/suno/footer/PlayerSong.vue b/src/components/suno/footer/PlayerSong.vue
deleted file mode 100644
index 628b8ecd..00000000
--- a/src/components/suno/footer/PlayerSong.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="flex player-song">
-    <img alt="" class="w-11 h-11 rounded" :src="song?.image_url || OpticalDisk" />
-    <div class="ml-2 text-xs flex flex-col justify-between">
-      <div class="w-52 2xl:w-96 cursor-pointer truncate">
-        <div class="flex">
-          <span>{{ song?.title || 'Music' }}</span>
-          <span class="ml-2 text-dc">- {{ song?.style || `SmallRuralDog` }}</span>
-        </div>
-      </div>
-      <div class="flex gap-x-3 text-main">
-        <IconPark :icon="ThumbsUp" size="18" :stroke-width="3" class="text-slate-400 hover-text" />
-        <IconPark :icon="ThumbsDown" size="18" :stroke-width="3" class="text-slate-400 hover-text" />
-        <IconPark :icon="Share" size="18" :stroke-width="3" class="text-slate-400 hover-text" />
-        <IconPark :icon="MoreThree" size="18" :stroke-width="3" class="text-slate-400 hover-text" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Like, DownTwo, MoreTwo, Comment, ThumbsUp, ThumbsDown, Share, MoreFour, MoreThree } from '@icon-park/vue-next';
-// import { usePlayerStore } from '@/stores/player';
-import { OpticalDisk } from '@/assets/img';
-import IconPark from '@/components/common/IconPark.vue';
-import { ElBadge } from 'element-plus';
-
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-const store = useStore();
-// 状态
-const song = computed({
-  get: () => store.state.suno.player.song,
-  set: (value) => store.commit('suno/setSong', value)
-});
-
-const duration = computed({
-  get: () => store.state.suno.player.duration,
-  set: (value) => store.commit('suno/setDuration', value)
-});
-
-// 方法
-const onSliderInput = () => store.dispatch('suno/onSliderInput');
-const onSliderChange = () => store.dispatch('suno/onSliderChange');
-
-// const { song, songUrl } = toRefs(usePlayerStore());
-</script>
-
-<style lang="scss">
-.player-song {
-  .badge {
-    .el-badge__content {
-      @apply scale-75 left-1 bg-stone-100 text-slate-500 bg-opacity-80 right-auto;
-      @apply dark:bg-stone-900;
-    }
-  }
-}
-</style>
diff --git a/src/components/suno/footer/Footer.vue b/src/components/suno/player/Player.vue
similarity index 75%
rename from src/components/suno/footer/Footer.vue
rename to src/components/suno/player/Player.vue
index a87d8111..d956326a 100644
--- a/src/components/suno/footer/Footer.vue
+++ b/src/components/suno/player/Player.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="flex flex-col items-stretch h-20">
-    <!-- 歌曲进度条 -->
-    <PlayerSlider />
+    <player-slider />
     <div class="flex grow px-5 items-center">
       <div class="flex-1">
-        <PlayerSong />
+        <player-song />
       </div>
       <div class="flex-1">
-        <PlayerController />
+        <player-controller />
       </div>
       <div class="flex-1">
-        <PlayerAction />
+        <player-action />
       </div>
     </div>
   </div>
@@ -22,4 +21,3 @@ import PlayerSong from './PlayerSong.vue';
 import PlayerAction from './PlayerAction.vue';
 import PlayerController from './PlayerController.vue';
 </script>
-<style lang="scss"></style>
diff --git a/src/components/suno/player/PlayerAction.vue b/src/components/suno/player/PlayerAction.vue
new file mode 100644
index 00000000..2b1f7810
--- /dev/null
+++ b/src/components/suno/player/PlayerAction.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="flex justify-end items-center gap-x-2.5">
+    <span class="text-xs"> {{ useFormatDuring(currentTime) }} / {{ useFormatDuring(duration) }} </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFormatDuring } from '@/utils/number';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+const store = useStore();
+
+const currentTime = computed({
+  get: () => store.state.suno?.audio?.currentTime,
+  set: (value) =>
+    store.commit('suno/setAudio', {
+      ...store.state.suno.audio,
+      currentTime: value
+    })
+});
+
+const duration = computed({
+  get: () => store.state.suno?.audio?.duration,
+  set: (value) =>
+    store.commit('suno/setAudio', {
+      ...store.state.suno.audio,
+      duration: value
+    })
+});
+</script>
+
+<style lang="scss"></style>
diff --git a/src/components/suno/footer/PlayerController.vue b/src/components/suno/player/PlayerController.vue
similarity index 52%
rename from src/components/suno/footer/PlayerController.vue
rename to src/components/suno/player/PlayerController.vue
index 60336359..33f17710 100644
--- a/src/components/suno/footer/PlayerController.vue
+++ b/src/components/suno/player/PlayerController.vue
@@ -1,13 +1,5 @@
 <template>
   <div class="flex items-center justify-center gap-x-3">
-    <IconPark
-      :icon="loopType === 0 ? PlayOnce : loopType === 1 ? LoopOnce : ShuffleOne"
-      size="20"
-      :stroke-width="3"
-      class="hover-text"
-      @click="toggleLoop"
-    />
-    <IconPark :icon="GoStart" size="28" theme="filled" class="hover-text" @click="prev" />
     <IconPark
       :icon="isPause ? Play : PauseOne"
       size="45"
@@ -15,7 +7,6 @@
       class="hover-text text-emerald-400"
       @click="togglePlay"
     />
-    <IconPark :icon="GoEnd" size="28" class="hover-text" @click="next" />
     <el-popover placement="top" width="50px">
       <template #reference>
         <IconPark :icon="VolumeSmall" size="20" :stroke-width="3" class="hover-text" />
@@ -28,27 +19,31 @@
 <script setup lang="ts">
 import { Play, PauseOne, LoopOnce, ShuffleOne, PlayOnce, GoEnd, GoStart, VolumeSmall } from '@icon-park/vue-next';
 import IconPark from '@/components/common/IconPark.vue';
-import PlayerVolumeSlider from '@/components/suno/footer/PlayerVolumeSlider.vue';
+import PlayerVolumeSlider from './PlayerVolumeSlider.vue';
 import { ElPopover } from 'element-plus';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 const store = useStore();
-// 状态
-const loopType = computed({
-  get: () => store.state.suno.player.loopType,
-  set: (value) => store.commit('suno/setCurrentTime', value)
-});
+// // 状态
+// const loopType = computed({
+//   get: () => store.state.suno.player.loopType,
+//   set: (value) => store.commit('suno/setCurrentTime', value)
+// });
 
-const isPause = computed({
-  get: () => store.state.suno.player.isPause,
-  set: (value) => store.commit('suno/setIsPause', value)
-});
+// const isPause = computed({
+//   get: () => store.state.suno.player.isPause,
+//   set: (value) => store.commit('suno/setIsPause', value)
+// });
 
 // 方法
-const toggleLoop = () => store.dispatch('suno/toggleLoop');
-const next = () => store.dispatch('suno/next');
-const prev = () => store.dispatch('suno/prev');
-const togglePlay = () => store.dispatch('suno/togglePlay');
+// const toggleLoop = () => store.dispatch('suno/toggleLoop');
+// const next = () => store.dispatch('suno/next');
+// const prev = () => store.dispatch('suno/prev');
+const togglePlay = () =>
+  store.dispatch('suno/setAudio', {
+    ...store.state.suno.audio,
+    isPause: !store.state.suno.audio.isPause
+  });
 
 // const {toggleLoop, loopType, next,prev, togglePlay, isPause} = toRefs(usePlayerStore())
 </script>
diff --git a/src/components/suno/footer/PlayerSlider.vue b/src/components/suno/player/PlayerSlider.vue
similarity index 68%
rename from src/components/suno/footer/PlayerSlider.vue
rename to src/components/suno/player/PlayerSlider.vue
index 17a0e2af..7f623481 100644
--- a/src/components/suno/footer/PlayerSlider.vue
+++ b/src/components/suno/player/PlayerSlider.vue
@@ -12,27 +12,31 @@
 </template>
 
 <script setup lang="ts">
-// import { usePlayerStore } from '@/stores/player';
 import { ElSlider } from 'element-plus';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+
 const store = useStore();
-// 状态
 const currentTime = computed({
-  get: () => store.state.suno.player.currentTime,
-  set: (value) => store.commit('suno/setCurrentTime', value)
+  get: () => store.state.suno?.audio?.currentTime,
+  set: (value) =>
+    store.commit('suno/setAudio', {
+      ...store.state.suno.audio,
+      currentTime: value
+    })
 });
 
 const duration = computed({
-  get: () => store.state.suno.player.duration,
-  set: (value) => store.commit('suno/setDuration', value)
+  get: () => store.state.suno?.audio?.duration,
+  set: (value) => store.commit('suno/setAudio', { ...store.state.suno.audio, duration: value })
 });
 
-// 方法
-const onSliderInput = () => store.dispatch('suno/onSliderInput');
-const onSliderChange = (val: number) => store.dispatch('suno/onSliderChange', val);
-
-// const { duration, currentTime, onSliderInput, onSliderChange } = toRefs(usePlayerStore());
+const onSliderInput = () => {};
+const onSliderChange = (val: number) =>
+  store.dispatch('suno/setAudio', {
+    ...store.state.suno.audio,
+    currentTime: val
+  });
 </script>
 
 <style lang="scss">
diff --git a/src/components/suno/player/PlayerSong.vue b/src/components/suno/player/PlayerSong.vue
new file mode 100644
index 00000000..33474798
--- /dev/null
+++ b/src/components/suno/player/PlayerSong.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex player-song">
+    <img alt="" class="w-11 h-11 rounded" :src="audio?.image_url || OpticalDisk" />
+    <div class="ml-2 text-xs flex flex-col justify-between">
+      <div class="w-52 2xl:w-96 cursor-pointer truncate">
+        <div class="flex">
+          <span>{{ audio?.title || 'Music' }}</span>
+          <span class="ml-2 text-dc">- {{ audio?.style || `SmallRuralDog` }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Like, DownTwo, MoreTwo, Comment, ThumbsUp, ThumbsDown, Share, MoreFour, MoreThree } from '@icon-park/vue-next';
+// import { usePlayerStore } from '@/stores/player';
+import { OpticalDisk } from '@/assets/img';
+import IconPark from '@/components/common/IconPark.vue';
+import { ElBadge } from 'element-plus';
+
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+const store = useStore();
+const audio = computed({
+  get: () => store.state.suno.audio,
+  set: (value) => store.commit('suno/setAudio', value)
+});
+
+// const duration = computed({
+//   get: () => store.state.suno.player.duration,
+//   set: (value) => store.commit('suno/setDuration', value)
+// });
+
+// // 方法
+// const onSliderInput = () => store.dispatch('suno/onSliderInput');
+// const onSliderChange = () => store.dispatch('suno/onSliderChange');
+
+// const { song, songUrl } = toRefs(usePlayerStore());
+</script>
+
+<style lang="scss">
+.player-song {
+  .badge {
+    .el-badge__content {
+      @apply scale-75 left-1 bg-stone-100 text-slate-500 bg-opacity-80 right-auto;
+      @apply dark:bg-stone-900;
+    }
+  }
+}
+</style>
diff --git a/src/components/suno/footer/PlayerVolumeSlider.vue b/src/components/suno/player/PlayerVolumeSlider.vue
similarity index 82%
rename from src/components/suno/footer/PlayerVolumeSlider.vue
rename to src/components/suno/player/PlayerVolumeSlider.vue
index fe859993..5d1ada5a 100644
--- a/src/components/suno/footer/PlayerVolumeSlider.vue
+++ b/src/components/suno/player/PlayerVolumeSlider.vue
@@ -36,13 +36,13 @@ const store = useStore();
 
 // 创建响应式引用
 const volume = computed({
-  get: () => store.state.suno.player.volume,
-  set: (value) => store.commit('suno/setVolume', value)
+  get: () => store.state.suno.audio?.volume,
+  set: (value) => store.commit('suno/setAudio', { ...store.state.suno.audio, volume: value })
 });
 
 const muted = computed({
-  get: () => store.state.suno.player.muted,
-  set: (value) => store.commit('suno/setMuted', value)
+  get: () => store.state.suno.audio?.muted,
+  set: (value) => store.commit('suno/setAudio', { ...store.state.suno.audio, muted: value })
 });
 
 // 方法
diff --git a/src/components/suno/task/Preview.vue b/src/components/suno/task/Preview.vue
index e5ae8179..18907ad9 100644
--- a/src/components/suno/task/Preview.vue
+++ b/src/components/suno/task/Preview.vue
@@ -1,20 +1,23 @@
 <template>
-  <div class="flex-shrink-0 flex-1 flex items-center justify-between pr-5">
-    <div v-for="(audio, audioIndex) in audios" :key="audioIndex">
+  <div class="task">
+    <div v-for="(audio, audioIndex) in audios" :key="audioIndex" class="audio" @click="onClick(audio)">
       <div class="left">
-        <el-image :src="audio?.image_url" class="cover-image" fit="cover">
+        <el-image :src="audio?.image_url" class="cover" fit="cover">
           <template #placeholder>
             <div class="image-slot">...</div>
           </template>
         </el-image>
-        <div class="play-overlay" @click="onTogglePlay">
+        <div class="overlay" @click="onTogglePlay">
           <el-icon><video-pause /></el-icon>
         </div>
-        <div class="play-overlay" @click="onTogglePlay">
+        <div class="overlay" @click="onTogglePlay">
           <el-icon><video-play /></el-icon>
         </div>
       </div>
-      <div class="info"></div>
+      <div class="info">
+        <h2 class="title">{{ audio?.title }}</h2>
+        <p class="style">{{ audio?.style }}</p>
+      </div>
     </div>
   </div>
 </template>
@@ -28,7 +31,12 @@ import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
 
 export default defineComponent({
   name: 'TaskPreview',
-  components: {},
+  components: {
+    ElImage,
+    ElIcon,
+    VideoPlay,
+    VideoPause
+  },
   props: {
     modelValue: {
       type: Object as () => ISunoTask,
@@ -39,6 +47,9 @@ export default defineComponent({
     return {};
   },
   computed: {
+    task() {
+      return this.$store.state.suno?.tasks;
+    },
     audios(): ISunoAudio[] {
       let result: ISunoAudio[] = [];
       if (Array.isArray(this.modelValue?.response?.data)) {
@@ -47,6 +58,7 @@ export default defineComponent({
           result.push(audio);
         });
       }
+      console.log('audios', result);
       return result;
     },
     application() {
@@ -60,7 +72,80 @@ export default defineComponent({
     useFormatDuring,
     onTogglePlay() {
       console.log('on toggle play');
+    },
+    onClick(audio: ISunoAudio) {
+      console.log('on click', audio);
     }
   }
 });
 </script>
+
+<style lang="scss">
+.task {
+  display: flex;
+  flex-direction: column;
+  .audio {
+    display: flex;
+    margin-bottom: 10px;
+    .left {
+      position: relative;
+      width: 100px;
+      height: 100px;
+      margin-right: 16px;
+      flex-shrink: 0;
+
+      &:hover .overlay {
+        display: block;
+      }
+
+      .cover {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+      }
+      .duration {
+        position: absolute;
+        right: 4px;
+        bottom: 4px;
+        background-color: rgba(0, 0, 0, 0.7);
+        padding: 2px 4px;
+        border-radius: 2px;
+        font-size: 12px;
+      }
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        display: none;
+        transition: opacity 0.3s;
+        border-radius: 4px;
+        text-align: center;
+        line-height: 120px;
+        cursor: pointer;
+        .el-icon {
+          font-size: 40px;
+          color: white;
+        }
+      }
+    }
+    .info {
+      flex: 1;
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+      }
+      .style {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/suno/Index.vue b/src/pages/suno/Index.vue
index 3a03b096..bb67e98e 100644
--- a/src/pages/suno/Index.vue
+++ b/src/pages/suno/Index.vue
@@ -80,15 +80,6 @@ export default defineComponent({
     application() {
       return this.$store.state.suno.application;
     }
-    // ended() {
-    //   return this.$store.state.suno.player.ended;
-    // }
-  },
-  watch: {
-    ended(val: boolean) {
-      if (!val) return;
-      this.$store.dispatch('suno/playEnd');
-    }
   },
   async mounted() {
     await this.onGetService();
@@ -100,8 +91,6 @@ export default defineComponent({
     this.job = setInterval(() => {
       this.onGetTasks();
     }, 5000);
-    this.$store.dispatch('suno/initPlayer');
-    this.timer = setInterval(() => this.$store.dispatch('suno/interval'), 1000);
   },
   async unmounted() {
     clearInterval(this.job);
diff --git a/src/store/suno/actions.ts b/src/store/suno/actions.ts
index 292a61c8..ded55f9b 100644
--- a/src/store/suno/actions.ts
+++ b/src/store/suno/actions.ts
@@ -1,5 +1,5 @@
 import { applicationOperator, sunoOperator, serviceOperator } from '@/operators';
-import { RootState } from './models';
+import { ISunoState } from './models';
 import { ActionContext } from 'vuex';
 import { log } from '@/utils/log';
 import { IRootState } from '../common/models';
@@ -7,7 +7,7 @@ import { IApplication, ICredential, ISunoConfig, ISunoTask, IService, Song } fro
 import { Status } from '@/models/common';
 import { SUNO_SERVICE_ID } from '@/constants';
 
-export const resetAll = ({ commit }: ActionContext<RootState, IRootState>): void => {
+export const resetAll = ({ commit }: ActionContext<ISunoState, IRootState>): void => {
   commit('resetAll');
 };
 
@@ -33,7 +33,7 @@ export const getApplication = async ({
   commit,
   state,
   rootState
-}: ActionContext<RootState, IRootState>): Promise<IApplication> => {
+}: ActionContext<ISunoState, IRootState>): Promise<IApplication> => {
   log(getApplication, 'start to get application for suno');
   return new Promise(async (resolve, reject) => {
     state.status.getApplication = Status.Request;
@@ -74,6 +74,10 @@ export const setTasksActive = ({ commit }: any, payload: ISunoTask) => {
   commit('setTasksActive', payload);
 };
 
+export const setAudio = ({ commit }: any, payload: any) => {
+  commit('setAudio', payload);
+};
+
 export const getService = async ({ commit, state }: ActionContext<RootState, IRootState>): Promise<IService> => {
   return new Promise(async (resolve, reject) => {
     log(getService, 'start to get service for suno');
@@ -93,7 +97,7 @@ export const getService = async ({ commit, state }: ActionContext<RootState, IRo
 };
 
 export const getTasks = async (
-  { commit, state }: ActionContext<RootState, IRootState>,
+  { commit, state }: ActionContext<ISunoState, IRootState>,
   { offset, limit }: { offset?: number; limit?: number }
 ): Promise<ISunoTask[]> => {
   return new Promise(async (resolve, reject) => {
@@ -124,157 +128,157 @@ export const getTasks = async (
   });
 };
 
-// 歌曲播放action部分
-// 播放器相关的 actions
-export const initPlayer = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  commit('setVolume', state.player.volume);
-};
-// 将歌曲放入播放列表
-export const pushPlayList = (
-  { commit }: ActionContext<RootState, IRootState>,
-  { replace, list }: { replace: boolean; list: Song[] }
-): void => {
-  commit('pushPlayList', { replace, list });
-};
-// 清空播放列表
-export const clearPlayList = ({ commit }: ActionContext<RootState, IRootState>): void => {
-  commit('clearPlayList');
-};
-// 播放歌曲
-export const play = ({ commit, state, dispatch }: ActionContext<RootState, IRootState>, song: Song): void => {
-  if (song.id == state.player?.id) return;
-  commit('setIsPlaying', false);
-  // const data = await useSongUrl(id);
-  // @ts-ignore
-  state.player.audio.src = song.audio_url;
-  // @ts-ignore
-  state.player.audio
-    .play()
-    .then(() => {
-      commit('setIsPlaying', true);
-      commit('setUrl', song.audio_url);
-      commit('setId', song.id);
-      dispatch('songDetail', song);
-    })
-    .catch((res) => {
-      console.log(res);
-    });
-};
+// // 歌曲播放action部分
+// // 播放器相关的 actions
+// export const initPlayer = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   commit('setVolume', state.player.volume);
+// };
+// // 将歌曲放入播放列表
+// export const pushPlayList = (
+//   { commit }: ActionContext<RootState, IRootState>,
+//   { replace, list }: { replace: boolean; list: Song[] }
+// ): void => {
+//   commit('pushPlayList', { replace, list });
+// };
+// // 清空播放列表
+// export const clearPlayList = ({ commit }: ActionContext<RootState, IRootState>): void => {
+//   commit('clearPlayList');
+// };
+// // 播放歌曲
+// export const play = ({ commit, state, dispatch }: ActionContext<RootState, IRootState>, song: Song): void => {
+//   if (song.id == state.player?.id) return;
+//   commit('setIsPlaying', false);
+//   // const data = await useSongUrl(id);
+//   // @ts-ignore
+//   state.player.audio.src = song.audio_url;
+//   // @ts-ignore
+//   state.player.audio
+//     .play()
+//     .then(() => {
+//       commit('setIsPlaying', true);
+//       commit('setUrl', song.audio_url);
+//       commit('setId', song.id);
+//       dispatch('songDetail', song);
+//     })
+//     .catch((res) => {
+//       console.log(res);
+//     });
+// };
 
-// 播放结束
-export const playEnd = ({ state, dispatch }: ActionContext<RootState, IRootState>): void => {
-  console.log('播放结束');
-  switch (state.player?.loopType) {
-    case 0:
-      dispatch('rePlay');
-      break;
-    case 1:
-      dispatch('next');
-      break;
-    case 2:
-      dispatch('randomPlay');
-      break;
-  }
-};
+// // 播放结束
+// export const playEnd = ({ state, dispatch }: ActionContext<RootState, IRootState>): void => {
+//   console.log('播放结束');
+//   switch (state.player?.loopType) {
+//     case 0:
+//       dispatch('rePlay');
+//       break;
+//     case 1:
+//       dispatch('next');
+//       break;
+//     case 2:
+//       dispatch('randomPlay');
+//       break;
+//   }
+// };
 
-export const songDetail = ({ commit, state }: ActionContext<RootState, IRootState>, song: Song): void => {
-  commit('setSong', song);
-  commit('pushPlayList', { replace: false, list: [song] });
-};
-// 重复播放歌曲
-export const rePlay = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  setTimeout(() => {
-    commit('setCurrentTime', 0);
-    // @ts-ignore
-    state.player?.audio.play();
-  }, 1500);
-};
-// 下一首
-export const next = ({ state, dispatch, getters }: ActionContext<RootState, IRootState>): void => {
-  if (state.player?.loopType === 2) {
-    dispatch('randomPlay');
-  } else {
-    dispatch('play', getters.nextSong);
-  }
-};
-// 上一首
-export const prev = ({ dispatch, getters }: ActionContext<RootState, IRootState>): void => {
-  dispatch('play', getters.prevSong);
-};
-// 随机播放
-export const randomPlay = ({ state, dispatch }: ActionContext<RootState, IRootState>): void => {
-  // @ts-ignore
-  const randomSong = state.player?.playList[Math.floor(Math.random() * state.player?.playList.length)];
-  dispatch('play', randomSong);
-};
+// export const songDetail = ({ commit, state }: ActionContext<RootState, IRootState>, song: Song): void => {
+//   commit('setSong', song);
+//   commit('pushPlayList', { replace: false, list: [song] });
+// };
+// // 重复播放歌曲
+// export const rePlay = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   setTimeout(() => {
+//     commit('setCurrentTime', 0);
+//     // @ts-ignore
+//     state.player?.audio.play();
+//   }, 1500);
+// };
+// // 下一首
+// export const next = ({ state, dispatch, getters }: ActionContext<RootState, IRootState>): void => {
+//   if (state.player?.loopType === 2) {
+//     dispatch('randomPlay');
+//   } else {
+//     dispatch('play', getters.nextSong);
+//   }
+// };
+// // 上一首
+// export const prev = ({ dispatch, getters }: ActionContext<RootState, IRootState>): void => {
+//   dispatch('play', getters.prevSong);
+// };
+// // 随机播放
+// export const randomPlay = ({ state, dispatch }: ActionContext<RootState, IRootState>): void => {
+//   // @ts-ignore
+//   const randomSong = state.player?.playList[Math.floor(Math.random() * state.player?.playList.length)];
+//   dispatch('play', randomSong);
+// };
 
-export const togglePlay = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  if (!state.player?.song?.id) return;
-  const isPlaying = !state.player.isPlaying;
-  commit('setIsPlaying', isPlaying);
-  if (!isPlaying) {
-    // @ts-ignore
-    state.player?.audio.pause();
-    commit('setIsPause', true);
-  } else {
-    // @ts-ignore
-    state.player?.audio.play();
-    commit('setIsPause', false);
-  }
-};
+// export const togglePlay = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   if (!state.player?.song?.id) return;
+//   const isPlaying = !state.player.isPlaying;
+//   commit('setIsPlaying', isPlaying);
+//   if (!isPlaying) {
+//     // @ts-ignore
+//     state.player?.audio.pause();
+//     commit('setIsPause', true);
+//   } else {
+//     // @ts-ignore
+//     state.player?.audio.play();
+//     commit('setIsPause', false);
+//   }
+// };
 
-export const setPlay = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  if (!state.player?.song?.id) return;
-  commit('setIsPlaying', true);
-  // @ts-ignore
-  state.player?.audio.play();
-  commit('setIsPause', false);
-};
+// export const setPlay = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   if (!state.player?.song?.id) return;
+//   commit('setIsPlaying', true);
+//   // @ts-ignore
+//   state.player?.audio.play();
+//   commit('setIsPause', false);
+// };
 
-export const setPause = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  if (!state.player?.song?.id) return;
-  commit('setIsPlaying', false);
-  // @ts-ignore
-  state.player?.audio.pause();
-  commit('setIsPause', true);
-};
+// export const setPause = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   if (!state.player?.song?.id) return;
+//   commit('setIsPlaying', false);
+//   // @ts-ignore
+//   state.player?.audio.pause();
+//   commit('setIsPause', true);
+// };
 
-export const toggleLoop = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  // @ts-ignore
-  const newLoopType = state.player?.loopType === 2 ? 0 : state.player?.loopType + 1;
-  commit('setLoopType', newLoopType);
-};
+// export const toggleLoop = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   // @ts-ignore
+//   const newLoopType = state.player?.loopType === 2 ? 0 : state.player?.loopType + 1;
+//   commit('setLoopType', newLoopType);
+// };
 
-export const toggleMuted = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  commit('setMuted', !state.player?.muted);
-};
+// export const toggleMuted = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   commit('setMuted', !state.player?.muted);
+// };
 
-export const setVolume = ({ commit }: ActionContext<RootState, IRootState>, volume: number): void => {
-  volume = Math.min(100, Math.max(0, volume));
-  commit('setVolume', volume);
-};
+// export const setVolume = ({ commit }: ActionContext<RootState, IRootState>, volume: number): void => {
+//   volume = Math.min(100, Math.max(0, volume));
+//   commit('setVolume', volume);
+// };
 
-export const onSliderChange = ({ commit, state }: ActionContext<RootState, IRootState>, val: number): void => {
-  commit('setCurrentTime', val);
-  commit('setSliderInput', false);
-  // @ts-ignore
-  state.player.audio.currentTime = val;
-};
+// export const onSliderChange = ({ commit, state }: ActionContext<RootState, IRootState>, val: number): void => {
+//   commit('setCurrentTime', val);
+//   commit('setSliderInput', false);
+//   // @ts-ignore
+//   state.player.audio.currentTime = val;
+// };
 
-export const onSliderInput = ({ commit }: ActionContext<RootState, IRootState>, val: number): void => {
-  commit('setSliderInput', true);
-};
+// export const onSliderInput = ({ commit }: ActionContext<RootState, IRootState>, val: number): void => {
+//   commit('setSliderInput', true);
+// };
 
-export const interval = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
-  if (state.player?.isPlaying && !state.player.sliderInput) {
-    // @ts-ignore
-    commit('setCurrentTime', Math.floor(state.player?.audio?.currentTime));
-    // @ts-ignore
-    commit('setDuration', Math.floor(state.player?.audio.duration));
-    // @ts-ignore
-    commit('setEnded', state.player?.audio.ended);
-  }
-};
+// export const interval = ({ commit, state }: ActionContext<RootState, IRootState>): void => {
+//   if (state.player?.isPlaying && !state.player.sliderInput) {
+//     // @ts-ignore
+//     commit('setCurrentTime', Math.floor(state.player?.audio?.currentTime));
+//     // @ts-ignore
+//     commit('setDuration', Math.floor(state.player?.audio.duration));
+//     // @ts-ignore
+//     commit('setEnded', state.player?.audio.ended);
+//   }
+// };
 
 export default {
   setService,
@@ -289,24 +293,25 @@ export default {
   setTasksTotal,
   setTasksActive,
   getTasks,
-  // 播放器相关的 actions
-  initPlayer,
-  pushPlayList,
-  clearPlayList,
-  play,
-  playEnd,
-  songDetail,
-  rePlay,
-  next,
-  prev,
-  randomPlay,
-  togglePlay,
-  setPlay,
-  setPause,
-  toggleLoop,
-  toggleMuted,
-  setVolume,
-  onSliderChange,
-  onSliderInput,
-  interval
+  setAudio
+  // // 播放器相关的 actions
+  // initPlayer,
+  // pushPlayList,
+  // clearPlayList,
+  // play,
+  // playEnd,
+  // songDetail,
+  // rePlay,
+  // next,
+  // prev,
+  // randomPlay,
+  // togglePlay,
+  // setPlay,
+  // setPause,
+  // toggleLoop,
+  // toggleMuted,
+  // setVolume,
+  // onSliderChange,
+  // onSliderInput,
+  // interval
 };
diff --git a/src/store/suno/index.ts b/src/store/suno/index.ts
index 7f17fc69..a3ac7f42 100644
--- a/src/store/suno/index.ts
+++ b/src/store/suno/index.ts
@@ -1,35 +1,14 @@
 import { Module } from 'vuex';
-import { RootState } from './models';
+import { ISunoState } from './models';
 import actions from './actions';
 import mutations from './mutations';
 import state from './state';
 
-export const suno: Module<RootState, any> = {
+export const suno: Module<ISunoState, any> = {
   namespaced: true,
   state,
   mutations,
-  actions,
-  getters: {
-    playListCount: (state) => state.player.playList.length,
-    // @ts-ignore
-    thisIndex: (state) => state.player.playList.findIndex((song) => song.id === state.player.id),
-    nextSong: (state, getters) => {
-      const { thisIndex, playListCount } = getters;
-      if (thisIndex === playListCount - 1) {
-        return state.player.playList[0];
-      } else {
-        return state.player.playList[thisIndex + 1];
-      }
-    },
-    prevSong: (state, getters) => {
-      const { thisIndex } = getters;
-      if (thisIndex === 0) {
-        return state.player.playList[state.player.playList.length - 1];
-      } else {
-        return state.player.playList[thisIndex - 1];
-      }
-    }
-  }
+  actions
 };
 
 export default suno;
diff --git a/src/store/suno/models.ts b/src/store/suno/models.ts
index 258e984d..17990540 100644
--- a/src/store/suno/models.ts
+++ b/src/store/suno/models.ts
@@ -1,4 +1,4 @@
-import { IApplication, ICredential, IService, Status } from '@/models';
+import { IApplication, ICredential, IService, ISunoAudio, Status } from '@/models';
 import { ISunoConfig, ISunoTask, Song } from '@/models';
 
 export interface ISunoState {
@@ -13,6 +13,7 @@ export interface ISunoState {
         active: ISunoTask | undefined;
       }
     | undefined;
+  audio: ISunoAudio | undefined;
   status: {
     getService: Status;
     getApplication: Status;
diff --git a/src/store/suno/mutations.ts b/src/store/suno/mutations.ts
index ab6ccf2e..410f1768 100644
--- a/src/store/suno/mutations.ts
+++ b/src/store/suno/mutations.ts
@@ -1,11 +1,11 @@
 import { IApplication, ICredential, ISunoConfig, ISunoTask, IService } from '@/models';
-import { RootState } from './models';
-import { Song, SongUrl } from '@/models';
+import { ISunoState } from './models';
+// import { Song, SongUrl } from '@/models';
 
-const KEYS = {
-  volume: 'PLAYER-VOLUME'
-};
-export const resetAll = (state: RootState): void => {
+// const KEYS = {
+//   volume: 'PLAYER-VOLUME'
+// };
+export const resetAll = (state: ISunoState): void => {
   state.service = undefined;
   state.application = undefined;
   state.config = undefined;
@@ -13,23 +13,23 @@ export const resetAll = (state: RootState): void => {
   state.tasks = undefined;
 };
 
-export const setService = (state: RootState, payload: IService): void => {
+export const setService = (state: ISunoState, payload: IService): void => {
   state.service = payload;
 };
 
-export const setCredential = (state: RootState, payload: ICredential): void => {
+export const setCredential = (state: ISunoState, payload: ICredential): void => {
   state.credential = payload;
 };
 
-export const setApplication = (state: RootState, payload: IApplication): void => {
+export const setApplication = (state: ISunoState, payload: IApplication): void => {
   state.application = payload;
 };
 
-export const setConfig = (state: RootState, payload: ISunoConfig): void => {
+export const setConfig = (state: ISunoState, payload: ISunoConfig): void => {
   state.config = payload;
 };
 
-export const setTasksItems = (state: RootState, payload: ISunoTask[]): void => {
+export const setTasksItems = (state: ISunoState, payload: ISunoTask[]): void => {
   const newPayload = {
     ...state.tasks,
     items: payload
@@ -37,7 +37,7 @@ export const setTasksItems = (state: RootState, payload: ISunoTask[]): void => {
   state.tasks = newPayload;
 };
 
-export const setTasksTotal = (state: RootState, payload: number): void => {
+export const setTasksTotal = (state: ISunoState, payload: number): void => {
   const newPayload = {
     ...state.tasks,
     total: payload
@@ -45,7 +45,7 @@ export const setTasksTotal = (state: RootState, payload: number): void => {
   state.tasks = newPayload;
 };
 
-export const setTasksActive = (state: RootState, payload: ISunoTask): void => {
+export const setTasksActive = (state: ISunoState, payload: ISunoTask): void => {
   const newPayload = {
     ...state.tasks,
     active: payload
@@ -53,103 +53,107 @@ export const setTasksActive = (state: RootState, payload: ISunoTask): void => {
   state.tasks = newPayload;
 };
 
-export const setTasks = (state: RootState, payload: any): void => {
-  state.tasks = payload;
-};
-// 歌曲播放的mutations方法
-// 播放器相关的 mutations
-export const setAudio = (state: RootState, audio: HTMLAudioElement): void => {
-  state.player.audio = audio;
-};
-// 设置循环模式
-export const setLoopType = (state: RootState, loopType: number): void => {
-  state.player.loopType = loopType;
-};
-// 设置音量
-export const setVolume = (state: RootState, volume: number): void => {
-  state.player.volume = volume;
-  state.player.audio.volume = volume / 100;
-  localStorage.setItem(KEYS.volume, volume.toString());
-};
-// 设置播放列表
-export const setPlayList = (state: RootState, playList: Song[]): void => {
-  state.player.playList = playList;
-};
-// 设置是否展示播放列表
-export const setShowPlayList = (state: RootState, showPlayList: boolean): void => {
-  state.player.showPlayList = showPlayList;
-};
-// 设置歌曲ID
-export const setId = (state: RootState, id: string): void => {
-  state.player.id = id;
-};
-// 设置歌曲URL
-export const setUrl = (state: RootState, url: string): void => {
-  state.player.url = url;
-};
-// 设置歌曲
-export const setSong = (state: RootState, song: Song): void => {
-  state.player.song = song;
+export const setAudio = (state: ISunoState, payload: any): void => {
+  state.audio = payload;
 };
-// 设置歌曲正在播放
-export const setIsPlaying = (state: RootState, isPlaying: boolean): void => {
-  state.player.isPlaying = isPlaying;
-};
-// 设置歌曲正在暂停
-export const setIsPause = (state: RootState, isPause: boolean): void => {
-  state.player.isPause = isPause;
-};
-// 设置歌曲播放进度
-export const setSliderInput = (state: RootState, sliderInput: boolean): void => {
-  state.player.sliderInput = sliderInput;
-};
-// 设置歌曲播放结束
-export const setEnded = (state: RootState, ended: boolean): void => {
-  state.player.ended = ended;
-};
-// 设置歌曲静音
-export const setMuted = (state: RootState, muted: boolean): void => {
-  state.player.muted = muted;
-  state.player.audio.muted = muted;
-};
-// 设置歌曲播放当前时间
-export const setCurrentTime = (state: RootState, currentTime: number): void => {
-  state.player.currentTime = currentTime;
-};
-// 设置歌曲总时长
-export const setDuration = (state: RootState, duration: number): void => {
-  state.player.duration = duration;
-};
-// 将歌曲添加到播放列表
-export const pushPlayList = (state: RootState, { replace, list }: { replace: boolean; list: Song[] }): void => {
-  if (replace) {
-    state.player.playList = list;
-  } else {
-    list.forEach((song) => {
-      if (state.player.playList.filter((s) => s.id == song.id).length <= 0) {
-        state.player.playList.push(song);
-      }
-    });
-  }
-};
-// 清空播放列表
-export const clearPlayList = (state: RootState): void => {
-  state.player.url = '';
-  state.player.id = '0';
-  state.player.song = {} as Song;
-  state.player.isPlaying = false;
-  state.player.isPause = false;
-  state.player.sliderInput = false;
-  state.player.ended = false;
-  state.player.muted = false;
-  state.player.currentTime = 0;
-  state.player.playList = [];
-  state.player.showPlayList = false;
-  state.player.audio.load();
-  setTimeout(() => {
-    state.player.duration = 0;
-  }, 500);
+
+export const setTasks = (state: ISunoState, payload: any): void => {
+  state.tasks = payload;
 };
+// // 歌曲播放的mutations方法
+// // 播放器相关的 mutations
+// export const setAudio = (state: RootState, audio: HTMLAudioElement): void => {
+//   state.player.audio = audio;
+// };
+// // 设置循环模式
+// export const setLoopType = (state: RootState, loopType: number): void => {
+//   state.player.loopType = loopType;
+// };
+// // 设置音量
+// export const setVolume = (state: RootState, volume: number): void => {
+//   state.player.volume = volume;
+//   state.player.audio.volume = volume / 100;
+//   localStorage.setItem(KEYS.volume, volume.toString());
+// };
+// // 设置播放列表
+// export const setPlayList = (state: RootState, playList: Song[]): void => {
+//   state.player.playList = playList;
+// };
+// // 设置是否展示播放列表
+// export const setShowPlayList = (state: RootState, showPlayList: boolean): void => {
+//   state.player.showPlayList = showPlayList;
+// };
+// // 设置歌曲ID
+// export const setId = (state: RootState, id: string): void => {
+//   state.player.id = id;
+// };
+// // 设置歌曲URL
+// export const setUrl = (state: RootState, url: string): void => {
+//   state.player.url = url;
+// };
+// // 设置歌曲
+// export const setSong = (state: RootState, song: Song): void => {
+//   state.player.song = song;
+// };
+// // 设置歌曲正在播放
+// export const setIsPlaying = (state: RootState, isPlaying: boolean): void => {
+//   state.player.isPlaying = isPlaying;
+// };
+// // 设置歌曲正在暂停
+// export const setIsPause = (state: RootState, isPause: boolean): void => {
+//   state.player.isPause = isPause;
+// };
+// // 设置歌曲播放进度
+// export const setSliderInput = (state: RootState, sliderInput: boolean): void => {
+//   state.player.sliderInput = sliderInput;
+// };
+// // 设置歌曲播放结束
+// export const setEnded = (state: RootState, ended: boolean): void => {
+//   state.player.ended = ended;
+// };
+// // 设置歌曲静音
+// export const setMuted = (state: RootState, muted: boolean): void => {
+//   state.player.muted = muted;
+//   state.player.audio.muted = muted;
+// };
+// // 设置歌曲播放当前时间
+// export const setCurrentTime = (state: RootState, currentTime: number): void => {
+//   state.player.currentTime = currentTime;
+// };
+// // 设置歌曲总时长
+// export const setDuration = (state: RootState, duration: number): void => {
+//   state.player.duration = duration;
+// };
+// // 将歌曲添加到播放列表
+// export const pushPlayList = (state: RootState, { replace, list }: { replace: boolean; list: Song[] }): void => {
+//   if (replace) {
+//     state.player.playList = list;
+//   } else {
+//     list.forEach((song) => {
+//       if (state.player.playList.filter((s) => s.id == song.id).length <= 0) {
+//         state.player.playList.push(song);
+//       }
+//     });
+//   }
+// };
+// // 清空播放列表
+// export const clearPlayList = (state: RootState): void => {
+//   state.player.url = '';
+//   state.player.id = '0';
+//   state.player.song = {} as Song;
+//   state.player.isPlaying = false;
+//   state.player.isPause = false;
+//   state.player.sliderInput = false;
+//   state.player.ended = false;
+//   state.player.muted = false;
+//   state.player.currentTime = 0;
+//   state.player.playList = [];
+//   state.player.showPlayList = false;
+//   state.player.audio.load();
+//   setTimeout(() => {
+//     state.player.duration = 0;
+//   }, 500);
+// };
 
 export default {
   setTasks,
@@ -160,24 +164,6 @@ export default {
   setTasksActive,
   setTasksItems,
   setTasksTotal,
-  resetAll,
-  // 歌曲播放器配置
-  // 播放器相关的 mutations
   setAudio,
-  setLoopType,
-  setVolume,
-  setPlayList,
-  setShowPlayList,
-  setId,
-  setUrl,
-  setSong,
-  setIsPlaying,
-  setIsPause,
-  setSliderInput,
-  setEnded,
-  setMuted,
-  setCurrentTime,
-  setDuration,
-  pushPlayList,
-  clearPlayList
+  resetAll
 };
diff --git a/src/store/suno/persist.ts b/src/store/suno/persist.ts
index 0c3fc2d5..0ed13f33 100644
--- a/src/store/suno/persist.ts
+++ b/src/store/suno/persist.ts
@@ -1 +1 @@
-export default ['suno.config', 'suno.credential', 'suno.application', 'suno.tasks'];
+export default ['suno.config', 'suno.credential', 'suno.application', 'suno.tasks', 'suno.audio'];
diff --git a/src/store/suno/state.ts b/src/store/suno/state.ts
index 241d1561..70898a90 100644
--- a/src/store/suno/state.ts
+++ b/src/store/suno/state.ts
@@ -1,38 +1,39 @@
-import { RootState } from './models';
+import { ISunoState } from './models';
 import { Status, Song } from '@/models';
 
-const KEYS = {
-  volume: 'PLAYER-VOLUME'
-};
+// const KEYS = {
+//   volume: 'PLAYER-VOLUME'
+// };
 
-export default (): RootState => {
+export default (): ISunoState => {
   return {
     service: undefined,
     application: undefined,
     tasks: undefined,
+    audio: undefined,
     credential: undefined,
     config: undefined,
     status: {
       getService: Status.None,
       getApplication: Status.None,
       getTasks: Status.None
-    },
-    player: {
-      audio: new Audio(),
-      loopType: 0,
-      volume: parseInt(localStorage.getItem(KEYS.volume) || '60'),
-      playList: [],
-      showPlayList: false,
-      id: '',
-      url: '',
-      song: undefined,
-      isPlaying: false,
-      isPause: false,
-      sliderInput: false,
-      ended: false,
-      muted: false,
-      currentTime: 0,
-      duration: 0
     }
+    // player: {
+    //   audio: new Audio(),
+    //   loopType: 0,
+    //   volume: parseInt(localStorage.getItem(KEYS.volume) || '60'),
+    //   playList: [],
+    //   showPlayList: false,
+    //   id: '',
+    //   url: '',
+    //   song: undefined,
+    //   isPlaying: false,
+    //   isPause: false,
+    //   sliderInput: false,
+    //   ended: false,
+    //   muted: false,
+    //   currentTime: 0,
+    //   duration: 0
+    // }
   };
 };