@@ -15,7 +17,7 @@
@change="tabChange">
-
+
{{item.label}}
@@ -29,18 +31,21 @@
// 功能说明: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使用
-// const ipcRenderer = { send: () => {} } // 网页测试使用
+import { ipcMsgSend } from '@/utils/tool' // 相关工具
+// const { ipcRenderer } = require('electron') // app使用
+const { ipcRenderer } = window.electron || {}
const tabActive = ref('select') // 工具栏当前选中项
const isFold = ref(false) // 折叠工具栏
const isDrag = ref(false) // 开始拖拽
const dragtime = ref(0) // 拖拽时间-计算点击还是拖动
-const isShow = ref(false)
-const toolStore = useToolState()
+const isShow = ref(true) // 是否显示-画板
+const toolStore = useToolState() // 状态管理
const btnList = [ // 工具栏按钮列表
{ label: '选择', value: 'select', icon: 'icon-mouse' },
{ label: '画笔', value: 'brush', icon: 'icon-huabi' },
@@ -51,16 +56,11 @@ const btnList = [ // 工具栏按钮列表
// { label: '更多', value: 'more', icon: 'icon-xiazai9' },
]
onMounted(() => {
- // isShow.value = toolStore.showBoardAll // 是否显示-画板
- // console.log('xxx: ', toolStore.model)
- // setTimeout(() => {
- // toolStore.windowState.test = '测试成功'
- // }, 2000);
+
})
// ==== 方法 ===
const tabChange = (val) => { // 切换tab-change
// console.log('xxxx:', val)
- toolStore.showBoardAll = true
switch (val) {
case 'brush': // 画笔
break
@@ -73,7 +73,7 @@ const tabChange = (val) => { // 切换tab-change
case 'more':
break
case 'close':
- ipcRenderer.send('tool-sphere:close')
+ ipcRenderer?.send('tool-sphere:close')
break
default:
break
@@ -85,11 +85,10 @@ 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)
+ ipcRenderer?.send('tool-sphere:set:ignore', resBool)
}
watchEffect(() => { // 监听
isShow.value = toolStore.showBoardAll // 是否显示-画板