feat: convert draw container to composition API

package.json

@@ -39,6 +39,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/fontfaceobserver": "^2.1.3",
     "@types/node": "^20.11.24",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",

src/views/Draw.vue

@@ -8,9 +8,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, toRefs } from 'vue'
+import { StyleValue, onMounted, reactive, nextTick } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { useStore } from 'vuex'
 import api from '@/api'
 import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
@@ -18,57 +18,66 @@ import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useRoute } from 'vue-router'
+
+type TState = {
+  style: StyleValue
+}
 
-export default defineComponent({
-  components: { designBoard, zoomControl },
 // mixins: [shortcuts],
-  setup() {
+const store = useStore()
-    const state = reactive({
+const route = useRoute()
+const state = reactive<TState>({
   style: {
     left: '0px',
   },
 })
+const { dPage } = useSetupMapGetters(['dPage'])
 
-    return {
+onMounted(() => {
-      ...toRefs(state),
+  store.dispatch('initGroupJson', JSON.stringify(wGroup.setting))
-    }
+  // initGroupJson(JSON.stringify(wGroup.setting))
-  },
+  nextTick(() => {
-  computed: {
+    load()
-    ...mapGetters(['dPage']),
+  })
-  },
-  mounted() {
-    this.initGroupJson(JSON.stringify(wGroup.setting))
-    this.$nextTick(() => {
-      this.load()
 })
-  },
-  methods: {
-    ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
-    async load() {
-      let loadFlag = false
-      const { id, tempid, tempType: type } = this.$route.query
-      if (id || tempid) {
-        const { data, width, height } = await api.home[id ? 'getWorks' : 'getTempDetail']({ id: id || tempid, type })
-        const content = JSON.parse(data)
-        const widgets = type == 1 ? content : content.widgets
 
-        if (type == 1) {
+// ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
-          this.dPage.width = width
+async function load() {
-          this.dPage.height = height
+  let loadFlag = false
-          this.dPage.backgroundColor = '#ffffff00'
+  const { id, tempid, tempType: type  } = route.query 
-          this.addGroup(content)
+  if (id || tempid) {
+    const postData = {
+      id: Number(id || tempid),
+      type: Number(type)
+    }
+    const { data, width, height } = await api.home[id ? 'getWorks' : 'getTempDetail'](postData)
+    const content = JSON.parse(data)
+    const widgets = Number(type) == 1 ? content : content.widgets
+
+    if (Number(type) == 1) {
+      dPage.value.width = width
+      dPage.value.height = height
+      dPage.value.backgroundColor = '#ffffff00'
+      store.dispatch('addGroup', content)
+      // addGroup(content)
     } else {
-          this.$store.commit('setDPage', content.page)
+      store.commit('setDPage', content.page)
-          id ? this.$store.commit('setDWidgets', widgets) : this.setTemplate(widgets)
+      if (id) {
+        store.commit('setDWidgets', widgets)
+      } else {
+        store.dispatch('setTemplate', widgets)
+      }
     }
 
-        await this.$nextTick()
+    await nextTick()
 
-        const imgsData: any = []
+    const imgsData: HTMLImageElement[] = []
-        const svgsData: any = []
+    const svgsData: HTMLImageElement[] = []
-        const fontLoaders: any = []
+    const fontLoaders: Promise<void>[] = []
-        const fontContent: any = {}
+    const fontContent: Record<string, string> = {}
-        let fontData: any = []
+    let fontData: string[] = []
     widgets.forEach((item: any) => {
       if (item.fontClass && item.fontClass.value) {
         const loader = new FontFaceObserver(item.fontClass.value)
@@ -131,9 +140,7 @@ export default defineComponent({
   setTimeout(() => {
     !loadFlag && (window as any).loadFinishToInject('done')
   }, 60000)
-    },
+}
-  },
-})
 </script>
 
 <style lang="less" scoped>