feat: 文件详细和重命名添加快捷键

src/components/ShowFile/ShowFile.vue

@@ -294,6 +294,9 @@
             <label class="menuitem">
               <svg-icon :icon-class="item.iconClass" />
               <span class="menuitem text">{{ item.label }}</span>
+              <span v-if="item.shortcut" style="position: absolute;right: 10px;">
+                <kbd>{{ item.shortcut }}</kbd>
+              </span>
             </label>
           </li>
         </ul>
@@ -905,10 +908,11 @@ export default {
           { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
           {
             iconClass: 'menu-details',
-            label: '详细信息',
+            label: '详情',
+            shortcut: "space",
             operation: 'details',
           },
-          { iconClass: 'menu-rename', label: '重命名', operation: 'rename' },
+          { iconClass: 'menu-rename', label: '重命名', operation: 'rename', shortcut: 'F2' },
           { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
           { iconClass: 'menu-download', label: '下载', operation: 'download' },
           { iconClass: 'menu-remove', label: '删除', operation: 'remove' },
@@ -1057,6 +1061,7 @@ export default {
       audioPreviewRow: {},
       audioPreviewVisible: false,
       drawer: false,
+      drawerShowTime: 0, // drawer显示的时间
       rowStyleExecuting: false,
       selectRowData: [],
       selectOrgin: -1, // 选择起点(主要用于按住shift键多选)
@@ -1078,11 +1083,11 @@ export default {
       draging: 0, // 是否正在拖拽中，0：没有拖拽，1：拖拽中,
       getFileListed: false,
       onCreateFilename: '',
-      deleteConfirmVisible: false,
+      deleteConfirmVisible: false, // 删除确认弹窗
-      permanentDelete: false,
+      permanentDelete: false, // 是否永久删除
-      permanentDeleteDisable: false,
+      permanentDeleteDisable: false, // 是否禁用永久删除选项
-      selectDeleteFile: [],
+      selectDeleteFile: [], // 选中的删除文件
-      deleteLoading: false,
+      deleteLoading: false, // 删除loading
     }
   },
   computed: {
@@ -1331,12 +1336,35 @@ export default {
     },
     keydown(event) {
       const isMac = navigator.platform.startsWith('Mac')
-      const { key, c, keyCode, ctrlKey, metaKey } = event
+      const { keyCode, ctrlKey, metaKey } = event
       this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey)
+      console.log(keyCode)
       // shift
       if (event.keyCode === 16 && event.shiftKey) {
         this.selectPin = true
       }
+      // space
+      if (keyCode === 32) {
+        if (this.inputting || this.editingIndex !== -1) {
+          event.target.select()
+        } else {
+          if (this.selectRowData.length > 0 && !this.drawer) {
+            this.drawer = true
+            this.drawerShowTime = Date.now()
+          }
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }
+      // F2
+      if (keyCode === 113) {
+        if (this.selectRowData.length > 0 && !this.drawer) {
+          this.renameFileName = this.rowContextData.name
+          this.editingIndex = this.rowContextData.index
+        }
+        event.preventDefault()
+        event.stopPropagation()
+      }
       // ctrl + A / cmd + A
       if (this.isCmd && keyCode === 65) {
         if (this.inputting || this.editingIndex !== -1) {
@@ -1360,6 +1388,12 @@ export default {
       if (keyCode === 16) {
         this.selectPin = false
       }
+      // space
+      if (keyCode === 32) {
+        if (this.drawer && Date.now() - this.drawerShowTime >= 500) {
+          this.drawer = false
+        }
+      }
     },
     onmessage(msg) {
       let fileDoc = msg.body

src/components/preview/FileDetails.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
     <!--文件详细信息-->
-    <el-drawer :title="rowContextData.name" :visible.sync="visible">
+<!--    <el-drawer :title="rowContextData.name" :visible.sync="visible">-->
+<!--      -->
+<!--    </el-drawer>-->
+    <el-dialog :visible.sync="visible" width="420px">
       <div class="drawer-icon">
         <icon-file
           class="drawer-icon-font"
@@ -18,52 +21,56 @@
           <span v-show="syncPercent < 100">正在同步文件基本信息: {{ syncPercent }}%</span>
           <span v-show="indexingPercent > 0 && indexingPercent < 100">正在为文件内容创建索引: </span><span v-show="indexingPercent > 0 && indexingPercent < 100">{{ indexingPercent }}%</span>
         </el-form-item>
-        <el-form-item label="名称:">
+
-          <span>{{ rowContextData.name }}</span>
+        <el-scrollbar wrap-class="scrollbar-wrapper" class="details-form-list">
-        </el-form-item>
+          <el-form-item label="名称:">
-        <el-form-item label="类型:" class="details-name">
+            <span>{{ rowContextData.name }}</span>
+          </el-form-item>
+          <el-form-item label="类型:">
           <span>{{
               rowContextData.isFolder ? '文件夹' : rowContextData.contentType
             }}</span>
-        </el-form-item>
-        <div v-if="rowContextData.music">
-          <el-form-item label="🎵 歌手:">
-            <span>{{ rowContextData.music.singer }}</span>
           </el-form-item>
-          <el-form-item label="🎵 专辑:">
+          <div v-if="rowContextData.music">
-            <span>{{ '《' + rowContextData.music.album + '》' }}</span>
+            <el-form-item label="🎵 歌手:">
+              <span>{{ rowContextData.music.singer }}</span>
+            </el-form-item>
+            <el-form-item label="🎵 专辑:">
+              <span>{{ '《' + rowContextData.music.album + '》' }}</span>
+            </el-form-item>
+            <el-form-item label="🎵 歌名:">
+              <span>{{ '《' + rowContextData.music.songName + '》' }}</span>
+            </el-form-item>
+          </div>
+          <el-form-item
+            v-show="rowContextData.w && rowContextData.h"
+            label="尺寸:"
+            class="details-resolution"
+          >
+            <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
           </el-form-item>
-          <el-form-item label="🎵 歌名:">
+          <el-form-item label="大小:">
-            <span>{{ '《' + rowContextData.music.songName + '》' }}</span>
+            <span> {{ formatSize(rowContextData.size) }}</span>
           </el-form-item>
-        </div>
+          <el-form-item label="位置:" class="details-position">
-        <el-form-item
+            <a :href="'/?path=' + rowContextData.path + '&highlight=' + rowContextData.name">{{ rowContextData.path }}</a>
-          v-show="rowContextData.w && rowContextData.h"
+          </el-form-item>
-          label="尺寸:"
+          <el-form-item label="创建时间:">
-          class="details-resolution"
+            <span>{{ rowContextData.uploadDate }}</span>
-        >
+          </el-form-item>
-          <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
+          <el-form-item label="修改时间:">
-        </el-form-item>
+            <span>{{ rowContextData.updateDate }}</span>
-        <el-form-item label="大小:">
+          </el-form-item>
-          <span> {{ formatSize(rowContextData.size) }}</span>
+          <el-form-item v-if="rowContextData.exif" label="">
-        </el-form-item>
+            <span style="white-space: break-spaces;">{{ formatExif(rowContextData.exif) }}</span>
-        <el-form-item label="位置:" class="details-position">
+          </el-form-item>
-          <a :href="'/?path=' + rowContextData.path + '&highlight=' + rowContextData.name">{{ rowContextData.path }}</a>
+          <el-form-item v-if="rowContextData.video" label="">
-        </el-form-item>
+            <span style="white-space: break-spaces;">{{ formatVideo(rowContextData.video) }}</span>
-        <el-form-item label="创建时间:">
+          </el-form-item>
-          <span>{{ rowContextData.uploadDate }}</span>
+        </el-scrollbar>
-        </el-form-item>
+
-        <el-form-item label="修改时间:">
-          <span>{{ rowContextData.updateDate }}</span>
-        </el-form-item>
-        <el-form-item v-if="rowContextData.exif" label="">
-          <span style="white-space: break-spaces;">{{ formatExif(rowContextData.exif) }}</span>
-        </el-form-item>
-        <el-form-item v-if="rowContextData.video" label="">
-          <span style="white-space: break-spaces;">{{ formatVideo(rowContextData.video) }}</span>
-        </el-form-item>
       </el-form>
-    </el-drawer>
+    </el-dialog>
   </div>
 </template>
 
@@ -187,7 +194,11 @@ export default {
 }
 
 .details-form {
-  margin: 20px 10px 0 20px;
+  padding: 20px 0;
+
+  >>> .el-scrollbar__view {
+    max-height: 50vh;
+  }
 
   >>> .el-form-item__content {
     white-space: normal;
@@ -205,6 +216,7 @@ export default {
   }
 
   >>> .details-scan {
+    margin-bottom: 10px;
     .el-button--mini, .el-button--mini.is-round {
       padding: 5px 15px;
     }

src/styles/index.scss

@@ -228,8 +228,7 @@ input {
 }
 kbd {
   display: inline-block;
-  margin: 6px 2px;
+  padding: 5px 5px;
-  padding: 8px 8px;
   font: 14px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
   line-height: 10px;
   color: #1f2328;