Merge pull request #96 from JeremyYu-cn/feat-upgrade-vue3

Merge: main branch

README.md

@@ -1,4 +1,4 @@
-**[在线体验网站](https://design.palxp.cn/)** | **[在线文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667)
+**[在线体验网站](https://design.palxp.cn/)** | **[在线文档](https://xp.palxp.cn/)** | [常见问题](https://xp.palxp.cn/#/articles/1689323321667) | [性能压测](https://juejin.cn/post/7348288810722869300)
 
 ---
 

package-lock.json

@@ -21,6 +21,7 @@
         "element-plus": "^2.3.7",
         "fontfaceobserver": "^2.1.0",
         "html2canvas": "^1.4.1",
+        "mitt": "^3.0.1",
         "moveable": "^0.26.0",
         "moveable-helper": "^0.4.0",
         "nanoid": "^3.1.23",
@@ -3013,6 +3014,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/moveable": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.26.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "element-plus": "^2.3.7",
     "fontfaceobserver": "^2.1.0",
     "html2canvas": "^1.4.1",
+    "mitt": "^3.0.1",
     "moveable": "^0.26.0",
     "moveable-helper": "^0.4.0",
     "nanoid": "^3.1.23",

src/common/methods/DesignFeatures/setWidgetData.ts

@@ -8,15 +8,17 @@
 // import store from '@/store'
 // import { getImage } from '../getImgDetail'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
-import wText from '@/components/modules/widgets/wText/wText.vue'
 // import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
+// import wText from '@/components/modules/widgets/wText/wText.vue'
+import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
+import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
   let setting = data
   if (type === 'text') {
-    !item.fontFamily && !item.color ? (setting = JSON.parse(JSON.stringify(wText.setting))) : (setting = item)
+    !item.fontFamily && !item.color ? (setting = JSON.parse(JSON.stringify(wTextSetting))) : (setting = item)
     !setting.text ? (setting.text = '双击编辑文字') : (setting.text = decodeURIComponent(setting.text)) // item.text
     setting.fontSize = item.fontSize
     setting.width = item.width || item.fontSize * setting.text.length

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

@@ -51,6 +51,7 @@ import photoList from './components/photoList.vue'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
+import eventBus from '@/utils/plugins/eventBus'
 
 type TProps = {
   active?: number
@@ -239,6 +240,11 @@ const openPSD = () => {
   window.open(router.resolve('/psd').href, '_blank')
 }
 
+eventBus.on('refreshUserImages', () => {
+  state.imgList = []
+  load(true)
+})
+
 defineExpose({
   selectDesign,
   loadDesign,

src/mixins/methods/handlePaste.ts

@@ -18,7 +18,9 @@ import _config from '@/config'
 import { getImage } from '@/common/methods/getImgDetail'
 // import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
-import wText from '@/components/modules/widgets/wText/wText.vue'
+// import wText from '@/components/modules/widgets/wText/wText.vue'
+import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
+import eventBus from '@/utils/plugins/eventBus'
 
 export default () => {
   return new Promise<void>((resolve) => {
@@ -39,6 +41,8 @@ export default () => {
             const { width, height }: any = await getImage(file)
             const url = _config.IMG_URL + result.key
             await api.material.addMyPhoto({ width, height, url })
+            // 刷新用户列表
+            eventBus.emit('refreshUserImages')
             // 添加图片到画布中
             store.commit('setShowMoveable', false) // 清理掉上一次的选择
             const setting = JSON.parse(JSON.stringify(wImageSetting))
@@ -55,10 +59,14 @@ export default () => {
                 'text/plain': new Blob([''], {type: 'text/plain'})
               })
             ])
+            // 最后尝试复制，将图片替换为图片组件
+            setTimeout(() => {
+              store.dispatch('copyWidget')
+            }, 100)
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
             store.commit('setShowMoveable', false) // 清理掉上一次的选择
-            const setting = JSON.parse(JSON.stringify(wText.setting))
+            const setting = JSON.parse(JSON.stringify(wTextSetting))
             setting.text = await navigator.clipboard.readText()
             store.dispatch('addWidget', setting)
             break

src/store/modules/base/index.ts

@@ -38,6 +38,9 @@ const all = {
     fonts: (state: Type.Object) => {
       return state.fonts
     },
+    app: (state: Type.Object) => {
+      return state.app
+    }
   },
   mutations: {
     ...mutations,

src/store/modules/base/mutations.ts

@@ -38,5 +38,5 @@ export default {
   },
   managerEdit(state: Type.Object, status: string) {
     state.tempEditing = status
-  },
+  }
 }

src/store/modules/design/actions.ts

@@ -291,6 +291,7 @@ export default {
     }
 
     store.dispatch('pushHistory', 'pasteWidget')
+    store.dispatch('copyWidget')
     store.dispatch('reChangeCanvas')
   },
   // TODO: 选中元件与取消选中

src/utils/plugins/eventBus.ts

@@ -0,0 +1,9 @@
+import mitt from 'mitt';
+
+type Events = {
+  refreshUserImages: any;
+};
+
+const emitter = mitt<Events>();
+
+export default emitter;

src/views/Draw.vue

@@ -12,7 +12,7 @@
 import { StyleValue, onMounted, reactive, nextTick } from 'vue'
 import { useStore } from 'vuex'
 import api from '@/api'
-import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
+// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
 import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'

src/views/Index.vue

@@ -67,7 +67,7 @@ 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 wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import HeaderOptions from './components/HeaderOptions.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'

src/views/components/HeaderOptions.vue

@@ -37,7 +37,7 @@ import { useFontStore } from '@/common/methods/fonts'
 import copyRight from './CopyRight.vue'
 import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
-import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
+// import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
 type TProps = {