新增打开新课件，优化PDF插件查看器

2024-10-11 16:21:52 +08:00 · 2024-10-11 16:21:52 +08:00 · 6911a92ecb
parent 8eff515fd8
commit 6911a92ecb
11 changed files with 135 additions and 44 deletions
--- a/src/renderer/public/pdfjs-dist/web/pdfjs-qinqing-custome/pdfjs-qinqing-custome.js
+++ b/src/renderer/public/pdfjs-dist/web/pdfjs-qinqing-custome/pdfjs-qinqing-custome.js
--- a/src/renderer/public/pdfjs-dist/web/viewer.css
+++ b/src/renderer/public/pdfjs-dist/web/viewer.css
@ -2782,7 +2782,8 @@
  --editor-toolbar-base-offset:105px;

  --main-color:rgb(12 12 13);
-  --body-bg-color:rgb(255, 255, 255);
+  /* --body-bg-color:rgb(255, 255, 255); */
+  --body-bg-color:rgb(241, 241, 252);
  --progressBar-color:rgb(10 132 255);
  --progressBar-bg-color:rgb(221 221 222);
  --progressBar-blend-color:rgb(116 177 239);
@ -3148,12 +3149,12 @@ body{
 }

 #toolbarViewer{
-  width: 300px;
-  height: 32px;
+  width: auto;
+  height: 60px;
  position: fixed;
  z-index: 9999;
  bottom: 15px;
-  left: 50%;
+  right: 2%;
  background-color: #fff;
  border-radius: 4px;
  transform: translateX(-50%);
@ -3477,8 +3478,9 @@ body{
 }

 #toolbarViewerLeft{
-  padding-inline-start:1px;
+  /* padding-inline-start:1px; 修改样式*/
 }
+
 #toolbarViewerRight{
  padding-inline-end:1px;
 }
@ -3693,7 +3695,7 @@ body{
          mask-image:var(--findbarButton-next-icon);
 }

-#previous::before{
+/* #previous::before{
  -webkit-mask-image:var(--toolbarButton-pageUp-icon);
          mask-image:var(--toolbarButton-pageUp-icon);
 }
@ -3701,8 +3703,27 @@ body{
 #next::before{
  -webkit-mask-image:var(--toolbarButton-pageDown-icon);
          mask-image:var(--toolbarButton-pageDown-icon);
+} */
+ /* 修改样式 */
+#toolbarViewerLeft .toolbarButton{
+  width: 80px;
+  height: 60px;
+  margin: 0;
+}
+#toolbarViewerLeft .toolbarButton::before{
+  opacity: 0;
+}
+#toolbarViewerLeft .toolbarButton span{
+  width: auto;
+  height: auto;
+}
+.toolpageBtn{
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
 }
-
 #zoomOut::before{
  -webkit-mask-image:var(--toolbarButton-zoomOut-icon);
          mask-image:var(--toolbarButton-zoomOut-icon);
--- a/src/renderer/public/pdfjs-dist/web/viewer.html
+++ b/src/renderer/public/pdfjs-dist/web/viewer.html
@ -44,11 +44,11 @@ See https://github.com/adobe-type-tools/cmap-resources
        <div id="toolbarSidebar">
          <div id="toolbarSidebarLeft">
            <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
-              <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
-                 <span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
-              </button>
              <button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false" aria-controls="outlineView">
                 <span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span>
+              </button>
+              <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
+                <span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
             </button>
              <button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
                 <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
@ -273,14 +273,17 @@ See https://github.com/adobe-type-tools/cmap-resources
          <div id="toolbarContainer">
            <div id="toolbarViewer">
              <div id="toolbarViewerLeft">
-                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
-                  <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
+                <button id="sidebarToggle" class="toolbarButton"  tabindex="11" aria-expanded="false" aria-controls="sidebarContainer">
+                  <span>目录</span>
                </button>
-                <div class="toolbarButtonSpacer"></div>
-                <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
+                <!-- <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
+                  <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
+                </button> -->
+                <!-- <div class="toolbarButtonSpacer"></div> -->
+                <button style="display: none;" id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
                  <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
                </button>
-                <div class="splitToolbarButton hiddenSmallView">
+                <div class="splitToolbarButton toolpageBtn">
                  <button class="toolbarButton" title="Previous Page" id="previous" tabindex="13" data-l10n-id="pdfjs-previous-button">
                    <span data-l10n-id="pdfjs-previous-button-label">Previous</span>
                  </button>
@ -289,12 +292,12 @@ See https://github.com/adobe-type-tools/cmap-resources
                    <span data-l10n-id="pdfjs-next-button-label">Next</span>
                  </button>
                </div>
-                <span class="loadingInput start">
+                <span class="loadingInput start" style="display: none;">
                  <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
                </span>
-                <span id="numPages" class="toolbarLabel"></span>
+                <span id="numPages" class="toolbarLabel" style="display: none;"></span>
              </div>
-              <div id="toolbarViewerRight">
+              <div id="toolbarViewerRight" style="display: none;">
                <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
                  <button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
                    <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
--- a/src/renderer/public/pdfjs-dist/web/viewer.mjs
+++ b/src/renderer/public/pdfjs-dist/web/viewer.mjs
@ -7407,7 +7407,8 @@ class PDFSidebar {
    this.isInitialViewSet = false;
    this.isInitialEventDispatched = false;
    this.#hideUINotification(true);
-    this.switchView(SidebarView.THUMBS);
+    // this.switchView(SidebarView.THUMBS);默认开启书签模式
+    this.switchView(SidebarView.OUTLINE);
    this.outlineButton.disabled = false;
    this.attachmentsButton.disabled = false;
    this.layersButton.disabled = false;
@ -13095,12 +13096,16 @@ const PDFViewerApplication = {
        this.pdfViewer.scrollMode = scroll;
      }
      if (isValidSpreadMode(spread)) {
-        this.pdfViewer.spreadMode = spread;
+        //默认双页
+        // this.pdfViewer.spreadMode = spread;
+        this.pdfViewer.spreadMode = 1;
      }
    };
    this.isInitialViewSet = true;
    this.pdfSidebar?.setInitialView(sidebarView);
-    setViewerModes(scrollMode, spreadMode);
+    //默认双页
+    // setViewerModes(scrollMode, spreadMode);
+    setViewerModes(scrollMode, 1);
    if (this.initialBookmark) {
      setRotation(this.initialRotation);
      delete this.initialRotation;
--- a/src/renderer/src/components/PdfJs/index.vue
+++ b/src/renderer/src/components/PdfJs/index.vue
@ -12,15 +12,20 @@ const props = defineProps({
    type: String,
    required: true,
    default: ''
+  },
+  isWin: {
+    type: Boolean,
+    default: false
  }
 })
 /**pdf文件地址 */
 const pdfUrl = ref('');
 /**pdfjs文件地址 */
-const fileUrl = getAppInstallUrl('pdfjs-dist/web/viewer.html', 'user', '\\out\\renderer', true) + "?file=" //本地
+const fileUrl = props.isWin ? props.url : getAppInstallUrl('pdfjs-dist/web/viewer.html', 'user', '\\out\\renderer', true) + "?file=" //本地
 onMounted(() => {
    /** 将传入的pdf地址进行编码，防止中文识别错误 */
-    pdfUrl.value = fileUrl + encodeURIComponent(props.url)
+    if(props.isWin) pdfUrl.value = fileUrl
+    else pdfUrl.value = fileUrl + encodeURIComponent(props.url) + '#pageMode=outline'
 })
 </script>

--- a/src/renderer/src/router/index.js
+++ b/src/renderer/src/router/index.js
@ -15,6 +15,12 @@ export const constantRoutes = [
    // component: ()=> import('../login/index.vue'),
    hidden: true
  },
+  {
+    path: '/fullscreenpdf',
+    component: () => import('@/views/fullScreenPdf/index.vue'),
+    name: 'fullscreenpdf',
+    meta: {title: '全屏显示PDF'}
+  },
  {
    path: '/',
    component: Layout,
@ -74,6 +80,7 @@ export const constantRoutes = [
        name: 'testpdf',
        meta: {title: '测试PDF'}
      },
+      
      {
        path: '/classReserv',
        component: () => import('@/views/classManage/classReserv.vue'),
--- a/src/renderer/src/utils/tool.js
+++ b/src/renderer/src/utils/tool.js
@ -325,7 +325,22 @@ export const toLinkWeb = (path) => {
    cookieData: { ...config }
  })
 }
-
+/**
+ * @description 外部跳转-web网页
+ * @param {*} path
+ * @param {*} params
+ */
+export const toRoter = (path) => {
+  const config = baseConfig()
+  // console.log(config)
+  // const fullPath = config.url + path
+  // 通知主进程
+  ipcRenderer.send('openWindow', {
+    key: `win-${Date.now()}`,
+    fullPath: path,
+    cookieData: { ...config }
+  })
+}
 // const taskHandles = () => {
 //   // 设置任务栏上下文菜单
 //   const contextMenu = new Remote.Menu()
--- a/src/renderer/src/views/prepare/index.vue
+++ b/src/renderer/src/views/prepare/index.vue
@ -187,7 +187,7 @@ import { parseCataByNode, creatPPT, asyncLocalFile } from '@/utils/talkFile'
 import FileOperBatch from '@/views/prepare/container/file-oper-batch.vue'
 import SetHomework from '@/components/set-homework/index.vue'
 import outLink from '@/utils/linkConfig'
-import { createWindow, sessionStore } from '@/utils/tool'
+import { createWindow, sessionStore, getAppInstallUrl } from '@/utils/tool'
 import { cloneDeep } from 'lodash'
 import { delClasswork, listEntpcourse } from '@/api/teaching/classwork'
 import { getClassInfo, getSelfReserv } from '@/api/classManage'
@ -330,8 +330,8 @@ export default {
        this.openLesson(res.data.id);
      })
    },
-    getBookPathFromServer() {
-      let fileName = this.curBookPath
+    getBookPathFromServer(path) {
+      let fileName = path ? path : this.curBookPath
      if (!fileName) return
      fileName = fileName.replace('.txt', '.pdf')
      return new Promise((resolve, reject) => {
@ -575,6 +575,9 @@ export default {
      if (this.currentNode.id === data.node.id) return
      this.curBookImg = data.textBook.curBookImg
      this.curBookPath = data.textBook.curBookPath
+      const path = await this.getBookPathFromServer(data.textBook.curBookPath)
+      const localpath = getAppInstallUrl('pdfjs-dist/web/viewer.html', 'user', '\\out\\renderer', true) + "?file="
+      localStorage.setItem('PDF-LOCAL-PATH',localpath + encodeURIComponent(import.meta.env.VITE_APP_RES_FILE_PATH + path))
      this.checkFileList = []
      this.currentWorkList = []
      let cata = parseCataByNode(data.node)
--- a/src/renderer/src/views/textbookAnalysis/index.vue
+++ b/src/renderer/src/views/textbookAnalysis/index.vue
@ -7,7 +7,7 @@
          <el-image class="imges" :src="bookInfo ? bookInfo.avartar : ''" />
        </div>
        <div class="stand-head-right">
-          <div class="stand-head-right-tit">{{booktitle}}</div>
+          <div class="stand-head-right-tit">{{bookInfo ? bookInfo.bookName: ''}}</div>
          <i class="iconfont icon-yidongdaozu stand-head-right-icon" @click="dialogVisible = true"></i>
          <div class="stand-head-right-row">
            <div class="stand-head-right-row-time">更新2024.9.10</div>
@ -72,7 +72,7 @@
      <div class="booklist">
        <div :class="{'item': true,'active': booksel === idx}" v-for="item,idx in bookList" :key="idx" @click="bookChange(item,idx)">
          <el-image class="bookimg" :src="item.avartar" />
-          <div class="bookname">{{item.fileurl.replace('.txt', '')}}</div>
+          <div class="bookname">{{item.bookName}}</div>
        </div>
      </div>
    </el-dialog>
@ -84,11 +84,13 @@ import PDF from '@/components/PdfJs/index.vue'
 import { useRoute } from 'vue-router';
 import useResoureStore from '../resource/store'
 import { listEvaluationclue } from '@/api/teaching/classwork'
-import { uploadServer, getJSONFile } from '@/utils/common'
+// import { uploadServer, getJSONFile } from '@/utils/common'
 import { ElNotification } from 'element-plus'
 import ChooseTextbook from "@/components/choose-textbook/index.vue";
 import { listEvaluation } from '@/api/classManage/index'
 import useUserStore from '@/store/modules/user'
+import { sessionStore } from '@/utils/store'
+import { useGetSubject } from '@/hooks/useGetSubject'
 const userStore = useUserStore()
 const sourceStore = useResoureStore()
 // import { getStaticUrl } from '@/utils/tool'
@ -105,7 +107,6 @@ const headref = ref(null);
 const searchref = ref(null);
 const listHeight = ref(0);
 const dialogVisible = ref(false);
-const booktitle = ref('');
 const bookInfo = ref(null);
 const booksel = ref(0);
 const bookList = ref([])
@ -248,31 +249,43 @@ const getAllSubject = async () => {
  const dataList = [];
  rows && rows.map((item,idx) => {
    if(item.fileurl !== ''){
-      dataList.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar})
+      dataList.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar,bookName: item.fileurl.replace('.txt','')})
    }
  })
  bookList.value = dataList
-  bookInfo.value = {...dataList[0],avartar: dataList[0].avartar}
-  booktitle.value = dataList[0].fileurl.replace('.txt','')
-  const filePath = import.meta.env.VITE_APP_RES_FILE_PATH + dataList[0].fileurl.replace('.txt','.pdf')
+  const { id, rootid } = sessionStore.get('subject.curNode')
+  if(id && rootid){
+    const idx = dataList.findIndex(item => item.id === id && item.rootid === rootid)
+    let filePath = import.meta.env.VITE_APP_RES_FILE_PATH;
+    if(idx > -1){
+      bookInfo.value = {...dataList[idx]}
+      filePath += dataList[idx].fileurl.replace('.txt','.pdf')
+    }else{
+      bookInfo.value = {...dataList[0]}
+      filePath += dataList[0].fileurl.replace('.txt','.pdf')
+    }
    await loadPdfAnimation(filePath)  
  }
+  
+  
+}
 const bookChange = async (item, idx) => {
  booksel.value = idx
  bookInfo.value = {...item}
-  booktitle.value = item.fileurl.replace('.txt','')
  pdfUrl.value = '';
  const filepath = import.meta.env.VITE_APP_RES_FILE_PATH + item.fileurl.replace('.txt','.pdf')
  await loadPdfAnimation(filepath)
  dialogVisible.value = false
 }
 const loadPdfAnimation = (path) => {
+  console.log('书本地址====',path);
  const timer = setTimeout(() => {
    pdfUrl.value = path
    clearTimeout(timer);
  },2000)
 }
 onMounted(async () => {
+  await useGetSubject();
  await getAllSubject();
  if(cardref.value && headref.value){
    const cardH = cardref.value.offsetHeight;
@ -423,13 +436,18 @@ onMounted(async () => {
    z-index: 2;
    &-tit{
      width: 100%;
+      height: 44px;
+      line-height: 22px;
      font-size: 15px;
      font-weight: 600;
-      white-space: nowrap;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #3b3b3b;
      text-align: left;
+      padding-right: 30px;
    }
    &-icon{
      position: absolute;
@ -443,7 +461,6 @@ onMounted(async () => {
      height: 32px;
      display: flex;
      justify-content: space-between;
-      margin-top: 12px;
      &-time{
        font-size: var(--el-font-size-extra-small);
        color: var(--el-color-info-rgb);
@ -537,9 +554,10 @@ onMounted(async () => {
      width: 130px;
      height: 180px;
    }
-    .name{
+    .bookname{
+      height: 60px;
+      line-height: 20px;
      font-size: 14px;
-      color: #3b3b3b;
    }
  }
  .item:hover{
--- a/src/renderer/src/views/tool/components/side.vue
+++ b/src/renderer/src/views/tool/components/side.vue
@ -38,7 +38,7 @@ import { computed, defineProps, ref, reactive, watchEffect, onMounted } from 'vu
 import homework from './homework.vue';

 // 功能说明：侧边-工具栏
-const colors = ['#00f389', '#ff7f00', '#ffff00', '#409EFF', '#00baff', '#13b189', '#F56C6C']
+const colors = ['#409EFF','#00f389', '#ff7f00', '#ffff00', '#00baff', '#13b189', '#F56C6C']
 const emit = defineEmits(['update:modelValue','change'])
 const props = defineProps({
  modelValue: { // 是否显示
@ -48,6 +48,7 @@ const props = defineProps({
  data: { // 数据
    type: Array,
    default: () => [
+      { label: '课件', prop: 'book', isExtra: true, icon: 'icon--kejian' },
      { label: '资源', prop: 'resource', icon: 'icon-kechengziyuan1' },
      { label: '互动', prop: 'interact', icon: 'icon-hudong' },
      { label: '窗口', prop: 'win', icon: 'icon-tubiaozhizuomobanyihuifu-' },
--- a/src/renderer/src/views/tool/sphere.vue
+++ b/src/renderer/src/views/tool/sphere.vue
@ -52,7 +52,7 @@ import imChat from './components/imChat.vue'    // im-chat-子组件
 import vDrag from './directive/drag'            // 自定义指令-拖拽
 import vIgnore from './directive/ignore'        // 自定义指令-穿透
 import { useToolState } from '@/store/modules/tool' // 数据状态-缓存
-import { ipcMsgSend, ipcMain, sessionStore } from '@/utils/tool' // 相关工具
+import { ipcMsgSend, ipcMain, sessionStore, toRoter } from '@/utils/tool' // 相关工具
 import MsgEnum from '@/plugins/imChat/msgEnum' // 消息头-相关定义(nuem)

 const route = useRoute();
@ -62,6 +62,7 @@ const isDrag = ref(false)         // 开始拖拽
 const dragtime = ref(0)           // 拖拽时间-计算点击还是拖动
 const isShow = ref(false)         // 是否显示-画板
 const isOver = ref(false)         // 是否下课
+const isOpenBook = ref(false)
 const toolStore = useToolState()  // 状态管理
 const boardVueRef=ref(null)       // 画板ref
 const upvoteRef = ref(null)       // 点赞 ref
@ -70,6 +71,7 @@ const classObj = reactive({       // 课程相关
  id: route.query.reservId,       // 课程id
  data: {}                        // 课程信息
 })
+const bookInfo = ref(null)
 const msgIds = []                 // 消息id
 const electron = window.electron  // electron
 const btnList = [                 // 工具栏按钮列表
@ -88,6 +90,7 @@ onMounted(async() => {
  window.test1 = toolStore
  getClassInfo()        // 获取课堂详情 ex3
  resetStatus()       // 开启重置状态-监听
+ 
 })

 // ==== 方法 ===
@ -204,6 +207,16 @@ const sideMouse = e => {
 const sideChange = async o => {
  // console.log(o)
  switch(o.prop) {
+    case 'book':
+      if(isOpenBook.value) {
+        isOpenBook.value = false
+        ElMessage.info('已经打开课本了哦')
+      }else {
+        // createWindow('fullScreen-PDF',{url: '/fullscreenpdf'})
+        toRoter(`${process.env['ELECTRON_RENDERER_URL']}/#/fullscreenpdf`)
+        isOpenBook.value = true
+      }
+      break
    case 'resource': // 资源
      break
    case 'interact': // 互动