rebuilt: dPage store using pinia

src/api/material.ts

@@ -73,6 +73,7 @@ export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {
 
 type TGetImageListParams = {
   page?: number
+  pageSize?: number
   cate?: number
 }
 

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

@@ -70,6 +70,8 @@ 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 { usePageStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
@@ -90,10 +92,12 @@ type TSetting = {
 const store = useStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
-  dPaddingTop, dPage, dZoom, dScreen, dWidgets,
+  dPaddingTop, dZoom, dScreen, dWidgets,
   dActiveElement, dSelectWidgets, dAltDown, dDraging,
   dHoverUuid, showRotatable
-} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+} = useSetupMapGetters(['dPaddingTop', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 let _dropIn: string | null = ''
 let _srcCache: string | null = ''

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

@@ -26,6 +26,8 @@ import addMouseWheel from '@/common/methods/addMouseWheel'
 import { OtherList, TZoomData, ZoomList } from './data';
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { usePageStore } from '@/pinia';
 
 const route = useRoute()
 const store = useStore()
@@ -46,7 +48,9 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { dPage, dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom'])
+const { dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dScreen', 'zoomScreenChange', 'dZoom'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 watch(
   activezoomIndex,

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

@@ -28,6 +28,7 @@ import api from '@/api'
 import { useStore } from 'vuex'
 import { ElImage } from 'element-plus'
 import { TGetImageListResult } from '@/api/material';
+import { usePageStore } from '@/pinia';
 
 type TCommonPanelData = {
   color: string
@@ -56,6 +57,8 @@ const { model } = defineProps<TProps>()
 
 
 const store = useStore()
+const pageStore = usePageStore()
+
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -113,28 +116,27 @@ const load = async (init: boolean = false) => {
 }
 
 function setBGcolor(color: string) {
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
-    key: 'backgroundImage',
+    key: "backgroundImage",
-    value: '',
+    value: ''
   })
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundColor',
     value: color,
-    pushHistory: true,
+    pushHistory: true
   })
   store.dispatch('selectWidget', {
     uuid: '-1',
   })
 }
 
-// ...mapActions(['selectWidget', 'updatePageData']),
 async function selectItem(item: TGetImageListResult) {
   // this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundTransform',
     value: {},
   })
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: item.url,
     pushHistory: true,
@@ -142,18 +144,6 @@ async function selectItem(item: TGetImageListResult) {
   store.dispatch('selectWidget', {
     uuid: '-1',
   })
-  // this.updatePageData({
-  //   key: 'backgroundTransform',
-  //   value: {},
-  // })
-  // this.updatePageData({
-  //   key: 'backgroundImage',
-  //   value: item.url,
-  //   pushHistory: true,
-  // })
-  // this.selectWidget({
-  //   uuid: '-1',
-  // })
 }
 
 function dragStart(_: MouseEvent, _item: TGetImageListResult) {

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

@@ -60,6 +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'
 
 type TState = {
   loading: boolean
@@ -88,6 +89,7 @@ const state = reactive<TState>({
   showList: [],
 })
 const store = useStore()
+const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
 onMounted(async () => {
@@ -200,7 +202,7 @@ const selectItem = async (item: TGetCompListResult) => {
   // let group = JSON.parse(tempDetail.data)
   const group: any = await getComponentsData(tempDetail.data)
   let parent: Record<string, any> = { x: 0, y: 0 }
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage
 
   Array.isArray(group) &&
     group.forEach((element) => {

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

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="wrap">
-    <search-header v-model="searchKeyword" type="none" @change="searchChange" />
+    <search-header v-model="state.searchKeyword" type="none" @change="searchChange" />
     <div style="height: 0.5rem" />
     <!-- <div class="types">
       <div v-for="(t, ti) in types" :key="ti + 't'" :style="{ backgroundColor: colors[ti] }" :class="['types__item', { 'types--select': currentType === t.id }]" @click="selectType(t)"></div>
@@ -15,48 +15,74 @@
     <!-- <div class="tags">
       <el-check-tag v-for="(t2, t2i) in sub" :key="t2i + 't2'" :checked="t2.id === currentCheck" class="tags__item" @click="tagsChange(t2.id)">{{ t2.name }}</el-check-tag>
     </div> -->
-    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+    <classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
       <template v-slot="{ index }">
         <div class="list-wrap">
-          <div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+          <div v-for="(item, i) in state.showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
             <el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
           </div>
         </div>
       </template>
     </classHeader>
 
-    <ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
+    <ul v-if="state.currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+      <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
       <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
-        <div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+        <div v-for="(item, i) in state.list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
           <el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
         </div>
       </el-space>
-      <div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
-      <div v-show="loadDone" :style="list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
+      <div v-show="state.loadDone" :style="state.list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
+import { reactive, toRefs, onMounted } from 'vue'
 import api from '@/api'
 import wImage from '../../widgets/wImage/wImage.vue'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
-import { mapActions, mapGetters } from 'vuex'
+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 { storeToRefs } from 'pinia'
+
+type TProps = {
+  active?: boolean
+}
+
+type TState = {
+  loading: boolean
+  loadDone: boolean
+  sub: []
+  list: TGetListData[]
+  currentType: Number
+  currentCheck:number
+  colors: string[]
+  currentCategory: TCurrentCategory | null
+  types: []
+  showList: TGetListData[][]
+  searchKeyword: string
+}
+
+type TCurrentCategory = {
+  name: string
+  id?: number
+}
 
 let isDrag = false
 let startPoint = { x: 99999, y: 99999 }
 const dragHelper = new DragHelper()
 
-export default defineComponent({
+const props = defineProps<TProps>()
-  components: {},
+
-  props: ['active'],
-  setup(props) {
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
-    const state: any = reactive({
+const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
   loading: false,
   loadDone: false,
   sub: [],
@@ -84,17 +110,19 @@ export default defineComponent({
     }
   }
 })
+
 // const dragHelper = new DragHelper()
 // let isDrag = false
 // let startPoint = { x: 99999, y: 99999 }
-    const mouseup = (e: any) => {
+const mouseup = (e: MouseEvent) => {
   e.preventDefault()
   setTimeout(() => {
     isDrag = false
     startPoint = { x: 99999, y: 99999 }
   }, 10)
 }
-    const mousemove = (e: any) => {
+
+const mousemove = (e: MouseEvent) => {
   e.preventDefault()
   if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
     isDrag = true
@@ -126,12 +154,12 @@ export default defineComponent({
   }, 100)
 }
 
-    const searchChange = (e: any) => {
+const searchChange = (_: Event) => {
   state.currentCategory = { name: '搜索结果' }
   load(true)
 }
 
-    const selectTypes = (item: any) => {
+const selectTypes = (item: TCurrentCategory) => {
   state.currentCategory = item
   load(true)
 }
@@ -139,32 +167,32 @@ export default defineComponent({
   state.currentCategory = null
 }
 
-    return {
+defineExpose({
-      ...toRefs(state),
   load,
   searchChange,
   selectTypes,
   back,
   mouseup,
   mousemove,
-    }
+})
-  },
+
-  computed: {
+
-    ...mapGetters(['dPage']),
+// computed: {
-  },
+//   ...mapGetters(['dPage']),
-  methods: {
+// }
-    ...mapActions(['addWidget']),
+// ...mapActions(['addWidget']),
-    async selectItem(item: any) {
+async function selectItem(item: TGetListData) {
   if (isDrag) {
     return
   }
-      this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // this.$store.commit('setShowMoveable', false)
   let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImage.setting))
-      const img: any = await setImageData(item)
+  const img = await setImageData(item)
 
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      const { width: pW, height: pH } = this.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
   setting.imgUrl = item.url
@@ -180,17 +208,16 @@ export default defineComponent({
   if (item.type === 'mask') {
     setting.mask = item.url
   }
-      this.addWidget(setting)
+  store.dispatch('addWidget', setting)
-    },
+}
-    async dragStart(e: any, item: any) {
+async function dragStart(e: MouseEvent, item: TGetListData) {
   startPoint = { x: e.x, y: e.y }
   const { width, height, thumb, url } = item
   const img = await setImageData({ width, height, url: thumb || url })
   dragHelper.start(e, img.canvasWidth)
-      this.$store.commit('selectItem', { data: { value: item }, type: item.type })
+  store.commit('selectItem', { data: { value: item }, type: item.type })
-    },
+  // this.$store.commit('selectItem', { data: { value: item }, type: item.type })
-  },
+}
-})
 </script>
 
 <style lang="less" scoped>

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

@@ -3,43 +3,61 @@
  * @Date: 2022-02-11 18:48:23
  * @Description: 照片图库 Form:Unsplash无版权图片
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 19:04:39
+ * @LastEditTime: 2024-03-19 10:04:39
 -->
 <template>
   <div class="wrap">
     <search-header type="none" @change="searchChange" />
     <div style="height: 0.5rem" />
-    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+    <classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
       <template v-slot="{ index }">
-        <photo-list :isShort="true" :listData="showList[index]" @load="getDataList" @drag="dragStart($event, showList[index])" @select="selectImg($event, showList[index])" />
+        <photo-list :isShort="true" :listData="state.showList[index]" @load="getDataList" @drag="dragStart($event, state.showList[index])" @select="selectImg($event, state.showList[index])" />
       </template>
     </classHeader>
-    <div v-if="currentCategory">
+    <div v-if="state.currentCategory">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+      <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
       <br /><br /><br />
       <div style="margin: 0 1rem; height: 100vh">
-        <photo-list :isDone="loadDone" :listData="recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
+        <photo-list :isDone="state.loadDone" :listData="state.recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 // 图片列表
-const NAME = 'img-list-wrap'
+// const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
 import wImage from '../../widgets/wImage/wImage.vue'
 import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
+import { TGetImageListResult } from '@/api/material'
 
-export default {
+type TProps = {
-  name: NAME,
+  active?: boolean
-  components: {},
+}
-  props: ['active'],
+
-  setup() {
+type TState = {
+  recommendImgList: TGetImageListResult[],
+  loadDone: boolean
+  page: number
+  currentCategory: TCurrentCategory | null,
+  types: [],
+  showList: TGetImageListResult[][],
+}
+
+type TCurrentCategory = {
+  name: string
+  id?: number
+}
+
+const props = defineProps<TProps>()
 const store = useStore()
-    const state = reactive({
+const { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
   recommendImgList: [],
   loadDone: false,
   page: 0,
@@ -47,7 +65,6 @@ export default {
   types: [],
   showList: [],
 })
-    const dPage = computed(() => store.getters.dPage)
 let loading = false
 
 onMounted(async () => {
@@ -61,7 +78,7 @@ export default {
   }
 })
 
-    const selectImg = async (index, list) => {
+const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
   let setting = JSON.parse(JSON.stringify(wImage.setting))
@@ -69,7 +86,7 @@ export default {
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
   setting.imgUrl = item.url
-      const { width: pW, height: pH } = dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
   store.dispatch('addWidget', setting)
@@ -81,26 +98,27 @@ export default {
   }
   loading = true
   state.page += 1
-      let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory.id, page: state.page, pageSize: 30 })
+  let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory?.id, page: state.page, pageSize: 30 })
   list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
   setTimeout(() => {
     loading = false
   }, 100)
 }
 
-    const dragStart = (index, list) => {
+const dragStart = (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
   store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 
-    const searchChange = (e) => {
+const searchChange = (e: Event) => {
   console.log(e)
 }
 
-    const selectTypes = (item) => {
+const selectTypes = (item: TCurrentCategory) => {
   state.currentCategory = item
   getDataList()
 }
+
 const back = () => {
   state.currentCategory = null
   state.page = 0
@@ -108,17 +126,14 @@ export default {
   state.recommendImgList = []
 }
 
-    return {
+defineExpose({
-      ...toRefs(state),
   selectImg,
   getDataList,
   dragStart,
   searchChange,
   selectTypes,
   back,
-    }
+})
-  },
-}
 </script>
 
 <style lang="less" scoped>

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 useUserStore from '@/store/modules/base/user'
+import {usePageStore, useUserStore} from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -54,6 +54,7 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 const userStore = useUserStore()
+const pageStore = usePageStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -135,7 +136,9 @@ async function selectItem(item: IGetTempListData) {
   const { page, widgets } = result
   console.log(widgets)
 
-  store.commit('setDPage', page)
+  pageStore.setDPage(page)
+  // store.commit('setDPage', page)
+  
   store.dispatch('setTemplate', widgets)
   // setTemplate(widgets)
   setTimeout(() => {

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

@@ -25,9 +25,11 @@
 <script lang="ts" setup>
 // const NAME = 'text-list-wrap'
 
+import { storeToRefs } from 'pinia';
 import wText from '../../widgets/wText/wText.vue'
 
 import { useStore } from 'vuex'
+import { usePageStore } from '@/pinia';
 
 type TBasicTextData = {
   text: string
@@ -36,6 +38,7 @@ type TBasicTextData = {
 }
 
 const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
 
 
 const selectBasicText = (item: TBasicTextData) => {
@@ -45,7 +48,7 @@ const selectBasicText = (item: TBasicTextData) => {
   setting.width = item.fontSize * setting.text.length
   setting.fontSize = item.fontSize
   setting.fontWeight = item.fontWeight
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - item.fontSize * 3
   setting.top = pH / 2 - item.fontSize / 2
   store.dispatch('addWidget', setting)

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

@@ -32,13 +32,15 @@ import { useRoute } from 'vue-router'
 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'
 
 const store = useStore()
 const route = useRoute()
 
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
-const { dPage } = useSetupMapGetters(['dPage'])
+const { dPage } = storeToRefs(usePageStore())
 
 onMounted(() => {
   // this.getDataList()

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

@@ -51,6 +51,8 @@ import imgWaterFall from './components/imgWaterFall.vue'
 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'
 
 type TProps = {
   active?: number
@@ -70,6 +72,7 @@ const props = defineProps<TProps>()
 
 const router = useRouter()
 const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
 const imgListRef = ref<typeof photoList | null>(null)
 
@@ -164,7 +167,7 @@ const selectImg = async (index: number) => {
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
   setting.imgUrl = item.url
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
   store.dispatch('addWidget', setting)

src/components/modules/widgets/pageStyle.vue

@@ -48,6 +48,8 @@ import _dl from '@/common/methods/download'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { usePageStore } from '@/pinia'
+import { TPageStore } from '@/pinia/design/page'
 
 type TState = {
   activeNames: string[]
@@ -61,6 +63,7 @@ type TState = {
 }
 
 const store = useStore()
+const pageStore = usePageStore()
 const state = reactive<TState>({
   activeNames: ['1', '2', '3', '4'],
   innerElement: {},
@@ -94,7 +97,6 @@ onMounted(() => {
   change()
 })
 
-// ...mapActions(['updatePageData']),
 function colorChange(e: colorChangeData) {
   if (e.mode === '渐变') {
     // setTimeout(() => {
@@ -128,21 +130,17 @@ function changeValue() {
       if (state.ingoreKeys.indexOf(key) !== -1) {
         dActiveElement.value[key] = state.innerElement[key]
       } else {
-        store.dispatch('updatePageData', {
+        pageStore.updatePageData({
-          key: key,
+          key: key as keyof TPageStore,
           value: state.innerElement[key],
         })
-        // updatePageData({
-        //   key: key,
-        //   value: this.innerElement[key],
-        // })
       }
     }
   }
 }
 
-function finish(key: string, value: string | number) {
+function finish(key: keyof TPageStore, value: string | number) {
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: key,
     value: value,
     pushHistory: true,
@@ -150,7 +148,7 @@ function finish(key: string, value: string | number) {
 }
 async function uploadImgDone(img: TUploadDoneData) {
   await api.material.addMyPhoto(img)
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundTransform',
     value: {},
   })
@@ -158,7 +156,7 @@ async function uploadImgDone(img: TUploadDoneData) {
 }
 async function deleteBg() {
   _localTempBG = null
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: '',
     pushHistory: true,

src/mixins/methods/handlePaste.ts

@@ -19,9 +19,11 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
+import { usePageStore } from '@/pinia'
 
 export default () => {
   return new Promise<void>((resolve) => {
+    const pageStore = usePageStore()
     navigator.clipboard
       .read()
       .then(async (dataTransfer: any) => {
@@ -47,7 +49,7 @@ export default () => {
             setting.width = width
             setting.height = height
             setting.imgUrl = url
-            const { width: pW, height: pH } = store.getters.dPage
+            const { width: pW, height: pH } = pageStore.dPage
             setting.left = pW / 2 - width / 2
             setting.top = pH / 2 - height / 2
             store.dispatch('addWidget', setting)

src/pinia/design/page/index.ts

@@ -35,11 +35,14 @@ type TPageGetter = {
 }
 
 type TPageActions = {
+  /** 更新Page数据 */
   updatePageData<T extends keyof TPageStore>(data: {
     key: T
     value: TPageStore[T]
-    pushHistory: boolean
+    pushHistory?: boolean
   }): void
+  /** 设置dPage */
+  setDPage(data: TPageStore): void
 }
 
 export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
@@ -78,5 +81,13 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
         // store.dispatch('pushHistory', 'updatePageData')
       }
     },
+    /** 设置dPage */
+    setDPage(data: TPageStore) {
+      const cur = this as Record<string, any>
+      const keys = Object.keys(data) as (keyof TPageStore)[];
+      keys.forEach(val => {
+        cur[val] = data[val]
+      })
+    }
   }
 })

src/pinia/index.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: Jeremy Yu
  * @Date: 2024-03-18 21:00:00
- * @Description: 方法暴露
+ * @Description: Store方法export
  * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-18 21:00:00
  */

src/views/Draw.vue

@@ -21,6 +21,8 @@ import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
 
 type TState = {
   style: StyleValue
@@ -34,7 +36,9 @@ const state = reactive<TState>({
     left: '0px',
   },
 })
-const { dPage } = useSetupMapGetters(['dPage'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+// const { dPage } = useSetupMapGetters(['dPage'])
 
 onMounted(() => {
   store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
@@ -64,7 +68,8 @@ async function load() {
       store.dispatch('addGroup', content)
       // addGroup(content)
     } else {
-      store.commit('setDPage', content.page)
+      pageStore.setDPage(content.page)
+      // store.commit('setDPage', content.page)
       if (id) {
         store.commit('setDWidgets', widgets)
       } else {

src/views/Index.vue

@@ -73,6 +73,8 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -94,8 +96,10 @@ const beforeUnload = function (e: Event): string {
 !_config.isDev && window.addEventListener('beforeunload', beforeUnload)
 
 const {
-  dActiveElement, dHistoryParams, dCopyElement, dPage, dZoom
+  dActiveElement, dHistoryParams, dCopyElement, dZoom
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
+} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dZoom'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 const state = reactive<TState>({
   style: {

src/views/Psd.vue

@@ -72,6 +72,8 @@ 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 { usePageStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   isDone: boolean
@@ -92,7 +94,10 @@ const state = reactive<TState>({
 const store = useStore()
 const route = useRoute()
 
-const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
+const { dZoom } = useSetupMapGetters(['dZoom'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+
 const zoomControlRef = ref<typeof zoomControl | null>()
 
 let loading: ReturnType<typeof useLoading> | null = null
@@ -137,14 +142,20 @@ async function loadPSD(file: File) {
     }
 
     const { width, height, background: bg } = data
-    store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+
+    pageStore.setDPage(Object.assign(pageStore.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    // store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    
     await loadDone()
   }, 10)
 }
 
 async function clear() {
   store.commit('setDWidgets', [])
-  store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+
+  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)
   await nextTick()
   state.isDone = false

src/views/components/HeaderOptions.vue

@@ -40,7 +40,8 @@ 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 { useUserStore } from '@/pinia/index'
+import { usePageStore, useUserStore } from '@/pinia/index'
+import { storeToRefs } from 'pinia'
 
 type TProps = {
   modelValue?: boolean
@@ -65,8 +66,11 @@ const store = useStore()
 const userStore = useUserStore()
 const canvasImage = ref<typeof SaveImage | null>(null)
 const {
-  dPage, dWidgets, tempEditing, dHistory, dPageHistory
+  dWidgets, tempEditing, dHistory, dPageHistory
-} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+} = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+
 
 const state = reactive<TState>({
   stateBollean: false,
@@ -192,7 +196,8 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
       store.dispatch('addGroup', data)
       // addGroup(data)
     } else {
-      store.commit('setDPage', data.page)
+      pageStore.setDPage(data.page)
+      // store.commit('setDPage', data.page)
       id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()

src/views/components/UploadTemplate.vue

@@ -22,6 +22,8 @@ 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 { storeToRefs } from 'pinia'
 
 type TProps = {
   modelValue?: string
@@ -46,7 +48,8 @@ type TState = {
   loading: false,
 }
 
-const { dPage, dWidgets } = useSetupMapGetters(['dPage', 'dWidgets'])
+const { dWidgets } = useSetupMapGetters(['dWidgets'])
+const { dPage } = storeToRefs(usePageStore())
 
 const props = defineProps<TProps>()
 const emit = defineEmits<TEmits>()