feat: 文件详情页新增操作历史记录

src/api/log.js

@@ -1,5 +1,4 @@
 import request from '@/utils/request'
-const qs = require('qs')
 
 export default {
   logList(params) {
@@ -9,5 +8,12 @@ export default {
       params
     })
   },
+  getFileOperationHistory(params) {
+    return request({
+      url: '/log/getFileOperationHistory',
+      method: 'get',
+      params
+    })
+  },
 }
 

src/components/ShowFile/ShowFile.vue

@@ -848,7 +848,7 @@
         <div class="el-message-box__container delete-attention el-alert--warning is-light">
           <div class="el-message-box__status el-icon-warning"></div>
           <div class="el-message-box__message">
-            <p>所选目录已存在下列文件</p>
+            <p>同名文件如何处理</p>
           </div>
         </div>
         <dialog-file-list class="dialog-file-list" :file-list="existsFileList" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"></dialog-file-list>
@@ -856,7 +856,7 @@
       <span slot="footer" class="dialog-footer">
         <el-button round size="small" @click="copyOrMoveConfirmVisible = false">取 消</el-button>
         <el-button round type="warning" size="small" @click="copyOrMoveApi(copyOrMoveParams.operating, copyOrMoveParams.froms, copyOrMoveParams.to, true, copyOrMoveParams.targetPath)">覆 盖</el-button>
-        <el-button round type="primary" size="small" @click="copyOrMoveApi(copyOrMoveParams.operating, copyOrMoveParams.froms, copyOrMoveParams.to, false, copyOrMoveParams.targetPath)">不覆盖</el-button>
+        <el-button round type="primary" size="small" @click="copyOrMoveApi(copyOrMoveParams.operating, copyOrMoveParams.froms, copyOrMoveParams.to, false, copyOrMoveParams.targetPath)">跳 过</el-button>
       </span>
     </el-dialog>
 

src/components/Timeline/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="timeline-container">
+    <el-scrollbar wrap-class="scrollbar-wrapper" @scroll="handleScroll">
+      <div class="timeline-container-scrollbar">
+        <div class="scroll-decoration" v-if="scrollDecorationTop"></div>
+        <div v-for="(item, index) in dataList" :key="index" class="timeline-item">
+          <div class="timeline-icon">
+            <el-avatar :src="imageUrl + item.avatar" icon="el-icon-user-solid"></el-avatar>
+          </div>
+          <div class="timeline-line" v-if="index !== dataList.length - 1"></div>
+          <div class="timeline-content">
+            <div class="timeline-date">{{ item.createTime }}</div>
+            <div class="timeline-action">
+              <span v-if="item.showName" class="timeline-action-icon">{{ item.showName }}</span>
+              <el-tooltip v-if="isTooltip(item.operationFun)" class="item" effect="dark" :content="item.operationFun" placement="bottom">
+                <span class="timeline-action-text">{{ splitOperationStr(item.operationFun) }}</span>
+              </el-tooltip>
+              <span v-else class="timeline-action-text">{{ item.operationFun }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import logApi from '@/api/log'
+import IconFile from '@/components/Icon/IconFile.vue'
+
+export default {
+  name: 'TimelineComponent',
+  components: { IconFile },
+  props: {
+    showOperationHistory: {
+      type: Boolean,
+      default: false
+    },
+    fileId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      scrollDecorationTop: false,
+      imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?id=`,
+      loading: false,
+      dataList: [],
+      pageIndex: 1,
+      pagination: {
+        pageIndex: 1,
+        pageSize: 10,
+        pageTotal: 0
+      },
+    };
+  },
+  computed: {
+  },
+  watch: {
+    showOperationHistory(newValue) {
+      if (newValue) {
+        this.loading = true
+        logApi.getFileOperationHistory({
+          page: this.pagination.pageIndex,
+          pageSize: this.pagination.pageSize,
+          fileId: this.fileId
+        }).then(res => {
+          this.dataList = res.data
+          this.pagination.pageTotal = res.count
+          this.loading = false
+        })
+      }
+    }
+  },
+  mounted() {
+    const scrollbarWrapper = document.querySelector('.file-operation-history .scrollbar-wrapper')
+    scrollbarWrapper.onscroll = e => {
+      this.handleScroll(e)
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      // this.scrollDecorationTop = e.target.scrollTop > 0;
+    },
+    isTooltip(str) {
+      return !!(str && str.includes(','));
+    },
+    splitOperationStr(str) {
+       return str.split(',')[0]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.timeline-container {
+
+  .timeline-container-scrollbar {
+    height: 50vh;
+    min-height: 450px;
+    padding: 0 20px;
+
+    .scroll-decoration {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 6px;
+      box-shadow: #dddddd 0 6px 6px -6px inset;
+    }
+
+  }
+}
+
+.timeline-item {
+  position: relative;
+  display: flex;
+  padding: 12px 0;
+}
+
+.timeline-icon {
+  position: relative;
+  z-index: 2;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+  overflow: hidden;
+}
+
+.timeline-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.timeline-line {
+  position: absolute;
+  left: 16px;
+  top: 32px;
+  bottom: 0;
+  height: 100%;
+  width: 1px;
+  background-color: #e1e4e8;
+  z-index: 1;
+}
+
+.timeline-content {
+  margin-left: 16px;
+  flex: 1;
+}
+
+.timeline-date {
+  font-size: 14px;
+  color: #24292e;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.timeline-action {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #586069;
+}
+
+.timeline-action-icon {
+  margin-right: 4px;
+  color: #586069;
+}
+</style>

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>
@@ -87,7 +87,16 @@
             <span>{{ file.uploadDate }}</span>
           </el-form-item>
           <el-form-item label="修改时间:">
-            <span>{{ file.updateDate }}</span>
+            <el-popover
+              placement="right"
+              popper-class="file-operation-history"
+              width="400"
+              trigger="click"
+            @show="showOperationHistory"
+            @hide="hideOperationHistory">
+              <timeline-component :show-operation-history="operationHistory" :file-id="file.id"></timeline-component>
+              <span title="查看文件操作历史" slot="reference" class="file-operation-history-btn">{{ file.updateDate }}</span>
+            </el-popover>
           </el-form-item>
           <el-form-item v-if="file.exif" label="">
             <span style="white-space: break-spaces;">{{ formatExif(file.exif) }}</span>
@@ -99,12 +108,14 @@
         <el-button round v-if="allowOpenFile" type="primary" size="small" @click="openFile" class="file-detail-btn open-file">打开文件</el-button>
         <el-button round v-if="onlyOfficeSupportedFormats(file)" type="primary" size="small" @click="openOnlyOffice" class="file-detail-btn open-file">使用OnlyOffice打开</el-button>
       </el-form>
+
     </el-dialog>
   </div>
 </template>
 
 <script>
 import fileApi from '@/api/file-api'
+import TimelineComponent from '@/components/Timeline'
 import { onlyOfficeSupportedFormats } from '@/utils/file-type'
 
 // 引入VueOfficeDocx 组件
@@ -127,6 +138,7 @@ import settingApi from "@/api/setting-api";
 export default {
   name: 'FileDetails',
   components: {
+    TimelineComponent,
     IconFile,
     VueOfficeDocx,
     VueOfficeExcel
@@ -167,7 +179,8 @@ export default {
         excel: window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
       },
       filepath: '',
-      pathUrl: ''
+      pathUrl: '',
+      operationHistory: false
     }
   },
   mounted() {
@@ -230,6 +243,12 @@ export default {
     openFile() {
       this.$emit('openFile', this.file)
     },
+    showOperationHistory() {
+      this.operationHistory = true
+    },
+    hideOperationHistory() {
+      this.operationHistory = false
+    },
     openOnlyOffice() {
       this.$emit('openOnlyOffice', this.file)
     },
@@ -502,4 +521,17 @@ $bg-blur: rgba(255, 255, 255, 0.75);
     background: rgba(64,158,255,0.32);
   }
 }
+
+.file-operation-history-btn {
+  cursor: pointer;
+  color: $primary;
+  text-decoration: none;
+  border-radius: 6px;
+  padding: 2px 4px;
+  transition: background 0.2s;
+  &:hover {
+    background: rgba(64,158,255,0.12);
+    color: #1a73e8;
+  }
+}
 </style>

src/styles/index.scss

@@ -43,6 +43,15 @@ body {
   .v-contextmenu {
     border-radius: 8px;
   }
+
+  .file-operation-history {
+    padding: 0;
+    border-radius: 16px;
+    width: 300px !important;
+    .el-scrollbar__wrap {
+      border-radius: 16px;
+    }
+  }
 }
 
 .time-filter-dropdown {