fix: copy&paste bug

src/components/modules/settings/valueSelect.vue

@@ -65,7 +65,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 
 type TProps = {
   label?: string
-  modelValue?: Record<string, any>
+  modelValue?: Record<string, any> | string | number
   suffix?: string
   data: Record<string, any>
   disable?: boolean
@@ -189,9 +189,8 @@ function down() {
 </style>
 
 <style lang="less" scoped>
-// Color variables (appears count calculates by raw css)
+@color0: #e1e1e1;
-@color0: #e1e1e1; // Appears 2 times
+@color1: #d1d1d1;
-@color1: #d1d1d1; // Appears 2 times
 
 .value-select {
   // height: 60px;

src/mixins/methods/dealWithCtrl.ts

@@ -50,7 +50,7 @@ function checkGroupChild(pid: number | string, key: any) {
   return itHas
 }
 /**
- * 复制
+ * 复制元素
  */
 function copy() {
   if (store.getters.dActiveElement.uuid === '-1') {
@@ -64,13 +64,14 @@ function copy() {
  * 粘贴
  */
 function paste() {
-  handlePaste()
+  handlePaste().then(() => {
-  if (store.getters.dCopyElement.length === 0) {
+    if (store.getters.dCopyElement.length === 0) {
-    return
+      return
-  } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+    } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
-    return
+      return
-  }
+    }
-  !store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
+    !store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
+  })
 }
 /**
  * 撤销

src/mixins/methods/handlePaste.ts

@@ -20,41 +20,53 @@ import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
-  navigator.clipboard
+  return new Promise<void>((resolve) => {
-    .read()
+    navigator.clipboard
-    .then(async (dataTransfer: any) => {
+      .read()
-      for (let i = 0; i < dataTransfer.length; i++) {
+      .then(async (dataTransfer: any) => {
-        const item = dataTransfer[i]
+        if (store.getters.dActiveElement.editable) {
-        if (item.types.toString().indexOf('image') !== -1) {
+          return
-          const imageBlob = await item.getType(item.types[0])
-          const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
-          // 上传图片
-          const qnOptions = { bucket: 'xp-design', prePath: 'user' }
-          const result: any = await Qiniu.upload(file, qnOptions)
-          const { width, height }: any = await getImage(file)
-          const url = _config.IMG_URL + result.key
-          await api.material.addMyPhoto({ width, height, url })
-          // 添加图片到画布中
-          store.commit('setShowMoveable', false) // 清理掉上一次的选择
-          const setting = JSON.parse(JSON.stringify(wImage.setting))
-          setting.width = width
-          setting.height = height
-          setting.imgUrl = url
-          const { width: pW, height: pH } = store.getters.dPage
-          setting.left = pW / 2 - width / 2
-          setting.top = pH / 2 - height / 2
-          store.dispatch('addWidget', setting)
-          break
-        } else if (item.types.toString().indexOf('text') !== -1) {
-          store.commit('setShowMoveable', false) // 清理掉上一次的选择
-          const setting = JSON.parse(JSON.stringify(wText.setting))
-          setting.text = await navigator.clipboard.readText()
-          store.dispatch('addWidget', setting)
-          break
         }
-      }
+        for (let i = 0; i < dataTransfer.length; i++) {
-    })
+          const item = dataTransfer[i]
-    .catch((error) => {
+          if (item.types.toString().indexOf('image') !== -1) {
-      console.error('无法读取剪贴板内容：', error)
+            const imageBlob = await item.getType(item.types[0])
-    })
+            const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
+            // 上传图片
+            const qnOptions = { bucket: 'xp-design', prePath: 'user' }
+            const result: any = await Qiniu.upload(file, qnOptions)
+            const { width, height }: any = await getImage(file)
+            const url = _config.IMG_URL + result.key
+            await api.material.addMyPhoto({ width, height, url })
+            // 添加图片到画布中
+            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            const setting = JSON.parse(JSON.stringify(wImage.setting))
+            setting.width = width
+            setting.height = height
+            setting.imgUrl = url
+            const { width: pW, height: pH } = store.getters.dPage
+            setting.left = pW / 2 - width / 2
+            setting.top = pH / 2 - height / 2
+            store.dispatch('addWidget', setting)
+            // 清空剪贴板，防止多次上传图片
+            navigator.clipboard.write([
+              new ClipboardItem({
+                'text/plain': new Blob([''], {type: 'text/plain'})
+              })
+            ])
+            break
+          } else if (item.types.toString().indexOf('text') !== -1) {
+            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            const setting = JSON.parse(JSON.stringify(wText.setting))
+            setting.text = await navigator.clipboard.readText()
+            store.dispatch('addWidget', setting)
+            break
+          }
+        }
+      })
+      .catch((error) => {
+        // 剪贴板内容为空
+        resolve()
+      })
+  })
 }

src/store/modules/design/actions.ts

@@ -237,7 +237,7 @@ export default {
     if (activeElement.type === 'page') {
       return
     }
-
+    navigator.clipboard.writeText('') // 清空系统剪贴板内容
     const container = []
     const selectWidgets = store.state.dSelectWidgets
     if (selectWidgets.length === 0) {

src/store/modules/design/index.ts

@@ -29,7 +29,6 @@ const all = {
     dDraging: false, // 是否正在抓取组件
     dResizeing: false, // 是否正在调整组件宽高
     dShowRefLine: true, // 是否显示参考线
-
     dResizeWH: {
       // 初始化调整大小时组件的宽高
       width: 0,

vite.config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
   },
   server: {
     hmr: { overlay: false },
+    host: '127.0.0.1'
     // proxy: {
     //   '/api': {
     //     target: '',