feat: 优化普通歌曲管理功能，简化歌曲新增和修改接口，更新前端表单字段，增强搜索和展示功能。

ruoyi-ui/src/views/playlist/normal/index.vue

@@ -1,53 +1,40 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
-      <el-form-item label="音乐名称" prop="musicName">
+      <el-form-item label="音乐名称" prop="name">
         <el-input
-          v-model="queryParams.musicName"
+          v-model="queryParams.name"
           placeholder="请输入音乐名称查找"
           clearable
           style="width: 200px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="选择分类" prop="category">
-        <el-select v-model="queryParams.category" placeholder="选择分类" clearable style="width: 150px">
-          <el-option
-            v-for="item in categoryOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+      <el-form-item label="作者" prop="author">
+        <el-input
+          v-model="queryParams.author"
+          placeholder="请输入作者查找"
+          clearable
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="VIP权限" prop="vip">
+        <el-select v-model="queryParams.vip" placeholder="选择VIP权限" clearable style="width: 150px">
+          <el-option label="免费" :value="0" />
+          <el-option label="VIP" :value="1" />
         </el-select>
       </el-form-item>
-      <el-form-item label="选择标签" prop="tag">
-        <el-select v-model="queryParams.tag" placeholder="选择标签" clearable style="width: 150px">
-          <el-option
-            v-for="item in tagOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+      <el-form-item label="上架状态" prop="shelf">
+        <el-select v-model="queryParams.shelf" placeholder="选择上架状态" clearable style="width: 150px">
+          <el-option label="上架" :value="1" />
+          <el-option label="下架" :value="2" />
         </el-select>
       </el-form-item>
-      <el-form-item label="上架状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="选择上架状态" clearable style="width: 150px">
-          <el-option
-            v-for="item in statusOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="选择权限" prop="permission">
-        <el-select v-model="queryParams.permission" placeholder="选择权限" clearable style="width: 150px">
-          <el-option
-            v-for="item in permissionOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+      <el-form-item label="音乐类型" prop="musicType">
+        <el-select v-model="queryParams.musicType" placeholder="选择音乐类型" clearable style="width: 150px">
+          <el-option label="普通歌曲" value="ordinary" />
+          <el-option label="混音歌曲" value="mixing" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -59,26 +46,50 @@
 
     <el-table v-loading="loading" :data="playlistList">
       <el-table-column label="序号" align="center" type="index" width="60" />
-      <el-table-column label="音乐名称" align="center" prop="musicName" :show-overflow-tooltip="true" />
-      <el-table-column label="制作人" align="center" prop="producer" :show-overflow-tooltip="true" />
-      <el-table-column label="上传时间" align="center" prop="uploadTime" width="120" />
-      <el-table-column label="文件类型" align="center" prop="fileType" width="80" />
-      <el-table-column label="权限" align="center" prop="permission" width="80">
+      <el-table-column label="音乐名称" align="center" prop="name" :show-overflow-tooltip="true" />
+      <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />
+      <el-table-column label="音乐图片" align="center" prop="imgAddr" width="120">
         <template slot-scope="scope">
-          <span>{{ scope.row.permission === 1 ? 'VIP' : '免费' }}</span>
+          <el-image
+            style="width: 60px; height: 60px"
+            :src="scope.row.imgAddr"
+            :preview-src-list="[scope.row.imgAddr]"
+            fit="cover"
+          >
+            <div slot="error" class="image-slot">
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="分类" align="center" prop="category" width="100">
+      <el-table-column label="音乐地址" align="center" prop="musicAddr" :show-overflow-tooltip="true" />
+      <el-table-column label="VIP权限" align="center" prop="vip" width="80">
         <template slot-scope="scope">
-          <el-tag type="primary" size="mini">{{ scope.row.category }}</el-tag>
+          <el-tag :type="scope.row.vip === 1 ? 'warning' : 'success'" size="mini">
+            {{ scope.row.vip === 1 ? 'VIP' : '免费' }}
+          </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="标签" align="center" prop="tags" width="150">
+      <el-table-column label="上架状态" align="center" prop="shelf" width="80">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.shelf === 1 ? 'success' : 'danger'" size="mini">
+            {{ scope.row.shelf === 1 ? '上架' : '下架' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="音乐类型" align="center" prop="musicType" width="100">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.musicType === 'ordinary' ? 'primary' : 'warning'" size="mini">
+            {{ scope.row.musicType === 'ordinary' ? '普通歌曲' : '混音歌曲' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="标签" align="center" prop="label" width="150">
         <template slot-scope="scope">
           <el-tag
-            v-for="tag in scope.row.tags"
+            v-for="tag in scope.row.label ? scope.row.label.split(';') : []"
             :key="tag"
-            type="warning"
+            type="info"
             size="mini"
             style="margin-right: 5px;"
           >
@@ -86,14 +97,7 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status" width="80">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="mini">
-            {{ scope.row.status === 1 ? '上架' : '下架' }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="音频类型" align="center" prop="audioType" width="120" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="120" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
         <template slot-scope="scope">
           <el-button
@@ -126,71 +130,47 @@
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="音乐名称" prop="name" required>
-          <el-input v-model="form.musicName" placeholder="请输入音乐名称" />
+          <el-input v-model="form.name" placeholder="请输入音乐名称" />
         </el-form-item>
-        <el-form-item label="制作人" prop="author" required>
-          <el-input v-model="form.producer" placeholder="请输入制作人" />
+        <el-form-item label="作者" prop="author" required>
+          <el-input v-model="form.author" placeholder="请输入作者" />
         </el-form-item>
-        <el-form-item label="文件类型" prop="fileType" required>
-          <el-select v-model="form.fileType" placeholder="请选择文件类型" style="width: 100%">
-            <el-option label="mp3" value="mp3" />
-            <el-option label="wav" value="wav" />
-            <el-option label="flac" value="flac" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="权限" prop="permission" required>
-          <el-select v-model="form.permission" placeholder="请选择权限" style="width: 100%">
+        <el-form-item label="VIP权限" prop="vip" required>
+          <el-select v-model="form.vip" placeholder="请选择VIP权限" style="width: 100%">
             <el-option label="免费" :value="0" />
             <el-option label="VIP" :value="1" />
           </el-select>
         </el-form-item>
-        <el-form-item label="标签" prop="tags">
-          <el-select v-model="form.tags" multiple placeholder="请添加标签 (可多选)" style="width: 100%">
-            <el-option
-              v-for="item in tagOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+        <el-form-item label="上架状态" prop="shelf" required>
+          <el-select v-model="form.shelf" placeholder="请选择上架状态" style="width: 100%">
+            <el-option label="上架" :value="1" />
+            <el-option label="下架" :value="2" />
           </el-select>
         </el-form-item>
-        <el-form-item label="音频类型" prop="audioType" required>
-          <el-select v-model="form.audioType" placeholder="请选择音频类型" style="width: 100%">
-            <el-option label="普通歌曲" value="普通歌曲" />
-            <el-option label="场景音乐" value="场景音乐" />
+        <el-form-item label="音乐类型" prop="musicType" required>
+          <el-select v-model="form.musicType" placeholder="请选择音乐类型" style="width: 100%">
+            <el-option label="普通歌曲" value="ordinary" />
+            <el-option label="混音歌曲" value="mixing" />
           </el-select>
         </el-form-item>
-        <el-form-item label="上架状态" prop="status" required>
-          <el-switch v-model="form.status" active-value="1" inactive-value="0" />
+        <el-form-item label="标签" prop="label">
+          <el-input v-model="form.label" placeholder="请输入标签，多个标签用分号分隔" />
         </el-form-item>
-        <el-form-item label="上传歌曲" required>
-          <el-upload
-            action=""
-            :auto-upload="false"
-            :show-file-list="false"
-            :on-change="handleSongFileChange"
-            :before-upload="beforeSongFileUpload"
-            class="song-uploader"
-          >
-            <div v-if="form.songUrl" class="song-preview">
-              <i class="el-icon-video-play"></i>
-              <span>{{ form.songFileName || '已选择歌曲文件' }}</span>
-            </div>
-            <i v-else class="el-icon-plus song-uploader-icon"></i>
-          </el-upload>
+        <el-form-item label="音乐图片" prop="imgAddr">
+          <image-upload 
+            v-model="form.imgAddr" 
+            :limit="1" 
+            :file-type="['jpg', 'jpeg', 'png', 'gif']" 
+            action="/back/upload/musicImg/file"
+          />
         </el-form-item>
-        <el-form-item label="上传封面">
-          <el-upload
-            action=""
-            :auto-upload="false"
-            :show-file-list="false"
-            :on-change="handleCoverFileChange"
-            :before-upload="beforeCoverFileUpload"
-            class="cover-uploader"
-          >
-            <img v-if="form.coverUrl" :src="form.coverUrl" class="cover">
-            <i v-else class="el-icon-plus cover-uploader-icon"></i>
-          </el-upload>
+        <el-form-item label="音乐文件" prop="musicAddr">
+          <file-upload 
+            v-model="form.musicAddr" 
+            :limit="1" 
+            :file-type="['mp3', 'wav', 'flac']" 
+            action="/back/upload/music/file"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -205,7 +185,7 @@
 import { listNormalSong, getNormalSong, delNormalSong, addNormalSong, updateNormalSong } from "@/api/playlist/normal";
 
 export default {
-  name: "NormalSong",
+  name: "Normal",
   data() {
     return {
       loading: true,
@@ -217,50 +197,37 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        musicName: null,
-        category: null,
-        tag: null,
-        status: null,
-        permission: null
+        name: null,
+        author: null,
+        vip: null,
+        shelf: null,
+        musicType: null
       },
       form: {},
       rules: {
-        musicName: [{ required: true, message: "音乐名称不能为空", trigger: "blur" }],
-        producer: [{ required: true, message: "制作人不能为空", trigger: "blur" }],
-        fileType: [{ required: true, message: "文件类型不能为空", trigger: "change" }],
-        permission: [{ required: true, message: "权限不能为空", trigger: "change" }],
-        audioType: [{ required: true, message: "音频类型不能为空", trigger: "change" }]
-      },
-      categoryOptions: [
-        { label: '热门', value: '热门' },
-        { label: '流行', value: '流行' },
-        { label: '摇滚', value: '摇滚' },
-        { label: '古典', value: '古典' },
-        { label: '爵士', value: '爵士' }
-      ],
-      tagOptions: [
-        { label: '流行', value: '流行' },
-        { label: '摇滚', value: '摇滚' },
-        { label: '古典', value: '古典' },
-        { label: '爵士', value: '爵士' },
-        { label: '电子', value: '电子' },
-        { label: '民谣', value: '民谣' },
-        { label: '电音', value: '电音' }
-      ],
-      statusOptions: [
-        { label: '下架', value: 0 },
-        { label: '上架', value: 1 }
-      ],
-      permissionOptions: [
-        { label: '免费', value: 0 },
-        { label: 'VIP', value: 1 }
-      ]
+        name: [
+          { required: true, message: "音乐名称不能为空", trigger: "blur" }
+        ],
+        author: [
+          { required: true, message: "作者不能为空", trigger: "blur" }
+        ],
+        vip: [
+          { required: true, message: "VIP权限不能为空", trigger: "change" }
+        ],
+        shelf: [
+          { required: true, message: "上架状态不能为空", trigger: "change" }
+        ],
+        musicType: [
+          { required: true, message: "音乐类型不能为空", trigger: "change" }
+        ]
+      }
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    /** 查询普通歌曲列表 */
     getList() {
       this.loading = true;
       listNormalSong(this.queryParams).then(response => {
@@ -269,51 +236,54 @@ export default {
         this.loading = false;
       });
     },
+    // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
+    // 表单重置
     reset() {
       this.form = {
         id: null,
-        musicName: null,
-        producer: null,
-        uploadTime: null,
-        fileType: null,
-        permission: 0,
-        tags: [],
-        status: 1,
-        audioType: '普通歌曲',
-        songUrl: null,
-        songFileName: null,
-        songFile: null,
-        coverUrl: null,
-        coverFile: null
+        musicId: null,
+        name: null,
+        author: null,
+        vip: 0,
+        shelf: 1,
+        imgAddr: null,
+        musicAddr: null,
+        musicType: "ordinary",
+        label: null
       };
       this.resetForm("form");
     },
+    /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "新增普通歌曲";
+      this.title = "添加普通歌曲";
     },
+    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
       getNormalSong(id).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "编辑普通歌曲";
+        this.title = "修改普通歌曲";
       });
     },
+    /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
@@ -333,112 +303,21 @@ export default {
         }
       });
     },
+    /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除歌曲编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除普通歌曲编号为"' + ids + '"的数据项？').then(function() {
         return delNormalSong(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
-    },
-    handleSongFileChange(file) {
-      this.form.songFile = file.raw;
-      this.form.songFileName = file.name;
-      this.form.songUrl = URL.createObjectURL(file.raw);
-    },
-    handleCoverFileChange(file) {
-      this.form.coverFile = file.raw;
-      this.form.coverUrl = URL.createObjectURL(file.raw);
-    },
-    beforeSongFileUpload(file) {
-      const isMusic = file.type === 'audio/mpeg' || file.type === 'audio/wav' || file.type === 'audio/flac';
-      const isLt50M = file.size / 1024 / 1024 < 50;
-
-      if (!isMusic) {
-        this.$message.error('上传文件只能是音频格式!');
-        return false;
-      }
-      if (!isLt50M) {
-        this.$message.error('上传文件大小不能超过 50MB!');
-        return false;
-      }
-      return true;
-    },
-    beforeCoverFileUpload(file) {
-      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
-      const isLt2M = file.size / 1024 / 1024 < 2;
-
-      if (!isImage) {
-        this.$message.error('上传封面只能是图片格式!');
-        return false;
-      }
-      if (!isLt2M) {
-        this.$message.error('上传封面大小不能超过 2MB!');
-        return false;
-      }
-      return true;
     }
   }
 };
 </script>
 
 <style scoped>
-.song-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.song-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.song-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 200px;
-  height: 60px;
-  line-height: 60px;
-  text-align: center;
-}
-.song-preview {
-  width: 200px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f7fa;
-  border-radius: 6px;
-}
-.song-preview i {
-  font-size: 20px;
-  color: #409EFF;
-  margin-right: 8px;
-}
-.cover-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.cover-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.cover-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  text-align: center;
-}
-.cover {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
 .el-tag {
   border-radius: 12px;
 }