Merge: main branch

README.md

@@ -13,7 +13,7 @@
 ### 特点
 
 - 丝滑的页面操作体验，丰富的交互细节，基础功能完善
-- 采用服务端生成图片，能确保多端出图统一性，支持各种 CSS 特性
+- 采用服务端生成图片，确保多端出图统一性，支持各种 HTML5 特性
 - 简易 AI 抠图工具，上传图片一键去除背景
 - 技术栈：Vue3 、Vite5 、Vuex 、ElementPlus，开发体验畅快
 - 图片生成：Puppeteer、Express
@@ -54,13 +54,9 @@ npm run dev
 
 后端需要自己开发，目前本项目演示 Demo 中的后端接口参考：[接口 API 文档](https://xp.palxp.cn/apidoc/index.html)。
 
-## 其它
+## 交流群
 
-我们尝试沉淀一个高质量内容社区，形成可持续学习的平台，同时解决开发者在项目中遇到的疑难和困惑，帮大家少走一些弯路。
+关注公众号：品味前端，回复 “加群” 获取二维码，更新公告不错过。
-
-<img style="width: 380px;" src="https://github.com/palxiao/poster-design/assets/21021314/643dcc8b-ef73-4c76-a78c-a7c377b5f268" />
-
-也欢迎关注公众号：品味前端，回复“加群”进行交流。
 
 <img style="width: 380px;" src="https://xp.palxp.cn/images/2024-3-1-1709306365949.png" />
 

src/assets/styles/design.less

@@ -1,16 +1,14 @@
 @import './color.less';
 // design index page
 
-// Color variables (appears count calculates by raw css)
+@color4: #50555b;
-@color4: #50555b; // Appears 2 times
+@color5: #808080;
-@color5: #808080; // Appears 2 times
 
-// Width variables (appears count calculates by raw css)
+@width0: 1180px;
-@width0: 1180px; // Appears 3 times
+@width1: 120px;
-@width1: 120px; // Appears 2 times
+@width2: 100%;
-@width2: 100%; // Appears 8 times
 
-@height2: 54px; // Appears 5 times
+@height2: 54px;
 
 .page-design-bg-color {
   // background-color: #4b678c;

src/components/business/moveable/Moveable.vue

@@ -9,41 +9,32 @@
   <div id="empty" class="moveable__remove-item zk-moveable-style"></div>
 </template>
 <script lang="ts" setup>
-import { Events, defineComponent, nextTick, onMounted, watch } from 'vue'
+import { defineComponent, nextTick, onMounted, watch } from 'vue'
 
-import Moveable, { EVENTS, OnRotate, WithEventStop } from 'moveable' // PROPERTIES, METHODS,
+import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS,
 import MoveableHelper from 'moveable-helper'
 import { mapGetters, mapActions, useStore } from 'vuex'
 // import { setTransformAttribute } from '@/common/methods/handleTransform'
 import useSelecto from './Selecto'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore } from '@/pinia'
 
-const {
-  dSelectWidgets, dActiveElement, activeMouseEvent,
-  dWidgets,
-  updateRect, updateSelect,
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
 const store = useStore()
-const controlStore = useControlStore()
+//  computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
-const { guidelines } = storeToRefs(useCanvasStore())
+const {
-const { showMoveable, showRotatable } = storeToRefs(controlStore)
+  dSelectWidgets, dActiveElement, activeMouseEvent, showMoveable, showRotatable, dWidgets, updateRect, updateSelect, guidelines
-// computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
+} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
 
-let _target: string = ""
+let _target: string | null = null
-let moveable: Moveable | null = null 
-let holdPosition: { left: number, top: number } | null = null 
 
 
-let startHL: number = 0
-let startLS: number = 0
-let resetRatio: number = 0
-let resizeTempData: { width: number, height: number } | null = null
 
 watch(
   () => dActiveElement.value,
   async (val) => {
+    setTimeout(async () => {
+      await nextTick()
+      checkMouseEvent()
+    }, 10);
     if (!val.record) {
       return
     }
@@ -73,19 +64,13 @@ watch(
       // // Set Move Auto
       moveable.setState({ target: _target }, () => {
         // 当出现mouseevent时进行即刻选中
-        if (activeMouseEvent.value) {
+        checkMouseEvent()
-          moveable?.dragStart(activeMouseEvent.value)
-          // TODO 使用后销毁mouseevent
-          store.commit('setMouseEvent', null)
-        }
       })
       // // End
-      // controlStore.setShowMoveable(true)
+      store.commit('setShowMoveable', true)
-      controlStore.setShowMoveable(true)
-
       // 参考线设置
-      if (!moveable.elementGuidelines?.includes(target)) {
+      if (moveable.elementGuidelines && !moveable.elementGuidelines.includes(target)) {
-        moveable.elementGuidelines?.push(target)
+        moveable.elementGuidelines.push(target)
       }
     } else {
       moveable.target = `[id="empty"]`
@@ -96,16 +81,14 @@ watch(
         }, 210)
       }
       // feature: 可以遍历来设置参考线，目前先粗暴清空
-      if (moveable.elementGuidelines) {
+      moveable.elementGuidelines && (moveable.elementGuidelines.length = 0)
-        moveable.elementGuidelines.length = 0
-      }
     }
   }
 )
 
 watch(
   () => showMoveable.value,
-  val => {
+  (val) => {
     if (!moveable) return
     if (val) {
         moveable.target = _target
@@ -117,22 +100,23 @@ watch(
 
 watch(
   () => showRotatable.value,
-  val => {
+  (val) => {
-    // TODO: 这里是通过旋转来判断是否可以操作
     if (!moveable) return
-
+    // TODO: 这里是通过旋转来判断是否可以操作
     moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []
     moveable.resizable = val
-    moveable.scalable = val
+    // this.moveable.scalable = val
-    const el = document.getElementsByClassName('moveable-rotation')[0] as HTMLElement
+    const el = document.getElementsByClassName('moveable-rotation')
-    el.style.display = val ? 'block' : 'none'
+    if (el && el[0]) {
+      (el[0] as HTMLElement).style.display = val ? 'block' : 'none'
+    }
   }
 )
 
 watch(
   () => updateRect.value,
   () => {
-    moveable?.updateRect()
+    moveable && moveable.updateRect()
   }
 )
 
@@ -146,7 +130,6 @@ watch(
       await nextTick()
       for (let i = 0; i < items.length; i++) {
         console.log(items[i].uuid)
-
         document.getElementById(items[i].uuid)?.classList.add('widget-selected')
       }
       moveable.renderDirections = []
@@ -199,9 +182,57 @@ watch(
   }
 )
 
+type TMoveableOptions = {
+  target: HTMLElement | null
+  container?:  HTMLElement | null
+  zoom: number
+  draggable: boolean
+  clippable: boolean // 裁剪
+  throttleDrag: number
+  resizable: boolean
+  throttleResize: number
+  scalable: boolean
+  throttleScale: number
+  keepRatio: boolean
+  rotatable: boolean
+  throttleRotate: number
+  renderDirections: string[] // ['nw', 'ne', 'sw', 'se'] // 'e'
+  pinchable: boolean // ["draggable", "resizable", "scalable", "rotatable"]
+  origin: boolean
+  defaultGroupOrigin: string,
+  /* 样式相关 */
+  rotationPosition: 'bottom',
+  className: 'zk-moveable-style',
+  /* -- 吸附对齐 Start -- */
+  snappable: boolean,
+  elementGuidelines: [],
+  verticalGuidelines: [],
+  horizontalGuidelines: [],
+  snapThreshold: 4,
+  isDisplaySnapDigit: boolean,
+  snapGap: boolean,
+  snapElement: boolean,
+  snapVertical: boolean,
+  snapHorizontal: boolean,
+  snapCenter: boolean,
+  snapDigit: number
+
+  // snapDirections={{"top":true,"right":true,"bottom":true,"left":true}}
+  //       elementSnapDirections={{}}
+  // -- END --
+  triggerAblesSimultaneously: true,
+}
+
+let moveable: Moveable | null = null
+let holdPosition: { left: number, top: number } | null = null
+let startHL: number = 0
+let startLS: number = 0
+let resetRatio: number = 0
+let resizeTempData: { width: number, height: number } | null = null
+
 onMounted(() => {
   let holdGroupPosition: Record<string, any> | null = null
-  const moveableOptions: any = {
+  const moveableOptions: TMoveableOptions = {
     target: document.querySelector(`[id="empty"]`),
     // container: document.querySelector('#page-design'),
     zoom: 0.8,
@@ -241,22 +272,25 @@ onMounted(() => {
     // -- END --
     triggerAblesSimultaneously: true,
   }
-  const moveableInstance = new Moveable(document.body, moveableOptions)
-  moveable = moveableInstance
 
-  const helper: any = new MoveableHelper()
+  moveable = new Moveable(document.body, moveableOptions)
+
+  const helper = new MoveableHelper()
 
   EVENTS.forEach((event) => {
-    let helperEvent = event.replace(event[0], 'on' + event[0].toUpperCase())
+    let helperEvent = (event.replace(event[0], 'on' + event[0].toUpperCase()) as keyof MoveableHelper)
     // console.log(event)
     // 'resizeStart', 'resize', 'resizeEnd', rotate, onScale, onScaleStart
     if (['resizeStart', 'rotate', 'resize'].includes(event)) {
       moveable?.on(event as any, (...args) => {
         // this.$emit(event, ...args)
-        helper[helperEvent] && helper[helperEvent](...args)
+        if (helper[helperEvent] && typeof helper[helperEvent] === "function") {
+          (helper[helperEvent] as Function)(...args)
+        }
       })
     }
   })
+
   /* draggable */
   let resizeStartWidth = 0
 
@@ -281,44 +315,32 @@ onMounted(() => {
     inputEvent.preventDefault()
     // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
     if (holdPosition) {
-        store.dispatch('updateWidgetData', {
+      store.dispatch("updateWidgetData", {
         uuid: dActiveElement.value.uuid,
         key: 'left',
         value: Number(holdPosition?.left),
       })
-        // this.updateWidgetData({
+      store.dispatch("updateWidgetData", {
-        //   uuid: this.dActiveElement.uuid,
-        //   key: 'left',
-        //   value: Number(this.holdPosition?.left),
-        // })
-        store.dispatch('updateWidgetData', {
         uuid: dActiveElement.value.uuid,
         key: 'top',
         value: Number(holdPosition?.top),
       })
-        // this.updateWidgetData({
-        //   uuid: this.dActiveElement.uuid,
-        //   key: 'top',
-        //   value: Number(this.holdPosition?.top),
-        // })
       holdPosition = null // important
       setTimeout(() => {
-          store.dispatch('pushHistory')
+        store.dispatch("pushHistory")
-          // this.pushHistory()
+        // pushHistory()
       }, 100)
     }
   })
   // .on('keyUp', (e) => {
   //   moveable.updateRect()
   // })
-    // { target, beforeDist, dist, transform }
+  .on('rotate', ({ target, beforeDist, dist, transform }: any) => {
-    .on('rotate', ({ target, beforeDist, dist, transform }) => {
     // console.log('onRotate', Number(this.dActiveElement.rotate) + Number(beforeDist + dist))
     // target.style.transform = transform
-      
     console.log(target.style.transform)
   })
-    .on('rotateEnd', (e) => {
+  .on('rotateEnd', (e: any) => {
     const tf = e.target.style.transform
     const iof = tf.indexOf('rotate')
     let rotate = ''
@@ -333,15 +355,11 @@ onMounted(() => {
         key: 'rotate',
         value: rotate,
       })
-        // this.updateWidgetData({
-        //   uuid: this.dActiveElement.uuid,
-        //   key: 'rotate',
-        //   value: rotate,
-        // })
   })
   .on('resizeStart', (args) => {
     console.log(args.target.style.transform)
     if (!moveable) return
+    
     moveable.snappable = false
     if (dActiveElement.value.type === 'w-text') {
       if (String(args.direction) === '1,0') {
@@ -427,19 +445,6 @@ onMounted(() => {
           },
         ],
       })
-        // this.updateWidgetMultiple({
-        //   uuid: this.dActiveElement.uuid,
-        //   data: [
-        //     {
-        //       key: 'left',
-        //       value: Number(this.dActiveElement.left) + left,
-        //     },
-        //     {
-        //       key: 'top',
-        //       value: Number(this.dActiveElement.top) + top,
-        //     },
-        //   ],
-        // })
       // 重置translate
       const tf = e.target.style.transform
       const iof = tf.indexOf('translate')
@@ -453,12 +458,13 @@ onMounted(() => {
     if (resizeTempData) {
       store.commit('resize', resizeTempData)
       resizeTempData = null
-        setTimeout(async () => {
+      // await this.$nextTick()
-          await nextTick()
-          if (moveable) {
       moveable.updateRect()
-          }
+      // 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
-        }, 10)
+      store.commit('setShowMoveable', false)
+      setTimeout(() => {
+        store.commit('setShowMoveable', true)
+      }, 10);
     }
     try {
       if (dActiveElement.value.type === 'w-text') {
@@ -486,7 +492,7 @@ onMounted(() => {
     target!.style.transform = transform
     dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
   })
-    .on('scaleEnd', (e: Record<string, any>) => {
+  .on('scaleEnd', (e: any) => {
     if (!moveable) return
     moveable.resizable = true
     // moveable.scalable = true
@@ -523,7 +529,7 @@ onMounted(() => {
     for (const key in holdGroupPosition) {
       if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
         const item = holdGroupPosition[key]
-          store.dispatch('updateWidgetData', {
+        store.dispatch("updateWidgetData", {
           uuid: key,
           key: 'left',
           value: item.left,
@@ -539,7 +545,7 @@ onMounted(() => {
     // background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
     // background-size: 12px 1px;
   })
-    .on('resizeGroupStart', ({ events }) => {
+  .on('resizeGroupStart', ({ events }: any) => {
     console.log(events)
     // events.forEach((ev, i) => {
     //     const frame = this.frames[i];
@@ -556,7 +562,7 @@ onMounted(() => {
     //     ev.dragStart && ev.dragStart.set(frame.translate);
     // });
   })
-    .on('resizeGroup', (e) => {
+  .on('resizeGroup', (e: any) => {
     // events.forEach(({ target, width, height, drag }, i) => {
     //     const frame = this.frames[i];
     //     target.style.width = `${width}px`;
@@ -567,28 +573,36 @@ onMounted(() => {
     //         = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
     // });
   })
-    .on('resizeGroupEnd', ({ targets, isDrag }) => {
+  .on('resizeGroupEnd', ({ targets, isDrag }: any) => {
     console.log('onResizeGroupEnd', targets, isDrag)
   })
 
   // -- 选择功能 Start --
   useSelecto(moveable)
   // -- 选择功能 END --
-})
 
+})
 
 async function created() {
   await nextTick()
-  const Ele = document.getElementById('page-design')
+  const Ele = document.getElementById('main')
   // 后续可能加个节流 TODO
   Ele?.addEventListener('scroll', () => {
-    moveable && (moveable.updateRect())
+    if (!moveable) return
+    moveable.updateRect()
   })
 }
+
 created()
 
 // ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
-
+function checkMouseEvent() {
+  if (activeMouseEvent.value && moveable) {
+    moveable.dragStart(activeMouseEvent.value)
+    // 使用后销毁mouseevent
+    store.commit('setMouseEvent', null)
+  }
+}
 </script>
 
 <style lang="less">

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

@@ -10,12 +10,12 @@
     <el-tabs tab-position="left" style="height: 60vh" class="demo-tabs" @tab-change="tabChange">
       <el-tab-pane label="我的素材">
         <div class="pic__box">
-          <photo-list :isDone="state.isDone" :listData="state.imgList" @load="load" @select="selectImg" />
+          <photo-list :canDrag="false" :isDone="state.isDone" :listData="state.imgList" @load="load" @select="selectImg" />
         </div>
       </el-tab-pane>
       <el-tab-pane label="照片图库">
         <div class="pic__box">
-          <photo-list :isDone="state.isPicsDone" :listData="state.recommendImgList" @load="loadPic" @select="selectImg($event, state.recommendImgList)" />
+          <photo-list :canDrag="false" :isDone="state.isPicsDone" :listData="state.recommendImgList" @load="loadPic" @select="selectImg($event, state.recommendImgList)" />
         </div>
       </el-tab-pane>
     </el-tabs>

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

@@ -240,7 +240,6 @@ async function drop(e: MouseEvent) {
 
       } else {
         store.dispatch('addWidget', setting) // 正常加入面板
-        // addWidget(setting) // 正常加入面板
       }
     }
   } else if (type === 'bg') {
@@ -248,7 +247,6 @@ async function drop(e: MouseEvent) {
   } else if (type !== 'group') {
     console.log(setting)
     store.dispatch('addWidget', setting) // 正常加入面板
-    // addWidget(setting) // 正常加入面板
   }
   // 清除临时数据
   // this.$store.commit('selectItem', {})

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

@@ -268,7 +268,9 @@ async function autoFixTop() {
 }
 
 defineExpose({
-  screenChange
+  screenChange,
+  add,
+  sub
 })
 
 </script>
@@ -276,7 +278,7 @@ defineExpose({
 <style lang="less" scoped>
 @color-select: #1b1634;
 @color1: #ffffff; // 选项板背景
-@color2: #ffffff; // Appears 3 times
+@color2: #ffffff;
 @color3: #666666; // 文字主颜色
 @color4: #c2c2c2; // 禁用
 @color5: rgba(0, 0, 0, 0.12); // 高亮选项背景

src/components/modules/panel/components/layerList.vue

@@ -157,9 +157,9 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@color0: #ffffff; // Appears 5 times
+@color0: #ffffff;
-@color1: #999999; // Appears 3 times
+@color1: #999999;
-@color2: rgba(0, 0, 0, 0.05); // Appears 2 times
+@color2: rgba(0, 0, 0, 0.05);
 
 .widget-list {
   width: 100%;

src/components/modules/panel/widgetPanel.vue

@@ -59,29 +59,13 @@ watch(
   },
 )
 
-// const { proxy } = getCurrentInstance() as ComponentInternalInstance
-// watch(
-//   () => state.active,
-//   () => {
-//     let screen = document.getElementById('page-design')
-//     nextTick(() => {
-//       proxy?.updateScreen({
-//         width: screen.offsetWidth,
-//         height: screen.offsetHeight,
-//       })
-//     })
-//   },
-// )
-
 defineExpose({
   clickClassify
 })
-//   ...mapActions(['updateScreen']),
 </script>
 
 <style lang="less" scoped>
-// Color variables (appears count calculates by raw css)
+@color1: #3e4651;
-@color1: #3e4651; // Appears 2 times
 
 #widget-panel {
   transition: all 1s;

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

@@ -10,13 +10,12 @@
     <div class="list">
       <div
         v-for="(item, i) in state.list" :key="i + 'i'"
-        :style="{ width: item.listWidth + 'px', marginRight: item.gap + 'px' }"
+        :style="{ width: item.listWidth + 'px', marginRight: item.gap + 'px', cursor: canDrag ? 'grab' : 'pointer' }"
         class="list__img" draggable="false"
         @mousedown="dragStart($event, i)"
         @mousemove="mousemove"
         @mouseup="mouseup"
         @click.stop="select(i)"
-        @dragstart="dragStart($event, i)"
       >
         <edit-model v-if="props.edit" :options="props.edit" :data="{ item, i }">
           <div v-if="item.isDelect" class="list__mask">已删除</div>
@@ -49,13 +48,13 @@ type TProps = {
   edit?: Record<string, any>
   isDone?: boolean
   isShort?: boolean
+  canDrag?: boolean
 }
 
 type TEmits = {
   (event: 'load'): void
   (event: 'select', data: number): void
   (event: 'drag', data: number): void
-
 }
 
 type TState = {
@@ -65,6 +64,7 @@ type TState = {
 
 const props = withDefaults(defineProps<TProps>(), {
   isShort: false,
+  canDrag: true,
   listData: () => ([])
 })
 const emit = defineEmits<TEmits>()
@@ -176,6 +176,9 @@ const select = (i: number) => {
 
 const dragStart = async (e: Event | any, i: number) => {
   e.preventDefault()
+  if (!props.canDrag) {
+    return
+  }
   startPoint = { x: e.x, y: e.y }
   if (!state.list[i].isDelect) {
     const setImageParams: TItem2DataParam = {
@@ -242,7 +245,6 @@ defineExpose({
   &__img {
     // background: #f1f2f4;
     display: inline-block;
-    cursor: grab;
     // margin: 0 6px 2px 0;
     margin-bottom: 3px;
     border-radius: 2px;

src/components/modules/settings/numberInput.vue

@@ -173,8 +173,8 @@ function blurInput() {
 </script>
 
 <style lang="less" scoped>
-@color0: #e1e1e1; // Appears 2 times
+@color0: #e1e1e1;
-@color1: #d1d1d1; // Appears 2 times
+@color1: #d1d1d1;
 
 .number-input {
   height: 60px;

src/components/modules/widgets/wGroup/wGroup.vue

@@ -133,6 +133,7 @@ function updateRecord(tempScale ?: number) {
       // TODO DOM Change
       // this.dActiveElement.scale = this.ratio
       if (widget.value) {
+        // 缩放原点在左上角，旋转原点在中心
         widget.value.style.transformOrigin = 'left top' // 设置scale的原点
         setTransformAttribute(widget.value, 'scale', ratio.value)
       }
@@ -180,7 +181,7 @@ function touchend() {
     setTimeout(() => {
       if (!widget.value) return
       widget.value.style.opacity = `${props.params.opacity}`
-      // this.$refs.widget.style.transformOrigin = 'center' // 设置scale的原点
+      // widget.value.style.transformOrigin = 'center' // 设置scale的原点
     }, 100)
 
     // const opacity = this.$refs.widget.style.opacity

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

@@ -308,8 +308,11 @@ function openCropper() {
 // }
 
 
-function selectDone(img: TGetImageListResult) {
+async function selectDone(img: TGetImageListResult) {
   state.innerElement.imgUrl = img.url
+  const loadImg = await getImage(img.url)
+  state.innerElement.width = loadImg.width * store.getters.dZoom / 100
+  state.innerElement.height = loadImg.height * store.getters.dZoom / 100
   // this.imgCrop(true)
 }
 

src/mixins/methods/handlePaste.ts

@@ -78,11 +78,11 @@ export default () => {
             setting.text = await navigator.clipboard.readText()
             store.dispatch('addWidget', setting)
             break
-          }
+          } else resolve()
         }
       })
       .catch((error) => {
-        // 剪贴板内容为空
+        // 剪贴板内容为空, 直接返回
         resolve()
       })
   })

src/mixins/shortcuts.ts

@@ -6,11 +6,8 @@
  * @LastEditTime: 2023-09-19 17:29:06
  */
 import store from '@/store'
-const _this: any = {}
+// const _this: any = {}
-_this.dHistoryParams = store.getters.dHistoryParams
+// _this.dHistoryParams = store.getters.dHistoryParams
-// _this.dActiveElement = store.getters.dActiveElement
-// _this.dPage = store.getters.dPage
-// _this.handleHistory = store.dispatch.ha
 
 import keyCodeOptions from './methods/keyCodeOptions'
 import dealWithCtrl from './methods/dealWithCtrl'

src/store/modules/design/actions.ts

@@ -281,10 +281,8 @@ export default {
       } else {
         copyElement[i].parent = '-1'
       }
-      if (!container) {
+      copyElement[i].top += 30
-        copyElement[i].top += 50
+      copyElement[i].left += 30
-        copyElement[i].left += 50
-      }
     }
     store.state.dWidgets = store.state.dWidgets.concat(copyElement)
     store.state.dActiveElement = copyElement[0]

src/views/Draw.vue

@@ -28,7 +28,6 @@ type TState = {
   style: StyleValue
 }
 
-// mixins: [shortcuts],
 const store = useStore()
 const route = useRoute()
 const state = reactive<TState>({
@@ -48,8 +47,8 @@ onMounted(() => {
   })
 })
 
-// ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
 async function load() {
+  let backgroundImage = ''
   let loadFlag = false
   const { id, tempid, tempType: type  } = route.query 
   if (id || tempid) {
@@ -70,6 +69,10 @@ async function load() {
     } else {
       pageStore.setDPage(content.page)
       // store.commit('setDPage', content.page)
+      // 移除背景图，作为独立事件
+      backgroundImage = content.page?.backgroundImage
+      backgroundImage && delete content.page.backgroundImage
+      store.commit('setDPage', content.page)
       if (id) {
         store.commit('setDWidgets', widgets)
       } else {
@@ -111,10 +114,11 @@ async function load() {
         }
       } catch (e) {}
     })
-    // TODO优化: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
+    // 背景图无法检测是否加载完毕，所以单独做判断
-    if (content.page?.backgroundImage) {
+    if (backgroundImage) {
-      const preloadBg = new Preload([content.page.backgroundImage])
+      const preloadBg = new Preload([backgroundImage])
       await preloadBg.imgs()
+      store.commit('setDPage', {...content.page, ...{backgroundImage}})
     }
     try {
       fontWithDraw && (await font2style(fontContent, fontData))

src/views/Index.vue

@@ -57,7 +57,6 @@ import _config from '../config'
 import {
   CSSProperties, computed, nextTick,
   onBeforeUnmount, onMounted, reactive, ref,
-  getCurrentInstance
 } from 'vue'
 import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
@@ -65,7 +64,6 @@ import Moveable from '@/components/business/moveable/Moveable.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import lineGuides from '@/components/modules/layout/lineGuides.vue'
-
 import shortcuts from '@/mixins/shortcuts'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import HeaderOptions from './components/HeaderOptions.vue'
@@ -85,16 +83,6 @@ type TState = {
   showLineGuides: boolean
 }
 
-const beforeUnload = function (e: Event): string {
-  const confirmationMessage: string = '系统不会自动保存您未修改的内容';
-
-  (e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
-  return confirmationMessage // Gecko and WebKit
-}
-
-// mixins: [shortcuts],
-!_config.isDev && window.addEventListener('beforeunload', beforeUnload)
-
 const {
   dActiveElement, dHistoryParams, dCopyElement
 } = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement'])
@@ -118,9 +106,15 @@ const zoomControlRef = ref<typeof zoomControl | null>(null)
 const store = useStore()
 const route = useRoute()
 
-// const draw = () => {
+const beforeUnload = function (e: Event): any {
-//   state.openDraw = true
+  if (store.getters.dHistoryParams.length > 0) {
-// }
+    const confirmationMessage: string = '系统不会自动保存您未修改的内容';
+    (e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
+    return confirmationMessage // Gecko and WebKit
+  } else return false
+}
+
+!_config.isDev && window.addEventListener('beforeunload', beforeUnload)
 
 function jump2home() {
   // const fullPath = window.location.href.split('/')
@@ -141,32 +135,40 @@ const undoable = computed(() => {
 const redoable = computed(() => {
   return !(dHistoryParams.value.index === dHistoryParams.value.length - 1)
 })
-// watch: {
+
-//   $route() {
+function zoomSub() {
-//     console.log('change route', this.$route.query)
+  if (!zoomControlRef.value) return
-//     this.loadData()
+  zoomControlRef.value.sub()
-//   },
+}
-// },
+
+function zoomAdd() {
+  if (!zoomControlRef.value) return
+  zoomControlRef.value.add()
+}
+
+function save() {
+  if (!optionsRef.value) return
+  optionsRef.value.save()
+}
 
 const { handleKeydowm, handleKeyup, dealCtrl } = shortcuts.methods
 let checkCtrl: number | undefined
+const instanceFn = { save, zoomAdd, zoomSub }
 
 onMounted(() => {
   store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)
-  const instance = getCurrentInstance()
+  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
   document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
   loadData()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', fixTopBarScroll)
-  const instance = getCurrentInstance()
   // window.removeEventListener('click', this.clickListener)
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
   document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
   document.oncontextmenu = null
 })
@@ -201,29 +203,14 @@ function loadData() {
   })
 }
 
-function zoomSub() {
-  if (!zoomControlRef.value) return
-  zoomControlRef.value.sub()
-}
-
-function zoomAdd() {
-  if (!zoomControlRef.value) return
-  zoomControlRef.value.add()
-}
-
-function save() {
-  if (!optionsRef.value) return
-  optionsRef.value.save()
-}
-
 function fixTopBarScroll() {
   const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
   state.style.left = `-${scrollLeft}px`
 }
 
-function clickListener(e: Event) {
+// function clickListener(e: Event) {
-  console.log('click listener', e)
+//   console.log('click listener', e)
-}
+// }
 
 function optionsChange({ downloadPercent, downloadText }: { downloadPercent: number, downloadText: string }) {
   state.downloadPercent = downloadPercent