refactor：插件面板优化功能

packages/canvas/src/components/container/CanvasFooter.vue

@@ -31,7 +31,7 @@ export default {
   bottom: 0;
   position: absolute;
   background-color: var(--ti-lowcode-breadcrumb-bg);
-  z-index: 90;
+  z-index: 3;
   border-top: 1px solid var(--ti-lowcode-canvas-footer-border-top-color);
   .content {
     .tip {

packages/common/component/PluginPanel.vue

@@ -1,26 +1,40 @@
 <template>
-  <div class="plugin-panel">
+  <div class="plugin-panel" ref="panel" :style="{ width: panelWidth + 'px' }">
     <div class="plugin-panel-header">
       <div class="plugin-panel-title">
         <span class="title">{{ title }}</span>
         <close-icon v-if="isCloseLeft" :name="name" @close="closePanel"></close-icon>
       </div>
       <div class="plugin-panel-icon">
         <slot name="header"></slot>
+        <svg-button
+          class="item icon-sidebar"
+          :class="[fixedPanels?.includes(fixedName) && 'active']"
+          name="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" @mousedown="onMouseDownRight"></div>
+    <div class="resizer-left" @mousedown="onMouseDownLeft"></div>
   </div>
 </template>
 
 <script>
+import { inject, ref, watch } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-controller'
 import CloseIcon from './CloseIcon.vue'
-
+import SvgButton from './SvgButton.vue'
 export default {
   components: {
-    CloseIcon
+    CloseIcon,
+    SvgButton
   },
   props: {
     /**
@@ -40,31 +54,123 @@ export default {
     name: {
       type: String,
       default: 'cross'
+    },
+    /**
+     * 固定面板插件数组
+     */
+    fixedPanels: {
+      type: Array
+    },
+    /**
+     * 固定面板标识
+     */
+    fixedName: {
+      type: String
     }
   },
   emits: ['close'],
   setup(props, { emit }) {
+    const { pluginWidth } = useLayout()
+    const panelState = inject('panelState')
     const closePanel = () => {
       useLayout().closePlugin()
-
       emit('close')
     }
 
+    //节流
+    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 fixPanel = () => {
+      panelState.emitEvent('fixPanel', props.fixedName)
+    }
+    const MIN_WIDTH = 300 // 固定的最小宽度值
+    const MAX_WIDTH = 1000 // 固定的最大宽度值
+    const panel = ref(null)
+    const panelWidth = ref(pluginWidth[props.fixedName]) // 使用默认宽度
+    watch(pluginWidth, (newWidth) => {
+      panelWidth.value = newWidth[props.fixedName]
+    })
+    let startX = 0
+    let startWidth = 0
+
+    const onMouseMoveRight = (event) => {
+      const newWidth = startWidth + (event.clientX - startX)
+      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+      pluginWidth[props.fixedName] = panelWidth.value
+    }
+
+    const onMouseMoveLeft = (event) => {
+      const newWidth = startWidth - (event.clientX - startX)
+      panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
+      pluginWidth[props.fixedName] = panelWidth.value
+    }
+
+    const throttledMouseMoveRight = throttle(onMouseMoveRight, 50)
+    const throttledMouseMoveLeft = throttle(onMouseMoveLeft, 50)
+
+    const onMouseUpRight = () => {
+      document.removeEventListener('mousemove', throttledMouseMoveRight)
+      document.removeEventListener('mouseup', onMouseUpRight)
+    }
+
+    const onMouseUpLeft = () => {
+      document.removeEventListener('mousemove', throttledMouseMoveLeft)
+      document.removeEventListener('mouseup', onMouseUpLeft)
+    }
+
+    const onMouseDownRight = (event) => {
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveRight)
+      document.addEventListener('mouseup', onMouseUpRight)
+    }
+
+    const onMouseDownLeft = (event) => {
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveLeft)
+      document.addEventListener('mouseup', onMouseUpLeft)
+    }
+
     return {
-      closePanel
+      closePanel,
+      fixPanel,
+      panel,
+      panelWidth,
+      onMouseDownRight,
+      onMouseDownLeft,
+      pluginWidth
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .plugin-panel {
-  width: 100%;
   height: 100%;
   background: var(--ti-lowcode-plugin-panel-bg, --ti-lowcode-toolbar-bg);
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
 
   .plugin-panel-header {
     display: flex;
@@ -99,4 +205,44 @@ export default {
     }
   }
 }
+// 右边拖拽线
+.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;
+}
+.resizer-right:hover {
+  width: 8px;
+  background-color: var(--ti-base-color-brand-7);
+}
+// 左边拖拽线
+.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(--ti-base-color-brand-7);
+}
+.scroll-content {
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scroll-content::-webkit-scrollbar {
+  display: none;
+}
 </style>

packages/common/component/PluginSetting.vue

@@ -125,8 +125,8 @@ export default {
 <style lang="less" scoped>
 .plugin-setting {
   position: absolute;
-  left: calc(var(--base-left-panel-width) - 6px);
   top: 0;
+  z-index: 10;
   width: var(--base-collection-panel-width);
   height: 100%;
   border-right: 1px solid var(--ti-lowcode-toolbar-border-color);

packages/controller/src/useLayout.js

@@ -23,9 +23,36 @@ const PLUGIN_NAME = {
   Lock: 'Lock',
   Tutorial: 'Tutorial',
   OutlineTree: 'OutlineTree',
-  save: 'save'
+  save: 'save',
+  Page: 'AppManage',
+  Block: 'BlockManage',
+  Datasource: 'Collections',
+  Bridge: 'Bridge',
+  I18n: 'I18n',
+  Script: 'PageController',
+  Data: 'DataSource',
+  Schema: 'Schema'
 }
-
+const SETTING_NAME = {
+  Event: 'event',
+  Style: 'style',
+  Props: 'props'
+}
+const pluginWidth = reactive({
+  Materials: '300',
+  OutlineTree: '300',
+  AppManage: '300',
+  BlockManage: '300',
+  Collections: '300',
+  Bridge: '300',
+  I18n: '620',
+  PageController: '1000',
+  DataSource: '300',
+  Schema: '1000',
+  props: '320',
+  style: '320',
+  event: '320'
+})
 const pluginState = reactive({
   pluginEvent: 'all'
 })
@@ -47,7 +74,8 @@ const layoutState = reactive({
     api: {} // 插件需要注册交互API到这里
   },
   settings: {
-    render: 'props',
+    fixedPanels: [],
+    render: null,
     api: null,
     activating: false, // 右侧面版激活提示状态
     showDesignSettings: true
@@ -77,6 +105,13 @@ const activeSetting = (name) => {
     }, 1000)
   })
 }
+// 关闭右侧setting插件面板
+const closeSetting = (forceClose) => {
+  const { settings } = layoutState
+  if (forceClose) {
+    settings.render = null
+  }
+}
 
 // 获取当前插件注册的Api
 const getPluginApi = (pluginName) => {
@@ -98,7 +133,7 @@ const activePlugin = (name, noActiveRender) => {
   })
 }
 
-// 关闭插件面板
+// 关闭左侧plugin插件面板
 const closePlugin = (forceClose) => {
   const { plugins } = layoutState
   if (!plugins.fixedPanels.includes(plugins.render) || forceClose) {
@@ -119,9 +154,11 @@ const isEmptyPage = () => layoutState.pageStatus?.state === PAGE_STATUS.Empty
 export default () => {
   return {
     PLUGIN_NAME,
+    SETTING_NAME,
     activeSetting,
     activePlugin,
     closePlugin,
+    closeSetting,
     layoutState,
     getScale,
     setDimension,
@@ -130,6 +167,7 @@ export default () => {
     getPluginApi,
     getPluginState,
     pluginState,
-    isEmptyPage
+    isEmptyPage,
+    pluginWidth
   }
 }