fix: pinia bugs

2025-06-08 03:19:59 +08:00 · 2024-04-02 21:05:54 +08:00 · 2024-04-02 21:05:54 +08:00 · a8856b0d68
commit a8856b0d68
parent 3da23d3642
38 changed files with 790 additions and 298 deletions
--- a/src/common/methods/DesignFeatures/setComponents.ts
+++ b/src/common/methods/DesignFeatures/setComponents.ts
@ -5,20 +5,19 @@
 * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
 * @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<TdWidgetData> = {}
  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
  // 先限制在画布内，保证不超过边界
--- 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<Required<TItem2DataParam>> {
  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)
--- a/src/components/business/aigc/sd.vue
+++ b/src/components/business/aigc/sd.vue
@ -0,0 +1,578 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2024-01-25 10:35:37
+ * @Description: SD
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2024-02-27 21:52:57
+-->
+<template>
+  <div>
+    <el-dialog v-model="show" align-center style="width: 88%; max-width: 980px" @close="handleClose">
+      <template #header> AIGC（动漫风格大模型） </template>
+      <div class="sd-box">
+        <div class="left">
+          <div class="input-wrap">
+            <el-radio-group v-model="typeIndex" type="card" @change="typeChange">
+              <el-radio-button :value="0">文生图</el-radio-button>
+              <el-radio-button :value="1">图生图</el-radio-button>
+              <el-radio-button disabled :value="2">后期处理</el-radio-button>
+            </el-radio-group>
+            <div v-show="typeIndex == 1" class="wrap">
+              <h2 class="wrap-title">参考图</h2>
+              <uploader :hold="true" :drag="true" :multiple="false" class="uploader" @load="selectFile">
+                <div v-show="progress !== 0" class="mask">
+                  <el-progress type="circle" :percentage="progress" />
+                </div>
+                <img v-if="localImage" :src="localImage" />
+                <div v-else class="uploader__box">
+                  <icon-upload style="width: 64px; height: 64px" />
+                  <div class="el-upload__text">在此拖入或选择<em>上传图片</em></div>
+                  <div class="el-upload__tip">支持 jpg/png 格式，大小不超过 500kb </div>
+                </div>
+              </uploader>
+              <br />
+              <number-slider v-model="controlNet.weight" style="font-size: 14px" label="权重" :step="0.05" :maxValue="2" />
+              <el-radio-group v-model="controlNet.mode">
+                <el-radio :value="0">均衡</el-radio>
+                <el-radio :value="1">偏向提示词</el-radio>
+                <el-radio :value="2">偏向原图</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="wrap">
+              <h2 class="wrap-title">提示词 (不支持中文)</h2>
+              <el-input v-model="params.prompt" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="输入引导提示词，仅支持解析英文，若输入中文请翻译文本后再提交" show-word-limit type="textarea" @input="promptTyping" />
+              <div style="display: flex; align-items: center; margin-top: 5px; justify-content: space-between">
+                <el-button :loading="isLoading" type="primary" link @click="translation"><i v-show="!isLoading" style="margin-right: 5px" class="icon sd-fanyi" />翻译文本</el-button>
+                <tool-tip :width="260" placement="bottom-end" effect="dark" :content="tips">
+                  <span v-show="tips" class="mini-text" style="margin-top: 2px">相关提示词</span>
+                </tool-tip>
+              </div>
+            </div>
+            <div v-show="typeIndex == 0" class="wrap">
+              <h2 class="wrap-title">套用预设</h2>
+              <div class="presuppose-box">
+                <div v-for="p in presuppose" :key="p.value" :class="['presuppose', { p_select: p.value === params.depend }]" @click="setDepend(p)">
+                  <div class="img" :style="{ backgroundImage: `url(${p.url})` }">
+                    <div v-if="p.value === params.depend" class="cancel">取消</div>
+                    <div class="mask">{{ p.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="wrap">
+              <h2 class="wrap-title">图片比例</h2>
+              <el-select v-model="params.ratio" placeholder="选择比例" style="width: 100%">
+                <el-option v-for="item in ratios" :key="item.value" :label="item.label" :value="item.value">
+                  <span style="float: left"><i style="margin-right: 1em" :class="['icon', 'sd-scale' + item.value]" />{{ item.label }}</span>
+                  <span style="float: right" class="mini-text">{{ item.text }}</span>
+                </el-option>
+              </el-select>
+            </div>
+            <div class="wrap">
+              <h2 class="wrap-title">高级设置</h2>
+              <el-switch v-model="params.is_lcm" active-text="开启极速出图" />
+            </div>
+          </div>
+          <div class="buttom-wrap">
+            <div class="mianze">
+              <tool-tip :width="260" placement="top-end" effect="dark" content="本服务基于开源AI大模型开发，生成内容不代表本站观点，请遵守法规使用，并承担所有产生的责任。">
+                <span style="display: flex"><InfoFilled width="14" />免责声明</span>
+              </tool-tip>
+            </div>
+            <el-button type="primary" style="width: 100%" @click="submit">在线生成</el-button>
+          </div>
+        </div>
+        <div class="images-box">
+          <div class="box-header">
+            <div style="flex: 1">
+              <el-button :loading="listLoading" link @click="refreshList"><Refresh v-if="!listLoading" style="margin-right: 7px" width="14" />{{ listLoading ? '刷新中...' : '任务列表' }}</el-button>
+            </div>
+            <div class="limit"><span class="mini-text">空间容量:</span> {{ listData.length }} / {{ limit }}</div>
+          </div>
+          <ul v-if="listData.length > 0" ref="listRef" class="result-list" style="overflow: auto">
+            <li v-for="i in listData" :key="'l' + i.id">
+              <div class="mini-text title">
+                {{ i.created_time }}
+                <tool-tip placement="top" :hide-after="10" :offset="6" content="下载图片到本地">
+                  <el-button v-show="i.url" style="margin-left: 8px" type="info" link @click="donwload(i)"><icon-download style="margin-right: 4px" width="14" />{{ i.dp ? '下载进度:' + i.dp + '%' : '' }}</el-button>
+                </tool-tip>
+                <tool-tip placement="top" :hide-after="10" :offset="6" content="发送到「图生图」">
+                  <el-button v-show="i.url" style="margin-left: 0" type="info" link @click="exportToImg(i)"><icon-upload style="margin-right: 4px" width="14" /></el-button>
+                </tool-tip>
+                <tool-tip placement="top" :hide-after="10" :offset="6" content="导入设计器背景图">
+                  <el-button v-show="i.url" style="margin-left: 0" type="info" link @click="exportToPage(i)"><icon-switch style="margin-right: 4px" width="14" /></el-button>
+                </tool-tip>
+                <el-popconfirm title="是否确认删除?" confirm-button-text="确认" cancel-button-text="取消" @confirm="del(i.id)">
+                  <template #reference>
+                    <el-button v-show="i.state" style="margin-left: 0" type="info" link><icon-delete width="14" /></el-button>
+                  </template>
+                </el-popconfirm>
+              </div>
+              <img v-if="i.nsfw" :style="{ width: '220px' }" src="https://store.palxp.cn/no_safe.jpg" />
+              <el-progress v-else-if="!i.url" :percentage="i.progress" :status="i.state==2?'exception':''" :stroke-width="15" striped striped-flow :duration="10">
+                <div v-if="i.state==2" style="padding: 0 12px 0 4px" class="mini-text">生成失败</div>
+                <div v-else style="padding: 0 12px 0 4px" class="mini-text">{{ i.progress ? `生成中 ${i.progress} %` : '排队中...' }}</div>
+              </el-progress>
+              <el-image v-else :style="{ height: getViewHeight(i) }" class="result-image" :src="i.url.replace('.png', '_tiny.png')" fit="fill" hide-on-click-modal :lazy="true" :preview-src-list="[i.url]" />
+            </li>
+          </ul>
+          <el-empty v-else v-loading="listLoading" style="height: 80%" description="还没有图片，请从左侧面板中点击生成" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs, ref } from 'vue'
+import { ElOption, ElSelect, ElEmpty, ElRadioGroup, ElRadioButton, ElRadio, ElProgress, ElPopconfirm } from 'element-plus'
+import { InfoFilled, Refresh, Delete as IconDelete, Download as IconDownload, Switch as IconSwitch, Picture as IconUpload } from '@element-plus/icons-vue'
+import toolTip from '@/components/common/PopoverTip.vue'
+import { useControlStore, useCanvasStore } from '@/store'
+import api from '@/api'
+import useNotification from '@/common/methods/notification'
+import ratios from './ratioOptions.ts'
+import presuppose from './presuppose.ts'
+import dayjs from 'dayjs'
+import downloadImg from '@/common/methods/download/download.ts'
+import uploader from '@/components/common/Uploader/index.vue'
+import numberSlider from '@/components/modules/settings/numberSlider.vue'
+
+export default {
+  components: { ElPopconfirm, ElOption, ElSelect, ElEmpty, toolTip, InfoFilled, ElRadioGroup, ElRadioButton, ElRadio, Refresh, IconDownload, IconDelete, ElProgress, IconSwitch, IconUpload, uploader, numberSlider },
+  setup() {
+    const controlStore = useControlStore()
+    const pageStore = useCanvasStore()
+    const promptRecord = ['','']
+    const state = reactive({
+      show: false,
+      isLoading: false,
+      listLoading: false,
+      typeIndex: 0, // 0 文生图 1 图生图 2 高清修复
+      params: { prompt: '', ratio: '1_1', is_lcm: true, img_url: '' },
+      localImage: '', // 未提交上传的图片
+      controlNet: { weight: 0.5, mode: 0 },
+      progress: 0,
+      limit: '-',
+      listData: [],
+      tips: '', // 预设提示词
+      fileList: []
+    })
+    let localImageFile = null
+    const listRef = ref(null)
+
+    const getListData = (toTop = true) => {
+      state.listLoading = true
+      api.ai
+        .getTaskList()
+        .then((res) => {
+          state.limit = res.limit
+          state.listData = res.list.map((x) => {
+            x.created_time = dayjs(x.created_time).format('YYYY年MM月DD日 HH:mm:ss')
+            return x
+          })
+          setTimeout(() => {
+            listRef.value && toTop && (listRef.value.scrollTop = 0)
+            state.listLoading = false
+          }, 300)
+        })
+        .catch((e) => {
+          state.listLoading = false
+        })
+    }
+
+    const open = async () => {
+      controlStore.setShowMoveable(false)
+      state.show = true
+      getListData()
+    }
+
+    const handleClose = () => {
+      controlStore.setShowMoveable(true)
+      clearTimeout(curTimer)
+    }
+
+    const submit = async () => {
+      try {
+        if (containsChinese(state.params.prompt)) {
+          await translation()
+        }
+        let control_net = ''
+        if (state.typeIndex == 1) {
+          if (state.progress !== 0) {
+            return
+          } else {
+            state.progress = 1
+            await fileUpload()
+          }
+          const {weight, mode} = state.controlNet
+          control_net = JSON.stringify([weight, mode])
+        }
+        const id = await api.ai.addTask({...state.params, type: state.typeIndex, control_net})
+        useNotification('创建成功', '请在任务列表中查看', { type: 'success' })
+        await getListData()
+        taskTimerQueue.push({ id, count: 0 })
+        startTaskRunner()
+      } catch (error) {
+        state.progress = 0
+        console.log(error);
+      }
+    }
+    // 获取详情
+    const taskTimerQueue = [] // task轮训队列
+    let taskItem = {} // 正在修改的任务
+    const reTryNum = 50 // 重试次数
+    const timeInterval = 2000
+    let curTimer = null // 当前定时器
+    const startTaskRunner = () => {
+      if (!curTimer) {
+        const task = taskTimerQueue.shift()
+        if (task) {
+          curTimer = setTimeout(() => {
+            getTask(task)
+          }, timeInterval)
+        }
+      }
+    }
+    const getTask = async (task) => {
+      const res = await api.ai.getTask({ id: task.id })
+      taskItem = state.listData.find((x) => x.id == task.id)
+      taskItem.progress = res.progress
+      taskItem.state = res.state
+      taskItem.nsfw = res.nsfw
+      taskItem.url = res.url
+      task.count += 1
+      if (task.count > reTryNum || res.state) {
+        curTimer = null
+        startTaskRunner()
+      } else {
+        curTimer = setTimeout(() => {
+          getTask(task)
+        }, timeInterval)
+      }
+    }
+
+    // 翻译中英
+    const translation = async () => {
+      state.isLoading = true
+      try {
+        const res = await api.ai.translation({ text: state.params.prompt })
+        state.params.prompt = res
+      } catch (error) {}
+      state.isLoading = false
+    }
+
+    // 刷新列表
+    const refreshList = () => {
+      getListData()
+    }
+
+    // 删除
+    const del = async (id) => {
+      await api.ai.delTask({ id })
+      getListData(false)
+    }
+
+    // 下载图片
+    const donwload = (i) => {
+      if (!i.dp) {
+        downloadImg(i.url, (d) => {
+          i.dp = d === 100 ? null : d.toFixed(2)
+        })
+      }
+    }
+
+    // 导入画布
+    const exportToPage = (i) => {
+      const { url, width, height } = i
+      pageStore.dPage.backgroundImage = url
+      pageStore.dPage.width = width
+      pageStore.dPage.height = height
+    }
+    // 导入图生图
+    const exportToImg = ({url}) => {
+      state.localImage = url.replace('.png', '_tiny.png')
+      state.params.img_url = url
+      state.typeIndex = 1
+    }
+
+    // 选择图片
+    const selectFile = async (file) => {
+      state.progress = 0
+      if (file.size > 1024 * 1024 / 2) {
+        state.localImage = ''
+        useNotification('上传图片超出限制', '请重新选择图片上传', { type: 'error' })
+        return false
+      }
+      // 显示选择的图片
+      localImageFile = file
+      state.localImage = URL.createObjectURL(file)
+      // 清空图片缓存
+      state.params.img_url = ''      
+    }
+    // 上传图片
+    const fileUpload = async () => {
+      if (!state.params.img_url && state.localImage) {
+        // 上传本地图片
+      const name = (new Date()).getTime()+'_'+(Math.floor(Math.random() * 990000) + 10000)
+      const result = await api.material.upload({file: localImageFile, name}, (up, dp) => {
+          if (up < 100) {
+            state.progress = up
+          } else {
+            state.progress = 100
+            setTimeout(() => {
+              state.progress = 0
+            }, 600);
+          }
+      })
+      state.params.img_url = result.url
+      } else state.progress = 0
+    }
+
+    const setDepend = (p) => {
+      state.params.depend = state.params.depend === p.value ? '' : p.value
+      state.params.prompt = state.params.depend ? p.prompt : ''
+      state.params.ratio = state.params.depend ? p.ratio : '1_1'
+      state.tips = state.params.depend ? p.tips || '' : ''
+    }
+
+    const getViewHeight = ({ width, height }) => 220 * (height / width) + 'px'
+
+    // 检测是否包含中文
+    const containsChinese = (str) => /[\u4e00-\u9fa5]/.test(str)
+
+    // 打字中
+    function promptTyping(v) {
+      promptRecord[state.typeIndex] = v
+    }
+    function typeChange(index) {
+      state.params.prompt = promptRecord[index]
+    }
+
+    return {
+      ...toRefs(state),
+      open,
+      handleClose,
+      submit,
+      setDepend,
+      translation,
+      presuppose,
+      ratios,
+      getListData,
+      refreshList,
+      listRef,
+      del,
+      donwload,
+      exportToPage,
+      exportToImg,
+      getViewHeight,
+      selectFile,
+      promptTyping,
+      typeChange
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+:deep(.el-dialog__body) {
+  padding: 10px 24px 20px 24px !important;
+}
+:deep(.el-upload-dragger) {
+  padding: 10px;
+}
+.sd-box {
+  height: calc(95vh - 120px);
+  display: flex;
+  .left {
+    position: relative;
+    width: 348px;
+    padding-right: 24px;
+  }
+  .left::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 2px;
+    background: #f0f1f4;
+  }
+  .input-wrap {
+    height: calc(100% - 67px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .input-wrap::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+  .wrap {
+    position: relative;
+    border-radius: 10px;
+    margin-top: 24px;
+    padding: 16px 14px;
+    background-color: rgb(243 244 249);
+  }
+  .wrap:first-child {
+    margin-top: 0;
+  }
+  .wrap-title {
+    user-select: none;
+    font-size: 14px;
+    font-weight: 600;
+    padding-bottom: 12px;
+  }
+  .presuppose-box {
+    display: flex;
+    flex-wrap: wrap;
+    .p_select {
+      border: 2px solid var(--el-color-primary);
+      .img {
+        opacity: 1;
+      }
+    }
+  }
+  .presuppose {
+    padding: 2px;
+    overflow: hidden;
+    position: relative;
+    width: 90px;
+    height: 90px;
+    margin-bottom: 7px;
+    border-radius: 8px;
+    cursor: pointer;
+    .cancel {
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.4);
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .cancel:hover {
+      opacity: 1;
+    }
+    .img {
+      border-radius: 8px;
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+      opacity: 0.9;
+      background-size: 100%;
+      background-position: center center;
+      position: relative;
+    }
+    .img:hover {
+      transition: all 0.3s;
+      opacity: 1;
+      background-size: 120%;
+      // transform: scale3d(1.15, 1.15, 1);
+    }
+    .mask {
+      border-radius: 0 0 8px 8px;
+      position: absolute;
+      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
+      font-size: 13px;
+      line-height: 24px;
+      text-align: center;
+      color: #ffffff;
+      bottom: 0;
+      left: 0;
+      height: 22px;
+      width: 100%;
+      backdrop-filter: blur(6px);
+    }
+  }
+  .presuppose:nth-child(3n-2),
+  .presuppose:nth-child(3n-1) {
+    margin-right: 13px;
+  }
+  .images-box {
+    flex: 1;
+    box-sizing: border-box;
+    width: 100%;
+    padding-left: 24px;
+    .box-header {
+      display: flex;
+      // padding-bottom: 0px;
+      .limit {
+        user-select: none;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+  .buttom-wrap {
+    width: 100%;
+    padding-top: 12px;
+  }
+  .mianze {
+    width: 100%;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    height: 22px;
+    span {
+      cursor: pointer;
+      float: right;
+    }
+  }
+
+  .result-list {
+    height: calc(100% - 34px);
+    padding: 0;
+    margin: 12px 0;
+    list-style: none;
+    li {
+      padding-top: 20px;
+    }
+    li:first-child {
+      padding-top: 0;
+    }
+    .title {
+      user-select: none;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      margin-bottom: 5px;
+    }
+    .result-image {
+      width: 220px;
+      border-radius: 10px;
+    }
+  }
+}
+.mini-text {
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.uploader {
+  &__box {
+    position: relative;
+    padding: 30px 0;
+    color: #a8abb2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .mask {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(255, 255, 255, .6);
+  }
+  img {
+    height: 240px;
+    width: 100%;
+    object-fit: contain;
+  }
+}
+</style>
--- 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<TProps>()

-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)
--- 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)

--- 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<TProps>()



-const pageStore = usePageStore()
+const pageStore = useCanvasStore()
 const widgetStore = useWidgetStore()

 const state = reactive<TState>({
--- 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<TState>({

 const controlStore = useControlStore()
 const widgetStore = useWidgetStore()
-const dPage = usePageStore().dPage
+const dPage = useCanvasStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }

 onMounted(async () => {
--- 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<TState>({
  loading: false,
  loadDone: false,
--- 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<TProps>()
 const controlStore = useControlStore()
 const widgetStore = useWidgetStore()

-const { dPage } = storeToRefs(usePageStore())
+const { dPage } = storeToRefs(useCanvasStore())
 const state = reactive<TState>({
  recommendImgList: [],
  loadDone: false,
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@ -11,7 +11,7 @@
    <el-divider v-show="state.title" style="margin-top: 1.7rem" content-position="left">
      <span style="font-weight: bold">{{ state.title }}</span>
    </el-divider>
-    
+
    <ul ref="listRef" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
      <img-water-fall :listData="state.list" @select="selectItem" />
      <div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
@ -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<HTMLElement | null>(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<TState>({
@ -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,
 })
-
 </script>

 <style lang="less" scoped>
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@ -29,7 +29,7 @@ import { storeToRefs } from 'pinia';
 import { wTextSetting } from '../../widgets/wText/wTextSetting'


-import { useControlStore, usePageStore, useWidgetStore } from '@/store';
+import { useControlStore, useCanvasStore, useWidgetStore } from '@/store';

 type TBasicTextData = {
  text: string
@ -41,8 +41,7 @@ type TBasicTextData = {
 const controlStore = useControlStore()
 const widgetStore = useWidgetStore()

-const { dPage } = storeToRefs(usePageStore())
-
+const { dPage } = storeToRefs(useCanvasStore())

 const selectBasicText = (item: TBasicTextData) => {

--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/src/components/modules/panel/wrap/ToolsListWrap.vue
@ -33,7 +33,7 @@ import imageCutout from '@/components/business/image-cutout'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { useControlStore, useCanvasStore, useWidgetStore } from '@/store'


 const controlStore = useControlStore()
@ -43,7 +43,7 @@ const route = useRoute()
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
 const widgetStore = useWidgetStore()
-const { dPage } = storeToRefs(usePageStore())
+const { dPage } = storeToRefs(useCanvasStore())

 onMounted(() => {
  // this.getDataList()
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/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 { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { useControlStore, useCanvasStore, useWidgetStore } from '@/store'

 type TProps = {
  active?: number
@ -77,7 +77,7 @@ const router = useRouter()
 const controlStore = useControlStore()
 const widgetStore = useWidgetStore()

-const { dPage } = storeToRefs(usePageStore())
+const { dPage } = storeToRefs(useCanvasStore())
 const listRef = ref<HTMLElement | null>(null)
 const imgListRef = ref<typeof photoList | null>(null)

--- a/src/components/modules/widgets/pageStyle.vue
+++ b/src/components/modules/widgets/pageStyle.vue
@ -66,8 +66,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, useWidgetStore } from '@/store'
-import { TPageState, } from '@/store/design/page'
+import { useCanvasStore, useWidgetStore } from '@/store'
+import { TPageState } from '@/store/design/canvas/d'
 import { storeToRefs } from 'pinia'
 import { proxyToObject } from '@/utils/utils'
 import { Delete as iconDelete, Download as iconDownload } from '@element-plus/icons-vue'
@ -86,7 +86,7 @@ type TState = {
 }


-const pageStore = usePageStore()
+const pageStore = useCanvasStore()
 const widgetStore = useWidgetStore()
 const state = reactive<TState>({
  activeNames: ['1', '2', '3', '4'],
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@ -20,12 +20,12 @@ 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 { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { useControlStore, useCanvasStore, useWidgetStore } from '@/store'
 // import wText from '@/components/modules/widgets/wText/wText.vue'

 export default () => {
  return new Promise<void>((resolve) => {
-    const pageStore = usePageStore()
+    const pageStore = useCanvasStore()
    const widgetStore = useWidgetStore()
    const controlStore = useControlStore()

--- a/src/store/base/index.ts
+++ b/src/store/base/index.ts
@ -16,8 +16,6 @@ type TStoreBaseState = {
  scroll: boolean
  /** fonts */
  fonts: string[]
-  /** 抠图服务 */
-  app: string | null
 }

 type TUserAction = {
@ -31,7 +29,6 @@ const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base
    loading: null,
    scroll: true,
    fonts: [], // 缓存字体列表
-    app: null, // 抠图服务
  }),
  actions: {
    /** 隐藏loading */
--- a/src/store/design/canvas/d.ts
+++ b/src/store/design/canvas/d.ts
@ -0,0 +1,76 @@
+export type TScreeData = {
+  /** 记录编辑界面的宽度 */
+  width: number
+  /** 记录编辑界面的高度 */
+  height: number
+}
+
+export type TGuidelinesData = {
+  verticalGuidelines: number[]
+  horizontalGuidelines: number[]
+}
+
+export type TCanvasState = {
+  /** 画布缩放百分比 */
+  dZoom: number
+  /** 画布垂直居中修正值 */
+  dPaddingTop: number
+  /** 编辑界面 */
+  dScreen: TScreeData
+  /** 标尺辅助线 */
+  guidelines: TGuidelinesData
+  /** 页面数据 */
+  dPage: TPageState
+}
+
+export type TStoreAction = {
+  /** 更新画布缩放百分比 */
+  updateZoom: (zoom: number) => void
+  /** 更新画布垂直居中修正值 */
+  updatePaddingTop: (num: number) => void
+  /** 更新编辑界面的宽高 */
+  updateScreen: (data: TScreeData) => void
+  /** 修改标尺线 */
+  updateGuidelines: (lines: TGuidelinesData) => void
+  /** 强制重绘画布 */
+  reChangeCanvas: () => void
+  /** 更新Page数据 */
+  updatePageData<T extends keyof TPageState>(data: {
+    key: T
+    value: TPageState[T]
+    pushHistory?: boolean
+  }): void
+  /** 设置dPage */
+  setDPage(data: TPageState): void
+}
+
+export type TPageState = {
+  name: string
+  type: string
+  uuid: string
+  left: number
+  top: number
+  /** 画布宽度 */
+  width: number
+  /** 画布高度 */
+  height: number
+  /** 画布背景颜色 */
+  backgroundColor: string
+  /** 画布背景图片 */
+  backgroundImage: string
+  backgroundTransform: {
+    x?: number
+    y?: number
+  }
+  /** 透明度 */
+  opacity: number
+  /** 强制刷新用 */
+  tag: number
+  setting:{
+    label: string
+    parentKey: string
+    value: boolean
+  }[]
+  record: Record<string, any>
+}
+
--- a/src/store/design/canvas/index.ts
+++ b/src/store/design/canvas/index.ts
@ -8,42 +8,7 @@
 */

 import { Store, defineStore } from 'pinia'
-
-type TScreeData = {
-  /** 记录编辑界面的宽度 */
-  width: number
-  /** 记录编辑界面的高度 */
-  height: number
-}
-
-type TGuidelinesData = {
-  verticalGuidelines: number[]
-  horizontalGuidelines: number[]
-}
-
-type TCanvasState = {
-  /** 画布缩放百分比 */
-  dZoom: number
-  /** 画布垂直居中修正值 */
-  dPaddingTop: number
-  /** 编辑界面 */
-  dScreen: TScreeData
-  /** 标尺辅助线 */
-  guidelines: TGuidelinesData
-}
-
-type TStoreAction = {
-  /** 更新画布缩放百分比 */
-  updateZoom: (zoom: number) => void
-  /** 更新画布垂直居中修正值 */
-  updatePaddingTop: (num: number) => void
-  /** 更新编辑界面的宽高 */
-  updateScreen: (data: TScreeData) => void
-  /** 修改标尺线 */
-  updateGuidelines: (lines: TGuidelinesData) => void
-  /** 强制重绘画布 */
-  reChangeCanvas: () => void
-}
+import { TCanvasState, TScreeData, TGuidelinesData, TStoreAction, TPageState } from './d'

 /** 画布全局设置 */
 const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
@ -54,15 +19,33 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("
      width: 0, // 记录编辑界面的宽度
      height: 0, // 记录编辑界面的高度
    },
-    // gridSize: {
-    //   width: 0, // 网格小格子的宽度
-    //   height: 0, // 网格小格子的高度
-    // },
    guidelines: {
      // moveable 标尺辅助线
      verticalGuidelines: [],
      horizontalGuidelines: [],
    },
+    dPage: {
+      name: '背景页面',
+      type: 'page',
+      uuid: '-1',
+      left: 0,
+      top: 0,
+      width: 1920, // 画布宽度
+      height: 1080, // 画布高度
+      backgroundColor: '#ffffff', // 画布背景颜色
+      backgroundImage: '', // 画布背景图片
+      backgroundTransform: {},
+      opacity: 1, // 透明度
+      tag: 0, // 强制刷新用
+      setting: [
+        {
+          label: '背景颜色',
+          parentKey: 'backgroundColor',
+          value: false,
+        },
+      ],
+      record: {},
+    }
  }),
  actions: {
    /** 更新画布缩放百分比 */
@ -75,7 +58,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("
    },
    /** 更新编辑界面的宽高 */
    updateScreen({ width, height }: TScreeData) {
-      console.log(this.dScreen)
      this.dScreen.width = width
      this.dScreen.height = height
    },
@ -88,6 +70,21 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("
      // const tag = this.dPage.tag
      // this.dPage.tag = tag === 0 ? 0.01 : 0
    },
+    /** 更新 Page 字段 */
+    updatePageData({ key, value, pushHistory }) {
+      const data = this.dPage
+      if (data[key] !== value || pushHistory) {
+        data[key] = value
+      }
+    },
+    /** 设置 Page */
+    setDPage(data: TPageState) {
+      const cur = this.dPage
+      const keys = Object.keys(data) as (keyof TPageState)[];
+      keys.forEach(val => {
+        cur[val] = data[val]
+      })
+    }
  }
 })

--- a/src/store/design/control/index.ts
+++ b/src/store/design/control/index.ts
@ -27,7 +27,7 @@ type TControlState = {
  dAltDown: boolean
  // 是否按下空格键
  dSpaceDown: boolean
-  /** 正在编辑or裁剪的组件id *
+  /** 正在编辑or裁剪的组件id */
  dCropUuid: string
 }

--- a/src/store/design/group/action/index.ts
+++ b/src/store/design/group/action/index.ts
@ -8,13 +8,13 @@

 import { customAlphabet } from 'nanoid/non-secure'
 import { TGroupStore } from '..'
-import { useHistoryStore, usePageStore, useWidgetStore } from '@/store'
+import { useHistoryStore, useCanvasStore, useWidgetStore } from '@/store'
 import { TdWidgetData } from '../../widget'
 const nanoid = customAlphabet('1234567890abcdef', 12)

 export function realCombined(store: TGroupStore) {
  const widgetStore = useWidgetStore()
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const historyStore = useHistoryStore()

  const selectWidgets = widgetStore.dSelectWidgets
@ -87,7 +87,7 @@ export function realCombined(store: TGroupStore) {

 export function getCombined(store: TGroupStore): Promise<TdWidgetData> {
  const widgetStore = useWidgetStore()
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()

  const selectWidgets = widgetStore.dSelectWidgets
  return new Promise((resolve) => {
--- a/src/store/design/history/actions/handleHistory.ts
+++ b/src/store/design/history/actions/handleHistory.ts
@ -6,11 +6,11 @@
 * @LastEditTime: 2024-03-27 21:00:00
 */

-import { useControlStore, usePageStore, useWidgetStore } from "@/store"
+import { useControlStore, useCanvasStore, useWidgetStore } from "@/store"
 import { THistoryStore } from ".."

 export default function handleHistory(store: THistoryStore, action: "undo" | "redo") {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const controlStore = useControlStore()
  const widgetStore = useWidgetStore()
  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
--- a/src/store/design/history/actions/pushHistory.ts
+++ b/src/store/design/history/actions/pushHistory.ts
@ -6,13 +6,13 @@
 * @LastEditTime: 2024-03-27 21:00:00
 */

-import { usePageStore, useWidgetStore } from "@/store"
+import { useCanvasStore, useWidgetStore } from "@/store"
 import { THistoryStore } from ".."
 import { proxyToObject } from "@/utils/utils"

 /** push操作历史记录 */
 export function pushHistory(store: THistoryStore, msg: string = "") {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const widgetStore = useWidgetStore()
  console.log('history压栈', '来源: ' + msg)
  // 如果有上一次记录，并且与新纪录相同，那么不继续操作
--- a/src/store/design/history/index.ts
+++ b/src/store/design/history/index.ts
@ -9,7 +9,7 @@
 import { Store, defineStore } from "pinia"
 import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
 import handleHistory from "./actions/handleHistory"
-import { usePageStore, useWidgetStore } from "@/store"
+import { useCanvasStore, useWidgetStore } from "@/store"

 export type THistoryParamData = {
  index: number
@ -65,7 +65,7 @@ const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryActi
    },
    handleHistory(action) {
      const widgetStore = useWidgetStore()
-      const pageStore = usePageStore()
+      const pageStore = useCanvasStore()
      handleHistory(this, action)
      // 激活组件默认为page
      widgetStore.setdActiveElement(pageStore.dPage)
--- a/src/store/design/page/index.ts
+++ b/src/store/design/page/index.ts
@ -1,106 +0,0 @@
-/*
- * @Author: Jeremy Yu
- * @Date: 2024-03-18 21:00:00
- * @Description: Page全局配置
- * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-18 21:00:00
- */
-
-import { Store, defineStore } from 'pinia'
-
-export type TPageState = {
-  name: string
-  type: string
-  uuid: string
-  left: number
-  top: number
-  /** 画布宽度 */
-  width: number
-  /** 画布高度 */
-  height: number
-  /** 画布背景颜色 */
-  backgroundColor: string
-  /** 画布背景图片 */
-  backgroundImage: string
-  backgroundTransform: {
-    x?: number
-    y?: number
-  }
-  /** 透明度 */
-  opacity: number
-  /** 强制刷新用 */
-  tag: number
-  setting:{
-    label: string
-    parentKey: string
-    value: boolean
-  }[]
-  record: Record<string, any>
-}
-
-type TPageGetter = {
-  dPage(state: TPageState): TPageState
-}
-
-type TPageActions = {
-  /** 更新Page数据 */
-  updatePageData<T extends keyof TPageState>(data: {
-    key: T
-    value: TPageState[T]
-    pushHistory?: boolean
-  }): void
-  /** 设置dPage */
-  setDPage(data: TPageState): void
-}
-
-/** 页面全局配置 */
-const PageStore = defineStore<"pageStore", TPageState, TPageGetter, TPageActions>("pageStore", {
-  state: () => ({
-    name: '背景页面',
-    type: 'page',
-    uuid: '-1',
-    left: 0,
-    top: 0,
-    width: 1920, // 画布宽度
-    height: 1080, // 画布高度
-    backgroundColor: '#ffffff', // 画布背景颜色
-    backgroundImage: '', // 画布背景图片
-    backgroundTransform: {},
-    opacity: 1, // 透明度
-    tag: 0, // 强制刷新用
-    setting: [
-      {
-        label: '背景颜色',
-        parentKey: 'backgroundColor',
-        value: false,
-      },
-    ],
-    record: {},
-  }),
-  getters: {
-    dPage: (state) => state
-  },
-  actions: {
-    /** 更新Page数据 */
-    updatePageData({ key, value, pushHistory }) {
-      const data = this as TPageState
-      if (data[key] !== value || pushHistory) {
-        data[key] = value
-        // 画布修改先不压入历史栈，因为替换模板后会重复压栈
-        // store.dispatch('pushHistory', 'updatePageData')
-      }
-    },
-    /** 设置dPage */
-    setDPage(data: TPageState) {
-      const cur = this as Record<string, any>
-      const keys = Object.keys(data) as (keyof TPageState)[];
-      keys.forEach(val => {
-        cur[val] = data[val]
-      })
-    }
-  }
-})
-
-export type TPageStore = Store<"pageStore", TPageState, TPageGetter, TPageActions>
-
-export default PageStore
--- a/src/store/design/widget/actions/align.ts
+++ b/src/store/design/widget/actions/align.ts
@ -6,7 +6,7 @@
 * @LastEditTime: 2024-03-28 14:00:00
 */

-import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
+import { useCanvasStore, useHistoryStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."

 type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
@ -18,7 +18,7 @@ export type TUpdateAlignData = {
 }

 export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const historyStore = useHistoryStore()
  const canvasStore = useCanvasStore()

--- a/src/store/design/widget/actions/index.ts
+++ b/src/store/design/widget/actions/index.ts
@ -6,7 +6,7 @@
 * @LastEditTime: 2024-03-28 14:00:00
 */

-import { useCanvasStore, useControlStore, usePageStore } from "@/store"
+import { useCanvasStore, useControlStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."

 export type TInidDMovePayload = {
@ -32,7 +32,7 @@ export type TMovePayload = {

 /** 移动组件 */
 export function dMove(store: TWidgetStore, payload: TMovePayload) {
-  const page = usePageStore().dPage
+  const page = useCanvasStore().dPage
  const canvasStore = useCanvasStore()
  const controlStore = useControlStore()
  const { donotMove } = payload // 由moveable代理移动
@ -87,7 +87,7 @@ export function dMove(store: TWidgetStore, payload: TMovePayload) {
 }

 export function updateGroupSize(store: TWidgetStore, uuid: string) {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const widgets = store.dWidgets
  const group = widgets.find((item) => item.uuid === uuid)
  if (!group) return
--- a/src/store/design/widget/actions/resize.ts
+++ b/src/store/design/widget/actions/resize.ts
@ -6,7 +6,7 @@
 * @LastEditTime: 2024-03-28 14:00:00
 */

-import { useCanvasStore, useControlStore, usePageStore } from "@/store"
+import { useCanvasStore, useControlStore } from "@/store"
 import { TWidgetStore } from ".."
 import { updateGroupSize } from "."

@ -42,7 +42,7 @@ export type TdResizePayload = {

 /** 更新组件宽高 */
 export function dResize(store: TWidgetStore, { x, y, dirs }: TdResizePayload) {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const canvasStore = useCanvasStore()
  const controlStore = useControlStore()

--- a/src/store/design/widget/actions/select.ts
+++ b/src/store/design/widget/actions/select.ts
@ -1,4 +1,4 @@
-import { useControlStore, useHistoryStore, usePageStore } from "@/store"
+import { useControlStore, useHistoryStore, useCanvasStore } from "@/store"
 import { TWidgetStore } from ".."
 import { proxyToObject } from "@/utils/utils"

@ -9,7 +9,7 @@ export type TSelectWidgetData = {
 // TODO: 选中元件与取消选中
 export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {
  const controlStore = useControlStore()
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const historyStore = useHistoryStore()

  const alt = controlStore.dAltDown
@ -67,7 +67,7 @@ export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {

 /** 多选元素 */
 export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetData) {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()

  const selectWidgets = store.dSelectWidgets
  const widget = store.dWidgets.find((item) => item.uuid === uuid)
--- a/src/store/design/widget/actions/widget.ts
+++ b/src/store/design/widget/actions/widget.ts
@ -6,7 +6,7 @@
 * @LastEditTime: 2024-03-28 14:00:00
 */

-import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
+import { useCanvasStore, useHistoryStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
@ -201,7 +201,7 @@ export function deleteWidget(store: TWidgetStore) {

  if (count === 0) {
    // 重置 activeElement
-    const pageStore = usePageStore()
+    const pageStore = useCanvasStore()
    store.dActiveElement = pageStore.dPage
  } else {
    const tmp = widgets.find((item) => item.uuid === activeElement.parent)
--- a/src/store/design/widget/getter/index.ts
+++ b/src/store/design/widget/getter/index.ts
@ -6,9 +6,9 @@
 * @LastEditTime: 2024-03-28 14:00:00
 */

-import { usePageStore } from "@/store"
+import { useCanvasStore } from "@/store"
 import { TWidgetState, TdWidgetData } from ".."
-import { TPageState } from "../../page"
+import { TPageState } from "@/store/design/canvas/d"

 export type TWidgetJsonData = TPageState & {
  widgets: TdWidgetData
@ -16,7 +16,7 @@ export type TWidgetJsonData = TPageState & {

 /** 返回组件Json数据 */
 export function widgetJsonData(state: TWidgetState) {
-  const pageStore = usePageStore()
+  const pageStore = useCanvasStore()
  const page: TWidgetJsonData = JSON.parse(JSON.stringify(pageStore.dPage))
  const widgets = JSON.parse(JSON.stringify(state.dWidgets))
  page.widgets = widgets
--- a/src/store/design/widget/index.ts
+++ b/src/store/design/widget/index.ts
@ -8,7 +8,7 @@

 import { Store, defineStore } from "pinia";
 import { TInidDMovePayload, TMovePayload, dMove, initDMove, setDropOver, setMouseEvent, setdActiveElement, updateGroupSize, updateHoverUuid } from "./actions";
-import { TPageState } from "../page";
+import { TPageState } from "@/store/design/canvas/d";
 import { TInitResize, TResize, TdResizePayload, dResize, initDResize, resize } from "./actions/resize";
 import { TUpdateWidgetMultiplePayload, TUpdateWidgetPayload, TsetWidgetStyleData, addWidget, deleteWidget, setDWidgets, setWidgetStyle, updateWidgetData, updateWidgetMultiple, lockWidgets } from "./actions/widget";
 import { addGroup } from "./actions/group";
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -8,7 +8,6 @@

 import useBaseStore from "./base";
 import useUserStore from "./base/user";
-import usePageStore from "./design/page"
 import useCanvasStore from "./design/canvas"
 import useControlStore from './design/control'
 import useHistoryStore from './design/history'
@ -19,7 +18,6 @@ import useForceStore from './design/force'
 export {
  useBaseStore,
  useUserStore,
-  usePageStore,
  useCanvasStore,
  useControlStore,
  useHistoryStore,
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -79,34 +79,34 @@ export const rndNum = (n: number, m: number) => {
 }

 /** Proxy 转 Object */
-export const proxyToObject = <P extends Record<string, any>>(proxy: P, seen = new WeakMap()): P => {
-  if (proxy === null || typeof proxy !== 'object') {
-    return proxy;
-  }
+// export const proxyToObject = <P extends Record<string, any>>(proxy: P, seen = new WeakMap()): P => {
+//   if (proxy === null || typeof proxy !== 'object') {
+//     return proxy;
+//   }

-  // 检查是否已经处理过该对象
-  if (seen.has(proxy)) {
-    return '[Circular Reference]' as any;
-  }
+//   // 检查是否已经处理过该对象
+//   if (seen.has(proxy)) {
+//     return '[Circular Reference]' as any;
+//   }

-  let obj: Record<string, any>;
+//   let obj: Record<string, any>;

-  if (Array.isArray(proxy)) {
-    obj = proxy.map(val => proxyToObject(val, seen)) as any;
-  } else {
-    obj = {};
-    // 将当前对象添加到已处理对象集合
-    seen.set(proxy, obj);
-    for (let key in proxy) {
-      if (proxy.hasOwnProperty(key)) {
-        const value = proxyToObject(proxy[key], seen);
-        if (value !== '[Circular Reference]') {
-          obj[key] = value;
-        }
-      }
-    }
-  }
-  return obj as P;
-};
+//   if (Array.isArray(proxy)) {
+//     obj = proxy.map(val => proxyToObject(val, seen)) as any;
+//   } else {
+//     obj = {};
+//     // 将当前对象添加到已处理对象集合
+//     seen.set(proxy, obj);
+//     for (const key in proxy) {
+//       if (Object.prototype.hasOwnProperty.call(proxy, key)) {
+//         const value = proxyToObject(proxy[key], seen);
+//         if (value !== '[Circular Reference]') {
+//           obj[key] = value;
+//         }
+//       }
+//     }
+//   }
+//   return obj as P;
+// };

 export default {}
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@ -21,7 +21,7 @@ import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useGroupStore, usePageStore, useWidgetStore } from '@/store'
+import { useGroupStore, useCanvasStore, useWidgetStore } from '@/store'

 type TState = {
  style: StyleValue
@ -33,11 +33,10 @@ const state = reactive<TState>({
    left: '0px',
  },
 })
-const pageStore = usePageStore()
+const pageStore = useCanvasStore()
 const groupStore = useGroupStore()
 const widgetStore = useWidgetStore()
 const { dPage } = storeToRefs(pageStore)
-// const { dPage } = useSetupMapGetters(['dPage'])

 onMounted(() => {
  groupStore.initGroupJson(JSON.stringify(wGroupSetting))
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -71,7 +71,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store'
+import { useCanvasStore, useControlStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store'

 type TState = {
  style: CSSProperties
@ -88,7 +88,7 @@ type TState = {
 const widgetStore = useWidgetStore()
 const historyStore = useHistoryStore()
 const groupStore = useGroupStore()
-const { dPage } = storeToRefs(usePageStore())
+const { dPage } = storeToRefs(useCanvasStore())
 const { dZoom } = storeToRefs(useCanvasStore())
 const { dHistoryParams } = storeToRefs(useHistoryStore())
 const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@ -72,7 +72,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, useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { useCanvasStore, useControlStore, useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'

 type TState = {
@ -97,7 +97,7 @@ const controlStore = useControlStore()
 const route = useRoute()

 // const { dZoom } = useSetupMapGetters(['dZoom'])
-const pageStore = usePageStore()
+const pageStore = useCanvasStore()
 const { dPage } = storeToRefs(pageStore)
 const { dZoom } = storeToRefs(useCanvasStore())

--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@ -39,7 +39,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 { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/store/index'
+import { useBaseStore, useControlStore, useHistoryStore, useCanvasStore, useUserStore, useWidgetStore } from '@/store/index'
 import { storeToRefs } from 'pinia'

 type TProps = {
@ -70,7 +70,7 @@ const canvasImage = ref<typeof SaveImage | null>(null)
 //   dWidgets, tempEditing
 // } = useSetupMapGetters(['dWidgets', 'tempEditing'])

-const pageStore = usePageStore()
+const pageStore = useCanvasStore()
 const controlStore = useControlStore()
 const historyStore = useHistoryStore()

--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@ -21,7 +21,7 @@ import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { useControlStore, useCanvasStore, useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import { TdWidgetData } from '@/store/design/widget'

@ -49,7 +49,7 @@ type TState = {
 }

 // const { dWidgets } = useSetupMapGetters(['dWidgets'])
-const { dPage } = storeToRefs(usePageStore())
+const { dPage } = storeToRefs(useCanvasStore())

 const props = defineProps<TProps>()
 const emit = defineEmits<TEmits>()