feat: plugin flexible layout

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="CanvasLayout">
+  <component :is="CanvasLayout" :class="{ 'not-selected': getMoveDragBarState() }">
     <template #header>
       <component v-if="!isBlock()" :is="CanvasRouteBar"></component>
     </template>
@@ -67,6 +67,8 @@ export default {
     const { canvasSrc = '' } = getOptions(meta.id) || {}
     const canvasSrcDoc = ref('')
 
+    const { getMoveDragBarState } = useLayout()
+
     useMessage().subscribe({
       topic: 'init_canvas_deps',
       subscriber: 'canvas_design_canvas',
@@ -275,6 +277,7 @@ export default {
         useNotify
       },
       isBlock,
+      getMoveDragBarState,
       CanvasLayout,
       canvasRef,
       CanvasContainer,
@@ -284,3 +287,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
+</style>

packages/common/component/PluginPanel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="plugin-panel">
-    <div class="plugin-panel-header">
+  <div class="plugin-panel" ref="panel" :style="{ width: panelWidth + 'px' }">
+    <div class="plugin-panel-header" :style="{ marginBottom: headerMarginBottom + 'px' }">
       <div class="plugin-panel-title">
         <span class="title"
           >{{ title }}<link-button class="link" v-if="isShowDocsIcon" :href="docsUrl"></link-button
@@ -9,22 +9,49 @@
       </div>
       <div class="plugin-panel-icon">
         <slot name="header"></slot>
+        <tiny-tooltip
+          v-if="isShowCollapseIcon"
+          effect="light"
+          :content="isCollapsed ? '展开' : '折叠'"
+          placement="top"
+          :visible-arrow="false"
+        >
+          <template #default>
+            <svg-button :name="settingIcon" @click="clickCollapseIcon"></svg-button>
+          </template>
+        </tiny-tooltip>
+        <svg-button
+          class="item icon-sidebar"
+          :name="fixedPanels?.includes(fixedName) ? 'fixed-solid' : 'fixed'"
+          :tips="!fixedPanels?.includes(fixedName) ? '固定面板' : '解除固定面板'"
+          @click="fixPanel"
+        ></svg-button>
         <close-icon v-if="!isCloseLeft" :name="name" @close="closePanel"></close-icon>
       </div>
     </div>
-    <slot name="content"></slot>
+    <div class="scroll-content">
+      <slot name="content"></slot>
+    </div>
+
+    <div class="resizer-right" v-if="isLeftResizer" @mousedown="onMouseDownRight"></div>
+    <div class="resizer-left" v-if="isRightResizer" @mousedown="onMouseDownLeft"></div>
   </div>
 </template>
 
 <script>
+import { inject, ref, computed, onMounted, provide } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
+import { SvgButton } from '@opentiny/tiny-engine-common'
 import LinkButton from './LinkButton.vue'
 import CloseIcon from './CloseIcon.vue'
+import { Tooltip } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyTooltip: Tooltip,
     LinkButton,
-    CloseIcon
+    CloseIcon,
+    SvgButton
   },
   props: {
     /**
@@ -52,18 +79,166 @@
     isShowDocsIcon: {
       type: Boolean,
       default: false
+    },
+    /**
+     * 固定面板插件数组
+     */
+    fixedPanels: {
+      type: Array
+    },
+    /**
+     * 固定面板标识
+     */
+    fixedName: {
+      type: String
+    },
+    /**
+     * 自定义标题下边距
+     */
+    headerMarginBottom: {
+      type: Number,
+      default: 12
+    },
+    /**
+     * 是否展示折叠按钮
+     */
+    isShowCollapseIcon: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['close'],
+  emits: ['close', 'updateCollapseStatus'],
   setup(props, { emit }) {
     const closePanel = () => {
       useLayout().closePlugin()
 
       emit('close')
     }
 
+    const MIN_WIDTH = 300 // 固定的最小宽度值
+    const MAX_WIDTH = 1000 // 固定的最大宽度值
+    const panel = ref(null)
+    let startX = 0
+    let startWidth = 0
+
+    const isCollapsed = ref(false)
+    const settingIcon = computed(() => (isCollapsed.value ? 'collapse_all' : 'expand_all'))
+
+    provide('isCollapsed', isCollapsed)
+
+    const panelState = inject('panelState')
+    const fixPanel = () => {
+      panelState.emitEvent('fixPanel', props.fixedName)
+    }
+
+    const { getPluginWidth, changePluginWidth, getPluginByLayout, changeMoveDragBarState } = useLayout()
+
+    const align = ref(getPluginByLayout(props.fixedName)) // 滚动条位置
+    const panelWidth = ref(getPluginWidth(props.fixedName)) // 面板使用默认宽度
+    const isLeftResizer = ref(align.value.includes('left'))
+    const isRightResizer = ref(align.value.includes('right'))
+
+    const onMouseMoveRight = (event) => {
+      const newWidth = startWidth + (event.clientX - startX)
+      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+      changePluginWidth(props.fixedName, panelWidth.value)
+    }
+
+    const onMouseMoveLeft = (event) => {
+      const newWidth = startWidth - (event.clientX - startX)
+      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+      changePluginWidth(props.fixedName, panelWidth.value)
+    }
+
+    //节流
+    function throttle(func, limit) {
+      let lastFunc
+      let lastRan
+      return function (...args) {
+        const context = this
+        if (!lastRan) {
+          func.apply(context, args)
+          lastRan = Date.now()
+        } else {
+          clearTimeout(lastFunc)
+          lastFunc = setTimeout(function () {
+            if (Date.now() - lastRan >= limit) {
+              func.apply(context, args)
+              lastRan = Date.now()
+            }
+          }, limit - (Date.now() - lastRan))
+        }
+      }
+    }
+
+    const throttledMouseMoveRight = throttle(onMouseMoveRight, 50)
+    const throttledMouseMoveLeft = throttle(onMouseMoveLeft, 50)
+
+    const leftResizer = ref(null)
+    const rightResizer = ref(null)
+
+    const onMouseUpRight = () => {
+      changeMoveDragBarState(false)
+      document.removeEventListener('mousemove', throttledMouseMoveRight)
+      document.removeEventListener('mouseup', onMouseUpRight)
+      rightResizer.value.style.cursor = ''
+      rightResizer.value.classList.remove('dragging')
+    }
+
+    const onMouseDownRight = (event) => {
+      changeMoveDragBarState(true)
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveRight)
+      document.addEventListener('mouseup', onMouseUpRight)
+      rightResizer.value.style.cursor = 'ew-resize'
+      rightResizer.value.classList.add('dragging')
+    }
+
+    const onMouseUpLeft = () => {
+      changeMoveDragBarState(false)
+      document.removeEventListener('mousemove', throttledMouseMoveLeft)
+      document.removeEventListener('mouseup', onMouseUpLeft)
+      leftResizer.value.style.cursor = ''
+      leftResizer.value.classList.remove('dragging')
+    }
+
+    const onMouseDownLeft = (event) => {
+      changeMoveDragBarState(true)
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveLeft)
+      document.addEventListener('mouseup', onMouseUpLeft)
+      leftResizer.value.style.cursor = 'ew-resize'
+      leftResizer.value.classList.add('dragging')
+    }
+
+    const initResizerDOM = () => {
+      leftResizer.value = document.querySelector('.resizer-left')
+      rightResizer.value = document.querySelector('.resizer-right')
+    }
+
+    const clickCollapseIcon = () => {
+      isCollapsed.value = !isCollapsed.value
+      emit('updateCollapseStatus', isCollapsed.value)
+    }
+
+    onMounted(() => {
+      initResizerDOM()
+    })
+
     return {
-      closePanel
+      clickCollapseIcon,
+      isCollapsed,
+      settingIcon,
+      closePanel,
+      fixPanel,
+      panel,
+      panelWidth,
+      onMouseDownRight,
+      onMouseDownLeft,
+      isLeftResizer,
+      isRightResizer
     }
   }
 }
@@ -83,17 +258,22 @@
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
+    border-bottom: 1px solid var(--te-common-border-divider);
+    margin-bottom: 12px;
     font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
       'Helvetica Neue', sans-serif;
     padding: 12px;
     color: var(--te-component-common-text-color-primary);
     font-weight: var(--te-base-font-weight-7);
+
     .plugin-panel-title {
       display: flex;
       align-items: center;
+
       .title + .icon-wrap {
         margin-left: 10px;
       }
+
       .title {
         display: flex;
         align-items: center;
@@ -109,10 +289,61 @@
       :deep(.svg-button + .svg-button) {
         margin-left: 4px;
       }
+
       :deep(.svg-button + .icon-wrap) {
         margin-left: 4px;
       }
     }
   }
 }
+
+// 右边拖拽线
+.resizer-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  cursor: ew-resize;
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: width 0.3s ease;
+}
+
+.dragging {
+  width: 8px !important;
+  background-color: var(--te-base-blue-40) !important;
+}
+
+.resizer-right:hover {
+  width: 8px;
+  background-color: var(--te-base-blue-40);
+}
+
+// 左边拖拽线
+.resizer-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  cursor: ew-resize;
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: width 0.3s ease;
+}
+
+.resizer-left:hover {
+  width: 8px;
+  background-color: var(--te-base-blue-40);
+}
+
+.scroll-content {
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scroll-content::-webkit-scrollbar {
+  display: none;
+}
 </style>