更新UI布局

src/types/components.d.ts

@@ -13,13 +13,11 @@ declare module 'vue' {
     ColorPicker: typeof import('./../components/ColorPicker/index.vue')['default']
     Contextmenu: typeof import('./../components/Contextmenu/index.vue')['default']
     EditableInput: typeof import('./../components/ColorPicker/EditableInput.vue')['default']
-    ElAffix: typeof import('element-plus/es')['ElAffix']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']

src/views/Editor/CanvasContent/CanvasLeft/Label/index.vue → src/views/Editor/CanvasBody/CanvasLeft/Label/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="left-top-tabs" id="left-top-tabs">
+    <!-- <div class="left-top-tabs" id="left-top-tabs">
       <div class="top-tab">
         <el-tooltip placement="top" :hide-after="0" content="首页">
           <IconHome class="handler-item" @click="goHome"/>
         </el-tooltip>
       </div>
-    </div>
+    </div> -->
     <div class="left-bottom-tabs">
       <div class="center-tabs">
         <div class="center-tab" :class="{ 'left-active': tab.key === poolType }" v-for="tab in topTabs" :key="tab.key" @click="setPoolType(tab.key)">

src/views/Editor/CanvasCenter/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div 
+    ref="wrapperRef" 
+    @mousedown="addDrawAreaFocus"
+    v-contextmenu="contextMenus" 
+    v-click-outside="remDrawAreaFocus"
+    class="h-full w-full"
+  >
+    <canvas ref="canvasRef" class="background-grid"></canvas>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { onMounted, onUnmounted } from 'vue'
+import { useFabricStore, useMainStore, useTemplatesStore } from '@/store'
+import { useRouter } from 'vue-router'
+import { unzip } from "@/utils/crypto"
+import { getTemplateData } from '@/api/template'
+import { contextMenus } from '@/configs/contextMenu'
+import { initEditor } from '@/views/Canvas/useCanvas'
+import { initPixi } from '@/views/Canvas/usePixi'
+import { ElMessage, ElLoading } from 'element-plus'
+import useCanvasHotkey from '@/hooks/useCanvasHotkey'
+const fabricStore = useFabricStore()
+const mainStore = useMainStore()
+const router = useRouter()
+const templatesStore = useTemplatesStore()
+const { wrapperRef, canvasRef } = storeToRefs(fabricStore)
+const { drawAreaFocus } = storeToRefs(mainStore)
+const { keydownListener, keyupListener, pasteListener } = useCanvasHotkey()
+
+
+const addDrawAreaFocus = () => {
+  if (!drawAreaFocus.value) mainStore.setDrawAreaFocus(true)
+}
+
+const remDrawAreaFocus = () => {
+  if (drawAreaFocus.value) mainStore.setDrawAreaFocus(false)
+}
+
+const getTemplateDetail = async (pk: string) => {
+  const result = await getTemplateData(pk)
+  if (result.data && result.data.code === 200 && result.data.data) {
+    try {
+      router.push(`${router.currentRoute.value.path}?template=${pk}`)
+      console.log('result.data.data.id:', result.data.data.id)
+      const data = unzip(result.data.data.data)
+      await templatesStore.changeTemplate(data)
+    } 
+    catch (error) {
+      ElMessage({
+        type: 'error',
+        message: '模板加载失败,请联系管理员修改bug了',
+      })
+    }
+  }
+}
+
+const initRouter = async (templateId?: string) => {
+  if (templateId) {
+    templatesStore.setTemplateId(templateId)
+    const loadingInstance = ElLoading.service({ fullscreen: true, background: 'rgba(122, 122, 122, 0.5)' })
+    await getTemplateDetail(templateId)
+    nextTick(() => loadingInstance.close())
+  }
+}
+
+onMounted(async () => {
+  const query = router.currentRoute.value.query
+  initRouter(query.template)
+  initEditor(query.template)
+  initPixi()
+  document.addEventListener('keydown', keydownListener)
+  document.addEventListener('keyup', keyupListener)
+  window.addEventListener('blur', keyupListener)
+  window.addEventListener('paste', pasteListener as any)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', keydownListener)
+  document.removeEventListener('keyup', keyupListener)
+  window.removeEventListener('blur', keyupListener)
+  window.removeEventListener('paste', pasteListener as any)
+})
+
+</script>
+
+<style lang="scss" scoped>
+.background-grid {
+  --offsetX: 0px;
+  --offsetY: 0px;
+  --size: 8px;
+  --color: #dedcdc;
+  background-image: 
+    linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0), 
+    linear-gradient(45deg, var(--color) 25%, transparent 0, transparent 75%, var(--color) 0);
+  background-position: var(--offsetX) var(--offsetY), calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY));
+  background-size: calc(var(--size) * 2) calc(var(--size) * 2);
+}
+</style>@/views/Canvas/usePixi