Merge pull request 'zdg' (#105) from zdg into main

Reviewed-on: #105

src/renderer/src/api/eTextbook/index.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 新增pdf圈点勾画
+export const addsmartBookMark = (params) => {
+  return request({
+    url: '/smarttalk/bookMark/addSmartBookMark',
+    method: 'post',
+    data:params
+  })
+}
+
+// 修改pdf圈点勾画
+export const updateSmartBookMarkContent = (params) => {
+  return request({
+    url: '/smarttalk/bookMark/updateSmartBookMarkContent',
+    method: 'post',
+    data:params
+  })
+}
+
+// 根据书id获取pdf圈点勾画
+export const getBookMarkById = (bookId) => {
+  return request({
+    url: '/smarttalk/bookMark/' + bookId,
+    method: 'get'
+  })
+}
+
+//根据id删除对应页数
+export function deleteBookMark(ids) {
+  return request({
+    url: '/smarttalk/bookMark/' + ids,
+    method: 'delete'
+  })
+}

src/renderer/src/components/pdf/index copy.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="canvasitem">
+    <div class="pdfAdnFabric" id="pdfAdnFabric">
+      <canvas id="pdf-fabric"></canvas>
+      <canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup >
+import {
+  ref,
+  onMounted,
+  watch,
+  reactive,
+  nextTick,
+} from 'vue'
+import { fabric } from 'fabric'
+import { ElMessage } from 'element-plus'
+import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
+
+const props = defineProps({
+  pdfObj: {
+    type: Object,
+    default: {
+      numberOfPdf: 2, //pdf数量 只有 1  2
+      pdfUrl: null,
+      numPages: 1
+    }
+  }
+})
+// canvas的所有数据
+const canvsStore = reactive({
+  id: 'xxxx',
+  pageArr: []
+})
+const fabriccanvas = ref(null)
+const fabriccanvas1 = ref(null)
+// 页面总数
+const numPagesTotal = ref(0)
+const imgarr = ref([])
+// 多个pdf的对象
+const canvasNumbsValue = ref([])
+const emit = defineEmits(['update:numPagesTotal'])
+const renderPage = async (canvasobj) => {
+  if (canvasobj.page > numPagesTotal.value) return
+  const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
+  // 渲染当前页
+  const page = await pdf.getPage(canvasobj.page)
+  var screenWidth = window.innerWidth/2-100;
+  var screenHeight = window.innerHeight;
+  const viewport = page.getViewport({ scale:2})
+ 
+  const canvasElement = canvasobj.canvas
+  canvasElement.width = viewport.width
+  canvasElement.height = viewport.height
+  const renderContext = {
+    canvasContext: canvasobj.context,
+    viewport: viewport
+  }
+  page.render(renderContext).promise.then((res) => {
+    const img = document.createElement('img')
+    img.src = canvasobj.canvas.toDataURL('image/png')
+    canvasobj.canvas.remove()
+    imgarr.value.push({ src: img.src, page: canvasobj.page, JSONdata: {}, index: canvasobj.index })
+    img.onload = () => {
+      // 在这里执行图像加载完成后的操作
+      // 根据传过来的pdf对象 判断改渲染哪一个fabric
+      if (props.pdfObj.numberOfPdf == 2) {
+        if (canvasobj.index == 0) {
+        
+          fabriccanvas.value.setWidth(screenWidth)
+          fabriccanvas.value.setHeight(screenHeight)
+          displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
+        } else {
+          fabriccanvas1.value.setWidth(screenWidth)
+          fabriccanvas1.value.setHeight(screenHeight)
+          displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
+        }
+      } else {
+        fabriccanvas.value.setWidth(screenWidth)
+        fabriccanvas.value.setHeight(screenHeight)
+        displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
+      }
+      // console.log(imgarr.value)
+      img.remove()
+    }
+      // 判断imgarr的JSONdata在canvsStore.pageArr有没有
+      canvsStore.pageArr.forEach((item) => {
+      if (item.page == canvasobj.page) {
+        imgarr.value.forEach((img) => {
+          if (img.page == canvasobj.page) {
+            img.JSONdata = item.JSONdata
+          }
+        })
+      }
+    })
+  })
+}
+const updatePage = (canvasobj) => {
+  renderPage(canvasobj)
+}
+const loadPdf = async (canvasobj) => {
+  updatePage(canvasobj)
+}
+
+const initPdf = async (type = 'default') => {
+  // 保存数据
+   savecanvsStore(imgarr, canvsStore)
+  // initcanvasdata(fabriccanvas)
+  // initcanvasdata(fabriccanvas1)
+  // 单页模式
+  if (type == 'restone') {
+    // 清除 canvas 上的所有对象
+    fabriccanvas1.value.clear()
+    // 释放 canvas 的资源
+    fabriccanvas1.value.dispose()
+  }
+  // 清除现有 canvas 元素的内容
+  canvasNumbsValue.value.forEach((canvasObj) => {
+    const context = canvasObj.context
+    context.clearRect(0, 0, canvasObj.canvas.width, canvasObj.canvas.height)
+  })
+  // 清除所有对象
+  imgarr.value = []
+  canvasNumbsValue.value = []
+  if (props.pdfObj.pdfUrl) {
+    await nextTick() // 确保 DOM 渲染完成
+    if (props.pdfObj.numberOfPdf == 1) {
+      canvasNumbsValue.value = [{}]
+      const canvasElement = document.createElement('canvas')
+      canvasNumbsValue.value[0].canvas = canvasElement
+      canvasNumbsValue.value[0].context = canvasNumbsValue.value[0].canvas.getContext('2d')
+      canvasNumbsValue.value[0].page = props.pdfObj.numPages
+      canvasNumbsValue.value[0].index = 0
+      await loadPdf(canvasNumbsValue.value[0])
+    } else {
+      for (var i = 0; i < props.pdfObj.numberOfPdf; i++) {
+        canvasNumbsValue.value[i] = {}
+        const canvasElement = document.createElement('canvas')
+        canvasNumbsValue.value[i].canvas = canvasElement
+        canvasNumbsValue.value[i].context = canvasNumbsValue.value[i].canvas.getContext('2d')
+        // 设置页数
+        if (i == 0) {
+          canvasNumbsValue.value[i].page = props.pdfObj.numPages
+        } else {
+          canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
+        }
+
+        canvasNumbsValue.value[i].index = i
+        // 加载FabricVue
+        await loadPdf(canvasNumbsValue.value[i])
+      }
+    }
+  }
+}
+const initPdfone = async () => {
+  setTimeout(() => {
+    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    fabriccanvas1.value.isDrawingMode = true
+    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    fabriccanvas1.value.freeDrawingCursor = 'default'
+    fabriccanvas1.value.setWidth(860)
+    handleevent(fabriccanvas1.value, imgarr, 'two')
+  }, 0) 
+  initPdf('addOnePage')
+}
+onMounted(async () => {
+  try {
+    const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
+    numPagesTotal.value = pdf.numPages
+    // console.log(pdf)
+    //   初始化fabriccanvas
+    fabriccanvas.value = new fabric.Canvas('pdf-fabric')
+    fabriccanvas.value.setWidth(860)
+    fabriccanvas.value.isDrawingMode = true
+    fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
+    fabriccanvas.value.freeDrawingCursor = 'default'
+
+    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    fabriccanvas1.value.isDrawingMode = true
+    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    fabriccanvas1.value.freeDrawingCursor = 'default'
+    fabriccanvas1.value.setWidth(860)
+    emit('update:numPagesTotal', pdf.numPages)
+    initPdf()
+  } catch (error) {
+    console.log(error)
+    ElMessage.error('pdf文件错误')
+  }
+  // 监听2个canvas事件
+  handleevent(fabriccanvas.value, imgarr)
+  handleevent(fabriccanvas1.value, imgarr, 'two')
+})
+defineExpose({
+  initPdf,
+  initPdfone
+})
+</script>
+
+<style lang="scss" scoped>
+.canvasitem {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+.pdfAdnFabric {
+  position: relative;
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  :deep(> div:nth-of-type(1)) {
+    margin-right: 10px;
+  }
+}
+</style>

src/renderer/src/components/pdf/index.vue

@@ -1,8 +1,18 @@
-<template>
+pdfAdnFabric<template>
   <div class="canvasitem">
     <div class="pdfAdnFabric" id="pdfAdnFabric" >
-      <canvas id="pdf-fabric"></canvas>
+      <!-- @touchmove="handleTouchMove"
-      <canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
+            @touchend="handleTouchEnd"
+            @mousedown="handleMouseDown"
+            @mousemove="handleMouseMove"
+            @mouseup="handleMouseUp" -->
+      <div :class="ispointer ? 'ispointer' : ''">
+        <canvas ref="fabriccanvas" />
+      </div>
+      <!-- style="pointer-events: none;" -->
+      <div v-if="props.pdfObj.numberOfPdf === 2" :class="ispointer ? 'ispointer' : ''">
+        <canvas ref="fabriccanvas1" />
+      </div>
     </div>
   </div>
 </template>
@@ -16,12 +26,17 @@ import {
   defineProps,
   defineExpose,
   nextTick,
-  defineEmits
+  defineEmits,watchEffect
 } from 'vue'
-import { fabric } from 'fabric'
+// import { fabric } from 'fabric'
 import { ElMessage } from 'element-plus'
 import { handleevent, savecanvsStore, initcanvasdata, displayData } from '@/utils/pdfAndFabric'
+import { fabricVue, TYPES } from '@/plugins/fabric'
+import { updateSmartBookMarkContent, addsmartBookMark,getBookMarkById } from '@/api/eTextbook/index'
+import {useToolState} from '@/store/modules/tool'
+const { ipcRenderer } = require('electron')
 
+const toolState = useToolState();
 const props = defineProps({
   pdfObj: {
     type: Object,
@@ -32,13 +47,16 @@ const props = defineProps({
     }
   }
 })
+const ispointer = ref(false) //是否画笔模式
 // canvas的所有数据
 const canvsStore = reactive({
-  id: 'xxxx',
   pageArr: []
 })
 const fabriccanvas = ref(null)
 const fabriccanvas1 = ref(null)
+
+const canvasFabricVue = ref(null)
+const canvas1FabricVue = ref(null)
 // 页面总数
 const numPagesTotal = ref(0)
 const imgarr = ref([])
@@ -50,8 +68,8 @@ const renderPage = async (canvasobj) => {
   const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
   // 渲染当前页
   const page = await pdf.getPage(canvasobj.page)
-  var screenWidth = window.innerWidth/2-100;
+  var screenWidth = window.innerWidth / 2 - 100
-  var screenHeight = window.innerHeight;
+  var screenHeight = window.innerHeight
   const viewport = page.getViewport({ scale: 2 })
 
   const canvasElement = canvasobj.canvas
@@ -61,6 +79,8 @@ const renderPage = async (canvasobj) => {
     canvasContext: canvasobj.context,
     viewport: viewport
   }
+  // console.log(renderContext,22222222222222222222)
+
   page.render(renderContext).promise.then((res) => {
     const img = document.createElement('img')
     img.src = canvasobj.canvas.toDataURL('image/png')
@@ -71,33 +91,68 @@ const renderPage = async (canvasobj) => {
       // 根据传过来的pdf对象 判断改渲染哪一个fabric
       if (props.pdfObj.numberOfPdf == 2) {
         if (canvasobj.index == 0) {
-        
+          canvasFabricVue.value.canvas.setWidth(screenWidth)
-          fabriccanvas.value.setWidth(screenWidth)
+          canvasFabricVue.value.canvas.setHeight(screenHeight)
-          fabriccanvas.value.setHeight(screenHeight)
+          // updateCanvasBackgroundImage(canvasFabricVue,img)
-          displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
+          displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
         } else {
-          fabriccanvas1.value.setWidth(screenWidth)
+          canvas1FabricVue.value.canvas.setWidth(screenWidth)
-          fabriccanvas1.value.setHeight(screenHeight)
+          canvas1FabricVue.value.canvas.setHeight(screenHeight)
-          displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
+          displayData(canvas1FabricVue, canvsStore, canvasobj, fabric, img)
         }
       } else {
-        fabriccanvas.value.setWidth(screenWidth)
+        canvasFabricVue.value.canvas.setHeight(screenHeight)
-        fabriccanvas.value.setHeight(screenHeight)
+        displayData(canvasFabricVue, canvsStore, canvasobj, fabric, img)
-        displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
       }
-      // console.log(imgarr.value)
       img.remove()
     }
     // 判断imgarr的JSONdata在canvsStore.pageArr有没有
-      canvsStore.pageArr.forEach((item) => {
+    //   canvsStore.pageArr.forEach((item) => {
-      if (item.page == canvasobj.page) {
+    //   if (item.page == canvasobj.page) {
-        imgarr.value.forEach((img) => {
+    //     imgarr.value.forEach((img) => {
-          if (img.page == canvasobj.page) {
+    //       if (img.page == canvasobj.page) {
-            img.JSONdata = item.JSONdata
+    //         img.JSONdata = item.JSONdata
-          }
+    //       }
+    //     })
+    //   }
+    // })
   })
 }
+// 保存数据
+const savaDataStore = () => {
+  imgarr.value.forEach((a) => {
+    if (a.index == 0) {
+      a.JSONdata = canvasFabricVue.value.canvas.toJSON()
+    } else {
+      a.JSONdata = canvas1FabricVue.value.canvas.toJSON()
+    }
   })
+    const nameMap = new Map(canvsStore.pageArr.map((item) => [item.page, item.id]))
+    // 创建一个用于存储所有异步操作的数组
+    let promises = []
+    imgarr.value.forEach((item) => {
+      if (nameMap.has(item.page)) {
+        const params = {
+          id: nameMap.get(item.page),
+          contentData: JSON.stringify(item.JSONdata.objects)
+        }
+        promises.push(updateSmartBookMarkContent([params]))  
+      } else {
+        promises.push(addsmartBookMark({
+          pageNum: item.page,
+          contentData: JSON.stringify(item.JSONdata.objects),
+          bookId: props.pdfObj.bookId,
+          type: '教材',
+          source: 'smarttalk'
+        }))
+        
+      }
+    })
+    Promise.all(promises).then(res=>{
+      toolState.isPdfWin=false
+      toolState.showBoardAll=true //恢复默认值
+      ipcRenderer.invoke('tool-sphere:reset') //重置tool状态
+      ipcRenderer.send('open-PDF:minimize')
     })
 }
 const updatePage = (canvasobj) => {
@@ -108,16 +163,54 @@ const loadPdf = async (canvasobj) => {
 }
 
 const initPdf = async (type = 'default') => {
+  imgarr.value.forEach((a) => {
+    if (a.index == 0) {
+      a.JSONdata = canvasFabricVue.value.canvas.toJSON()
+    } else {
+      a.JSONdata = canvas1FabricVue.value.canvas.toJSON()
+    }
+  })
+  if (type != 'default') {
+    const nameMap = new Map(canvsStore.pageArr.map((item) => [item.page, item.id]))
+    // 创建一个用于存储所有异步操作的数组
+    let promises = []
+    imgarr.value.forEach((item) => {
+      if (nameMap.has(item.page)) {
+        const params = {
+          id: nameMap.get(item.page),
+          contentData: JSON.stringify(item.JSONdata.objects)
+        }
+        promises.push(updateSmartBookMarkContent([params]))  
+      } else {
+        promises.push(addsmartBookMark({
+          pageNum: item.page,
+          contentData: JSON.stringify(item.JSONdata.objects),
+          bookId: props.pdfObj.bookId,
+          type: '教材',
+          source: 'smarttalk'
+        }))
+        
+      }
+    })
+    Promise.all(promises).then(res=>{
+      getBookMarkById(props.pdfObj.bookId).then(res=>{
+            const pageArr=getUniqueArrayByLastOccurrence(res.data)
+            canvsStore.pageArr=[]
+            pageArr.forEach((a) => {
+              canvsStore.pageArr.push({ page: a.pageNum, id: a.id, JSONdata: a.contentData })
+            })
+          })
+    })
+  }
   // 保存数据
-   savecanvsStore(imgarr, canvsStore)
+  //  savecanvsStore(imgarr, canvsStore)
-  // initcanvasdata(fabriccanvas)
+
-  // initcanvasdata(fabriccanvas1)
+  if (props.pdfObj.numberOfPdf == 1) {
-  // 单页模式
+    // imgarr.value[0]
-  if (type == 'restone') {
+    canvasFabricVue.value.history.clean()
-    // 清除 canvas 上的所有对象
+  } else {
-    fabriccanvas1.value.clear()
+    canvasFabricVue.value.history.clean()
-    // 释放 canvas 的资源
+    canvas1FabricVue.value.history.clean()
-    fabriccanvas1.value.dispose()
   }
   // 清除现有 canvas 元素的内容
   canvasNumbsValue.value.forEach((canvasObj) => {
@@ -149,7 +242,6 @@ const initPdf = async (type = 'default') => {
         } else {
           canvasNumbsValue.value[i].page = props.pdfObj.numPages + 1
         }
-
         canvasNumbsValue.value[i].index = i
         // 加载FabricVue
         await loadPdf(canvasNumbsValue.value[i])
@@ -157,47 +249,144 @@ const initPdf = async (type = 'default') => {
     }
   }
 }
+//根据page去重
+const getUniqueArrayByLastOccurrence=(array)=> {
+  const uniqueItems = array.reduce((acc, current) => {
+    // 使用 Map 来跟踪最后一个出现的 pageNum 和它的对象
+    acc.set(current.pageNum, current);
+    return acc;
+  }, new Map());
+
+  // 将 Map 的值转换回数组
+  const resultArray = Array.from(uniqueItems.values());
+
+  return resultArray;
+}
 const initPdfone = async () => {
-  setTimeout(() => {
+  setTimeout(async () => {
-    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    const option = { freeDrawingCursor: 'default' }
-    fabriccanvas1.value.isDrawingMode = true
+    const canvas2 = new fabricVue()
-    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    await canvas2.initCanvas(fabriccanvas1.value, option)
-    fabriccanvas1.value.freeDrawingCursor = 'default'
+    canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
-    fabriccanvas1.value.setWidth(595)
+    canvas1FabricVue.value = canvas2
-    handleevent(fabriccanvas1.value, imgarr, 'two')
+    await initPdf('addOnePage')
   }, 0)
-  initPdf('addOnePage')
 }
 onMounted(async () => {
   try {
+    // 创建canvas转化成图片
     const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
     numPagesTotal.value = pdf.numPages
-    // console.log(pdf)
     //   初始化fabriccanvas
-    fabriccanvas.value = new fabric.Canvas('pdf-fabric')
+    const option = { freeDrawingCursor: 'default' }
-    fabriccanvas.value.setWidth(595)
+    const canvas1 = new fabricVue()
-    fabriccanvas.value.isDrawingMode = true
+    // canvas1.boardConfig.mode= TYPES.ActionMode.OTHER
-    fabriccanvas.value.freeDrawingBrush.color = '#A33AFE'
+    // canvas1.boardConfig.mode= TYPES.ActionMode.ERASE
-    fabriccanvas.value.freeDrawingCursor = 'default'
+    await canvas1.initCanvas(fabriccanvas.value, option)
-
+    canvas1.canvas.setWidth(window.innerWidth / 2 - 100)
-    fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
+    canvasFabricVue.value = canvas1
-    fabriccanvas1.value.isDrawingMode = true
+    const canvas2 = new fabricVue()
-    fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
+    await canvas2.initCanvas(fabriccanvas1.value, option)
-    fabriccanvas1.value.freeDrawingCursor = 'default'
+    canvas2.canvas.setWidth(window.innerWidth / 2 - 100)
-    fabriccanvas1.value.setWidth(595)
+    // canvas2.canvas.isDrawingMode=false
+    canvas1FabricVue.value = canvas2
+    window.test = { canvas1, canvas2 }
     emit('update:numPagesTotal', pdf.numPages)
-    initPdf()
+
+    if (props.pdfObj.allPageData.length) {
+      props.pdfObj.allPageData.forEach((a) => {
+        if (a.pageNum == 1 || a.pageNum == 2) {
+          canvsStore.pageArr.push({ page: a.pageNum, id: a.id, JSONdata: a.contentData })
+        }
+      })
+    }
+    await initPdf()
   } catch (error) {
     console.log(error)
     ElMessage.error('pdf文件错误')
   }
+  setToolStatus()
   // 监听2个canvas事件
-  handleevent(fabriccanvas.value, imgarr)
+  // handleevent(fabriccanvas.value, imgarr)
-  handleevent(fabriccanvas1.value, imgarr, 'two')
+  // handleevent(fabriccanvas1.value, imgarr, 'two')
 })
+// zdg: 设置-底部工具栏-状态
+const setToolStatus = () => {
+  toolState.showBoardAll = false
+}
+// 判断元素是否加载完成 
+const handleMode = (vale,type)=>{
+  if(vale=='select'){
+    ispointer.value=true
+  }else{
+    ispointer.value=false
+  }
+  switch(vale) {
+    case 'select':  // 选择模式
+    canvasFabricVue.value?.handleMode(TYPES.ActionMode.OTHER)
+    canvas1FabricVue.value?.handleMode(TYPES.ActionMode.OTHER)
+      break
+    case 'brush':   // 画笔模式
+    canvasFabricVue.value?.handleMode(TYPES.ActionMode.DRAW)
+    canvasFabricVue.value.canvas.freeDrawingCursor = 'default'
+    canvas1FabricVue.value?.handleMode(TYPES.ActionMode.DRAW)
+    canvas1FabricVue.value.canvas.freeDrawingCursor = 'default'
+      break
+    case 'erase':  // 板擦模式
+    canvasFabricVue.value?.handleMode(TYPES.ActionMode.ERASE)
+    canvas1FabricVue.value?.handleMode(TYPES.ActionMode.ERASE)
+      break
+    case 'clear':   // 清空画布 
+        clearCanvas()
+    // canvas1FabricVue.value.history?.clean()
+      break
+  }
+}
+// 清空canvas
+const clearCanvas=()=>{
+  if(canvasFabricVue.value){
+    const objects = canvasFabricVue.value.canvas.getObjects();
+        objects.forEach((obj) => {
+          // 检查对象是否是背景
+          if (obj !== canvasFabricVue.value.canvas.backgroundImage) {
+            // 删除背景之外的对象
+            canvasFabricVue.value.canvas.remove(obj);
+          }
+        });
+
+        canvasFabricVue.value.canvas.renderAll();
+  }
+  if(canvas1FabricVue.value){
+    const objects = canvas1FabricVue.value.canvas.getObjects();
+        objects.forEach((obj) => {
+          // 检查对象是否是背景
+          if (obj !== canvas1FabricVue.value.canvas.backgroundImage) {
+            // 删除背景之外的对象
+            canvas1FabricVue.value.canvas.remove(obj);
+          }
+        });
+
+        canvas1FabricVue.value.canvas.renderAll();
+  }
+}
+const watchToolState=()=>{
+  if(toolState.showBoardAll){
+    setTimeout(() => {
+      toolState.showBoardAll=false
+    }, 200);
+  }
+  // 加载工具
+  handleMode(toolState.model)
+
+}
 defineExpose({
   initPdf,
-  initPdfone
+  initPdfone,
+  savaDataStore
+})
+watchEffect(() => {
+  console.log(toolState.model,'监听')
+  watchToolState() //监听工具栏
 })
 </script>
 
@@ -207,6 +396,8 @@ defineExpose({
   flex-wrap: wrap;
   width: 100%;
   justify-content: center;
+  overflow: hidden;
+  max-height: 100vh;
 }
 .pdfAdnFabric {
   position: relative;
@@ -217,4 +408,7 @@ defineExpose({
     margin-right: 10px;
   }
 }
+.ispointer {
+  pointer-events: none;
+}
 </style>

src/renderer/src/plugins/fabric/index.js

@@ -1615,6 +1615,7 @@ export class fabricVue {
         break
       case TYPES.ActionMode.OTHER: // 其他(工具选择)
         this.canvas.isDrawingMode = false
+        objectSet.selectable = false
         this.canvas.freeDrawingCursor = 'default'
         break
       default:

src/renderer/src/plugins/shareStore.js

@@ -1,7 +1,8 @@
 /**
  * 共享数据状态-多窗口
  */
-const { ipcRenderer } = require('electron') // app使用
+const isNode = typeof require !== 'undefined' // 是否支持node函数
+const { ipcRenderer } = isNode?require('electron'):{} // app使用
 export function shareStorePlugin({store}) {
   store.$subscribe(() => { // 自动同步
     // 在存储变化的时候执行
@@ -19,15 +20,16 @@ export function shareStorePlugin({store}) {
 function stateSync(store) {
   const storeName = store.$id
   const jsonStr = JSON.stringify(store.$state)
+  // console.log('state-change', jsonStr, storeName)
   // 通知主线程更新
-  ipcRenderer.invoke('pinia-state-change', storeName, jsonStr)
+  ipcRenderer?.invoke('pinia-state-change', storeName, jsonStr)
 }
 // 同步数据-接收主线程消息
 function stateChange(store) {
   const storeName = store.$id
-  ipcRenderer.on('pinia-state-set', (e, sName, jsonStr) => {
+  ipcRenderer?.on('pinia-state-set', (e, sName, jsonStr) => {
     if (sName == storeName) { // 更新对应数据
-      console.log('state-set', jsonStr, sName)
+      // console.log('state-set', jsonStr, sName)
       const curJson = JSON.stringify(store.$state) // 当前数据
       const isUp = curJson != jsonStr // 不同的时候才写入，不然会导致触发数据变化监听，导致死循环
       if (!isUp) return

src/renderer/src/store/modules/tool.js

@@ -7,6 +7,8 @@ export const useToolState = defineStore('tool', {
   state: () => ({
     model: 'select',        // 悬浮球-当前模式
     showBoardAll: false,    // 全屏画板-是否显示
+    isPdfWin: false,        // pdf窗口是否打开
+    isToolWin: false,       // 工具窗口是否打开
   }),
   actions: {
   }

src/renderer/src/utils/pdfAndFabric copy.js

@@ -0,0 +1,133 @@
+// 所有事件
+export function handleevent(canvas, imgarr, type = 'defalut') {
+  // // 鼠标按下
+  // canvas.on('mouse:down', function (e) {})
+  // // // 监听鼠标移动事件
+  // //     canvas.on('mouse:move', (options) => {
+  // //         console.log('Mouse move event:', options);
+  // //     });
+
+  // // 监听鼠标释放事件
+  // canvas.on('mouse:up', (options) => {
+  //   //判断是点击的哪一个
+  //   if (type == 'defalut') {
+  //     if (imgarr.value[0].index == 0) {
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
+  //     }
+  //     if (imgarr.value[1]?.index == 0) {
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
+  //     }
+  //   } else {
+  //     if (imgarr.value[0].index == 1) {
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
+  //     }
+  //     if (imgarr.value[1]?.index == 1) {
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
+  //     }
+  //   }
+  //   console.log(imgarr.value)
+
+  // })
+}
+//   保存数据
+export function savecanvsStore(imgarr, canvsStore) {
+  // canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
+}
+//   重显数据
+export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
+  // // 初始化
+  // if (!canvsStore.pageArr.length) {
+  //   fabric.Image.fromURL(img.src, (img) => {
+  //     img.set({
+  //       left: 0,
+  //       top: 0,
+  //       scaleX: canvas.value.width / img.width,
+  //       scaleY: canvas.value.height / img.height
+  //     })
+  //     canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+  //   })
+  //   return
+  // }
+  // canvsStore.pageArr.forEach((item) => {
+  //   //初始化
+  //   if (item.page == canvasobj.page) {
+  //       // canvas.value.clear() // 清除 Canvas
+  //   //   console.log(item.JSONdata, '找到一样的数据')
+  //     canvas.value.loadFromJSON(item.JSONdata, () => {
+  //       // 在所有对象加载完成后重新渲染画布
+  //       canvas.value.renderAll.bind(canvas.value)
+  //       canvas.value.renderAll()
+  //       // requestAnimationFrame(() => {
+  //       //   // 渲染所有对象
+       
+  //       // })
+  //     })
+  //   } else {
+  //     // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
+  //     //  // 清除 Canvas
+  //     canvas.value.clear()
+  //     requestAnimationFrame(function () {
+  //       fabric.Image.fromURL(img.src, (img) => {
+  //         img.set({
+  //           left: 0,
+  //           top: 0,
+  //           scaleX: canvas.value.width / img.width,
+  //           scaleY: canvas.value.height / img.height
+  //         })
+  //         canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+  //       })
+  //       // 渲染所有对象
+  //       canvas.value.renderAll.bind(canvas.value)
+  //       canvas.value.renderAll()
+  //     })
+  //   }
+  // })
+}
+
+//page 一样替换
+const mergeAndReplace = (arr1, arr2) => {
+  // // 用于存储替换后的数组
+  // const resultArray = array1.map(item1 => {
+  //   // 在 array2 中查找 page 相同的对象
+  //   const replacement = array2.find(item2 => item2.page == item1.page);
+  //   // 如果找到替换对象，则返回替换对象，否则返回原对象
+  //   return replacement ? replacement : item1;
+  // });
+
+  // // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
+  // array2.forEach(item2 => {
+  //   const existsInArray1 = array1.some(item1 => item1.page == item2.page);
+  //   if (!existsInArray1) {
+  //     resultArray.push(item2);
+  //   }
+  // });
+
+  // return resultArray;
+
+  // 创建一个映射，将 arr2 中的对象按 page 属性存储
+  let map = new Map(arr2.map((item) => [item.page, item]))
+
+  // 使用 map 替换 arr1 中相应 page 的对象，并添加 arr2 中的对象
+  arr1 = arr1.map((item) => (map.has(item.page) ? map.get(item.page) : item))
+
+  // 将 map 中存在但 arr1 中不存在的对象添加到 arr1
+  for (let [page, obj] of map) {
+    if (!arr1.some((item) => item.page === page)) {
+      arr1.push(obj)
+    }
+  }
+  return arr1
+}
+
+//   初始化数据
+export function initcanvasdata(canvas) {
+  canvas.value.clear() // 清除 Canvas
+  // 设置画布的背景色或其他属性
+  canvas.value.backgroundColor = 'rgba(255, 255, 255, 1)' // 白色背景
+
+  // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
+  requestAnimationFrame(function () {
+    // 渲染所有对象
+    canvas.value.renderAll.bind(canvas.value)
+  })
+}

src/renderer/src/utils/pdfAndFabric.js

@@ -1,108 +1,187 @@
+
 // 所有事件
 export function handleevent(canvas, imgarr, type = 'defalut') {
-  // 鼠标按下
+  // // 鼠标按下
-  canvas.on('mouse:down', function (e) {})
+  // canvas.on('mouse:down', function (e) {})
-  // // 监听鼠标移动事件
+  // // // 监听鼠标移动事件
-  //     canvas.on('mouse:move', (options) => {
+  // //     canvas.on('mouse:move', (options) => {
-  //         console.log('Mouse move event:', options);
+  // //         console.log('Mouse move event:', options);
-  //     });
+  // //     });
 
-  // 监听鼠标释放事件
+  // // 监听鼠标释放事件
-  canvas.on('mouse:up', (options) => {
+  // canvas.on('mouse:up', (options) => {
-    //判断是点击的哪一个
+  //   //判断是点击的哪一个
-    if (type == 'defalut') {
+  //   if (type == 'defalut') {
-      if (imgarr.value[0].index == 0) {
+  //     if (imgarr.value[0].index == 0) {
-        imgarr.value[0].JSONdata = canvas.toJSON()
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
-      }
+  //     }
-      if (imgarr.value[1]?.index == 0) {
+  //     if (imgarr.value[1]?.index == 0) {
-        imgarr.value[1].JSONdata = canvas.toJSON()
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
-      }
+  //     }
-    } else {
+  //   } else {
-      if (imgarr.value[0].index == 1) {
+  //     if (imgarr.value[0].index == 1) {
-        imgarr.value[0].JSONdata = canvas.toJSON()
+  //       imgarr.value[0].JSONdata = canvas.toJSON()
-      }
+  //     }
-      if (imgarr.value[1]?.index == 1) {
+  //     if (imgarr.value[1]?.index == 1) {
-        imgarr.value[1].JSONdata = canvas.toJSON()
+  //       imgarr.value[1].JSONdata = canvas.toJSON()
-      }
+  //     }
-    }
+  //   }
-    console.log(imgarr.value)
+  //   console.log(imgarr.value)
 
-  })
+  // })
 }
 //   保存数据
 export function savecanvsStore(imgarr, canvsStore) {
   canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
 }
 //   重显数据
-export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
+export function displayData(FabricVue, canvsStore, canvasobj, fabric, img) {
+
   // 初始化
-  if (!canvsStore.pageArr.length) {
+  const canvas = FabricVue.value.canvas
-    fabric.Image.fromURL(img.src, (img) => {
+  if (!canvas) {
-      img.set({
-        left: 0,
-        top: 0,
-        scaleX: canvas.value.width / img.width,
-        scaleY: canvas.value.height / img.height
-      })
-      canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
-    })
     return
   }
-  canvsStore.pageArr.forEach((item) => {
+  if (!canvsStore.pageArr.length) {
-    //初始化
+    fabric.Image.fromURL(
-    if (item.page == canvasobj.page) {
+      img.src,
-        // canvas.value.clear() // 清除 Canvas
+      (image) => {
-    //   console.log(item.JSONdata, '找到一样的数据')
+            image.set({
-      canvas.value.loadFromJSON(item.JSONdata, () => {
+                left: 0,
-        // 在所有对象加载完成后重新渲染画布
+                top: 0,
-        canvas.value.renderAll.bind(canvas.value)
+                scaleX: canvas.width / img.width,
-        canvas.value.renderAll()
+                scaleY: canvas.height / img.height,
-        // requestAnimationFrame(() => {
+                erasable: false // 不允许擦拭
-        //   // 渲染所有对象
+              })
+        //  FabricVue.setBackgroundImage(image, FabricVue.renderAll.bind(FabricVue))
+        // setBackgroundImage(image,FabricVue)
+            // canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
 
-        // })
+        canvas.setBackgroundImage(image, () => {
+          canvas.renderAll.bind(canvas)
+          FabricVue.value.render()
+        })
+      },
+      {crossOrigin: 'anonymous'}
+    )
+    return
+  }
+
+ const isfind=findObjectByPage(canvsStore.pageArr,canvasobj.page)
+ if(isfind){
+  const canvdata={
+    objects:JSON.parse(isfind.JSONdata),
+     version: "5.3.0"
+  }
+  requestAnimationFrame(function () {
+    canvas.loadFromJSON(canvdata, () => {
+      // 在所有对象加载完成后重新渲染画布
+      // Utils.handleCanvasJSONLoaded(canvas)
+      canvas.requestRenderAll() // 批量重绘
+    })
+    fabric.Image.fromURL(
+      img.src,
+      (image) => {
+            image.set({
+                left: 0,
+                top: 0,
+                scaleX: canvas.width / img.width,
+                scaleY: canvas.height / img.height,
+                selectable: false,
+                evented: false,
+                erasable: false // 不允许擦拭
+              })
+        // canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
+        canvas.setBackgroundImage(image, () => {
+          canvas.renderAll.bind(canvas)
+          FabricVue.value.render()
+        })
+      },
+      {crossOrigin: 'anonymous'}
+    )
+    // 渲染所有对象
+    canvas.requestRenderAll() // 批量重绘
   })
  }else{
   // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
       //  // 清除 Canvas
-      canvas.value.clear()
+      // canvas.clear()
       requestAnimationFrame(function () {
-        fabric.Image.fromURL(img.src, (img) => {
+        fabric.Image.fromURL(
-          img.set({
+          img.src,
+          (image) => {
+                image.set({
                     left: 0,
                     top: 0,
-            scaleX: canvas.value.width / img.width,
+                    scaleX: canvas.width / img.width,
-            scaleY: canvas.value.height / img.height
+                    scaleY: canvas.height / img.height,
+                    selectable: false,
+                    evented: false,
+                    erasable: false // 不允许擦拭
                   })
-          canvas.value.setBackgroundImage(img, canvas.value.renderAll.bind(canvas.value))
+            // canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
+            canvas.setBackgroundImage(image, () => {
+              canvas.renderAll.bind(canvas)
+              FabricVue.value.render()
             })
+          },
+          {crossOrigin: 'anonymous'}
+        )
         // 渲染所有对象
-        canvas.value.renderAll.bind(canvas.value)
+        canvas.requestRenderAll() // 批量重绘
-        canvas.value.renderAll()
       })
  }
-  })
+
+  // canvsStore.pageArr.forEach((item) => {
+  //   //初始化
+  //   if (item.page == canvasobj.page) {
+  //     // item.JSONdata
+  //     canvas.loadFromJSON(JSON.parse(item.JSONdata), () => {
+  //       // 在所有对象加载完成后重新渲染画布
+  //       // Utils.handleCanvasJSONLoaded(canvas)
+  //       canvas.requestRenderAll() // 批量重绘
+  //     })
+  //   } else {
+     
+  //     // 使用 requestAnimationFrame 来更新画布，确保在下一帧进行重绘
+  //     //  // 清除 Canvas
+  //     // canvas.clear()
+  //     requestAnimationFrame(function () {
+  //       fabric.Image.fromURL(
+  //         img.src,
+  //         (image) => {
+  //               image.set({
+  //                   left: 0,
+  //                   top: 0,
+  //                   scaleX: canvas.width / img.width,
+  //                   scaleY: canvas.height / img.height,
+  //                   selectable: false,
+  //                   evented: false,
+  //                   erasable: false // 不允许擦拭
+  //                 })
+  //           // canvas.setBackgroundImage(image, canvas.renderAll.bind(canvas));
+  //           canvas.setBackgroundImage(image, () => {
+  //             canvas.renderAll.bind(canvas)
+  //             FabricVue.value.render()
+  //           })
+  //         },
+  //         {crossOrigin: 'anonymous'}
+  //       )
+  //       // 渲染所有对象
+  //       canvas.requestRenderAll() // 批量重绘
+  //     })
+  //   }
+  // })
+}
+// 找到page一样的
+const findObjectByPage=(array, page)=> {
+  const foundObject = array.find(obj => obj.page === page);
+  return foundObject || false;
 }
 
 //page 一样替换
 const mergeAndReplace = (arr1, arr2) => {
-  // // 用于存储替换后的数组
-  // const resultArray = array1.map(item1 => {
-  //   // 在 array2 中查找 page 相同的对象
-  //   const replacement = array2.find(item2 => item2.page == item1.page);
-  //   // 如果找到替换对象，则返回替换对象，否则返回原对象
-  //   return replacement ? replacement : item1;
-  // });
 
-  // // 将 array2 中 page 不在 array1 中的对象追加到结果数组中
-  // array2.forEach(item2 => {
-  //   const existsInArray1 = array1.some(item1 => item1.page == item2.page);
-  //   if (!existsInArray1) {
-  //     resultArray.push(item2);
-  //   }
-  // });
-
-  // return resultArray;
 
   // 创建一个映射，将 arr2 中的对象按 page 属性存储
   let map = new Map(arr2.map((item) => [item.page, item]))

src/renderer/src/utils/tool.js

@@ -6,14 +6,17 @@
 // Remote.app.getAppPath() E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar
 // path.join(__dirname) 根目录 E:\njys-work\AIx_Smarttalk\dist\win-unpacked\resources\app.asar\out\renderer
 
-const path = require('path')
+const isNode = typeof require !== 'undefined' // 是否支持node函数
-const Remote = require('@electron/remote')
+const path = isNode?require('path'):{}
-const { ipcRenderer } = require('electron')
+const Remote = isNode?require('@electron/remote'):{}
+const { ipcRenderer } = isNode?require('electron'):window.electron || {}
 
 // 常用变量
-const BaseUrl = process.env['ELECTRON_RENDERER_URL']+'/#'
+const BaseUrl = isNode?process.env['ELECTRON_RENDERER_URL']+'/#':''
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = isNode?process.env.NODE_ENV !== 'production':''
 
+// 暴露Remote中的属性
+export const ipcMain = Remote?.ipcMain || {}
 /**
  * 获取静态资源，开发和生产环境
  * @param {*} url 
@@ -39,15 +42,32 @@ export const getStaticUrl = (url = '', type = 'app', exitPath = '', isFile = fal
  *  url:路由地址,width:窗口宽度,height:窗口高度,option:自定义选项
  * @returns
  */
-export function ipcMsgSend(key, data) {
+export function ipcMsgSend(key, data, type) {
+  if (type == 'old') {
     return new Promise((resolve) => {
       // 返回结果-监听
-    ipcRenderer.once(`${key}-reply`, (e, res) => {
+      ipcRenderer?.once(`${key}-reply`, (e, res) => {
         resolve(res)
       })
       // 发送消息
-    ipcRenderer.send(key, data)
+      ipcRenderer?.send(key, data)
     })
+  } else if (type == 'send') { // 单独发送
+    ipcRenderer?.send(key, data)
+  } else { // 新版本-默认
+    return ipcRenderer?.invoke(key, data)
+  }
+}
+/**
+ * @description 封装ipcRenderer事件监听
+ * @param {*} fn on once handle invoke
+ * @param {*} key 
+ * @param  {Function} cb 回调函数
+ * @returns 
+ */
+export function ipcHandle(fn,key, cb) {
+  return ipcRenderer[fn](key, cb)
+  // return ipcRenderer?.[fn]?.(key, cb)
 }
 /**
  * 创建-窗口 调用该方法
@@ -89,11 +109,13 @@ export const createWindow = async (type, data) => {
         resizable: true,   // 禁止窗口大小缩放
         alwaysOnTop: false,  // 窗口是否总是显示在其他窗口之前
       }
+      data.isConsole = true // 是否开启控制台
       data.option = {...defOption, ...option}
       const win = await toolWindow(data)
       win.type = type  // 唯一标识
       win.show()
       win.setFullScreen(true) // 设置窗口为全屏
+      // win.webContents.openDevTools() // 打开调试工具
       eventHandles(type, win) // 事件监听处理
       break
     }
@@ -145,7 +167,7 @@ export function toolWindow({url, isConsole, option={}}) {
     // 内部监听器-是否打印
     if (!!isConsole) {
       win.webContents.on('console-message', (e,leve,m,lin,s) => {
-        console.log(m)
+        console.log(`[${win.type}]`,m)
       })
     }
   })
@@ -173,13 +195,17 @@ const eventHandles = (type, win) => {
     case 'tool-sphere': { // 创建-悬浮球
       // 监听设置穿透
       const setIgnore = (_, ignore) => {win.setIgnoreMouseEvents(ignore, {forward: true})}
-      Remote.ipcMain.on('tool-sphere:set:ignore', setIgnore)
+      Remote.ipcMain.handle('tool-sphere:set:ignore', setIgnore) // 异步
       // 关闭窗口
       Remote.ipcMain.once('tool-sphere:close', () => { win&&win.destroy() })
       // 放大监听-测试
       Remote.ipcMain.once('maximize-window', () => {win&&win.destroy()})
       const on = {
-        onClosed: () => {Remote.ipcMain.off('tool-sphere:set:ignore', setIgnore)}
+        onClosed: () => {
+          Remote.ipcMain.removeHandler('tool-sphere:set:ignore', setIgnore)
+          Remote.ipcMain.removeHandler('tool-sphere:reset')
+          // Remote.ipcMain.removeAllListeners() // 移除所有监听事件
+        }
       }
       publicMethods(on) // 加载公共方法
       break}

src/renderer/src/views/classBegins/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pdfbox" ref="pdfbox">
-    <pdfCanvas :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
+    <pdfCanvas v-if="isOnLoadShow" :pdfObj="pdfObj" ref="pdfCanvaslist" @update:numPagesTotal="handleUpdate" />
     <div class="pdf-btn">
       <el-button
         style="border-top-left-radius: 8px"
@@ -32,20 +32,30 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, reactive } from 'vue'
+import { ref, onMounted, watch, reactive,watchEffect ,onBeforeUnmount} from 'vue'
+import { useRoute } from 'vue-router';
 import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
 import pdfCanvas from '@/components/pdf/index.vue'
 import { getStaticUrl } from '@/utils/tool'
 const { ipcRenderer } = require('electron')
+import { getBookMarkById } from '@/api/eTextbook/index'
+import {useToolState} from '@/store/modules/tool'
+//  const getStaticUrl=(url)=>{
+//   return url
+//  }
 pdfjsLib.GlobalWorkerOptions.workerSrc = getStaticUrl('/lib/build/pdf.worker.mjs')
-
+const toolState = useToolState();
+const route = useRoute();
+const isOnLoadShow = ref(false) //加载完毕显示
 // 传过去的参数
 const pdfObj = reactive({
   numberOfPdf: 2, //显示几页
   pdfUrl: getStaticUrl('aaa.pdf', 'user', 'selfFile', true),
+  allPageData:[],
+  bookId:null,
   numPages: 1 //当前页数
 })
-
+const textbookId=ref(null) //书籍id
 // 总条数
 const numPagesTotal = ref(0)
 const pdfCanvaslist = ref(null)
@@ -60,17 +70,22 @@ const navtopage = (type) => {
     pdfObj.numPages += num
   }
   if (pdfObj.numPages > numPagesTotal.value) return
-  pdfCanvaslist.value.initPdf()
+  pdfCanvaslist.value.initPdf('rest')
 }
 // 最小化窗口
-const minimize = () => {
+const minimize = async () => {
-  ipcRenderer.send('open-PDF:minimize')
+  await pdfCanvaslist.value.savaDataStore()
+  // toolState.isPdfWin=false
+  // toolState.showBoardAll=true //恢复默认值
+  // console.log(toolState.showBoardAll,"关闭")
+  // // ipcRenderer.send('tool-sphere:reset') //重置tool状态
+  // ipcRenderer.send('open-PDF:minimize')
 }
 const handleUpdate = (data) => {
   numPagesTotal.value = data
   if (numPagesTotal.value == 1) {
     pdfObj.numberOfPdf = 1
-    pdfCanvaslist.value.initPdf('restone')
+    pdfCanvaslist.value.initPdf('rest')
   }
 }
 // 单双页切换
@@ -87,10 +102,35 @@ const switchPageMode = () => {
   } else {
     // 多页切单页
     pdfObj.numberOfPdf = 1
-    pdfCanvaslist.value.initPdf('restone')
+    pdfCanvaslist.value.initPdf('rest')
   }
 }
-onMounted(async () => {})
+onMounted(async () => { 
+  toolState.isPdfWin=true
+  console.log(toolState.showBoardAll,"c初始")
+  textbookId.value = route.query.textbookId
+  pdfObj.bookId=textbookId.value
+  getBookMarkById(textbookId.value).then(res=>{
+    pdfObj.allPageData=getUniqueArrayByLastOccurrence(res.data)
+    isOnLoadShow.value=true
+  })
+})
+
+
+
+//根据page去重
+const getUniqueArrayByLastOccurrence=(array)=> {
+  const uniqueItems = array.reduce((acc, current) => {
+    // 使用 Map 来跟踪最后一个出现的 pageNum 和它的对象
+    acc.set(current.pageNum, current);
+    return acc;
+  }, new Map());
+
+  // 将 Map 的值转换回数组
+  const resultArray = Array.from(uniqueItems.values());
+
+  return resultArray;
+}
 </script>
 
 <style lang="scss" scoped>

src/renderer/src/views/classManage/aside.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import {ref,defineProps,defineEmits} from "vue";
+import {ref} from "vue";
 const activeIndex = ref('0')
 const props = defineProps({
   classList:{

src/renderer/src/views/prepare/index.vue

@@ -72,6 +72,7 @@ import uploadDialog from '@/components/upload-dialog/index.vue'
 import { Refresh } from '@element-plus/icons-vue'
 import uploaderState from '@/store/modules/uploader'
 import useUserStore from '@/store/modules/user'
+import { useToolState } from '@/store/modules/tool'
 import MoveFile from '@/components/move-file/index.vue'
 import FileListItem from '@/views/prepare/container/file-list-item.vue'
 import { getSmarttalkPage, moveSmarttalk } from '@/api/file'
@@ -490,18 +491,23 @@ export default {
 
     // 打开PDF-课件
     async navtoPdf() {
-      let path = await this.getBookPathFromServer()
+      const toolStore = useToolState()
-      console.log(path)
+      if (toolStore.isPdfWin) return this.$message.error('您当前已打开课本，请勿重复操作')
-      createWindow('open-PDF', { url: '/classBegins/index' })
+      // let path = await this.getBookPathFromServer()
+      // console.log(path)
+      // console.log(this.uploadData.textbookId) 
+      createWindow('open-PDF', { url: '/classBegins/index?textbookId='+this.uploadData.textbookId })
     },
     // 上课-工具类悬浮
     openLesson() {
+      const toolStore = useToolState()
+      if (toolStore.isToolWin) return this.$message.error('您当前已开始上课，请勿重复操作')
       createWindow('tool-sphere', { url: '/tool/sphere' })
     }
   }
 }
 </script>
-<style>
+<style lang="scss">
 .prepare-popper {
   width: 80px !important;
   min-width: 80px !important;

src/renderer/src/views/tool/components/board.vue

@@ -6,8 +6,10 @@
 </template>
 <script setup>
 // 功能说明：画板
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch,defineExpose } from 'vue'
 import {FabricVue, TYPES} from '@/plugins/fabric'
+import { useToolState } from '@/store/modules/tool'
+const toolStore = useToolState()
 const canvasRef = ref(null) // 画布
 const props = defineProps({
   modelValue: String
@@ -23,10 +25,13 @@ onMounted(async() => {
     await FabricVue.initCanvas(canvasRef.value, option)
   }
 })
-
+const handleMode = (newVal, oldVal) => {
-// 监听
+  if(toolStore.isPdfWin){
-watch(() => props.modelValue, (newVal, oldVal) => {
+    if(newVal=='clear'){
-  // console.log(newVal, oldVal)
+      emit('update:modelValue', oldVal)
+    }
+    return
+  }
   switch(newVal) {
     case 'select':  // 选择模式
       FabricVue.handleMode(TYPES.ActionMode.OTHER)
@@ -35,14 +40,26 @@ watch(() => props.modelValue, (newVal, oldVal) => {
       FabricVue.handleMode(TYPES.ActionMode.DRAW)
       FabricVue.canvas.freeDrawingCursor = 'default'
       break
-    case 'eraser':  // 板擦模式
+    case 'erase':  // 板擦模式
       FabricVue.handleMode(TYPES.ActionMode.ERASE)
       break
     case 'clear':   // 清空画布
+      if(oldVal){
         FabricVue.history?.clean()
         emit('update:modelValue', oldVal)
+      }
+      
       break
   }
+}
+// 监听
+watch(() => props.modelValue, (newVal, oldVal) => {
+  // console.log(newVal, oldVal)
+  handleMode(newVal, oldVal)
+})
+// 暴露属性方法
+defineExpose({
+  handleMode
 })
 </script>
 <style lang="scss" scoped>

src/renderer/src/views/tool/components/side.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="warp" ref="btnRef">
+    <slot name="start"></slot>
+    <!-- 工具按钮 -->
+    <el-space direction="vertical">
+      <template v-for="(item,index) in list">
+        <slot :name="item.prop" :item="item" :index="index">
+          <div class="c-btn flex flex-col items-center gap-2 p-2" @click.stop="clickHandel(item,$event)">
+            <i class="iconfont" :class="item.icon" :style="item.style" />
+            <span>{{item.label||item.text||item.name}}</span>
+          </div>
+        </slot>
+      </template>
+      <slot name="append"></slot>
+    </el-space>
+    <slot name="end"></slot>
+    <!-- 内容部分 -->
+    <transition name="el-fade-in">
+      <div class="c-popover" :style="`--top: ${topPos}px;--height:${hPost}px;`" v-show="isVisible">
+        <div class="content">{{activeObj}}</div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script setup>
+import { computed, defineProps, ref, reactive, watchEffect, onMounted } from 'vue'
+// 功能说明：侧边-工具栏
+const colors = ['#00f389', '#ff7f00', '#ffff00', '#409EFF', '#00baff', '#13b189', '#F56C6C']
+const emit = defineEmits(['update:modelValue','change'])
+const props = defineProps({
+  modelValue: { // 是否显示
+    type: Boolean,
+    default: true
+  },
+  data: { // 数据
+    type: Array,
+    default: () => [
+      { label: '资源', prop: 'resource', icon: 'icon-hudong' },
+      { label: '互动', prop: 'interact', icon: 'icon-hudong' },
+      { label: '窗口', prop: 'win', icon: 'icon-hudong' },
+      { label: '下课', prop: 'over', icon: 'icon-hudong' },
+    ]
+  }
+})
+const isVisible = ref(false)  // 是否显示内容
+const activeObj = ref(null)   // 当前激活的按钮
+const btnRef = ref(null)      // 按钮元素-ref
+const topPos = ref(30)        // 顶部距离-内容的距离
+const hPost = ref(0)         // 顶部距离-内容的距离
+let posBtnAll = {}  // 存储位置
+// === 计算属性 ===
+const list = computed(() => props.data.map((o,i) => {
+  o.style = getStyle(o.style, i)
+  return o
+}))
+onMounted(() => {
+  posBtnAll = btnRef.value.getBoundingClientRect()
+  hPost.value = posBtnAll.height
+})
+// === 方法 ===
+// 获取颜色索引
+const getIndex = i => i % colors.length
+// 获取样式
+const getStyle = (style,index) => {
+  const color = colors[getIndex(index)]
+  if (!style) return {color}
+  else {
+    if (typeof style === 'object') return {...style, color}
+    return `${style}${style.endsWith(';')?'':';'}color:${color};`
+  }
+}
+// 事件
+const clickHandel = (o, e) => {
+  const node = e.target.parentNode.getBoundingClientRect()
+  const isColse = activeObj.value && activeObj.value.prop === o.prop && isVisible.value
+  isVisible.value = !isColse // 相同的按钮且打开状态，点击关闭
+  activeObj.value = o
+  const nodeH = parseInt(node.height / 2) // 高度的一半
+  topPos.value = parseInt(node.top) - posBtnAll.top + nodeH
+  emit('change', o)
+}
+</script>
+<style lang="scss" scoped>
+.warp{
+  border: 1px solid;
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10px;
+  min-height: 40vh;
+  min-width: 4em;
+  border-radius: 4em;
+  background-color: #121212;
+  .el-space{margin: 20px 0;}
+  .c-btn{
+    color: #d9dce3;
+    cursor: pointer;
+    .iconfont{
+      font-size: 20px;
+      color: attr(color);
+    }
+    span{font-size: 12px;}
+    &:hover{
+      border-radius: 4px;
+      background: #454545fa;
+    }
+  }
+}
+.c-popover{
+  --top: 30px;
+  --height: 40vh;
+  position: fixed;
+  inset: 50% 75px auto auto;
+  transform: translateY(-50%);
+  background-color: #121212;
+  padding: 10px;
+  border-radius: 4px;
+  min-height: var(--height);
+  width: 30em;
+  text-align: left;
+
+  &:before{
+    content: "";
+    width: 10px;
+    height: 10px;
+    background-color: #121212;
+    position: absolute;
+    right: -5px;
+    top: var(--top);
+    transform: rotate(45deg);
+  }
+}
+.content{
+  color: red;
+
+}
+</style>

src/renderer/src/views/tool/directive/ignore.js

@@ -0,0 +1,45 @@
+/**
+ * 处理元素是否穿透-窗口
+ */
+import { ipcMsgSend } from '@/utils/tool'
+class Ignore {
+  el            // 绑定元素
+  binding        // 绑定对象(参数)
+  value          // 绑定值
+  isAuto         // 是否自动控制
+  constructor(el, binding) {
+    this.el = el
+    this.binding = binding
+    this.value = binding.value
+    this.isAuto = !(this.value && this.value instanceof Boolean)
+  }
+  // 设置是否穿透
+  send(bool) {
+    ipcMsgSend('tool-sphere:set:ignore', bool)
+  }
+  // 监听元素移入移出，自动设置
+  mounted() {
+    this.el.addEventListener('mouseenter', e => { // 进入
+      this.send(false) // 元素不穿透，鼠标有效
+      this.changeHandle(e)
+    })
+    this.el.addEventListener('mouseleave', e => { // 离开
+      this.send(true) // 元素穿透，鼠标无效
+      this.changeHandle(e)
+    })
+  }
+  changeHandle(e) {
+    const customEvent = new CustomEvent('ignore-mounted', {detail:{ignore: this, e}})
+    this.el.dispatchEvent(customEvent)
+  }
+}
+export default {
+  mounted(el, binding) {
+    const ignore = new Ignore(el, binding)
+    if (ignore.isAuto) { // 自动控制
+      ignore.mounted()
+    } else { // 手动设置
+      ignore.send(ignore.value)
+    }
+  }
+}

src/renderer/src/views/tool/sphere.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="warp-all">
-    <board-vue v-model="tabActive" v-show="isShow"></board-vue>
+    <!-- 画板 -->
+    <board-vue v-model="tabActive" v-show="isShow" ref="boardVueRef"></board-vue>
+    <!-- 侧边工具栏 -->
+    <side-vue v-ignore></side-vue>
     <!-- 底部工具栏  :style="dataPos.style"-->
-    <div class="tool-bottom-all"
+    <div class="tool-bottom-all" @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
-      @mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
       <div v-drag="{handle:'.tool-bottom-all', dragtime}"
         @v-drag-start="dragtime = Date.now()">
         <div class="c-logo" @click="logoHandle" title="拖动 | 折叠 | 展开">
@@ -15,7 +17,7 @@
           @change="tabChange">
           <template #default="{item}">
             <div class="c-btn flex flex-col items-center gap-2 p-2">
-              <i class="iconfont" :class="item.icon" :style="item.style"></i>
+              <i class="iconfont" :class="item.icon" :style="item.style" />
               <span>{{item.label}}</span>
             </div>
           </template>
@@ -29,55 +31,38 @@
 // 功能说明：electron 悬浮球
 import { onMounted, ref, reactive, watchEffect } from 'vue'
 import logo from '@root/resources/icon.png' // logo
-import boardVue from './components/board.vue'  // 画板
+import boardVue from './components/board.vue'  // 画板-子组件
+import sideVue from './components/side.vue'  // 画板-子组件
 import vDrag from './directive/drag' // 自定义指令-拖拽
+import vIgnore from './directive/ignore' // 自定义指令-穿透
 import { useToolState } from '@/store/modules/tool'
-const { ipcRenderer } = require('electron') // app使用
+import { ipcMsgSend, ipcHandle, ipcMain } from '@/utils/tool' // 相关工具
-// const ipcRenderer = { send: () => {} } // 网页测试使用
-
 const tabActive = ref('select')   // 工具栏当前选中项
 const isFold = ref(false)         // 折叠工具栏
 const isDrag = ref(false)         // 开始拖拽
 const dragtime = ref(0)           // 拖拽时间-计算点击还是拖动
-const isShow = ref(false)
+const isShow = ref(false)         // 是否显示-画板
-const toolStore = useToolState()
+const toolStore = useToolState()  // 状态管理
+const boardVueRef=ref(null)       // 画板ref
 const btnList = [ // 工具栏按钮列表
   { label: '选择', value: 'select', icon: 'icon-mouse' },
   { label: '画笔', value: 'brush', icon: 'icon-huabi' },
-  { label: '板擦', value: 'eraser', icon: 'icon-xiangpica' },
+  { label: '板擦', value: 'erase', icon: 'icon-xiangpica' },
   { label: '清除', value: 'clear', icon: 'icon-xiangpica', style: 'color: #ccc' },
   // { label: '互动', value: 'interact', icon: 'icon-hudong' },
   // { label: '聚焦', value: 'focus', icon: 'icon-jujiao' },
   // { label: '更多', value: 'more', icon: 'icon-xiazai9' },
 ]
-onMounted(() => {
+// 页面加载完毕
-  // isShow.value = toolStore.showBoardAll // 是否显示-画板
+onMounted(async() => {
-  // console.log('xxx: ', toolStore.model)
+  resetStatus() // 开启重置状态-监听
-  // setTimeout(() => {
-  //   toolStore.windowState.test = '测试成功'
-  // }, 2000);
 })
+// const test = (e) => { console.log('test', e) }
 // ==== 方法 ===
 const tabChange = (val) => { // 切换tab-change
-  // console.log('xxxx:', val)
+  const bool = !toolStore.isPdfWin && !toolStore.showBoardAll
-  toolStore.showBoardAll = true
+  if(bool) toolStore.showBoardAll = true
-  switch (val) {
+  // ipcMsgSend('tool-sphere:close')
-    case 'brush': // 画笔
-      break
-    case 'eraser': // 板擦
-      break
-    case 'interact':
-      break
-    case 'focus':
-      break
-    case 'more':
-      break
-    case 'close':
-      ipcRenderer.send('tool-sphere:close')
-      break
-    default:
-      break
-  }
   toolStore.model = val // 存储当前tab
 }
 const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
@@ -85,14 +70,30 @@ const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
     isFold.value = !isFold.value
   }
 }
-
 const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
   let resBool = false
   if (tabActive.value == 'select') resBool = !!bool
-  ipcRenderer.send('tool-sphere:set:ignore', resBool)
+  if (!isShow.value) resBool = !!bool
+  setIgnore(resBool)
 }
+const setIgnore = (bool) => { // 忽略鼠标穿透
+  ipcMsgSend('tool-sphere:set:ignore', bool)
+}
+const resetStatus = () => { // 重置状态
+  if (toolStore.isToolWin) return // 已经打开过-忽略
+  ipcMain?.handle?.('tool-sphere:reset', () => {
+    setTimeout(() => {
+      boardVueRef.value.handleMode(tabActive.value)
+      mouseChange(1) 
+    }, 500)
+  })
+  toolStore.isToolWin = true // 标记状态
+}
+
 watchEffect(() => { // 监听
-  isShow.value = toolStore.showBoardAll // 是否显示-画板
+  // 不同的时候, 更新值: 是否显示-画板  
+  const show = !toolStore.isPdfWin && toolStore.showBoardAll
+  if (show != isShow.value) isShow.value = show
 })
 </script>