fix(color-picker): remove sass

package.json

@@ -14,7 +14,7 @@
     "publish-fast": "git add . && git commit -m 'build: auto publish' && sh script/publish.sh"
   },
   "dependencies": {
-    "@palxp/color-picker": "^1.3.1",
+    "@palxp/color-picker": "^1.3.3",
     "@palxp/image-extraction": "^1.2.4",
     "@scena/guides": "^0.18.1",
     "@webtoon/psd": "^0.4.0",

src/assets/styles/design.less

@@ -13,7 +13,7 @@
 @height2: 54px; // Appears 5 times
 
 .page-design-bg-color {
-  background-color: #4b678c;
+  // background-color: #4b678c;
   // background-color: #4682b4;
 }
 #page-design-index {
@@ -132,7 +132,7 @@
     pointer-events: none;
   }
   .shelter {
-    box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
+    box-shadow: 0 0 0 5000px rgba(248, 248, 248, 0.99);
     z-index: 8;
   }
 }

src/common/methods/getImgDetail.ts

@@ -1,9 +1,9 @@
 /*
  * @Author: ShawnPhang
  * @Date: 2021-08-23 17:25:35
- * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-02-24 00:16:59
+ * @Description: 获取图片细节的相关方法
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-09 10:42:54
  */
 export const getImage = (imgItem: string | File) => {
   // 创建对象

src/mixins/methods/dealWithCtrl.ts

@@ -3,9 +3,10 @@
  * @Date: 2022-03-09 16:29:54
  * @Description: 处理和ctrl建相关的操作
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-19 17:27:04
+ * @LastEditTime: 2023-10-09 09:49:54
  */
 import store from '@/store'
+import handlePaste from './handlePaste'
 
 export default function dealWithCtrl(e: any, _this: any) {
   switch (e.keyCode) {
@@ -63,6 +64,7 @@ function copy() {
  * 粘贴
  */
 function paste() {
+  handlePaste()
   if (store.getters.dCopyElement.length === 0) {
     return
   } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {

src/mixins/methods/handlePaste.ts

@@ -0,0 +1,60 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2023-10-09 09:47:40
+ * @Description: 处理剪贴板
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-09 10:35:21
+ */
+
+// window.addEventListener('paste', (e: any) => {
+//   const clipdata = e.clipboardData || (window as any).clipboardData
+//   console.log('主动粘贴', clipdata.getData('text/plain'))
+// })
+
+import store from '@/store'
+import api from '@/api'
+import Qiniu from '@/common/methods/QiNiu'
+import _config from '@/config'
+import { getImage } from '@/common/methods/getImgDetail'
+import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wText from '@/components/modules/widgets/wText/wText.vue'
+
+export default () => {
+  navigator.clipboard
+    .read()
+    .then(async (dataTransfer: any) => {
+      for (let i = 0; i < dataTransfer.length; i++) {
+        const item = dataTransfer[i]
+        if (item.types.toString().indexOf('image') !== -1) {
+          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
+        }
+      }
+    })
+    .catch((error) => {
+      console.error('无法读取剪贴板内容：', error)
+    })
+}

src/views/Index.vue

@@ -18,9 +18,9 @@
     <div class="page-design-index-wrap">
       <widget-panel></widget-panel>
       <design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
-        <!-- 用于挡住画布溢出部分，因为使用overflow有bug. PS:如shadow没有透明度则可以完全遮挡元素 -->
+        <!-- 用于挡住画布溢出部分，因为使用overflow有bug -->
         <div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
-        <!-- 提供一个背景图层以免遮挡穿帮 -->
+        <!-- 提供一个背景图层 -->
         <div class="shelter-bg transparent-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
       </design-board>
       <style-panel></style-panel>