知识库-上传文件在工具页面实时联动

src/views/knowledge/index.vue

@@ -579,13 +579,13 @@ export default {
             // 创建视频播放页面（支持大文件流媒体）
             this.createVideoPlayer(videoUrl, row.title || "视频播放");
           }
-        })
+        });
       } else {
         postKnowledgePlay({ knowledge_id: row.id }).then((res) => {
           if (res.code === 200) {
             window.open(this.getFullFilePath(row.file_path), "_blank");
           }
-        })
+        });
       }
     },
     // 创建视频播放器（支持大文件流媒体播放）
@@ -593,7 +593,7 @@ export default {
       try {
         // 检查浏览器是否支持流媒体
         const supportsStreaming = this.checkStreamingSupport();
-        
+
         if (supportsStreaming) {
           // 方式一：直接打开视频URL（支持流媒体）
           // 创建一个带有视频标签的页面，使用流式加载
@@ -670,7 +670,9 @@ export default {
           }
         } else {
           // 方式二：回退到直接下载或提示用户
-          this.$modal.msgWarning("您的浏览器可能不支持视频流媒体播放，正在尝试直接打开...");
+          this.$modal.msgWarning(
+            "您的浏览器可能不支持视频流媒体播放，正在尝试直接打开..."
+          );
           window.open(videoUrl, "_blank");
         }
       } catch (error) {
@@ -682,9 +684,13 @@ export default {
     // 检查浏览器流媒体支持
     checkStreamingSupport() {
       try {
-        const video = document.createElement('video');
+        const video = document.createElement("video");
         // 检查是否支持媒体源扩展（MSE）
-        return !!window.MediaSource || video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') === 'probably';
+        return (
+          !!window.MediaSource ||
+          video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') ===
+            "probably"
+        );
       } catch (e) {
         return true; // 默认假设支持
       }
@@ -824,7 +830,7 @@ export default {
       }
       return { valid: true, message: "" };
     },
-       // 文件大小验证（根据需求启用）
+    // 文件大小验证（根据需求启用）
     validateFileSize(size) {
       // 例如：限制最大100MB
       const maxSize = 100 * 1024 * 1024;
@@ -861,7 +867,14 @@ export default {
           file,
           {},
           (percent) => {
+            // 更新界面进度
             this.uploadPercent = percent;
+            // 更新传输记录进度（用于工具页面显示）
+            if (recordId) {
+              this.updateTransferProgress(recordId, percent);
+              // 触发自定义事件通知工具页面更新
+              this.notifyTransferProgress(recordId, percent);
+            }
           }
         );
 
@@ -943,7 +956,7 @@ export default {
     },
     // 创建初始上传记录（文件选择时调用，无论成功失败都会保存）
     createTransferRecord(file) {
-      const STORAGE_KEY = "file_transfer_records";
+      const STORAGE_KEY = "file_transfer_records" + this.userInfo.id;
       try {
         // 获取现有记录
         const existingData = localStorage.getItem(STORAGE_KEY);
@@ -979,7 +992,7 @@ export default {
     },
     // 更新上传记录状态
     updateTransferRecord(recordId, isSuccess, fileUrl = "") {
-      const STORAGE_KEY = "file_transfer_records";
+      const STORAGE_KEY = "file_transfer_records" + this.userInfo.id;
       try {
         // 获取现有记录
         const existingData = localStorage.getItem(STORAGE_KEY);
@@ -999,11 +1012,76 @@ export default {
           // 保存回 localStorage
           localStorage.setItem(STORAGE_KEY, JSON.stringify(records));
           console.log("上传记录已更新:", records[recordIndex]);
+          // 通知工具页面更新
+          this.notifyTransferUpdate();
         }
       } catch (e) {
         console.error("更新上传记录失败", e);
       }
     },
+
+    // 更新上传进度
+    updateTransferProgress(recordId, percent) {
+      const STORAGE_KEY = "file_transfer_records" + this.userInfo.id;
+      try {
+        // 获取现有记录
+        const existingData = localStorage.getItem(STORAGE_KEY);
+        const records = existingData ? JSON.parse(existingData) : [];
+
+        // 查找并更新记录
+        const recordIndex = records.findIndex(
+          (record) => record.id === recordId
+        );
+        if (recordIndex !== -1) {
+          records[recordIndex].upload_percent = percent;
+          records[recordIndex].is_uploading = percent < 100;
+          // 保存回 localStorage
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(records));
+        }
+      } catch (e) {
+        console.error("更新上传进度失败", e);
+      }
+    },
+
+    // 通知工具页面更新传输记录
+    notifyTransferUpdate() {
+      try {
+        // 创建自定义事件
+        const event = new CustomEvent("transferRecordsUpdate", {
+          detail: {
+            userId: this.userInfo.id,
+          },
+          bubbles: true,
+          composed: true,
+        });
+        // 触发事件
+        window.dispatchEvent(event);
+        console.log("Notified transfer records update");
+      } catch (e) {
+        console.error("Failed to notify transfer update", e);
+      }
+    },
+
+    // 通知工具页面更新传输进度
+    notifyTransferProgress(recordId, percent) {
+      try {
+        // 创建自定义事件
+        const event = new CustomEvent("transferProgressUpdate", {
+          detail: {
+            recordId,
+            percent,
+            userId: this.userInfo.id,
+          },
+          bubbles: true,
+          composed: true,
+        });
+        // 触发事件
+        window.dispatchEvent(event);
+        console.log(`Notified transfer progress: ${recordId} - ${percent}%`);
+      } catch (e) {
+        console.error("Failed to notify transfer progress", e);
+      }
+    },
   },
 };
 </script>

src/views/utility/index.vue

@@ -120,6 +120,7 @@
 </template>
 <script>
 const STORAGE_KEY = "file_transfer_records";
+import { mapGetters } from "vuex";
 export default {
   name: "UtilityPage",
   data() {
@@ -129,6 +130,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(["userInfo"]),
     // 按日期分组，与 Qt DisplayFiletransferinfo 逻辑一致
     groupedRecords() {
       const groups = {};
@@ -147,13 +149,21 @@ export default {
   },
   mounted() {
     this.loadTransferRecords();
+    // 监听自定义事件，实现实时更新
+    window.addEventListener('transferRecordsUpdate', this.handleTransferUpdate);
+    window.addEventListener('transferProgressUpdate', this.handleTransferProgress);
+  },
+  beforeUnmount() {
+    // 移除监听
+    window.removeEventListener('transferRecordsUpdate', this.handleTransferUpdate);
+    window.removeEventListener('transferProgressUpdate', this.handleTransferProgress);
   },
   methods: {
     // 从 localStorage 加载文件传输记录（替代 Qt 的 SQLite 查询）
     loadTransferRecords() {
       this.loading = true;
       try {
-        const data = localStorage.getItem(STORAGE_KEY);
+        const data = localStorage.getItem(STORAGE_KEY + this.userInfo.id);
         if (data) {
           this.transferRecords = JSON.parse(data);
         }
@@ -339,6 +349,22 @@ export default {
         this.saveTransferRecords();
       }
     },
+
+    // 处理传输记录更新事件
+    handleTransferUpdate(e) {
+      console.log('Transfer records update received:', e.detail);
+      this.loadTransferRecords();
+    },
+
+    // 处理传输进度更新事件
+    handleTransferProgress(e) {
+      const { recordId, percent, userId } = e.detail;
+      console.log(`Transfer progress update: ${recordId} - ${percent}%`);
+      // 只处理当前用户的进度更新
+      if (userId === this.userInfo?.id) {
+        this.loadTransferRecords();
+      }
+    },
   },
 };
 </script>