feat: 为单个目录重建索引

src/api/setting-api.js

@@ -1,13 +1,20 @@
 import request from '@/utils/request'
 
 export default {
-  sync(params) {
+  syncUser(params) {
     return request({
       url: '/user/setting/sync',
       method: 'get',
       params
     })
   },
+  syncCloud(params) {
+    return request({
+      url: '/cloud/setting/sync',
+      method: 'get',
+      params
+    })
+  },
   isSync(params) {
     return request({
       url: '/user/setting/isSync',

src/components/ShowFile/ShowFile.vue

@@ -660,70 +660,8 @@
       :file="officePreviewRow"
       :status.sync="officePreviewVisible"
     ></office-preview>
-    <!--文件详细信息-->
+
-    <el-drawer :title="rowContextData.name" :visible.sync="drawer">
+    <file-details :audio-cover-url="audioCoverUrl" :image-url="imageUrl" :row-context-data="rowContextData" :visible.sync="drawer"></file-details>
-      <div class="drawer-icon">
-        <icon-file
-          class="drawer-icon-font"
-          :grid="true"
-          :details="true"
-          :item="rowContextData"
-          :image-url="imageUrl"
-          :audio-cover-url="audioCoverUrl"
-        ></icon-file>
-      </div>
-      <el-form class="details-form">
-        <el-form-item label="名称:">
-          <span>{{ rowContextData.name }}</span>
-        </el-form-item>
-        <el-form-item label="类型:" class="details-name">
-          <span>{{
-            rowContextData.isFolder ? '文件夹' : rowContextData.contentType
-          }}</span>
-        </el-form-item>
-        <div v-if="rowContextData.music">
-          <el-form-item label="🎵 歌手:">
-            <span>{{ rowContextData.music.singer }}</span>
-          </el-form-item>
-          <el-form-item label="🎵 专辑:">
-            <span>{{ '《' + rowContextData.music.album + '》' }}</span>
-          </el-form-item>
-          <el-form-item label="🎵 歌名:">
-            <span>{{ '《' + rowContextData.music.songName + '》' }}</span>
-          </el-form-item>
-        </div>
-        <el-form-item
-          v-show="rowContextData.w && rowContextData.h"
-          label="尺寸:"
-          class="details-resolution"
-        >
-          <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
-        </el-form-item>
-        <el-form-item label="大小:">
-          <span> {{ formatSize(rowContextData.size) }}</span>
-        </el-form-item>
-        <el-form-item label="位置:" class="details-position">
-          <a
-            :href="
-              '/?path=' +
-                rowContextData.path +
-                '&highlight=' +
-                rowContextData.name
-            "
-            >{{ rowContextData.path }}</a
-          >
-        </el-form-item>
-        <el-form-item label="创建时间:">
-          <span>{{ rowContextData.uploadDate }}</span>
-        </el-form-item>
-        <el-form-item label="修改时间:">
-          <span>{{ rowContextData.updateDate }}</span>
-        </el-form-item>
-        <el-form-item label="Exif:">
-          <span style="white-space: break-spaces;">{{ formatExif(rowContextData.exif) }}</span>
-        </el-form-item>
-      </el-form>
-    </el-drawer>
 
     <el-dialog
       class="open-file-dialog"
@@ -900,10 +838,12 @@ import ShareDialog from '@/components/ShareDialog/index.vue'
 import { getUsername } from '@/api/user'
 import Clipboard from 'clipboard'
 import TagDialog from '@/components/TagDialog/index.vue'
+import FileDetails from "@/components/preview/FileDetails.vue";
 
 export default {
   name: 'ShowFile',
   components: {
+    FileDetails,
     TagDialog,
     ShareDialog,
     OfficePreview,
@@ -4406,9 +4346,6 @@ export default {
 <style lang="scss" scoped>
 @import 'src/styles/index';
 @import 'src/styles/home-index';
-/*overflow: hidden;*/
-/*white-space: nowrap;*/
-/*text-overflow: ellipsis;*/
 .dashboard-container {
   min-width: 498px;
   height: 100%;
@@ -4422,70 +4359,6 @@ export default {
   outline: 0;
 }
 
->>> .el-drawer__header {
-  color: #000000;
-
-  span {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-.details-form {
-  margin: 20px 10px 0 20px;
-
-  >>> .el-form-item__content {
-    white-space: normal;
-    word-break: break-all;
-    word-wrap: break-word;
-    line-height: 25px;
-  }
-
-  >>> .el-form-item__label {
-    line-height: 25px;
-  }
-
-  >>> .el-form-item {
-    margin-bottom: 0;
-  }
-
-  >>> .details-position {
-    margin: 10px 0;
-
-    .el-form-item__content {
-      line-height: 20px;
-      color: #84a0c3;
-    }
-
-    .el-form-item__label {
-      line-height: 20px;
-    }
-  }
-
-  a:hover {
-    color: #409eff;
-  }
-}
-
-.drawer-icon {
-  text-align: center;
-  position: relative;
-  >>> .icon-favorite {
-    display: none;
-  }
-  >>> .icon-share {
-    display: none;
-  }
-  >>> .icon-tag {
-    display: none;
-  }
-}
-
-.drawer-icon-font >>> .svg-icon {
-  font-size: 8rem;
-}
-
 .list-item {
   height: 50px;
 }

src/components/preview/FileDetails.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <!--文件详细信息-->
+    <el-drawer :title="rowContextData.name" :visible.sync="visible">
+      <div class="drawer-icon">
+        <icon-file
+          class="drawer-icon-font"
+          :grid="true"
+          :details="true"
+          :item="rowContextData"
+          :image-url="imageUrl"
+          :audio-cover-url="audioCoverUrl"
+        ></icon-file>
+      </div>
+      <el-form class="details-form">
+        <el-form-item label="重建索引:" class="details-scan">
+          <el-button type="primary" size="mini" :loading="syncLoading" @click="scanDirectory(rowContextData)" ><i class="el-icon-refresh"></i></el-button>
+          <span v-show="syncPercent < 100">正在同步文件基本信息: {{ syncPercent }}%</span>
+          <span v-show="indexingPercent > 0 && indexingPercent < 100">正在为文件内容创建索引: </span><span v-show="indexingPercent > 0 && indexingPercent < 100">{{ indexingPercent }}%</span>
+        </el-form-item>
+        <el-form-item label="名称:">
+          <span>{{ rowContextData.name }}</span>
+        </el-form-item>
+        <el-form-item label="类型:" class="details-name">
+          <span>{{
+              rowContextData.isFolder ? '文件夹' : rowContextData.contentType
+            }}</span>
+        </el-form-item>
+        <div v-if="rowContextData.music">
+          <el-form-item label="🎵 歌手:">
+            <span>{{ rowContextData.music.singer }}</span>
+          </el-form-item>
+          <el-form-item label="🎵 专辑:">
+            <span>{{ '《' + rowContextData.music.album + '》' }}</span>
+          </el-form-item>
+          <el-form-item label="🎵 歌名:">
+            <span>{{ '《' + rowContextData.music.songName + '》' }}</span>
+          </el-form-item>
+        </div>
+        <el-form-item
+          v-show="rowContextData.w && rowContextData.h"
+          label="尺寸:"
+          class="details-resolution"
+        >
+          <span>{{ rowContextData.w + ' x ' + rowContextData.h }}</span>
+        </el-form-item>
+        <el-form-item label="大小:">
+          <span> {{ formatSize(rowContextData.size) }}</span>
+        </el-form-item>
+        <el-form-item label="位置:" class="details-position">
+          <a :href="'/?path=' + rowContextData.path + '&highlight=' + rowContextData.name">{{ rowContextData.path }}</a>
+        </el-form-item>
+        <el-form-item label="创建时间:">
+          <span>{{ rowContextData.uploadDate }}</span>
+        </el-form-item>
+        <el-form-item label="修改时间:">
+          <span>{{ rowContextData.updateDate }}</span>
+        </el-form-item>
+        <el-form-item v-if="rowContextData.exif" label="Exif:">
+          <span style="white-space: break-spaces;">{{ formatExif(rowContextData.exif) }}</span>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { formatSize } from '@/utils/number'
+import IconFile from '@/components/Icon/IconFile'
+import {mapState} from "vuex";
+import {formatExif} from "@/utils/image";
+import settingApi from "@/api/setting-api";
+
+export default {
+  name: 'FileDetails',
+  components: {
+    IconFile
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    rowContextData: {
+      type: Object,
+      required: true,
+    },
+    imageUrl: {
+      type: String,
+      required: true,
+    },
+    audioCoverUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      syncLoading: false,
+      clickSync: false,
+      indexingPercent: 100,
+      syncPercent: 100,
+    }
+  },
+  mounted() {
+  },
+  computed: {
+    ...mapState(['message']),
+  },
+  watch: {
+    message(msg) {
+      if (msg.event === 'msg/synced') {
+        this.updateSyncStatus(msg.data.body)
+      }
+    },
+    visible(val) {
+      this.$emit('update:visible', val)
+      if (val) {
+        this.getIsSync()
+      }
+    }
+  },
+  methods: {
+    formatSize(size) {
+      return formatSize(size)
+    },
+    formatExif(exifInfo) {
+      return formatExif(exifInfo)
+    },
+    getIsSync() {
+      settingApi.isSync({username: this.$store.state.user.name}).then((res) => {
+        this.updateSyncStatus(res.data)
+      })
+    },
+    updateSyncStatus(dataPercent) {
+      if (this.clickSync) {
+        return
+      }
+      const {syncPercent, indexingPercent} = dataPercent
+      if (syncPercent) {
+        this.syncPercent = syncPercent
+      } else {
+        this.syncPercent = 0
+      }
+      if (indexingPercent) {
+        this.indexingPercent = indexingPercent
+      } else {
+        this.indexingPercent = 0
+      }
+      this.syncLoading = !((this.syncPercent === 100 && this.indexingPercent === 100) || (this.syncPercent === 0 && this.indexingPercent === 0));
+    },
+    scanDirectory(file) {
+      this.$confirm('是否开始扫描? ', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.syncLoading = true
+        this.syncPercent = 0
+        this.clickSync = true
+        settingApi.syncUser({username: this.$store.state.user.name, path: decodeURIComponent(file.path + file.name)}).then(() => {
+          this.clickSync = false
+        }).catch(() => {
+          this.clickSync = false
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+>>> .el-drawer__header {
+  color: #000000;
+
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.details-form {
+  margin: 20px 10px 0 20px;
+
+  >>> .el-form-item__content {
+    white-space: normal;
+    word-break: break-all;
+    word-wrap: break-word;
+    line-height: 25px;
+  }
+
+  >>> .el-form-item__label {
+    line-height: 25px;
+  }
+
+  >>> .el-form-item {
+    margin-bottom: 0;
+  }
+
+  >>> .details-scan {
+    .el-button--mini, .el-button--mini.is-round {
+      padding: 5px 15px;
+    }
+  }
+
+  >>> .details-position {
+    margin: 10px 0;
+
+    .el-form-item__content {
+      line-height: 20px;
+      color: #84a0c3;
+    }
+
+    .el-form-item__label {
+      line-height: 20px;
+    }
+  }
+
+  a:hover {
+    color: #409eff;
+  }
+}
+
+.drawer-icon {
+  text-align: center;
+  position: relative;
+  >>> .icon-favorite {
+    display: none;
+  }
+  >>> .icon-share {
+    display: none;
+  }
+  >>> .icon-tag {
+    display: none;
+  }
+}
+
+.drawer-icon-font >>> .svg-icon {
+  font-size: 8rem;
+}
+</style>

src/sse/SSEClient.js

@@ -55,8 +55,6 @@ function onMessage(msg) {
   const url = msg.url
   if (url === 'synced') {
     store.dispatch('updateMessage', {event: 'msg/synced', data: msg})
-  } else if (url === 'indexing') {
-    store.dispatch('updateMessage', {event: 'msg/indexing', data: msg})
   } else if (url === 'uploaderChunkSize') {
     store.dispatch('updateMessage', {event: 'uploaderChunkSize', data: msg.body})
   } else {

src/views/setting/cloudManager.vue

@@ -44,11 +44,9 @@
           <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
           </span>
               <div class="config-itme-label">重建索引：
-                <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i
+                <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-refresh"></i></el-button>
-                  class="el-icon-refresh"></i>
-                </el-button>
                 <span v-show="syncPercent < 100">正在同步文件基本信息: {{ syncPercent }}%</span>
-                <span v-show="indexingPercent < 100">正在为文件内容创建索引: {{ indexingPercent }}%</span>
+                <span v-show="indexingPercent > 0 && indexingPercent < 100">正在为文件内容创建索引: </span><span v-show="indexingPercent > 0 && indexingPercent < 100">{{ indexingPercent }}%</span>
               </div>
               <span class="instruction">重建索引分为两步: 1.同步文件基本信息, 2.为文件内容创建索引</span>
               <div class="config-itme-label">重置角色、菜单：
@@ -149,6 +147,7 @@ export default {
       uploadUrl: `${process.env.VUE_APP_BASE_API}/user/setting/upload_logo?jmal-token=${this.$store.state.user.token}&name=${this.$store.state.user.name}`,
       title: '网盘管理',
       syncLoading: false,
+      clickSync: false,
       indexingPercent: 100,
       syncPercent: 100,
       resetLoading: false,
@@ -225,13 +224,7 @@ export default {
   watch: {
     message(msg) {
       if (msg.event === 'msg/synced') {
-        this.syncPercent = msg.data.body
+        this.updateSyncStatus(msg.data.body)
-      }
-      if (msg.event === 'msg/indexing') {
-        this.indexingPercent = msg.data.body
-        if (this.indexingPercent >= 100) {
-          this.syncLoading = false
-        }
       }
     }
   },
@@ -355,22 +348,36 @@ export default {
     },
     getIsSync() {
       settingApi.isSync({username: this.$store.state.user.name}).then((res) => {
-        this.syncLoading = true;
+        this.updateSyncStatus(res.data)
-        this.syncPercent = res.data.syncPercent
-        this.indexingPercent = res.data.indexingPercent
-        this.syncLoading = !(this.syncPercent === 100 && this.indexingPercent === 100);
       })
     },
+    updateSyncStatus(dataPercent) {
+      const {syncPercent, indexingPercent} = dataPercent
+      if (syncPercent) {
+        this.syncPercent = syncPercent
+      } else {
+        this.syncPercent = 0
+      }
+      if (indexingPercent) {
+        this.indexingPercent = indexingPercent
+      } else {
+        this.indexingPercent = 0
+      }
+      this.syncLoading = !((this.syncPercent === 100 && this.indexingPercent === 100) || (this.syncPercent === 0 && this.indexingPercent === 0));
+    },
     sync() {
-      this.$confirm('是否开始同步? ', '提示', {
+      this.$confirm('是否开始扫描? ', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.syncLoading = true
         this.syncPercent = 0
-        settingApi.sync({username: this.$store.state.user.name}).then(() => {
+        this.clickSync = true
-          this.$message.success("开始同步...")
+        settingApi.syncCloud({username: this.$store.state.user.name}).then(() => {
+          this.clickSync = false
+        }).catch(() => {
+          this.clickSync = false
         })
       })
     },