style: 优化文件操作历史记录样式

package.json

@@ -54,7 +54,7 @@
     "tippy.js": "^6.3.7",
     "v-contextmenu": "^2.9.0",
     "v-viewer": "^1.5.1",
-    "vditor": "3.10.4",
+    "vditor": "3.11.0",
     "vue-aplayer": "^1.6.1",
     "vue-color": "^2.8.1",
     "vue-demi": "^0.14.6",

src/components/ShowFile/ShowFile.vue

@@ -1488,6 +1488,7 @@ export default {
       return {
         content: contentHTML,
         // trigger: 'click',
+        delay: 0,
         placement: 'left',
         allowHTML: true,
         theme: 'light',

src/components/Timeline/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="timeline-container">
-    <el-scrollbar wrap-class="scrollbar-wrapper" @scroll="handleScroll">
+    <div class="scrollbar-wrapper" @scroll="handleScroll">
       <div class="timeline-container-scrollbar">
-        <div class="scroll-decoration" v-if="scrollDecorationTop"></div>
+        <div v-if="loading && dataList.length === 0" class="timeline-loading">加载中...</div>
+        <div v-if="!loading && dataList.length === 0 && finished" class="timeline-empty">暂无操作记录</div>
         <div v-for="(item, index) in dataList" :key="index" class="timeline-item">
           <div class="timeline-icon">
             <el-avatar :src="imageUrl + item.avatar" size="medium" icon="el-icon-user-solid"></el-avatar>
@@ -19,18 +20,19 @@
             </div>
           </div>
         </div>
+        <div v-if="loading && dataList.length > 0" class="timeline-loading-more">加载中...</div>
       </div>
-    </el-scrollbar>
+    </div>
   </div>
 </template>
 
 <script>
 import logApi from '@/api/log'
-import IconFile from '@/components/Icon/IconFile.vue'
+// import IconFile from '@/components/Icon/IconFile.vue' // IconFile 未在模板中使用，可以移除
 
 export default {
   name: 'TimelineComponent',
-  components: { IconFile },
+  // components: { IconFile }, // 移除未使用的组件
   props: {
     showOperationHistory: {
       type: Boolean,
@@ -43,51 +45,127 @@ export default {
   },
   data() {
     return {
-      scrollDecorationTop: false,
+      // scrollDecorationTop: false, // 这个可能不再需要或需要重新实现
       imageUrl: `${process.env.VUE_APP_BASE_API}/view/thumbnail?id=`,
       loading: false,
       dataList: [],
-      pageIndex: 1,
+      pageLoadCompleteList: {}, // 使用对象可能更安全，避免稀疏数组问题
+      finished: false,
+      // pageIndex: 1, // pageIndex 由 pagination 管理
       pagination: {
         pageIndex: 1,
         pageSize: 10,
         pageTotal: 0
       },
+      isInitialLoadComplete: false // 添加一个标志，判断首次加载是否完成
     };
   },
-  computed: {
-  },
   watch: {
     showOperationHistory(newValue) {
-      if (newValue) {
+      if (newValue && !this.isInitialLoadComplete) { // 仅在需要显示且未完成初始加载时加载
-        this.loading = true
+        this.resetAndLoadHistory(); // 重置状态并加载
-        logApi.getFileOperationHistory({
+      } else if (!newValue) {
-          page: this.pagination.pageIndex,
+        // 可选：当 popover 关闭时重置状态，以便下次打开时重新加载
-          pageSize: this.pagination.pageSize,
+        this.resetState();
-          fileId: this.fileId
+      }
-        }).then(res => {
+    },
-          this.dataList = res.data
+    // 监听 fileId 变化，如果变化了也需要重置并重新加载
-          this.pagination.pageTotal = res.count
+    fileId(newId, oldId) {
-          this.loading = false
+      if (newId && newId !== oldId && this.showOperationHistory) {
-        })
+        this.resetAndLoadHistory();
       }
     }
   },
   mounted() {
-    const scrollbarWrapper = document.querySelector('.file-operation-history .scrollbar-wrapper')
-    scrollbarWrapper.onscroll = e => {
-      this.handleScroll(e)
-    }
   },
   methods: {
+    resetState() {
+      this.dataList = [];
+      this.pagination.pageIndex = 1;
+      this.finished = false;
+      this.loading = false;
+      this.pageLoadCompleteList = {};
+      this.isInitialLoadComplete = false;
+      // 重置滚动条位置（如果需要）
+      const scrollWrapper = this.$el.querySelector('.scrollbar-wrapper');
+      if (scrollWrapper) {
+        scrollWrapper.scrollTop = 0;
+      }
+    },
+    resetAndLoadHistory() {
+      this.resetState();
+      this.loadHistory();
+    },
+    loadHistory(onLoad = false) {
+      // 防止重复加载
+      if (this.loading || (onLoad && this.finished)) {
+        return;
+      }
+
+      const currentPageIndex = onLoad ? this.pagination.pageIndex + 1 : 1;
+
+      // 如果是加载下一页，但上一页尚未完成，则阻止
+      if (onLoad && !this.pageLoadCompleteList[this.pagination.pageIndex]) {
+        console.warn('Previous page load not complete, skipping load more.');
+        return;
+      }
+
+      this.loading = true;
+      this.pageLoadCompleteList[currentPageIndex] = false; // 标记当前页开始加载
+
+      logApi.getFileOperationHistory({
+        page: currentPageIndex,
+        pageSize: this.pagination.pageSize,
+        fileId: this.fileId
+      }).then(res => {
+        // 更新页码要在请求成功后
+        this.pagination.pageIndex = currentPageIndex;
+
+        res.data.forEach(item => {
+          this.dataList.push(item);
+        });
+
+        this.pagination.pageTotal = res.count;
+        this.finished = this.dataList.length >= res.count;
+
+        // *** 关键：发出事件 ***
+        // 确保只在首次加载成功后触发
+        if (currentPageIndex === 1 && !this.isInitialLoadComplete) {
+          this.isInitialLoadComplete = true; // 标记首次加载完成
+          // 使用 $nextTick 确保 DOM 更新后再通知父组件
+          this.$nextTick(() => {
+            this.$emit('initial-load-complete');
+          });
+        }
+
+      }).catch(error => {
+        console.error("Failed to load history:", error);
+        // 处理错误，例如显示错误消息
+        // 如果加载失败，可能需要重置 loading 状态，并允许重试
+        if (currentPageIndex === 1) {
+          this.isInitialLoadComplete = false; // 允许下次重试时再次触发事件
+        }
+      }).finally(() => {
+        this.loading = false;
+        this.pageLoadCompleteList[currentPageIndex] = true; // 标记当前页加载完成（无论成功或失败）
+      });
+    },
     handleScroll(e) {
-      // this.scrollDecorationTop = e.target.scrollTop > 0;
+      // 防抖/节流可以优化性能，但对于滚动加载通常还好
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      // 接近底部时加载更多
+      if (scrollHeight - scrollTop - clientHeight < 150) {
+        this.loadHistory(true); // 传入 true 表示加载下一页
+      }
+
+      // 更新顶部阴影的逻辑 (如果需要)
+      // this.scrollDecorationTop = scrollTop > 0;
     },
     isTooltip(str) {
       return !!(str && str.includes(','));
     },
     splitOperationStr(str) {
-       return str.split(',')[0]
+      return str ? str.split(',')[0] : ''; // 添加空值检查
     }
   }
 }
@@ -95,24 +173,43 @@ export default {
 
 <style scoped>
 .timeline-container {
+  /* 限制 Popover 内容区的高度 */
+  /* 将高度控制移到 scrollbar-wrapper */
+  height: 100%; /* 让 timeline-container 填充其父容器（popover的内容区） */
+}
 
-  .timeline-container-scrollbar {
+.scrollbar-wrapper {
-    height: 50vh;
+  height: 100%;
-    min-height: 450px;
+  max-height: 400px;
-    padding: 0 20px;
+  overflow-y: auto; /* 超出最大高度时显示滚动条 */
-
+  position: relative; /* 为了可能的绝对定位子元素 */
-    .scroll-decoration {
+  margin: 5px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 6px;
-      box-shadow: #dddddd 0 6px 6px -6px inset;
-    }
 
+  /* macOS风格滚动条 (保持不变) */
+  &::-webkit-scrollbar {
+    width: 6px; /* 给滚动条一个宽度 */
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(180,180,180,0.28);
+    border-radius: 6px;
+    transition: background 0.2s;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(180,180,180,0.48);
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
   }
 }
 
+.timeline-container-scrollbar {
+  padding: 0 15px 0 20px; /* 增加底部 padding */
+}
+
+/* 移除 .scroll-decoration 或重新设计，它依赖于外部滚动条可能不准确 */
+/* .scroll-decoration { ... } */
+
 .timeline-item {
   position: relative;
   display: flex;
@@ -122,28 +219,26 @@ export default {
 .timeline-icon {
   position: relative;
   z-index: 2;
-  width: 40px;
+  width: 40px; /* 与 el-avatar 的 size="medium" 对应 */
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f0f0f0;
+  /* background-color: #f0f0f0; */ /* Avatar自带背景色 */
   overflow: hidden;
+  flex-shrink: 0; /* 防止 icon 被压缩 */
 }
 
-.timeline-icon img {
+/* Avatar 样式可能不需要额外设置，Element UI 会处理 */
-  width: 100%;
+/* .timeline-icon img { ... } */
-  height: 100%;
-  object-fit: cover;
-}
 
 .timeline-line {
   position: absolute;
-  left: 20px;
+  left: 20px; /* (Avatar宽度 / 2) */
-  top: 40px;
+  top: 45px;  /* 大约是 Avatar 下方开始 */
-  bottom: 0;
+  /* bottom: 0; */ /* 不再使用 bottom */
-  height: 100%;
+  height: calc(100% - 40px); /* 从 Avatar 下方到底部 */
   width: 1px;
   background-color: #e1e4e8;
   z-index: 1;
@@ -152,13 +247,14 @@ export default {
 .timeline-content {
   margin-left: 16px;
   flex: 1;
+  padding-bottom: 5px; /* 给内容一点底部空间，避免与线条重叠 */
 }
 
 .timeline-date {
   font-size: 14px;
   color: #24292e;
   font-weight: 500;
-  margin-bottom: 2px;
+  margin-bottom: 4px; /* 稍微增大间距 */
 }
 
 .timeline-action {
@@ -166,10 +262,24 @@ export default {
   align-items: center;
   font-size: 14px;
   color: #586069;
+  flex-wrap: wrap; /* 如果内容过长可以换行 */
 }
 
 .timeline-action-icon {
   margin-right: 4px;
   color: #586069;
+  font-weight: bold; /* 可以加粗显示操作人 */
+}
+
+.timeline-action-text {
+  word-break: break-all; /* 长文本换行 */
+}
+
+/* 加载和空状态样式 */
+.timeline-loading, .timeline-empty, .timeline-loading-more {
+  text-align: center;
+  color: #909399;
+  padding: 15px 0;
+  font-size: 14px;
 }
 </style>

src/components/preview/FileDetails.vue

@@ -88,13 +88,16 @@
           </el-form-item>
           <el-form-item label="修改时间:">
             <el-popover
+              ref="historyPopover"
               placement="right"
               popper-class="file-operation-history"
               width="400"
               trigger="click"
-            @show="showOperationHistory"
+              :visible-arrow="false"
-            @hide="hideOperationHistory">
+              transition=""
-              <timeline-component :show-operation-history="operationHistory" :file-id="file.id"></timeline-component>
+              @show="showOperationHistory"
+              @hide="hideOperationHistory">
+              <timeline-component :show-operation-history="operationHistory" :file-id="file.id" @initial-load-complete="handleHistoryInitialLoad"></timeline-component>
               <span slot="reference" v-tooltip="{content: '文件操作历史', placement: 'bottom'}" class="file-operation-history-btn">{{ file.updateDate }}</span>
             </el-popover>
           </el-form-item>
@@ -261,6 +264,14 @@ export default {
     hideOperationHistory() {
       this.operationHistory = false
     },
+    handleHistoryInitialLoad() {
+      // 当 TimelineComponent 首次加载完成时，更新 Popover 位置
+      this.$nextTick(() => { // 确保 DOM 更新完毕
+        if (this.$refs.historyPopover) {
+          this.$refs.historyPopover.updatePopper(); // 调用 Element UI Popover 的方法
+        }
+      });
+    },
     openOnlyOffice() {
       this.$emit('openOnlyOffice', this.file)
     },

src/styles/index.scss

@@ -56,6 +56,11 @@ body {
     }
   }
 
+
+  .tippy-box {
+    border-radius: 10px;
+  }
+
   .tippy-box[data-theme~=light] {
     border-radius: 12px;
     background-color: rgba(255,255,255,.75);