style: 优化grid视图下的文件件名称

public/index.html

@@ -17,8 +17,8 @@
     <!--axios.js-->
     <script src="<%= htmlWebpackPlugin.options.path %>/resource/axios@0.21.1.js"></script>
     <!--vant.js-->
-    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.css"/>
-    <script src="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.js"></script>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.54.css"/>
+    <script src="<%= htmlWebpackPlugin.options.path %>/resource/vant@2.12.54.js"></script>
     <!--element-ui.js-->
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.path %>/resource/element-ui@2.13.0.css">
     <script src="<%= htmlWebpackPlugin.options.path %>/resource/element-ui@2.13.0.js"></script>

src/components/Icon/IconFile.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span :style="{position: grid ? 'relative': 'unset'}">
     <div v-if="item.isFavorite && !public">
         <div v-if="pc">
           <svg-icon v-if="!grid" class="pc list icon-favorite" icon-class="Favoritestarrate"/>
@@ -32,7 +32,7 @@
     </div>
     <div v-if="item.tags && item.tags.length > 0 && !public">
         <div v-if="pc">
-          <svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
+          <svg-icon v-if="grid" class="pc grid icon-tag" icon-class="tag2" :style="{left: 14 * index + 10 + 'px', color: tag.color}" v-for="(tag,index) in item.tags.slice(0, 3)" :key="tag.tagId"/>
           <!--     列表模式下只能显示一个标签     -->
           <svg-icon v-else class="pc list icon-tag" icon-class="tag2" :style="{color: tag.color}" v-for="tag in item.tags.slice(0, 1)" :key="tag.tagId"/>
         </div>
@@ -59,7 +59,7 @@
         </div>
         <el-image lazy v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
                   :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
-          <div slot="error" class="image-slot">
+          <div slot="error" class="image-slot-error">
             <svg-icon icon-class="video"/>
           </div>
         </el-image>
@@ -77,7 +77,7 @@
         <div v-if="item.music.name !== null">
           <el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
                     :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
-          <div slot="error" class="image-slot">
+          <div slot="error" class="image-slot-error">
             <svg-icon icon-class="audio"/>
           </div>
         </el-image>
@@ -94,7 +94,7 @@
     <div v-else-if="item.contentType && item.contentType.startsWith('image')">
       <el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}"
                 fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)">
-        <div slot="error" class="image-slot">
+        <div slot="error" class="image-slot-error">
           <svg-icon icon-class="image"/>
         </div>
       </el-image>
@@ -191,6 +191,10 @@ export default {
   line-height: 35px;
 }
 
+>>> .image-slot-error {
+  margin-top: 10px;
+}
+
 .icon-favorite {
   position: absolute;
   color: #f5222d;

src/components/ShowFile/ShowFile.vue

@@ -516,10 +516,8 @@
             ref="checkboxGroup"
           >
             <van-grid
-              square
               :center="true"
               :column-num="gridColumnNum"
-              :gutter="10"
               :border="false"
               :style="{
                 width: '100%',
@@ -554,10 +552,14 @@
                     '路径：' +
                     item.path
                 "
+                :style="{paddingTop: 100/gridColumnNum + '%'}"
               >
                 <div
                   class="grid-item van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
                   :style="{
+                    right: gridPaddingRight + 'px',
+                    bottom: '10px',
+                    height: gridItemWidth - 5 + 'px',
                     background: selectRowData.includes(item) ? '#caeaf991' : '',
                     'background-size': 'cover',
                     'background-position': 'center',
@@ -578,14 +580,14 @@
                         :image-url="imageUrl"
                         :audio-cover-url="audioCoverUrl"
                         :grid="true"
-                        :grid-width="gridColumnWidth"
+                        :grid-width="gridItemWidth"
                       ></icon-file>
                     </div>
                     <el-input
                       v-if="item.index === editingIndex"
                       v-focus
                       v-model="renameFileName"
-                      class="grid-item-text"
+                      class="grid-item-text-input"
                       placeholder=""
                       type="textarea"
                       autosize
@@ -599,10 +601,8 @@
                       "
                     >
                     </el-input>
-                    <div v-else>
-                      <div class="grid-item-text">
-                        <span>{{ gridFilename(item) }}</span>
-                      </div>
+                    <div v-if="item.index !== editingIndex" class="grid-item-text">
+                      <span>{{ gridFilename(item) }}</span>
                     </div>
                   </div>
                 </div>
@@ -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 {

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);