From 6b103af57e22510ad1c79e3acf0ac158800bcabe Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 19 Apr 2025 15:18:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=9C=E7=B4=A2=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E5=8F=AF=E6=90=9C=E7=B4=A2=E6=8C=82=E8=BD=BD=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchDialog/index.vue | 469 ----------------------
 src/components/SearchOption/index.vue | 545 ++++++++++++++++++++++++++
 src/components/ShowFile/ShowFile.vue  | 141 ++++---
 src/utils/file-config.js              |  16 +-
 4 files changed, 642 insertions(+), 529 deletions(-)
 delete mode 100644 src/components/SearchDialog/index.vue
 create mode 100644 src/components/SearchOption/index.vue

diff --git a/src/components/SearchDialog/index.vue b/src/components/SearchDialog/index.vue
deleted file mode 100644
index e685d51..0000000
--- a/src/components/SearchDialog/index.vue
+++ /dev/null
@@ -1,469 +0,0 @@
-<template>
-  <div
-    v-show="dialogVisible"
-    :show-close="false"
-    custom-class="no-header-dialog"
-    class="file-search-dialog">
-
-    <div class="search-bar">
-      <div class="search-input-wrapper">
-        <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="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>
-    </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>
-export default {
-  name: 'SearchDialog',
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    keyword: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      fileType: 'all',
-      timeRange: null,
-      sizeRange: [0, -1], // 默认范围：0 到 1GB
-      fileTypeText: '全部文件',
-      filterOption: {
-        type: null,
-        modifyStart: null,
-        modifyEnd: null,
-        sizeMin: null,
-        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: {
-    // 更新筛选条件并通知父组件
-    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 {
-
-  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;
-    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>
diff --git a/src/components/SearchOption/index.vue b/src/components/SearchOption/index.vue
new file mode 100644
index 0000000..66c813c
--- /dev/null
+++ b/src/components/SearchOption/index.vue
@@ -0,0 +1,545 @@
+<template>
+
+  <div class="search-option-wrapper">
+    <div class="search-option-result">
+      <div>
+        <span>搜索:</span>
+        <span>{{ keyword }}</span>
+      </div>
+      <div>
+        <span>{{searchResultCount}}</span>
+        <span>个结果</span>
+      </div>
+    </div>
+    <div class="file-search-option">
+      <div class="search-bar">
+        <div class="search-input-wrapper">
+          <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="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>
+            <el-checkbox
+              v-model="searchMount"
+              class="search-mount-checkbox"
+              @change="handleSearchMountChange"
+            >包含挂载目录</el-checkbox>
+          </div>
+        </div>
+      </div>
+      <!-- 搜索条件标签 -->
+      <div class="search-tags">
+        <div v-if="searchPath.length > 1">
+          <el-tag
+            @close="resetSearchPath">
+            路径: {{ searchPath }}
+          </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 v-if="searchMount">
+          <el-tag
+            closable
+            @close="resetSearchMount">
+            包含挂载目录
+          </el-tag>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'SearchOption',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    keyword: {
+      type: String,
+      default: ''
+    },
+    hasSearchConditionsParam: {
+      type: Boolean,
+      default: false
+    },
+    filterOptionParam: {
+      type: Object,
+      default: function() {}
+    },
+    searchPath: {
+      type: String,
+      default: '/'
+    },
+    searchResultCount: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      fileType: 'all',
+      timeRange: null,
+      sizeRange: [0, -1], // 默认范围：0 到 1GB
+      fileTypeText: '全部文件',
+      searchMount: false,
+      filterOption: {
+        type: null,
+        modifyStart: null,
+        searchMount: false,
+        modifyEnd: null,
+        sizeMin: null,
+        sizeMax: null
+      }
+    }
+  },
+  computed: {
+    hasSearchConditions() {
+      return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount
+    },
+    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: {
+  },
+  methods: {
+    // 更新筛选条件并通知父组件
+    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,
+        searchMount: this.searchMount
+      }
+
+      this.$emit('filter-change')
+      this.$emit('update:filter-option-param', this.filterOption)
+      this.$emit('update:has-search-conditions-param', this.hasSearchConditions)
+    },
+
+    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()
+    },
+
+    resetSearchPath() {
+      this.updateFilterOption()
+    },
+
+    resetSearchMount() {
+      this.searchMount = false
+      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()
+    },
+
+    handleSearchMountChange() {
+      this.updateFilterOption()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-option-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  .search-option-result {
+    padding: 12px 24px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f0f2f5;
+
+    div {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      span:first-child {
+        color: #909399;
+        font-size: 14px;
+      }
+
+      span:last-child {
+        color: #303133;
+        font-weight: 500;
+        font-size: 14px;
+      }
+
+      &:last-child {
+        span:first-child {
+          color: #409EFF;
+          font-weight: 600;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+.file-search-option {
+
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 12px 10px;
+
+  .search-bar {
+    display: flex;
+    align-content: center;
+    align-items: center;
+  }
+
+  .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;
+        }
+      }
+    }
+
+    .search-mount-checkbox {
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+  }
+
+  >>> .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>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 50e5534..9266032 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -157,27 +157,40 @@
             </el-popover>
 
             <el-input
+              :class="searchInputClass"
               v-show="showSearchButton"
               ref="searchInput"
-              placeholder="搜索"
+              :placeholder="`搜索 ${cmdKey} P`"
               v-model="searchFileName"
               @keyup.enter.native="searchFileEnter(searchFileName)"
-              @focus="setInputFocus"
+              @focus="searchInputFocus"
               @input="searchFileEnter(searchFileName)"
-              @blur="setInputBlur()"
+              @blur="searchInputBlur"
               @clear="searchFileEnter(searchFileName)"
             >
               <template v-slot:suffix>
-                <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>
+                <div>
+                  <el-button v-if="searchFileName" type="text" class="search-close-btn" @click="searchClose">
+                    <i class="el-icon-circle-close"></i>
                   </el-button>
-                </el-popover>
+                  <el-popover
+                    v-if="searchFileName"
+                    placement="bottom-end"
+                    popper-class="search-filter-popover"
+                    trigger="click">
+                    <search-option
+                      :has-search-conditions-param.sync="hasSearchFilterOption"
+                      :keyword.sync="searchFileName"
+                      :filter-option-param.sync="filterOption"
+                      :search-path="currentDirectory"
+                      :search-result-count="pagination['total']"
+                      @filter-change="searchFilterChange" >
+                    </search-option>
+                    <el-button slot="reference" type="text" :class="searchOptionBtnClass">
+                      <i class="el-icon-s-operation"></i>
+                    </el-button>
+                  </el-popover>
+                </div>
               </template>
             </el-input>
             <el-dropdown
@@ -831,7 +844,7 @@
 </template>
 
 <script>
-import SearchDialog from '@/components/SearchDialog/index.vue'
+import SearchOption from '@/components/SearchOption/index.vue'
 import DialogFileList from '@/components/ShowFile/DialogFileList.vue'
 import FileClipboard from '@/components/ShowFile/FileClipboard.vue'
 import store from '@/store'
@@ -872,7 +885,7 @@ export default {
   components: {
     FileClipboard,
     DialogFileList,
-    SearchDialog,
+    SearchOption,
     FileDetails,
     TagDialog,
     ShareDialog,
@@ -1018,6 +1031,7 @@ export default {
       renameFileName: '',
       searchFileName: '',
       pathList: [{ folder: '' }],
+      currentDirectory: '/', // 当前路径
       fileList: [],
       pageLoadCompleteList: [],
       pagination: {
@@ -1160,10 +1174,10 @@ export default {
       deleteLoading: false, // 删除loading
       debounceSearch: null,// 搜索防抖
       debounceGetFileList: null,// 获取文件列表防抖
-      searchDialogVisible: false,
       filterOption: {}, // 搜索选项
       hasSearchFilterOption: false, // 是否有搜索选项
       fileUsername: '', // 一般用于挂载文件
+      searchInputClass: 'search-input' // 搜索输入框样式
     }
   },
   computed: {
@@ -1184,11 +1198,7 @@ export default {
       }
     },
     searchOptionBtnClass() {
-      if (this.hasSearchFilterOption) {
-        return 'search-option-btn search-option-btn-active'
-      } else {
-        return 'search-option-btn'
-      }
+      return this.hasSearchFilterOption ? 'search-option-btn search-option-btn-active' : 'search-option-btn'
     },
     cmdKey() {
       return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
@@ -1300,6 +1310,11 @@ export default {
           break
       }
     },
+    searchFileName(newValue) {
+      if (!newValue) {
+        this.hasSearchFilterOption = false
+      }
+    }
   },
   mounted() {
     // 监听返回
@@ -1511,11 +1526,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.$refs.searchInput.focus()
+        event.preventDefault()
+        event.stopPropagation()
+      }
     },
     keyup(event) {
       const { keyCode } = event
@@ -2795,6 +2810,7 @@ export default {
       } else {
         this.pagination.pageIndex = 1
       }
+      this.currentDirectory = decodeURIComponent(this.getQueryPath())
       this.pageLoadCompleteList[this.pagination.pageIndex] = false
       this.tableLoading = true
       this.finished = false
@@ -2942,6 +2958,7 @@ export default {
             queryModifyEnd: this.filterOption.modifyEnd,
             querySizeMin: this.filterOption.sizeMin,
             querySizeMax: this.filterOption.sizeMax,
+            searchMount: this.filterOption.searchMount,
           }).then(res => {
             this.loadData(res, onLoad)
             this.listModeSearch = true
@@ -3016,6 +3033,7 @@ export default {
         if (this.$route.query.keyword !== 'undefined') {
           this.searchFileName = this.$route.query.keyword
         }
+        this.searchInputBlur()
         const searchPathIndex = this.pathList.findIndex(item => item.search)
         if (this.$route.query.searchOpenFolder && searchPathIndex > -1) {
           this.searchFileAndOpenDir(this.$route.query.searchOpenFolder, onLoad)
@@ -3413,7 +3431,8 @@ export default {
       this.menus = JSON.parse(JSON.stringify(this.singleMenus))
       // 挂载的文件
       const owner = localStorage.getItem('mountFileOwner')
-      if (this.$route.query.folder && owner) {
+      const notSelf = row.userId && row.userId !== this.$store.getters.userId
+      if ((this.$route.query.folder && owner) || notSelf) {
         // 根据权限设置菜单
         this.setMenusByPermission(row)
       } else {
@@ -3453,14 +3472,14 @@ export default {
         )
         this.shareToken = undefined
         // 在download之前添加复制下载链接选项
+        this.addMenusCopyDownLoadLinks(downloadIndex)
         if (row.isPrivacy) {
           // 如果是私密分享需要先获取shareToken
           api.generateShareToken({fileId: row.id}).then(res => {
             this.shareToken = res.data
-            this.addMenusCopyDownLoadLinks(downloadIndex)
+          }).catch(() => {
+            this.menus.splice(downloadIndex, 1)
           })
-        } else {
-          this.addMenusCopyDownLoadLinks(downloadIndex)
         }
       }
     },
@@ -3498,6 +3517,7 @@ export default {
     },
     // 鼠标右击
     rowContextmenu(row) {
+      console.log('rowContextmenu', row, row.userId, this.$store.getters.userId)
       if (this.selectFile) {
         return
       }
@@ -3520,8 +3540,8 @@ export default {
       this.menuTriangle = ''
       const e = {}
       e.pageX = event.pageX + 5
-      e.pageY = event.pageY + 2
-      e.clientX = event.clientX + 5
+      e.pageY = event.pageY + 20
+      e.clientX = event.clientX + 50
       e.clientY = event.clientY + 2
       this.$refs.contextShow.showMenu(e)
       this.cellMouseIndex = -1
@@ -4475,26 +4495,23 @@ 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
-
+    searchClose() {
+      this.searchFileName = ''
+      this.searchInputBlur()
+      this.searchFileEnter()
+    },
+    searchInputFocus() {
+      this.searchInputClass = 'search-input search-input-focus'
+      this.setInputFocus()
+    },
+    searchInputBlur() {
+      this.searchInputClass = this.searchFileName ? 'search-input search-input-focus' : 'search-input'
+      this.setInputBlur()
+    },
+    searchFilterChange() {
       this.debounceSearch(this.searchFileName, false)
     },
     checkPreviewVisible() {
-      if (this.searchDialogVisible) {
-        return true
-      }
       if (this.iframePreviewVisible) {
         return true
       }
@@ -4757,14 +4774,38 @@ export default {
   margin-top: 5px;
 }
 
+.search-input {
+  width: 150px;
+  transition: width 0.3s ease-in-out;
+}
+
+.search-input-focus {
+  width: 240px;
+}
+
+.search-close-btn {
+  padding: 4px;
+  color: #C0C4CC;
+  :hover {
+    color: #409EFF;
+  }
+}
+
 .search-option-btn {
-  padding: 8px;
+  padding: 4px;
+  margin-right: 4px;
+  color: #606266;
+  :hover {
+    color: #409EFF;
+  }
 }
 
 .search-option-btn-active {
-  padding: 8px;
   background: #409EFF;
   color: #fff;
+  :hover {
+    color: #fff;
+  }
 }
 
 </style>
diff --git a/src/utils/file-config.js b/src/utils/file-config.js
index faa31e0..b61e8bb 100644
--- a/src/utils/file-config.js
+++ b/src/utils/file-config.js
@@ -29,19 +29,15 @@ export default {
   },
   // 预览文件的url
   previewUrl: function(username, file, token, shareToken, serverUrl) {
-    let owner = null
-    if (username !== store.getters.name || localStorage.getItem('mountFileOwner') !== null) {
-      owner = localStorage.getItem('mountFileOwner')
-    } else {
-      owner = username
-    }
-    if (owner == null) {
-      owner = store.getters.name
-    }
     let baseUrl = serverUrl || this.baseUrl
-    let fileUrl = `${baseUrl}/file/${owner}${encodeURI(file.path)}${encodeURI(file.name)}`
+    let fileUrl = `${baseUrl}/file/${store.getters.name}${encodeURI(file.path)}${encodeURI(file.name)}`
     fileUrl = fileUrl.replaceAll('#', '%23')
     fileUrl = fileUrl.replaceAll(/%5C/g, '/')
+
+    if (file.userId !== store.getters.userId) {
+      return `${baseUrl}/pre-file/${file.id}/${encodeURI(file.name)}?jmal-token=${token}&name=${username}`
+    }
+
     if (token) {
       return `${fileUrl}?jmal-token=${token}&name=${username}`
     }