Merge pull request #393 from jamebal/search

feat: 新增搜索选项

src/components/SearchDialog/index.vue

@@ -1,146 +1,469 @@
 <template>
-  <div>
+  <div
-    <el-dialog style="{'font-weight': 600}" :show-close="false" :visible.sync="searchDialogVisible" @close="searchDialogClose">
+    v-show="dialogVisible"
-      <div class="search-container">
+    :show-close="false"
-        <div class="header column">
+    custom-class="no-header-dialog"
-          header
+    class="file-search-dialog">
-        </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>
 
-
+    <div class="search-bar">
-        </div>
+      <div class="search-input-wrapper">
-        <div class="footer column">
+        <div class="search-filters">
-          footer
+          <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="all">
+                <i class="el-icon-document"></i> 全部文件
+              </el-dropdown-item>
+              <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 class="search-tags" v-if="hasSearchConditions">
+      <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>
+
   </div>
 </template>
 
 <script>
-
-import IconFile from "@/components/Icon/IconFile";
-import Icon from "@/components/Icon/Icon.vue";
-
-
 export default {
-  name: "SearchDialog",
+  name: 'SearchDialog',
-  components: {
-    Icon,
-    IconFile
-  },
   props: {
-    status: {
+    visible: {
       type: Boolean,
       default: false
+    },
+    keyword: {
+      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=`,
+      dialogVisible: false,
-      audioCoverUrl: `${process.env.VUE_APP_BASE_API}/view/cover?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}&id=`,
+      fileType: 'all',
-      searchDialogVisible: false,
+      timeRange: null,
-    }
+      sizeRange: [0, -1], // 默认范围：0 到 1GB
-  },
+      fileTypeText: '全部文件',
-  computed: {
+      filterOption: {
-  },
+        type: null,
-  watch: {
+        modifyStart: null,
-    status(visible) {
+        modifyEnd: null,
-      if (visible) {
+        sizeMin: null,
-        this.searchDialogVisible = true
+        sizeMax: null
       }
     }
   },
+  computed: {
+    hasSearchConditions() {
+      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 ''
+      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: 20971520 // 20MB
+        }
+      } else {
+        // 普通模式 (0 - 1GB)
+        return {
+          min: 0,
+          max: 1073741824,
+          step: 1024
+        }
+      }
+    }
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val
+    },
+    dialogVisible(val) {
+      this.$emit('update:visible', val)
+    }
+  },
   methods: {
-    searchDialogClose() {
+    // 更新筛选条件并通知父组件
-      this.$emit('update:status', this.searchDialogVisible)
+    updateFilterOption() {
+      this.filterOption = {
+        type: this.fileType === 'all' ? null : this.fileType,
+        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)
+    },
+
+    handleFileType(command) {
+      this.fileType = command
+      switch (command) {
+        case 'all':
+          this.fileTypeText = '全部文件'
+          break
+        case 'document':
+          this.fileTypeText = '文档'
+          break
+        case 'image':
+          this.fileTypeText = '图片'
+          break
+        case 'video':
+          this.fileTypeText = '视频'
+          break
+        case 'audio':
+          this.fileTypeText = '音频'
+          break
+      }
+      this.updateFilterOption()
+    },
+
+    handleTimeChange() {
+      this.updateFilterOption()
+    },
+
+    handleSizeRangeChange() {
+      this.updateFilterOption()
+    },
+
+    setSizePreset(range) {
+      this.sizeRange = range
+      this.updateFilterOption()
+    },
+
+    setSizePresetLarge() {
+      this.sizeRange = [1073741824, 10737418240]
+      this.updateFilterOption()
+    },
+
+    resetKeyword() {
+      this.$emit('update:keyword', '')
+      this.$emit('update:visible', false)
+      this.updateFilterOption()
+    },
+
+    resetFileType() {
+      this.handleFileType('all')
+    },
+
+    resetTimeRange() {
+      this.timeRange = null
+      this.updateFilterOption()
+    },
+
+    resetSizeRange() {
+      this.sizeRange = [-1, -1]
+      this.updateFilterOption()
+    },
+
+    formatDate(date) {
+      return new Date(date).toLocaleDateString()
+    },
+
+    formatFileSize(size) {
+      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) {
+      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.updateFilterOption()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.file-search-dialog {
 
->>> .el-dialog {
-  .el-dialog__body {
-    padding: 0;
-  }
-  .el-dialog__header {
-    display: none;
-  }
-  max-width: 460px;
-
-  .el-dialog__title {
-    font-weight: 600;
-  }
-}
-
-.search-container {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
-  .column {
+  gap: 16px;
-    padding: 20px;
+
+  .search-bar {
+    display: flex;
+    align-content: center;
+    align-items: center;
+  }
+
+  >>> .el-dialog {
+    margin-top: 6vh !important;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    margin-right: 160px;
+  }
+
+  >>> .el-dialog__header {
+    padding: 0;
+    height: 0;
+  }
+
+  >>> .el-dialog__body {
+    padding: 20px 24px;
+  }
+
+  .search-filters {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    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 {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 250px;
+
+    >>> .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;
+        }
+      }
+    }
   }
 }
 </style>

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>
 
@@ -161,16 +161,24 @@
               ref="searchInput"
               placeholder="搜索"
               v-model="searchFileName"
-              :clearable="true"
               @keyup.enter.native="searchFileEnter(searchFileName)"
               @focus="setInputFocus"
               @input="searchFileEnter(searchFileName)"
               @blur="setInputBlur()"
               @clear="searchFileEnter(searchFileName)"
             >
-              <el-button slot="prepend" @click="searchFileEnter(searchFileName)">
+              <template v-slot:suffix>
-                <svg-icon icon-class="search" style="font-size: 22px" />
+                <el-popover
-              </el-button>
+                  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
               size="medium"
@@ -468,6 +476,7 @@
         <!--grid布局-->
         <div
           v-show="grid"
+          ref="gridDiv"
           v-loading="tableLoading"
           element-loading-text="文件加载中"
           element-loading-spinner="el-icon-loading"
@@ -494,7 +503,6 @@
             >
               <van-grid-item
                 v-for="(item, index) in fileList"
-                ref="gridItem"
                 :key="item.id"
                 :title="
                   '大小：' +
@@ -819,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 :status.sync="searchDialogVisible"></search-dialog>
   </div>
 </template>
 
@@ -1155,6 +1161,8 @@ export default {
       debounceSearch: null,// 搜索防抖
       debounceGetFileList: null,// 获取文件列表防抖
       searchDialogVisible: false,
+      filterOption: {}, // 搜索选项
+      hasSearchFilterOption: false, // 是否有搜索选项
       fileUsername: '', // 一般用于挂载文件
     }
   },
@@ -1175,6 +1183,16 @@ 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'
+    },
     fileClipboard() {
       return store.getters.fileClipboard
     },
@@ -1493,12 +1511,10 @@ export default {
         event.stopPropagation()
       }
       // ctrl + P / cmd + P
-      // if (isCmd && keyCode === 80) {
+      // if (isCmd && keyCode === 80 && !checkPreviewVisible && !this.inputting) {
-      //   if (!this.inputting && this.editingIndex === -1) {
+      //   this.searchDialogVisible = true
-      //     this.searchDialogVisible = true
+      //   event.preventDefault()
-      //     event.preventDefault()
+      //   event.stopPropagation()
-      //     event.stopPropagation()
-      //   }
       // }
     },
     keyup(event) {
@@ -1628,11 +1644,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)
@@ -2918,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
@@ -4455,7 +4475,26 @@ 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
+      }
       if (this.iframePreviewVisible) {
         return true
       }
@@ -4718,4 +4757,14 @@ export default {
   margin-top: 5px;
 }
 
+.search-option-btn {
+  padding: 8px;
+}
+
+.search-option-btn-active {
+  padding: 8px;
+  background: #409EFF;
+  color: #fff;
+}
+
 </style>

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;