网页端：修改我的学习阅读pdf文档时出错的问题

oa-ui/src/views/oa/study/components/pdfStudy.vue

@@ -5,261 +5,685 @@
  * @LastEditTime: 2025-03-12 11:01:28
 -->
 <template>
-  <div>
-    <div v-if="boxShow">
-      <div class="return-btn">
-        <div>
-          <el-button type="primary" size="mini" icon="el-icon-d-arrow-left"
-            @click="$router.push({ path: '/oa/study/myStudy' })">返回我的学习</el-button>
+  <div class="pdf-study-root">
+    <div
+      v-if="boxShow"
+      v-loading="loading"
+      class="pdf-study"
+      element-loading-text="正在加载文档..."
+    >
+      <aside class="study-sidebar">
+        <div class="sidebar-top">
+          <el-button
+            type="text"
+            icon="el-icon-arrow-left"
+            class="back-btn"
+            @click="$router.push({ path: '/oa/study/myStudy' })"
+          >返回我的学习</el-button>
         </div>
-        <div class="mt20">
-          学习进度：
-          <el-progress :text-inside="true" :status="formatStatus(percentage)" text-color="#fff" :stroke-width="26"
-            :percentage="percentage"></el-progress>
+
+        <div v-if="resource.title" class="resource-title" :title="resource.title">
+          {{ resource.title }}
+        </div>
+
+        <div class="progress-card">
+          <div class="progress-header">
+            <span class="progress-label">学习进度</span>
+            <span class="progress-percent" :class="progressPercentClass">{{ percentage }}%</span>
+          </div>
+          <el-progress
+            :percentage="percentage"
+            :status="formatStatus(percentage)"
+            :stroke-width="10"
+            :show-text="false"
+          />
+          <div v-if="totalPages" class="page-stats">
+            <span>已读 <strong>{{ readCount }}</strong> / {{ totalPages }} 页</span>
+            <el-tag v-if="isComplete" type="success" size="mini">已完成</el-tag>
+          </div>
+          <div v-if="resource.hours" class="hours-info">
+            可获得学时：<span>{{ resource.hours }}</span> 小时
+          </div>
         </div>
-        <div class="mt20" style="color:#E23D28;font-size:12px;line-height:30px;">
-          tips:鼠标滚动过快将导致进度计算失败，请隔2秒滚动一次页面。若一直未到100%，请返回我的学习重新进入课程。
+
+        <div class="tips-card">
+          <i class="el-icon-info" />
+          <p>每页累计可见约 2 秒计入进度，请逐页阅读至文档末尾；滚到底部后稍停片刻即可完成最后一页。</p>
+        </div>
+      </aside>
+
+      <main class="pdf-main">
+        <div ref="pdfContainer" class="pdf-container">
+          <div ref="pdfViewerEl" class="pdfViewer"></div>
         </div>
-      </div>
-      <div id="pdf-container">
-        <div id="viewer" class="pdfViewer"></div>
-      </div>
+      </main>
     </div>
-    <div class="mt20 text-center" v-else>
-      抱歉，暂不支持手机端，请前往电脑端观看学习
+
+    <div v-else class="mobile-tip">
+      <i class="el-icon-monitor" />
+      <p>抱歉，暂不支持手机端，请前往电脑端观看学习</p>
     </div>
   </div>
 </template>
 
 <script>
-import { listStudy, getStudy, delStudy, addStudy, updateStudy } from "@/api/oa/study/myStudy";
+import { getStudy, updateStudy } from '@/api/oa/study/myStudy'
 import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf'
 import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer'
-// 设置 PDF.js 的 Web Worker 路径
-GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
+
+/** 页面累计可见多久视为已读（毫秒） */
+const PAGE_DWELL_MS = 2000
+/** 进度保存防抖（毫秒） */
+const SAVE_DEBOUNCE_MS = 2000
+/** 页面可见比例阈值（末页往往达不到 50%，故降低） */
+const VISIBILITY_RATIO = 0.15
+/** 判定滚动到底部的容差（像素） */
+const SCROLL_BOTTOM_OFFSET = 80
+
+GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min')
+
 export default {
-  async mounted() {
-    if (this.$store.getters.device === 'mobile') {
-      this.boxShow = false;
-      return
-    } else {
-      this.boxShow = true;
-    }
-    await this.getData();
-    this.initPDFViewer()
-  },
+  name: 'PdfStudy',
   data() {
     return {
       baseUrl: process.env.VUE_APP_BASE_API,
+      boxShow: false,
+      loading: false,
       studyId: '',
       pdfPath: '',
-      pdfViewer: null,
       resource: {},
-      totalPages: 0, //总页数
-      readPages: [], //已阅读页数
       lastPoint: 0,
-      debounceTimer: null,
-      observers: new Map(),
-      isComplete: false,
       percentage: 0,
-      boxShow: false,
+      totalPages: 0,
+      readPages: [],
+      isComplete: false,
+      pdfViewer: null,
+      pdfLoadingTask: null,
+      pageObservers: [],
+      pageVisibleSince: new Map(),
+      pageDwellAccum: new Map(),
+      dwellCheckTimer: null,
+      saveTimer: null,
+      hasRestoredScroll: false,
+      onPagesLoaded: null,
+      onResize: null,
+      onScroll: null
+    }
+  },
+  computed: {
+    fullPdfPath() {
+      if (!this.pdfPath) return ''
+      const path = String(this.pdfPath).trim()
+      if (/^https?:\/\//i.test(path)) return path
+      if (path.indexOf('/profile/upload') === 0) {
+        return `${this.baseUrl}${path}`
+      }
+      return `${this.baseUrl}/profile/upload${path.startsWith('/') ? path : '/' + path}`
+    },
+    readCount() {
+      return this.readPages.filter(Boolean).length
+    },
+    progressPercentClass() {
+      if (this.percentage >= 100) return 'is-complete'
+      if (this.percentage >= 80) return 'is-high'
+      if (this.percentage >= 50) return 'is-mid'
+      return 'is-low'
+    }
+  },
+  created() {
+    this.boxShow = this.$store.getters.device !== 'mobile'
+  },
+  async mounted() {
+    if (!this.boxShow) return
+    try {
+      await this.loadStudyData()
+      await this.initPdfViewer()
+    } catch (err) {
+      console.error('初始化学习页失败:', err)
+      this.$message.error('加载学习资料失败，请稍后重试')
     }
   },
+  beforeDestroy() {
+    this.teardown()
+  },
   methods: {
-    async getData() {
-      this.studyId = this.$route.params.id;
-      let resData = await getStudy(this.studyId);
-      let data = resData.data;
-      this.pdfPath = data.resource.sourcePath;
-      this.lastPoint = parseFloat(data.lastPoint);
-      this.resource = data.resource;
-      if (Number(this.lastPoint) == 100) {
-        this.isComplete = true;
+    async loadStudyData() {
+      this.studyId = this.$route.params.id
+      const { data } = await getStudy(this.studyId)
+      this.pdfPath = data.resource.sourcePath
+      this.resource = data.resource
+      this.lastPoint = Number(data.lastPoint) || 0
+      this.percentage = Math.min(100, Math.round(this.lastPoint))
+      this.isComplete = this.percentage >= 100
+      if (this.isComplete) {
         this.$message.success('文档已阅读完毕')
       }
     },
-    // 初始化查看器
-    async initPDFViewer() {
+
+    async initPdfViewer() {
+      if (!this.fullPdfPath) {
+        this.$message.error('未找到 PDF 文件路径')
+        return
+      }
+
+      this.loading = true
+      const container = this.$refs.pdfContainer
+      const viewer = this.$refs.pdfViewerEl
+
       this.pdfViewer = new PDFViewer({
-        container: document.getElementById('pdf-container'),
+        container,
+        viewer,
         enhanceTextSelection: true,
         textLayerMode: 1
       })
-      // 先绑定监听页面变化事件
-      this.setupViewerEvents();
-      // 加载文档
-      const loadingTask = getDocument({
-        url: `/dev-api/profile/upload/${this.pdfPath}`,
+
+      this.bindViewerEvents()
+
+      this.pdfLoadingTask = getDocument({
+        url: this.fullPdfPath,
         cMapPacked: true
       })
+
       try {
-        const pdfDocument = await loadingTask.promise
-        this.pdfViewer.setDocument(pdfDocument);
-        this.totalPages = pdfDocument.numPages;
-        this.readPages = new Array(this.totalPages).fill(false);
-        let curProgress = Math.round((this.lastPoint / 100) * this.totalPages);
-        this.percentage = Math.round(curProgress / this.totalPages) * 100;
-        for (let i = 0; i < curProgress; i++) {
-          this.readPages[i] = true
-        }
-        this.$nextTick(() => {
-          this.setupPageObservers();
-        });
+        const pdfDocument = await this.pdfLoadingTask.promise
+        this.pdfViewer.setDocument(pdfDocument)
+        this.totalPages = pdfDocument.numPages
+        this.restoreReadProgress()
       } catch (err) {
-        console.error('PDF加载失败:', err)
+        console.error('PDF 加载失败:', err)
+        this.$message.error('PDF 加载失败，请稍后重试或联系管理员')
+        throw err
+      } finally {
+        this.loading = false
       }
-      // 添加窗口缩放监听
-      window.addEventListener("resize", this.handleResize);
     },
-    handleResize() {
-      if (this.pdfViewer) {
-        this.pdfViewer.update();
+
+    bindViewerEvents() {
+      const { eventBus } = this.pdfViewer
+      this.onPagesLoaded = () => {
+        this.scrollToLastPosition()
+        this.setupPageObservers()
+        this.startDwellCheckLoop()
+      }
+      eventBus.on('pagesloaded', this.onPagesLoaded)
+
+      this.onResize = () => {
+        if (this.pdfViewer) {
+          this.pdfViewer.update()
+        }
+      }
+      window.addEventListener('resize', this.onResize)
+
+      const container = this.$refs.pdfContainer
+      this.onScroll = () => {
+        this.checkScrollBottom()
+        this.flushVisibleDwell()
       }
+      container.addEventListener('scroll', this.onScroll, { passive: true })
     },
-    setupViewerEvents() {
-      const eventBus = this.pdfViewer.eventBus;
-      // 新增 pagesloaded 事件监听
-      eventBus.on('pagesloaded', () => {
-        this.scrollToLastPosition();
-        this.setupPageObservers()
-      });
+
+    /** 根据上次保存的百分比恢复已读页 */
+    restoreReadProgress() {
+      this.readPages = new Array(this.totalPages).fill(false)
+      if (!this.totalPages) return
+
+      const readCount = Math.min(
+        this.totalPages,
+        Math.floor((this.percentage / 100) * this.totalPages)
+      )
+      for (let i = 0; i < readCount; i++) {
+        this.readPages[i] = true
+      }
+      this.syncPercentageFromPages(false)
     },
+
     scrollToLastPosition() {
-      if (!this.lastPoint || !this.totalPages) return
-      // 计算目标页码（向上取整）
+      if (this.hasRestoredScroll || !this.lastPoint || !this.totalPages) return
+
       const pageNumber = Math.min(
         Math.ceil((this.lastPoint / 100) * this.totalPages),
         this.totalPages
       )
-      // 查找对应的页面元素
-      const pageElement = document.querySelector(
+      const pageElement = this.$refs.pdfContainer.querySelector(
         `.page[data-page-number="${pageNumber}"]`
       )
       if (pageElement) {
-        // 获取页面元素的垂直位置
-        const pageTop = pageElement.offsetTop
-        // 设置滚动位置（带20px顶部留白）
-        document.getElementById('pdf-container').scrollTo({
-          top: pageTop - 20,
+        this.$refs.pdfContainer.scrollTo({
+          top: pageElement.offsetTop - 20,
           behavior: 'auto'
         })
       }
+      this.hasRestoredScroll = true
     },
+
     setupPageObservers() {
-      // 清理旧观察者
-      this.observers.forEach((observer, page) => {
-        observer.disconnect();
-        delete page.dataset.timer;
-      });
-      this.observers.clear();
-      const pages = document.querySelectorAll('.page');
-      pages.forEach(page => {
-        const observer = new IntersectionObserver((entries) => {
-          entries.forEach(entry => {
-            const pageNumber = parseInt(page.dataset.pageNumber);
-            if (entry.isIntersecting) {
-              page.dataset.enterTime = Date.now();
-              page.dataset.timer = setTimeout(() => {
-                if (!this.readPages[pageNumber - 1]) {
-                  this.$set(this.readPages, pageNumber - 1, true);
-                  this.updateProgress();
-                }
-              }, 2000);
-            } else {
-              clearTimeout(page.dataset.timer);
-              delete page.dataset.enterTime;
-            }
-          });
-        }, { threshold: 0.5, root: this.pdfViewer.container });
-
-        this.observers.set(page, observer);
-        observer.observe(page);
-      });
+      this.clearPageObservers()
+      const container = this.$refs.pdfContainer
+      const pages = container.querySelectorAll('.page')
+
+      pages.forEach(pageEl => {
+        const observer = new IntersectionObserver(
+          entries => {
+            entries.forEach(entry => this.handlePageIntersection(pageEl, entry))
+          },
+          { threshold: [0, 0.1, 0.15, 0.25, 0.5, 0.75, 1], root: container }
+        )
+        observer.observe(pageEl)
+        this.pageObservers.push({ pageEl, observer })
+      })
+    },
+
+    handlePageIntersection(pageEl, entry) {
+      const pageNumber = parseInt(pageEl.dataset.pageNumber, 10)
+      if (!pageNumber || this.readPages[pageNumber - 1]) return
+
+      const ratio = entry.intersectionRatio
+      const visible = ratio >= VISIBILITY_RATIO
+
+      if (visible) {
+        if (!this.pageVisibleSince.has(pageEl)) {
+          this.pageVisibleSince.set(pageEl, Date.now())
+        }
+      } else if (this.pageVisibleSince.has(pageEl)) {
+        this.accumulateDwell(pageEl, pageNumber)
+      }
+    },
+
+    accumulateDwell(pageEl, pageNumber) {
+      const since = this.pageVisibleSince.get(pageEl)
+      if (!since) return
+
+      const elapsed = Date.now() - since
+      const total = (this.pageDwellAccum.get(pageNumber) || 0) + elapsed
+      this.pageDwellAccum.set(pageNumber, total)
+      this.pageVisibleSince.delete(pageEl)
+
+      if (total >= PAGE_DWELL_MS) {
+        this.markPageRead(pageNumber)
+      }
     },
-    updateProgress() {
-      if (!this.isComplete) {
-        const readCount = this.readPages.filter(Boolean).length;
-        const progress = Math.round(readCount / this.totalPages * 100);
-        this.percentage = progress;
-        // 防抖保存
-        if (!this.debounceTimer) {
-          this.debounceTimer = setTimeout(() => {
-            this.saveProgress(progress);
-            this.debounceTimer = null;
-          }, 2000);
+
+    flushVisibleDwell() {
+      this.pageVisibleSince.forEach((since, pageEl) => {
+        const pageNumber = parseInt(pageEl.dataset.pageNumber, 10)
+        if (!pageNumber || this.readPages[pageNumber - 1]) return
+
+        const elapsed = Date.now() - since
+        const total = (this.pageDwellAccum.get(pageNumber) || 0) + elapsed
+        this.pageDwellAccum.set(pageNumber, total)
+        this.pageVisibleSince.set(pageEl, Date.now())
+
+        if (total >= PAGE_DWELL_MS) {
+          this.markPageRead(pageNumber)
+        }
+      })
+    },
+
+    startDwellCheckLoop() {
+      this.stopDwellCheckLoop()
+      this.dwellCheckTimer = setInterval(() => {
+        if (this.isComplete) {
+          this.stopDwellCheckLoop()
+          return
+        }
+        this.flushVisibleDwell()
+        this.checkScrollBottom()
+      }, 500)
+    },
+
+    stopDwellCheckLoop() {
+      if (this.dwellCheckTimer) {
+        clearInterval(this.dwellCheckTimer)
+        this.dwellCheckTimer = null
+      }
+    },
+
+    checkScrollBottom() {
+      if (!this.totalPages || this.isComplete) return
+
+      const container = this.$refs.pdfContainer
+      const atBottom =
+        container.scrollTop + container.clientHeight >=
+        container.scrollHeight - SCROLL_BOTTOM_OFFSET
+
+      if (!atBottom) return
+
+      const lastPageNumber = this.totalPages
+      if (this.readPages[lastPageNumber - 1]) return
+
+      const lastPageEl = container.querySelector(
+        `.page[data-page-number="${lastPageNumber}"]`
+      )
+      if (!lastPageEl) return
+
+      const rect = lastPageEl.getBoundingClientRect()
+      const containerRect = container.getBoundingClientRect()
+      const visibleHeight =
+        Math.min(rect.bottom, containerRect.bottom) -
+        Math.max(rect.top, containerRect.top)
+
+      if (visibleHeight > 0) {
+        if (!this.pageVisibleSince.has(lastPageEl)) {
+          this.pageVisibleSince.set(lastPageEl, Date.now())
+        }
+        const accum = this.pageDwellAccum.get(lastPageNumber) || 0
+        const since = this.pageVisibleSince.get(lastPageEl)
+        const current = accum + (since ? Date.now() - since : 0)
+        if (current >= PAGE_DWELL_MS) {
+          this.markPageRead(lastPageNumber)
         }
       }
     },
+
+    markPageRead(pageNumber) {
+      const index = pageNumber - 1
+      if (index < 0 || index >= this.totalPages || this.readPages[index]) return
+      this.$set(this.readPages, index, true)
+      this.onReadProgressChanged()
+    },
+
+    onReadProgressChanged() {
+      if (this.isComplete) return
+
+      const progress = this.calcProgressFromPages()
+      if (progress < this.percentage) return
+
+      this.percentage = progress
+      this.scheduleSave(progress)
+
+      if (progress >= 100) {
+        this.tryCompleteStudy()
+      }
+    },
+
+    calcProgressFromPages() {
+      if (!this.totalPages) return 0
+      if (this.readCount >= this.totalPages) return 100
+      return Math.min(99, Math.floor((this.readCount / this.totalPages) * 100))
+    },
+
+    syncPercentageFromPages(allowComplete = true) {
+      const fromPages = this.calcProgressFromPages()
+      this.percentage = Math.max(this.percentage, fromPages)
+      if (allowComplete && fromPages >= 100) {
+        this.tryCompleteStudy()
+      }
+    },
+
+    tryCompleteStudy() {
+      if (this.isComplete || this.readCount < this.totalPages) return
+      this.percentage = 100
+      this.saveProgress(100)
+    },
+
+    scheduleSave(progress) {
+      if (this.saveTimer) {
+        clearTimeout(this.saveTimer)
+      }
+      this.saveTimer = setTimeout(() => {
+        this.saveTimer = null
+        this.saveProgress(progress)
+      }, SAVE_DEBOUNCE_MS)
+    },
+
+    /** 按进度计算已获得学时，保留一位小数，避免 0.5 被 Math.round 成 1 */
+    calcGetHours(progress) {
+      const hours = Number(this.resource.hours) || 0
+      const point = Math.min(100, Math.max(0, Number(progress) || 0))
+      return Math.round((hours * point / 100) * 10) / 10
+    },
+
     async saveProgress(progress) {
+      if (this.isComplete && progress < 100) return
+
+      const lastPoint = Math.min(100, Math.round(progress))
+      const payload = {
+        studyId: this.studyId,
+        lastPoint,
+        getHours: this.calcGetHours(lastPoint),
+        lastTime: this.parseTime(new Date(), '{y}-{m}-{d}')
+      }
+
       try {
-        if (parseFloat(progress) == 100) {
-          this.$message.success('文档已阅读完毕！学时+' + this.resource.hours)
-          progress = 100
+        await updateStudy(payload)
+        this.lastPoint = lastPoint
+
+        if (lastPoint >= 100 && !this.isComplete) {
+          this.isComplete = true
+          this.$message.success(`文档已阅读完毕！学时+${this.calcGetHours(100)}`)
         }
-        await updateStudy(
-          {
-            studyId: this.studyId,
-            lastPoint: progress,
-            getHours: Math.round((this.resource.hours * progress) / 100),
-            lastTime: this.parseTime(new Date(), '{y}-{m}-{d}')
-          });
       } catch (error) {
-        console.error('保存进度失败:', error);
+        console.error('保存进度失败:', error)
+        this.$message.error('保存学习进度失败')
       }
     },
-    formatStatus(row) {
-      if (!row) {
-        row = 0
-        return 'exception'
+
+    clearPageObservers() {
+      this.pageVisibleSince.clear()
+      this.pageDwellAccum.clear()
+      this.pageObservers.forEach(({ observer }) => observer.disconnect())
+      this.pageObservers = []
+    },
+
+    teardown() {
+      this.stopDwellCheckLoop()
+
+      if (this.saveTimer) {
+        clearTimeout(this.saveTimer)
+        this.saveTimer = null
+      }
+
+      if (!this.isComplete && this.readCount > 0) {
+        const progress = this.calcProgressFromPages()
+        if (progress > this.lastPoint) {
+          this.saveProgress(progress)
+        }
+      }
+
+      this.clearPageObservers()
+
+      if (this.pdfViewer && this.onPagesLoaded) {
+        this.pdfViewer.eventBus.off('pagesloaded', this.onPagesLoaded)
+      }
+
+      if (this.onResize) {
+        window.removeEventListener('resize', this.onResize)
       }
-      if (row <= 20) {
-        return 'exception'
-      } else if (row > 20 && row <= 50) {
-        return 'warning'
-      } else if (row > 50 && row <= 80) {
-        return null
-      } else {
-        return 'success'
+
+      if (this.onScroll && this.$refs.pdfContainer) {
+        this.$refs.pdfContainer.removeEventListener('scroll', this.onScroll)
+      }
+
+      if (this.pdfLoadingTask) {
+        this.pdfLoadingTask.destroy()
+        this.pdfLoadingTask = null
       }
+
+      this.pdfViewer = null
     },
-  },
-  beforeDestroy() {
-    // 清理观察者和定时器
-    this.observers.forEach((observer, page) => {
-      observer.disconnect();
-      clearTimeout(page.dataset.timer);
-    });
-    window.removeEventListener("resize", this.handleResize);
-  }
 
+    formatStatus(value) {
+      const row = value || 0
+      if (row <= 20) return 'exception'
+      if (row <= 50) return 'warning'
+      if (row <= 80) return null
+      return 'success'
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '~pdfjs-dist/web/pdf_viewer.css';
 
-/* 修改后 */
-#pdf-container {
-  position: relative;
-  /* 改为相对定位，避免脱离文档流 */
+.pdf-study-root {
+  height: calc(100vh - 84px);
+  min-height: 520px;
+  background: #f0f2f5;
+}
+
+.pdf-study {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.study-sidebar {
+  flex-shrink: 0;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px 18px;
+  background: #fff;
+  border-right: 1px solid #e4e7ed;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
+  overflow-y: auto;
+}
+
+.sidebar-top {
+  .back-btn {
+    padding: 0;
+    font-size: 14px;
+    color: #409eff;
+
+    &:hover {
+      color: #66b1ff;
+    }
+  }
+}
+
+.resource-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.progress-card {
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f9ff 0%, #f0f7ff 100%);
+  border: 1px solid #d9ecff;
+  border-radius: 8px;
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.progress-label {
+  font-size: 13px;
+  color: #606266;
+}
+
+.progress-percent {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1;
+
+  &.is-low { color: #f56c6c; }
+  &.is-mid { color: #e6a23c; }
+  &.is-high { color: #409eff; }
+  &.is-complete { color: #67c23a; }
+}
+
+.page-stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+  font-size: 13px;
+  color: #606266;
+
+  strong {
+    color: #409eff;
+    font-size: 15px;
+  }
+}
+
+.hours-info {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #d9ecff;
+  font-size: 12px;
+  color: #909399;
+
+  span {
+    color: #409eff;
+    font-weight: 600;
+  }
+}
+
+.tips-card {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #909399;
+  background: #fafafa;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+
+  i {
+    flex-shrink: 0;
+    margin-top: 2px;
+    font-size: 14px;
+    color: #c0c4cc;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.pdf-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: #525659;
+}
+
+.pdf-container {
+  flex: 1;
   width: 100%;
-  height: calc(100vh - 88px);
-  /* 根据实际布局调整高度 */
   overflow: auto;
-  background-color: #cdcdcd;
+  background: #525659;
 }
 
-.pdfViewer .page {
-  margin: 1em auto;
-  border: 1px solid #ddd;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
+.pdf-main ::v-deep .pdfViewer .page {
+  margin: 16px auto;
+  border: none;
+  border-radius: 2px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
 }
 
-.return-btn {
-  position: absolute;
-  left: 20px;
-  top: 100px;
-  z-index: 9999;
-  width: 230px;
+.mobile-tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
 }
-</style>
+</style>

oa-ui/src/views/oa/study/components/videoStudy.vue

@@ -1,27 +1,72 @@
 <template>
-  <div>
-    <div class="video-container" v-if="boxShow">
-      <div class="return-btn">
-        <el-button type="primary" size="mini" icon="el-icon-d-arrow-left"
-          @click="$router.push({ path: '/oa/study/myStudy' })">返回我的学习</el-button>
-        <div class="mt20">
-          学习进度：
-          <el-progress :text-inside="true" :status="formatStatus(percentage)" text-color="#fff" :stroke-width="26"
-            :percentage="percentage"></el-progress>
+  <div class="video-study-root">
+    <div v-if="boxShow" class="video-study">
+      <aside class="study-sidebar">
+        <div class="sidebar-top">
+          <el-button
+            type="text"
+            icon="el-icon-arrow-left"
+            class="back-btn"
+            @click="$router.push({ path: '/oa/study/myStudy' })"
+          >返回我的学习</el-button>
         </div>
-        <div class="mt20" style="color:#E23D28;font-size:12px;line-height:30px;">
-          tips:视频不可拖动进度条，每隔30秒会自动保存，暂停也会保存视频进度，若出现学习进度一直不到100%，请退出后重新进入课程。
+
+        <div v-if="resource.title" class="resource-title" :title="resource.title">
+          {{ resource.title }}
+        </div>
+
+        <div class="progress-card">
+          <div class="progress-header">
+            <span class="progress-label">学习进度</span>
+            <span class="progress-percent" :class="progressPercentClass">{{ percentage }}%</span>
+          </div>
+          <el-progress
+            :percentage="percentage"
+            :status="formatStatus(percentage)"
+            :stroke-width="10"
+            :show-text="false"
+          />
+          <div class="page-stats">
+            <span v-if="lastPosition > 0">上次播放 {{ formatTime(lastPosition) }}</span>
+            <span v-else>尚未开始播放</span>
+            <el-tag v-if="isComplete" type="success" size="mini">已完成</el-tag>
+          </div>
+          <div v-if="resource.hours" class="hours-info">
+            可获得学时：<span>{{ resource.hours }}</span> 小时
+          </div>
+        </div>
+
+        <div class="tips-card">
+          <i class="el-icon-info" />
+          <p>视频不可拖动进度条；每 30 秒自动保存，暂停时也会保存。若进度异常，请退出后重新进入课程。</p>
+        </div>
+      </aside>
+
+      <main class="video-main">
+        <div class="video-wrapper">
+          <video
+            ref="videoPlayer"
+            class="video-js vjs-big-play-centered custom-video"
+            @play="handlePlay"
+            @pause="handlePause"
+            @ended="handleEnd"
+          />
+          <el-alert
+            v-if="showProgressTip"
+            type="info"
+            :closable="false"
+            class="resume-alert"
+            show-icon
+          >
+            已为您定位到上次播放位置：{{ formatTime(lastPosition) }}
+          </el-alert>
         </div>
-      </div>
-      <video ref="videoPlayer" width="1300" height="750" class="custom-video video-js vjs-big-play-centered"
-        @play="handlePlay" @pause="handlePause" @ended="handleEnd">
-      </video>
-      <el-alert v-if="showProgressTip" type="info" :closable="false" class="progress-alert">
-        已为您定位到上次播放位置：{{ formatTime(lastPosition) }}
-      </el-alert>
+      </main>
     </div>
-    <div class="mt20 text-center" v-else>
-      抱歉，暂不支持手机端，请前往电脑端观看学习
+
+    <div v-else class="mobile-tip">
+      <i class="el-icon-monitor" />
+      <p>抱歉，暂不支持手机端，请前往电脑端观看学习</p>
     </div>
   </div>
 </template>
@@ -74,6 +119,12 @@ export default {
   computed: {
     fullVideoPath() {
       return `${process.env.VUE_APP_BASE_API}/profile/upload/${this.videoPath}`
+    },
+    progressPercentClass() {
+      if (this.percentage >= 100) return 'is-complete'
+      if (this.percentage >= 80) return 'is-high'
+      if (this.percentage >= 50) return 'is-mid'
+      return 'is-low'
     }
   },
   created() {
@@ -110,9 +161,9 @@ export default {
     initPlayer() {
       const self = this;
       this.player = videojs(this.$refs.videoPlayer, {
-        // 增加错误处理回调
         errorDisplay: false,
         autoplay: false,
+        fluid: true,
         controls: true,
         sources: [{ src: this.fullVideoPath, type: 'video/mp4' }],
         controlBar: {
@@ -208,7 +259,7 @@ export default {
         await updateStudy({
           studyId: this.videoId,
           lastPoint: percentage,
-          getHours: Math.round((this.resource.hours * percentage) / 100),
+          getHours: Math.round((Number(this.resource.hours) * percentage / 100) * 10) / 10,
           lastTime: this.parseTime(new Date(), '{y}-{m}-{d}')
         });
         // 始终更新 lastPosition（即使播放结束）
@@ -249,28 +300,195 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.video-container {
-  position: relative;
+.video-study-root {
+  height: calc(100vh - 84px);
+  min-height: 520px;
+  background: #f0f2f5;
+}
+
+.video-study {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.study-sidebar {
+  flex-shrink: 0;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px 18px;
+  background: #fff;
+  border-right: 1px solid #e4e7ed;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
+  overflow-y: auto;
+}
+
+.sidebar-top {
+  .back-btn {
+    padding: 0;
+    font-size: 14px;
+    color: #409eff;
 
-  .return-btn {
-    position: absolute;
-    left: 20px;
-    top: 30px;
-    width: 130px;
+    &:hover {
+      color: #66b1ff;
+    }
   }
+}
+
+.resource-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.progress-card {
+  padding: 16px;
+  background: linear-gradient(135deg, #f5f9ff 0%, #f0f7ff 100%);
+  border: 1px solid #d9ecff;
+  border-radius: 8px;
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.progress-label {
+  font-size: 13px;
+  color: #606266;
+}
+
+.progress-percent {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1;
+
+  &.is-low { color: #f56c6c; }
+  &.is-mid { color: #e6a23c; }
+  &.is-high { color: #409eff; }
+  &.is-complete { color: #67c23a; }
+}
+
+.page-stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.hours-info {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #d9ecff;
+  font-size: 12px;
+  color: #909399;
+
+  span {
+    color: #409eff;
+    font-weight: 600;
+  }
+}
+
+.tips-card {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #909399;
+  background: #fafafa;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+
+  i {
+    flex-shrink: 0;
+    margin-top: 2px;
+    font-size: 14px;
+    color: #c0c4cc;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.video-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: #1a1a1a;
+}
+
+.video-wrapper {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 32px;
+  min-height: 0;
+}
+
+.custom-video {
+  width: 100%;
+  max-width: 1100px;
+  max-height: 100%;
+}
+
+.video-wrapper ::v-deep .video-js {
+  width: 100%;
+  max-width: 1100px;
+  max-height: calc(100vh - 84px - 48px);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+}
+
+.video-wrapper ::v-deep .vjs-tech {
+  border-radius: 8px;
+}
+
+.resume-alert {
+  position: absolute;
+  left: 50%;
+  bottom: 32px;
+  transform: translateX(-50%);
+  width: auto;
+  max-width: 480px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.mobile-tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
 
-  .custom-video {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, 0%);
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
   }
 
-  .progress-alert {
-    position: absolute;
-    bottom: 40px;
-    width: 100%;
-    z-index: 1;
+  p {
+    margin: 0;
+    font-size: 14px;
   }
 }
 </style>