update suno list and player

src/components/suno/RecentPanel.vue

@@ -29,25 +29,25 @@
   </div>
   <div class="flex-1 flex flex-col">
     <div class="h-20">
-      <Footer />
+      <player />
     </div>
   </div>
 </template>
 
 <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',
   components: {
     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;

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'
         }
       ]
     };

src/components/suno/footer/Footer.vue → 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>

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>

src/components/suno/footer/PlayerController.vue → src/components/suno/player/PlayerController.vue

@@ -1,21 +1,12 @@
 <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"
       theme="filled"
       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>

src/components/suno/footer/PlayerSlider.vue → 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">

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>

src/components/suno/footer/PlayerVolumeSlider.vue → 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 })
 });
 
 // 方法