From aa88b63bb2e8c90285479dddc93cab39c7315ab2 Mon Sep 17 00:00:00 2001
From: wangjie52 <wangjie52@baijia.com>
Date: Sat, 2 Aug 2025 18:15:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=EF=BC=8C=E7=AE=80=E5=8C=96?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=92=8C=E4=BF=AE=E6=94=B9Banner=E3=80=81?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E3=80=81=E6=8E=A8=E8=8D=90=E7=9A=84=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=8C=E7=BB=9F=E4=B8=80=E4=BD=BF=E7=94=A8JSON?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/api/content/banner.js            |  46 +++-----
 ruoyi-ui/src/api/content/category.js          |  38 +++----
 ruoyi-ui/src/api/content/recommend.js         |  38 +++----
 ruoyi-ui/src/views/content/banner/index.vue   |  67 ++++++++----
 ruoyi-ui/src/views/content/category/index.vue |  60 ++++++++---
 .../src/views/content/recommend/index.vue     | 101 ++++++++++++++----
 ruoyi-ui/src/views/content/tag/index.vue      |  24 ++---
 7 files changed, 227 insertions(+), 147 deletions(-)

diff --git a/ruoyi-ui/src/api/content/banner.js b/ruoyi-ui/src/api/content/banner.js
index e01a472..ac33bf7 100644
--- a/ruoyi-ui/src/api/content/banner.js
+++ b/ruoyi-ui/src/api/content/banner.js
@@ -19,47 +19,35 @@ export function getBanner(id) {
 
 // 新增Banner
 export function addBanner(data) {
-  const formData = new FormData()
-  formData.append('name', data.name)
-  formData.append('sort', data.sort)
-  formData.append('jumpUrl', data.jumpUrl || '')
-  if (data.file) {
-    formData.append('file', data.file)
-  }
   return request({
     url: '/back/banner/add',
     method: 'post',
-    data: formData,
+    data: {
+      name: data.name,
+      sort: data.sort,
+      jumpUrl: data.jumpUrl || '',
+      bannerAddr: data.bannerAddr
+    },
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/json'
     }
   })
 }
 
 // 修改Banner
 export function updateBanner(data) {
-  const formData = new FormData()
-  formData.append('id', data.id)
-  formData.append('name', data.name)
-  formData.append('sort', data.sort)
-  formData.append('jumpUrl', data.jumpUrl || '')
-  
-  // 如果有新图片文件，上传新图片
-  if (data.file) {
-    formData.append('file', data.file)
-  }
-  
-  // 传递图片路径（原图片或新图片的路径）
-  if (data.bannerAddr) {
-    formData.append('bannerAddr', data.bannerAddr)
-  }
-  
   return request({
-    url: '/back/banner/update',
-    method: 'post',
-    data: formData,
+    url: '/back/banner',
+    method: 'put',
+    data: {
+      id: data.id,
+      name: data.name,
+      sort: data.sort,
+      jumpUrl: data.jumpUrl || '',
+      bannerAddr: data.bannerAddr
+    },
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/json'
     }
   })
 }
diff --git a/ruoyi-ui/src/api/content/category.js b/ruoyi-ui/src/api/content/category.js
index 27c65a7..81f5c20 100644
--- a/ruoyi-ui/src/api/content/category.js
+++ b/ruoyi-ui/src/api/content/category.js
@@ -19,43 +19,31 @@ export function getCategory(id) {
 
 // 新增分类
 export function addCategory(data) {
-  const formData = new FormData()
-  formData.append('name', data.name)
-  if (data.file) {
-    formData.append('file', data.file)
-  }
   return request({
     url: '/back/category',
     method: 'post',
-    data: formData,
+    data: {
+      name: data.name,
+      backImg: data.backImg
+    },
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/json'
     }
   })
 }
 
 // 修改分类
 export function updateCategory(data) {
-  const formData = new FormData()
-  formData.append('id', data.id)
-  formData.append('name', data.name)
-  
-  // 如果有新图片文件，上传新图片
-  if (data.file) {
-    formData.append('file', data.file)
-  }
-  
-  // 传递图片路径（原图片或新图片的路径）
-  if (data.backImg) {
-    formData.append('backImg', data.backImg)
-  }
-  
   return request({
-    url: '/back/category/update',
-    method: 'post',
-    data: formData,
+    url: '/back/category',
+    method: 'put',
+    data: {
+      id: data.id,
+      name: data.name,
+      backImg: data.backImg
+    },
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/json'
     }
   })
 }
diff --git a/ruoyi-ui/src/api/content/recommend.js b/ruoyi-ui/src/api/content/recommend.js
index 4a4b7b2..56ea5b1 100644
--- a/ruoyi-ui/src/api/content/recommend.js
+++ b/ruoyi-ui/src/api/content/recommend.js
@@ -19,41 +19,33 @@ export function getRecommend(id) {
 
 // 新增推荐
 export function addRecommend(data) {
-  const formData = new FormData()
-  formData.append('name', data.name)
-  if (data.file) {
-    formData.append('file', data.file)
-  }
-  if (data.backImg) {
-    formData.append('backImg', data.backImg)
-  }
   return request({
     url: '/back/re',
     method: 'post',
-    data: formData,
+    data: {
+      name: data.name,
+      desc: data.desc,
+      backImg: data.backImg
+    },
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/json'
     }
   })
 }
 
 // 修改推荐
 export function updateRecommend(data) {
-  const formData = new FormData()
-  formData.append('id', data.id)
-  formData.append('name', data.name)
-  if (data.file) {
-    formData.append('file', data.file)
-  }
-  if (data.backImg) {
-    formData.append('backImg', data.backImg)
-  }
   return request({
-    url: '/back/re/update',
-    method: 'post',
-    data: formData,
+    url: '/back/re',
+    method: 'put',
+    data: {
+      id: data.id,
+      name: data.name,
+      desc: data.desc,
+      backImg: data.backImg
+    },
     headers: {
-      'Content-Type': 'multipart/form-data'
+      'Content-Type': 'application/json'
     }
   })
 }
diff --git a/ruoyi-ui/src/views/content/banner/index.vue b/ruoyi-ui/src/views/content/banner/index.vue
index a20d197..1062426 100644
--- a/ruoyi-ui/src/views/content/banner/index.vue
+++ b/ruoyi-ui/src/views/content/banner/index.vue
@@ -1,22 +1,18 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
       <el-form-item label="Banner名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入Banner名称"
           clearable
+          style="width: 200px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -25,17 +21,20 @@
           @click="handleAdd"
           v-hasPermi="['content:banner:add']"
         >新增</el-button>
-      </el-col>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="bannerList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="bannerList" @selection-change="handleSelectionChange" style="width: 100%">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="Banner ID" align="center" prop="id" />
-      <el-table-column label="Banner名称" align="center" prop="name" />
-      <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="跳转链接" align="center" prop="jumpUrl" :show-overflow-tooltip="true" />
-      <el-table-column label="Banner图片" align="center" prop="bannerAddr" width="100">
+      <el-table-column label="Banner ID" align="center" prop="id" min-width="100" />
+      <el-table-column label="Banner名称" align="center" prop="name" min-width="150" />
+      <el-table-column label="排序" align="center" prop="sort" min-width="80" />
+      <el-table-column label="跳转链接" align="center" prop="jumpUrl" min-width="200" :show-overflow-tooltip="true" />
+      <el-table-column label="Banner图片" align="center" prop="bannerAddr" min-width="120">
         <template slot-scope="scope">
           <el-image 
             style="width: 80px; height: 50px"
@@ -45,12 +44,12 @@
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="150">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -116,6 +115,7 @@
 <script>
 import { listBanner, getBanner, delBanner, addBanner, updateBanner } from "@/api/content/banner";
 import { getImageUrl } from "@/utils/image.js";
+import request from '@/utils/request';
 
 export default {
   name: "Banner",
@@ -237,7 +237,7 @@ export default {
       // 手动检查图片字段
       if (!this.form.id) {
         // 新增操作：必须上传图片
-        if (!this.form.file) {
+        if (!this.form.bannerAddr) {
           this.$message.error('Banner图片不能为空');
           return;
         }
@@ -252,7 +252,7 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            // 编辑操作：直接使用bannerAddr字段
+            // 编辑操作：使用bannerAddr字段（上传后的地址）
             updateBanner(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -284,12 +284,39 @@ export default {
       this.form.file = file.raw;
       // 创建本地预览URL
       this.form.previewUrl = URL.createObjectURL(file.raw);
-      // 将新图片路径保存到bannerAddr字段，保持字段一致
-      this.form.bannerAddr = file.name; // 或者使用其他方式生成路径
+      
+      // 上传图片到服务器
+      this.uploadImage(file.raw);
       
       // 强制更新视图
       this.$forceUpdate();
     },
+    // 上传图片到服务器
+    uploadImage(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      // 调用上传接口
+      request({
+        url: '/back/upload/config/file',
+        method: 'post',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(response => {
+        if (response.code === 200) {
+          // 上传成功，保存返回的图片地址
+          this.form.bannerAddr = response.data;
+          this.$message.success('图片上传成功');
+        } else {
+          this.$message.error('图片上传失败：' + response.msg);
+        }
+      }).catch(error => {
+        console.error('图片上传失败:', error);
+        this.$message.error('图片上传失败');
+      });
+    },
     // 图片上传前的处理
     beforeImageUpload(file) {
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
diff --git a/ruoyi-ui/src/views/content/category/index.vue b/ruoyi-ui/src/views/content/category/index.vue
index aba256c..2310209 100644
--- a/ruoyi-ui/src/views/content/category/index.vue
+++ b/ruoyi-ui/src/views/content/category/index.vue
@@ -12,11 +12,6 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -25,15 +20,18 @@
           @click="handleAdd"
           v-hasPermi="['content:category:add']"
         >新增</el-button>
-      </el-col>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="categoryList" @selection-change="handleSelectionChange" style="width: 100%">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="分类ID" align="center" prop="categoryId" />
-      <el-table-column label="分类名称" align="center" prop="name" />
-      <el-table-column label="分类图片" align="center" prop="backImg" width="100">
+      <el-table-column label="分类ID" align="center" prop="categoryId" min-width="120" />
+      <el-table-column label="分类名称" align="center" prop="name" min-width="150" />
+      <el-table-column label="分类图片" align="center" prop="backImg" min-width="120">
         <template slot-scope="scope">
           <el-image 
             style="width: 50px; height: 50px"
@@ -43,12 +41,12 @@
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="200">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -176,6 +174,7 @@
 import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/content/category";
 import { listMusic, bindMusicToCategory, getCategoryBoundMusic } from "@/api/content/music";
 import { getImageUrl } from "@/utils/image.js";
+import request from '@/utils/request';
 
 export default {
   name: "Category",
@@ -302,7 +301,7 @@ export default {
       // 手动检查图片字段
       if (!this.form.id) {
         // 新增操作：必须上传图片
-        if (!this.form.file) {
+        if (!this.form.backImg) {
           this.$message.error('分类图片不能为空');
           return;
         }
@@ -317,7 +316,7 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            // 编辑操作：直接使用backImg字段
+            // 编辑操作：使用backImg字段（上传后的地址）
             updateCategory(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -349,12 +348,39 @@ export default {
       this.form.file = file.raw;
       // 创建本地预览URL
       this.form.previewUrl = URL.createObjectURL(file.raw);
-      // 将新图片路径保存到backImg字段，保持字段一致
-      this.form.backImg = file.name; // 或者使用其他方式生成路径
+      
+      // 上传图片到服务器
+      this.uploadImage(file.raw);
       
       // 强制更新视图
       this.$forceUpdate();
     },
+    // 上传图片到服务器
+    uploadImage(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      // 调用上传接口
+      request({
+        url: '/back/upload/config/file',
+        method: 'post',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(response => {
+        if (response.code === 200) {
+          // 上传成功，保存返回的图片地址
+          this.form.backImg = response.data;
+          this.$message.success('图片上传成功');
+        } else {
+          this.$message.error('图片上传失败：' + response.msg);
+        }
+      }).catch(error => {
+        console.error('图片上传失败:', error);
+        this.$message.error('图片上传失败');
+      });
+    },
     // 图片上传前的处理
     beforeImageUpload(file) {
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
diff --git a/ruoyi-ui/src/views/content/recommend/index.vue b/ruoyi-ui/src/views/content/recommend/index.vue
index bee5647..d9e0819 100644
--- a/ruoyi-ui/src/views/content/recommend/index.vue
+++ b/ruoyi-ui/src/views/content/recommend/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="推荐名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -12,11 +12,6 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -25,15 +20,18 @@
           @click="handleAdd"
           v-hasPermi="['content:recommend:add']"
         >新增</el-button>
-      </el-col>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="recommendList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="recommendList" @selection-change="handleSelectionChange" style="width: 100%">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="推荐ID" align="center" prop="categoryId" />
-      <el-table-column label="推荐名称" align="center" prop="name" />
-      <el-table-column label="推荐图片" align="center" prop="backImg" width="100">
+      <el-table-column label="推荐ID" align="center" prop="id" min-width="120" />
+      <el-table-column label="推荐名称" align="center" prop="name" min-width="150" />
+      <el-table-column label="推荐图片" align="center" prop="backImg" min-width="120">
         <template slot-scope="scope">
           <el-image 
             style="width: 50px; height: 50px"
@@ -43,12 +41,12 @@
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="200">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -89,6 +87,9 @@
         <el-form-item label="推荐名称" prop="name" required>
           <el-input v-model="form.name" placeholder="请输入推荐名称" />
         </el-form-item>
+        <el-form-item label="推荐描述" prop="desc">
+          <el-input v-model="form.desc" type="textarea" :rows="3" placeholder="请输入推荐描述" />
+        </el-form-item>
         <el-form-item label="推荐图片" required>
           <el-upload
             action=""
@@ -102,6 +103,9 @@
             <img v-else-if="form.backImg" :src="getImageUrlMethod(form.backImg)" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
+          <div v-if="imageUploading" style="margin-top: 10px; color: #409EFF;">
+            <i class="el-icon-loading"></i> 图片上传中...
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -176,6 +180,7 @@
 import { listRecommend, getRecommend, delRecommend, addRecommend, updateRecommend, getRecommendBoundMusic, bindMusicToRecommend } from "@/api/content/recommend";
 import { listMusic } from "@/api/content/music";
 import { getImageUrl } from "@/utils/image.js";
+import request from '@/utils/request';
 
 export default {
   name: "Recommend",
@@ -213,6 +218,8 @@ export default {
           { required: true, message: "推荐名称不能为空", trigger: "blur" }
         ]
       },
+      // 图片上传状态
+      imageUploading: false,
       // 绑定音乐相关
       bindMusicOpen: false,
       musicLoading: false,
@@ -255,10 +262,12 @@ export default {
       this.form = {
         id: null,
         name: null,
+        desc: null,
         backImg: null,
         previewUrl: null,
         file: null
       };
+      this.imageUploading = false; // 重置上传状态
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -299,10 +308,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      // 检查图片是否正在上传
+      if (this.imageUploading) {
+        this.$message.warning('图片正在上传中，请稍候...');
+        return;
+      }
+      
       // 手动检查图片字段
       if (!this.form.id) {
         // 新增操作：必须上传图片
-        if (!this.form.file) {
+        if (!this.form.backImg) {
           this.$message.error('推荐图片不能为空');
           return;
         }
@@ -314,10 +329,12 @@ export default {
         }
       }
       
+      console.log('提交表单数据：', this.form); // 添加调试日志
+      
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            // 编辑操作：直接使用backImg字段
+            // 编辑操作：使用backImg字段（上传后的地址）
             updateRecommend(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -349,12 +366,56 @@ export default {
       this.form.file = file.raw;
       // 创建本地预览URL
       this.form.previewUrl = URL.createObjectURL(file.raw);
-      // 将新图片路径保存到backImg字段，保持字段一致
-      this.form.backImg = file.name; // 或者使用其他方式生成路径
+      
+      // 清空之前的图片地址，等待新图片上传完成
+      this.form.backImg = null;
+      
+      // 设置上传状态
+      this.imageUploading = true;
+      
+      // 上传图片到服务器
+      this.uploadImage(file.raw);
       
       // 强制更新视图
       this.$forceUpdate();
     },
+    // 上传图片到服务器
+    uploadImage(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      // 调用上传接口
+      request({
+        url: '/back/upload/config/file',
+        method: 'post',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
+      }).then(response => {
+        if (response.code === 200) {
+          // 上传成功，保存返回的图片地址
+          this.form.backImg = response.data;
+          this.$message.success('图片上传成功');
+          console.log('图片上传成功，地址：', this.form.backImg); // 添加调试日志
+        } else {
+          this.$message.error('图片上传失败：' + response.msg);
+          // 上传失败时清空预览
+          this.form.previewUrl = null;
+          this.form.backImg = null;
+        }
+        // 无论成功失败都要重置上传状态
+        this.imageUploading = false;
+      }).catch(error => {
+        console.error('图片上传失败:', error);
+        this.$message.error('图片上传失败');
+        // 上传失败时清空预览
+        this.form.previewUrl = null;
+        this.form.backImg = null;
+        // 重置上传状态
+        this.imageUploading = false;
+      });
+    },
     // 图片上传前的处理
     beforeImageUpload(file) {
       const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
@@ -372,10 +433,10 @@ export default {
     },
     // 绑定音乐
     handleBindMusic(row) {
-      this.musicQueryParams.categoryId = row.categoryId;
+      this.musicQueryParams.categoryId = row.id;
       this.selectedMusicIds = []; // 重置选中的音乐
       this.boundMusicIds = []; // 重置已绑定的音乐ID
-      this.getBoundMusic(row.categoryId); // 先获取已绑定的音乐
+      this.getBoundMusic(row.id); // 先获取已绑定的音乐
       this.getMusicList();
       this.bindMusicOpen = true;
     },
diff --git a/ruoyi-ui/src/views/content/tag/index.vue b/ruoyi-ui/src/views/content/tag/index.vue
index 4d762e2..5481253 100644
--- a/ruoyi-ui/src/views/content/tag/index.vue
+++ b/ruoyi-ui/src/views/content/tag/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="标签名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -12,11 +12,6 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -25,20 +20,23 @@
           @click="handleAdd"
           v-hasPermi="['content:tag:add']"
         >新增</el-button>
-      </el-col>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="tagList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="tagList" @selection-change="handleSelectionChange" style="width: 100%">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="标签ID" align="center" prop="id" />
-      <el-table-column label="标签名称" align="center" prop="name" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="标签ID" align="center" prop="id" min-width="120" />
+      <el-table-column label="标签名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="150">
         <template slot-scope="scope">
           <el-button
             size="mini"