diff --git a/package.json b/package.json
index 779debd..634996e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jmal-cloud-view",
-  "version": "2.1.9",
+  "version": "2.2.32",
   "description": "jmalcloud",
   "author": "Jmal <zhushilun084@163.com>",
   "license": "MIT",
@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "ant-design-vue": "^1.6.5",
     "clipboard": "^2.0.6",
     "cropperjs": "^1.5.6",
@@ -48,7 +49,6 @@
     "vue-aplayer": "^1.6.1",
     "vue-runtime-helpers": "^1.1.2",
     "vue-simple-uploader": "^0.7.4",
-    "vue-template-compiler": "^2.6.12",
     "vue-video-player": "^5.0.2",
     "vue-wechat-title": "^2.0.5",
     "vuedraggable": "^2.23.2",
@@ -59,13 +59,13 @@
     "@babel/register": "7.0.0",
     "@vue/cli-plugin-babel": "3.6.0",
     "@vue/cli-plugin-eslint": "^3.9.1",
-    "@vue/cli-plugin-unit-jest": "^4.5.12",
-    "@vue/cli-service": "^4.5.12",
+    "@vue/cli-plugin-unit-jest": "3.6.3",
+    "@vue/cli-service": "3.6.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "23.6.0",
     "babel-plugin-import": "^1.13.0",
     "chalk": "2.4.2",
     "connect": "3.6.6",
@@ -79,7 +79,8 @@
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.2"
+    "svgo": "1.2.2",
+    "vue-template-compiler": "2.6.10"
   },
   "engines": {
     "node": ">=8.9",
diff --git a/public/index.html b/public/index.html
index 5bc5a10..158c25e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,20 +18,20 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
     <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.js"></script>
     <!--element-ui.js-->
-    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
-    <script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
+    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
     <!--pl-table.js-->
     <link rel="stylesheet" href="https://unpkg.com/pl-table@2.7.5/themes/index.css">
     <script src="https://unpkg.com/pl-table@2.7.5/lib/index.js"></script>
     <!--viewer css-->
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css">
-    <!--vue-aplayer-->
-    <script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
+    <!--vue-aplayer-theme-->
+    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
+
   </head>
   <body>
     <noscript>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index e9ee1bf..7b7af68 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -1374,7 +1374,6 @@ export default {
       }
       // 开始拖拽
       container.ondragstart = (e) => {
-          e.target.style.cursor = 'no-drop'
           // 正在选区获取按住关键键时禁止拖拽
           if (_this.drawFlag || _this.isCmd || _this.selectPin) {
             e.preventDefault()
@@ -1387,8 +1386,11 @@ export default {
           }
           // 该文件正在重命名
           if (e.target.rowIndex === _this.editingIndex){
+            e.preventDefault()
+            e.stopPropagation()
             return
           }
+          e.target.style.cursor = 'no-drop'
           // 当滚动条滚动后禁止拖拽
           if (_this.fileListScrollTop === 0) {
             // 复制被拖拽dom的title, 拖拽过程中移除, 拖拽完后还原
diff --git a/src/components/preview/AudioPreview.vue b/src/components/preview/AudioPreview.vue
index fa82758..3b16ddc 100644
--- a/src/components/preview/AudioPreview.vue
+++ b/src/components/preview/AudioPreview.vue
@@ -1,19 +1,19 @@
 <template>
   <div ref="audioPreview" v-if="show">
   <div class="audio-player"
-    v-aplayerDrag="{ x: transformX, y: transformY }"
+       v-aplayerDrag="{ x: transformX, y: transformY }"
     @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false" @touchmove="closeBarShow = true" @touchend="touchend">
-    <aplayer
+    <a-player
       ref="audioPlayer"
       autoplay
       listFolded
       loop.sync="all"
       order.sync="list"
       :mini.sync="mini"
-      :music.sync="music"
-      :list="list"
-      :lrc-type="0">
-    </aplayer>
+      :audio="list"
+      :lrc-type="0"
+    >
+    </a-player>
   <div v-show="closeBarShow" class="close-bar" @click="close">
     <svg-icon class="audio-player-close" icon-class="close"/>
   </div>
@@ -36,19 +36,12 @@ export default {
     data() {
       return {
         pc: this.$pc,
-        transformX: !this.$pc ? 20: (document.body.clientWidth-500)/2,
-        transformY: 0,
+        transformX: !this.$pc ? document.body.clientWidth - 100: (document.body.clientWidth-500)/2,
+        transformY: !this.$pc ? document.body.clientHeight/2 - 100 : 0,
         show: false,
         closeBarShow: false,
-        music: {
-          id: '',
-          src: '', // 音频文件的 URL
-          title: '', // 歌曲名称
-          artist: '', // 演唱者
-          pic: '', // 封面图片 URL
-          lrc: '', // LRC 歌词或者歌词文件的 URL
-          theme: '', // 歌曲的主题色，会覆盖播放器的主题色
-        },
+        // api ==>  https://aplayer.netlify.app/docs/guide/options.html#volume
+        audios: [],
         list: [],
         mini: !this.$pc,
         audioPlayerDoc: undefined
@@ -65,31 +58,40 @@ export default {
     },
     mounted() {
       Bus.$on('onAddAudio',(newFile, audioCoverUrl) => {
-        this.show = true
+        if (!this.show) {
+          this.show = true
+        }
         let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
         if(!this.$store.state.user.token){
           url = fileConfig.publicPreviewUrl(newFile.id, window.shareId);
         }
         let music = newFile.music
         let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)
-        this.music = {
+        let musicOperation = {
           id: newFile.id,
-          src: url,
-          title: music.songName ? music.songName : fileName,
+          url: url,
+          name: music.songName ? music.songName : fileName,
           artist: music.songName ? music.singer : fileName,
-          pic: music.songName ? audioCoverUrl+newFile.id :'',
-          lrc: '',
-          theme: 'pic'
+          cover: music.songName ? audioCoverUrl+newFile.id :'',
+          type: newFile.contentType
         }
-        let musicIndex = this.list.findIndex(item => item.id === newFile.id)
+        let musicIndex = this.audios.findIndex(item => item.id === newFile.id)
         if(musicIndex < 0){
-          this.list.push(this.music)
-          this.$nextTick(()=>{
-            this.$refs.audioPlayer.play()
-          })
+          if(this.audios.length === 1){
+            let loop = document.querySelector('.aplayer-icon.aplayer-icon-loop');
+            loop.style.display = 'inline'
+            let order = document.querySelector('.aplayer-icon.aplayer-icon-order');
+            order.style.display = 'inline'
+          }
+          this.audios.push(musicOperation)
+          setTimeout(() => {
+            this.list = this.audios
+            setTimeout(() => {
+              this.$refs.audioPlayer.switch(this.audios.length - 1)
+            }, 0)
+          }, 0)
         } else {
-          let listMusic = this.audioPlayerDoc.querySelectorAll('.aplayer-list ol li')[musicIndex]
-          listMusic.click()
+          this.$refs.audioPlayer.switch(musicIndex)
         }
       })
     },
@@ -98,7 +100,7 @@ export default {
         this.show = false
         this.audioPlayerDoc = undefined
         this.$refs.audioPlayer.pause()
-        this.list.splice(0, this.list.length)
+        this.audios.splice(0, this.audios.length)
       },
       touchend() {
         const that = this
diff --git a/src/main.js b/src/main.js
index 6a79e43..bc57103 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,10 +37,11 @@ Vue.use(EVueContextmenu)
 
 Vue.use(vant.ImagePreview)
 
-Vue.component('Aplayer', VueAPlayer)
-VueAPlayer.disableVersionBadge = true
-
-Vue.config.productionTip = false
+import APlayer from '@moefe/vue-aplayer';
+Vue.use(APlayer, {
+  defaultCover: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60',
+  productionTip: false, // 是否在控制台输出版本信息
+});
 
 new Vue({
   el: '#app',
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index 8f17a76..46efaf5 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -10,7 +10,7 @@
 }
 
 >>>.svg-icon {
-   margin-top: 0.05em;
+  margin-top: 0.05em;
   // vertical-align: unset;
 }
 
@@ -70,7 +70,6 @@
 .newFileMenu li > .menuitem > .text {
   cursor: pointer;
   font-weight: normal;
-  margin-left: 15px;
 }
 .newFileMenu li > .menuitem > .svg-icon {
   cursor: pointer;
@@ -294,6 +293,7 @@
   color: #606266;
   font-size: smaller;
   word-wrap: break-word;
+  width: -webkit-fill-available;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -336,7 +336,7 @@
   .grid-item-icon-image {
     width: 100%;
     height: 100%;
-    top: 0;
+    top: 0px;
     border-radius: 5px;
     margin: 0;
     -webkit-backdrop-filter: contrast(0.5);
@@ -346,21 +346,21 @@
 /deep/ .grid-time:hover {
   background-color: #e0f3fc;
 }
- .checkbox-group-header {
+.checkbox-group-header {
   margin: 10px 0 0;
-   .grid-all-checkbox {
-     height: 50px;
-     width: fit-content;
-     margin-left: 25px;
-     font-size: 14px;
-     padding: 10px;
-   }
-   .el-divider--horizontal {
-     display: block;
-     height: 1px;
-     width: 100%;
-     margin: 0;
-   }
+  .grid-all-checkbox {
+    height: 50px;
+    width: fit-content;
+    margin-left: 25px;
+    font-size: 14px;
+    padding: 10px;
+  }
+  .el-divider--horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 0;
+  }
 }
 /deep/ .grid-divider {
   display: block;