优化

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

@@ -13,10 +13,7 @@ import {
   onMounted,
   watch,
   reactive,
-  defineProps,
-  defineExpose,
   nextTick,
-  defineEmits
 } from 'vue'
 import { fabric } from 'fabric'
 import { ElMessage } from 'element-plus'

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

@@ -26,7 +26,7 @@ import {
   defineProps,
   defineExpose,
   nextTick,
-  defineEmits,watchEffect
+  watchEffect
 } from 'vue'
 // import { fabric } from 'fabric'
 import { ElMessage } from 'element-plus'
@@ -272,8 +272,12 @@ onMounted(async () => {
   // 监听2个canvas事件
   // handleevent(fabriccanvas.value, imgarr)
   // handleevent(fabriccanvas1.value, imgarr, 'two')
+  setToolStatus() // 加载完后-(设置-底部工具栏-状态)
 })
-
+// zdg: 设置-底部工具栏-状态
+const setToolStatus = () => {
+  toolState.showBoardAll = false
+}
 
 defineExpose({
   initPdf,
@@ -282,12 +286,12 @@ defineExpose({
 watchEffect(() => {
   
   console.log(toolState.showBoardAll,'监听')
-  if( toolState.showBoardAll){
+  // if( toolState.showBoardAll){
-    console.log('xczxcxzsdf')
+  //   setTimeout(() => {
-    setTimeout(() => {
+  //     console.log('pdf 关闭:')
-      toolState.showBoardAll=false
+  //     toolState.showBoardAll=false
-    }, 200);
+  //   }, 200);
-  }
+  // }
   // if(toolState.model=='select'){
   //   toolState.showBoardAll=false
   // }

src/renderer/src/plugins/shareStore.js

@@ -1,8 +1,8 @@
 /**
  * 共享数据状态-多窗口
  */
-// const { ipcRenderer } = require('electron') // app使用
+const isNode = typeof require !== 'undefined' // 是否支持node函数
-const { ipcRenderer } = window.electron || {}
+const { ipcRenderer } = isNode?require('electron'):{} // app使用
 export function shareStorePlugin({store}) {
   store.$subscribe(() => { // 自动同步
     // 在存储变化的时候执行
@@ -20,6 +20,7 @@ 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)
 }

src/renderer/src/utils/tool.js

@@ -15,6 +15,8 @@ const { ipcRenderer } = isNode?require('electron'):window.electron || {}
 const BaseUrl = isNode?process.env['ELECTRON_RENDERER_URL']+'/#':''
 const isDev = isNode?process.env.NODE_ENV !== 'production':''
 
+// 暴露Remote中的属性
+export const ipcMain = Remote?.ipcMain || {}
 /**
  * 获取静态资源，开发和生产环境
  * @param {*} url 
@@ -56,6 +58,17 @@ export function ipcMsgSend(key, data, type) {
     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)
+}
 /**
  * 创建-窗口 调用该方法
  * @param {*} type 类型
@@ -96,6 +109,7 @@ 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  // 唯一标识
@@ -152,7 +166,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)
       })
     }
   })
@@ -186,7 +200,11 @@ const eventHandles = (type, win) => {
       // 放大监听-测试
       Remote.ipcMain.once('maximize-window', () => {win&&win.destroy()})
       const on = {
-        onClosed: () => {Remote.ipcMain.removeHandler('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

@@ -76,7 +76,7 @@ const minimize = () => {
   toolState.isPdfWin=false
   toolState.showBoardAll=true //恢复默认值
   console.log(toolState.showBoardAll,"关闭")
-  // ipcRenderer.send('tool-sphere:reset') //重置tool状态
+  ipcRenderer.invoke('tool-sphere:reset') //重置tool状态
   ipcRenderer.send('open-PDF:minimize')
 }
 const handleUpdate = (data) => {

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/tool/components/board.vue

@@ -40,7 +40,7 @@ const handleMode = (newVal, oldVal) => {
       FabricVue.handleMode(TYPES.ActionMode.DRAW)
       FabricVue.canvas.freeDrawingCursor = 'default'
       break
-    case 'eraser':  // 板擦模式
+    case 'erase':  // 板擦模式
       FabricVue.handleMode(TYPES.ActionMode.ERASE)
       break
     case 'clear':   // 清空画布
@@ -54,7 +54,7 @@ const handleMode = (newVal, oldVal) => {
 }
 // 监听
 watch(() => props.modelValue, (newVal, oldVal) => {
-  console.log(newVal, oldVal)
+  // console.log(newVal, oldVal)
   handleMode(newVal, oldVal)
 })
 // 暴露属性方法

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

@@ -36,7 +36,8 @@ import sideVue from './components/side.vue'  // 画板-子组件
 import vDrag from './directive/drag' // 自定义指令-拖拽
 import vIgnore from './directive/ignore' // 自定义指令-穿透
 import { useToolState } from '@/store/modules/tool'
-import { ipcMsgSend } from '@/utils/tool' // 相关工具
+import { ipcMsgSend, ipcHandle, ipcMain } from '@/utils/tool' // 相关工具
+import {FabricVue, TYPES} from '@/plugins/fabric'
 const tabActive = ref('select')   // 工具栏当前选中项
 const isFold = ref(false)         // 折叠工具栏
 const isDrag = ref(false)         // 开始拖拽
@@ -47,34 +48,22 @@ 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(() => {})
+// 页面加载完毕
+onMounted(async() => {
+  resetStatus() // 开启重置状态-监听
+})
 // const test = (e) => { console.log('test', e) }
 // ==== 方法 ===
 const tabChange = (val) => { // 切换tab-change
-  if(!toolStore.isPdfWin)  toolStore.showBoardAll = true
+  const bool = !toolStore.isPdfWin && !toolStore.showBoardAll
-  switch (val) {
+  if(bool) toolStore.showBoardAll = true
-    case 'brush': // 画笔
+  // ipcMsgSend('tool-sphere:close')
-      break
-    case 'eraser': // 板擦
-      break
-    case 'interact':
-      break
-    case 'focus':
-      break
-    case 'more':
-      break
-    case 'close':
-      ipcMsgSend('tool-sphere:close')
-      break
-    default:
-      break
-  }
   toolStore.model = val // 存储当前tab
 }
 const logoHandle = (e,t) => { // logo 点击-事件 折叠|展开
@@ -91,13 +80,17 @@ const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
 const setIgnore = (bool) => { // 忽略鼠标穿透
   ipcMsgSend('tool-sphere:set:ignore', bool)
 }
+const resetStatus = () => { // 重置状态
+  ipcMain.handle('tool-sphere:reset', () => {
+    FabricVue.handleMode(tabActive.value)
+    setTimeout(() => { mouseChange(1) }, 500)
+  })
+}
 
 watchEffect(() => { // 监听
-  isShow.value = !toolStore.isPdfWin && toolStore.showBoardAll // 是否显示-画板
+  // 不同的时候, 更新值: 是否显示-画板  
-  if(!toolStore.isPdfWin && toolStore.showBoardAll){         //恢复进入页面前的状态
+  const show = !toolStore.isPdfWin && toolStore.showBoardAll
-    boardVueRef.value.handleMode(tabActive.value)
+  if (show != isShow.value) isShow.value = show
-    mouseChange(true)
-  }
 })
 </script>