From a8856b0d683997b7bf861edd5f77e5db5d9e4288 Mon Sep 17 00:00:00 2001 From: ShawnPhang Date: Tue, 2 Apr 2024 21:05:54 +0800 Subject: [PATCH] fix: pinia bugs --- .../methods/DesignFeatures/setComponents.ts | 5 +- src/common/methods/DesignFeatures/setImage.ts | 5 +- src/components/business/aigc/sd.vue | 578 ++++++++++++++++++ .../modules/layout/designBoard/index.vue | 6 +- .../modules/layout/zoomControl/index.vue | 4 +- .../modules/panel/wrap/BgImgListWrap.vue | 4 +- .../modules/panel/wrap/CompListWrap.vue | 4 +- .../modules/panel/wrap/GraphListWrap.vue | 4 +- .../modules/panel/wrap/PhotoListWrap.vue | 4 +- .../modules/panel/wrap/TempListWrap.vue | 60 +- .../modules/panel/wrap/TextListWrap.vue | 5 +- .../modules/panel/wrap/ToolsListWrap.vue | 4 +- .../modules/panel/wrap/UserWrap.vue | 4 +- src/components/modules/widgets/pageStyle.vue | 6 +- src/mixins/methods/handlePaste.ts | 4 +- src/store/base/index.ts | 3 - src/store/design/canvas/d.ts | 76 +++ src/store/design/canvas/index.ts | 79 ++- src/store/design/control/index.ts | 2 +- src/store/design/group/action/index.ts | 6 +- .../design/history/actions/handleHistory.ts | 4 +- .../design/history/actions/pushHistory.ts | 4 +- src/store/design/history/index.ts | 4 +- src/store/design/page/index.ts | 106 ---- src/store/design/widget/actions/align.ts | 4 +- src/store/design/widget/actions/index.ts | 6 +- src/store/design/widget/actions/resize.ts | 4 +- src/store/design/widget/actions/select.ts | 6 +- src/store/design/widget/actions/widget.ts | 4 +- src/store/design/widget/getter/index.ts | 6 +- src/store/design/widget/index.ts | 2 +- src/store/index.ts | 2 - src/utils/utils.ts | 52 +- src/views/Draw.vue | 5 +- src/views/Index.vue | 4 +- src/views/Psd.vue | 4 +- src/views/components/HeaderOptions.vue | 4 +- src/views/components/UploadTemplate.vue | 4 +- 38 files changed, 790 insertions(+), 298 deletions(-) create mode 100644 src/components/business/aigc/sd.vue create mode 100644 src/store/design/canvas/d.ts delete mode 100644 src/store/design/page/index.ts diff --git a/src/common/methods/DesignFeatures/setComponents.ts b/src/common/methods/DesignFeatures/setComponents.ts index 19f1b7a..4f34936 100644 --- a/src/common/methods/DesignFeatures/setComponents.ts +++ b/src/common/methods/DesignFeatures/setComponents.ts @@ -5,20 +5,19 @@ * @LastEditors: ShawnPhang , Jeremy Yu * @LastEditTime: 2024-03-02 11:50:00 */ -import { useCanvasStore, usePageStore } from '@/store' +import { useCanvasStore } from '@/store' import { TdWidgetData } from '@/store/design/widget' // import store from '@/store' export default async function setCompData(item: TdWidgetData[] | string) { const canvasStore = useCanvasStore() - const pageStore = usePageStore() const group: TdWidgetData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item)) let parent: Partial = {} Array.isArray(group) && group.forEach((element) => { element.type === 'w-group' && (parent = element) }) - const { width: screenWidth, height: screenHeight } = pageStore.dPage + const { width: screenWidth, height: screenHeight } = canvasStore.dPage const { width: imgWidth = 0, height: imgHeight = 0 } = parent let ratio = 1 // 先限制在画布内，保证不超过边界 diff --git a/src/common/methods/DesignFeatures/setImage.ts b/src/common/methods/DesignFeatures/setImage.ts index 4a89f23..2c49d91 100644 --- a/src/common/methods/DesignFeatures/setImage.ts +++ b/src/common/methods/DesignFeatures/setImage.ts @@ -7,7 +7,7 @@ */ // import store from '@/store' import { getImage } from '../getImgDetail' -import { useCanvasStore, usePageStore } from '@/store' +import { useCanvasStore } from '@/store' export type TItem2DataParam = { id?: string | number @@ -26,9 +26,8 @@ export type TItem2DataResult = { export default async function setItem2Data(item: TItem2DataParam): Promise> { const canvasStore = useCanvasStore() - const pageStore = usePageStore() const cloneItem = JSON.parse(JSON.stringify(item)) - const { width: screenWidth, height: screenHeight } = pageStore.dPage + const { width: screenWidth, height: screenHeight } = canvasStore.dPage let { width: imgWidth, height: imgHeight } = item if (!imgWidth || !imgHeight) { const actual = await getImage(item.url) diff --git a/src/components/business/aigc/sd.vue b/src/components/business/aigc/sd.vue new file mode 100644 index 0000000..6999b35 --- /dev/null +++ b/src/components/business/aigc/sd.vue @@ -0,0 +1,578 @@ + + + + + + diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue index 7f9484d..48900f0 100644 --- a/src/components/modules/layout/designBoard/index.vue +++ b/src/components/modules/layout/designBoard/index.vue @@ -82,9 +82,9 @@ import PointImg from '@/utils/plugins/pointImg' import getComponentsData from '@/common/methods/DesignFeatures/setComponents' import { debounce } from 'throttle-debounce' import { move, moveInit } from '@/mixins/move' -import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/store' +import { useCanvasStore, useControlStore, useGroupStore, useWidgetStore } from '@/store' import { storeToRefs } from 'pinia' -import { TPageState } from '@/store/design/page' +import { TPageState } from '@/store/design/canvas/d' // 页面设计组件 type TProps = { pageDesignCanvasId: string @@ -103,7 +103,7 @@ const canvasStore = useCanvasStore() const { pageDesignCanvasId } = defineProps() -const { dPage } = storeToRefs(usePageStore()) +const { dPage } = storeToRefs(useCanvasStore()) const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore) const { dDraging, showRotatable, dAltDown, dSpaceDown } = storeToRefs(controlStore) const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore) diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue index 83e9550..bc220fd 100644 --- a/src/components/modules/layout/zoomControl/index.vue +++ b/src/components/modules/layout/zoomControl/index.vue @@ -26,7 +26,7 @@ import { OtherList, TZoomData, ZoomList } from './data'; // import { useSetupMapGetters } from '@/common/hooks/mapGetters'; import { useRoute } from 'vue-router'; import { storeToRefs } from 'pinia'; -import { useCanvasStore, useForceStore, usePageStore } from '@/store'; +import { useCanvasStore, useForceStore } from '@/store'; const route = useRoute() @@ -48,7 +48,7 @@ const curAction = ref('') // const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange']) const canvasStore = useCanvasStore() -const { dPage } = storeToRefs(usePageStore()) +const { dPage } = storeToRefs(useCanvasStore()) const { zoomScreenChange } = storeToRefs(useForceStore()) const { dZoom, dScreen } = storeToRefs(canvasStore) diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue index e2c0a7f..c124bfe 100644 --- a/src/components/modules/panel/wrap/BgImgListWrap.vue +++ b/src/components/modules/panel/wrap/BgImgListWrap.vue @@ -28,7 +28,7 @@ import api from '@/api' import { ElImage } from 'element-plus' import { TGetImageListResult } from '@/api/material'; -import { usePageStore, useWidgetStore } from '@/store'; +import { useCanvasStore, useWidgetStore } from '@/store'; type TCommonPanelData = { color: string @@ -57,7 +57,7 @@ const { model } = defineProps() -const pageStore = usePageStore() +const pageStore = useCanvasStore() const widgetStore = useWidgetStore() const state = reactive({ diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue index edb0eb3..ef0d491 100644 --- a/src/components/modules/panel/wrap/CompListWrap.vue +++ b/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 { useControlStore, usePageStore, useWidgetStore } from '@/store' +import { useControlStore, useCanvasStore, useWidgetStore } from '@/store' type TState = { loading: boolean @@ -91,7 +91,7 @@ const state = reactive({ const controlStore = useControlStore() const widgetStore = useWidgetStore() -const dPage = usePageStore().dPage +const dPage = useCanvasStore().dPage const pageOptions = { type: 1, page: 0, pageSize: 20 } onMounted(async () => { diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue index 74e09ce..a39dfd3 100644 --- a/src/components/modules/panel/wrap/GraphListWrap.vue +++ b/src/components/modules/panel/wrap/GraphListWrap.vue @@ -49,7 +49,7 @@ import { wSvgSetting } from '../../widgets/wSvg/wSvgSetting' import setImageData from '@/common/methods/DesignFeatures/setImage' import DragHelper from '@/common/hooks/dragHelper' import { TGetListData } from '@/api/material' -import { useControlStore, usePageStore, useWidgetStore } from '@/store' +import { useControlStore, useCanvasStore, useWidgetStore } from '@/store' import { storeToRefs } from 'pinia' type TProps = { @@ -87,7 +87,7 @@ const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b'] const controlStore = useControlStore() const widgetStore = useWidgetStore() -const { dPage } = storeToRefs(usePageStore()) +const { dPage } = storeToRefs(useCanvasStore()) const state = reactive({ loading: false, loadDone: false, diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue index 010499a..13aca4c 100644 --- a/src/components/modules/panel/wrap/PhotoListWrap.vue +++ b/src/components/modules/panel/wrap/PhotoListWrap.vue @@ -34,7 +34,7 @@ import api from '@/api' import setImageData from '@/common/methods/DesignFeatures/setImage' import { storeToRefs } from 'pinia' -import { useControlStore, usePageStore, useWidgetStore } from '@/store' +import { useControlStore, useCanvasStore, useWidgetStore } from '@/store' import { TGetImageListResult } from '@/api/material' type TProps = { @@ -61,7 +61,7 @@ const props = defineProps() const controlStore = useControlStore() const widgetStore = useWidgetStore() -const { dPage } = storeToRefs(usePageStore()) +const { dPage } = storeToRefs(useCanvasStore()) const state = reactive({ recommendImgList: [], loadDone: false, diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue index ed3a5fe..5e37964 100644 --- a/src/components/modules/panel/wrap/TempListWrap.vue +++ b/src/components/modules/panel/wrap/TempListWrap.vue @@ -11,7 +11,7 @@ {{ state.title }} - +
    拼命加载中
    @@ -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 {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/store' +import { useControlStore, useCanvasStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore } from '@/store' import { storeToRefs } from 'pinia' type TState = { @@ -44,8 +44,8 @@ type TState = { } type TPageOptions = { - page: number, - pageSize: number, + page: number + pageSize: number cate: number | string state?: string } @@ -54,11 +54,10 @@ const listRef = ref(null) const route = useRoute() const router = useRouter() - const controlStore = useControlStore() const userStore = useUserStore() -const pageStore = usePageStore() +const pageStore = useCanvasStore() const widgetStore = useWidgetStore() const forceStore = useForceStore() const state = reactive({ @@ -118,10 +117,8 @@ function checkHeight() { const isLess = listRef.value.offsetHeight > (listRef.value.firstElementChild as HTMLElement)?.offsetHeight isLess && load() } -// ...mapActions(['selectWidget', 'updatePageData', 'setTemplate', 'pushHistory']), -async function selectItem(item: IGetTempListData) { - // store.commit('setShowMoveable', false) // 清理掉上一次的选择框 +async function selectItem(item: IGetTempListData) { controlStore.setShowMoveable(false) // 清理掉上一次的选择框 if (dHistoryParams.value.length > 0) { @@ -130,12 +127,8 @@ async function selectItem(item: IGetTempListData) { return false } } - // store.commit('managerEdit', false) userStore.managerEdit(false) - widgetStore.setDWidgets([]) - // store.commit('setDWidgets', []) - setTempId(item.id) let result = null @@ -146,52 +139,16 @@ async function selectItem(item: IGetTempListData) { result = JSON.parse(item.data) } const { page, widgets } = result - console.log(widgets) - pageStore.setDPage(page) - // store.commit('setDPage', page) widgetStore.setTemplate(widgets) - // store.dispatch('setTemplate', widgets) - // setTemplate(widgets) setTimeout(() => { forceStore.setZoomScreenChange() - // store.commit('zoomScreenChange') }, 300) widgetStore.selectWidget({ - uuid: '-1' + uuid: '-1', }) - // store.dispatch('selectWidget', { - // uuid: '-1' - // }) - // selectWidget({ - // uuid: '-1', - // }) } - // action({ name, value }: any, item: any, index: number) { - // switch (name) { - // case 'edit': - // this.editTemp(item) - // break - // case 'del': - // this.delTemp(item, index) - // break - // case 'stat': - // this.setTempStat(item, value) - // break - // } - // }, - // editTemp(item: any) { - // this.$router.push({ path: '/home', query: { tempid: item.id }, replace: true }) - // this.$store.commit('managerEdit', true) - // }, - // delTemp({ id }: any, index: number) { - // api.home.removeComp({ id }) - // this.list.splice(index, 1) - // this.$store.commit('managerEdit', false) - // }, - // setTempStat({ id }: any, stat: string) { - // api.home.setTempStat({ id, stat }) - // }, + function setTempId(tempId: number | string) { const { id } = route.query router.push({ path: '/home', query: { tempid: tempId, id }, replace: true }) @@ -202,7 +159,6 @@ defineExpose({ cateChange, listRef, }) -