song detail page is ready

web/src/components/ChatReply.vue

@@ -177,7 +177,7 @@ const reGenerate = (prompt) => {
       padding-left 10px;
 
       .chat-icon {
-        margin-left 20px;
+        margin-right 20px;
 
         img {
           width: 36px;
@@ -368,7 +368,6 @@ const reGenerate = (prompt) => {
 
         .content-wrapper {
           display flex
-          flex-flow row-reverse
           .content {
             min-height 20px;
             word-break break-word;

web/src/components/MusicPlayer.vue

@@ -33,7 +33,7 @@
      </div>
      <audio ref="audio" @timeupdate="updateProgress" @ended="nextSong"></audio>
 
-     <el-button class="close" type="info" :icon="Close" circle size="small" @click="emits('close')" />
+     <el-button v-if="showClose" class="close" type="info" :icon="Close" circle size="small" @click="emits('close')" />
    </div>
  </div>
 </template>
@@ -61,12 +61,15 @@ const props = defineProps({
     required: true,
     default: () => []
   },
+  showClose: {
+    type: Boolean,
+    default: false
+  }
 });
 // eslint-disable-next-line no-undef
 const emits = defineEmits(['close']);
 
 watch(() => props.songs, (newVal) => {
-  console.log(newVal)
   loadSong(newVal[songIndex.value]);
 });
 
@@ -78,7 +81,7 @@ const loadSong = (song) => {
   }
   title.value = song.title
   tags.value = song.tags
-  cover.value = song.thumb_img_url
+  cover.value = song.cover_url
   audio.value.src = song.audio_url;
   audio.value.load();
   audio.value.onloadedmetadata = () => {
@@ -97,6 +100,7 @@ const togglePlay = () => {
 
 const play = () => {
   audio.value.play();
+  isPlaying.value = true;
 }
 
 const prevSong = () => {
@@ -177,6 +181,7 @@ onMounted(() => {
       .title {
         font-weight 700
         font-size 16px
+        color #ffffff
       }
 
       .style {

web/src/components/ui/BlackDialog.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="black-dialog">
+    <el-dialog
+        v-model="showDialog"
+        style="--el-dialog-bg-color:#414141;
+        --el-text-color-primary:#f1f1f1;
+        --el-border-color:#414141;
+        --el-color-primary:#21aa93;
+        --el-color-primary-dark-2:#41555d;
+        --el-color-white: #e1e1e1;
+        --el-color-primary-light-3:#549688;
+        --el-fill-color-blank:#616161;
+         --el-color-primary-light-7:#717171;
+        --el-color-primary-light-9:#717171;
+        --el-text-color-regular:#e1e1e1"
+        :title="title"
+        :width="width"
+        :before-close="cancel"
+    >
+      <div class="dialog-body">
+        <slot></slot>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancel">{{cancelText}}</el-button>
+          <el-button type="primary" @click="$emit('confirm')">{{confirmText}}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+import {ref, watch} from "vue";
+const props = defineProps({
+  show : Boolean,
+  title: {
+    type: String,
+    default: 'Tips',
+  },
+  width: {
+    type: Number,
+    default: 500,
+  },
+  confirmText: {
+    type: String,
+    default: '确定',
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+});
+const emits = defineEmits(['confirm','cancal']);
+const showDialog = ref(props.show)
+
+watch(() => props.show, (newValue) => {
+  showDialog.value = newValue
+})
+const cancel = () => {
+  showDialog.value = false
+  emits('cancal')
+}
+</script>
+
+<style lang="stylus">
+.black-dialog {
+  .dialog-body {
+    .form {
+      .form-item {
+        display flex
+        flex-flow column
+        font-family: "Neue Montreal";
+        padding 10px 0
+
+        .label {
+          margin-bottom 0.6rem
+          margin-inline-end 0.75rem
+          color #ffffff
+          font-size 1rem
+          font-weight 500
+        }
+
+        .input {
+          display flex
+          padding 10px
+          text-align left
+          font-size 1rem
+          background none
+          border-radius 0.375rem
+          border 1px solid #8f8f8f
+          outline: none;
+          transition: border-color 0.5s ease, box-shadow 0.5s ease;
+
+          &:focus {
+            border-color: #0F7A71;
+            box-shadow: 0 0 5px #0F7A71;
+          }
+        }
+      }
+    }
+  }
+}
+
+</style>

web/src/components/ui/BlackSwitch.vue

@@ -6,20 +6,19 @@
 
 </template>
 
-<script>
-export default {
-  name: 'BlackSwitch',
-  props: {
-    value : Boolean,
-    size: {
-      type: String,
-      default: 'default',
-    }
-  },
-  data() {
-    return {
-      model: this.value
-    }
+<script setup>
+
+import {ref, watch} from "vue";
+const props = defineProps({
+  value : Boolean,
+  size: {
+    type: String,
+    default: 'default',
   }
-}
+});
+const model = ref(props.value)
+
+watch(() => props.value, (newValue) => {
+  model.value = newValue
+})
 </script>