perf: 优化文件操作菜单样式

resources/assets/js/pages/manage/file.vue

@@ -79,6 +79,7 @@
                                 :class="{
                                     shear: shearIds.includes(item.id),
                                     highlight: selectIds.includes(item.id),
+                                    operation: contextMenuVisible && item.id === contextMenuItem.id,
                                 }"
                                 :data-id="item.id"
                                 v-longpress="handleLongpress"
@@ -151,7 +152,10 @@
                     transfer>
                     <DropdownMenu slot="list">
                         <template v-if="contextMenuItem.id">
-                            <DropdownItem @click.native="handleContextClick('open')">{{$L('打开')}}</DropdownItem>
+                            <DropdownItem @click.native="handleContextClick('open')" class="item-open">
+                                {{$L('打开')}}
+                                <div class="open-name">“{{contextMenuItem.name}}”</div>
+                            </DropdownItem>
                             <DropdownItem @click.native="handleContextClick('select')">{{$L(selectIds.includes(contextMenuItem.id) ? '取消选择' : '选择')}}</DropdownItem>
 
                             <Dropdown placement="right-start" transfer>

resources/assets/sass/pages/page-file.scss

@@ -446,6 +446,7 @@
                         &.highlight {
                             background-color: #f4f5f7;
                         }
+                        &.operation,
                         &:hover {
                             background-color: #f4f5f7;
                             .file-menu,
@@ -594,6 +595,19 @@
             margin-right: 8px;
         }
     }
+    .ivu-dropdown-menu {
+        .item-open {
+            display: flex;
+            align-items: center;
+            .open-name {
+                padding-left: 4px;
+                max-width: 160px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
 }
 
 .page-file-share-form {
@@ -609,11 +623,13 @@
         }
     }
 }
+
 .page-file-share-title {
     margin-top: -8px;
     margin-bottom: 14px;
     padding: 0 2px;
 }
+
 .page-file-share-list {
     max-height: 500px;
     margin-bottom: 26px;
@@ -678,6 +694,14 @@
                             .file-menu {
                                 display: none;
                             }
+                            &:hover {
+                                background-color: transparent;
+                            }
+                            &.operation {
+                                &:hover {
+                                    background-color: #f4f5f7;
+                                }
+                            }
                         }
                     }
                 }
@@ -690,4 +714,14 @@
             bottom: 86px
         }
     }
+
+    .page-file-dropdown-menu {
+        .ivu-dropdown-menu {
+            .ivu-dropdown-item {
+                &:hover {
+                    background: transparent;
+                }
+            }
+        }
+    }
 }