Fix/pdf

src/components/Pdfview/PdfViewer.vue

@@ -1,42 +1,6 @@
 
 <template>
   <div class="pdf-iframe-viewer">
-    <div class="toolbar">
-      <div class="left-tools">
-        <div class="file-header">
-          <span class="file-icon">📄</span>
-          <span class="file-name">{{ props.fileName }}</span>
-        </div>
-      </div>
-
-      <!-- 使用v-show根据屏幕宽度控制显示 -->
-      <div class="time-info" v-show="!isMobile">
-        <div class="time-item">
-          <el-icon class="icon"><Calendar /></el-icon>
-          <span>最近修改：{{ displayLastModified }}</span>
-        </div>
-        <div class="time-item">
-          <el-icon class="icon"><Clock /></el-icon>
-          <span>当前时间：{{ currentTime }}</span>
-        </div>
-      </div>
-
-      <div class="action-buttons">
-        <div
-          v-if="pdfUrl && write"
-          class="save-btn"
-          :class="{ 'is-loading': isSaving }"
-          @click="handleSave"
-        >
-          <el-icon class="icon"><Document /></el-icon>
-          <span v-show="!isSaving">保存</span>
-          <span v-show="isSaving">
-            保存中 <span class="spinner">.</span><span class="spinner">.</span><span class="spinner">.</span>
-          </span>
-        </div>
-      </div>
-    </div>
-
     <!-- loading骨架 -->
     <div v-if="isLoading" class="iframe-loading">📄 PDF 加载中...</div>
 
@@ -87,20 +51,14 @@ const pdfUrl = ref('')
 const pdfIframe = ref(null)
 const isSaving = ref(false)
 const isLoading = ref(true)
-let countdownTimer = null
 const BASE_URL = 'https://jienote.top/pdfjs/web/viewer.html'
 
-// 新增当前时间响应式变量
-const currentTime = ref('');
+
 
 // 新增屏幕宽度检测
 const isMobile = ref(window.innerWidth < 600);
 
-// 时间格式化函数
-function formatDate(date) {
-  const d = new Date(date);
-  return d.toISOString().split('T')[0] + ' ' + d.toTimeString().split(' ')[0];
-}
+
 
 // 窗口大小变化事件处理
 const handleResize = () => {
@@ -109,10 +67,7 @@ const handleResize = () => {
 
 // 实时更新当前时间（每秒更新）
 onMounted(() => {
-  currentTime.value = formatDate(new Date());
-  const timer = setInterval(() => {
-    currentTime.value = formatDate(new Date());
-  }, 1000);
+
 
   // 初始化窗口大小监听
   window.addEventListener('resize', handleResize);
@@ -125,10 +80,8 @@ onMounted(() => {
   }
 
   onUnmounted(() => {
-    clearInterval(timer);
     window.removeEventListener('resize', handleResize);
     window.removeEventListener('message', onMessage)
-    clearInterval(countdownTimer)
   })
 });
 
@@ -148,10 +101,7 @@ function handleSave() {
   sendMessageToIframe({ type: 'save', token: token, articleId: props.articleId })
   isSaving.value = true;
 
-  // 10秒后自动取消加载状态
-  countdownTimer = setTimeout(() => {
-    isSaving.value = false;
-  }, 10000);
+
 }
 
 function sendMessageToIframe(data) {
@@ -180,14 +130,10 @@ function onMessage(event) {
 }
 
 // 计算展示的修改时间
-const displayLastModified = computed(() => {
-  return props.lastModified
-    ? formatDate(props.lastModified)
-    : formatDate(new Date())
-})
 
 defineExpose({
   pdfUrl,
+  handleSave,
 })
 </script>
 

src/layouts/PaperNote.vue

@@ -10,10 +10,33 @@
       >
         <el-icon><Back /></el-icon>
       </el-button>
+
       <div class="jienote-title">
         <span class="title-text">JieNote 文献笔记</span>
         <span class="subtitle" v-if="documentTitle">{{ documentTitle }}</span>
       </div>
+
+      <div class="save-button-container">
+        <el-button
+          type="success"
+          class="header-save-btn"
+          @click="handleSaveNote"
+          :loading="isSaving"
+          size="small"
+          round
+        >
+          <template #icon>
+            <el-icon><EditPen /></el-icon>
+          </template>
+          <template v-if="!isSaving">
+            <span class="save-text">保存批注</span>
+          </template>
+          <template v-else>
+            <el-icon class="loading-icon"><Loading /></el-icon>
+            <span class="save-text">保存中…</span>
+          </template>
+        </el-button>
+      </div>
       <!-- 笔记选择器 -->
       <div class="header-note-selector">
         <el-select
@@ -45,6 +68,7 @@
               :fileName="documentTitle"
               :articleId="articleId"
               :write="true"
+              :ref="PdfViewerRef"
             />
             <div v-else class="pdf-loading">
               <el-icon class="loading-icon is-loading"><Loading /></el-icon>
@@ -96,6 +120,7 @@ import PdfViewer from '@/components/Pdfview/PdfViewer.vue';
 import 'splitpanes/dist/splitpanes.css';
 import { ElMessage } from 'element-plus';
 import debounce from 'lodash/debounce';
+import {ref} from 'vue'
 
 
 export default {
@@ -122,6 +147,7 @@ export default {
       editorPropsReady: false,
       notesListLoading: true, // 新增：标记笔记列表是否正在加载
       updateRoute: null, // 将在 created 中初始化
+      PdfViewerRef: ref(null), // 新增：PdfViewer组件实例
     }
   },
   created() {
@@ -234,7 +260,9 @@ export default {
 
         // 处理 PDF URL
         if (pdfResponse?.data?.article_url) {
-          this.pdfUrl = pdfResponse.data.article_url;
+
+          const nowTime = new Date().getTime();
+          this.pdfUrl = pdfResponse.data.article_url + `&t=${nowTime}`;
         } else {
           console.error("获取PDF链接失败：", pdfResponse);
           ElMessage.error("获取 PDF 链接失败！");
@@ -274,6 +302,22 @@ export default {
       }
     },
 
+    async handleSaveNote() {
+      if (this.isSaving) return;
+
+      try {
+        this.isSaving = true;
+        if (this.PdfViewerRef) {
+          this.PdfViewerRef.value.handleSave();
+        }
+
+    } catch (error) {
+        console.error("[Note] 保存笔记失败：", error);
+    } finally {
+        this.isSaving = false;
+    }
+    },
+
     async fetchDocumentTitle(articleId) {
       try {
         // 实际项目中应调用API获取文献真实标题
@@ -605,4 +649,38 @@ export default {
     height: 100% !important; /* 强制填充可用高度 */
   }
 }
+
+.save-button-container {
+    /* 右侧布局，保持与选择器间距 */
+    margin-left: 20px;
+    flex-shrink: 0; /* 防止按钮被压缩 */
+  }
+
+  .header-save-btn {
+    /* 按钮样式定制 */
+    background-color: #3e8e8f; /* 主色，可替换为绿色或其他品牌色 */
+    color: #fff;
+    padding: 0 16px;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: #228fd8;
+    }
+
+    .icon-margin {
+      margin-right: 4px; /* 图标与文字间距 */
+    }
+
+    .el-progress {
+      vertical-align: middle;
+      margin-left: 4px;
+      width: 14px;
+      height: 14px;
+      line-height: 14px;
+
+      .el-progress__text {
+        display: none; /* 隐藏百分比文字 */
+      }
+    }
+  }
 </style>