refactor: add computed properties for image and audio cover URLs; refactor file handling and improve character length calculation

src/components/ShowFile/ShowFile.vue

@@ -771,7 +771,7 @@ import shortcutKeyMixin from './mixins/shortcutKey'
 import fileTooltipMixin from '@/components/ShowFile/mixins/fileTooltip'
 import fileDragMixin from '@/components/ShowFile/mixins/fileDrag'
 import filenameHandleMixin from '@/components/ShowFile/mixins/filenameHandle'
-import fileHandelMixin from '@/components/ShowFile/mixins/fileHandel'
+import fileHandleMixin from '@/components/ShowFile/mixins/fileHandle'
 import filepathHandleMixin from '@/components/ShowFile/mixins/filepathHandle'
 import fileLoadListMixin from '@/components/ShowFile/mixins/fileList'
 import searchFileMixin from '@/components/ShowFile/mixins/searchFile'
@@ -791,7 +791,7 @@ export default {
     fileTooltipMixin,
     fileDragMixin,
     filenameHandleMixin,
-    fileHandelMixin,
+    fileHandleMixin,
     filepathHandleMixin,
     searchFileMixin,
     commonFileMixin,

src/components/ShowFile/mixins/common.js

@@ -1,10 +1,16 @@
 import { formatSize, formatTime } from '@/utils/number'
 
 export default {
+  computed: {
+    imageUrl() {
+      return `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`
+    },
+    audioCoverUrl() {
+      return `${process.env.VUE_APP_BASE_API}/view/cover?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`
+    }
+  },
   data() {
     return {
-      imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
-      audioCoverUrl: `${process.env.VUE_APP_BASE_API}/view/cover?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
     }
   },
   methods: {

src/components/ShowFile/mixins/fileDrag.js

@@ -256,7 +256,8 @@ export default {
 
       let firstOver = 0 // 是否刚开始拖动
       let moveTitle = ''
-      setTimeout(function() {
+
+      this.$nextTick(() => {
         rows = target.childElementCount
         _this.dragElementList = []
         for (let i = 0; i < target.childElementCount; i++) {
@@ -290,7 +291,8 @@ export default {
             childOfImg.draggable = false
           }
         }
-      }, 300)
+      })
+
 
       // 被拖动的元素正在那个容器里
       let dragIndex = -1
@@ -303,10 +305,10 @@ export default {
           let node = null
           const className = e.toElement.className
           if (_this.grid) {
-            if (e.toElement.className === itemClassName) {
+            if (className === itemClassName) {
               node = e.toElement
             }
-            if (e.toElement.className === parentClassName) {
+            if (className === parentClassName) {
               node = e.fromElement
             }
           } else {

src/components/ShowFile/mixins/fileHandle.js

@@ -249,10 +249,11 @@ export default {
                 cancelButtonText: `使用.${newExt}`,
               }
             ).then(() => {
-                newFileName = strFileName + '.' + row.suffix
+              const finalFileName = strFileName + '.' + row.suffix
-              }).catch(() => {}).then(() => {
+              this.rename(row, finalFileName)
-                this.rename(row, newFileName)
+            }).catch(() => {
-              })
+              this.rename(row, newFileName)
+            })
           } else {
             this.rename(row, newFileName)
           }

src/components/ShowFile/mixins/fileList.js

@@ -152,6 +152,7 @@ export default {
         const row = this.pathList[this.pathList.length - 1]
         thisPath = `${row.row.path}${row.folder}`
       }
+      console.log('fileDoc', fileDoc)
       const isCurrentPath = (thisPath + '/') === fileDoc
       if ('deleteFile' === url && (isCurrentPath || this.$route.path.startsWith('/recently'))) {
         this.getFileListEnter()
@@ -267,11 +268,11 @@ export default {
       }
       this.editingIndex = -1
       const queryTagId = this.$route.query.tagId ? `&tagId=${this.$route.query.tagId}` : ''
-      const basePath = this.getBasePath().replaceAll('#', '%23')
+      const basePath = this.getBasePath().replace(/#/g, '%23')
       const keyword = this.$route.query.keyword ? `&keyword=${this.$route.query.keyword}` : ''
       const folder = this.$route.query.folder ? `&folder=${this.$route.query.folder}` : ''
       const searchOpenFolder = this.$route.query.searchOpenFolder ? `&searchOpenFolder=${this.$route.query.searchOpenFolder}` : ''
-      this.$router.push(`?vmode=${this.vmode}&path=${this.path.replaceAll('#', '%23')}${folder}${queryTagId}${basePath}${keyword}${searchOpenFolder}`)
+      this.$router.push(`?vmode=${this.vmode}&path=${this.path.replace(/#/g, '%23')}${folder}${queryTagId}${basePath}${keyword}${searchOpenFolder}`)
       // 改变拖拽目标
       this.rowDrop()
       // 画矩形选取

src/components/ShowFile/mixins/filenameHandle.js

@@ -53,21 +53,48 @@ export default {
     },
   },
   methods: {
-    // 判断给定的字符是否是中文
-    isChineseChar(char) {
-      return char.charCodeAt(0) > 255
-    },
     // 获取字符的长度。中文字符长度为2，其他字符长度为1
     getCharLength(char) {
-      //return this.isChineseChar(char) ? 2 : 1
+      // 优化的字符长度计算函数
-      // 简单判断字符长度：中文字符和全角字符长度为2，其他为1
+      // 使用 Unicode 范围来判断字符宽度，更准确且性能更好
-      if (this.isChineseChar(char)) {
+
+      if (!char) return 0; // 处理空字符或 undefined
+
+      const code = char.codePointAt(0);
+
+      // 全角字符范围判断（长度为2）
+      if (
+        // 中日韩统一表意文字 (CJK Unified Ideographs)
+        (code >= 0x4E00 && code <= 0x9FFF) ||
+        // 中日韩扩展A区
+        (code >= 0x3400 && code <= 0x4DBF) ||
+        // 中日韩符号和标点
+        (code >= 0x3000 && code <= 0x303F) ||
+        // 全角ASCII、全角标点
+        (code >= 0xFF00 && code <= 0xFFEF) ||
+        // 平假名
+        (code >= 0x3040 && code <= 0x309F) ||
+        // 片假名
+        (code >= 0x30A0 && code <= 0x30FF) ||
+        // 韩文字母
+        (code >= 0xAC00 && code <= 0xD7AF) ||
+        // 其他可能的宽字符
+        (code >= 0x1100 && code <= 0x11FF) || // 韩文字母扩展
+        (code >= 0x2E80 && code <= 0x2EFF) || // 中日韩部首补充
+        (code >= 0x2F00 && code <= 0x2FDF) || // 康熙部首
+        (code >= 0x31C0 && code <= 0x31EF) || // 中日韩笔画
+        (code >= 0xF900 && code <= 0xFAFF) || // 中日韩兼容表意文字
+        (code >= 0xFE30 && code <= 0xFE4F) || // 中日韩兼容形式
+        // 表情符号和其他宽字符
+        (code >= 0x1F300 && code <= 0x1F9FF) ||
+        // 全角空格
+        code === 0x3000
+      ) {
         return 2;
-      } else if (char === ' ') {
-        return 2; // 空格作为一个字符处理
-      } else {
-        return 1;
       }
+
+      // 半角字符（包括普通空格、ASCII字符等）
+      return 1;
     },
     // 获取有效长度。如果有后缀，则包括后缀和点的长度；否则是基础名称和后7位的长度
     getEffectiveLength(base, suffix) {

src/components/ShowFile/mixins/searchFile.js

@@ -154,13 +154,9 @@ export default {
     searchFileAndOpenDir(fileId, onLoad) {
       this.beforeLoadData(onLoad)
 
-      const queryTagId = this.$route.query.tagId
+      const queryTagId = this.$route.query.tagId ? `&tagId=${this.$route.query.tagId}` : ''
-        ? `&tagId=${this.$route.query.tagId}`
+      const path = this.$route.query.path ? `&path=${this.$route.query.path}`.replace(/#/g, '%23') : ''
-        : ''
+      const keyword = this.$route.query.keyword ? `&keyword=${this.$route.query.keyword}` : ''
-      const path = this.$route.query.path ? `&path=${this.$route.query.path}`.replaceAll('#', '%23') : ''
-      const keyword = this.$route.query.keyword
-        ? `&keyword=${this.$route.query.keyword}`
-        : ''
       const basePath = this.getBasePath()
       const searchOpenFolder = `&searchOpenFolder=${fileId}`
       const folder = this.$route.query.folder ? `&folder=${this.$route.query.folder}` : ''

src/components/ShowFile/mixins/styleControl.js

@@ -17,6 +17,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      selectedRowIndices: new Set()
+    }
+  },
   methods: {
     sortChangeOfMenu(prop, headerIndex) {
       let tableHeader = document.querySelector('.el-table__header thead tr')
@@ -56,8 +61,7 @@ export default {
     },
     addClass(el, className) {
       if (el) {
-        const str = el.className
+        el.classList.add(className)
-        el.className = el.className + ' ' + className
       }
     },
     // 收集选中的index值作为数组 传递给rowRed判断变换样式
@@ -67,6 +71,7 @@ export default {
         this.selectOrigin = rows[0].index
         this.rowContextData = rows[0]
       }
+      this.selectedRowIndices = new Set(rows.map(row => row.index));
       this.$refs.fileListTable.tableSelectData = rows
       this.selectRowData = rows
       this.changeSelectedStyle(rows)
@@ -102,7 +107,7 @@ export default {
     },
     // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
     rowStyle({ row, column, rowIndex, columnIndex }) {
-      if (this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === rowIndex) > -1) {
+      if (this.selectedRowIndices.has(rowIndex)) {
         if (columnIndex === 0) {
           return {
             backgroundColor: '#e0f3fc !important',