+
@@ -191,6 +191,10 @@ export default {
line-height: 35px;
}
+>>> .image-slot-error {
+ margin-top: 10px;
+}
+
.icon-favorite {
position: absolute;
color: #f5222d;
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 1add44f..2760cf0 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -516,10 +516,8 @@
ref="checkboxGroup"
>
-
-
- {{ gridFilename(item) }}
-
+
+ {{ gridFilename(item) }}
@@ -1136,7 +1136,8 @@ export default {
grid: this.defaultGrid,
vmode: this.defaultGrid ? 'grid' : 'list',
gridColumnNum: -1,
- gridColumnWidth: 120,
+ gridPaddingRight: 0,
+ gridItemWidth: 125,
allChecked: false,
summaries: '',
shareDialogVisible: false,
@@ -1201,61 +1202,42 @@ export default {
gridFilename() {
// 优化文件名,如果文件名过长,则进行截取
return function(item) {
- let filename = item.name
-
+ let filename = item.name;
// 如果是文件夹,直接返回文件夹名
- if (item.isFolder) {
- return filename
+ if (item.isFolder || !this.grid) {
+ return filename;
}
-
+ const singleLine = item.contentType && item.contentType.indexOf('audio') > -1 || item.contentType.indexOf('video') > -1 || item.contentType.startsWith('image')
+ const gridFilenameLength = singleLine ? 14 : 32
// 分离文件名和后缀
- let parts = filename.split('.')
- let suffix = parts.length > 1 ? parts.pop() : ''
- let base = parts.join('.')
-
+ let parts = filename.split('.');
+ let suffix = parts.length > 1 ? parts.pop() : '';
+ let base = parts.join('.');
// 获取文件名的有效长度
- let effectiveLength = this.getEffectiveLength(base, suffix)
-
- // 如果有效长度小于或等于14,则直接返回文件名
- if (effectiveLength <= 14) {
- return filename
+ let effectiveLength = this.getEffectiveLength(base, suffix);
+ // 如果有效长度小于或等于规定的长度,则直接返回文件名
+ if (effectiveLength <= gridFilenameLength) {
+ return filename;
}
-
// 根据是否有后缀来确定需要截取的长度
- let sliceLength = 14 - (suffix ? suffix.length + 1 + 1 : 0) // 加1是为了“…”
-
- let prev = ''
- let currentLength = 0
-
+ let sliceLength = gridFilenameLength - (suffix ? suffix.length + 2 : 1); // +2 是为了“…”和分隔符
+ let prev = '';
+ let currentLength = 0;
// 截取字符串,确保不会在中文字符中间断开
for (let char of Array.from(base)) {
- let charLength = this.getCharLength(char)
-
+ let charLength = this.getCharLength(char);
if (currentLength + charLength > sliceLength) {
- break
+ break;
}
-
- currentLength += charLength
- prev += char
+ currentLength += charLength;
+ prev += char;
}
-
// 根据是否有后缀返回相应的格式
if (suffix) {
- return prev + '…' + suffix
+ return prev + '…' + '.' + suffix;
}
-
- return prev + '…'
- }
- },
- getSummaries2() {
- let totalSize = 0
- this.fileList.forEach(file => {
- totalSize += file.size
- })
- const sumFileAndFolder = this.getShowSumFileAndFolder(this.fileList)
- const sizeSum = this.getShowSumSize(totalSize)
- this.summaries = sumFileAndFolder + sizeSum
- return totalSize > 0 ? sumFileAndFolder + sizeSum : ''
+ return prev + '…';
+ };
},
getSummaries3() {
let totalSize = 0
@@ -1548,25 +1530,18 @@ export default {
containerResize() {
const container = document.querySelector('.dashboard-container')
let clientWidth = container.clientWidth
- this.clientHeight =
- document.documentElement.clientHeight - this.lessClientHeight
+ this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
+ this.gridItemWidth = 125
if (this.queryFileType === 'image') {
- this.gridColumnNum = Math.round((clientWidth - 10) / 165)
+ this.gridItemWidth = 165
+ this.gridColumnNum = Math.trunc((clientWidth - 10) / this.gridItemWidth)
} else {
- this.gridColumnNum = Math.round((clientWidth - 10) / 135)
- }
- this.gridColumnWidth =
- (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5
- if (clientWidth < 900) {
- this.showUpdateDateItem = false
- } else {
- this.showUpdateDateItem = true
- }
- if (clientWidth < 500) {
- this.showSizeItem = false
- } else {
- this.showSizeItem = true
+ this.gridColumnNum = Math.trunc((clientWidth - 10) / this.gridItemWidth)
}
+ const gridWidth = (clientWidth - 10) / this.gridColumnNum
+ this.gridPaddingRight = gridWidth - this.gridItemWidth + 10
+ this.showUpdateDateItem = clientWidth >= 900;
+ this.showSizeItem = clientWidth >= 500;
let gridRowNum = Math.round(
this.clientHeight / (clientWidth / this.gridColumnNum)
)
@@ -4557,7 +4532,7 @@ export default {
margin-left: 5px !important;
}
-> .open-file-dialog {
+>>> .open-file-dialog {
.el-dialog {
width: 420px;
}
@@ -4571,13 +4546,13 @@ export default {
}
}
-> .v-contextmenu-item {
+>>> .v-contextmenu-item {
.svg-icon {
font-size: 14px;
}
}
-> .new-text-file-dialog {
+>>> .new-text-file-dialog {
height: 350px;
top: calc(50% - 175px);
@@ -4601,11 +4576,11 @@ export default {
}
}
-> .van-grid-item__content {
+>>> .van-grid-item__content {
background-size: cover;
background-position: center;
- padding: 0;
border-radius: 5px !important;
+ padding: 0;
}
.vmode {
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index fca8943..feee703 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -293,6 +293,21 @@
}
>>> .grid-item-text {
+ margin-top: 5px;
+ cursor: default;
+ text-align: center;
+ color: #606266;
+ font-size: smaller;
+ //flex: 1;
+ //align-items: center;
+ justify-content: space-evenly;
+ display: flex;
+ word-break: break-word;
+ display: -webkit-box;
+ overflow: hidden;
+}
+
+>>> .grid-item-text-input {
cursor: default;
text-align: center;
color: #606266;
@@ -330,20 +345,16 @@
}
>>> .grid-item {
border-radius: 5px;
- padding: 0 8px;
border: solid 1px #ccc0;
.grid-item-icon{
- text-align: center;
- position: absolute;
- top: 5px;
- //margin: 9px auto 0;
- //width: 84px;
- //height: 84px;
+ //text-align: center;
+ //position: absolute;
+ //top: 0;
}
.grid-item-icon-image {
width: 100%;
height: 100%;
- top: 0px;
+ top: 0;
border-radius: 5px;
margin: 0;
-webkit-backdrop-filter: contrast(0.5);