From bc9acf1606151e93a37efca4c3be9660dd5fbbf1 Mon Sep 17 00:00:00 2001 From: jmal Date: Thu, 7 Aug 2025 10:43:59 +0800 Subject: [PATCH] refactor: add computed properties for image and audio cover URLs; refactor file handling and improve character length calculation --- src/components/ShowFile/ShowFile.vue | 4 +- src/components/ShowFile/mixins/common.js | 10 +++- src/components/ShowFile/mixins/fileDrag.js | 10 ++-- .../mixins/{fileHandel.js => fileHandle.js} | 9 ++-- src/components/ShowFile/mixins/fileList.js | 5 +- .../ShowFile/mixins/filenameHandle.js | 49 ++++++++++++++----- src/components/ShowFile/mixins/searchFile.js | 10 ++-- .../ShowFile/mixins/styleControl.js | 11 +++-- 8 files changed, 73 insertions(+), 35 deletions(-) rename src/components/ShowFile/mixins/{fileHandel.js => fileHandle.js} (99%) diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index a82e6f3..485a299 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/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, diff --git a/src/components/ShowFile/mixins/common.js b/src/components/ShowFile/mixins/common.js index 5cc643f..5439145 100644 --- a/src/components/ShowFile/mixins/common.js +++ b/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: { diff --git a/src/components/ShowFile/mixins/fileDrag.js b/src/components/ShowFile/mixins/fileDrag.js index b0ddc45..befb92f 100644 --- a/src/components/ShowFile/mixins/fileDrag.js +++ b/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 { diff --git a/src/components/ShowFile/mixins/fileHandel.js b/src/components/ShowFile/mixins/fileHandle.js similarity index 99% rename from src/components/ShowFile/mixins/fileHandel.js rename to src/components/ShowFile/mixins/fileHandle.js index 8ce960c..6c7b4af 100644 --- a/src/components/ShowFile/mixins/fileHandel.js +++ b/src/components/ShowFile/mixins/fileHandle.js @@ -249,10 +249,11 @@ export default { cancelButtonText: `使用.${newExt}`, } ).then(() => { - newFileName = strFileName + '.' + row.suffix - }).catch(() => {}).then(() => { - this.rename(row, newFileName) - }) + const finalFileName = strFileName + '.' + row.suffix + this.rename(row, finalFileName) + }).catch(() => { + this.rename(row, newFileName) + }) } else { this.rename(row, newFileName) } diff --git a/src/components/ShowFile/mixins/fileList.js b/src/components/ShowFile/mixins/fileList.js index 81e60a3..c9c7d6b 100644 --- a/src/components/ShowFile/mixins/fileList.js +++ b/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() // 画矩形选取 diff --git a/src/components/ShowFile/mixins/filenameHandle.js b/src/components/ShowFile/mixins/filenameHandle.js index 0cde173..f89f2b7 100644 --- a/src/components/ShowFile/mixins/filenameHandle.js +++ b/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 - if (this.isChineseChar(char)) { + // 优化的字符长度计算函数 + // 使用 Unicode 范围来判断字符宽度，更准确且性能更好 + + 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) { diff --git a/src/components/ShowFile/mixins/searchFile.js b/src/components/ShowFile/mixins/searchFile.js index 970be32..9a186dc 100644 --- a/src/components/ShowFile/mixins/searchFile.js +++ b/src/components/ShowFile/mixins/searchFile.js @@ -154,13 +154,9 @@ export default { searchFileAndOpenDir(fileId, onLoad) { this.beforeLoadData(onLoad) - const queryTagId = this.$route.query.tagId - ? `&tagId=${this.$route.query.tagId}` - : '' - 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 queryTagId = 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 basePath = this.getBasePath() const searchOpenFolder = `&searchOpenFolder=${fileId}` const folder = this.$route.query.folder ? `&folder=${this.$route.query.folder}` : '' diff --git a/src/components/ShowFile/mixins/styleControl.js b/src/components/ShowFile/mixins/styleControl.js index f3b91cb..84a8ac7 100644 --- a/src/components/ShowFile/mixins/styleControl.js +++ b/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.className = el.className + ' ' + className + el.classList.add(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',