perf: 优化搜索选项

src/components/SearchDialog/index.vue

@@ -2,68 +2,16 @@
   <el-dialog
     :visible.sync="dialogVisible"
     :show-close="false"
-    width="70%"
     custom-class="no-header-dialog"
-    class="file-search-dialog"
+    class="file-search-dialog">
-    @open="handleDialogOpen"
-    @close="handleDialogClose">
 
     <!-- 关闭按钮 -->
     <div class="dialog-close-btn">
       <el-button type="text" icon="el-icon-close" @click="dialogVisible = false"></el-button>
     </div>
 
-    <!-- 头部第一行 -->
-    <div class="search-header">
-      <div class="path-selector">
-        <span>搜索路径：{{ currentPath }}</span>
-        <el-button type="text" icon="el-icon-folder-opened" @click="selectPath"></el-button>
-      </div>
-      <div class="sort-options">
-        <el-dropdown @command="handleSort" trigger="click">
-          <el-button type="text">
-            <i class="el-icon-sort"></i>：{{ sortText }}
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="relevance_asc">
-              <i class="el-icon-sort-up"></i> 按相关度升序
-            </el-dropdown-item>
-            <el-dropdown-item command="relevance_desc">
-              <i class="el-icon-sort-down"></i> 按相关度降序
-            </el-dropdown-item>
-            <el-dropdown-item divided command="time_asc">
-              <i class="el-icon-sort-up"></i> 修改时间升序
-            </el-dropdown-item>
-            <el-dropdown-item command="time_desc">
-              <i class="el-icon-sort-down"></i> 修改时间降序
-            </el-dropdown-item>
-            <el-dropdown-item divided command="size_asc">
-              <i class="el-icon-sort-up"></i> 文件大小升序
-            </el-dropdown-item>
-            <el-dropdown-item command="size_desc">
-              <i class="el-icon-sort-down"></i> 文件大小降序
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-    </div>
-
-    <!-- 搜索框 -->
     <div class="search-bar">
       <div class="search-input-wrapper">
-        <el-input
-          ref="searchKeyword"
-          v-model="searchKeyword"
-          placeholder="请输入搜索关键词"
-          prefix-icon="el-icon-search"
-          class="modern-input"
-          :clearable="true"
-          @keydown.native="handleKeyDown"
-          @keyup.enter.native="handleSearch"
-          @focus="handleSearch"
-          @input="handleSearch"
-          @clear="handleSearch">
-        </el-input>
         <div class="search-filters">
           <el-dropdown @command="handleFileType" trigger="click" class="filter-dropdown">
             <el-button type="text" class="filter-btn">
@@ -72,6 +20,9 @@
               <i class="el-icon-arrow-down el-icon--right"></i>
             </el-button>
             <el-dropdown-menu slot="dropdown" class="modern-dropdown">
+              <el-dropdown-item command="all">
+                <i class="el-icon-document"></i> 全部文件
+              </el-dropdown-item>
               <el-dropdown-item command="document">
                 <i class="el-icon-document"></i> 文档
               </el-dropdown-item>
@@ -174,102 +125,32 @@
       </el-tag>
     </div>
 
-    <!-- 搜索结果列表 -->
-    <div class="search-results">
-      <el-table
-        :data="searchResults"
-        style="width: 100%"
-        @row-click="handleRowClick">
-        <el-table-column
-          prop="name"
-          label="文件名"
-          width="300">
-          <template slot-scope="scope">
-            <i :class="getFileIcon(scope.row.type)"></i>
-            {{ scope.row.name }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="path"
-          label="路径"
-          show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column
-          prop="updateTime"
-          label="修改时间"
-          width="180">
-        </el-table-column>
-        <el-table-column
-          prop="size"
-          label="大小"
-          width="120">
-          <template slot-scope="scope">
-            {{ formatFileSize(scope.row.size) }}
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <!-- 查看所有结果按钮 -->
-    <div class="view-all">
-      <el-button type="text" @click="handleViewAll">
-        查看"{{ searchKeyword }}"的所有搜索结果 (Shift + Enter)
-      </el-button>
-    </div>
-
-    <!-- 快捷键说明 -->
-    <div slot="footer" class="dialog-footer">
-      <div class="shortcuts-info">
-        <p>快捷键说明：</p>
-        <ul>
-          <li>上一页：← 或 PageUp</li>
-          <li>下一页：→ 或 PageDown</li>
-          <li>Cmd + 点击：跳转至文件位置</li>
-          <li>Shift + Enter：查看所有搜索结果</li>
-        </ul>
-      </div>
-    </div>
   </el-dialog>
 </template>
 
 <script>
-import api from '@/api/file-api'
-import Icon from '@/components/Icon/Icon.vue'
-import _ from 'lodash'
-
 export default {
   name: 'SearchDialog',
-  components: { Icon },
   props: {
     visible: {
       type: Boolean,
       default: false
     },
-    defaultPath: {
-      type: String,
-      default: '/'
-    }
   },
   data() {
     return {
       dialogVisible: false,
-      currentPath: '',
-      searchKeyword: '',
-      sortType: 'relevance_desc',
-      sortOrder: 'desc',
       fileType: 'all',
       timeRange: null,
       sizeRange: [0, 1073741824], // 默认范围：0 到 1GB
-      searchResults: [],
-      sortText: '按相关度降序',
       fileTypeText: '全部文件',
-      debounceSearch: null,// 搜索防抖
+      filterOption: {
-      pagination: {
+        type: null,
-        pageIndex: 1,
+        modifyStart: null,
-        pageSize: 50,
+        modifyEnd: null,
-        total: 0,
+        sizeMin: null,
-        pageSizes: [10, 20, 30, 40, 50],
+        sizeMax: null
-      },
+      }
     }
   },
   computed: {
@@ -306,60 +187,31 @@ export default {
   watch: {
     visible(val) {
       this.dialogVisible = val
-      if (val) {
-        this.$nextTick(() => {
-          this.$refs.searchKeyword.focus()
-        })
-      }
     },
     dialogVisible(val) {
       this.$emit('update:visible', val)
     }
   },
-  created() {
-    this.debounceSearch = _.debounce((key) => {
-      this.searchFile(key)
-    }, 200)
-  },
   methods: {
-    handleDialogOpen() {
+    // 更新筛选条件并通知父组件
-      this.currentPath = this.defaultPath
+    updateFilterOption() {
-      window.addEventListener('keydown', this.handleKeydown)
+      this.filterOption = {
-    },
+        type: this.fileType === 'all' ? null : this.fileType,
-    handleDialogClose() {
+        modifyStart: this.timeRange ? this.timeRange[0] : null,
-      window.removeEventListener('keydown', this.handleKeydown)
+        modifyEnd: this.timeRange ? this.timeRange[1] : null,
-    },
+        sizeMin: this.sizeRange[0],
-    handleKeydown(e) {
+        sizeMax: this.sizeRange[1]
-      if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
-        this.previousPage()
-      } else if (e.key === 'ArrowRight' || e.key === 'PageDown') {
-        this.nextPage()
       }
-    },
-    selectPath() {
-      // 实现选择路径的逻辑
-    },
-    handleSort(command) {
-      this.sortType = command
-      const [type, order] = command.split('_')
-      this.sortOrder = order
 
-      switch (type) {
+      this.$emit('filter-change', this.filterOption)
-        case 'relevance':
-          this.sortText = `相关度${order === 'asc' ? '升序' : '降序'}`
-          break
-        case 'time':
-          this.sortText = `修改时间${order === 'asc' ? '升序' : '降序'}`
-          break
-        case 'size':
-          this.sortText = `文件大小${order === 'asc' ? '升序' : '降序'}`
-          break
-      }
-      this.handleSearch()
     },
+
     handleFileType(command) {
       this.fileType = command
       switch (command) {
+        case 'all':
+          this.fileTypeText = '全部文件'
+          break
         case 'document':
           this.fileTypeText = '文档'
           break
@@ -373,48 +225,45 @@ export default {
           this.fileTypeText = '音频'
           break
       }
-      this.handleSearch()
+      this.updateFilterOption()
     },
-    handleTimeChange() {
-      this.handleSearch()
-    },
-    handleSearch() {
-      // 实现搜索逻辑
-      console.log('搜索条件发生变化，重新搜索')
-      this.debounceSearch(this.searchKeyword)
-    },
-    searchFile(key) {
 
+    handleTimeChange() {
+      this.updateFilterOption()
     },
-    handleKeyDown(event) {
+
-      const { ctrlKey, metaKey, keyCode } = event
+    handleSizeRangeChange() {
-      console.log(ctrlKey, metaKey, keyCode)
+      this.updateFilterOption()
-      if (event.metaKey && event.key === 'Enter') {
-        console.log('Cmd + Enter 被触发');
-      }
     },
-    handleViewAll() {
+
-      console.log('查看所有搜索结果')
+    setSizePreset(range) {
-      // 实现查看所有结果的逻辑
+      this.sizeRange = range
+      this.updateFilterOption()
     },
-    handleRowClick(row, column, event) {
+
-      if (event.metaKey) { // Cmd 键点击
+    setSizePresetLarge() {
-        this.navigateToFile(row)
+      this.sizeRange = [1073741824, 10737418240]
-      }
+      this.updateFilterOption()
-    },
-    navigateToFile(file) {
-      // 实现跳转到文件位置的逻辑
     },
+
     resetFileType() {
       this.handleFileType('all')
     },
+
     resetTimeRange() {
       this.timeRange = null
-      this.handleSearch()
+      this.updateFilterOption()
     },
+
+    resetSizeRange() {
+      this.sizeRange = [0, 1073741824]
+      this.updateFilterOption()
+    },
+
     formatDate(date) {
       return new Date(date).toLocaleDateString()
     },
+
     formatFileSize(size) {
       const units = ['B', 'KB', 'MB', 'GB', 'TB']
       let index = 0
@@ -424,37 +273,7 @@ export default {
       }
       return `${size.toFixed(2)} ${units[index]}`
     },
-    getFileIcon(type) {
+
-      const iconMap = {
-        folder: 'el-icon-folder',
-        document: 'el-icon-document',
-        image: 'el-icon-picture',
-        video: 'el-icon-video-camera',
-        audio: 'el-icon-headset'
-      }
-      return iconMap[type] || 'el-icon-document'
-    },
-    previousPage() {
-      // 实现上一页逻辑
-    },
-    nextPage() {
-      // 实现下一页逻辑
-    },
-    handleSizeRangeChange() {
-      this.handleSearch()
-    },
-    setSizePreset(range) {
-      this.sizeRange = range
-      this.handleSearch()
-    },
-    setSizePresetLarge() {
-      this.sizeRange = [1073741824, 10737418240]
-      this.handleSearch()
-    },
-    resetSizeRange() {
-      this.sizeRange = [0, 1073741824]
-      this.handleSearch()
-    },
     setTimePreset(preset) {
       const now = new Date()
       const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
@@ -496,9 +315,8 @@ export default {
           end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999)
           break
       }
-
       this.timeRange = [start, end]
-      this.handleTimeChange()
+      this.updateFilterOption()
     }
   }
 }
@@ -511,6 +329,7 @@ export default {
     border-radius: 12px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
     overflow: hidden;
+    margin-right: 160px;
   }
 
   >>> .el-dialog__header {
@@ -543,83 +362,9 @@ export default {
     }
   }
 
-  .search-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding: 0 4px;
-
-    .path-selector {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      color: #606266;
-      font-size: 14px;
-
-      .el-button {
-        padding: 8px;
-        border-radius: 6px;
-        transition: all 0.3s ease;
-
-        &:hover {
-          background-color: #f5f7fa;
-        }
-      }
-    }
-
-    .sort-options {
-      .el-button {
-        font-size: 14px;
-        padding: 8px 12px;
-        border-radius: 6px;
-        transition: all 0.3s ease;
-
-        &:hover {
-          background-color: #f5f7fa;
-        }
-      }
-    }
-  }
-
   .search-input-wrapper {
     display: flex;
-
+    justify-content: center;
-    .modern-input {
-      margin-right: 10px;
-    }
-
-    >>> .el-input {
-      .el-input__inner {
-        height: 44px;
-        line-height: 44px;
-        border-radius: 10px;
-        border: 1px solid #dcdfe6;
-        padding-left: 40px;
-        transition: all 0.3s ease;
-        font-size: 14px;
-
-        &:focus {
-          border-color: #409EFF;
-          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
-        }
-      }
-
-      .el-input__prefix {
-        left: 12px;
-        color: #909399;
-      }
-
-      .el-input__icon {
-        line-height: 44px;
-      }
-
-      .el-input-group__append {
-        background: transparent;
-        border: none;
-        padding: 0 8px;
-      }
-    }
   }
 
   .search-filters {
@@ -697,7 +442,7 @@ export default {
   .search-tags {
     margin: 16px 0;
     display: flex;
-    flex-wrap: wrap;
+    justify-content: center;
     gap: 8px;
 
     >>> .el-tag {
@@ -719,84 +464,5 @@ export default {
       }
     }
   }
-
-  .search-results {
-    margin: 20px 0;
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
-
-    >>> .el-table {
-      border: none;
-
-      &::before {
-        display: none;
-      }
-
-      th {
-        background-color: #f5f7fa;
-        border: none;
-        padding: 12px 0;
-        font-weight: 600;
-        color: #606266;
-      }
-
-      td {
-        border: none;
-        padding: 12px 0;
-        color: #606266;
-      }
-
-      tr {
-        transition: all 0.3s ease;
-
-        &:hover > td {
-          background-color: #f5f7fa;
-        }
-      }
-    }
-  }
-
-  .view-all {
-    text-align: center;
-    margin: 20px 0;
-
-    .el-button {
-      font-size: 14px;
-      color: #409EFF;
-      padding: 10px 20px;
-      border-radius: 6px;
-      transition: all 0.3s ease;
-
-      &:hover {
-        background-color: #ecf5ff;
-      }
-    }
-  }
-
-  .shortcuts-info {
-    text-align: left;
-    color: #909399;
-    font-size: 13px;
-    padding: 16px 0;
-    border-top: 1px solid #ebeef5;
-
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 8px 0 0;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 16px;
-
-      li {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-    }
-  }
-
-
 }
 </style>

src/components/ShowFile/ShowFile.vue

@@ -161,19 +161,17 @@
               ref="searchInput"
               placeholder="搜索"
               v-model="searchFileName"
-              :clearable="true"
+
               @keyup.enter.native="searchFileEnter(searchFileName)"
               @focus="setInputFocus"
               @input="searchFileEnter(searchFileName)"
               @blur="setInputBlur()"
               @clear="searchFileEnter(searchFileName)"
             >
-              <template v-if="!searchFileName" v-slot:suffix>
+              <template v-slot:suffix>
-                <el-tooltip transition="none" :visible-arrow="false" :content="`搜索选项(${cmdKey}+P)`" placement="bottom">
+                <el-button type="text" class="search-option" @click="searchDialogVisible = true">
-                  <el-button type="text" style="padding: 8px;" @click="searchDialogVisible = true">
+                  <i class="el-icon-s-operation"></i>
-                    <i class="el-icon-s-operation"></i>
+                </el-button>
-                  </el-button>
-                </el-tooltip>
               </template>
             </el-input>
             <el-dropdown
@@ -824,7 +822,7 @@
 
     <file-clipboard ref="fileClipboard" v-if="showClipboard && fileClipboard.length > 0" :file-list="fileClipboard" :image-url="imageUrl" :audio-cover-url="audioCoverUrl" :target-path="path" :target-folder="currentFolder" @onCopy="onCopy" @onMove="onMove"></file-clipboard>
 
-    <search-dialog :visible.sync="searchDialogVisible" :default-path="path"></search-dialog>
+    <search-dialog :visible.sync="searchDialogVisible"></search-dialog>
   </div>
 </template>
 
@@ -1500,11 +1498,11 @@ export default {
         event.stopPropagation()
       }
       // ctrl + P / cmd + P
-      if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
+      // if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
-        this.searchDialogVisible = true
+      //   this.searchDialogVisible = true
-        event.preventDefault()
+      //   event.preventDefault()
-        event.stopPropagation()
+      //   event.stopPropagation()
-      }
+      // }
     },
     keyup(event) {
       const { keyCode } = event