更新上传文件

src/components/FileUpload/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="导入文件" width="35%" class="upload-dialog" :before-close="closeUpload">
+    <el-upload class="upload-demo" drag action="http" :http-request="uploadHandle" :limit="1" accept=".pdf, .psd, .cdr, .svg, .jpg, .jpeg, .png">
+      <el-icon :size="50">
+        <UploadFilled />
+      </el-icon>
+      <div class="el-upload__text">
+        拖拽文件到这里 或者 <em>选择文件上传</em>
+      </div>
+      <template #tip>
+        <div class="el-upload__tip">
+          支持 PSD / PDF / SVG / CDR 以及 图片 等格式
+        </div>
+      </template>
+    </el-upload>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { UploadFilled } from '@element-plus/icons-vue'
+import { storeToRefs } from 'pinia'
+import { uploadFile } from '@/api/file'
+const dialogVisible = ref(false)
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+watch(() => props.visible, (val) => {
+  dialogVisible.value = val
+})
+
+const closeUpload = () => {
+  emit('close')
+}
+
+const uploadHandle = async (option: any) => {
+  await uploadFile(option.file, 'pdf')
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+<style>
+.upload-dialog .el-dialog__header {
+  text-align: left
+}
+.upload-dialog .el-upload__tip {
+  text-align: left;
+}
+</style>

src/plugins/component.ts

@@ -1,23 +1,21 @@
 import { App } from 'vue'
 
 import FileInput from '@/components/FileInput.vue'
-// import CheckboxButton from '@/components/CheckboxButton.vue'
-// import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import ColorButton from '@/components/ColorButton.vue'
 import TextColorButton from '@/components/TextColorButton.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import SwipeInput from '@/components/SwipeInput.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
 
 const components = {
   FileInput,
   ColorButton,
   TextColorButton,
-  // CheckboxButton,
-  // CheckboxButtonGroup,
   ColorPicker,
   FullscreenSpin,
   SwipeInput,
+  FileUpload,
 }
 
 export default {

src/plugins/icon.ts

@@ -155,7 +155,10 @@ import {
   ExcludeSelection,
   SubtractSelection,
   SubtractSelectionOne,
-  AllApplication
+  AllApplication,
+  Home,
+  Newlybuild,
+  DividingLine
 } from '@icon-park/vue-next'
 
 export const icons = {
@@ -312,7 +315,10 @@ export const icons = {
   IconExcludeSelection: ExcludeSelection,
   IconSubtractSelection: SubtractSelection,
   IconSubtractSelectionOne: SubtractSelectionOne,
-  IconAllApplication: AllApplication
+  IconAllApplication: AllApplication,
+  IconHome: Home,
+  IconNewlybuild: Newlybuild,
+  IconDividingLine: DividingLine
 }
 
 export default {

src/store/modules/main.ts

@@ -32,6 +32,8 @@ export interface MainState {
   systemFonts: SystemFont[]
   disableHotkeys: boolean
   exportType: ExportTypes
+  lastHelp: PoolType
+  lastEdit: PoolType
   poolType: PoolType
   poolShow: boolean
   rulerShow: boolean
@@ -64,6 +66,8 @@ export const useMainStore = defineStore('main', {
     systemFonts: SYS_FONTS, // 系统字体
     disableHotkeys: false, // 禁用快捷键
     exportType: 'image', // 导出面板
+    lastEdit: 'editor', // 左边栏
+    lastHelp: 'editor', // 左边栏
     poolType: 'editor', // 左边栏
     poolShow: false, // 显示左边栏
     rulerShow: true,
@@ -126,6 +130,8 @@ export const useMainStore = defineStore('main', {
     //   this.canvasDragged = isDragged
     // },
     setPoolType(poolType: PoolType) {
+      if (poolType === 'help') this.lastHelp = this.poolType
+      if (poolType === 'editor') this.lastEdit = this.poolType
       this.poolType = poolType
     },
 

src/views/Editor/CanvasLeft/components/HomePopover.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <el-popover 
+      placement="right" 
+      width="200" 
+      trigger="click" 
+      popper-class="home-pop" 
+      @before-enter="setHome(true)" 
+      @hide="setHome(false)" 
+      :ref="props.menuPopoverRef" 
+      :virtual-ref="props.menuRef"
+      virtual-triggering
+    >
+      <!-- <el-row class="pop-row">
+        <IconHome class="pop-icon"/>
+        <span class="pop-text">返回首页</span>
+      </el-row>
+      <el-row class="pop-row">
+        <IconEdit class="pop-icon"/>
+        <span class="pop-text">未命名</span>
+      </el-row> -->
+      <el-row class="pop-row">
+        <IconNewlybuild class="pop-icon"/>
+        <span class="pop-text">创建设计</span>
+      </el-row>
+      <el-row class="pop-row" @click="openUpload">
+        <IconUpload class="pop-icon"/>
+        <span class="pop-text">导入文件</span>
+      </el-row>
+      <el-row class="pop-row">
+        <IconDividingLine class="pop-icon"/>
+        <span class="pop-text">参考线</span>
+      </el-row>
+    </el-popover>
+    <FileUpload :visible="dialogVisible" @close="closeUpload"/>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+const hasHelp = ref(false)
+const popoverVisible = ref(false)
+const dialogVisible = ref(false)
+const props = defineProps({
+  menuRef: {
+    type: null,
+  },
+  menuPopoverRef: {
+    type: null
+  },
+  menuVisibleRef: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+
+const setHome = (val: boolean) => {
+  hasHelp.value = val
+}
+
+const openUpload = () => {
+  dialogVisible.value = true
+}
+
+const closeUpload = () => {
+  dialogVisible.value = false
+}
+
+</script>
+<style lang="scss" scoped>
+.home-pop {
+  margin: 10px;
+  padding: 0;
+}
+.pop-row {
+  margin: 0 10px;
+  font-size: 15px;
+  padding: 10px 25px;
+  cursor: pointer;
+  .pop-icon {
+    font-size: 20px;
+  }
+
+  .pop-text {
+    padding-left: 10px;
+  } 
+}
+.pop-row:hover {
+  border-radius: $borderRadius;
+  background-color: $hoverColor;
+}
+</style>

src/views/Editor/CanvasLeft/index.vue

@@ -2,7 +2,8 @@
   <div>
     <div class="left-top-tabs">
       <div class="top-tab">
-        <IconAllApplication class="handler-item"/>
+        <IconAllApplication class="handler-item" ref="menuRef"/>
+        <HomePopover :menu-ref="menuRef" :menu-popover-ref="menuPopoverRef"/>
       </div>
     </div>
     <div class="left-bottom-tabs">
@@ -50,13 +51,16 @@ import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import HotkeyDrawer from './components/HotkeyDrawer.vue'
 import HelpPopover from './components/HelpPopover.vue'
+import HomePopover from './components/HomePopover.vue'
 
 const mainStore = useMainStore()
 
 const { poolType, poolShow } = storeToRefs(mainStore)
 
 const helpRef = ref()
+const menuRef = ref()
 const helpPopoverRef = ref()
+const menuPopoverRef = ref()
 const hasHotkey = ref(false)
 
 interface TabItem {
@@ -164,7 +168,8 @@ const setPoolType = (tab: PoolType) => {
 .left-close {
   cursor: default;
   left: -320px;
-  position: relative;;
+  position: relative;
+  top: 50%;
   // z-index: 1;
 }
 .layout-toggle {

src/views/Editor/CanvasMenu/components/CodePool.vue

@@ -51,7 +51,6 @@ import {
   rendererDSJ,
   rendererRandRect,
   rendererImage,
-  rendererResImage,
   rendererCircle,
   rendererLine,
   rendererLine2,

src/views/Editor/CanvasMenu/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="menu-content" :class="{ 'menu-close': poolShow !== true }">
       <component :is="currentComponent" class="menu-pool"></component>
-      <div class="layout-toggle" @click="leftToggle" v-show="poolType !== 'editor'">
+      <div class="layout-toggle" @click="leftToggle" v-show="currentComponent">
         <IconLeft  class="toggle-icon" v-if="poolShow"/>
         <IconRight class="toggle-icon" v-else/>
       </div>
@@ -23,24 +23,30 @@ import LayerPool from './components/LayerPool.vue'
 import CodePool from './components/CodePool.vue'
 
 const mainStore = useMainStore()
+const { lastHelp, lastEdit, poolType, poolShow } = storeToRefs(mainStore)
 
-const { poolType, poolShow } = storeToRefs(mainStore)
-
+const leftMap = {
+  'editor': null,
+  'template': TemplatePool,
+  'material': MaterialPool,
+  'text': TextboxPool,
+  'image': ImagePool,
+  'illustration': ImagePool,
+  'code': CodePool,
+  'toolkit': ToolkitPool,
+  'layer': LayerPool,
+  'help': null,
+}
 const currentComponent = computed(() => {
-  const leftMap = {
-    'template': TemplatePool,
-    'material': MaterialPool,
-    'text': TextboxPool,
-    'image': ImagePool,
-    'code': CodePool,
-    'toolkit': ToolkitPool,
-    'layer': LayerPool,
-  }
+  if (poolType.value === 'help') return leftMap[lastHelp.value]
+  if (poolType.value === 'editor') return leftMap[lastEdit.value]
   return leftMap[poolType.value] || null
 })
 
+
+
 const leftToggle = () => {
-  if (poolType.value === 'editor' && !poolShow.value) return
+  // if (poolType.value === 'editor' && !poolShow.value) return
   poolShow.value = !poolShow.value
 }
 
@@ -69,6 +75,8 @@ const leftToggle = () => {
 .menu-close {
   cursor: default;
   left: -251px;
+  top: 50%;
+  transform: translateY(-50%);
   position: absolute;;
   // z-index: 1;
 }