v3.7.0

.editorconfig

@@ -1,5 +1,5 @@
 [*.{js,jsx,ts,tsx,vue}]
 indent_style = space
-indent_size = 2
+indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true

.prettierignore

@@ -0,0 +1,9 @@
+/dist/*
+.local
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
+stats.html

.prettierrc.cjs

@@ -0,0 +1,56 @@
+/**
+ * File: \.prettierrc.cjs
+ * Project: rc-frontend
+ * Created Date: 2024-04-12 00:50:29
+ * Author: Guoyi
+ * -----
+ * Last Modified: 2024-04-12 00:51:16
+ * Modified By: Guoyi
+ * -----
+ * Copyright (c) 2024 Guoyi Inc.
+ * 
+ * ------------------------------------
+ */
+
+
+// @see: https://www.prettier.cn
+
+module.exports = {
+  // 指定最大换行长度
+  printWidth: 130,
+  // 缩进制表符宽度 | 空格数
+  tabWidth: 4,
+  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
+  useTabs: false,
+  // 结尾不用分号 (true：有，false：没有)
+  semi: true,
+  // 使用单引号 (true：单引号，false：双引号)
+  singleQuote: false,
+  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
+  quoteProps: "as-needed",
+  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
+  jsxSingleQuote: false,
+  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
+  trailingComma: "none",
+  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
+  bracketSpacing: true,
+  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
+  bracketSameLine: false,
+  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
+  arrowParens: "avoid",
+  // 指定要使用的解析器，不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
+  insertPragma: false,
+  // 用于控制文本是否应该被换行以及如何进行换行
+  proseWrap: "preserve",
+  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+  htmlWhitespaceSensitivity: "css",
+  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
+  endOfLine: "auto",
+  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
+  rangeStart: 0,
+  rangeEnd: Infinity
+};

package.json

@@ -1,6 +1,6 @@
 {
     "name": "Gcrypt",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "private": false,
     "author": "g122622",
     "repository": "https://github.com/g122622/gcrypt",

src/api/File.ts

@@ -148,7 +148,7 @@ class File {
 
     public async destroy() {
         // 先销毁文件watcher，再删除临时文件，
-        // 若顺序颠倒则会在删除的时候触动fileWatcher
+        // 若顺序颠倒则会在删除的时候触动fileWatcher，造成死循环
         if (this.fileWatcher) {
             this.fileWatcher.destroy()
         }

src/api/FileWatcher.ts

@@ -16,7 +16,7 @@ class FileWatcher {
     shouldChange = false
     onRename
     onChange
-    onDestroyed
+    onDestroyed // 销毁回调，必须是同步函数
     private abortController: AbortController // watcher的中断控制器
     private interval
 

src/assets/whatsNew.ts

@@ -4,7 +4,7 @@
  * Created Date: 2023-11-26 17:14:30
  * Author: Guoyi
  * -----
- * Last Modified: 2024-02-23 16:14:16
+ * Last Modified: 2024-07-18 18:06:51
  * Modified By: Guoyi
  * -----
  * Copyright (c) 2024 Guoyi Inc.
@@ -29,15 +29,14 @@ export default {
     "2.6.0": ['优化标签页文字显示', '支持快捷键锁定app', "界面优化", "去除SQLite二进制库的引用，缩减包体积", "app终于有自己的图标了"],
     "3.0.0": ['当前任务数可以在顶栏看到了', "更新关于页面", "将electron升级到27，vue和vuetify相应升级",
         "重写窗口锁定控制逻辑，修复一系列bug，提高安全性", "更换了一些图标", "侧边栏增加文件管理器", "修复文件管理器底部tip无法hover的bug"],
-    "3.1.0": ['列表虚拟化，显著提升列表渲染速度', "优化启动速度", "将js文件编译为字节码",
-    ],
+    "3.1.0": ['列表虚拟化，显著提升列表渲染速度', "优化启动速度", "将js文件编译为字节码"],
     "3.2.0": ['界面优化', "优化启动速度", "支持文件复制与剪切"],
     "3.3.0": ['修改文件读取逻辑，支持读取mtp设备的文件', "支持文件批量复制与剪切",
         '构建过程使用缓存，加快构建速度', "核心优化：去除冗余代码，修复移动文件bug", "修复移动和复制文件后缩略图没有的问题",
         '支持保存每个文件夹的布局选项'],
     "3.4.0": ['新的均衡型存储引擎：KVPEngineHybrid', "优化adapter初始化逻辑"],
     "3.5.0": ['修复null值导致程序崩溃的bug', "优化任务执行逻辑", "增加filemgr的相关设置项",
         '新增JSON查看器，查看属性更方便', '关闭应用时自动解除文件占用', 'store列表圆角优化'],
-    "3.6.0": ['新增json编辑器', '重写打开方式选择界面', '支持点击地址栏来导航', '支持直接编辑settings.json']
-
+    "3.6.0": ['新增json编辑器', '重写打开方式选择界面', '支持点击地址栏来导航', '支持直接编辑settings.json'],
+    "3.7.0": ['文件管理器支持搜索文件（仅搜索当前目录/深搜）', '视频会显示角标', "file-item在看图模式下，默认显示的信息由文件日期改为文件大小"]
 }

src/components/FileMgr/FileItem.vue

@@ -20,8 +20,12 @@
                 <template v-if="singleFileItem.type === `file`">
                     <img v-if="currentThumbnail" :src="toDataURL(currentThumbnail)" class="file-thumbnail-img"
                         loading="lazy" />
-                    <img v-else :src="`./assets/fileTypes/${getFileType(singleFileItem.name)}.png`" class="file-types-image"
-                        loading="lazy" />
+                    <img v-else :src="`./assets/fileTypes/${getFileType(singleFileItem.name)}.png`"
+                        class="file-types-image" loading="lazy" />
+                </template>
+                <template v-if="singleFileItem.type === `file` && !!currentThumbnail">
+                    <img :src="`./assets/fileTypes/${getFileType(singleFileItem.name)}.png`"
+                        class="file-types-image-corner" loading="lazy" />
                 </template>
                 <div class="file-name">
                     {{ singleFileItem.name }}
@@ -42,8 +46,11 @@
                 <template v-else-if="viewOptions.itemDisplayMode === 1 && props.singleFileItem.type === 'file'">
                     {{ prettyBytes(props.singleFileItem.meta.size, 2) }}
                 </template>
-                <template v-else-if="viewOptions.itemDisplayMode === 2">
-                    {{ new Date(singleFileItem.meta.createdTime).toLocaleString() }}
+                <template v-else-if="viewOptions.itemDisplayMode === 1 && props.singleFileItem.type === 'folder'">
+                    {{ new Date(singleFileItem.meta.modifiedTime).toLocaleDateString() }}
+                </template>
+                <template v-else-if="viewOptions.itemDisplayMode === 2 && props.singleFileItem.type === 'file'">
+                    {{ prettyBytes(props.singleFileItem.meta.size, 2) }}
                 </template>
             </div>
         </template>
@@ -228,11 +235,15 @@ onUnmounted(() => {
         margin-left: 5px;
         margin-right: 5px;
     }
+
+    .file-types-image-corner {
+        display: none;
+    }
 }
 
 .file-item-item {
     float: left;
-    height: 130px;
+    height: 120px;
     width: 115px;
     flex-direction: column;
     padding: 10px;
@@ -243,6 +254,13 @@ onUnmounted(() => {
         height: 60px;
     }
 
+    .file-types-image-corner {
+        height: 25px;
+        position: absolute;
+        bottom: 45px;
+        right: 7px;
+    }
+
     .file-thumbnail-img {
         height: 60px;
     }
@@ -266,6 +284,13 @@ onUnmounted(() => {
         height: 100px;
     }
 
+    .file-types-image-corner {
+        height: 30px;
+        position: absolute;
+        bottom: 25px;
+        right: 10px;
+    }
+
     .file-thumbnail-img {
         height: 190px;
     }

src/components/FileMgr/FileMgr.vue

@@ -17,8 +17,8 @@
                         <IconBtn icon="mdi-content-copy" tooltip="复制到剪贴板" size="small"
                             @click="copyToClipboard(itemCache[key])" />
                     </template>
-                </v-list-item>
-            </v-list -->
+</v-list-item>
+</v-list -->
         </template>
     </DialogGenerator>
 
@@ -45,7 +45,8 @@
                                     <v-btn-toggle shaped mandatory divided v-model="viewOptions[item.modelName]">
                                         <v-btn v-for="listItem in item.list" :key="listItem.title">
                                             <v-icon>{{ listItem.icon }}</v-icon>
-                                            <v-tooltip activator="parent" location="bottom">{{ listItem.title }}</v-tooltip>
+                                            <v-tooltip activator="parent" location="bottom">{{ listItem.title
+                                                }}</v-tooltip>
                                         </v-btn>
 
                                     </v-btn-toggle>
@@ -82,7 +83,8 @@
                     :disabled="!selectedItems.size"></IconBtn>
                 <!-- 地址栏 -->
                 <div style="margin-left: 15px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
-                    <v-icon @click="gotoDir(currentDir.goToRoot(), true)" style="cursor: pointer;">mdi-map-marker</v-icon>
+                    <v-icon @click="gotoDir(currentDir.goToRoot(), true)"
+                        style="cursor: pointer;">mdi-map-marker</v-icon>
                     <v-tooltip activator="parent" location="bottom">{{ `当前目录: ` + currentDir.toPathStr() }}</v-tooltip>
                     <v-breadcrumbs density="compact" style="display: inline;">
                         <template v-for="(item, i) in currentDir.tokens" :key="item">
@@ -97,6 +99,8 @@
                     </v-breadcrumbs>
                 </div>
                 <v-spacer></v-spacer>
+                <!-- 搜索 -->
+                <SearchMgr v-model:searchWord="searchWord"></SearchMgr>
                 <!-- 刷新按钮 -->
                 <IconBtn icon="mdi-refresh" tooltip="刷新内容" @click="refresh()"></IconBtn>
             </v-app-bar>
@@ -113,7 +117,8 @@
                             @selected="handleItemSelection(item)" @unselected="handleItemUnselection(item)"
                             :isSelected="selectedItems.has(item)" v-for="(item, index) in currentFileTableForRender"
                             :key="item.key">
-                            <ContextMenu :width="200" :menuList="getItemMenuList(item)" v-if="options.useCtxMenu">
+                            <ContextMenu :width="200" :menuList="getItemMenuList(item) as contextMenuItem[]"
+                                v-if="options.useCtxMenu">
                             </ContextMenu>
                         </FileItem>
                         <!-- </TransitionGroup> -->
@@ -124,7 +129,8 @@
                         当前目录下没有文件
                     </div>
                     <div v-else style="display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
-                        <v-progress-circular indeterminate color="primary" bg-color="rgba(0,0,0,0)"></v-progress-circular>
+                        <v-progress-circular indeterminate color="primary"
+                            bg-color="rgba(0,0,0,0)"></v-progress-circular>
                     </div>
                     <BottomTip></BottomTip>
                     <ContextMenu :width="200" v-if="options.useCtxMenu" :menuList="[
@@ -175,15 +181,18 @@ import { FileMgrOptions } from "./types/FileMgrOptions"
 import getWindowsShortcutProperties from 'get-windows-shortcut-properties'
 import path from 'path'
 import fs from 'fs-extra'
+import { ViewOptions } from "./types/ViewOptions";
+import { log, warn } from "@/utils/gyConsole";
+import sleep from "@/utils/sleep";
+import contextMenuItem from "@/types/contextMenuItem";
 
+// 组件
 import ContextMenu from "../shared/ContextMenu.vue";
 import FileItem from "./FileItem.vue";
 import DialogMgr from "./DialogMgr.vue";
 import BottomBar from "./BottomBar.vue";
 import ClipBoard from "./ClipBoard.vue";
-import { ViewOptions } from "./types/ViewOptions";
-import { log, warn } from "@/utils/gyConsole";
-import sleep from "@/utils/sleep";
+import SearchMgr from "./SearchMgr.vue";
 
 interface Props {
     adapter: AdapterBase,
@@ -695,6 +704,11 @@ const currentFileTableForRender = computed<FileTable['items']>(() => {
     if (!viewOptions.value.showHiddenItem) {
         res = res.filter(item => item.name[0] !== ".")
     }
+
+    // 搜索过滤
+    if (searchWord.value) {
+        res = res.filter(item => item.name.toLowerCase().includes(searchWord.value.toLowerCase()))
+    }
     return res
 })
 
@@ -758,6 +772,10 @@ const handleFileExport = async () => {
         })
     } catch (e) { }
 }
+
+// <搜索>
+const searchWord = ref('')
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/components/FileMgr/SearchMgr.vue

@@ -1,15 +1,33 @@
 <template>
-    <div id="container">
-    </div>
+    <v-menu :close-on-content-click="false">
+        <template v-slot:activator="{ props }">
+            <v-btn icon v-bind="props" variant="flat">
+                <v-icon>mdi-magnify</v-icon>
+                <v-tooltip activator="parent" location="bottom">搜索</v-tooltip>
+            </v-btn>
+        </template>
+        <v-card width="300px">
+            <AdvancedTextField label="搜索..." prepend-inner-icon="mdi-magnify" v-model:currentInput="searchWord"
+                density="compact">
+            </AdvancedTextField>
+        </v-card>
+    </v-menu>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { computed, defineEmits } from "vue"
+import AdvancedTextField from "@/components/shared/AdvancedTextField.vue"
 
 interface Props {
-
+    searchWord: string,
 }
 const props = defineProps<Props>()
+const emit = defineEmits(['update:searchWord'])
+const searchWord = computed({
+    get: () => props.searchWord,
+    set: (value: string) => emit('update:searchWord', value)
+})
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->