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

---
 src/api/file-api.js                    |   8 +
 src/components/SearchOption/index.vue  | 124 +++++++++--
 src/components/ShowFile/ShowFile.vue   | 284 ++++++++++++++++++++-----
 src/components/preview/FileDetails.vue |  10 +-
 src/store/getters.js                   |   3 +-
 src/store/modules/user.js              |   7 +-
 src/styles/index.scss                  |   3 +
 7 files changed, 365 insertions(+), 74 deletions(-)

diff --git a/src/api/file-api.js b/src/api/file-api.js
index 3e8a270..0d3eb49 100644
--- a/src/api/file-api.js
+++ b/src/api/file-api.js
@@ -153,6 +153,14 @@ export default {
       params
     })
   },
+  // 删除所有搜索记录🔍
+  removeAllSearchHistory: function(params) {
+    return request({
+      url: '/search/deleteAllSearchHistory',
+      method: 'delete',
+      params
+    })
+  },
   // 搜索文件🔍
   searchFile: function(params) {
     return request({
diff --git a/src/components/SearchOption/index.vue b/src/components/SearchOption/index.vue
index e7f54df..278577d 100644
--- a/src/components/SearchOption/index.vue
+++ b/src/components/SearchOption/index.vue
@@ -18,15 +18,57 @@
         <span>个结果</span>
       </div>
     </div>
+
+    <div class="search-option-scope">
+      <div class="search-option-scope-title">
+        查找范围:
+      </div>
+      <div class="content-scope">
+        <div>
+          <el-checkbox
+            v-model="includeTagName"
+            class="search-option-checkbox"
+            @change="handleCommonChange"
+          >标签名称
+          </el-checkbox>
+        </div>
+        <div>
+          <el-checkbox
+            v-model="includeFileName"
+            class="search-option-checkbox"
+            @change="handleCommonChange"
+          >文件名称
+          </el-checkbox>
+        </div>
+        <div>
+          <el-checkbox
+            v-model="includeFileContent"
+            class="search-option-checkbox"
+            @change="handleCommonChange"
+          >文件内容
+          </el-checkbox>
+        </div>
+      </div>
+    </div>
+
     <div class="file-search-option">
       <div class="search-bar">
         <div class="search-input-wrapper">
           <div class="search-filters">
+            <div>
+              <el-checkbox
+                v-if="showExactSearch"
+                v-model="exactSearch"
+                class="search-option-checkbox"
+                @change="handleCommonChange"
+              >精准搜索
+              </el-checkbox>
+            </div>
             <div>
               <el-checkbox
                 v-model="searchOverall"
                 class="search-option-checkbox"
-                @change="handleSearchOverallChange"
+                @change="handleCommonChange"
               >全盘搜索
               </el-checkbox>
             </div>
@@ -34,7 +76,7 @@
               <el-checkbox
                 v-model="searchMount"
                 class="search-option-checkbox"
-                @change="handleSearchMountChange"
+                @change="handleCommonChange"
               >挂载目录
               </el-checkbox>
             </div>
@@ -142,6 +184,13 @@
             全盘搜索
           </el-tag>
         </div>
+        <div v-if="exactSearch">
+          <el-tag
+            closable
+            @close="resetExactSearch">
+            精准搜索
+          </el-tag>
+        </div>
         <div v-if="searchMount">
           <el-tag
             closable
@@ -217,10 +266,18 @@ export default {
       fileTypeText: '全部文件',
       searchMount: false,
       searchOverall: false,
-      filterOption: this.emptyFilterOption
+      exactSearch: false,
+      filterOption: this.emptyFilterOption,
+      checkList: ['标签名称', '文件名称', '文件内容'],
+      includeTagName: true,
+      includeFileName: true,
+      includeFileContent: true,
     }
   },
   computed: {
+    showExactSearch() {
+      return this.$store.getters.exactSearch
+    },
     searchScope() {
       const queryTagId = this.$route.query.tagId
       const isRootPath = this.$route.query.path === '/';
@@ -251,7 +308,7 @@ export default {
       return ''
     },
     hasSearchConditions() {
-      return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount || this.searchOverall
+      return this.fileType !== 'all' || this.timeRange || this.hasSizeRange || this.searchMount || this.searchOverall || this.exactSearch
     },
     emptyFilterOption() {
       return {
@@ -260,8 +317,12 @@ export default {
         modifyEnd: null,
         sizeMin: null,
         sizeMax: null,
-        searchMount: false,
-        searchOverall: false,
+        searchMount: null,
+        searchOverall: null,
+        exactSearch: null,
+        includeTagName: true,
+        includeFileName: true,
+        includeFileContent: true
       }
     },
     hasSizeRange () {
@@ -306,13 +367,18 @@ export default {
         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,
-        searchOverall: this.searchOverall
+        searchMount: this.searchMount ?  true : null,
+        searchOverall: this.searchOverall ?  true : null,
+        exactSearch: this.exactSearch ?  true : null,
+        includeTagName: this.includeTagName,
+        includeFileName: this.includeFileName,
+        includeFileContent: this.includeFileContent,
       }
 
       this.$emit('filter-change')
       this.$emit('update:filter-option-param', this.filterOption)
       this.$emit('update:has-search-conditions-param', this.hasSearchConditions)
+
       localStorage.setItem('searchFilterOption', JSON.stringify(this.filterOption))
     },
 
@@ -347,6 +413,10 @@ export default {
       // 设置搜索选项
       this.searchMount = !!filterOption.searchMount
       this.searchOverall = !!filterOption.searchOverall
+      this.exactSearch = !!filterOption.exactSearch
+      this.includeTagName = filterOption.includeTagName === undefined ? true : filterOption.includeTagName
+      this.includeFileName = filterOption.includeFileName === undefined ? true : filterOption.includeTagName
+      this.includeFileContent = filterOption.includeFileName === undefined ? true : filterOption.includeTagName
 
       // 更新过滤条件
       this.updateFilterOption()
@@ -406,6 +476,11 @@ export default {
       this.updateFilterOption()
     },
 
+    resetExactSearch() {
+      this.exactSearch = false
+      this.updateFilterOption()
+    },
+
     resetFileType() {
       this.handleFileType('all')
     },
@@ -475,11 +550,7 @@ export default {
       this.timeRange = [start, end]
       this.updateFilterOption()
     },
-
-    handleSearchMountChange() {
-      this.updateFilterOption()
-    },
-    handleSearchOverallChange() {
+    handleCommonChange() {
       this.updateFilterOption()
     }
   }
@@ -529,6 +600,33 @@ export default {
   }
 }
 
+.search-option-scope {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+
+  .search-option-scope-title {
+    flex: 1 1;
+    padding: 0 25px;
+    color: #303133;
+    font-weight: 500;
+  }
+
+  .content-scope {
+    flex: 1 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    .search-option-checkbox {
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+  }
+
+}
+
 .file-search-option {
 
   display: flex;
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index b93a6a6..f6b8f49 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -161,16 +161,15 @@
               ref="searchInput"
               :class="searchInputClass"
               v-show="showSearchButton"
-              :fetch-suggestions="queryRecentlySearchHistory"
+              :fetch-suggestions="fetchDynamicSuggestions"
               hide-loading
-              :debounce="300"
               :popper-append-to-body="false"
               :placeholder="`搜索 ${cmdKey} P`"
               v-model="searchFileName"
-              @keyup.enter.native="searchFileEnter(searchFileName)"
+              @keyup.enter.native="searchFileEnter"
               @focus="searchInputFocus"
               @blur="searchInputBlur"
-              @select="handleSelectSearchHistory"
+              @select="handleSelectSuggestion"
             >
               <template v-slot:suffix>
                 <div>
@@ -201,15 +200,62 @@
 
               <!-- 自定义提示项 -->
               <template #default="{ item }" class="autocomplete-suggestion-custom">
-                <div class="suggestion-item">
+
+                <!-- 固定操作项：当前路径搜索 -->
+                <div v-if="item.sugType === 'action_current_path_search'" class="suggestion-item action-item">
+                  <div class="suggestion-action-item-title">
+                    <i class="el-icon-search"></i>
+                    <div class="suggestion-action-item-text">
+                      <span class="suggestion-item-keyword">{{ item.keyword }}</span>
+                      <span class="suggestion-item-hint">当前路径 或按 Enter</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 固定操作项：全盘搜索 -->
+                <div v-else-if="item.sugType === 'action_global_search'" class="suggestion-item action-item">
+                  <div class="suggestion-action-item-title">
+                    <i class="el-icon-search"></i>
+                    <div class="suggestion-action-item-text">
+                      <span class="suggestion-item-keyword">{{ item.keyword }}</span>
+                      <span class="suggestion-item-hint">全盘搜索</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div v-else-if="item.sugType === 'clearAllHistory'" class="suggestion-item recently-item">
+                  <span class="suggestion-item-text">最近搜索</span>
+                  <div>
+                    <el-button
+                      round
+                      type="text"
+                      class="clear-search-history-btn"
+                      @click.stop.prevent="clearAllSearchHistory($event)"
+                    >清除所有</el-button>
+                  </div>
+                </div>
+
+                <!-- 历史记录项 -->
+                <div v-else-if="item.sugType === 'history'" class="suggestion-item history-item">
                   <div class="suggestion-item-title">
                     <i class="el-icon-time"></i>
                     <span class="suggestion-item-text">{{ item.keyword }}</span>
                   </div>
                   <div>
-                    <el-button round type="text" icon="el-icon-close" class="clear-search-history-btn" @click.native.prevent="clearSearchHistory(item, $event)"></el-button>
+                    <el-button
+                      round
+                      type="text"
+                      icon="el-icon-close"
+                      class="clear-search-history-btn"
+                      @click.stop.prevent="clearSearchHistoryForItem(item, $event)"
+                    ></el-button>
                   </div>
                 </div>
+
+                <!-- 默认显示 -->
+                <div v-else class="suggestion-item">
+                  <span class="suggestion-item-text">{{ item.value }}</span>
+                </div>
               </template>
 
             </el-autocomplete>
@@ -1178,7 +1224,9 @@ export default {
       debounceSearch: null,// 搜索防抖
       debounceGetFileList: null,// 获取文件列表防抖
       filterOption: {}, // 搜索选项
-      searchHistoryList: [],// 搜索历史列表
+      searchSuggestions: [],// 搜索历史列表
+      _isSuggestionHandledBySelect: false,
+      _originalSearchFileNameBeforeSelect: '',
       hasSearchFilterOption: false, // 是否有搜索选项
       fileUsername: '', // 一般用于挂载文件
       searchInputClass: 'search-input' // 搜索输入框样式
@@ -2959,8 +3007,12 @@ export default {
     getFileListEnter(onLoad) {
       this.debounceGetFileList(onLoad)
     },
-    searchFileEnter(key, onLoad) {
-      this.debounceSearch(key, onLoad)
+    searchFileEnter() {
+      if (this._isSuggestionHandledBySelect) {
+        return
+      }
+      this.debounceSearch(this.searchFileName)
+      this.$refs.searchInput.close()
     },
     searchFile(key, onLoad) {
       if (key) {
@@ -3021,6 +3073,10 @@ export default {
             searchMount: this.filterOption.searchMount,
             isMount:  this.queryCondition.isMount,
             searchOverall: this.filterOption.searchOverall,
+            exactSearch: this.filterOption.exactSearch,
+            includeTagName: this.filterOption.includeTagName,
+            includeFileName: this.filterOption.includeFileName,
+            includeFileContent: this.filterOption.includeFileContent,
           }).then(res => {
             this.loadData(res, onLoad)
             this.listModeSearch = true
@@ -4582,33 +4638,110 @@ export default {
     },
     showSearchOption() {
     },
-    queryRecentlySearchHistory(queryString, cb) {
-      if (this.searchFileName) {
-        cb([])
-        return
+    async fetchDynamicSuggestions(queryString, cb) {
+      this._originalSearchFileNameBeforeSelect =  queryString
+      this.searchSuggestions = []
+      const recentlySearch =
+        {
+          sugType: 'clearAllHistory',
+          keyword: '',
+          value: `__READONLY_DIVIDER_${Date.now()}__`,
+          id: 'recently_search_id'
+        }
+      if (!queryString) {
+        await this.pushSearchHistory(queryString, recentlySearch)
+      } else {
+        // 用户已输入关键字
+        // 1. 固定操作项
+        const fixedActionItems = [
+          {
+            sugType: 'action_current_path_search',
+            keyword: queryString,
+            value: queryString,
+            id: 'action_current_path_search_id'
+          },
+          {
+            sugType: 'action_global_search',
+            keyword: queryString,
+            value: queryString,
+            id: 'action_global_search_id'
+          },
+        ]
+        this.searchSuggestions.push(...fixedActionItems)
+        await this.pushSearchHistory(queryString, recentlySearch)
       }
-      api.getRecentlySearchHistory({keyword: queryString}).then(res => {
-        this.searchHistoryList = res.data || []
-        cb(this.searchHistoryList)
-      }).catch(error => {
-        console.error("Error fetching search history:", error)
-        this.searchHistoryList = []
-        cb([])
+      cb(this.searchSuggestions)
+    },
+    async pushSearchHistory(queryString, recentlySearch) {
+      const historyItems = await this.queryRecentlySearchHistory(queryString)
+      if (historyItems.length > 0) {
+        this.searchSuggestions.push(recentlySearch)
+      }
+      this.searchSuggestions.push(...historyItems)
+    },
+    async queryRecentlySearchHistory(queryString = '') {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          api.getRecentlySearchHistory({keyword: queryString}).then(res => {
+            const filteredHistory = res.data.map(item => ({
+              ...item,
+              value: item.keyword,
+              sugType: 'history'
+            }))
+            resolve(filteredHistory)
+          }).catch(error => {
+            console.error("Error fetching search history:", error)
+          })
+        }, 50)
       });
     },
-    handleSelectSearchHistory(item) {
-      this.searchFileName = item.keyword
-      this.filterOption = item
+    handleSelectSuggestion(item) {
+      this._isSuggestionHandledBySelect = true
+      if (item.id === "recently_search_id") {
+        this.$nextTick(() => {
+          if (this.searchFileName !== this._originalSearchFileNameBeforeSelect) {
+            this.searchFileName = this._originalSearchFileNameBeforeSelect
+          }
+          this._isSuggestionHandledBySelect = false
+        })
+        return
+      }
+      if ( item.sugType === 'history') {
+        this.searchFileName = item.keyword
+      }
+      if ( item.sugType === 'action_global_search') {
+        item.searchOverall = true
+      }
+       if ( item.sugType === 'action_current_path_search') {
+         item.searchOverall = false
+       }
       this.debounceSearch(this.searchFileName, false)
       this.$refs.searchOption.setFilterOption(item)
+      this.$nextTick(() => {
+        this._isSuggestionHandledBySelect = false
+      })
     },
-    clearSearchHistory(itemToDelete, event) {
+    clearSearchHistoryForItem(itemToDelete, event) {
       event.stopPropagation();
       event.preventDefault();
       const idToDelete = itemToDelete.id
       api.removeSearchHistory({id: idToDelete}).then(() => {
-        const index = this.searchHistoryList.findIndex(item => item.id === idToDelete)
-        this.searchHistoryList.splice(index, 1)
+        const index = this.searchSuggestions.findIndex(item => item.id === idToDelete)
+        this.searchSuggestions.splice(index, 1)
+      })
+    },
+    clearAllSearchHistory(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.$confirm('确定要清除所有搜索记录吗', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        api.removeAllSearchHistory({userId: this.$store.getters.userId}).then(() => {
+          this.searchSuggestions.splice(2, this.searchSuggestions.length - 2)
+        })
+      }).catch(() => {
       })
     },
     checkPreviewVisible() {
@@ -4879,7 +5012,7 @@ export default {
 }
 
 .search-input {
-  width: 230px;
+  width: 250px;
   transition: width 0.3s ease-in-out;
   >>> .el-input--suffix .el-input__inner {
     padding-right: 60px;
@@ -4887,7 +5020,7 @@ export default {
 }
 
 .search-input-focus {
-  width: 230px;
+  width: 250px;
 }
 
 .search-close-btn {
@@ -4915,37 +5048,80 @@ export default {
   }
 }
 
->>> .el-autocomplete-suggestion li {
-  padding: 0 5px 0 15px;
-}
+>>> .el-autocomplete-suggestion {
+  margin-top: 0 !important;
 
-.suggestion-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .suggestion-item-title {
-    display: flex;
-    gap: 10px;
-    justify-content: flex-start;
-    flex-direction: row;
-    align-items: center;
-    .suggestion-item-text {
-      width: 152px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .clear-search-history-btn {
-    padding: 8px;
+  .popper__arrow {
     display: none;
   }
 
-  &:hover {
+
+  li {
+    padding: 0 5px 0 15px;
+  }
+
+  .suggestion-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .suggestion-item-title {
+      display: flex;
+      gap: 15px;
+      justify-content: flex-start;
+      flex-direction: row;
+      align-items: center;
+      .suggestion-item-text {
+        width: 168px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
     .clear-search-history-btn {
-      display: block;
+      padding: 8px;
+      display: none;
+    }
+
+    &:hover {
+      .clear-search-history-btn {
+        display: block;
+      }
+    }
+  }
+
+  .suggestion-item.action-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .suggestion-action-item-title {
+      display: flex;
+      gap: 15px;
+      justify-content: flex-start;
+      flex-direction: row;
+      align-items: center;
+      height: 40px;
+      line-height: 40px;
+
+      .suggestion-action-item-text {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .suggestion-item-keyword {
+        line-height:  normal;
+        color: #303133;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+
+      .suggestion-item-hint {
+        color: #c8c9cc;
+        line-height: normal;
+      }
+
     }
   }
 }
diff --git a/src/components/preview/FileDetails.vue b/src/components/preview/FileDetails.vue
index 118f24d..3214841 100644
--- a/src/components/preview/FileDetails.vue
+++ b/src/components/preview/FileDetails.vue
@@ -54,11 +54,11 @@
           <el-form-item label="名称:">
             <span>{{ file.name }}</span>
           </el-form-item>
-<!--          <el-form-item label="类型:">-->
-<!--          <span>{{-->
-<!--              file.isFolder ? '文件夹' : file.contentType-->
-<!--            }}</span>-->
-<!--          </el-form-item>-->
+          <el-form-item label="类型:">
+          <span>{{
+              file.isFolder ? '文件夹' : file.contentType
+            }}</span>
+          </el-form-item>
           <div v-if="file.music">
             <el-form-item label="🎵 歌手:">
               <span>{{ file.music.singer }}</span>
diff --git a/src/store/getters.js b/src/store/getters.js
index 621625c..877843c 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -13,6 +13,7 @@ const getters = {
   userId: state => state.user.userId,
   userInfo: state => state.user.userInfo,
   menuList: state => state.user.menuList,
-  fileClipboard: state => state.fileClipboard
+  fileClipboard: state => state.fileClipboard,
+  exactSearch: state => state.user.exactSearch
 }
 export default getters
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2cb056d..0d33ebb 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -34,6 +34,7 @@ const getDefaultState = () => {
     menuList: [],
     netdiskName: store ? store.netdiskName : '',
     netdiskLogo: store ? store.netdiskLogo : '',
+    exactSearch: store ? store.exactSearch : false,
     newVersion: store ? store.newVersion : '',
     iframePreviewConfig: {}
   }
@@ -78,6 +79,9 @@ const mutations = {
   SET_NETDISK_LOGO:(state,netdiskLogo) => {
     state.netdiskLogo = netdiskLogo;
   },
+  SET_EXACT_SEARCH:(state,exactSearch) => {
+    state.exactSearch = exactSearch;
+  },
   SET_NEW_VERSION:(state,newVersion) => {
     state.newVersion = newVersion;
   },
@@ -156,7 +160,7 @@ const actions = {
           // reject('Verification failed, please Login again.')
         }
 
-        const { id, username, showName, avatar, netdiskName, netdiskLogo, newVersion, iframe} = data
+        const { id, username, showName, avatar, netdiskName, exactSearch, netdiskLogo, newVersion, iframe} = data
 
         commit('SET_NAME', username)
         commit('SET_SHOW_NAME', showName)
@@ -165,6 +169,7 @@ const actions = {
         commit('SET_USER_INFO', data)
         commit('SET_NETDISK_NAME', netdiskName)
         commit('SET_NETDISK_LOGO', netdiskLogo)
+        commit('SET_EXACT_SEARCH', exactSearch)
         if (iframe) {
           commit('SET_IFRAME_PREVIEW', JSON.parse(iframe))
         } else {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2a5beb3..de614c5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -29,6 +29,9 @@ body {
 
   .el-message-box {
     border-radius: $popperBorderRadius;
+    .el-button {
+      border-radius: 20px;
+    }
   }
 
   .el-message, .el-notification, .el-popover, .el-tooltip__popper, .el-dropdown-menu, .el-select-dropdown, .el-picker-panel, .el-picker-panel__body, .el-picker-panel__sidebar  {