rebuilt: store to pinia control store

src/components/business/cropper/CropImage/CropImage.vue

@@ -26,6 +26,8 @@ import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
 import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 export default defineComponent({
   components: { ElDialog },
@@ -36,6 +38,7 @@ export default defineComponent({
       loading: false,
       url: '',
     })
+    const controlStore = useControlStore()
     const dialogVisible = ref(false)
     const imgBox = ref<HTMLImageElement | any>()
     let cropData: any = null
@@ -49,7 +52,8 @@ export default defineComponent({
       item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
       cropData = data
       state.url = item.rawImg
-      store.commit('setShowMoveable', false)
+      // store.commit('setShowMoveable', false)
+      controlStore.setShowMoveable(false)
       dialogVisible.value = true
       await nextTick()
       setEdit()
@@ -86,7 +90,8 @@ export default defineComponent({
     }
     
     const cancel = () => {
-      store.commit('setShowMoveable', true)
+      // store.commit('setShowMoveable', true)
+      controlStore.setShowMoveable(true)
       dialogVisible.value = false
       state.url = ''
       cropData = null

src/components/business/cropper/CropImage/index.vue

@@ -26,6 +26,7 @@ import { ref, reactive, nextTick, toRefs } from 'vue'
 import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
+import { useControlStore } from '@/pinia'
 
 type TDoneParams = {
   newImg: string,
@@ -41,6 +42,7 @@ type TOpenItem = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
 const state = reactive({
   loading: false,
   url: '',
@@ -61,7 +63,8 @@ const open = async (item: TOpenItem, data: Cropper.Data) => {
   item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
   cropData = data
   state.url = item.rawImg
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   dialogVisible.value = true
   await nextTick()
   setEdit()
@@ -101,7 +104,8 @@ const ok = () => {
 }
 
 const cancel = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
   dialogVisible.value = false
   state.url = ''
   cropData = null

src/components/business/image-cutout/ImageCutout/index.vue

@@ -48,6 +48,7 @@ import uploader from '@/components/common/Uploader/index.vue'
 import _dl from '@/common/methods/download'
 import ImageExtraction from '../ImageExtraction/index.vue'
 import { selectImageFile, uploadCutPhotoToCloud } from './method'
+import { useControlStore } from '@/pinia'
 
 export type TImageCutoutState = {
     show: boolean;
@@ -62,6 +63,7 @@ export type TImageCutoutState = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
 const state = reactive<TImageCutoutState>({
   show: false,
   rawImage: '',
@@ -87,7 +89,8 @@ const matting = ref<typeof ImageExtraction | null>(null)
 const open = (file: File) => {
   state.loading = false
   state.show = true
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   nextTick(() => {
     if (file) {
       handleUploaderLoad(file)
@@ -111,7 +114,8 @@ const handleUploaderLoad = (file: File) => {
 }
 
 const handleClose = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
 const mousemove = (e: MouseEvent) => {

src/components/business/moveable/Moveable.vue

@@ -18,18 +18,19 @@ import { mapGetters, mapActions, useStore } from 'vuex'
 import useSelecto from './Selecto'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore } from '@/pinia'
+import { useCanvasStore, useControlStore } from '@/pinia'
 
 const {
   dSelectWidgets, dActiveElement, activeMouseEvent,
-  showMoveable, showRotatable, dWidgets,
+  showRotatable, dWidgets,
   updateRect, updateSelect,
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
+} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
 const store = useStore()
+const controlStore = useControlStore()
 const { guidelines } = storeToRefs(useCanvasStore())
-
+const { showMoveable } = storeToRefs(controlStore)
-
 // computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
+
 let _target: string = ""
 let moveable: Moveable | null = null 
 let holdPosition: { left: number, top: number } | null = null 
@@ -79,7 +80,9 @@ watch(
         }
       })
       // // End
-      store.commit('setShowMoveable', true)
+      // controlStore.setShowMoveable(true)
+      controlStore.setShowMoveable(true)
+
       // 参考线设置
       if (!moveable.elementGuidelines?.includes(target)) {
         moveable.elementGuidelines?.push(target)

src/components/business/picture-selector/index.vue

@@ -36,6 +36,7 @@ import { useStore } from 'vuex'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
 import { TGetImageListResult } from '@/api/material'
+import { useControlStore } from '@/pinia'
 
 type TEmits = (event: 'select', data: TGetImageListResult) => void
 
@@ -50,6 +51,8 @@ type TState = {
 const emits = defineEmits<TEmits>()
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const state = reactive<TState>({
   dialogVisible: false,
   imgList: [],
@@ -101,11 +104,13 @@ const loadPic = (init?: boolean) => {
 const open = () => {
   state.dialogVisible = true
   load()
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 const close = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
 const selectImg = (index: number, list: TGetImageListResult[]) => {

src/components/modules/layout/designBoard/index.vue

@@ -70,7 +70,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 // 页面设计组件
 type TProps = {
@@ -90,14 +90,16 @@ type TSetting = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
   dWidgets,
-  dActiveElement, dSelectWidgets, dAltDown, dDraging,
+  dActiveElement, dSelectWidgets, dAltDown,
   dHoverUuid, showRotatable
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'showRotatable'])
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
+const { dDraging } = storeToRefs(useControlStore())
 
 
 let _dropIn: string | null = ''
@@ -159,7 +161,10 @@ async function drop(e: MouseEvent) {
   const dropIn = _dropIn
   _dropIn = ''
   store.dispatch('setDropOver', '-1')
-  store.commit('setShowMoveable', false) // 清理上一次的选择
+
+  // store.commit('setShowMoveable', false) // 清理上一次的选择
+  controlStore.setShowMoveable(false) // 清理上一次的选择
+
   let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
   // e.stopPropagation()
   e.preventDefault()
@@ -215,7 +220,9 @@ async function drop(e: MouseEvent) {
     const uuid = target.getAttribute('data-uuid')
     if (targetType === 'w-mask') {
       // 容器
-      store.commit('setShowMoveable', true) // 恢复选择
+      // store.commit('setShowMoveable', true) // 恢复选择
+      controlStore.setShowMoveable(true) // 恢复选择
+
       const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
       widget.imgUrl = item.value.url
       // if (e.target.className.baseVal) {
@@ -227,7 +234,10 @@ async function drop(e: MouseEvent) {
         const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
         widget.imgUrl = item.value.url
         console.log('加入+', widget)
-        store.commit('setShowMoveable', true) // 恢复选择
+
+        // store.commit('setShowMoveable', true) // 恢复选择
+        controlStore.setShowMoveable(true) // 恢复选择
+
       } else {
         store.dispatch('addWidget', setting) // 正常加入面板
         // addWidget(setting) // 正常加入面板

src/components/modules/panel/stylePanel.vue

@@ -22,11 +22,13 @@
 // const NAME = 'style-panel'
 import { useStore } from 'vuex'
 import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
-import iconItemSelect from '../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useControlStore } from '@/pinia';
 
 const store = useStore();
+const controlStore = useControlStore()
 
 const activeTab = ref(0)
 const iconList = ref<AlignListData[]>(alignIconList)
@@ -51,7 +53,7 @@ function handleCombine() {
 }
 
 // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
-function alignAction(item: AlignListData) {
+function alignAction(item: TIconItemSelectData) {
   const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
   store.dispatch('getCombined').then((group) => {
     sWidgets.forEach((element: Record<string, any>) => {
@@ -72,7 +74,9 @@ function alignAction(item: AlignListData) {
 }
 function layerChange(newLayer: Record<string, any>[]) {
   store.commit('setDWidgets', newLayer.toReversed())
-  store.commit('setShowMoveable', false)
+
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 </script>

src/components/modules/panel/wrap/CompListWrap.vue

@@ -60,7 +60,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -89,6 +89,7 @@ const state = reactive<TState>({
   showList: [],
 })
 const store = useStore()
+const controlStore = useControlStore()
 const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
@@ -197,7 +198,9 @@ const selectItem = async (item: TGetCompListResult) => {
   if (isDrag) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+  
   tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
   // let group = JSON.parse(tempDetail.data)
   const group: any = await getComponentsData(tempDetail.data)

src/components/modules/panel/wrap/GraphListWrap.vue

@@ -48,7 +48,7 @@ import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
 import { TGetListData } from '@/api/material'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -81,7 +81,10 @@ const dragHelper = new DragHelper()
 const props = defineProps<TProps>()
 
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
   loading: false,
@@ -186,8 +189,9 @@ async function selectItem(item: TGetListData) {
   if (isDrag) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  // this.$store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
 

src/components/modules/panel/wrap/PhotoListWrap.vue

@@ -34,7 +34,7 @@ import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 import { TGetImageListResult } from '@/api/material'
 
 type TProps = {
@@ -56,7 +56,10 @@ type TCurrentCategory = {
 }
 
 const props = defineProps<TProps>()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
   recommendImgList: [],
@@ -81,7 +84,10 @@ onMounted(async () => {
 
 const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item) // await getImage(item.url)
   setting.width = img.width

src/components/modules/panel/wrap/TempListWrap.vue

@@ -32,7 +32,7 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {usePageStore, useUserStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore} from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -52,7 +52,10 @@ type TPageOptions = {
 const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const userStore = useUserStore()
 const pageStore = usePageStore()
 const state = reactive<TState>({
@@ -113,7 +116,10 @@ function checkHeight() {
 }
 // ...mapActions(['selectWidget', 'updatePageData', 'setTemplate', 'pushHistory']),
 async function selectItem(item: IGetTempListData) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   if (dHistoryParams.value.length > 0) {
     const isPass = await useConfirm('提示', '使用模板后，当前页面将会被替换，是否继续', 'warning')
     if (!isPass) {

src/components/modules/panel/wrap/TextListWrap.vue

@@ -29,7 +29,7 @@ import { storeToRefs } from 'pinia';
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
 import { useStore } from 'vuex'
-import { usePageStore } from '@/pinia';
+import { useControlStore, usePageStore } from '@/pinia';
 
 type TBasicTextData = {
   text: string
@@ -38,11 +38,16 @@ type TBasicTextData = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 
 
 const selectBasicText = (item: TBasicTextData) => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wTextSetting))
   setting.text = '双击编辑文字' // item.text
   setting.width = item.fontSize * setting.text.length

src/components/modules/panel/wrap/ToolsListWrap.vue

@@ -33,9 +33,11 @@ import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const route = useRoute()
 
 const loadDone = ref(false)
@@ -61,7 +63,9 @@ onMounted(() => {
 // }
 
 function addQrcode() {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2

src/components/modules/panel/wrap/UserWrap.vue

@@ -53,7 +53,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 
 type TProps = {
   active?: number
@@ -72,7 +72,10 @@ type TState = {
 const props = defineProps<TProps>()
 
 const router = useRouter()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
 const imgListRef = ref<typeof photoList | null>(null)
@@ -162,7 +165,10 @@ onMounted(() => {
 
 const selectImg = async (index: number) => {
   const item = state.imgList[index]
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
   setting.width = img.width
@@ -180,7 +186,10 @@ type controlImgParam = {
 }
 
 const deleteImg = async ({ i, item }: controlImgParam) => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   const isPass = await useConfirm('警告', '删除后不可找回，已引用资源将会失效，请谨慎操作', 'warning')
   if (!isPass) {
     return false

src/components/modules/settings/colorSelect.vue

@@ -19,6 +19,7 @@
 import {reactive, onMounted, watch } from 'vue'
 import { useStore } from 'vuex'
 import colorPicker from '@palxp/color-picker'
+import { useControlStore } from '@/pinia';
 
 type TProps = {
   label?: string
@@ -53,6 +54,8 @@ const props = withDefaults(defineProps<TProps>(), {
 const emit = defineEmits<TEmits>()
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const state = reactive<TState>({
   innerColor: '',
   // colorLength: 0,
@@ -116,11 +119,13 @@ const inputBlur = (color: string) => {
 }
 
 const enter = () => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
 }
 
 const hide = () => {
-  store.commit('setShowMoveable', true) // 恢复上一次的选择框
+  // store.commit('setShowMoveable', true) // 恢复上一次的选择框
+  controlStore.setShowMoveable(true) // 恢复上一次的选择框
 }
 
 

src/components/modules/widgets/wImage/wImage.vue

@@ -42,7 +42,7 @@ import PointImg from '@/utils/plugins/pointImg'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore } from '@/pinia'
+import { useCanvasStore, useControlStore } from '@/pinia'
 
 type TProps = {
   params: typeof setting
@@ -82,7 +82,10 @@ const state = reactive<TState>({
   }
 })
 const route = useRoute()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const widgetRef = ref<HTMLElement | null>(null)
 const targetRef = ref<HTMLImageElement | null>(null)
 
@@ -296,9 +299,11 @@ function fixRotate() {
     flipTemp = props.params.flip
     props.params.flip = null
   }
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   setTimeout(() => {
-    store.commit('setShowMoveable', true)
+    // store.commit('setShowMoveable', true)
+    controlStore.setShowMoveable(true)
   }, 100)
 }
 

src/components/modules/widgets/wImage/wImageStyle.vue

@@ -230,7 +230,7 @@ function finishSliceData(key: string, value: number | number[]) {
   }
 }
 
-function finish(key: string = "", value: number | number[] | string | null = "") {
+function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
   store.dispatch('updateWidgetData', {
     uuid: dActiveElement.value.uuid,
     key: key,

src/components/modules/widgets/wQrcode/wQrcodeStyle.vue

@@ -73,6 +73,8 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 type TState = {
   activeNames: string[]
@@ -93,10 +95,15 @@ const state = reactive<TState>({
   alignIconList,
   localization,
 })
+
 const store = useStore()
+const controlStore = useControlStore()
+
+
 const {
-  dActiveElement, dMoving, dWidgets
+  dActiveElement, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dMoving } = storeToRefs(useControlStore())
 // ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
 
 let lastUuid: string | null = null
@@ -213,12 +220,16 @@ async function alignAction(item: TIconItemSelectData) {
 }
 
 async function uploadImgDone(img: TUploadDoneData) {
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+
   await api.material.addMyPhoto(img)
   // this.innerElement.width = img.width
   // this.innerElement.height = img.height * (this.innerElement.width / img.width)
   state.innerElement.url = img.url
-  store.commit('setShowMoveable', true)
+  
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 </script>
 

src/components/modules/widgets/wSvg/wSvgStyle.vue

@@ -46,6 +46,8 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 type TState = {
   activeNames: string[]
@@ -66,8 +68,9 @@ const state = reactive<TState>({
 })
 const store = useStore()
 const {
-  dActiveElement, dMoving
+  dActiveElement
-} = useSetupMapGetters(['dActiveElement', 'dMoving'])
+} = useSetupMapGetters(['dActiveElement'])
+const { dMoving } = storeToRefs(useControlStore())
 
 // ...mapGetters(['dActiveElement', 'dMoving']),
 

src/components/modules/widgets/wText/wTextStyle.vue

@@ -66,6 +66,8 @@ import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter'
 import { wTextSetting ,TwTextData } from './wTextSetting';
+import { storeToRefs } from 'pinia';
+import { useControlStore } from '@/pinia';
 
 type TState = {
   activeNames: string[],
@@ -99,7 +101,9 @@ const state = reactive<TState>({
   alignIconList,
 })
 const dActiveElement = computed(() => store.getters.dActiveElement)
-const dMoving = computed(() => store.getters.dMoving)
+// const dMoving = computed(() => store.getters.dMoving)
+const { dMoving } = storeToRefs(useControlStore())
+
 // const isDraw = computed(() => route.name === 'Draw')
 
 watch(() => dActiveElement.value, () => {

src/mixins/methods/handlePaste.ts

@@ -20,12 +20,14 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
   return new Promise<void>((resolve) => {
     const pageStore = usePageStore()
+    const controlStore = useControlStore()
+
     navigator.clipboard
       .read()
       .then(async (dataTransfer: any) => {
@@ -46,7 +48,9 @@ export default () => {
             // 刷新用户列表
             eventBus.emit('refreshUserImages')
             // 添加图片到画布中
-            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
             const setting = JSON.parse(JSON.stringify(wImageSetting))
             setting.width = width
             setting.height = height
@@ -67,7 +71,9 @@ export default () => {
             }, 100)
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
-            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            controlStore.setShowMoveable(false) // 清理掉上一次的选择
+            
             const setting = JSON.parse(JSON.stringify(wTextSetting))
             setting.text = await navigator.clipboard.readText()
             store.dispatch('addWidget', setting)

src/mixins/methods/keyCodeOptions.ts

@@ -5,10 +5,13 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
+import { useControlStore } from '@/pinia'
 import store from '@/store'
 
 export default function keyCodeOptions(e: any, params: any) {
   const { f } = params
+  const controlStore = useControlStore()
+
   switch (e.keyCode) {
     case 38:
       udlr('top', -1 * f, e)
@@ -34,7 +37,7 @@ export default function keyCodeOptions(e: any, params: any) {
 
         if (type === 'w-text') {
           // 不在编辑状态则执行删除
-          !editable && store.getters.showMoveable && store.dispatch('deleteWidget')
+          !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
         } else store.dispatch('deleteWidget')
       }
       break

src/pinia/design/control/index.ts

@@ -16,7 +16,12 @@ type TControlState = {
 }
 
 type TControlAction = {
-
+  setdMoving: (isMoving: boolean) => void
+  setDraging: (isDraging: boolean) => void
+  setdResizeing: (isResizing: boolean) => void
+  showRefLine: (isRefLine: boolean) => void
+  setShowMoveable: (isShowMoveable: boolean) => void
+  setShowRotatable: (isShowRotatable: boolean) => void
 }
 
 export default defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {

src/store/modules/design/index.ts

@@ -25,10 +25,10 @@ const all = {
       x: 0, // 鼠标按下时的横坐标
       y: 0, // 鼠标按下时的纵坐标
     },
-    dMoving: false, // 是否正在移动组件
+    // dMoving: false, // 是否正在移动组件
-    dDraging: false, // 是否正在抓取组件
+    // dDraging: false, // 是否正在抓取组件
-    dResizeing: false, // 是否正在调整组件宽高
+    // dResizeing: false, // 是否正在调整组件宽高
-    dShowRefLine: true, // 是否显示参考线
+    // dShowRefLine: true, // 是否显示参考线
     dResizeWH: {
       // 初始化调整大小时组件的宽高
       width: 0,
@@ -75,7 +75,7 @@ const all = {
     dGroupJson: {}, // 组合的json数据
     selectItem: { data: null }, // 记录当前选择的元素, data
     activeMouseEvent: null, // 正在活动的鼠标事件
-    showMoveable: false, // 全局控制选择框的显示
+    // showMoveable: false, // 全局控制选择框的显示
     showRotatable: true, // 是否显示moveable的旋转按钮
     zoomScreenChange: null, // 画布强制刷新适应度
     updateRect: null, // 强制刷新操作框
@@ -105,12 +105,12 @@ const all = {
     dMouseXY(state) {
       return state.dMouseXY
     },
-    dMoving(state) {
+    // dMoving(state) {
-      return state.dMoving
+    //   return state.dMoving
-    },
+    // },
-    dDraging(state) {
+    // dDraging(state) {
-      return state.dDraging
+    //   return state.dDraging
-    },
+    // },
     dActiveElement(state) {
       return state.dActiveElement
     },
@@ -129,12 +129,12 @@ const all = {
     dHoverUuid(state) {
       return state.dHoverUuid
     },
-    dResizeing(state) {
+    // dResizeing(state) {
-      return state.dResizeing
+    //   return state.dResizeing
-    },
+    // },
-    dShowRefLine(state) {
+    // dShowRefLine(state) {
-      return state.dShowRefLine
+    //   return state.dShowRefLine
-    },
+    // },
     dCopyElement(state) {
       return state.dCopyElement
     },
@@ -147,9 +147,9 @@ const all = {
     activeMouseEvent(state: any) {
       return state.activeMouseEvent
     },
-    showMoveable(state: any) {
+    // showMoveable(state: any) {
-      return state.showMoveable
+    //   return state.showMoveable
-    },
+    // },
     showRotatable(state: any) {
       return state.showRotatable
     },

src/views/Psd.vue

@@ -73,7 +73,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { processPSD2Page } from '@/utils/plugins/psd'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -93,6 +93,8 @@ const state = reactive<TState>({
   cancelText: '',
 })
 const store = useStore()
+const controlStore = useControlStore()
+
 const route = useRoute()
 
 // const { dZoom } = useSetupMapGetters(['dZoom'])
@@ -158,7 +160,9 @@ async function clear() {
   pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
   // store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
   
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+  
   await nextTick()
   state.isDone = false
 }

src/views/components/HeaderOptions.vue

@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore, useUserStore } from '@/pinia/index'
+import { useControlStore, usePageStore, useUserStore } from '@/pinia/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -69,6 +69,8 @@ const {
   dWidgets, tempEditing, dHistory, dPageHistory
 } = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
 const pageStore = usePageStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(pageStore)
 
 
@@ -84,7 +86,10 @@ async function save(hasCover: boolean = false) {
   if (dHistory.value.length <= 0) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   // console.log(proxy?.dPage, proxy?.dWidgets)
   const { id, tempid } = route.query
   const cover = hasCover ? await draw() : undefined
@@ -92,7 +97,9 @@ async function save(hasCover: boolean = false) {
   const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
   stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
   !id && router.push({ path: '/home', query: { id: newId }, replace: true })
-  store.commit('setShowMoveable', true)
+  
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
     // 保存模板
@@ -187,7 +194,9 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
     const data = JSON.parse(content)
     state.stateBollean = !!_state
     state.title = title
-    store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    controlStore.setShowMoveable(false)
+    
     // this.$store.commit('setDWidgets', [])
     if (type == 1) {
       // 加载文字组合组件

src/views/components/UploadTemplate.vue

@@ -22,7 +22,7 @@ import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -56,7 +56,9 @@ const emit = defineEmits<TEmits>()
 
 const route = useRoute()
 const router = useRouter()
+
 const store = useStore()
+const controlStore = useControlStore()
 
 const canvasImage = ref<typeof SaveImage | null>(null)
 const state = reactive<TState>({
@@ -88,7 +90,9 @@ let widgets: { type: string, imgUrl: string }[] = []
 let page: Record<string, any> = {}
 
 async function prepare() {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   addition = 0
   lenCount = 0
   widgets = dWidgets.value