Merge pull request #288 from jamebal/dev

fix: 修复分享文件grid视图下的显示问题

src/components/Breadcrumb/BreadcrumbFilePath.vue

@@ -96,7 +96,6 @@
 <style lang="scss" scoped>
   .share-dir {
     color: #52c41a;
-    margin-right: -0.5rem;
     font-size: 1.2rem !important;
   }
   .redirect {

src/components/Icon/IconFile.vue

@@ -57,7 +57,7 @@
         <div v-if="grid && pc" class="grid-play-icon">
           <svg-icon icon-class="play1"/>
         </div>
-        <el-image lazy v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
+        <el-image :lazy="lazy" v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
                   :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
           <div slot="error" class="image-slot-error">
             <svg-icon icon-class="video"/>
@@ -131,6 +131,10 @@ export default {
       type: Boolean,
       default: false
     },
+    lazy: {
+      type: Boolean,
+      default: true
+    },
     public: {
       type: Boolean,
       default: false
@@ -148,6 +152,7 @@ export default {
     }
   },
   mounted() {
+    console.log(this.item, this.gridWidth)
   },
   computed: {
     findIconClass() {
@@ -310,7 +315,7 @@ export default {
   line-height: 12px;
 }
 >>> .el-image.cover {
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.5);
 }
 
 </style>

src/components/ShowFile/ShowFile.vue

@@ -463,6 +463,7 @@
               :style="{
                 width: '100%',
                 'max-height': clientHeight - 25 + 'px',
+                rowGap: '8px',
                 overflow: 'auto',
                 'box-shadow':
                   fileListScrollTop > 0
@@ -501,7 +502,7 @@
                   :style="{
                     right: gridPaddingRight + 'px',
                     bottom: '10px',
-                    height: gridItemWidth - 5 + 'px',
+                    height: gridItemWidth + 'px',
                     background: selectRowData.includes(item) ? '#caeaf991' : '',
                     'background-size': 'cover',
                     'background-position': 'center',
@@ -1161,7 +1162,7 @@ export default {
           return filename;
         }
         const singleLine = (item.contentType && item.contentType.startsWith('image')) || item.showCover
-        const gridFilenameLength = singleLine ? 14 : 32
+        const gridFilenameLength = singleLine ? 13 : 28
         // 分离文件名和后缀
         let parts = filename.split('.');
         let suffix = parts.length > 1 ? parts.pop() : '';
@@ -1187,7 +1188,7 @@ export default {
         }
         // 根据是否有后缀返回相应的格式
         if (suffix) {
-          return prev + '…' + '.' + suffix;
+          return prev + '…' + suffix;
         }
         return prev + '…';
       };

src/styles/home-index.scss

@@ -298,7 +298,7 @@
   cursor: default;
   text-align: center;
   color: #606266;
-  font-size: smaller;
+  font-size: small;
   //flex: 1;
   //align-items: center;
   justify-content: space-evenly;
@@ -312,7 +312,7 @@
   cursor: default;
   text-align: center;
   color: #606266;
-  font-size: smaller;
+  font-size: small;
   word-wrap: break-word;
   width: -webkit-fill-available;
   overflow: hidden;

src/styles/index.scss

@@ -10,7 +10,8 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   //font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
+  //font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
+  font-family: BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Oxygen, sans-serif;
   .el-tooltip__popper .popper__arrow {
     border-width: 0;
   }

src/views/home/mobile/index.vue

@@ -1723,7 +1723,6 @@ input {
 >>> .grid-item-text {
   text-align: center;
   color: #606266;
-  font-size: smaller;
   word-wrap: break-word;
   width: -webkit-fill-available;
   overflow: hidden;

src/views/public/share/shareList.vue

@@ -214,10 +214,18 @@
               <van-checkbox v-show="gridHoverItemIndex === index || indexList.includes(index)"
                             class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
               <div class="grid-item-icon">
-                <icon-file v-if="sharer" :item="item" :image-url="imageUrl" :audio-cover-url="audioUrl" :grid="true" :grid-width="gridColumnWidth"
-                           :public="true"></icon-file>
+                <icon-file
+                  v-if="sharer"
+                  :item="item"
+                  :image-url="imageUrl"
+                  :audio-cover-url="audioUrl"
+                  :lazy="false"
+                  grid
+                  :grid-width="gridColumnWidth - 20"
+                ></icon-file>
               </div>
-              <span class="grid-item-text">{{ item.name }}</span>
+
+              <span class="grid-file-text" :style="{ width: gridColumnWidth + 'px' }">{{ item.name }}</span>
             </div>
           </van-grid-item>
         </van-grid>
@@ -1287,5 +1295,20 @@ export default {
   margin-left: 5px !important;
 }
 
+>>> .van-grid-item__content .svg-icon{
+  font-size: 4.5rem;
+}
+
+>>> .grid-file-text {
+  margin-top: 5px;
+  cursor: default;
+  text-align: center;
+  color: #606266;
+  font-size: small;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 </style>