style: 优化样式和布局

src/components/Icon/IconFile.vue

@@ -53,10 +53,10 @@
     <svg-icon v-if="item.isFolder" icon-class="folder"/>
     <div v-else-if="item.contentType && item.contentType.indexOf('video') > -1">
       <div v-if="item.mediaCover === undefined || item.mediaCover === 'true'">
-        <div v-if="grid && pc" class="grid-play-icon">
+        <div v-if="grid && pc && !details" class="grid-play-icon">
           <svg-icon icon-class="play1"/>
         </div>
-        <el-image :lazy="lazy" v-if="grid" :style="{'height':details?'110px':(gridWidth-50) + 'px'}" fit="contain"
+        <el-image :lazy="lazy" v-if="grid" :style="{'height': videoImageHeight}" fit="contain"
                   :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
           <div slot="error" class="image-slot-error">
             <svg-icon icon-class="video"/>
@@ -91,7 +91,7 @@
       <svg-icon v-else icon-class="audio"/>
     </div>
     <div v-else-if="(item.contentType && item.contentType.startsWith('image')) || item.showCover">
-      <el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}"
+      <el-image v-if="grid || grid === 'details'" :style="imageHeightStyle"
                 fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)" :class="item.showCover ? 'cover' : ''">
         <div slot="error" class="image-slot-error">
           <svg-icon icon-class="image"/>
@@ -153,6 +153,24 @@ export default {
   mounted() {
   },
   computed: {
+    videoImageHeight() {
+      if (this.details) {
+        return "110px"
+      }
+      if (this.item.video && this.item.video.width > this.item.video.height) {
+        return ""
+      }
+      return this.gridWidth - 35 + "px"
+    },
+    imageHeightStyle() {
+      if (this.details) {
+        return "height: 110px;"
+      }
+      if (this.item.w > this.item.h) {
+        return `max-height: ${this.gridWidth - 35}px`
+      }
+      return `height: ${this.gridWidth - 35}px;`
+    },
     findIconClass() {
       let suffix = this.item.suffix;
       if (!suffix && this.item.fileName) {

src/components/ShowFile/ShowFile.vue

@@ -89,6 +89,7 @@
         <div class="search-content">
           <div class="search-class">
             <el-popover
+              popper-class="upload-file"
               v-if="showUploadButton"
               v-show="!(isRootPath && homeHidden)"
               v-model="isShowNewFolder"
@@ -329,10 +330,7 @@
       >
         <div class="popper-arrow"></div>
         <ul v-for="(item, index) in menus" :key="item.label">
-          <li
+          <li v-if="item.operation === 'unFavorite' || item.operation === 'favorite'"
-            v-if="
-              item.operation === 'unFavorite' || item.operation === 'favorite'
-            "
             class="menu-option"
             @click="menusOperations(item.operation, $event)"
             @mouseover.prevent.stop="
@@ -342,19 +340,23 @@
               menuFavoriteLeave(index, rowContextData.isFavorite)
             "
           >
-            <label class="menuitem">
+            <div class="menuitem home-contextmenu">
               <svg-icon :icon-class="item.iconClass" />
-              <span class="menuitem text">{{ item.label }}</span>
+              <div class="home-contextmenu-title">
-            </label>
+                <span class="menuitem text">{{ item.label }}</span>
+              </div>
+            </div>
           </li>
           <li v-else @click="menusOperations(item.operation, $event)">
-            <label class="menuitem">
+            <div class="menuitem home-contextmenu">
               <svg-icon :icon-class="item.iconClass" />
-              <span class="menuitem text">{{ item.label }}</span>
+              <div class="home-contextmenu-title">
-              <span v-if="item.shortcut" style="position: absolute;right: 10px;">
+                <span class="menuitem text">{{ item.label }}</span>
+                <span v-if="item.shortcut">
                 <kbd v-for="key in item.shortcut" :style="{fontSize: key === '⌘' ? '14px' : '12px'}">{{ key }}</kbd>
               </span>
-            </label>
+              </div>
+            </div>
           </li>
         </ul>
       </e-vue-contextmenu>
@@ -1243,7 +1245,9 @@ export default {
         if (item.isFolder || !this.grid) {
           return filename;
         }
-        const singleLine = (item.contentType && item.contentType.startsWith('image')) || item.showCover
+        const verticalImage = item.w && item.h && (item.w / item.h < 1.6)
+        const verticalVideo = item.video && (item.video.width / item.video.height < 1.6)
+        const singleLine = verticalImage || verticalVideo || item.showCover
         const gridFilenameLength = singleLine ? 13 : 28
         // 分离文件名和后缀
         let parts = filename.split('.');
@@ -2144,8 +2148,8 @@ export default {
                 node.firstChild.style.marginRight = '20px'
               }
               if (index === 2) {
-                node.style.borderRadius = '0 5px 5px 0'
+                node.style.borderRadius = '0 12px 12px 0'
-                node.style.borderRight = '1px solid #409eff'
+                node.style.borderRight = 'solid 1px var(--apple-shadow-color)'
                 node.firstChild.style.height = '44px'
                 node.firstChild.style.lineHeight = '44px'
                 node.firstChild.style.width = '80px'
@@ -3286,35 +3290,35 @@ export default {
         if (columnIndex === 0) {
           return {
             backgroundColor: '#e0f3fc !important',
-            borderRadius: '50px 0 0 50px',
+            borderRadius: '12px 0 0 12px',
-            borderLeft: '1px solid #409eff',
+            borderLeft: 'solid 1px var(--apple-shadow-color)',
-            borderTop: '1px solid #409eff',
+            borderTop: 'solid 1px var(--apple-shadow-color)',
-            borderBottom: '1px solid #409eff',
+            borderBottom: 'solid 1px var(--apple-shadow-color)',
           }
         }
         if (columnIndex === 3) {
           return {
             backgroundColor: '#e0f3fc !important',
-            borderRadius: '0 50px 50px 0',
+            borderRadius: '0 12px 12px 0',
-            borderRight: '1px solid #409eff',
+            borderRight: 'solid 1px var(--apple-shadow-color)',
-            borderTop: '1px solid #409eff',
+            borderTop: 'solid 1px var(--apple-shadow-color)',
-            borderBottom: '1px solid #409eff',
+            borderBottom: 'solid 1px var(--apple-shadow-color)',
           }
         }
         return {
           backgroundColor: '#e0f3fc !important',
-          borderTop: '1px solid #409eff',
+          borderTop: 'solid 1px var(--apple-shadow-color)',
-          borderBottom: '1px solid #409eff',
+          borderBottom: 'solid 1px var(--apple-shadow-color)',
         }
       } else {
         if (columnIndex === 0) {
           return {
-            borderRadius: '50px 0 0 50px',
+            borderRadius: '12px 0 0 12px',
           }
         }
         if (columnIndex === 3) {
           return {
-            borderRadius: '0 50px 50px 0',
+            borderRadius: '0 12px 12px 0',
           }
         }
       }
@@ -4666,7 +4670,7 @@ export default {
 
   .is-sortable:hover {
     background-color: #e0f3fc;
-    border-radius: 40px;
+    border-radius: 12px;
   }
 }
 

src/components/preview/FileDetails.vue

@@ -23,6 +23,7 @@
         <icon-file
           v-else
           class="drawer-icon-font"
+          :lazy="false"
           :grid="true"
           :details="true"
           :item="file"
@@ -80,7 +81,7 @@
             <span> {{ formatSize(file.size) }}</span>
           </el-form-item>
           <el-form-item label="位置:" class="details-position">
-            <span><a :href="pathUrl">{{ filepath }}</a></span>
+            <span><a :href="pathUrl" title="跳转至文件所在位置">{{ filepath }}</a></span>
           </el-form-item>
           <el-form-item label="上传时间:">
             <span>{{ file.uploadDate }}</span>

src/layout/components/Sidebar/index.vue

@@ -445,6 +445,9 @@ $tagMenuBorderRadius: 8px;
   padding: 0;
   min-width: 110px;
 }
+.tag-menu {
+  padding: 5px 5px;
+}
 .tag-menu li:hover {
   cursor: pointer;
   border-radius: $tagMenuBorderRadius;

src/styles/home-index.scss

@@ -45,7 +45,6 @@
   padding-inline-start: 0;
   margin-top: 0;
   margin-bottom: 0;
-  padding: 0 5px;
 }
 .newFileMenu li {
   cursor: pointer;
@@ -63,7 +62,6 @@
 .newFileMenu li > .menuitem {
   cursor: pointer;
   line-height: 38px;
-  margin-left: 10%;
 }
 .newFileMenu li > .menuitem > .text {
   cursor: pointer;
@@ -137,6 +135,26 @@
   border: 0 solid rgba(0, 0, 0, 0);
   min-width: 160px;
   border-radius: $dialogBorderRadius;
+  padding: 10px 10px;
+  box-shadow: 0 5px 12px #ccc;
+
+  .home-contextmenu {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .svg-icon {
+      margin-right: 10px;
+    }
+  }
+
+  .home-contextmenu-title {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
 }
 
 .menu-triangle-bottom {

src/styles/index.scss

@@ -28,10 +28,18 @@ body {
     border-radius: $popperBorderRadius;
   }
 
-  .el-message, .el-notification .el-popover, .el-tooltip__popper, .el-dropdown-menu, .el-select-dropdown, .el-picker-panel, .el-picker-panel__body, .el-picker-panel__sidebar  {
+  .el-message, .el-notification, .el-popover, .el-tooltip__popper, .el-dropdown-menu, .el-select-dropdown, .el-picker-panel, .el-picker-panel__body, .el-picker-panel__sidebar  {
     border-radius: $popperBorderRadius;
   }
 
+  .el-popover.el-popper.upload-file {
+    border-radius: 16px;
+    padding: 10px 10px;
+    li {
+      padding: 0 10px;
+    }
+  }
+
   .v-contextmenu {
     border-radius: 8px;
   }