diff --git a/src/api/material.ts b/src/api/material.ts
index 8765569..7561373 100644
--- a/src/api/material.ts
+++ b/src/api/material.ts
@@ -73,6 +73,7 @@ export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {
 
 type TGetImageListParams = {
   page?: number
+  pageSize?: number
   cate?: number
 }
 
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 749e6c3..2403dcc 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/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 = ''
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index cd3518d..deb318a 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/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,
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index 59f8fea..f703ddb 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/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', {
-    key: 'backgroundImage',
-    value: '',
+  pageStore.updatePageData({
+    key: "backgroundImage",
+    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) {
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 270e0be..11d131e 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/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) => {
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 490ad35..9f1e3bc 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/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,182 +15,209 @@
     <!-- <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">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+    <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">{{ 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="loadDone" :style="list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
+      <div v-show="state.loadDone" :style="state.list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
+<script lang="ts" setup>
+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({
-  components: {},
-  props: ['active'],
-  setup(props) {
-    const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
-    const state: any = reactive({
-      loading: false,
-      loadDone: false,
-      sub: [],
-      list: [],
-      currentType: 2, // 2
-      currentCheck: 0,
-      colors,
-      currentCategory: null,
-      types: [],
-      showList: [],
-      searchKeyword: '',
-    })
-    const pageOptions = { page: 0, pageSize: 20 }
+const props = defineProps<TProps>()
 
-    onMounted(async () => {
-      if (state.types.length <= 0) {
-        const types = await api.material.getKinds({ type: 2 })
-        state.types = types
-        for (const iterator of types) {
-          const { list } = await api.material.getList({
-            cate: iterator.id,
-            pageSize: 3,
-          })
-          state.showList.push(list)
-        }
-      }
-    })
-    // const dragHelper = new DragHelper()
-    // let isDrag = false
-    // let startPoint = { x: 99999, y: 99999 }
-    const mouseup = (e: any) => {
-      e.preventDefault()
-      setTimeout(() => {
-        isDrag = false
-        startPoint = { x: 99999, y: 99999 }
-      }, 10)
-    }
-    const mousemove = (e: any) => {
-      e.preventDefault()
-      if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
-        isDrag = true
-      }
-    }
-
-    const load = async (init: boolean = false) => {
-      if (init) {
-        state.list = []
-        pageOptions.page = 0
-        state.loadDone = false
-      }
-      if (state.loadDone || state.loading) {
-        return
-      }
-      state.loading = true
-      pageOptions.page += 1
-      const list = await api.material.getList({
-        ...{ cate: state.currentCategory?.id, search: state.searchKeyword, ...pageOptions },
-      })
-      if (init) {
-        state.list = list?.list
-      } else {
-        state.list = state.list.concat(list?.list)
-      }
-      list?.list.length <= 0 && (state.loadDone = true)
-      setTimeout(() => {
-        state.loading = false
-      }, 100)
-    }
-
-    const searchChange = (e: any) => {
-      state.currentCategory = { name: '搜索结果' }
-      load(true)
-    }
-
-    const selectTypes = (item: any) => {
-      state.currentCategory = item
-      load(true)
-    }
-    const back = () => {
-      state.currentCategory = null
-    }
-
-    return {
-      ...toRefs(state),
-      load,
-      searchChange,
-      selectTypes,
-      back,
-      mouseup,
-      mousemove,
-    }
-  },
-  computed: {
-    ...mapGetters(['dPage']),
-  },
-  methods: {
-    ...mapActions(['addWidget']),
-    async selectItem(item: any) {
-      if (isDrag) {
-        return
-      }
-      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)
-
-      setting.width = img.width
-      setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      const { width: pW, height: pH } = this.dPage
-      setting.left = pW / 2 - img.width / 2
-      setting.top = pH / 2 - img.height / 2
-      setting.imgUrl = item.url
-      if (item.type === 'svg') {
-        setting.svgUrl = item.url
-        const models = JSON.parse(item.model)
-        for (const key in models) {
-          if (Object.hasOwnProperty.call(models, key)) {
-            setting[key] = models[key]
-          }
-        }
-      }
-      if (item.type === 'mask') {
-        setting.mask = item.url
-      }
-      this.addWidget(setting)
-    },
-    async dragStart(e: any, item: any) {
-      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 })
-    },
-  },
+const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
+const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
+  loading: false,
+  loadDone: false,
+  sub: [],
+  list: [],
+  currentType: 2, // 2
+  currentCheck: 0,
+  colors,
+  currentCategory: null,
+  types: [],
+  showList: [],
+  searchKeyword: '',
 })
+const pageOptions = { page: 0, pageSize: 20 }
+
+onMounted(async () => {
+  if (state.types.length <= 0) {
+    const types = await api.material.getKinds({ type: 2 })
+    state.types = types
+    for (const iterator of types) {
+      const { list } = await api.material.getList({
+        cate: iterator.id,
+        pageSize: 3,
+      })
+      state.showList.push(list)
+    }
+  }
+})
+
+// const dragHelper = new DragHelper()
+// let isDrag = false
+// let startPoint = { x: 99999, y: 99999 }
+const mouseup = (e: MouseEvent) => {
+  e.preventDefault()
+  setTimeout(() => {
+    isDrag = false
+    startPoint = { x: 99999, y: 99999 }
+  }, 10)
+}
+
+const mousemove = (e: MouseEvent) => {
+  e.preventDefault()
+  if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
+    isDrag = true
+  }
+}
+
+const load = async (init: boolean = false) => {
+  if (init) {
+    state.list = []
+    pageOptions.page = 0
+    state.loadDone = false
+  }
+  if (state.loadDone || state.loading) {
+    return
+  }
+  state.loading = true
+  pageOptions.page += 1
+  const list = await api.material.getList({
+    ...{ cate: state.currentCategory?.id, search: state.searchKeyword, ...pageOptions },
+  })
+  if (init) {
+    state.list = list?.list
+  } else {
+    state.list = state.list.concat(list?.list)
+  }
+  list?.list.length <= 0 && (state.loadDone = true)
+  setTimeout(() => {
+    state.loading = false
+  }, 100)
+}
+
+const searchChange = (_: Event) => {
+  state.currentCategory = { name: '搜索结果' }
+  load(true)
+}
+
+const selectTypes = (item: TCurrentCategory) => {
+  state.currentCategory = item
+  load(true)
+}
+const back = () => {
+  state.currentCategory = null
+}
+
+defineExpose({
+  load,
+  searchChange,
+  selectTypes,
+  back,
+  mouseup,
+  mousemove,
+})
+
+
+// computed: {
+//   ...mapGetters(['dPage']),
+// }
+// ...mapActions(['addWidget']),
+async function selectItem(item: TGetListData) {
+  if (isDrag) {
+    return
+  }
+  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 = await setImageData(item)
+
+  setting.width = img.width
+  setting.height = img.height // parseInt(100 / item.value.ratio, 10)
+  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
+  if (item.type === 'svg') {
+    setting.svgUrl = item.url
+    const models = JSON.parse(item.model)
+    for (const key in models) {
+      if (Object.hasOwnProperty.call(models, key)) {
+        setting[key] = models[key]
+      }
+    }
+  }
+  if (item.type === 'mask') {
+    setting.mask = item.url
+  }
+  store.dispatch('addWidget', setting)
+}
+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)
+  store.commit('selectItem', { data: { value: item }, type: item.type })
+  // this.$store.commit('selectItem', { data: { value: item }, type: item.type })
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue
index 6462e14..74111c6 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -3,122 +3,137 @@
  * @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">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+    <div v-if="state.currentCategory">
+      <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 {
-  name: NAME,
-  components: {},
-  props: ['active'],
-  setup() {
-    const store = useStore()
-    const state = reactive({
-      recommendImgList: [],
-      loadDone: false,
-      page: 0,
-      currentCategory: null,
-      types: [],
-      showList: [],
-    })
-    const dPage = computed(() => store.getters.dPage)
-    let loading = false
-
-    onMounted(async () => {
-      if (state.types.length <= 0) {
-        const types = await api.material.getKinds({ type: 4 })
-        state.types = types
-        for (const iterator of types) {
-          const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
-          state.showList.push(list)
-        }
-      }
-    })
-
-    const selectImg = async (index, list) => {
-      const item = list ? list[index] : state.recommendImgList[index]
-      store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = JSON.parse(JSON.stringify(wImage.setting))
-      const img = await setImageData(item) // await getImage(item.url)
-      setting.width = img.width
-      setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      setting.imgUrl = item.url
-      const { width: pW, height: pH } = dPage
-      setting.left = pW / 2 - img.width / 2
-      setting.top = pH / 2 - img.height / 2
-      store.dispatch('addWidget', setting)
-    }
-
-    const getDataList = async () => {
-      if (state.loadDone || loading) {
-        return
-      }
-      loading = true
-      state.page += 1
-      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 item = list ? list[index] : state.recommendImgList[index]
-      store.commit('selectItem', { data: { value: item }, type: 'image' })
-    }
-
-    const searchChange = (e) => {
-      console.log(e)
-    }
-
-    const selectTypes = (item) => {
-      state.currentCategory = item
-      getDataList()
-    }
-    const back = () => {
-      state.currentCategory = null
-      state.page = 0
-      state.loadDone = false
-      state.recommendImgList = []
-    }
-
-    return {
-      ...toRefs(state),
-      selectImg,
-      getDataList,
-      dragStart,
-      searchChange,
-      selectTypes,
-      back,
-    }
-  },
+type TProps = {
+  active?: boolean
 }
+
+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 { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
+  recommendImgList: [],
+  loadDone: false,
+  page: 0,
+  currentCategory: null,
+  types: [],
+  showList: [],
+})
+let loading = false
+
+onMounted(async () => {
+  if (state.types.length <= 0) {
+    const types = await api.material.getKinds({ type: 4 })
+    state.types = types
+    for (const iterator of types) {
+      const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
+      state.showList.push(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))
+  const img = await setImageData(item) // await getImage(item.url)
+  setting.width = img.width
+  setting.height = img.height // parseInt(100 / item.value.ratio, 10)
+  setting.imgUrl = item.url
+  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)
+}
+
+const getDataList = async () => {
+  if (state.loadDone || loading) {
+    return
+  }
+  loading = true
+  state.page += 1
+  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: number, list: TGetImageListResult[]) => {
+  const item = list ? list[index] : state.recommendImgList[index]
+  store.commit('selectItem', { data: { value: item }, type: 'image' })
+}
+
+const searchChange = (e: Event) => {
+  console.log(e)
+}
+
+const selectTypes = (item: TCurrentCategory) => {
+  state.currentCategory = item
+  getDataList()
+}
+
+const back = () => {
+  state.currentCategory = null
+  state.page = 0
+  state.loadDone = false
+  state.recommendImgList = []
+}
+
+defineExpose({
+  selectImg,
+  getDataList,
+  dragStart,
+  searchChange,
+  selectTypes,
+  back,
+})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index 320455e..543d2a5 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/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(() => {
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index fa95fcc..9ec2eb1 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/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)
diff --git a/src/components/modules/panel/wrap/ToolsListWrap.vue b/src/components/modules/panel/wrap/ToolsListWrap.vue
index 4d0247c..9c8b7c2 100644
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/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()
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index 4a3c981..4ade061 100644
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/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)
diff --git a/src/components/modules/widgets/pageStyle.vue b/src/components/modules/widgets/pageStyle.vue
index 2996567..03d49db 100644
--- a/src/components/modules/widgets/pageStyle.vue
+++ b/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', {
-          key: key,
+        pageStore.updatePageData({
+          key: key as keyof TPageStore,
           value: state.innerElement[key],
         })
-        // updatePageData({
-        //   key: key,
-        //   value: this.innerElement[key],
-        // })
       }
     }
   }
 }
 
-function finish(key: string, value: string | number) {
-  store.dispatch('updatePageData', {
+function finish(key: keyof TPageStore, value: string | number) {
+  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,
diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts
index 6964524..4c76f02 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/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)
diff --git a/src/pinia/design/page/index.ts b/src/pinia/design/page/index.ts
index 1e78be9..885486a 100644
--- a/src/pinia/design/page/index.ts
+++ b/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]
+      })
+    }
   }
 })
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index 9a52a36..a4ff458 100644
--- a/src/pinia/index.ts
+++ b/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
  */
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index 7eec640..6bd61ce 100644
--- a/src/views/Draw.vue
+++ b/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 {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 64ee6e1..afcd63c 100644
--- a/src/views/Index.vue
+++ b/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
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
+  dActiveElement, dHistoryParams, dCopyElement, dZoom
+} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dZoom'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 const state = reactive<TState>({
   style: {
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index 4d12f2e..dee59ea 100644
--- a/src/views/Psd.vue
+++ b/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
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index d496a01..0e0a270 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/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
-} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+  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()
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index 202c61d..7b3c634 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/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>()