状态管理-多窗口共享

This commit is contained in:
zdg 2024-08-05 17:46:48 +08:00
parent 22a92ee84b
commit 19901d802f
3 changed files with 20 additions and 23 deletions

View File

@ -5,21 +5,9 @@ import { defineStore } from 'pinia'
export const useToolState = defineStore('tool', {
state: () => ({
// 窗口状态
windowState: {
// 窗口是否最小化
isMinimize: false,
// 窗口是否最大化
isMaximize: false,
// 窗口是否关闭
isClose: false,
test: ''
}
model: 'select', // 悬浮球-当前模式
showBoardAll: false, // 全屏画板-是否显示
}),
actions: {
// 设置窗口状态
setWindowState(payload) {
if(!!payload)this.windowState = payload
}
}
})

View File

@ -1,6 +1,8 @@
<template>
<div>
<canvas ref="canvasRef" />
<slot></slot>
</div>
</template>
<script setup>
//

View File

@ -1,6 +1,6 @@
<template>
<div class="warp-all">
<board-vue v-model="tabActive"></board-vue>
<board-vue v-model="tabActive" v-show="isShow"></board-vue>
<!-- 底部工具栏 :style="dataPos.style"-->
<div class="tool-bottom-all"
@mouseenter="mouseChange(0)" @mouseleave="mouseChange(1)">
@ -27,7 +27,7 @@
<script setup>
// electron
import { onMounted, ref, reactive } from 'vue'
import { onMounted, ref, reactive, watchEffect } from 'vue'
import logo from '@root/resources/icon.png' // logo
import boardVue from './components/board.vue' //
import vDrag from './directive/drag' // -
@ -39,6 +39,7 @@ const tabActive = ref('select') // 工具栏当前选中项
const isFold = ref(false) //
const isDrag = ref(false) //
const dragtime = ref(0) // -
const isShow = ref(false)
const toolStore = useToolState()
const btnList = [ //
{ label: '选择', value: 'select', icon: 'icon-mouse' },
@ -50,14 +51,16 @@ const btnList = [ // 工具栏按钮列表
// { label: '', value: 'more', icon: 'icon-xiazai9' },
]
onMounted(() => {
// console.log('xxx: ', JSON.stringify(toolStore.windowState))
setTimeout(() => {
toolStore.windowState.test = '测试成功'
}, 2000);
// isShow.value = toolStore.showBoardAll // -
// console.log('xxx: ', toolStore.model)
// setTimeout(() => {
// toolStore.windowState.test = ''
// }, 2000);
})
// ==== ===
const tabChange = (val) => { // tab-change
// console.log(val)
// console.log('xxxx:', val)
toolStore.showBoardAll = true
switch (val) {
case 'brush': //
break
@ -75,6 +78,7 @@ const tabChange = (val) => { // 切换tab-change
default:
break
}
toolStore.model = val // tab
}
const logoHandle = (e,t) => { // logo - |
if (Date.now() - dragtime.value < 200) {
@ -87,6 +91,9 @@ const mouseChange = (bool) => { // 鼠标移入工具栏 是否穿透
if (tabActive.value == 'select') resBool = !!bool
ipcRenderer.send('tool-sphere:set:ignore', resBool)
}
watchEffect(() => { //
isShow.value = toolStore.showBoardAll // -
})
</script>
<style lang="scss" scoped>