From a4854566ea6ffe237348d32c642578882201d4d7 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 27 Mar 2025 18:06:20 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchDialog/index.vue | 870 ++++++++++++++++++++++----
 src/components/ShowFile/ShowFile.vue  |  39 +-
 src/styles/index.scss                 |  71 +++
 3 files changed, 857 insertions(+), 123 deletions(-)

diff --git a/src/components/SearchDialog/index.vue b/src/components/SearchDialog/index.vue
index 2bc9fb0..e25f7ff 100644
--- a/src/components/SearchDialog/index.vue
+++ b/src/components/SearchDialog/index.vue
@@ -1,146 +1,802 @@
 <template>
-  <div>
-    <el-dialog style="{'font-weight': 600}" :show-close="false" :visible.sync="searchDialogVisible" @close="searchDialogClose">
-      <div class="search-container">
-        <div class="header column">
-          header
-        </div>
-        <div class="operation column">
-          operation
-        </div>
-        <div class="content column">
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div>
-          <div>
-            content1
-          </div><div>
-          content1
-        </div><div>
-          content1
-        </div>
-          <div>
-            content1
-          </div>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    width="70%"
+    custom-class="no-header-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>
-        <div class="footer column">
-          footer
+    <!-- 头部第一行 -->
+    <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">
+              <i class="el-icon-document"></i>
+              <span>文件类型</span>
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown" class="modern-dropdown">
+              <el-dropdown-item command="document">
+                <i class="el-icon-document"></i> 文档
+              </el-dropdown-item>
+              <el-dropdown-item command="image">
+                <i class="el-icon-picture"></i> 图片
+              </el-dropdown-item>
+              <el-dropdown-item command="video">
+                <i class="el-icon-video-camera"></i> 视频
+              </el-dropdown-item>
+              <el-dropdown-item command="audio">
+                <i class="el-icon-headset"></i> 音频
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-dropdown trigger="click" class="filter-dropdown">
+            <el-button type="text" class="filter-btn">
+              <i class="el-icon-coin"></i>
+              <span>文件大小</span>
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown" class="modern-dropdown size-filter-dropdown">
+              <div class="size-slider-container">
+                <div class="size-slider-labels">
+                  <span>{{ formatFileSize(sizeRange[0]) }}</span>
+                  <span>{{ formatFileSize(sizeRange[1]) }}</span>
+                </div>
+                <el-slider
+                  v-model="sizeRange"
+                  range
+                  :min="sliderConfig.min"
+                  :max="sliderConfig.max"
+                  :step="sliderConfig.step"
+                  @change="handleSizeRangeChange">
+                </el-slider>
+                <div class="size-slider-presets">
+                  <el-button size="mini" @click="setSizePreset([0, 1048576])">≤ 1MB</el-button>
+                  <el-button size="mini" @click="setSizePreset([1048576, 10485760])">1-10MB</el-button>
+                  <el-button size="mini" @click="setSizePreset([10485760, 104857600])">10-100MB</el-button>
+                  <el-button size="mini" @click="setSizePreset([104857600, 1073741824])">100MB-1GB</el-button>
+                  <el-button size="mini" @click="setSizePresetLarge()">≥ 1GB</el-button>
+                </div>
+              </div>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-dropdown trigger="click" class="filter-dropdown">
+            <el-button type="text" class="filter-btn">
+              <i class="el-icon-date"></i>
+              <span>修改时间</span>
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown" class="modern-dropdown time-filter-dropdown">
+              <div class="time-picker-container">
+                <div class="time-presets">
+                  <el-button size="mini" @click="setTimePreset('today')">今天</el-button>
+                  <el-button size="mini" @click="setTimePreset('yesterday')">昨天</el-button>
+                  <el-button size="mini" @click="setTimePreset('thisWeek')">本周</el-button>
+                  <el-button size="mini" @click="setTimePreset('lastWeek')">上周</el-button>
+                  <el-button size="mini" @click="setTimePreset('thisMonth')">本月</el-button>
+                  <el-button size="mini" @click="setTimePreset('lastMonth')">上个月</el-button>
+                </div>
+                <div class="custom-date-range">
+                  <p class="date-range-title">自定义时间范围</p>
+                  <el-date-picker
+                    v-model="timeRange"
+                    type="daterange"
+                    size="small"
+                    class="modern-date-picker"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    @change="handleTimeChange">
+                  </el-date-picker>
+                </div>
+              </div>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
       </div>
-    </el-dialog>
-  </div>
+    </div>
+
+    <!-- 搜索条件标签 -->
+    <div class="search-tags" v-if="hasSearchConditions">
+      <el-tag
+        v-if="fileTypeText !== '全部文件'"
+        closable
+        @close="resetFileType">
+        文件类型: {{ fileTypeText }}
+      </el-tag>
+      <el-tag
+        v-if="sizeRange[0] > 0 || sizeRange[1] < sliderConfig.max"
+        closable
+        @close="resetSizeRange">
+        文件大小: {{ formatSizeRange }}
+      </el-tag>
+      <el-tag
+        v-if="timeRange"
+        closable
+        @close="resetTimeRange">
+        时间范围: {{ formatTimeRange }}
+      </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 IconFile from "@/components/Icon/IconFile";
-import Icon from "@/components/Icon/Icon.vue";
-
+import api from '@/api/file-api'
+import Icon from '@/components/Icon/Icon.vue'
+import _ from 'lodash'
 
 export default {
-  name: "SearchDialog",
-  components: {
-    Icon,
-    IconFile
-  },
+  name: 'SearchDialog',
+  components: { Icon },
   props: {
-    status: {
+    visible: {
       type: Boolean,
       default: false
+    },
+    defaultPath: {
+      type: String,
+      default: '/'
     }
   },
   data() {
     return {
-      imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
-      audioCoverUrl: `${process.env.VUE_APP_BASE_API}/view/cover?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
-      searchDialogVisible: false,
+      dialogVisible: false,
+      currentPath: '',
+      searchKeyword: '',
+      sortType: 'relevance_desc',
+      sortOrder: 'desc',
+      fileType: 'all',
+      timeRange: null,
+      sizeRange: [0, 1073741824], // 默认范围：0 到 1GB
+      searchResults: [],
+      sortText: '按相关度降序',
+      fileTypeText: '全部文件',
+      debounceSearch: null,// 搜索防抖
+      pagination: {
+        pageIndex: 1,
+        pageSize: 50,
+        total: 0,
+        pageSizes: [10, 20, 30, 40, 50],
+      },
     }
   },
   computed: {
-  },
-  watch: {
-    status(visible) {
-      if (visible) {
-        this.searchDialogVisible = true
+    hasSearchConditions() {
+      return this.fileType !== 'all' || this.timeRange ||
+             (this.sizeRange[0] > 0 || this.sizeRange[1] < 1073741824)
+    },
+    formatTimeRange() {
+      if (!this.timeRange) return ''
+      return `${this.formatDate(this.timeRange[0])} 至 ${this.formatDate(this.timeRange[1])}`
+    },
+    formatSizeRange() {
+      return `${this.formatFileSize(this.sizeRange[0])} - ${this.formatFileSize(this.sizeRange[1])}`
+    },
+    sliderConfig() {
+      // 根据当前范围动态计算滑块配置
+      if (this.sizeRange[0] >= 1073741824) {
+        // 大文件模式 (1GB - 10GB)
+        return {
+          min: 1073741824,
+          max: 10737418240,
+          step: 1073741824 / 100 // 约10MB的步长
+        }
+      } else {
+        // 普通模式 (0 - 1GB)
+        return {
+          min: 0,
+          max: 1073741824,
+          step: 1024
+        }
       }
     }
   },
+  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: {
-    searchDialogClose() {
-      this.$emit('update:status', this.searchDialogVisible)
+    handleDialogOpen() {
+      this.currentPath = this.defaultPath
+      window.addEventListener('keydown', this.handleKeydown)
+    },
+    handleDialogClose() {
+      window.removeEventListener('keydown', this.handleKeydown)
+    },
+    handleKeydown(e) {
+      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) {
+        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 'document':
+          this.fileTypeText = '文档'
+          break
+        case 'image':
+          this.fileTypeText = '图片'
+          break
+        case 'video':
+          this.fileTypeText = '视频'
+          break
+        case 'audio':
+          this.fileTypeText = '音频'
+          break
+      }
+      this.handleSearch()
+    },
+    handleTimeChange() {
+      this.handleSearch()
+    },
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log('搜索条件发生变化，重新搜索')
+      this.debounceSearch(this.searchKeyword)
+    },
+    searchFile(key) {
+
+    },
+    handleKeyDown(event) {
+      const { ctrlKey, metaKey, keyCode } = event
+      console.log(ctrlKey, metaKey, keyCode)
+      if (event.metaKey && event.key === 'Enter') {
+        console.log('Cmd + Enter 被触发');
+      }
+    },
+    handleViewAll() {
+      console.log('查看所有搜索结果')
+      // 实现查看所有结果的逻辑
+    },
+    handleRowClick(row, column, event) {
+      if (event.metaKey) { // Cmd 键点击
+        this.navigateToFile(row)
+      }
+    },
+    navigateToFile(file) {
+      // 实现跳转到文件位置的逻辑
+    },
+    resetFileType() {
+      this.handleFileType('all')
+    },
+    resetTimeRange() {
+      this.timeRange = null
+      this.handleSearch()
+    },
+    formatDate(date) {
+      return new Date(date).toLocaleDateString()
+    },
+    formatFileSize(size) {
+      const units = ['B', 'KB', 'MB', 'GB', 'TB']
+      let index = 0
+      while (size >= 1024 && index < units.length - 1) {
+        size /= 1024
+        index++
+      }
+      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())
+      let start, end
+
+      switch (preset) {
+        case 'today':
+          start = today
+          end = new Date(today)
+          end.setDate(today.getDate() + 1)
+          end.setMilliseconds(-1)
+          break
+        case 'yesterday':
+          start = new Date(today)
+          start.setDate(today.getDate() - 1)
+          end = new Date(today)
+          end.setMilliseconds(-1)
+          break
+        case 'thisWeek':
+          start = new Date(today)
+          start.setDate(today.getDate() - today.getDay()) // 周日为一周第一天
+          end = new Date(start)
+          end.setDate(start.getDate() + 7)
+          end.setMilliseconds(-1)
+          break
+        case 'lastWeek':
+          start = new Date(today)
+          start.setDate(today.getDate() - today.getDay() - 7)
+          end = new Date(start)
+          end.setDate(start.getDate() + 7)
+          end.setMilliseconds(-1)
+          break
+        case 'thisMonth':
+          start = new Date(today.getFullYear(), today.getMonth(), 1)
+          end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999)
+          break
+        case 'lastMonth':
+          start = new Date(today.getFullYear(), today.getMonth() - 1, 1)
+          end = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59, 999)
+          break
+      }
+
+      this.timeRange = [start, end]
+      this.handleTimeChange()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.file-search-dialog {
+  >>> .el-dialog {
+    margin-top: 6vh !important;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+  }
 
->>> .el-dialog {
-  .el-dialog__body {
+  >>> .el-dialog__header {
     padding: 0;
+    height: 0;
   }
-  .el-dialog__header {
-    display: none;
-  }
-  max-width: 460px;
 
-  .el-dialog__title {
-    font-weight: 600;
+  >>> .el-dialog__body {
+    padding: 20px 24px;
   }
-}
 
-.search-container {
-  display: flex;
-  flex-direction: column;
-  .column {
-    padding: 20px;
+  .dialog-close-btn {
+    position: absolute;
+    right: -44px;
+    top: 0;
+    z-index: 100;
+
+    .el-button {
+      color: #fff;
+      font-size: 20px;
+      padding: 10px;
+      border-radius: 50%;
+      transition: all 0.3s ease;
+
+      &:hover {
+        color: #fff;
+        background-color: rgba(255, 255, 255, 0.2);
+        transform: scale(1.1);
+      }
+    }
   }
+
+  .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;
+
+    .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 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .el-divider--vertical {
+      height: 24px;
+      margin: 0;
+    }
+
+    .filter-dropdown {
+      .filter-btn {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        color: #606266;
+        font-size: 14px;
+        padding: 8px 12px;
+        border-radius: 6px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+
+        i {
+          font-size: 16px;
+        }
+      }
+    }
+
+    >>> .modern-date-picker {
+      .el-range-editor {
+        border: none;
+        background: transparent;
+
+        .el-range-input {
+          background: transparent;
+          color: #606266;
+        }
+
+        .el-range-separator {
+          color: #909399;
+        }
+      }
+    }
+  }
+
+  >>> .modern-dropdown {
+    border-radius: 8px;
+    padding: 6px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+    .el-dropdown-menu__item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border-radius: 6px;
+      margin: 2px 0;
+      font-size: 14px;
+
+      i {
+        font-size: 16px;
+      }
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
+  }
+
+  .search-tags {
+    margin: 16px 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    >>> .el-tag {
+      border-radius: 6px;
+      padding: 0 10px;
+      margin: 0;
+      background-color: #f5f7fa;
+      border-color: transparent;
+      color: #606266;
+
+      .el-tag__close {
+        background-color: transparent;
+        color: #909399;
+
+        &:hover {
+          background-color: #909399;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .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>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 50b7f0b..8d4467f 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -152,7 +152,7 @@
                 slot="reference"
                 :name="''"
                 @click.native="upload"
-                style="margin-right: 5px"
+                style="margin-right: 10px"
               ></button-upload>
             </el-popover>
 
@@ -168,9 +168,13 @@
               @blur="setInputBlur()"
               @clear="searchFileEnter(searchFileName)"
             >
-              <el-button slot="prepend" @click="searchFileEnter(searchFileName)">
-                <svg-icon icon-class="search" style="font-size: 22px" />
-              </el-button>
+              <template v-if="!searchFileName" v-slot:suffix>
+                <el-tooltip transition="none" :visible-arrow="false" :content="`搜索选项(${cmdKey}+P)`" placement="bottom">
+                  <el-button type="text" style="padding: 8px;" @click="searchDialogVisible = true">
+                    <i class="el-icon-s-operation"></i>
+                  </el-button>
+                </el-tooltip>
+              </template>
             </el-input>
             <el-dropdown
               size="medium"
@@ -468,6 +472,7 @@
         <!--grid布局-->
         <div
           v-show="grid"
+          ref="gridDiv"
           v-loading="tableLoading"
           element-loading-text="文件加载中"
           element-loading-spinner="el-icon-loading"
@@ -494,7 +499,6 @@
             >
               <van-grid-item
                 v-for="(item, index) in fileList"
-                ref="gridItem"
                 :key="item.id"
                 :title="
                   '大小：' +
@@ -820,7 +824,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 :status.sync="searchDialogVisible"></search-dialog>
+    <search-dialog :visible.sync="searchDialogVisible" :default-path="path"></search-dialog>
   </div>
 </template>
 
@@ -1175,6 +1179,9 @@ export default {
           return '名称'
       }
     },
+    cmdKey() {
+      return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
+    },
     fileClipboard() {
       return store.getters.fileClipboard
     },
@@ -1493,13 +1500,11 @@ export default {
         event.stopPropagation()
       }
       // ctrl + P / cmd + P
-      // if (isCmd && keyCode === 80) {
-      //   if (!this.inputting && this.editingIndex === -1) {
-      //     this.searchDialogVisible = true
-      //     event.preventDefault()
-      //     event.stopPropagation()
-      //   }
-      // }
+      if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
+        this.searchDialogVisible = true
+        event.preventDefault()
+        event.stopPropagation()
+      }
     },
     keyup(event) {
       const { keyCode } = event
@@ -1628,11 +1633,10 @@ export default {
     },
     // 画矩形选区
     darwRectangle() {
-      let scrollDiv = document.querySelector('.el-table__body-wrapper')
+      let scrollDiv = this.$refs.fileListTableContainer.querySelector('.el-table__body-wrapper')
       if (this.grid) {
-        scrollDiv = document.querySelector('.van-grid')
+        scrollDiv = this.$refs.gridDiv.querySelector('.van-grid')
       }
-
       // 添加scroll事件
       scrollDiv.onscroll = e => {
         this.tableBodyScroll(null, e)
@@ -4456,6 +4460,9 @@ export default {
       this.specifyPreviewer = 'office'
     },
     checkPreviewVisible() {
+      if (this.searchDialogVisible) {
+        return true
+      }
       if (this.iframePreviewVisible) {
         return true
       }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b61433b..6cd004b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,6 +16,77 @@ body {
     border-width: 0;
   }
 }
+
+.time-filter-dropdown {
+  min-width: 280px;
+  padding: 15px;
+
+  .time-picker-container {
+    padding: 5px;
+  }
+
+  .time-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+
+    .el-button {
+      margin: 0;
+      padding: 4px 8px;
+      font-size: 12px;
+      flex: 1 0 calc(33% - 8px);
+    }
+  }
+
+  .custom-date-range {
+    margin-top: 10px;
+    border-top: 1px solid #ebeef5;
+    padding-top: 10px;
+
+    .date-range-title {
+      margin: 0 0 10px;
+      font-size: 12px;
+      color: #606266;
+    }
+
+    .modern-date-picker {
+      width: 100%;
+    }
+  }
+}
+
+.size-filter-dropdown {
+  min-width: 280px;
+  padding: 15px;
+
+  .size-slider-container {
+    padding: 5px;
+  }
+
+  .size-slider-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    color: #606266;
+    font-size: 12px;
+  }
+
+  .size-slider-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 15px;
+    justify-content: space-between;
+
+    .el-button {
+      margin: 0;
+      padding: 4px 8px;
+      font-size: 12px;
+    }
+  }
+}
+
 >>>::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 12px;

From 69ca54add70c0e37ebfbc5bad9bf88d79da770ae Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 28 Mar 2025 18:09:34 +0800
Subject: [PATCH 2/4] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchDialog/index.vue | 440 ++++----------------------
 src/components/ShowFile/ShowFile.vue  |  24 +-
 2 files changed, 64 insertions(+), 400 deletions(-)

diff --git a/src/components/SearchDialog/index.vue b/src/components/SearchDialog/index.vue
index e25f7ff..e8b0608 100644
--- a/src/components/SearchDialog/index.vue
+++ b/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"
-    @open="handleDialogOpen"
-    @close="handleDialogClose">
+    class="file-search-dialog">
 
     <!-- 关闭按钮 -->
     <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,// 搜索防抖
-      pagination: {
-        pageIndex: 1,
-        pageSize: 50,
-        total: 0,
-        pageSizes: [10, 20, 30, 40, 50],
-      },
+      filterOption: {
+        type: null,
+        modifyStart: null,
+        modifyEnd: null,
+        sizeMin: null,
+        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
-      window.addEventListener('keydown', this.handleKeydown)
-    },
-    handleDialogClose() {
-      window.removeEventListener('keydown', this.handleKeydown)
-    },
-    handleKeydown(e) {
-      if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
-        this.previousPage()
-      } else if (e.key === 'ArrowRight' || e.key === 'PageDown') {
-        this.nextPage()
+    // 更新筛选条件并通知父组件
+    updateFilterOption() {
+      this.filterOption = {
+        type: this.fileType === 'all' ? null : this.fileType,
+        modifyStart: this.timeRange ? this.timeRange[0] : null,
+        modifyEnd: this.timeRange ? this.timeRange[1] : null,
+        sizeMin: this.sizeRange[0],
+        sizeMax: this.sizeRange[1]
       }
-    },
-    selectPath() {
-      // 实现选择路径的逻辑
-    },
-    handleSort(command) {
-      this.sortType = command
-      const [type, order] = command.split('_')
-      this.sortOrder = order
 
-      switch (type) {
-        case 'relevance':
-          this.sortText = `相关度${order === 'asc' ? '升序' : '降序'}`
-          break
-        case 'time':
-          this.sortText = `修改时间${order === 'asc' ? '升序' : '降序'}`
-          break
-        case 'size':
-          this.sortText = `文件大小${order === 'asc' ? '升序' : '降序'}`
-          break
-      }
-      this.handleSearch()
+      this.$emit('filter-change', this.filterOption)
     },
+
     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
-      console.log(ctrlKey, metaKey, keyCode)
-      if (event.metaKey && event.key === 'Enter') {
-        console.log('Cmd + Enter 被触发');
-      }
+
+    handleSizeRangeChange() {
+      this.updateFilterOption()
     },
-    handleViewAll() {
-      console.log('查看所有搜索结果')
-      // 实现查看所有结果的逻辑
+
+    setSizePreset(range) {
+      this.sizeRange = range
+      this.updateFilterOption()
     },
-    handleRowClick(row, column, event) {
-      if (event.metaKey) { // Cmd 键点击
-        this.navigateToFile(row)
-      }
-    },
-    navigateToFile(file) {
-      // 实现跳转到文件位置的逻辑
+
+    setSizePresetLarge() {
+      this.sizeRange = [1073741824, 10737418240]
+      this.updateFilterOption()
     },
+
     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;
-
-    .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;
-      }
-    }
+    justify-content: center;
   }
 
   .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>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 8d4467f..26c87e6 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/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>
-                <el-tooltip transition="none" :visible-arrow="false" :content="`搜索选项(${cmdKey}+P)`" placement="bottom">
-                  <el-button type="text" style="padding: 8px;" @click="searchDialogVisible = true">
-                    <i class="el-icon-s-operation"></i>
-                  </el-button>
-                </el-tooltip>
+              <template v-slot:suffix>
+                <el-button type="text" class="search-option" @click="searchDialogVisible = true">
+                  <i class="el-icon-s-operation"></i>
+                </el-button>
               </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) {
-        this.searchDialogVisible = true
-        event.preventDefault()
-        event.stopPropagation()
-      }
+      // if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
+      //   this.searchDialogVisible = true
+      //   event.preventDefault()
+      //   event.stopPropagation()
+      // }
     },
     keyup(event) {
       const { keyCode } = event

From 8291b53907b59dcf83deaf96bcf2eff719c4476a Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 10 Apr 2025 14:32:26 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchDialog/index.vue | 128 +++++++++++++-------------
 src/components/ShowFile/ShowFile.vue  |  58 ++++++++++--
 2 files changed, 117 insertions(+), 69 deletions(-)

diff --git a/src/components/SearchDialog/index.vue b/src/components/SearchDialog/index.vue
index e8b0608..743557d 100644
--- a/src/components/SearchDialog/index.vue
+++ b/src/components/SearchDialog/index.vue
@@ -1,15 +1,10 @@
 <template>
-  <el-dialog
-    :visible.sync="dialogVisible"
+  <div
+    v-show="dialogVisible"
     :show-close="false"
     custom-class="no-header-dialog"
     class="file-search-dialog">
 
-    <!-- 关闭按钮 -->
-    <div class="dialog-close-btn">
-      <el-button type="text" icon="el-icon-close" @click="dialogVisible = false"></el-button>
-    </div>
-
     <div class="search-bar">
       <div class="search-input-wrapper">
         <div class="search-filters">
@@ -105,27 +100,37 @@
 
     <!-- 搜索条件标签 -->
     <div class="search-tags" v-if="hasSearchConditions">
-      <el-tag
-        v-if="fileTypeText !== '全部文件'"
-        closable
-        @close="resetFileType">
-        文件类型: {{ fileTypeText }}
-      </el-tag>
-      <el-tag
-        v-if="sizeRange[0] > 0 || sizeRange[1] < sliderConfig.max"
-        closable
-        @close="resetSizeRange">
-        文件大小: {{ formatSizeRange }}
-      </el-tag>
-      <el-tag
-        v-if="timeRange"
-        closable
-        @close="resetTimeRange">
-        时间范围: {{ formatTimeRange }}
-      </el-tag>
+      <div v-if="keyword !== ''">
+        <el-tag
+          closable
+          @close="resetKeyword">
+          关键字: {{ keyword }}
+        </el-tag>
+      </div>
+      <div v-if="fileTypeText !== '全部文件'">
+        <el-tag
+          closable
+          @close="resetFileType">
+          文件类型: {{ fileTypeText }}
+        </el-tag>
+      </div>
+      <div v-if="this.hasSizeRange">
+        <el-tag
+          closable
+          @close="resetSizeRange">
+          文件大小: {{ formatSizeRange }}
+        </el-tag>
+      </div>
+      <div v-if="timeRange">
+        <el-tag
+          closable
+          @close="resetTimeRange">
+          时间范围: {{ formatTimeRange }}
+        </el-tag>
+      </div>
     </div>
 
-  </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -136,13 +141,17 @@ export default {
       type: Boolean,
       default: false
     },
+    keyword: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
       dialogVisible: false,
       fileType: 'all',
       timeRange: null,
-      sizeRange: [0, 1073741824], // 默认范围：0 到 1GB
+      sizeRange: [0, -1], // 默认范围：0 到 1GB
       fileTypeText: '全部文件',
       filterOption: {
         type: null,
@@ -155,8 +164,10 @@ export default {
   },
   computed: {
     hasSearchConditions() {
-      return this.fileType !== 'all' || this.timeRange ||
-             (this.sizeRange[0] > 0 || this.sizeRange[1] < 1073741824)
+      return this.keyword || this.fileType !== 'all' || this.timeRange || this.hasSizeRange
+    },
+    hasSizeRange () {
+      return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
     },
     formatTimeRange() {
       if (!this.timeRange) return ''
@@ -172,7 +183,7 @@ export default {
         return {
           min: 1073741824,
           max: 10737418240,
-          step: 1073741824 / 100 // 约10MB的步长
+          step: 20971520 // 20MB
         }
       } else {
         // 普通模式 (0 - 1GB)
@@ -197,10 +208,10 @@ export default {
     updateFilterOption() {
       this.filterOption = {
         type: this.fileType === 'all' ? null : this.fileType,
-        modifyStart: this.timeRange ? this.timeRange[0] : null,
-        modifyEnd: this.timeRange ? this.timeRange[1] : null,
-        sizeMin: this.sizeRange[0],
-        sizeMax: this.sizeRange[1]
+        modifyStart: this.timeRange ? new Date(this.timeRange[0]).getTime() : null,
+        modifyEnd: this.timeRange ? new Date(this.timeRange[1]).getTime() : null,
+        sizeMin: this.hasSizeRange ? this.sizeRange[0] : null,
+        sizeMax: this.hasSizeRange ? this.sizeRange[1] : null
       }
 
       this.$emit('filter-change', this.filterOption)
@@ -246,6 +257,12 @@ export default {
       this.updateFilterOption()
     },
 
+    resetKeyword() {
+      this.$emit('update:keyword', '')
+      this.$emit('update:visible', false)
+      this.updateFilterOption()
+    },
+
     resetFileType() {
       this.handleFileType('all')
     },
@@ -256,7 +273,7 @@ export default {
     },
 
     resetSizeRange() {
-      this.sizeRange = [0, 1073741824]
+      this.sizeRange = [-1, -1]
       this.updateFilterOption()
     },
 
@@ -324,6 +341,17 @@ export default {
 
 <style lang="scss" scoped>
 .file-search-dialog {
+
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+
+  .search-bar {
+    display: flex;
+    align-content: center;
+    align-items: center;
+  }
+
   >>> .el-dialog {
     margin-top: 6vh !important;
     border-radius: 12px;
@@ -341,35 +369,10 @@ export default {
     padding: 20px 24px;
   }
 
-  .dialog-close-btn {
-    position: absolute;
-    right: -44px;
-    top: 0;
-    z-index: 100;
-
-    .el-button {
-      color: #fff;
-      font-size: 20px;
-      padding: 10px;
-      border-radius: 50%;
-      transition: all 0.3s ease;
-
-      &:hover {
-        color: #fff;
-        background-color: rgba(255, 255, 255, 0.2);
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  .search-input-wrapper {
-    display: flex;
-    justify-content: center;
-  }
-
   .search-filters {
     display: flex;
     align-items: center;
+    flex-direction: column;
     gap: 8px;
 
     .el-divider--vertical {
@@ -440,10 +443,11 @@ export default {
   }
 
   .search-tags {
-    margin: 16px 0;
     display: flex;
     justify-content: center;
+    flex-direction: column;
     gap: 8px;
+    min-width: 250px;
 
     >>> .el-tag {
       border-radius: 6px;
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 26c87e6..50e5534 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -161,7 +161,6 @@
               ref="searchInput"
               placeholder="搜索"
               v-model="searchFileName"
-
               @keyup.enter.native="searchFileEnter(searchFileName)"
               @focus="setInputFocus"
               @input="searchFileEnter(searchFileName)"
@@ -169,9 +168,16 @@
               @clear="searchFileEnter(searchFileName)"
             >
               <template v-slot:suffix>
-                <el-button type="text" class="search-option" @click="searchDialogVisible = true">
-                  <i class="el-icon-s-operation"></i>
-                </el-button>
+                <el-popover
+                  v-if="searchFileName"
+                  placement="bottom-end"
+                  popper-class="search-filter-popover"
+                  trigger="click">
+                  <search-dialog :visible.sync="searchDialogVisible" :keyword.sync="searchFileName" @filter-change="searchFilterChange"></search-dialog>
+                  <el-button slot="reference" type="text" :class="searchOptionBtnClass" @click="searchDialogVisible = true">
+                    <i class="el-icon-s-operation"></i>
+                  </el-button>
+                </el-popover>
               </template>
             </el-input>
             <el-dropdown
@@ -821,8 +827,6 @@
     </el-dialog>
 
     <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"></search-dialog>
   </div>
 </template>
 
@@ -1157,6 +1161,8 @@ export default {
       debounceSearch: null,// 搜索防抖
       debounceGetFileList: null,// 获取文件列表防抖
       searchDialogVisible: false,
+      filterOption: {}, // 搜索选项
+      hasSearchFilterOption: false, // 是否有搜索选项
       fileUsername: '', // 一般用于挂载文件
     }
   },
@@ -1177,6 +1183,13 @@ export default {
           return '名称'
       }
     },
+    searchOptionBtnClass() {
+      if (this.hasSearchFilterOption) {
+        return 'search-option-btn search-option-btn-active'
+      } else {
+        return 'search-option-btn'
+      }
+    },
     cmdKey() {
       return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
     },
@@ -2920,10 +2933,15 @@ export default {
             tagId: this.$route.query.tagId,
             isFolder: this.queryCondition.isFolder,
             isFavorite: this.queryCondition.isFavorite,
-            queryFileType: this.queryFileType,
+            queryFileType: this.filterOption.type || this.queryFileType,
             pageIndex: this.pagination.pageIndex,
             pageSize: this.pagination.pageSize,
             showFolderSize: localStorage.getItem('showFolderSize'),
+            type: this.filterOption.type,
+            queryModifyStart: this.filterOption.modifyStart,
+            queryModifyEnd: this.filterOption.modifyEnd,
+            querySizeMin: this.filterOption.sizeMin,
+            querySizeMax: this.filterOption.sizeMax,
           }).then(res => {
             this.loadData(res, onLoad)
             this.listModeSearch = true
@@ -4457,6 +4475,22 @@ export default {
       this.fileHandler = {}
       this.specifyPreviewer = 'office'
     },
+    searchFilterChange(filterOption) {
+      this.filterOption = filterOption
+      let hasSearchFilterOption = false
+      if (filterOption.type !== 'all' && filterOption.type !== null) {
+        hasSearchFilterOption = true
+      }
+      if (filterOption.modifyStart !== null && filterOption.modifyEnd !== null) {
+        hasSearchFilterOption = true
+      }
+      if (filterOption.sizeMin !== null && filterOption.sizeMax !== null) {
+        hasSearchFilterOption = true
+      }
+      this.hasSearchFilterOption = hasSearchFilterOption
+
+      this.debounceSearch(this.searchFileName, false)
+    },
     checkPreviewVisible() {
       if (this.searchDialogVisible) {
         return true
@@ -4723,4 +4757,14 @@ export default {
   margin-top: 5px;
 }
 
+.search-option-btn {
+  padding: 8px;
+}
+
+.search-option-btn-active {
+  padding: 8px;
+  background: #409EFF;
+  color: #fff;
+}
+
 </style>

From b129287d4f2a27180288974be3584331d639f5d2 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 10 Apr 2025 14:32:26 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchDialog/index.vue | 139 +++++++++++++-------------
 src/components/ShowFile/ShowFile.vue  |  58 +++++++++--
 2 files changed, 121 insertions(+), 76 deletions(-)

diff --git a/src/components/SearchDialog/index.vue b/src/components/SearchDialog/index.vue
index e8b0608..e685d51 100644
--- a/src/components/SearchDialog/index.vue
+++ b/src/components/SearchDialog/index.vue
@@ -1,15 +1,10 @@
 <template>
-  <el-dialog
-    :visible.sync="dialogVisible"
+  <div
+    v-show="dialogVisible"
     :show-close="false"
     custom-class="no-header-dialog"
     class="file-search-dialog">
 
-    <!-- 关闭按钮 -->
-    <div class="dialog-close-btn">
-      <el-button type="text" icon="el-icon-close" @click="dialogVisible = false"></el-button>
-    </div>
-
     <div class="search-bar">
       <div class="search-input-wrapper">
         <div class="search-filters">
@@ -105,27 +100,37 @@
 
     <!-- 搜索条件标签 -->
     <div class="search-tags" v-if="hasSearchConditions">
-      <el-tag
-        v-if="fileTypeText !== '全部文件'"
-        closable
-        @close="resetFileType">
-        文件类型: {{ fileTypeText }}
-      </el-tag>
-      <el-tag
-        v-if="sizeRange[0] > 0 || sizeRange[1] < sliderConfig.max"
-        closable
-        @close="resetSizeRange">
-        文件大小: {{ formatSizeRange }}
-      </el-tag>
-      <el-tag
-        v-if="timeRange"
-        closable
-        @close="resetTimeRange">
-        时间范围: {{ formatTimeRange }}
-      </el-tag>
+      <div v-if="keyword !== ''">
+        <el-tag
+          closable
+          @close="resetKeyword">
+          关键字: {{ keyword }}
+        </el-tag>
+      </div>
+      <div v-if="fileTypeText !== '全部文件'">
+        <el-tag
+          closable
+          @close="resetFileType">
+          文件类型: {{ fileTypeText }}
+        </el-tag>
+      </div>
+      <div v-if="hasSizeRange">
+        <el-tag
+          closable
+          @close="resetSizeRange">
+          文件大小: {{ formatSizeRange }}
+        </el-tag>
+      </div>
+      <div v-if="timeRange">
+        <el-tag
+          closable
+          @close="resetTimeRange">
+          时间范围: {{ formatTimeRange }}
+        </el-tag>
+      </div>
     </div>
 
-  </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -136,13 +141,17 @@ export default {
       type: Boolean,
       default: false
     },
+    keyword: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
       dialogVisible: false,
       fileType: 'all',
       timeRange: null,
-      sizeRange: [0, 1073741824], // 默认范围：0 到 1GB
+      sizeRange: [0, -1], // 默认范围：0 到 1GB
       fileTypeText: '全部文件',
       filterOption: {
         type: null,
@@ -155,8 +164,10 @@ export default {
   },
   computed: {
     hasSearchConditions() {
-      return this.fileType !== 'all' || this.timeRange ||
-             (this.sizeRange[0] > 0 || this.sizeRange[1] < 1073741824)
+      return this.keyword || this.fileType !== 'all' || this.timeRange || this.hasSizeRange
+    },
+    hasSizeRange () {
+      return this.sizeRange[0] >= 0 && this.sizeRange[1] > 0
     },
     formatTimeRange() {
       if (!this.timeRange) return ''
@@ -172,7 +183,7 @@ export default {
         return {
           min: 1073741824,
           max: 10737418240,
-          step: 1073741824 / 100 // 约10MB的步长
+          step: 20971520 // 20MB
         }
       } else {
         // 普通模式 (0 - 1GB)
@@ -197,10 +208,10 @@ export default {
     updateFilterOption() {
       this.filterOption = {
         type: this.fileType === 'all' ? null : this.fileType,
-        modifyStart: this.timeRange ? this.timeRange[0] : null,
-        modifyEnd: this.timeRange ? this.timeRange[1] : null,
-        sizeMin: this.sizeRange[0],
-        sizeMax: this.sizeRange[1]
+        modifyStart: this.timeRange ? new Date(this.timeRange[0]).getTime() : null,
+        modifyEnd: this.timeRange ? new Date(this.timeRange[1]).getTime() : null,
+        sizeMin: this.hasSizeRange ? this.sizeRange[0] : null,
+        sizeMax: this.hasSizeRange ? this.sizeRange[1] : null
       }
 
       this.$emit('filter-change', this.filterOption)
@@ -246,6 +257,12 @@ export default {
       this.updateFilterOption()
     },
 
+    resetKeyword() {
+      this.$emit('update:keyword', '')
+      this.$emit('update:visible', false)
+      this.updateFilterOption()
+    },
+
     resetFileType() {
       this.handleFileType('all')
     },
@@ -256,7 +273,7 @@ export default {
     },
 
     resetSizeRange() {
-      this.sizeRange = [0, 1073741824]
+      this.sizeRange = [-1, -1]
       this.updateFilterOption()
     },
 
@@ -265,13 +282,10 @@ export default {
     },
 
     formatFileSize(size) {
-      const units = ['B', 'KB', 'MB', 'GB', 'TB']
-      let index = 0
-      while (size >= 1024 && index < units.length - 1) {
-        size /= 1024
-        index++
-      }
-      return `${size.toFixed(2)} ${units[index]}`
+      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+      if (size === 0) return '0 B';
+      const i = Math.floor(Math.log(size) / Math.log(1024));
+      return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
     },
 
     setTimePreset(preset) {
@@ -324,6 +338,17 @@ export default {
 
 <style lang="scss" scoped>
 .file-search-dialog {
+
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+
+  .search-bar {
+    display: flex;
+    align-content: center;
+    align-items: center;
+  }
+
   >>> .el-dialog {
     margin-top: 6vh !important;
     border-radius: 12px;
@@ -341,35 +366,10 @@ export default {
     padding: 20px 24px;
   }
 
-  .dialog-close-btn {
-    position: absolute;
-    right: -44px;
-    top: 0;
-    z-index: 100;
-
-    .el-button {
-      color: #fff;
-      font-size: 20px;
-      padding: 10px;
-      border-radius: 50%;
-      transition: all 0.3s ease;
-
-      &:hover {
-        color: #fff;
-        background-color: rgba(255, 255, 255, 0.2);
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  .search-input-wrapper {
-    display: flex;
-    justify-content: center;
-  }
-
   .search-filters {
     display: flex;
     align-items: center;
+    flex-direction: column;
     gap: 8px;
 
     .el-divider--vertical {
@@ -440,10 +440,11 @@ export default {
   }
 
   .search-tags {
-    margin: 16px 0;
     display: flex;
     justify-content: center;
+    flex-direction: column;
     gap: 8px;
+    min-width: 250px;
 
     >>> .el-tag {
       border-radius: 6px;
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 26c87e6..50e5534 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -161,7 +161,6 @@
               ref="searchInput"
               placeholder="搜索"
               v-model="searchFileName"
-
               @keyup.enter.native="searchFileEnter(searchFileName)"
               @focus="setInputFocus"
               @input="searchFileEnter(searchFileName)"
@@ -169,9 +168,16 @@
               @clear="searchFileEnter(searchFileName)"
             >
               <template v-slot:suffix>
-                <el-button type="text" class="search-option" @click="searchDialogVisible = true">
-                  <i class="el-icon-s-operation"></i>
-                </el-button>
+                <el-popover
+                  v-if="searchFileName"
+                  placement="bottom-end"
+                  popper-class="search-filter-popover"
+                  trigger="click">
+                  <search-dialog :visible.sync="searchDialogVisible" :keyword.sync="searchFileName" @filter-change="searchFilterChange"></search-dialog>
+                  <el-button slot="reference" type="text" :class="searchOptionBtnClass" @click="searchDialogVisible = true">
+                    <i class="el-icon-s-operation"></i>
+                  </el-button>
+                </el-popover>
               </template>
             </el-input>
             <el-dropdown
@@ -821,8 +827,6 @@
     </el-dialog>
 
     <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"></search-dialog>
   </div>
 </template>
 
@@ -1157,6 +1161,8 @@ export default {
       debounceSearch: null,// 搜索防抖
       debounceGetFileList: null,// 获取文件列表防抖
       searchDialogVisible: false,
+      filterOption: {}, // 搜索选项
+      hasSearchFilterOption: false, // 是否有搜索选项
       fileUsername: '', // 一般用于挂载文件
     }
   },
@@ -1177,6 +1183,13 @@ export default {
           return '名称'
       }
     },
+    searchOptionBtnClass() {
+      if (this.hasSearchFilterOption) {
+        return 'search-option-btn search-option-btn-active'
+      } else {
+        return 'search-option-btn'
+      }
+    },
     cmdKey() {
       return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
     },
@@ -2920,10 +2933,15 @@ export default {
             tagId: this.$route.query.tagId,
             isFolder: this.queryCondition.isFolder,
             isFavorite: this.queryCondition.isFavorite,
-            queryFileType: this.queryFileType,
+            queryFileType: this.filterOption.type || this.queryFileType,
             pageIndex: this.pagination.pageIndex,
             pageSize: this.pagination.pageSize,
             showFolderSize: localStorage.getItem('showFolderSize'),
+            type: this.filterOption.type,
+            queryModifyStart: this.filterOption.modifyStart,
+            queryModifyEnd: this.filterOption.modifyEnd,
+            querySizeMin: this.filterOption.sizeMin,
+            querySizeMax: this.filterOption.sizeMax,
           }).then(res => {
             this.loadData(res, onLoad)
             this.listModeSearch = true
@@ -4457,6 +4475,22 @@ export default {
       this.fileHandler = {}
       this.specifyPreviewer = 'office'
     },
+    searchFilterChange(filterOption) {
+      this.filterOption = filterOption
+      let hasSearchFilterOption = false
+      if (filterOption.type !== 'all' && filterOption.type !== null) {
+        hasSearchFilterOption = true
+      }
+      if (filterOption.modifyStart !== null && filterOption.modifyEnd !== null) {
+        hasSearchFilterOption = true
+      }
+      if (filterOption.sizeMin !== null && filterOption.sizeMax !== null) {
+        hasSearchFilterOption = true
+      }
+      this.hasSearchFilterOption = hasSearchFilterOption
+
+      this.debounceSearch(this.searchFileName, false)
+    },
     checkPreviewVisible() {
       if (this.searchDialogVisible) {
         return true
@@ -4723,4 +4757,14 @@ export default {
   margin-top: 5px;
 }
 
+.search-option-btn {
+  padding: 8px;
+}
+
+.search-option-btn-active {
+  padding: 8px;
+  background: #409EFF;
+  color: #fff;
+}
+
 </style>