From 2af320d6462aa749d0449166603ae9473e399254 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 10 Feb 2025 00:25:19 -0800
Subject: [PATCH 01/25] feat: panel drag and drop capability implementation

---
 packages/common/component/PluginPanel.vue   | 154 +++++++++++++++-
 packages/design-core/config/addons.js       |  33 ++++
 packages/design-core/config/plugin.js       |  13 ++
 packages/design-core/index.js               |   2 +
 packages/layout/src/Main.vue                |  32 ++++
 packages/layout/src/composable/useLayout.js | 190 +++++++++++++++++++-
 6 files changed, 419 insertions(+), 5 deletions(-)
 create mode 100644 packages/design-core/config/addons.js
 create mode 100644 packages/design-core/config/plugin.js

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index 35da8bfbf6..d5a2996c15 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -1,5 +1,5 @@
 <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"
@@ -12,11 +12,17 @@
         <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 } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 import LinkButton from './LinkButton.vue'
 import CloseIcon from './CloseIcon.vue'
@@ -52,6 +58,18 @@ export default {
     isShowDocsIcon: {
       type: Boolean,
       default: false
+    },
+    /**
+     * 固定面板插件数组
+     */
+    fixedPanels: {
+      type: Array
+    },
+    /**
+     * 固定面板标识
+     */
+    fixedName: {
+      type: String
     }
   },
   emits: ['close'],
@@ -62,8 +80,97 @@ export default {
       emit('close')
     }
 
+    const MIN_WIDTH = 300 // 固定的最小宽度值
+    const MAX_WIDTH = 1000 // 固定的最大宽度值
+    const panel = ref(null)
+    let startX = 0
+    let startWidth = 0
+
+    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 onMouseUpRight = () => {
+      changeMoveDragBarState(false)
+      document.removeEventListener('mousemove', throttledMouseMoveRight)
+      document.removeEventListener('mouseup', onMouseUpRight)
+    }
+
+    const onMouseUpLeft = () => {
+      changeMoveDragBarState(false)
+      document.removeEventListener('mousemove', throttledMouseMoveLeft)
+      document.removeEventListener('mouseup', onMouseUpLeft)
+    }
+
+    const onMouseDownRight = (event) => {
+      changeMoveDragBarState(true)
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveRight)
+      document.addEventListener('mouseup', onMouseUpRight)
+    }
+
+    const onMouseDownLeft = (event) => {
+      changeMoveDragBarState(true)
+      startX = event.clientX
+      startWidth = panel.value.offsetWidth
+      document.addEventListener('mousemove', throttledMouseMoveLeft)
+      document.addEventListener('mouseup', onMouseUpLeft)
+    }
+
     return {
-      closePanel
+      closePanel,
+      fixPanel,
+      panel,
+      panelWidth,
+      onMouseDownRight,
+      onMouseDownLeft,
+      isLeftResizer,
+      isRightResizer
     }
   }
 }
@@ -115,4 +222,45 @@ 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-lowcode-style-setting-label-bg);
+}
+// 左边拖拽线
+.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-lowcode-style-setting-label-bg);
+}
+.scroll-content {
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scroll-content::-webkit-scrollbar {
+  display: none;
+}
 </style>
diff --git a/packages/design-core/config/addons.js b/packages/design-core/config/addons.js
new file mode 100644
index 0000000000..ccbf622165
--- /dev/null
+++ b/packages/design-core/config/addons.js
@@ -0,0 +1,33 @@
+import Breadcrumb from '@opentiny/tiny-engine-toolbar-breadcrumb'
+import Fullscreen from '@opentiny/tiny-engine-toolbar-fullscreen'
+import Lang from '@opentiny/tiny-engine-toolbar-lang'
+import Logo from '@opentiny/tiny-engine-toolbar-logo'
+import Media from '@opentiny/tiny-engine-toolbar-media'
+import Redoundo from '@opentiny/tiny-engine-toolbar-redoundo'
+import Save from '@opentiny/tiny-engine-toolbar-save'
+import Clean from '@opentiny/tiny-engine-toolbar-clean'
+import Preview from '@opentiny/tiny-engine-toolbar-preview'
+import Refresh from '@opentiny/tiny-engine-toolbar-refresh'
+import Collaboration from '@opentiny/tiny-engine-toolbar-collaboration'
+import Setting from '@opentiny/tiny-engine-toolbar-setting'
+
+import Materials from '@opentiny/tiny-engine-plugin-materials'
+import Script from '@opentiny/tiny-engine-plugin-script'
+import Tree from '@opentiny/tiny-engine-plugin-tree'
+import Help from '@opentiny/tiny-engine-plugin-help'
+import Schema from '@opentiny/tiny-engine-plugin-schema'
+import Page from '@opentiny/tiny-engine-plugin-page'
+import I18n from '@opentiny/tiny-engine-plugin-i18n'
+import Bridge from '@opentiny/tiny-engine-plugin-bridge'
+import Block from '@opentiny/tiny-engine-plugin-block'
+import Datasource from '@opentiny/tiny-engine-plugin-datasource'
+import Robot from '@opentiny/tiny-engine-plugin-robot'
+
+import Props from '@opentiny/tiny-engine-setting-props'
+import Events from '@opentiny/tiny-engine-setting-events'
+import Styles from '@opentiny/tiny-engine-setting-styles'
+
+export const addons = {
+  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Schema, Help, Robot, Props, Styles, Events],
+  toolbars: [Logo, Breadcrumb, Media, Collaboration, Clean, Refresh, Save, Preview, Redoundo, Fullscreen, Setting, Lang]
+}
diff --git a/packages/design-core/config/plugin.js b/packages/design-core/config/plugin.js
new file mode 100644
index 0000000000..17a3a1c1b5
--- /dev/null
+++ b/packages/design-core/config/plugin.js
@@ -0,0 +1,13 @@
+import addons from './addons'
+
+const plugin = {}
+addons.plugins.forEach((item) => {
+  plugin[item.id] = item
+})
+
+export const getPlugin = (pluginName) => {
+  return plugin[pluginName] || null
+}
+export const getPluginById = (pluginId) => {
+  return Object.values(plugin).find((item) => item.id === pluginId) || null
+}
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 0acacb5906..7780142985 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -47,3 +47,5 @@ export {
 export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-meta-register'
+
+export { addons } from './config/addons'
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 657baa047a..bbb2509305 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -31,6 +31,7 @@ import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignSettings from './DesignSettings.vue'
 import meta from '../meta'
+import { addons } from '@opentiny/tiny-engine'
 
 export default {
   name: 'TinyLowCode',
@@ -54,6 +55,37 @@ export default {
     const configProvider = layoutRegistry.options.configProvider
     const configProviderDesign = layoutRegistry.options.configProviderDesign
 
+    // Step 1: 收集插件的 align 信息
+    const alignGroups = {}
+    const pluginList = addons.plugins
+
+    pluginList.forEach((item) => {
+      if (item.id) {
+        const align = item.options?.align || 'leftTop'
+        if (!alignGroups[align]) {
+          alignGroups[align] = []
+        }
+        alignGroups[align].push(item.id)
+      }
+    })
+
+    // Step 2: 为每个插件分配 index 值
+    const plugin = {}
+    pluginList.forEach((item) => {
+      if (item.id) {
+        const align = item.options?.align || 'leftTop'
+        const index = alignGroups[align].indexOf(item.id)
+
+        plugin[item.id] = {
+          width: item.options?.width || 300,
+          align: align,
+          index: index,
+          isShow: true
+        }
+      }
+    })
+    localStorage.setItem('plugin', JSON.stringify(plugin))
+
     const { layoutState } = useLayout()
     const { plugins } = layoutState
 
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 00b61ef42f..c6c1207f7b 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -11,11 +11,25 @@
  */
 
 import { reactive, nextTick } from 'vue'
+import { useStorage } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { META_APP as PLUGIN_NAME, getMetaApi } from '@opentiny/tiny-engine-meta-register'
 
 const { PAGE_STATUS } = constants
 
+const PLUGIN_POSITION = {
+  leftTop: 'leftTop',
+  leftBottom: 'leftBottom',
+  independence: 'independence',
+  rightTop: 'rightTop',
+  rightBottom: 'rightBottom',
+  fixed: 'fixed'
+}
+
+const pluginState = reactive({
+  pluginEvent: 'all'
+})
+
 const layoutState = reactive({
   dimension: {
     deviceType: 'desktop',
@@ -26,11 +40,17 @@ const layoutState = reactive({
     height: '100%'
   },
   plugins: {
+    isShow: true,
     fixedPanels: [PLUGIN_NAME.Materials],
     render: null,
-    pluginEvent: 'all'
+    pluginEvent: 'all',
+    api: {}, // 插件需要注册交互API到这里
+    activating: false, // 右侧面版激活提示状态
+    showDesignSettings: true
   },
   settings: {
+    isShow: true,
+    fixedPanels: [],
     render: 'props',
     api: null,
     activating: false, // 右侧面版激活提示状态
@@ -41,6 +61,39 @@ const layoutState = reactive({
   },
   pageStatus: ''
 })
+const getMoveDragBarState = () => {
+  return layoutState.isMoveDragBar
+}
+const changeMoveDragBarState = (state) => {
+  layoutState.isMoveDragBar = state
+}
+const leftMenuShownStorage = useStorage('leftMenuShown', layoutState.plugins.isShow)
+const rightMenuShownStorage = useStorage('rightMenuShown', layoutState.settings.isShow)
+const changeMenuShown = (menuName) => {
+  switch (menuName) {
+    case 'left': {
+      leftMenuShownStorage.value = !leftMenuShownStorage.value
+      break
+    }
+    case 'right': {
+      rightMenuShownStorage.value = !rightMenuShownStorage.value
+      break
+    }
+  }
+}
+const leftFixedPanelsStorage = useStorage('leftPanels', layoutState.plugins.fixedPanels)
+const rightFixedPanelsStorage = useStorage('rightPanels', layoutState.settings.fixedPanels)
+
+const changeLeftFixedPanels = (pluginName) => {
+  leftFixedPanelsStorage.value = leftFixedPanelsStorage.value?.includes(pluginName)
+    ? leftFixedPanelsStorage.value?.filter((item) => item !== pluginName)
+    : [...leftFixedPanelsStorage.value, pluginName]
+}
+const changeRightFixedPanels = (pluginName) => {
+  rightFixedPanelsStorage.value = rightFixedPanelsStorage.value?.includes(pluginName)
+    ? rightFixedPanelsStorage.value?.filter((item) => item !== pluginName)
+    : [...rightFixedPanelsStorage.value, pluginName]
+}
 
 const getScale = () => layoutState.dimension.scale
 
@@ -90,8 +143,122 @@ const closePlugin = (forceClose) => {
 const isEmptyPage = () => layoutState.pageStatus?.state === PAGE_STATUS.Empty
 
 export default () => {
+  let plugin = ''
+  const pluginStorage = localStorage.getItem('plugin')
+  if (pluginStorage) {
+    plugin = pluginStorage
+  }
+
+  try {
+    plugin = JSON.parse(plugin)
+  } catch (error) {
+    throw new Error(error)
+  }
+
+  const pluginStorageReactive = useStorage('plugin', plugin)
+
+  // 获取插件宽度
+  const getPluginWidth = (name) => pluginStorageReactive.value[name]?.width || 300
+
+  // 修改插件宽度
+  const changePluginWidth = (name, width) => {
+    if (Object.prototype.hasOwnProperty.call(pluginStorageReactive.value, name)) {
+      pluginStorageReactive.value[name].width = width
+    } else {
+      pluginStorageReactive.value[name] = {
+        width
+      }
+    }
+  }
+
+  // 获取插件布局
+  const getPluginByLayout = (name) => pluginStorageReactive.value[name]?.align || 'leftTop'
+
+  // 获取某个布局（左上/左下/右上/右下）的插件名称列表
+  const getPluginsByLayout = (layout = 'all') => {
+    // 筛选出符合布局条件的插件名称
+    const pluginNames = Object.keys(pluginStorageReactive.value).filter(
+      (key) => pluginStorageReactive.value[key].align === layout || layout === 'all'
+    )
+
+    pluginNames.sort((a, b) => pluginStorageReactive.value[a].index - pluginStorageReactive.value[b].index)
+
+    return pluginNames
+  }
+
+  // 修改某个插件的布局
+  const changePluginLayout = (name, layout) => {
+    if (pluginStorageReactive.value[name]) {
+      pluginStorageReactive.value[name].align = layout
+    }
+  }
+
+  //拖拽后改变插件位置
+  const dragPluginLayout = (from, to, oldIndex, newIndex) => {
+    if (from === to && oldIndex === newIndex) return
+
+    const items = Object.values(pluginStorageReactive.value)
+    // 记录拖拽项
+    const movedItem = items.find((item) => item.align === from && item.index === oldIndex)
+
+    // 同一列表中的拖拽
+    if (from === to) {
+      if (oldIndex < newIndex) {
+        //往后移动
+        items.forEach((item) => {
+          if (item !== movedItem && item.align === from && item.index > oldIndex && item.index <= newIndex) {
+            item.index -= 1
+          }
+        })
+      } else {
+        //往前移动
+        items.forEach((item) => {
+          if (item !== movedItem && item.align === from && item.index >= newIndex && item.index < oldIndex) {
+            item.index += 1
+          }
+        })
+      }
+    } else {
+      // 跨列表拖拽
+      items.forEach((item) => {
+        if (item !== movedItem && item.align === from && item.index > oldIndex) {
+          item.index -= 1
+        }
+        if (item !== movedItem && item.align === to && item.index >= newIndex) {
+          item.index += 1
+        }
+      })
+    }
+
+    // 更新拖拽项的位置
+    if (movedItem) {
+      movedItem.align = to
+      movedItem.index = newIndex
+    }
+  }
+
+  //判断是否在同一侧
+  const isSameSide = (from, to) => {
+    const leftSide = [PLUGIN_POSITION.leftTop, PLUGIN_POSITION.leftBottom]
+    const rightSide = [PLUGIN_POSITION.rightTop, PLUGIN_POSITION.rightBottom]
+
+    const isLeft = leftSide.includes(from) && leftSide.includes(to)
+    const isRight = rightSide.includes(from) && rightSide.includes(to)
+
+    return isLeft || isRight
+  }
+
+  //获取插件显示状态
+  const getPluginShown = (name) => pluginStorageReactive.value[name]?.isShow
+
+  //修改插件显示状态
+  const changePluginShown = (name) => {
+    pluginStorageReactive.value[name].isShow = !pluginStorageReactive.value[name].isShow
+  }
+
   return {
     PLUGIN_NAME,
+    PLUGIN_POSITION,
     activeSetting,
     activePlugin,
     closePlugin,
@@ -99,7 +266,26 @@ export default () => {
     getScale,
     setDimension,
     getDimension,
+    pluginState,
     getPluginState,
-    isEmptyPage
+    isEmptyPage,
+    getPluginWidth,
+    changePluginWidth,
+    leftFixedPanelsStorage,
+    rightFixedPanelsStorage,
+    leftMenuShownStorage,
+    rightMenuShownStorage,
+    changeLeftFixedPanels,
+    changeRightFixedPanels,
+    getPluginsByLayout,
+    changePluginLayout,
+    getPluginByLayout,
+    dragPluginLayout,
+    isSameSide,
+    getPluginShown,
+    changePluginShown,
+    changeMenuShown,
+    getMoveDragBarState,
+    changeMoveDragBarState
   }
 }

From 43bc003eae47bae5484baddcc92a11f9b2524930 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 10 Feb 2025 03:33:05 -0800
Subject: [PATCH 02/25] feat: refactor the plugin-panel header

---
 packages/common/component/PluginPanel.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index d5a2996c15..4b34225c8f 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -9,6 +9,12 @@
       </div>
       <div class="plugin-panel-icon">
         <slot name="header"></slot>
+        <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>
@@ -24,13 +30,15 @@
 <script>
 import { inject, ref } 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'
 
 export default {
   components: {
     LinkButton,
-    CloseIcon
+    CloseIcon,
+    SvgButton
   },
   props: {
     /**

From 37ed79d06348aa83fb0cb38f11fbb97328fcbfc1 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 10 Feb 2025 03:35:28 -0800
Subject: [PATCH 03/25] feat: completed some plug-in panel renovations

---
 packages/plugins/block/src/Main.vue           | 21 ++++++++++++--
 packages/plugins/bridge/src/Main.vue          | 26 +++++++++++++++--
 packages/plugins/datasource/src/Main.vue      | 22 ++++++++++++---
 packages/plugins/i18n/src/Main.vue            | 28 +++++++++++++++++--
 .../materials/src/meta/layout/src/Main.vue    | 10 +++++--
 packages/plugins/page/src/Main.vue            | 25 +++++++++++++++--
 packages/plugins/tree/src/Main.vue            | 28 ++++++++++---------
 7 files changed, 129 insertions(+), 31 deletions(-)

diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index 43a1c03b8d..385b285f13 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -2,6 +2,8 @@
   <plugin-panel
     class="block-manage"
     title="区块管理"
+    :fixed-name="PLUGIN_NAME.BlockManage"
+    :fixedPanels="fixedPanels"
     :docsUrl="docsUrl"
     :isShowDocsIcon="true"
     :isCloseLeft="false"
@@ -121,7 +123,7 @@
 </template>
 
 <script lang="jsx">
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, reactive, computed, watch, provide } from 'vue'
 import {
   Search as TinySearch,
   Select as TinySelect,
@@ -215,8 +217,12 @@ export default {
     TinyButton,
     TinyIconSearch: IconSearch()
   },
-
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('block')
     const { getBlockList, sort } = useBlock()
     const { isSaved } = useCanvas()
@@ -264,6 +270,14 @@ export default {
 
     const groupSelect = ref(null)
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     watch(
       () => [getBlockList(), state.searchKey, state.publishFilterType],
       () => {
@@ -421,6 +435,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       groupSelect,
       categoryList,
diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue
index 638db35849..a00b5aa8cd 100644
--- a/packages/plugins/bridge/src/Main.vue
+++ b/packages/plugins/bridge/src/Main.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-panel title="资源管理" class="bridge-manage" :isCloseLeft="false" @close="closePanel">
+  <plugin-panel
+    title="资源管理"
+    :fixed-name="PLUGIN_NAME.Bridge"
+    :fixedPanels="fixedPanels"
+    :isCloseLeft="false"
+    @close="closePanel"
+  >
     <template #header>
       <svg-button name="add-utils" placement="left" :tips="tips" @click="addResource('npm')"></svg-button>
     </template>
@@ -11,8 +17,9 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue'
+import { ref, reactive, computed, provide } from 'vue'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
 import { RESOURCE_TYPE } from './js/resource'
 import BridgeManage from './BridgeManage.vue'
 import BridgeSetting, { openPanel, closePanel } from './BridgeSetting.vue'
@@ -25,11 +32,23 @@ export default {
     BridgeManage,
     BridgeSetting
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const activedName = ref(RESOURCE_TYPE.Util)
     const utilsRef = ref(null)
     const tips = computed(() => RESOURCE_TIP[activedName.value])
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const openBridgePanel = () => {
       openPanel()
     }
@@ -43,6 +62,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       addResource,
       RESOURCE_TYPE,
       activedName,
diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue
index 23e49fbcf6..635c4a99e5 100644
--- a/packages/plugins/datasource/src/Main.vue
+++ b/packages/plugins/datasource/src/Main.vue
@@ -1,5 +1,5 @@
 <template>
-  <plugin-panel title="数据源">
+  <plugin-panel title="数据源" :fixed-name="PLUGIN_NAME.Collections" :fixedPanels="fixedPanels">
     <template #header>
       <link-button :href="docsUrl"></link-button>
       <svg-button
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { reactive, watch } from 'vue'
+import { reactive, watch, provide } from 'vue'
 import { Button } from '@opentiny/vue'
 import DataSourceList, { refresh as refreshDataSourceList, clearActive } from './DataSourceList.vue'
 import DataSourceRemotePanel, {
@@ -54,7 +54,7 @@ import DataSourceForm, { open as openDataSourceForm, close as closeDataSourceFor
 import { close as closeRecordList } from './DataSourceRecordList.vue'
 import { close as closeRecordForm } from './DataSourceRecordForm.vue'
 import DataSourceRemoteMapping, { isOpen as isOpenSourceRemoteMapping } from './DataSourceRemoteMapping.vue'
-import { useDataSource, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useDataSource, useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { requestUpdateDataSource } from './js/http'
 import DataSourceGlobalDataHandler, {
   open as openGlobalDataHander,
@@ -73,7 +73,12 @@ export default {
     SvgButton,
     LinkButton
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('datasource')
     const state = reactive({
       editable: true,
@@ -82,6 +87,14 @@ export default {
       remoteResponData: {}
     })
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     const { dataSourceState, saveDataSource } = useDataSource()
 
     watch(
@@ -132,6 +145,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       open,
       isOpenRemotePanel,
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index bbc44440f2..d375b822a3 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -1,6 +1,8 @@
 <template>
   <plugin-panel
     title="国际化资源"
+    :fixed-name="PLUGIN_NAME.I18n"
+    :fixedPanels="fixedPanels"
     :docsUrl="docsUrl"
     :isShowDocsIcon="true"
     :isCloseLeft="false"
@@ -119,12 +121,19 @@
 </template>
 
 <script lang="jsx">
-import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveComponent, watch } from 'vue'
+import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveComponent, watch, provide } from 'vue'
 import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
 import { iconLoadingShadow, iconUpload } from '@opentiny/vue-icon'
 import { PluginPanel, SearchEmpty } from '@opentiny/tiny-engine-common'
-import { useTranslate, useModal, useHelp, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  useTranslate,
+  useModal,
+  useHelp,
+  getMetaApi,
+  META_SERVICE,
+  useLayout
+} from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { utils, constants } from '@opentiny/tiny-engine-utils'
 import { BASE_URL } from '@opentiny/tiny-engine-common/js/environments'
@@ -144,7 +153,12 @@ export default {
     SearchEmpty,
     IconUpload: iconUpload()
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     // 组件库iconLoadingShadow图标不能切换颜色，因此不同主题用不同icon
     const SvgIcon = resolveComponent('SvgIcon')
     const lightSpinnerIcon = iconLoadingShadow()
@@ -152,6 +166,13 @@ export default {
     const isLightTheme = getMergeMeta('engine.config').theme === 'light'
     const { getLangs, i18nResource, currentLanguage, getI18nData } = useTranslate()
     const { toClipboard } = useClipboard()
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const fullLangList = computed(() => {
       const langs = getLangs()
 
@@ -398,6 +419,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       sortTypeChanges,
       currentSearchType,
       i18nSearchTypes,
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index 6e39252c4d..f4d6602be4 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -1,5 +1,10 @@
 <template>
-  <plugin-panel :title="shortcut ? '' : title" @close="$emit('close')">
+  <plugin-panel
+    :title="shortcut ? '' : title"
+    :fixed-name="PLUGIN_NAME.Materials"
+    :fixedPanels="fixedPanels"
+    @close="$emit('close')"
+  >
     <template #header>
       <component
         v-if="!onlyShowDefault"
@@ -23,7 +28,7 @@
 <script>
 import { reactive, provide, ref, computed } from 'vue'
 import { Tabs, TabItem } from '@opentiny/vue'
-import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { META_APP as PLUGIN_NAME, getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -83,6 +88,7 @@ export default {
     const title = ref(props.registryData?.title)
 
     return {
+      PLUGIN_NAME,
       title,
       activeName,
       defaultComponent,
diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue
index e9e5f9f475..aef628b52e 100644
--- a/packages/plugins/page/src/Main.vue
+++ b/packages/plugins/page/src/Main.vue
@@ -1,5 +1,12 @@
 <template>
-  <plugin-panel :title="title" @close="pluginPanelClosed" :docsUrl="docsUrl" :isShowDocsIcon="true" class="page-manage">
+  <plugin-panel
+    :title="title"
+    :fixed-name="PLUGIN_NAME.AppManage"
+    :fixedPanels="fixedPanels"
+    @close="pluginPanelClosed"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+  >
     <template #header>
       <svg-button
         class="add-folder-icon"
@@ -36,7 +43,7 @@
 
 <script lang="jsx">
 import { reactive, ref, watchEffect, provide } from 'vue'
-import { useCanvas, usePage, useHelp } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, usePage, useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
@@ -67,12 +74,23 @@ export default {
     title: {
       type: String,
       default: '页面'
+    },
+    fixedPanels: {
+      type: Array
     }
   },
-  setup() {
+  setup(props, { emit }) {
     const { pageState } = useCanvas()
     const { pageSettingState, getDefaultPage, isTemporaryPage, initCurrentPageData } = usePage()
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     const pageTreeRef = ref(null)
     const ROOT_ID = pageSettingState.ROOT_ID
     const docsUrl = useHelp().getDocsUrl('page')
@@ -152,6 +170,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       pageState,
       openNewPage,
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 8a0e0b7fa0..768c829d71 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -1,13 +1,11 @@
 <template>
-  <plugin-panel class="outlinebox" title="大纲树" @close="$emit('close')">
-    <template #header>
-      <svg-button
-        class="item icon-sidebar"
-        :name="panelFixed ? 'fixed-solid' : 'fixed'"
-        :tips="panelFixed ? '解除固定面板' : '固定面板'"
-        @click="$emit('fix-panel', PLUGIN_NAME.OutlineTree)"
-      ></svg-button>
-    </template>
+  <plugin-panel
+    class="outlinebox"
+    title="大纲树"
+    :fixed-name="PLUGIN_NAME.OutlineTree"
+    :fixedPanels="fixedPanels"
+    @close="$emit('close')"
+  >
     <template #content>
       <draggable-tree
         label-key="componentName"
@@ -38,8 +36,8 @@
 </template>
 
 <script>
-import { reactive, watch, computed, onActivated, onDeactivated, nextTick } from 'vue'
-import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
+import { reactive, watch, computed, onActivated, onDeactivated, provide, nextTick } from 'vue'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
 import { useCanvas, useMaterial, useLayout, useMessage } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
@@ -50,7 +48,6 @@ const { PAGE_STATUS } = constants
 export default {
   components: {
     PluginPanel,
-    SvgButton,
     DraggableTree
   },
   props: {
@@ -59,13 +56,18 @@ export default {
     }
   },
   emits: ['close', 'fix-panel'],
-  setup(props) {
+  setup(props, { emit }) {
     const { pageState } = useCanvas()
     const { getMaterial } = useMaterial()
     const { PLUGIN_NAME } = useLayout()
 
     const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
 
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const filterSchema = (data) => {
       const translateChild = (data) => {
         data.forEach((item) => {

From 260c1e2e2a8da8bad07ce350147196e6465d887b Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 11 Feb 2025 00:54:44 -0800
Subject: [PATCH 04/25] feat: plugin Adaptation Unified Panel

---
 packages/common/component/PluginPanel.vue |   2 +
 packages/plugins/block/src/Main.vue       |   2 +-
 packages/plugins/datasource/src/Main.vue  |  15 +-
 packages/plugins/schema/src/Main.vue      | 156 +++++++++----------
 packages/plugins/script/src/Main.vue      | 135 +++++++++--------
 packages/plugins/state/src/Main.vue       | 176 ++++++++++++----------
 packages/register/src/constants.js        |   2 +-
 7 files changed, 253 insertions(+), 235 deletions(-)

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index 4b34225c8f..ff277959f4 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -198,6 +198,8 @@ export default {
     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;
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index 385b285f13..c20d7cd207 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -467,7 +467,7 @@ export default {
 <style lang="less" scoped>
 .app-manage-type {
   padding: 0 10px;
-  margin: 12px 0;
+  margin-bottom: 12px;
   display: flex;
   .search-select {
     flex: 1;
diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue
index 635c4a99e5..9f94e837d1 100644
--- a/packages/plugins/datasource/src/Main.vue
+++ b/packages/plugins/datasource/src/Main.vue
@@ -1,7 +1,12 @@
 <template>
-  <plugin-panel title="数据源" :fixed-name="PLUGIN_NAME.Collections" :fixedPanels="fixedPanels">
+  <plugin-panel
+    title="数据源"
+    :fixed-name="PLUGIN_NAME.Collections"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+  >
     <template #header>
-      <link-button :href="docsUrl"></link-button>
       <svg-button
         class="set-data-source"
         tips="全局设置"
@@ -49,7 +54,7 @@ import DataSourceRemotePanel, {
   close as closeRemotePanel,
   isOpen as isOpenRemotePanel
 } from './DataSourceRemotePanel.vue'
-import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import DataSourceForm, { open as openDataSourceForm, close as closeDataSourceForm } from './DataSourceForm.vue'
 import { close as closeRecordList } from './DataSourceRecordList.vue'
 import { close as closeRecordForm } from './DataSourceRecordForm.vue'
@@ -70,8 +75,7 @@ export default {
     DataSourceGlobalDataHandler,
     PluginPanel,
     DataSourceForm,
-    SvgButton,
-    LinkButton
+    SvgButton
   },
   props: {
     fixedPanels: {
@@ -162,6 +166,7 @@ export default {
 <style lang="less" scoped>
 .add-data-source {
   margin: 0 12px 12px 12px;
+  width: calc(100% - 24px);
 }
 :deep(.help-box) {
   position: absolute;
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 74c219f569..d9726ca6b2 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -1,45 +1,48 @@
 <template>
-  <div id="source-code">
-    <div class="source-code-header">
-      <div class="title">页面Schema</div>
-      <div class="header-title">
-        <!-- 暂时放开schema录入功能，等画布功能完善后，再打开下面一行的注释 -->
-        <!-- <tiny-popover v-if="isEdit" placement="bottom" trigger="hover" append-to-body content="保存"> -->
-        <span class="icon-wrap" @click="saveSchema">
-          <i v-show="!showRed" class="red"></i>
-          <tiny-button type="primary">保存</tiny-button>
-        </span>
-        <tiny-popover v-show="false" placement="bottom" trigger="hover" append-to-body content="导入 Schema">
-          <template #reference>
-            <span class="icon-wrap">
-              <icon-download-link></icon-download-link>
-            </span>
-          </template>
-        </tiny-popover>
-        <close-icon @close="close"></close-icon>
+  <plugin-panel
+    title="页面 Schema"
+    :fixed-name="PLUGIN_NAME.Schema"
+    :fixedPanels="fixedPanels"
+    @close="close"
+    class="plugin-page-schema-container"
+  >
+    <template #header>
+      <span class="icon-wrap">
+        <i v-show="!showRed" class="red"></i>
+        <tiny-button type="primary" @click="saveSchema">保存</tiny-button>
+      </span>
+      <tiny-popover v-show="false" placement="bottom" trigger="hover" append-to-body content="导入 Schema">
+        <template #reference>
+          <span class="icon-wrap">
+            <icon-download-link></icon-download-link>
+          </span>
+        </template>
+      </tiny-popover>
+    </template>
+
+    <template #content>
+      <div class="source-code-content">
+        <monaco-editor
+          ref="container"
+          class="code-edit-content"
+          :value="state.pageData"
+          :options="options"
+          @change="editorChange"
+          @shortcutSave="saveSchema"
+        ></monaco-editor>
       </div>
-    </div>
-    <div class="source-code-content">
-      <monaco-editor
-        ref="container"
-        class="code-edit-content"
-        :value="state.pageData"
-        :options="options"
-        @change="editorChange"
-        @shortcutSave="saveSchema"
-      ></monaco-editor>
-    </div>
-    <div class="source-code-footer">
-      <button>导入 Schema</button>
-    </div>
-  </div>
+      <div class="source-code-footer">
+        <button>导入 Schema</button>
+      </div>
+    </template>
+  </plugin-panel>
 </template>
 
 <script lang="jsx">
-import { nextTick, reactive, getCurrentInstance, onActivated, ref, onDeactivated } from 'vue'
+import { nextTick, reactive, getCurrentInstance, onActivated, ref, onDeactivated, provide } from 'vue'
 import { Popover, Button } from '@opentiny/vue'
-import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
-import { useCanvas, useModal, useNotify, useMessage } from '@opentiny/tiny-engine-meta-register'
+import { VueMonaco, PluginPanel } from '@opentiny/tiny-engine-common'
+import { useCanvas, useModal, useNotify, useMessage, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { iconDownloadLink } from '@opentiny/vue-icon'
 import { useThrottleFn } from '@vueuse/core'
@@ -51,9 +54,14 @@ export default {
     MonacoEditor: VueMonaco,
     TinyPopover: Popover,
     TinyButton: Button,
-    CloseIcon,
+    PluginPanel,
     IconDownloadLink: iconDownloadLink()
   },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
   setup(props, { emit }) {
     const app = getCurrentInstance()
     const { pageState } = useCanvas()
@@ -63,6 +71,13 @@ export default {
     })
     const { subscribe, unsubscribe } = useMessage()
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const isEdit = false
     const showRed = ref(true)
 
@@ -148,6 +163,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       state,
       isEdit,
       saveSchema,
@@ -168,59 +184,43 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#source-code {
+.plugin-page-schema-container {
   width: 50vw;
   height: calc(100% - var(--base-top-panel-height));
-  padding: 12px 0;
   position: fixed;
   top: var(--base-top-panel-height);
   left: 41px;
   background: var(--te-schema-panel-bg-color);
   box-shadow: 6px 0px 3px 0px var(--te-schema-panel-shadow-color);
   z-index: 1000;
-  .source-code-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--te-schema-common-border-color);
-    margin-bottom: 12px;
-    padding: 0 12px 12px;
-  }
-  .title {
-    color: var(--te-schema-panel-title-text-color);
-    font-weight: var(--te-base-font-weight-bold);
-  }
-  .header-title {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    .icon-wrap {
-      position: relative;
-      .tiny-button {
-        min-width: 40px;
-        margin-right: 2px;
-        height: 24px;
-        line-height: 24px;
-      }
-      .red {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background-color: var(--te-schema-dot-color);
-        display: block;
-        z-index: 100;
-        position: absolute;
-        top: -3px;
-        right: -4px;
-      }
+
+  .icon-wrap {
+    position: relative;
+    margin-right: 6px;
+
+    .tiny-button {
+      min-width: 40px;
+      margin-right: 2px;
+      height: 24px;
+      line-height: 24px;
     }
-    & > span:not(:last-child) {
-      margin-right: 8px;
+
+    .red {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: var(--te-common-color-error);
+      display: block;
+      z-index: 100;
+      position: absolute;
+      top: -3px;
+      right: -1px;
     }
   }
+
   .source-code-content {
-    height: calc(100% - 42px);
-    border: 1px solid var(--te-schema-common-border-color);
+    height: calc(100% - 12px);
+    border: 1px solid var(--te-common-border-divider);
     border-radius: 4px;
     margin: 0 12px;
   }
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 41e9ddc2b4..c6b1a1fc9c 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -1,36 +1,40 @@
 <template>
-  <div class="plugin-page-js-container">
-    <div class="code-edit-head">
-      <div class="head-left">
-        <span class="title">页面 JS</span>
-        <link-button :href="docsUrl"></link-button>
+  <plugin-panel
+    title="页面 JS"
+    :fixed-name="PLUGIN_NAME.Page"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    :isCloseLeft="false"
+    @close="$emit('close')"
+    class="plugin-page-js-container"
+  >
+    <template #header>
+      <span class="icon-wrap">
+        <i v-show="state.isChanged" class="red"></i>
+        <tiny-button type="primary" @click="saveMethods">保存</tiny-button>
+      </span>
+    </template>
+    <template #content>
+      <div class="code-edit-content">
+        <monaco-editor
+          ref="monaco"
+          :value="state.script"
+          :options="options"
+          @change="change"
+          @editorDidMount="editorDidMount"
+          @shortcutSave="saveMethods"
+        ></monaco-editor>
       </div>
-      <div class="head-right">
-        <tiny-button type="primary" class="save-btn" @click="saveMethods">
-          <span>保存</span>
-          <span v-show="state.isChanged" class="dots"></span>
-        </tiny-button>
-        <close-icon @close="close"></close-icon>
-      </div>
-    </div>
-    <div class="code-edit-content">
-      <monaco-editor
-        ref="monaco"
-        :value="state.script"
-        :options="options"
-        @change="change"
-        @editorDidMount="editorDidMount"
-        @shortcutSave="saveMethods"
-      ></monaco-editor>
-    </div>
-  </div>
+    </template>
+  </plugin-panel>
 </template>
 
 <script>
-import { onBeforeUnmount } from 'vue'
+import { onBeforeUnmount, reactive, provide } from 'vue'
 import { Button } from '@opentiny/vue'
-import { VueMonaco, CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
-import { useHelp } from '@opentiny/tiny-engine-meta-register'
+import { VueMonaco, PluginPanel } from '@opentiny/tiny-engine-common'
+import { useHelp, useLayout } from '@opentiny/tiny-engine-meta-register'
 import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
 import { initLinter } from '@opentiny/tiny-engine-common/js/linter'
 import useMethod, { saveMethod, highlightMethod, getMethodNameList, getMethods } from './js/method'
@@ -46,14 +50,25 @@ export default {
   components: {
     MonacoEditor: VueMonaco,
     TinyButton: Button,
-    CloseIcon,
-    LinkButton
+    PluginPanel
+  },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
   },
-  emits: ['close'],
+  emits: ['close', 'fix-panel'],
   setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('script')
     const { state, monaco, change, close, saveMethods } = useMethod({ emit })
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const options = {
       language: 'javascript',
       minimap: {
@@ -93,6 +108,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       state,
       monaco,
       options,
@@ -118,49 +134,33 @@ export default {
   z-index: 999;
   box-sizing: border-box;
 
-  .code-edit-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid var(--te-plugin-js-common-border-color);
-    padding: 12px 0;
-
-    .head-left {
-      padding-left: 12px;
-      display: flex;
-      align-items: center;
-      .title {
-        color: var(--te-plugin-js-panel-title-text-color);
-        font-weight: var(--te-base-font-weight-bold);
-      }
+  .icon-wrap {
+    position: relative;
+    margin-right: 6px;
+
+    .tiny-button {
+      min-width: 40px;
+      margin-right: 2px;
+      height: 24px;
+      line-height: 24px;
     }
 
-    .head-right {
-      margin-right: 12px;
-      display: flex;
-      align-items: center;
-
-      .save-btn {
-        min-width: 40px;
-        margin-right: 8px;
-        height: 24px;
-        line-height: 24px;
-        .dots {
-          width: 6px;
-          height: 6px;
-          background: var(--te-plugin-js-dot-color);
-          border-radius: 50%;
-          position: absolute;
-          top: 9px;
-          right: 34px;
-        }
-      }
+    .red {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: var(--te-common-color-error);
+      display: block;
+      z-index: 100;
+      position: absolute;
+      top: -3px;
+      right: -1px;
     }
   }
 
   .code-edit-content {
-    padding: 12px;
-    height: calc(100% - 54px);
+    padding: 0 12px;
+    height: calc(100% - 12px);
 
     & > div {
       border: 1px solid var(--te-plugin-js-common-border-color);
@@ -169,6 +169,7 @@ export default {
     }
   }
 }
+
 :deep(.help-box) {
   height: auto;
   #help-icon {
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index f0f0f56a88..eaa886ac1f 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -1,78 +1,85 @@
 <template>
-  <div id="data-source">
-    <div class="data-source-left-panel">
-      <div class="title">
-        <span>状态管理</span>
-        <link-button :href="docsUrl"></link-button>
-        <close-icon @close="closePanel"></close-icon>
+  <plugin-panel
+    title="状态管理"
+    :fixed-name="PLUGIN_NAME.State"
+    :fixedPanels="fixedPanels"
+    :docsUrl="docsUrl"
+    :isShowDocsIcon="true"
+    @close="closePanel"
+  >
+    <template #content>
+      <div id="data-source">
+        <div class="data-source-left-panel">
+          <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
+            <tiny-tab-item :name="STATE.CURRENT_STATE" :title="isBlock ? '区块状态' : '页面状态'"></tiny-tab-item>
+            <tiny-tab-item :name="STATE.GLOBAL_STATE" title="应用状态"></tiny-tab-item>
+          </tiny-tabs>
+          <tiny-search
+            :modelValue="query"
+            class="left-filter"
+            placeholder="请输入搜索条件"
+            clearable
+            @update:modelValue="search"
+          >
+            <template #prefix>
+              <tiny-icon-search />
+            </template>
+          </tiny-search>
+          <div class="add-btn">
+            <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
+              <svg-icon name="add" class="add-btn-icon"></svg-icon>
+              <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
+            </tiny-button>
+          </div>
+          <data-source-list
+            :modelValue="Object.keys(state.dataSource)"
+            :stateScope="activeName"
+            :query="query"
+            :selectedKey="selectedKey"
+            @openPanel="openPanel"
+            @remove="remove"
+            @removeStore="removeStore"
+          />
+        </div>
       </div>
-      <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
-        <tiny-tab-item :name="STATE.CURRENT_STATE" :title="isBlock ? '区块状态' : '页面状态'"></tiny-tab-item>
-        <tiny-tab-item :name="STATE.GLOBAL_STATE" title="应用状态"></tiny-tab-item>
-      </tiny-tabs>
-      <tiny-search
-        :modelValue="query"
-        class="left-filter"
-        placeholder="请输入搜索条件"
-        clearable
-        @update:modelValue="search"
-      >
-        <template #prefix>
-          <tiny-icon-search />
-        </template>
-      </tiny-search>
-      <div class="add-btn">
-        <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
-          <svg-icon name="add" class="add-btn-icon"></svg-icon>
-          <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
-        </tiny-button>
-      </div>
-      <data-source-list
-        :modelValue="Object.keys(state.dataSource)"
-        :stateScope="activeName"
-        :query="query"
-        :selectedKey="selectedKey"
-        @openPanel="openPanel"
-        @remove="remove"
-        @removeStore="removeStore"
-      />
-    </div>
-    <div v-if="isPanelShow" class="data-source-right-panel">
-      <div class="header">
-        <span>{{ addDataSource }}</span>
-        <span class="options-wrap">
-          <tiny-button type="primary" @click="confirm">保存</tiny-button>
-          <close-icon @close="cancel"></close-icon>
-        </span>
-      </div>
-      <create-variable
-        v-if="activeName === STATE.CURRENT_STATE"
-        ref="variableRef"
-        :dataSource="state.dataSource"
-        :flag="flag"
-        :updateKey="updateKey"
-        :createData="state.createData"
-        @nameInput="updateName"
-        @close="cancel"
-        @mouseleave="onMouseLeaveVariable"
-      />
-      <create-store
-        v-if="activeName === STATE.GLOBAL_STATE"
-        ref="storeRef"
-        :dataSource="state.dataSource"
-        :flag="flag"
-        :updateKey="updateKey"
-        :storeData="state.createData"
-        @nameInput="validName"
-        @close="cancel"
-        @mouseleave="onMouseLeaveStore"
-      />
+    </template>
+  </plugin-panel>
+
+  <div v-if="isPanelShow" class="data-source-right-panel">
+    <div class="header">
+      <span>{{ addDataSource }}</span>
+      <span class="options-wrap">
+        <tiny-button type="primary" @click="confirm">保存</tiny-button>
+        <close-icon @close="cancel"></close-icon>
+      </span>
     </div>
+    <create-variable
+      v-if="activeName === STATE.CURRENT_STATE"
+      ref="variableRef"
+      :dataSource="state.dataSource"
+      :flag="flag"
+      :updateKey="updateKey"
+      :createData="state.createData"
+      @nameInput="updateName"
+      @close="cancel"
+      @mouseleave="onMouseLeaveVariable"
+    />
+    <create-store
+      v-if="activeName === STATE.GLOBAL_STATE"
+      ref="storeRef"
+      :dataSource="state.dataSource"
+      :flag="flag"
+      :updateKey="updateKey"
+      :storeData="state.createData"
+      @nameInput="validName"
+      @close="cancel"
+      @mouseleave="onMouseLeaveStore"
+    />
   </div>
 </template>
 
 <script>
-import { reactive, ref, computed, onActivated, watch } from 'vue'
+import { reactive, ref, computed, onActivated, watch, provide } from 'vue'
 import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
 import {
   useCanvas,
@@ -80,13 +87,14 @@ import {
   useResource,
   useNotify,
   useHelp,
+  useLayout,
   getMetaApi,
   META_APP,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
 import { iconSearch } from '@opentiny/vue-icon'
-import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
+import { CloseIcon, PluginPanel } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
 import CreateVariable from './CreateVariable.vue'
 import CreateStore from './CreateStore.vue'
@@ -104,9 +112,14 @@ export default {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
     CreateStore,
-    LinkButton,
+    PluginPanel,
     TinyIconSearch: iconSearch()
   },
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
   setup(props, { emit }) {
     const variableRef = ref(null)
     const storeRef = ref(null)
@@ -131,6 +144,14 @@ export default {
     })
     const selectedKey = ref(null)
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+
+    provide('panelState', panelState)
+
     watch(activeName, () => {
       selectedKey.value = null
     })
@@ -355,6 +376,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       isBlock,
       isPanelShow,
       errorMessage,
@@ -420,18 +442,6 @@ export default {
       }
     }
 
-    .title {
-      padding: 10px;
-      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-        'Helvetica Neue', sans-serif;
-      color: var(--te-state-common-text-color);
-      font-weight: var(--te-base-font-weight-bold);
-      border-bottom: 1px solid var(--te-state-common-border-color-divider);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
     .left-filter {
       margin-top: 4px;
       padding: 0 8px;
@@ -490,7 +500,7 @@ export default {
   }
 
   :deep(.tiny-tabs__header) {
-    padding: 8px;
+    padding: 0 8px 8px 8px;
   }
 
   :deep(.tiny-tabs__header .tiny-tabs__active-bar) {
diff --git a/packages/register/src/constants.js b/packages/register/src/constants.js
index 6f589f0091..12415696ba 100644
--- a/packages/register/src/constants.js
+++ b/packages/register/src/constants.js
@@ -46,7 +46,7 @@ export const META_APP = {
   Collections: 'engine.plugins.collections',
   Bridge: 'engine.plugins.bridge',
   I18n: 'engine.plugins.i18n',
-  Page: 'engine.plugins.pagecontroller',
+  Page: 'engine.plugins.pagecontroller', // 页面 JS
   State: 'engine.plugins.state',
   Schema: 'engine.plugins.schema',
   Help: 'engine.plugins.editorhelp',

From e55b896bb29a46456b560a212d869f6a348b1d9d Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 11 Feb 2025 05:34:07 -0800
Subject: [PATCH 05/25] fix: drag and drop select text

---
 .../canvas/DesignCanvas/src/DesignCanvas.vue  | 12 ++++-
 packages/layout/src/DesignPlugins.vue         | 47 +++++++++++--------
 packages/layout/src/composable/useLayout.js   |  1 +
 3 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
index 27d99cd9e1..64ff60b465 100644
--- a/packages/canvas/DesignCanvas/src/DesignCanvas.vue
+++ b/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',
@@ -272,6 +274,7 @@ export default {
         useNotify
       },
       isBlock,
+      getMoveDragBarState,
       CanvasLayout,
       canvasRef,
       CanvasContainer,
@@ -281,3 +284,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
+</style>
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index c2f2914f20..7c8e3147cb 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -52,21 +52,24 @@
     </ul>
   </div>
 
-  <div
-    v-show="renderPanel && components[renderPanel]"
-    id="tiny-engine-left-panel"
-    :class="[renderPanel, { 'is-fixed': pluginState.fixedPanels.includes(renderPanel) }]"
-  >
-    <div class="left-panel-wrap">
-      <keep-alive>
-        <component
-          :is="components[renderPanel]"
-          ref="pluginRef"
-          :fixed-panels="pluginState.fixedPanels"
-          @close="close"
-          @fixPanel="fixPanel"
-        ></component>
-      </keep-alive>
+  <div :class="{ 'not-selected': getMoveDragBarState() }">
+    <!-- 插件面板 -->
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-left-panel"
+      :class="[renderPanel, { 'is-fixed': pluginState.fixedPanels.includes(renderPanel) }]"
+    >
+      <div class="left-panel-wrap">
+        <keep-alive>
+          <component
+            :is="components[renderPanel]"
+            ref="pluginRef"
+            :fixed-panels="pluginState.fixedPanels"
+            @close="close"
+            @fixPanel="fixPanel"
+          ></component>
+        </keep-alive>
+      </div>
     </div>
   </div>
 </template>
@@ -104,6 +107,8 @@ export default {
     const { message } = useModal()
     const pluginState = useLayout().getPluginState()
 
+    const { getMoveDragBarState } = useLayout()
+
     props.plugins.forEach(({ id, entry, icon }) => {
       components[id] = entry
       iconComponents[id] = icon
@@ -190,6 +195,7 @@ export default {
       fixPanel,
       pluginState,
       components,
+      getMoveDragBarState,
       iconComponents
     }
   }
@@ -198,7 +204,7 @@ export default {
 
 <style lang="less" scoped>
 #tiny-engine-left-panel {
-  width: var(--base-left-panel-width);
+  width: auto !important;
   height: calc(100vh - var(--base-top-panel-height));
   border-right: 1px solid var(--te-layout-common-border-color);
   background: var(--te-layout-common-bg-color);
@@ -209,10 +215,6 @@ export default {
   left: var(--base-nav-panel-width);
   z-index: 999;
 
-  &[class~='engine.plugins.i18n'] {
-    width: auto;
-  }
-
   &.is-fixed {
     position: relative;
     top: 0;
@@ -324,4 +326,9 @@ export default {
 :deep(.svg-icon.icon-plugin-icon-plugin-help) {
   font-size: 18px;
 }
+
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
 </style>
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index c6c1207f7b..547c84a3d9 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -31,6 +31,7 @@ const pluginState = reactive({
 })
 
 const layoutState = reactive({
+  isMoveDragBar: false,
   dimension: {
     deviceType: 'desktop',
     width: '',

From 61fa4ee9803bf8c161182f6f9cfb54c9096f6cf2 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 11 Feb 2025 19:45:16 -0800
Subject: [PATCH 06/25] fix: fix partial plugin fixed canvas scaling

---
 packages/plugins/schema/src/Main.vue | 8 +-------
 packages/plugins/script/src/Main.vue | 9 +--------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index d9726ca6b2..1e56d2c3a8 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -185,13 +185,7 @@ export default {
 
 <style lang="less" scoped>
 .plugin-page-schema-container {
-  width: 50vw;
-  height: calc(100% - var(--base-top-panel-height));
-  position: fixed;
-  top: var(--base-top-panel-height);
-  left: 41px;
-  background: var(--te-schema-panel-bg-color);
-  box-shadow: 6px 0px 3px 0px var(--te-schema-panel-shadow-color);
+  box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
   z-index: 1000;
 
   .icon-wrap {
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index c6b1a1fc9c..96d562e586 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -124,15 +124,8 @@ export default {
 
 <style lang="less" scoped>
 .plugin-page-js-container {
-  width: 50vw;
-  height: 100%;
-  background: var(--te-plugin-js-panel-bg-color);
-  box-shadow: 6px 0px 3px 0px var(--te-plugin-js-panel-shadow-color);
-  position: absolute;
-  left: 0;
-  top: 0;
+  box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
   z-index: 999;
-  box-sizing: border-box;
 
   .icon-wrap {
     position: relative;

From f396932655a70f35e3032f2ec13a110fca48bc0b Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 12 Feb 2025 00:25:49 -0800
Subject: [PATCH 07/25] fix: set page left margin adaptive

---
 packages/common/component/PluginPanel.vue      |  6 ++++--
 packages/common/component/PluginSetting.vue    | 18 +++++++++++++++++-
 packages/layout/src/composable/useLayout.js    | 12 ++++++++++--
 packages/plugins/block/src/BlockSetting.vue    |  6 +++++-
 packages/plugins/bridge/src/BridgeSetting.vue  |  7 +++++--
 .../plugins/datasource/src/DataSourceForm.vue  | 14 ++++++++++++--
 .../src/DataSourceGlobalDataHandler.vue        |  7 +++++--
 .../datasource/src/DataSourceRecordList.vue    |  4 +++-
 .../src/meta/block/src/BlockGroupPanel.vue     | 14 ++++++++++++--
 .../plugins/page/src/PageFolderSetting.vue     | 11 ++++++++++-
 packages/plugins/page/src/PageSetting.vue      |  5 ++++-
 packages/plugins/state/src/Main.vue            | 14 ++++++++++++--
 12 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index ff277959f4..77b5bae078 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -109,13 +109,15 @@ export default {
     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 offset = panelWidth.value - MIN_WIDTH
+      changePluginWidth(props.fixedName, panelWidth.value, offset)
     }
 
     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)
+      const offset = panelWidth.value - MIN_WIDTH
+      changePluginWidth(props.fixedName, panelWidth.value, offset)
     }
 
     //节流
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index b225c2e487..7b229ce739 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    id="panel-setting"
     :class="['plugin-setting', { 'second-panel': isSecond }, { 'full-screen': state.isFullScreen }]"
     @click="$emit('click')"
   >
@@ -31,11 +32,12 @@
 </template>
 
 <script>
-import { reactive, watchEffect } from 'vue'
+import { nextTick, reactive, watchEffect } from 'vue'
 import { Button } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 import ButtonGroup from './ButtonGroup.vue'
 import SvgButton from './SvgButton.vue'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
 
 const EVENTS = {
   FULL_SCREEN_CHANGE: 'fullScreenChange',
@@ -91,6 +93,10 @@ export default {
     icon: {
       type: Object,
       default: iconPlus()
+    },
+    fixedName: {
+      type: String,
+      default: ''
     }
   },
   emits: [EVENTS.FULL_SCREEN_CHANGE, EVENTS.SAVE, EVENTS.CANCEL, EVENTS.ADD, EVENTS.CLICK],
@@ -99,6 +105,16 @@ export default {
       isFullScreen: false
     })
 
+    const { getSettingPanelOffset } = useLayout()
+
+    watchEffect(() => {
+      const offsetMargin = getSettingPanelOffset(props.fixedName)
+      nextTick(() => {
+        const dom = document?.getElementById('panel-setting')
+        dom.setAttribute('style', `margin-left: ${offsetMargin}`)
+      })
+    })
+
     watchEffect(() => {
       state.isFullScreen = props.isFullScreen
     })
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 547c84a3d9..3e5119e326 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -162,9 +162,10 @@ export default () => {
   const getPluginWidth = (name) => pluginStorageReactive.value[name]?.width || 300
 
   // 修改插件宽度
-  const changePluginWidth = (name, width) => {
+  const changePluginWidth = (name, width, offset) => {
     if (Object.prototype.hasOwnProperty.call(pluginStorageReactive.value, name)) {
       pluginStorageReactive.value[name].width = width
+      pluginStorageReactive.value[name].offset = offset
     } else {
       pluginStorageReactive.value[name] = {
         width
@@ -257,6 +258,12 @@ export default () => {
     pluginStorageReactive.value[name].isShow = !pluginStorageReactive.value[name].isShow
   }
 
+  // 获取二级面板偏移量
+  const getSettingPanelOffset = (name) => {
+    const offsetMargin = pluginStorageReactive.value[name]?.offset
+    return offsetMargin ? `${offsetMargin + 20}px` : '20px'
+  }
+
   return {
     PLUGIN_NAME,
     PLUGIN_POSITION,
@@ -287,6 +294,7 @@ export default () => {
     changePluginShown,
     changeMenuShown,
     getMoveDragBarState,
-    changeMoveDragBarState
+    changeMoveDragBarState,
+    getSettingPanelOffset
   }
 }
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index f3e918185f..c4829d8c50 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -3,6 +3,7 @@
     v-if="isOpen"
     class="plugin-block-setting"
     title="区块设置"
+    :fixed-name="PLUGIN_NAME.BlockManage"
     @mouseleave="onMouseLeave"
     @click="handleClick"
   >
@@ -86,7 +87,7 @@
 <script lang="jsx">
 import { reactive, ref, watch, watchEffect, computed } from 'vue'
 import { Button as TinyButton, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { useModal, getMergeMeta, useBlock } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, getMergeMeta, useBlock } from '@opentiny/tiny-engine-meta-register'
 import { BlockHistoryList, PluginSetting, CloseIcon, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import { previewBlock } from '@opentiny/tiny-engine-common/js/preview'
 import { LifeCycles } from '@opentiny/tiny-engine-common'
@@ -152,6 +153,8 @@ export default {
     })
     const blockConfigForm = ref(null)
 
+    const { PLUGIN_NAME } = useLayout()
+
     const state = reactive({
       activeName: ['base', 'attribute', 'event', 'lifeCycle', 'history'],
       backupList: [],
@@ -270,6 +273,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       isOpen,
       showDeployBlockDialog,
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 0896a038eb..06db813a4f 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen">
+  <plugin-setting v-if="isOpen" :fixed-name="PLUGIN_NAME.Bridge">
     <template #title>
       <div class="title-wrap">
         <span>{{ state.title }}</span>
@@ -112,7 +112,7 @@ import {
   getResourceNamesByType
 } from './js/resource'
 import { VueMonaco as MonacoEditor, PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
-import { useModal, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 
 const isOpen = ref(false)
@@ -151,6 +151,8 @@ export default {
     }
     const { confirm } = useModal()
 
+    const { PLUGIN_NAME } = useLayout()
+
     const state = reactive({
       resource: computed(() => getResource()),
       name: '',
@@ -273,6 +275,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       rules,
       resourceForm,
       editor,
diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue
index 12b2bc5015..64d010c270 100644
--- a/packages/plugins/datasource/src/DataSourceForm.vue
+++ b/packages/plugins/datasource/src/DataSourceForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen" title="设置数据源" class="data-source-form">
+  <plugin-setting v-if="isOpen" title="设置数据源" :fixed-name="PLUGIN_NAME.Collections" class="data-source-form">
     <template #header>
       <button-group>
         <tiny-button class="field-save" type="primary" @click="save">保存</tiny-button>
@@ -41,7 +41,14 @@ import {
   requestDeleteDataSource,
   requestGenerateDataSource
 } from './js/http'
-import { useModal, useDataSource, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import {
+  useLayout,
+  useModal,
+  useDataSource,
+  useNotify,
+  getMetaApi,
+  META_SERVICE
+} from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 
 let isOpen = ref(false)
@@ -84,6 +91,8 @@ export default {
       dataSource: {}
     })
 
+    const { PLUGIN_NAME } = useLayout()
+
     watch(
       () => state.dataSource.name,
       (value) => {
@@ -240,6 +249,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       isOpen,
       save,
diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
index c2b0a8f17f..a2990c67ad 100644
--- a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
+++ b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="isOpen" class="global-data-handler">
-    <plugin-setting title="全局设置" @cancel="close" @save="saveGlobalDataHandle">
+    <plugin-setting title="全局设置" :fixed-name="PLUGIN_NAME.Collections" @cancel="close" @save="saveGlobalDataHandle">
       <template #content>
         <tiny-collapse v-model="activeNames">
           <tiny-collapse-item title="请求参数处理函数（willFetch）" name="willFetch">
@@ -22,7 +22,7 @@
 import DataHandlerEditor from './RemoteDataAdapterForm.vue'
 import { watch, ref, nextTick, reactive } from 'vue'
 import { requestGlobalDataHandler } from './js/http'
-import { useModal, useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useModal, useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -48,6 +48,8 @@ export default {
   setup() {
     const { confirm } = useModal()
 
+    const { PLUGIN_NAME } = useLayout()
+
     const state = reactive({
       dataHandlerValue: useResource().appSchemaState?.dataHandler?.value,
       willFetchValue: useResource().appSchemaState.willFetch?.value,
@@ -86,6 +88,7 @@ export default {
     )
 
     return {
+      PLUGIN_NAME,
       isOpen,
       close,
       saveGlobalDataHandle,
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 2fda437b1a..500ca84504 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -3,6 +3,7 @@
     v-if="isOpen"
     :is-icon-button="false"
     :showIfFullScreen="true"
+    :fixed-name="PLUGIN_NAME.Collections"
     title="静态数据管理"
     class="datasource-record-list"
     @cancel="closeRecordList"
@@ -122,7 +123,7 @@ export default {
     const grid = ref(null)
     const { confirm } = useModal()
     const { toClipboard } = useClipboard()
-    const { layoutState } = useLayout()
+    const { layoutState, PLUGIN_NAME } = useLayout()
 
     const state = reactive({
       totalData: [],
@@ -559,6 +560,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       isOpen,
       state,
       grid,
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 1393b163ee..ff40ef257c 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-setting v-if="panel.show" :title="validGroup.groupName" @cancel="closeGroupPanel" @save="addBlocks">
+  <plugin-setting
+    v-if="panel.show"
+    :title="validGroup.groupName"
+    :fixed-name="PLUGIN_NAME.Materials"
+    @cancel="closeGroupPanel"
+    @save="addBlocks"
+  >
     <template #content>
       <div class="block-add-content">
         <div class="block-add-content-title">区块列表</div>
@@ -33,6 +39,7 @@ import { iconSearch } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import {
   useBlock,
+  useLayout,
   useModal,
   useResource,
   useNotify,
@@ -117,6 +124,8 @@ export default {
 
     const validGroup = ref({ ...selectedGroup.value })
 
+    const { PLUGIN_NAME } = useLayout()
+
     watch(
       () => selectedGroup.value.groupId,
       (groupId) => {
@@ -276,7 +285,8 @@ export default {
       panel,
       closeGroupPanel,
       addBlocks,
-      searchBlocks
+      searchBlocks,
+      PLUGIN_NAME
     }
   }
 }
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index fc9308c7be..8780be3771 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -1,5 +1,10 @@
 <template>
-  <plugin-setting v-if="isShow" :title="state.title" class="pageFolder-plugin-setting">
+  <plugin-setting
+    v-if="isShow"
+    :fixed-name="PLUGIN_NAME.AppManage"
+    :title="state.title"
+    class="pageFolder-plugin-setting"
+  >
     <template #header>
       <button-group>
         <tiny-button type="primary" @click="saveFolderSetting">保存</tiny-button>
@@ -32,6 +37,7 @@ import { Button, Collapse, CollapseItem } from '@opentiny/vue'
 import { PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import {
   usePage,
+  useLayout,
   useModal,
   useNotify,
   getMergeRegistry,
@@ -83,6 +89,8 @@ export default {
     const pageGeneral = registry.components.PageGeneral
     const folderGeneralRef = ref(null)
 
+    const { PLUGIN_NAME } = useLayout()
+
     const closeFolderSetting = () => {
       if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
         closeFolderSettingPanel()
@@ -197,6 +205,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       saveFolderSetting,
       deleteFolder: throttle(5000, true, deleteFolder),
       pageGeneral,
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 52010f030c..9e47841789 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isShow" :title="state.title" class="page-plugin-setting">
+  <plugin-setting v-if="isShow" :fixed-name="PLUGIN_NAME.AppManage" :title="state.title" class="page-plugin-setting">
     <template #header>
       <button-group>
         <tiny-button type="primary" @click="savePageSetting">保存</tiny-button>
@@ -136,6 +136,8 @@ export default {
     const beforeCreatePage = registry?.options?.beforeCreatePage
     const pageGeneralRef = ref(null)
 
+    const { PLUGIN_NAME } = useLayout()
+
     const state = reactive({
       activeName: Object.values(PAGE_SETTING_SESSION),
       title: '页面设置',
@@ -381,6 +383,7 @@ export default {
     }
 
     return {
+      PLUGIN_NAME,
       state,
       isShow,
       savePageSetting,
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index eaa886ac1f..2f43c3aff0 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import { reactive, ref, computed, onActivated, watch, provide } from 'vue'
+import { reactive, ref, computed, onActivated, watch, provide, watchEffect, nextTick } from 'vue'
 import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
 import {
   useCanvas,
@@ -144,7 +144,7 @@ export default {
     })
     const selectedKey = ref(null)
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getSettingPanelOffset } = useLayout()
 
     const panelState = reactive({
       emitEvent: emit
@@ -152,6 +152,16 @@ export default {
 
     provide('panelState', panelState)
 
+    watchEffect(() => {
+      if (isPanelShow.value) {
+        const offsetMargin = getSettingPanelOffset(PLUGIN_NAME.State)
+        nextTick(() => {
+          const dom = document?.querySelector('.data-source-right-panel')
+          dom.setAttribute('style', `margin-left: ${offsetMargin}`)
+        })
+      }
+    })
+
     watch(activeName, () => {
       selectedKey.value = null
     })

From 7a69f25f679ed26c2e32fa9c80a9be298cfc66d2 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 12 Feb 2025 05:13:36 -0800
Subject: [PATCH 08/25] fix: an error when the plugin is initialized

---
 packages/layout/src/composable/useLayout.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 3e5119e326..085c512184 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -144,18 +144,23 @@ const closePlugin = (forceClose) => {
 const isEmptyPage = () => layoutState.pageStatus?.state === PAGE_STATUS.Empty
 
 export default () => {
-  let plugin = ''
-  const pluginStorage = localStorage.getItem('plugin')
-  if (pluginStorage) {
-    plugin = pluginStorage
-  }
+  let plugin = []
 
   try {
-    plugin = JSON.parse(plugin)
+    const storedPlugin = localStorage.getItem('plugin')
+
+    if (storedPlugin) {
+      plugin = JSON.parse(storedPlugin)
+    }
   } catch (error) {
     throw new Error(error)
   }
 
+  // 如果 plugin 不是一个数组，则将其重置为默认值
+  if (!Array.isArray(plugin)) {
+    plugin = []
+  }
+
   const pluginStorageReactive = useStorage('plugin', plugin)
 
   // 获取插件宽度

From b1f4d00849066429d0dde2a3f95b240683fbdd55 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 12 Feb 2025 19:33:03 -0800
Subject: [PATCH 09/25] fix: update the plugin ID acquisition method

---
 packages/design-core/config/addons.js | 33 ---------------------------
 packages/design-core/config/plugin.js | 13 -----------
 packages/design-core/index.js         |  2 --
 packages/layout/src/Main.vue          | 10 ++++----
 4 files changed, 6 insertions(+), 52 deletions(-)
 delete mode 100644 packages/design-core/config/addons.js
 delete mode 100644 packages/design-core/config/plugin.js

diff --git a/packages/design-core/config/addons.js b/packages/design-core/config/addons.js
deleted file mode 100644
index ccbf622165..0000000000
--- a/packages/design-core/config/addons.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Breadcrumb from '@opentiny/tiny-engine-toolbar-breadcrumb'
-import Fullscreen from '@opentiny/tiny-engine-toolbar-fullscreen'
-import Lang from '@opentiny/tiny-engine-toolbar-lang'
-import Logo from '@opentiny/tiny-engine-toolbar-logo'
-import Media from '@opentiny/tiny-engine-toolbar-media'
-import Redoundo from '@opentiny/tiny-engine-toolbar-redoundo'
-import Save from '@opentiny/tiny-engine-toolbar-save'
-import Clean from '@opentiny/tiny-engine-toolbar-clean'
-import Preview from '@opentiny/tiny-engine-toolbar-preview'
-import Refresh from '@opentiny/tiny-engine-toolbar-refresh'
-import Collaboration from '@opentiny/tiny-engine-toolbar-collaboration'
-import Setting from '@opentiny/tiny-engine-toolbar-setting'
-
-import Materials from '@opentiny/tiny-engine-plugin-materials'
-import Script from '@opentiny/tiny-engine-plugin-script'
-import Tree from '@opentiny/tiny-engine-plugin-tree'
-import Help from '@opentiny/tiny-engine-plugin-help'
-import Schema from '@opentiny/tiny-engine-plugin-schema'
-import Page from '@opentiny/tiny-engine-plugin-page'
-import I18n from '@opentiny/tiny-engine-plugin-i18n'
-import Bridge from '@opentiny/tiny-engine-plugin-bridge'
-import Block from '@opentiny/tiny-engine-plugin-block'
-import Datasource from '@opentiny/tiny-engine-plugin-datasource'
-import Robot from '@opentiny/tiny-engine-plugin-robot'
-
-import Props from '@opentiny/tiny-engine-setting-props'
-import Events from '@opentiny/tiny-engine-setting-events'
-import Styles from '@opentiny/tiny-engine-setting-styles'
-
-export const addons = {
-  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Schema, Help, Robot, Props, Styles, Events],
-  toolbars: [Logo, Breadcrumb, Media, Collaboration, Clean, Refresh, Save, Preview, Redoundo, Fullscreen, Setting, Lang]
-}
diff --git a/packages/design-core/config/plugin.js b/packages/design-core/config/plugin.js
deleted file mode 100644
index 17a3a1c1b5..0000000000
--- a/packages/design-core/config/plugin.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import addons from './addons'
-
-const plugin = {}
-addons.plugins.forEach((item) => {
-  plugin[item.id] = item
-})
-
-export const getPlugin = (pluginName) => {
-  return plugin[pluginName] || null
-}
-export const getPluginById = (pluginId) => {
-  return Object.values(plugin).find((item) => item.id === pluginId) || null
-}
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
index 7780142985..0acacb5906 100644
--- a/packages/design-core/index.js
+++ b/packages/design-core/index.js
@@ -47,5 +47,3 @@ export {
 export { default as defaultRegistry } from './registry'
 
 export * from '@opentiny/tiny-engine-meta-register'
-
-export { addons } from './config/addons'
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index bbb2509305..ee8bb3ce3b 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -31,7 +31,7 @@ import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignSettings from './DesignSettings.vue'
 import meta from '../meta'
-import { addons } from '@opentiny/tiny-engine'
+import { META_APP as PLUGIN_NAME } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   name: 'TinyLowCode',
@@ -57,9 +57,11 @@ export default {
 
     // Step 1: 收集插件的 align 信息
     const alignGroups = {}
-    const pluginList = addons.plugins
+    const pluginIDList = Object.values(PLUGIN_NAME)
+      .filter((item) => item.includes('plugins'))
+      .map((value) => ({ id: value }))
 
-    pluginList.forEach((item) => {
+    pluginIDList.forEach((item) => {
       if (item.id) {
         const align = item.options?.align || 'leftTop'
         if (!alignGroups[align]) {
@@ -71,7 +73,7 @@ export default {
 
     // Step 2: 为每个插件分配 index 值
     const plugin = {}
-    pluginList.forEach((item) => {
+    pluginIDList.forEach((item) => {
       if (item.id) {
         const align = item.options?.align || 'leftTop'
         const index = alignGroups[align].indexOf(item.id)

From 6f34d828ead7f0c4feaf4504861a2a0c752e8b75 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 17 Feb 2025 00:52:48 -0800
Subject: [PATCH 10/25] fix: update color variables

---
 packages/plugins/schema/src/Main.vue | 6 +++---
 packages/plugins/script/src/Main.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 1e56d2c3a8..577a6286cf 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -185,7 +185,7 @@ export default {
 
 <style lang="less" scoped>
 .plugin-page-schema-container {
-  box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
+  box-shadow: 6px 0px 3px 0px var(--te-schema-panel-shadow-color);
   z-index: 1000;
 
   .icon-wrap {
@@ -203,7 +203,7 @@ export default {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background-color: var(--te-common-color-error);
+      background-color: var(--te-schema-dot-color);
       display: block;
       z-index: 100;
       position: absolute;
@@ -214,7 +214,7 @@ export default {
 
   .source-code-content {
     height: calc(100% - 12px);
-    border: 1px solid var(--te-common-border-divider);
+    border: 1px solid var(--te-schema-common-border-color);
     border-radius: 4px;
     margin: 0 12px;
   }
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 96d562e586..4265c26b2f 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -124,7 +124,7 @@ export default {
 
 <style lang="less" scoped>
 .plugin-page-js-container {
-  box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
+  box-shadow: 6px 0px 3px 0px var(--te-plugin-js-panel-shadow-color);
   z-index: 999;
 
   .icon-wrap {
@@ -142,7 +142,7 @@ export default {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background-color: var(--te-common-color-error);
+      background: var(--te-plugin-js-dot-color);
       display: block;
       z-index: 100;
       position: absolute;

From 185cfa79b1ab02c080db1790b154bca5a55888e2 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 17 Feb 2025 17:32:43 -0800
Subject: [PATCH 11/25] fix: designer style exception

---
 packages/plugins/bridge/src/Main.vue               | 1 +
 packages/plugins/state/src/Main.vue                | 2 +-
 packages/plugins/state/src/styles/vars.less        | 2 +-
 packages/theme/base/src/page/base-config-page.less | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue
index a00b5aa8cd..c0dd388f07 100644
--- a/packages/plugins/bridge/src/Main.vue
+++ b/packages/plugins/bridge/src/Main.vue
@@ -1,6 +1,7 @@
 <template>
   <plugin-panel
     title="资源管理"
+    class="bridge-manage"
     :fixed-name="PLUGIN_NAME.Bridge"
     :fixedPanels="fixedPanels"
     :isCloseLeft="false"
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 2f43c3aff0..0c8486d1a8 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -45,7 +45,7 @@
     </template>
   </plugin-panel>
 
-  <div v-if="isPanelShow" class="data-source-right-panel">
+  <div v-if="isPanelShow" class="data-source-right-panel data-source">
     <div class="header">
       <span>{{ addDataSource }}</span>
       <span class="options-wrap">
diff --git a/packages/plugins/state/src/styles/vars.less b/packages/plugins/state/src/styles/vars.less
index 3fd0a9ea23..af65e1cf43 100644
--- a/packages/plugins/state/src/styles/vars.less
+++ b/packages/plugins/state/src/styles/vars.less
@@ -1,4 +1,4 @@
-#data-source {
+.data-source {
   --te-state-add-btn-border-color: var(--te-common-border-default);
   --te-state-add-btn-border-color-hover: var(--te-common-border-hover);
   --te-state-add-btn-icon-color: var(--te-common-icon-secondary);
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index 59f8f41879..e2d1ac74f0 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -40,7 +40,7 @@ body {
   --base-bottom-panel-height: 30px;
   --base-nav-panel-width: 40px;
   --base-collection-panel-width: calc(
-    (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px)) / 2
+    (99vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px)) / 2
   );
   --base-collection-panel-full-screen-width: calc(
     (100vw - (var(--base-left-panel-width) + var(--base-right-panel-width) + var(--base-nav-panel-width) - 1px))

From 961338b20669f8c327cb3882e6be1f48d758bc27 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 18 Feb 2025 03:49:55 -0800
Subject: [PATCH 12/25] feat: right column layout transformation and fixed
 logic unity

---
 packages/layout/src/DesignSettings.vue      | 341 +++++++++++++++-----
 packages/layout/src/Main.vue                |  36 ++-
 packages/layout/src/composable/useLayout.js |  34 +-
 packages/settings/events/index.js           |   4 +-
 packages/settings/events/meta.js            |   5 +-
 packages/settings/events/src/Main.vue       |  37 ++-
 packages/settings/props/meta.js             |   5 +-
 packages/settings/props/src/Main.vue        |  35 +-
 packages/settings/styles/meta.js            |   5 +-
 packages/settings/styles/src/Main.vue       | 136 ++++----
 10 files changed, 462 insertions(+), 176 deletions(-)

diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 63621184ec..d2fafdee15 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -1,39 +1,146 @@
+<!-- 右侧插件栏 -->
 <template>
-  <div id="tiny-right-panel">
-    <tiny-tabs v-model="layoutState.settings.render">
-      <tiny-tab-item v-for="(setting, index) in settings" :key="index" :title="setting.title" :name="setting.name">
-        <component :is="setting.entry"></component>
-        <div v-show="activating" class="active"></div>
-      </tiny-tab-item>
-    </tiny-tabs>
-    <div v-if="layoutState.settings.render === 'style'" class="tabs-setting">
-      <tiny-tooltip effect="light" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
-        <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
-      </tiny-tooltip>
+  <div :class="{ 'not-selected': getMoveDragBarState() }">
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-right-panel"
+      :class="[renderPanel, { 'is-fixed': rightFixedPanelsStorage.includes(renderPanel) }]"
+    >
+      <div class="right-panel-wrap">
+        <component
+          :is="components[renderPanel]"
+          :fixed-panels="rightFixedPanelsStorage"
+          @close="close"
+          @fixPanel="fixPanel"
+        ></component>
+        <div v-show="activating" class="active2" />
+      </div>
+      <div v-if="renderPanel === 'engine.setting.styles'" class="tabs-setting">
+        <tiny-tooltip effect="light" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
+          <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
+        </tiny-tooltip>
+      </div>
     </div>
   </div>
+  <div id="tiny-engine-nav-panel">
+    <vue-draggable-next id="rightTop" v-model="settingPlugins" class="nav-panel-lists" group="plugins" @end="onEnd">
+      <div
+        v-for="(item, index) in settingPlugins"
+        :key="index"
+        :class="['list-item', { 'first-item': item === settingPlugins[0], active: item.id === renderPanel }]"
+        :title="item.title"
+        @click="clickMenu({ item, index })"
+        @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.rightTop)"
+      >
+        <span class="item-icon" v-if="getPluginShown(item.id)">
+          <svg-icon v-if="iconComponents[item.id]" :name="iconComponents[item.id]" class="panel-icon"></svg-icon>
+          <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+        </span>
+      </div>
+      <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)"></div>
+    </vue-draggable-next>
+  </div>
 </template>
 
 <script>
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, watch, toRefs } from 'vue'
 import { Tabs, TabItem, Tooltip } from '@opentiny/vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
+import { VueDraggableNext } from 'vue-draggable-next'
 
 export default {
   components: {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
-    TinyTooltip: Tooltip
+    TinyTooltip: Tooltip,
+    VueDraggableNext
   },
   props: {
     settings: {
       type: Array,
       default: () => []
+    },
+    renderPanel: {
+      type: String
     }
   },
-  setup() {
-    const { layoutState } = useLayout()
-    const activating = computed(() => layoutState.settings.activating)
+  setup(props, { emit }) {
+    const components = {}
+    const iconComponents = {}
+
+    const {
+      PLUGIN_POSITION,
+      rightFixedPanelsStorage,
+      registerPluginApi,
+      changeRightFixedPanels,
+      dragPluginLayout,
+      isSameSide,
+      getPluginShown,
+      getMoveDragBarState,
+      layoutState: { settings: settingsState }
+    } = useLayout()
+
+    const rightMenu = ref(null)
+    const { renderPanel } = toRefs(props)
+    const showContextMenu = (event, type, item, index, align) => {
+      if (!type) {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type)
+      } else {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type, item, index, align)
+      }
+    }
+
+    const settingPlugins = ref(props.settings)
+
+    settingPlugins.value.forEach(({ id, entry, api, icon }) => {
+      components[id] = entry
+      iconComponents[id] = icon
+      if (api) {
+        registerPluginApi({
+          [id]: api
+        })
+      }
+    })
+
+    const close = () => {
+      useLayout().closeSetting(true)
+    }
+
+    const switchAlign = (index, id, list, align) => {
+      settingPlugins.value.splice(index, 1)
+      emit('changeRightAlign', id)
+      dragPluginLayout(list, align, index, 0)
+    }
+
+    const setRender = (curId) => {
+      settingsState.render = curId
+    }
+
+    //点击右侧菜单icon按钮
+    const clickMenu = ({ item }) => {
+      if (settingsState.render == item.id) {
+        useLayout().closeSetting(true)
+        return
+      }
+      setRender(item.id)
+    }
+
+    watch(renderPanel, (n) => {
+      setRender(n)
+    })
+
+    //切换面板状态
+    const fixPanel = (pluginName) => {
+      changeRightFixedPanels(pluginName)
+    }
+
+    //监听拖拽结束事件
+    const onEnd = (e) => {
+      if (!isSameSide(e.from.id, e.to.id)) close()
+      dragPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex)
+    }
+
+    const activating = computed(() => settingsState.activating)
     const showMask = ref(true)
     const isCollapsed = ref(false)
     const settingIcon = computed(() => (isCollapsed.value ? 'collapse_all' : 'expand_all'))
@@ -45,86 +152,170 @@ export default {
       isCollapsed,
       activating,
       settingIcon,
-      layoutState
+      settingsState,
+      settingPlugins,
+      components,
+      iconComponents,
+      clickMenu,
+      close,
+      fixPanel,
+      rightFixedPanelsStorage,
+      onEnd,
+      showContextMenu,
+      PLUGIN_POSITION,
+      getPluginShown,
+      switchAlign,
+      rightMenu,
+      getMoveDragBarState
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-#tiny-right-panel {
-  width: var(--base-right-panel-width);
-  height: 100%;
-  transition: 0.3s linear;
-  position: relative;
-  border-left: 1px solid var(--te-layout-common-border-color);
-  padding-top: 12px;
-  background-color: var(--te-layout-common-bg-color);
-
-  .tabs-setting {
-    position: absolute;
-    top: 9px;
-    right: 18px;
-    line-height: 26px;
-    color: var(--te-layout-common-icon-color);
-    cursor: pointer;
+#tiny-engine-right-panel {
+  height: calc(100vh - var(--base-top-panel-height));
+  border-left: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
+  background: var(--ti-lowcode-common-component-bg);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: var(--base-top-panel-height);
+  right: var(--base-nav-panel-width);
+  z-index: 999;
+
+  &.I18n {
+    width: auto;
+  }
+
+  &.is-fixed {
+    position: relative;
+    top: 0;
+    right: 0;
   }
-  .tiny-tabs {
+
+  .right-panel-wrap {
+    width: 100%;
     height: 100%;
+    position: relative;
+    :deep(.tiny-tabs__nav.is-show-active-bar) .tiny-tabs__item {
+      margin-right: 0;
+    }
   }
-  :deep(.tiny-tabs) {
+}
+
+.tabs-setting {
+  position: absolute;
+  top: 9px;
+  right: 78px;
+  line-height: 26px;
+  color: var(--te-component-common-icon-color-primary);
+  cursor: pointer;
+}
+
+#tiny-engine-nav-panel {
+  display: none;
+  width: var(--base-nav-panel-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--te-layout-common-bg-color);
+  box-sizing: border-box;
+  z-index: 1000;
+  border-left: 1px solid var(--te-layout-common-border-color);
+
+  &.completed {
+    display: block;
+  }
+
+  .nav-panel-lists {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    .tiny-tabs__header .tiny-tabs__nav {
-      width: 60%;
-      background-color: var(--te-layout-common-bg-color);
-    }
-    .tiny-tabs__nav-scroll {
-      margin-left: 12px;
-      .tiny-tabs__active-bar {
-        height: 3px;
-        background-color: var(--te-layout-common-text-color-active);
-      }
-    }
 
-    .tiny-tabs__content {
+    &.bottom {
       flex: 1;
-      overflow-y: auto;
-      padding: 0;
-      margin: 0;
+      padding-bottom: 28px;
     }
-    .tiny-tabs__nav.is-show-active-bar .tiny-tabs__item {
-      margin-right: 8px;
-    }
-    .tiny-tabs__item {
-      flex: 1;
-      background-color: var(--te-layout-common-bg-color);
-      color: var(--te-layout-common-text-color-secondary);
-      margin-right: 5px;
-      &:hover {
-        color: var(--te-layout-common-text-color-hover);
+
+    .list-item {
+      width: 100%;
+      padding: 3px 0;
+
+      &:first-child {
+        padding-top: 12px;
+      }
+
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover,
+      &.active {
+        .item-icon {
+          background: var(--te-layout-common-bg-color-hover);
+          border-radius: 4px;
+        }
       }
-      &.is-active {
-        color: var(--te-layout-common-text-color-active);
-        border: none;
+
+      &.active {
+        position: relative;
+
+        .item-icon {
+          color: var(--te-layout-common-text-color-secondary-checked);
+        }
       }
 
-      .tiny-tabs__item__title {
-        padding-bottom: 6px;
+      &.prev {
+        border-bottom-color: var(--te-layout-common-border-color);
       }
     }
 
-    .tiny-tabs__nav-wrap-not-separator::after {
-      z-index: 2;
+    .item-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--te-layout-common-text-color);
+      font-size: 22px;
+      width: 26px;
+      height: 26px;
+
+      svg {
+        font-size: 18px;
+      }
+      .public-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 26px;
+        height: 26px;
+      }
     }
   }
+}
 
-  :deep(.tiny-collapse-item__content) {
-    padding: 0 8px 12px 12px; // 这里的bottom为4px + 内部行元素与底部的距离为8px = 12px
-  }
+:deep(.panel-svg) {
+  font-size: 18px;
 }
 
-.active {
+:deep(.svg-icon.icon-plugin-icon-plugin-help) {
+  font-size: 18px;
+}
+
+.not-selected {
+  pointer-events: none;
+  user-select: none;
+}
+
+:deep(.svg-icon.icon-plugin-icon-plugin-help) {
+  font-size: 22px;
+}
+
+//高亮显示动画
+.active2 {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -135,10 +326,14 @@ export default {
 
 @keyframes glow {
   0% {
-    box-shadow: inset 0px 0px 4px var(--te-layout-setting-bg-color-hover);
+    box-shadow: inset 0px 0px 4px var(--ti-lowcode-canvas-handle-hover-bg);
   }
   100% {
-    box-shadow: inset 0px 0px 14px var(--te-layout-setting-bg-color-hover);
+    box-shadow: inset 0px 0px 14px var(--ti-lowcode-canvas-handle-hover-bg);
   }
 }
+
+.not-selected {
+  user-select: none;
+}
 </style>
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index ee8bb3ce3b..62f205e1f7 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -16,6 +16,7 @@
         <div class="tiny-engine-right-wrap">
           <design-settings
             :settings="registry.settings"
+            :render-panel="settings.render"
             v-show="layoutState.settings.showDesignSettings"
             ref="right"
           ></design-settings>
@@ -31,7 +32,6 @@ import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignSettings from './DesignSettings.vue'
 import meta from '../meta'
-import { META_APP as PLUGIN_NAME } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   name: 'TinyLowCode',
@@ -50,18 +50,26 @@ export default {
       type: Object
     }
   },
-  setup() {
+  setup(props) {
     const layoutRegistry = getMergeRegistry(meta.type)
     const configProvider = layoutRegistry.options.configProvider
     const configProviderDesign = layoutRegistry.options.configProviderDesign
 
-    // Step 1: 收集插件的 align 信息
+    const { layoutState } = useLayout()
+    const { plugins, settings } = layoutState
+
+    const toggleNav = ({ item }) => {
+      if (!item.id) return
+      plugins.render = plugins.render === item.id ? null : item.id
+    }
+
+    // 收集插件的 align 信息
     const alignGroups = {}
-    const pluginIDList = Object.values(PLUGIN_NAME)
-      .filter((item) => item.includes('plugins'))
-      .map((value) => ({ id: value }))
 
-    pluginIDList.forEach((item) => {
+    // 合并插件和设置列表
+    const pluginList = [...props.registry.plugins, ...props.registry.settings]
+
+    pluginList.forEach((item) => {
       if (item.id) {
         const align = item.options?.align || 'leftTop'
         if (!alignGroups[align]) {
@@ -73,7 +81,7 @@ export default {
 
     // Step 2: 为每个插件分配 index 值
     const plugin = {}
-    pluginIDList.forEach((item) => {
+    pluginList.forEach((item) => {
       if (item.id) {
         const align = item.options?.align || 'leftTop'
         const index = alignGroups[align].indexOf(item.id)
@@ -88,19 +96,12 @@ export default {
     })
     localStorage.setItem('plugin', JSON.stringify(plugin))
 
-    const { layoutState } = useLayout()
-    const { plugins } = layoutState
-
-    const toggleNav = ({ item }) => {
-      if (!item.id) return
-      plugins.render = plugins.render === item.id ? null : item.id
-    }
-
     return {
       layoutRegistry,
       configProvider,
       configProviderDesign,
       plugins,
+      settings,
       toggleNav,
       layoutState
     }
@@ -132,7 +133,8 @@ export default {
     }
   }
   .tiny-engine-right-wrap {
-    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
     z-index: 4;
   }
   :deep(.monaco-editor .suggest-widget) {
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 085c512184..bf8b193fbf 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -52,7 +52,7 @@ const layoutState = reactive({
   settings: {
     isShow: true,
     fixedPanels: [],
-    render: 'props',
+    render: 'engine.setting.props',
     api: null,
     activating: false, // 右侧面版激活提示状态
     showDesignSettings: true
@@ -96,6 +96,26 @@ const changeRightFixedPanels = (pluginName) => {
     : [...rightFixedPanelsStorage.value, pluginName]
 }
 
+const registerPluginApi = (api) => {
+  Object.assign(layoutState.plugins.api, api)
+}
+
+const getPluginApi = (pluginName) => {
+  const { plugins } = layoutState
+
+  return plugins.api[pluginName] || plugins.api
+}
+
+export const getPlugin = (pluginName) => {
+  // TODO: 暂时先这样，明天优化
+  return pluginName
+}
+
+export const getPluginById = (pluginId) => {
+  // TODO: 暂时先这样，明天优化
+  return pluginId
+}
+
 const getScale = () => layoutState.dimension.scale
 
 const getPluginState = () => layoutState.plugins
@@ -120,6 +140,13 @@ const activeSetting = (name) => {
   })
 }
 
+const closeSetting = (forceClose) => {
+  const { settings } = layoutState
+  if (!settings.fixedPanels.includes(settings.render) || forceClose) {
+    settings.render = null
+  }
+}
+
 // 激活plugin面板并返回当前插件注册的Api
 const activePlugin = (name, noActiveRender) => {
   const { plugins } = layoutState
@@ -273,12 +300,17 @@ export default () => {
     PLUGIN_NAME,
     PLUGIN_POSITION,
     activeSetting,
+    closeSetting,
     activePlugin,
     closePlugin,
     layoutState,
     getScale,
     setDimension,
     getDimension,
+    registerPluginApi,
+    getPlugin,
+    getPluginById,
+    getPluginApi,
     pluginState,
     getPluginState,
     isEmptyPage,
diff --git a/packages/settings/events/index.js b/packages/settings/events/index.js
index 785a2a2c7b..a088702aee 100644
--- a/packages/settings/events/index.js
+++ b/packages/settings/events/index.js
@@ -20,9 +20,7 @@ import './src/styles/vars.less'
 export default {
   ...metaData,
   entry,
-  options: {
-    commonEvents
-  },
+  options: Object.assign({}, commonEvents, metaData.options),
   components: {
     BindEventsDialogSidebar,
     BindEventsDialogContent
diff --git a/packages/settings/events/meta.js b/packages/settings/events/meta.js
index 4f3b9bd69a..9f871ecb30 100644
--- a/packages/settings/events/meta.js
+++ b/packages/settings/events/meta.js
@@ -4,5 +4,8 @@ export default {
   type: 'setting',
   align: 'left',
   name: 'event',
-  icon: ''
+  icon: 'target',
+  options: {
+    align: 'rightTop'
+  }
 }
diff --git a/packages/settings/events/src/Main.vue b/packages/settings/events/src/Main.vue
index 4ed763bcb2..12d3dd81f9 100644
--- a/packages/settings/events/src/Main.vue
+++ b/packages/settings/events/src/Main.vue
@@ -1,19 +1,38 @@
 <template>
-  <tiny-collapse v-model="activeNames">
-    <tiny-collapse-item title="事件绑定" name="bindEvent">
-      <bind-events></bind-events>
-    </tiny-collapse-item>
-    <tiny-collapse-item title="高级配置" name="advancedConfig">
-      <advance-config></advance-config>
-    </tiny-collapse-item>
-  </tiny-collapse>
+  <plugin-panel title="高级" :fixed-panels="fixedPanels" :fixed-name="PLUGIN_NAME.Event" @close="$emit('close')">
+    <template #content>
+      <tiny-collapse v-model="activeNames">
+        <tiny-collapse-item title="事件绑定" name="bindEvent">
+          <bind-events></bind-events>
+        </tiny-collapse-item>
+        <tiny-collapse-item title="高级配置" name="advancedConfig">
+          <advance-config></advance-config>
+        </tiny-collapse-item>
+      </tiny-collapse>
+    </template>
+  </plugin-panel>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive, provide, defineProps, defineEmits } from 'vue'
 import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
 import BindEvents from './components/BindEvents.vue'
 import AdvanceConfig from './components/AdvanceConfig.vue'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
 
 const activeNames = ref(['bindEvent', 'advancedConfig'])
+const { PLUGIN_NAME } = useLayout()
+
+defineProps({
+  fixedPanels: Array
+})
+
+const emit = defineEmits([])
+
+const panelState = reactive({
+  emitEvent: emit
+})
+
+provide('panelState', panelState)
 </script>
diff --git a/packages/settings/props/meta.js b/packages/settings/props/meta.js
index 4ea095d2ea..bb9b62f6cf 100644
--- a/packages/settings/props/meta.js
+++ b/packages/settings/props/meta.js
@@ -4,5 +4,8 @@ export default {
   type: 'setting',
   align: 'left',
   name: 'props',
-  icon: ''
+  icon: 'form',
+  options: {
+    align: 'rightTop'
+  }
 }
diff --git a/packages/settings/props/src/Main.vue b/packages/settings/props/src/Main.vue
index 3b64f75aa9..4f80031e70 100644
--- a/packages/settings/props/src/Main.vue
+++ b/packages/settings/props/src/Main.vue
@@ -1,17 +1,21 @@
 <template>
-  <config-render :data="properties">
-    <template #prefix="{ data }">
-      <block-link-field v-if="isBlock" :data="data"></block-link-field>
+  <plugin-panel title="属性" :fixed-panels="fixedPanels" :fixed-name="PLUGIN_NAME.Props" @close="$emit('close')">
+    <template #content>
+      <config-render :data="properties">
+        <template #prefix="{ data }">
+          <block-link-field v-if="isBlock" :data="data"></block-link-field>
+        </template>
+      </config-render>
+      <block-description v-if="isBlock" class="block-description"> </block-description>
+      <empty :showEmptyTips="showEmptyTips"></empty>
     </template>
-  </config-render>
-  <block-description v-if="isBlock" class="block-description"> </block-description>
-  <empty :showEmptyTips="showEmptyTips"></empty>
+  </plugin-panel>
 </template>
 
 <script>
-import { computed, watchEffect, ref } from 'vue'
-import { ConfigRender, BlockDescription, BlockLinkField } from '@opentiny/tiny-engine-common'
-import { useCanvas, useProperty } from '@opentiny/tiny-engine-meta-register'
+import { computed, watchEffect, ref, reactive, provide } from 'vue'
+import { ConfigRender, BlockDescription, BlockLinkField, PluginPanel } from '@opentiny/tiny-engine-common'
+import { useCanvas, useProperty, useLayout } from '@opentiny/tiny-engine-meta-register'
 import Empty from './components/Empty.vue'
 
 export default {
@@ -19,13 +23,21 @@ export default {
     ConfigRender,
     BlockLinkField,
     BlockDescription,
-    Empty
+    Empty,
+    PluginPanel
   },
-  setup() {
+  setup(props, { emit }) {
     const { pageState } = useCanvas()
     const { properties } = useProperty().getProperty({ pageState })
     const showEmptyTips = ref(false)
 
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
+
     const isBlock = computed(() => pageState.isBlock)
 
     watchEffect(() => {
@@ -33,6 +45,7 @@ export default {
     })
 
     return {
+      PLUGIN_NAME,
       isBlock,
       properties,
       showEmptyTips
diff --git a/packages/settings/styles/meta.js b/packages/settings/styles/meta.js
index e1d179f89f..b3090c77e5 100644
--- a/packages/settings/styles/meta.js
+++ b/packages/settings/styles/meta.js
@@ -4,5 +4,8 @@ export default {
   name: 'style',
   type: 'setting',
   align: 'left',
-  icon: ''
+  icon: 'display-inline',
+  options: {
+    align: 'rightTop'
+  }
 }
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index eb8a2b86f3..13f074ecd7 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -1,75 +1,79 @@
 <template>
-  <div class="style-editor">
-    <div class="line-style">
-      <span class="line-text"> 行内样式 </span>
-      <div class="inline-style">
-        <component
-          :is="CodeConfigurator"
-          v-if="state.lineStyleDisable"
-          :buttonShowContent="true"
-          :modelValue="state.styleContent"
-          title="编辑行内样式"
-          :button-text="state.inlineBtnText"
-          language="css"
-          single
-          @save="save"
-        ></component>
-        <div v-if="!state.lineStyleDisable">
-          <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
+  <plugin-panel title="样式" :fixed-panels="fixedPanels" :fixed-name="PLUGIN_NAME.Styles" @close="$emit('close')">
+    <template #content>
+      <div class="style-editor">
+        <div class="line-style">
+          <span class="line-text"> 行内样式 </span>
+          <div class="inline-style">
+            <component
+              :is="CodeConfigurator"
+              v-if="state.lineStyleDisable"
+              :buttonShowContent="true"
+              :modelValue="state.styleContent"
+              title="编辑行内样式"
+              :button-text="state.inlineBtnText"
+              language="css"
+              single
+              @save="save"
+            ></component>
+            <div v-if="!state.lineStyleDisable">
+              <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
+            </div>
+            <component
+              :is="VariableConfigurator"
+              ref="bindVariable"
+              :model-value="state.bindModelValue"
+              name="advance"
+              @update:modelValue="setConfig"
+            >
+            </component>
+          </div>
         </div>
-        <component
-          :is="VariableConfigurator"
-          ref="bindVariable"
-          :model-value="state.bindModelValue"
-          name="advance"
-          @update:modelValue="setConfig"
-        >
-        </component>
       </div>
-    </div>
-  </div>
-  <class-names-container></class-names-container>
-  <tiny-collapse v-model="activeNames" @change="handoverGroup">
-    <tiny-collapse-item title="布局" name="layout">
-      <layout-group :display="state.style.display" @update="updateStyle" />
-      <flex-box v-if="state.style.display === 'flex'" :style="state.style" @update="updateStyle"></flex-box>
-      <grid-box v-if="state.style.display === 'grid'" :style="state.style" @update="updateStyle"></grid-box>
-    </tiny-collapse-item>
+      <class-names-container></class-names-container>
+      <tiny-collapse v-model="activeNames" @change="handoverGroup">
+        <tiny-collapse-item title="布局" name="layout">
+          <layout-group :display="state.style.display" @update="updateStyle" />
+          <flex-box v-if="state.style.display === 'flex'" :style="state.style" @update="updateStyle"></flex-box>
+          <grid-box v-if="state.style.display === 'grid'" :style="state.style" @update="updateStyle"></grid-box>
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="间距" name="spacing">
-      <spacing-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="间距" name="spacing">
+          <spacing-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="尺寸" name="size">
-      <size-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="尺寸" name="size">
+          <size-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="定位" name="position">
-      <position-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="定位" name="position">
+          <position-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="文本" name="typography">
-      <typography-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="文本" name="typography">
+          <typography-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="背景" name="backgrounds">
-      <background-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="背景" name="backgrounds">
+          <background-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="边框" name="borders">
-      <border-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
+        <tiny-collapse-item title="边框" name="borders">
+          <border-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
 
-    <tiny-collapse-item title="效果" name="effects" class="effects-style">
-      <effect-group :style="state.style" @update="updateStyle" />
-    </tiny-collapse-item>
-  </tiny-collapse>
+        <tiny-collapse-item title="效果" name="effects" class="effects-style">
+          <effect-group :style="state.style" @update="updateStyle" />
+        </tiny-collapse-item>
+      </tiny-collapse>
+    </template>
+  </plugin-panel>
 </template>
 
 <script>
-import { watch, inject, ref } from 'vue'
+import { watch, inject, ref, reactive, provide } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
-import { useHistory, useCanvas, useProperties, getConfigurator } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useHistory, useCanvas, useProperties, getConfigurator } from '@opentiny/tiny-engine-meta-register'
 import {
   SizeGroup,
   LayoutGroup,
@@ -85,10 +89,12 @@ import {
 } from './components'
 import { CSS_TYPE } from './js/cssType'
 import useStyle from './js/useStyle'
+import { PluginPanel } from '@opentiny/tiny-engine-common'
 import { styleStrRemoveRoot } from './js/cssConvert'
 
 export default {
   components: {
+    PluginPanel,
     SizeGroup,
     LayoutGroup,
     FlexBox,
@@ -104,7 +110,12 @@ export default {
     TinyCollapseItem: CollapseItem,
     TinyInput: Input
   },
-  setup() {
+  props: {
+    fixedPanels: {
+      type: Array
+    }
+  },
+  setup(props, { emit }) {
     const CodeConfigurator = getConfigurator('CodeConfigurator')
     const VariableConfigurator = getConfigurator('VariableConfigurator')
     const styleCategoryGroup = [
@@ -124,6 +135,12 @@ export default {
     const { state, updateStyle } = useStyle() // updateStyle
     const { addHistory } = useHistory()
     const { getSchema, setProp } = useProperties()
+    const { PLUGIN_NAME } = useLayout()
+
+    const panelState = reactive({
+      emitEvent: emit
+    })
+    provide('panelState', panelState)
 
     const handoverGroup = (actives) => {
       if (isCollapsed.value) {
@@ -208,6 +225,7 @@ export default {
     )
 
     return {
+      PLUGIN_NAME,
       CodeConfigurator,
       VariableConfigurator,
       state,

From ffb1ded9ca2bb8e5d96eaf301be74fcfcbcb5d17 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 19 Feb 2025 04:40:33 -0800
Subject: [PATCH 13/25] fix: refactor right plug-in bar display and child panel
 misalignment

---
 packages/common/component/PluginPanel.vue   | 15 ++++++---
 packages/common/component/PluginSetting.vue | 29 +++++++++++++++---
 packages/layout/package.json                |  3 +-
 packages/layout/src/DesignPlugins.vue       | 28 ++++++++++++++---
 packages/layout/src/DesignSettings.vue      | 34 +++++++++++++++------
 packages/layout/src/Main.vue                |  2 ++
 packages/layout/src/composable/useLayout.js | 32 ++++++-------------
 packages/plugins/schema/src/Main.vue        |  1 +
 packages/plugins/state/src/Main.vue         | 21 +++++--------
 packages/settings/events/src/Main.vue       |  8 ++++-
 packages/settings/props/src/Main.vue        |  8 ++++-
 packages/settings/styles/src/Main.vue       |  1 -
 12 files changed, 117 insertions(+), 65 deletions(-)

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index 77b5bae078..623d297709 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="plugin-panel" ref="panel" :style="{ width: panelWidth + 'px' }">
-    <div class="plugin-panel-header">
+    <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
@@ -78,6 +78,13 @@ export default {
      */
     fixedName: {
       type: String
+    },
+    /**
+     * 自定义标题下边距
+     */
+    headerMarginBottom: {
+      type: Number,
+      default: 12
     }
   },
   emits: ['close'],
@@ -109,15 +116,13 @@ export default {
     const onMouseMoveRight = (event) => {
       const newWidth = startWidth + (event.clientX - startX)
       panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
-      const offset = panelWidth.value - MIN_WIDTH
-      changePluginWidth(props.fixedName, panelWidth.value, offset)
+      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))
-      const offset = panelWidth.value - MIN_WIDTH
-      changePluginWidth(props.fixedName, panelWidth.value, offset)
+      changePluginWidth(props.fixedName, panelWidth.value)
     }
 
     //节流
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index 7b229ce739..124cc85ad7 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -2,6 +2,7 @@
   <div
     id="panel-setting"
     :class="['plugin-setting', { 'second-panel': isSecond }, { 'full-screen': state.isFullScreen }]"
+    :style="{ left: `${firstPanelOffset}px` }"
     @click="$emit('click')"
   >
     <div class="plugin-setting-header">
@@ -32,7 +33,7 @@
 </template>
 
 <script>
-import { nextTick, reactive, watchEffect } from 'vue'
+import { nextTick, reactive, watchEffect, computed } from 'vue'
 import { Button } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
 import ButtonGroup from './ButtonGroup.vue'
@@ -97,6 +98,10 @@ export default {
     fixedName: {
       type: String,
       default: ''
+    },
+    align: {
+      type: String,
+      default: 'leftTop'
     }
   },
   emits: [EVENTS.FULL_SCREEN_CHANGE, EVENTS.SAVE, EVENTS.CANCEL, EVENTS.ADD, EVENTS.CLICK],
@@ -105,13 +110,17 @@ export default {
       isFullScreen: false
     })
 
-    const { getSettingPanelOffset } = useLayout()
+    const { getPluginWidth } = useLayout()
+
+    const firstPanelOffset = computed(() => {
+      return getPluginWidth(props.fixedName)
+    })
 
     watchEffect(() => {
-      const offsetMargin = getSettingPanelOffset(props.fixedName)
+      // 处理二级面板偏移量
+      const secondPanelOffset = document.querySelector('.plugin-setting')?.clientWidth + firstPanelOffset.value
       nextTick(() => {
-        const dom = document?.getElementById('panel-setting')
-        dom.setAttribute('style', `margin-left: ${offsetMargin}`)
+        document.querySelector('.second-panel')?.style.setProperty('left', `${secondPanelOffset}px`)
       })
     })
 
@@ -129,6 +138,7 @@ export default {
     }
 
     return {
+      firstPanelOffset,
       state,
       fullScreen,
       getFullScreenLabel
@@ -148,11 +158,13 @@ export default {
   background: var(--te-component-common-bg-color);
   overflow: hidden;
   border-left: 1px solid var(--te-component-common-border-color-divider);
+
   &:not(.second-panel) {
     box-shadow: 6px 0px 3px 0px var(--te-component-common-shadow-color);
     border-right: none;
     border-left: none;
   }
+
   &.full-screen {
     width: var(--base-collection-panel-full-screen-width);
   }
@@ -183,6 +195,7 @@ export default {
     color: var(--te-component-common-text-color-primary);
     padding: 0 12px;
     border-bottom: 1px solid var(--te-component-common-border-color-divider);
+
     .plugin-setting-header-title {
       font-size: 12px;
       font-weight: 700;
@@ -191,9 +204,11 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
     :deep(.svg-button + .svg-button) {
       margin: 0;
     }
+
     :deep(.tiny-button.tiny-button) {
       margin-right: 0;
     }
@@ -211,4 +226,8 @@ export default {
     align-items: center;
   }
 }
+
+.align-right {
+  right: 0;
+}
 </style>
diff --git a/packages/layout/package.json b/packages/layout/package.json
index ad2821f2dc..4d32c41da6 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -26,7 +26,8 @@
     "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-meta-register": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
-    "@vueuse/core": "^9.6.0"
+    "@vueuse/core": "^9.6.0",
+    "vue-draggable-next": "2.1.0"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 7c8e3147cb..0310c37fe1 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -1,7 +1,15 @@
+<!-- 左侧插件栏-->
 <template>
   <div id="tiny-engine-nav-panel" :style="{ 'pointer-events': pluginState.pluginEvent }">
-    <ul class="nav-panel-lists top">
-      <li
+    <vue-draggable-next
+      v-model="state.topNavLists"
+      filter="EditorHelp"
+      class="nav-panel-lists top"
+      id="leftTop"
+      group="plugins"
+      @end="onEnd"
+    >
+      <div
         v-for="(item, index) in state.topNavLists"
         :key="index"
         :class="{
@@ -12,6 +20,7 @@
         }"
         :title="item.title"
         @click="clickMenu({ item, index })"
+        @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.leftTop)"
       >
         <div>
           <span class="item-icon">
@@ -23,8 +32,8 @@
             <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
           </span>
         </div>
-      </li>
-    </ul>
+      </div>
+    </vue-draggable-next>
     <ul class="nav-panel-lists bottom">
       <li style="flex: 1" class="list-item"></li>
       <li
@@ -77,6 +86,7 @@
 <script>
 import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
+import { VueDraggableNext } from 'vue-draggable-next'
 import { useLayout, usePage, useModal, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
@@ -85,6 +95,7 @@ const { STORAGE_KEY_FIXED_PANELS } = constants
 
 export default {
   components: {
+    VueDraggableNext,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
     PublicIcon
@@ -107,7 +118,7 @@ export default {
     const { message } = useModal()
     const pluginState = useLayout().getPluginState()
 
-    const { getMoveDragBarState } = useLayout()
+    const { getMoveDragBarState, isSameSide, dragPluginLayout } = useLayout()
 
     props.plugins.forEach(({ id, entry, icon }) => {
       components[id] = entry
@@ -187,7 +198,14 @@ export default {
 
     restoreFixedPanels()
 
+    //监听拖拽结束事件
+    const onEnd = (e) => {
+      if (!isSameSide(e.from.id, e.to.id)) close()
+      dragPluginLayout(e.from.id, e.to.id, e.oldIndex, e.newIndex)
+    }
+
     return {
+      onEnd,
       state,
       clickMenu,
       pluginRef,
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index d2fafdee15..fa1baacb2f 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -62,6 +62,10 @@ export default {
     },
     renderPanel: {
       type: String
+    },
+    pluginList: {
+      type: Array,
+      default: () => []
     }
   },
   setup(props, { emit }) {
@@ -69,6 +73,8 @@ export default {
     const iconComponents = {}
 
     const {
+      getPluginsByLayout,
+      getPluginByName,
       PLUGIN_POSITION,
       rightFixedPanelsStorage,
       registerPluginApi,
@@ -90,17 +96,25 @@ export default {
       }
     }
 
-    const settingPlugins = ref(props.settings)
-
-    settingPlugins.value.forEach(({ id, entry, api, icon }) => {
-      components[id] = entry
-      iconComponents[id] = icon
-      if (api) {
-        registerPluginApi({
-          [id]: api
+    const settingPlugins = ref(
+      getPluginsByLayout(PLUGIN_POSITION.rightTop).map((pluginName) => getPluginByName(props.pluginList, pluginName))
+    )
+
+    watch(
+      () => settingPlugins.value.length,
+      () => {
+        settingPlugins.value.forEach(({ id, entry, api, icon }) => {
+          components[id] = entry
+          iconComponents[id] = icon
+          if (api) {
+            registerPluginApi({
+              [id]: api
+            })
+          }
         })
-      }
-    })
+      },
+      { immediate: true }
+    )
 
     const close = () => {
       useLayout().closeSetting(true)
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 62f205e1f7..7ae13a5f04 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -17,6 +17,7 @@
           <design-settings
             :settings="registry.settings"
             :render-panel="settings.render"
+            :plugin-list="pluginList"
             v-show="layoutState.settings.showDesignSettings"
             ref="right"
           ></design-settings>
@@ -97,6 +98,7 @@ export default {
     localStorage.setItem('plugin', JSON.stringify(plugin))
 
     return {
+      pluginList,
       layoutRegistry,
       configProvider,
       configProviderDesign,
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index bf8b193fbf..71305d9c39 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -43,7 +43,7 @@ const layoutState = reactive({
   plugins: {
     isShow: true,
     fixedPanels: [PLUGIN_NAME.Materials],
-    render: null,
+    render: PLUGIN_NAME.Materials,
     pluginEvent: 'all',
     api: {}, // 插件需要注册交互API到这里
     activating: false, // 右侧面版激活提示状态
@@ -51,8 +51,8 @@ const layoutState = reactive({
   },
   settings: {
     isShow: true,
-    fixedPanels: [],
-    render: 'engine.setting.props',
+    fixedPanels: [PLUGIN_NAME.Props],
+    render: PLUGIN_NAME.Props,
     api: null,
     activating: false, // 右侧面版激活提示状态
     showDesignSettings: true
@@ -106,16 +106,6 @@ const getPluginApi = (pluginName) => {
   return plugins.api[pluginName] || plugins.api
 }
 
-export const getPlugin = (pluginName) => {
-  // TODO: 暂时先这样，明天优化
-  return pluginName
-}
-
-export const getPluginById = (pluginId) => {
-  // TODO: 暂时先这样，明天优化
-  return pluginId
-}
-
 const getScale = () => layoutState.dimension.scale
 
 const getPluginState = () => layoutState.plugins
@@ -220,6 +210,10 @@ export default () => {
     return pluginNames
   }
 
+  const getPluginByName = (pluginList, pluginName) => {
+    return pluginList.find((item) => item.id === pluginName)
+  }
+
   // 修改某个插件的布局
   const changePluginLayout = (name, layout) => {
     if (pluginStorageReactive.value[name]) {
@@ -290,12 +284,6 @@ export default () => {
     pluginStorageReactive.value[name].isShow = !pluginStorageReactive.value[name].isShow
   }
 
-  // 获取二级面板偏移量
-  const getSettingPanelOffset = (name) => {
-    const offsetMargin = pluginStorageReactive.value[name]?.offset
-    return offsetMargin ? `${offsetMargin + 20}px` : '20px'
-  }
-
   return {
     PLUGIN_NAME,
     PLUGIN_POSITION,
@@ -308,8 +296,7 @@ export default () => {
     setDimension,
     getDimension,
     registerPluginApi,
-    getPlugin,
-    getPluginById,
+    getPluginByName,
     getPluginApi,
     pluginState,
     getPluginState,
@@ -331,7 +318,6 @@ export default () => {
     changePluginShown,
     changeMenuShown,
     getMoveDragBarState,
-    changeMoveDragBarState,
-    getSettingPanelOffset
+    changeMoveDragBarState
   }
 }
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 577a6286cf..416840ba2a 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -1,5 +1,6 @@
 <template>
   <plugin-panel
+    id="source-code"
     title="页面 Schema"
     :fixed-name="PLUGIN_NAME.Schema"
     :fixedPanels="fixedPanels"
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 0c8486d1a8..ea6b136768 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -45,7 +45,7 @@
     </template>
   </plugin-panel>
 
-  <div v-if="isPanelShow" class="data-source-right-panel data-source">
+  <div v-if="isPanelShow" class="data-source-right-panel data-source" :style="{ left: `${firstPanelOffset}px` }">
     <div class="header">
       <span>{{ addDataSource }}</span>
       <span class="options-wrap">
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import { reactive, ref, computed, onActivated, watch, provide, watchEffect, nextTick } from 'vue'
+import { reactive, ref, computed, onActivated, watch, provide } from 'vue'
 import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
 import {
   useCanvas,
@@ -144,7 +144,11 @@ export default {
     })
     const selectedKey = ref(null)
 
-    const { PLUGIN_NAME, getSettingPanelOffset } = useLayout()
+    const { PLUGIN_NAME, getPluginWidth } = useLayout()
+
+    const firstPanelOffset = computed(() => {
+      return getPluginWidth(PLUGIN_NAME.State)
+    })
 
     const panelState = reactive({
       emitEvent: emit
@@ -152,16 +156,6 @@ export default {
 
     provide('panelState', panelState)
 
-    watchEffect(() => {
-      if (isPanelShow.value) {
-        const offsetMargin = getSettingPanelOffset(PLUGIN_NAME.State)
-        nextTick(() => {
-          const dom = document?.querySelector('.data-source-right-panel')
-          dom.setAttribute('style', `margin-left: ${offsetMargin}`)
-        })
-      }
-    })
-
     watch(activeName, () => {
       selectedKey.value = null
     })
@@ -386,6 +380,7 @@ export default {
     })
 
     return {
+      firstPanelOffset,
       PLUGIN_NAME,
       isBlock,
       isPanelShow,
diff --git a/packages/settings/events/src/Main.vue b/packages/settings/events/src/Main.vue
index 12d3dd81f9..0fac554f6b 100644
--- a/packages/settings/events/src/Main.vue
+++ b/packages/settings/events/src/Main.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-panel title="高级" :fixed-panels="fixedPanels" :fixed-name="PLUGIN_NAME.Event" @close="$emit('close')">
+  <plugin-panel
+    title="高级"
+    :fixed-panels="fixedPanels"
+    :fixed-name="PLUGIN_NAME.Event"
+    :header-margin-bottom="0"
+    @close="$emit('close')"
+  >
     <template #content>
       <tiny-collapse v-model="activeNames">
         <tiny-collapse-item title="事件绑定" name="bindEvent">
diff --git a/packages/settings/props/src/Main.vue b/packages/settings/props/src/Main.vue
index 4f80031e70..0957e60566 100644
--- a/packages/settings/props/src/Main.vue
+++ b/packages/settings/props/src/Main.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-panel title="属性" :fixed-panels="fixedPanels" :fixed-name="PLUGIN_NAME.Props" @close="$emit('close')">
+  <plugin-panel
+    title="属性"
+    :fixed-panels="fixedPanels"
+    :fixed-name="PLUGIN_NAME.Props"
+    :header-margin-bottom="0"
+    @close="$emit('close')"
+  >
     <template #content>
       <config-render :data="properties">
         <template #prefix="{ data }">
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 13f074ecd7..b769f59877 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -246,7 +246,6 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 12px 0 0;
   column-gap: 8px;
   .line-style {
     padding: 0 8px 0 12px;

From 6966406f9297cf6dab177b687ed9faa4910d3499 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Thu, 20 Feb 2025 01:57:49 -0800
Subject: [PATCH 14/25] fix: unify component orientation and modify plug-in bar
 data acquisition

---
 packages/common/component/PluginPanel.vue     |  4 +--
 packages/layout/src/DesignPlugins.vue         | 16 ++++++----
 packages/layout/src/DesignSettings.vue        | 29 +++++--------------
 packages/layout/src/Main.vue                  | 29 ++++++++++---------
 packages/layout/src/composable/useLayout.js   |  7 ++++-
 packages/plugins/block/meta.js                |  2 +-
 packages/plugins/bridge/meta.js               |  2 +-
 packages/plugins/datasource/meta.js           |  2 +-
 packages/plugins/help/meta.js                 |  2 +-
 packages/plugins/i18n/meta.js                 |  2 +-
 packages/plugins/materials/meta.js            |  2 +-
 .../materials/src/meta/layout/src/Main.vue    |  8 -----
 packages/plugins/page/meta.js                 |  2 +-
 packages/plugins/robot/meta.js                |  2 +-
 packages/plugins/schema/meta.js               |  2 +-
 packages/plugins/script/meta.js               |  2 +-
 packages/plugins/state/meta.js                |  2 +-
 packages/plugins/tree/meta.js                 |  2 +-
 packages/plugins/tutorial/meta.js             |  2 +-
 packages/settings/events/meta.js              |  7 ++---
 packages/settings/props/meta.js               |  7 ++---
 packages/settings/styles/meta.js              |  7 ++---
 22 files changed, 60 insertions(+), 80 deletions(-)

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index 623d297709..dc25621796 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -253,7 +253,7 @@ export default {
 }
 .resizer-right:hover {
   width: 8px;
-  background-color: var(--ti-lowcode-style-setting-label-bg);
+  background-color: var(--te-base-blue-40);
 }
 // 左边拖拽线
 .resizer-left {
@@ -268,7 +268,7 @@ export default {
 }
 .resizer-left:hover {
   width: 8px;
-  background-color: var(--ti-lowcode-style-setting-label-bg);
+  background-color: var(--te-base-blue-40);
 }
 .scroll-content {
   height: 100%;
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 0310c37fe1..17aa0e20f6 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -107,6 +107,10 @@ export default {
     plugins: {
       type: Array,
       default: () => []
+    },
+    pluginList: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['click', 'node-click'],
@@ -118,17 +122,17 @@ export default {
     const { message } = useModal()
     const pluginState = useLayout().getPluginState()
 
-    const { getMoveDragBarState, isSameSide, dragPluginLayout } = useLayout()
+    const { PLUGIN_POSITION, getMoveDragBarState, isSameSide, dragPluginLayout, getPluginsByPosition } = useLayout()
 
-    props.plugins.forEach(({ id, entry, icon }) => {
+    props.pluginList.forEach(({ id, entry, icon }) => {
       components[id] = entry
       iconComponents[id] = icon
     })
 
     const state = reactive({
       prevIdex: -2,
-      topNavLists: props.plugins.filter((item) => item.align === 'top'),
-      bottomNavLists: props.plugins.filter((item) => item.align === 'bottom')
+      topNavLists: getPluginsByPosition(PLUGIN_POSITION.leftTop, props.pluginList),
+      bottomNavLists: getPluginsByPosition(PLUGIN_POSITION.leftBottom, props.pluginList)
     })
 
     const clickMenu = ({ item, index }) => {
@@ -143,14 +147,14 @@ export default {
           result &&
           emit('click', {
             item,
-            navLists: item.align === 'top' ? state.topNavLists[index] : state.bottomNavLists[index]
+            navLists: item.align === 'leftTop' ? state.topNavLists[index] : state.bottomNavLists[index]
           })
 
         pluginRef.value?.[lastPlugin.confirm](confirmCallback)
       } else {
         emit('click', {
           item,
-          navLists: item.align === 'top' ? state.topNavLists[index] : state.bottomNavLists[index]
+          navLists: item.align === 'leftTop' ? state.topNavLists[index] : state.bottomNavLists[index]
         })
       }
     }
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index fa1baacb2f..3ed4e7778d 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -73,11 +73,9 @@ export default {
     const iconComponents = {}
 
     const {
-      getPluginsByLayout,
-      getPluginByName,
+      getPluginsByPosition,
       PLUGIN_POSITION,
       rightFixedPanelsStorage,
-      registerPluginApi,
       changeRightFixedPanels,
       dragPluginLayout,
       isSameSide,
@@ -96,25 +94,12 @@ export default {
       }
     }
 
-    const settingPlugins = ref(
-      getPluginsByLayout(PLUGIN_POSITION.rightTop).map((pluginName) => getPluginByName(props.pluginList, pluginName))
-    )
-
-    watch(
-      () => settingPlugins.value.length,
-      () => {
-        settingPlugins.value.forEach(({ id, entry, api, icon }) => {
-          components[id] = entry
-          iconComponents[id] = icon
-          if (api) {
-            registerPluginApi({
-              [id]: api
-            })
-          }
-        })
-      },
-      { immediate: true }
-    )
+    props.pluginList.forEach(({ id, entry, icon }) => {
+      components[id] = entry
+      iconComponents[id] = icon
+    })
+
+    const settingPlugins = ref(getPluginsByPosition(PLUGIN_POSITION.rightTop, props.pluginList))
 
     const close = () => {
       useLayout().closeSetting(true)
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 7ae13a5f04..08f7aad0fd 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -7,6 +7,7 @@
           <div class="tiny-engine-content-wrap">
             <design-plugins
               :plugins="registry.plugins"
+              :plugin-list="pluginList"
               :render-panel="plugins.render"
               @click="toggleNav"
             ></design-plugins>
@@ -64,34 +65,36 @@ export default {
       plugins.render = plugins.render === item.id ? null : item.id
     }
 
-    // 收集插件的 align 信息
-    const alignGroups = {}
-
     // 合并插件和设置列表
     const pluginList = [...props.registry.plugins, ...props.registry.settings]
 
+    // 收集插件的 align 信息
+    const alignGroups = {}
+    const plugin = {}
+
     pluginList.forEach((item) => {
       if (item.id) {
-        const align = item.options?.align || 'leftTop'
+        const align = item?.align || 'leftTop'
+
+        // 初始化 alignGroups[align]
         if (!alignGroups[align]) {
           alignGroups[align] = []
         }
+
+        // 将 item.id 推入对应的 alignGroups
         alignGroups[align].push(item.id)
-      }
-    })
 
-    // Step 2: 为每个插件分配 index 值
-    const plugin = {}
-    pluginList.forEach((item) => {
-      if (item.id) {
-        const align = item.options?.align || 'leftTop'
+        // 为每个插件分配 index 和相关属性
         const index = alignGroups[align].indexOf(item.id)
 
         plugin[item.id] = {
-          width: item.options?.width || 300,
+          width: item?.width || 300,
           align: align,
           index: index,
-          isShow: true
+          isShow: true,
+          entry: item.entry,
+          id: item.id,
+          icon: item.icon
         }
       }
     })
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 71305d9c39..5c54c6a4c7 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -214,6 +214,10 @@ export default () => {
     return pluginList.find((item) => item.id === pluginName)
   }
 
+  const getPluginsByPosition = (position, pluginList) => {
+    return getPluginsByLayout(position).map((pluginName) => getPluginByName(pluginList, pluginName))
+  }
+
   // 修改某个插件的布局
   const changePluginLayout = (name, layout) => {
     if (pluginStorageReactive.value[name]) {
@@ -318,6 +322,7 @@ export default () => {
     changePluginShown,
     changeMenuShown,
     getMoveDragBarState,
-    changeMoveDragBarState
+    changeMoveDragBarState,
+    getPluginsByPosition
   }
 }
diff --git a/packages/plugins/block/meta.js b/packages/plugins/block/meta.js
index 01d507a79a..c61c1add69 100644
--- a/packages/plugins/block/meta.js
+++ b/packages/plugins/block/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.blockmanage',
   title: '区块管理',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-symbol'
 }
diff --git a/packages/plugins/bridge/meta.js b/packages/plugins/bridge/meta.js
index 503e2e0a1f..7e458b3278 100644
--- a/packages/plugins/bridge/meta.js
+++ b/packages/plugins/bridge/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.bridge',
   title: '资源管理',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-sresources'
 }
diff --git a/packages/plugins/datasource/meta.js b/packages/plugins/datasource/meta.js
index 085544ded0..73d0dd0d73 100644
--- a/packages/plugins/datasource/meta.js
+++ b/packages/plugins/datasource/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.collections',
   title: '数据源',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-data'
 }
diff --git a/packages/plugins/help/meta.js b/packages/plugins/help/meta.js
index 29507c619b..084d499781 100644
--- a/packages/plugins/help/meta.js
+++ b/packages/plugins/help/meta.js
@@ -5,5 +5,5 @@ export default {
   title: '',
   type: 'plugins',
   icon: HelpIcon,
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/plugins/i18n/meta.js b/packages/plugins/i18n/meta.js
index 48221b3312..379b02c36e 100644
--- a/packages/plugins/i18n/meta.js
+++ b/packages/plugins/i18n/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.i18n',
   title: '国际化',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-i18n'
 }
diff --git a/packages/plugins/materials/meta.js b/packages/plugins/materials/meta.js
index 8088f738b7..70e2309779 100644
--- a/packages/plugins/materials/meta.js
+++ b/packages/plugins/materials/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '物料',
   type: 'plugins',
   icon: 'plugin-icon-materials',
-  align: 'top'
+  align: 'leftTop'
 }
diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue
index f4d6602be4..1874dd5a77 100644
--- a/packages/plugins/materials/src/meta/layout/src/Main.vue
+++ b/packages/plugins/materials/src/meta/layout/src/Main.vue
@@ -5,14 +5,6 @@
     :fixedPanels="fixedPanels"
     @close="$emit('close')"
   >
-    <template #header>
-      <component
-        v-if="!onlyShowDefault"
-        :is="registryData?.components?.header"
-        :fixedPanels="fixedPanels"
-        @fix-panel="(id) => $emit('fix-panel', id)"
-      ></component>
-    </template>
     <template #content>
       <tiny-tabs v-model="activeName" tab-style="button-card" class="full-width-tabs" v-if="!onlyShowDefault">
         <tiny-tab-item :key="item.id" v-for="item in tabComponents" :title="item.title" :name="item.id">
diff --git a/packages/plugins/page/meta.js b/packages/plugins/page/meta.js
index 28d15c21fd..dc415e75ec 100644
--- a/packages/plugins/page/meta.js
+++ b/packages/plugins/page/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '页面',
   type: 'plugins',
   icon: 'plugin-icon-page',
-  align: 'top'
+  align: 'leftTop'
 }
diff --git a/packages/plugins/robot/meta.js b/packages/plugins/robot/meta.js
index 4483a3521f..7fcc14f46f 100644
--- a/packages/plugins/robot/meta.js
+++ b/packages/plugins/robot/meta.js
@@ -5,5 +5,5 @@ export default {
   title: 'AI对话框',
   type: 'plugins',
   icon: RobotIcon,
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/plugins/schema/meta.js b/packages/plugins/schema/meta.js
index c40473cb66..731f37c0e9 100644
--- a/packages/plugins/schema/meta.js
+++ b/packages/plugins/schema/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '页面 Schema',
   type: 'plugins',
   icon: 'plugin-icon-page-schema',
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/plugins/script/meta.js b/packages/plugins/script/meta.js
index 7ea61f52b0..51642180eb 100644
--- a/packages/plugins/script/meta.js
+++ b/packages/plugins/script/meta.js
@@ -3,6 +3,6 @@ export default {
   title: '页面 JS',
   type: 'plugins',
   icon: 'plugin-icon-js',
-  align: 'top',
+  align: 'leftTop',
   confirm: 'close' // 当点击插件栏切换或关闭前是否需要确认, 会调用插件中confirm值指定的方法，e.g. 此处指向 close方法，会调用插件的close方法执行确认逻辑
 }
diff --git a/packages/plugins/state/meta.js b/packages/plugins/state/meta.js
index bf4d450f6b..c744f3634b 100644
--- a/packages/plugins/state/meta.js
+++ b/packages/plugins/state/meta.js
@@ -2,6 +2,6 @@ export default {
   id: 'engine.plugins.state',
   title: '状态管理',
   type: 'plugins',
-  align: 'top',
+  align: 'leftTop',
   icon: 'plugin-icon-var'
 }
diff --git a/packages/plugins/tree/meta.js b/packages/plugins/tree/meta.js
index 4dd08ca593..a5dc9b827c 100644
--- a/packages/plugins/tree/meta.js
+++ b/packages/plugins/tree/meta.js
@@ -3,5 +3,5 @@ export default {
   title: '大纲树',
   type: 'plugins',
   icon: 'plugin-icon-tree',
-  align: 'top'
+  align: 'leftTop'
 }
diff --git a/packages/plugins/tutorial/meta.js b/packages/plugins/tutorial/meta.js
index f1aa82e505..9574ce2630 100644
--- a/packages/plugins/tutorial/meta.js
+++ b/packages/plugins/tutorial/meta.js
@@ -3,5 +3,5 @@ export default {
   title: 'TinyEngine 教程',
   type: 'plugins',
   icon: 'plugin-icon-tutorial',
-  align: 'bottom'
+  align: 'leftBottom'
 }
diff --git a/packages/settings/events/meta.js b/packages/settings/events/meta.js
index 9f871ecb30..643cff248a 100644
--- a/packages/settings/events/meta.js
+++ b/packages/settings/events/meta.js
@@ -2,10 +2,7 @@ export default {
   id: 'engine.setting.event',
   title: '高级',
   type: 'setting',
-  align: 'left',
+  align: 'rightTop',
   name: 'event',
-  icon: 'target',
-  options: {
-    align: 'rightTop'
-  }
+  icon: 'target'
 }
diff --git a/packages/settings/props/meta.js b/packages/settings/props/meta.js
index bb9b62f6cf..99fcbbc641 100644
--- a/packages/settings/props/meta.js
+++ b/packages/settings/props/meta.js
@@ -2,10 +2,7 @@ export default {
   id: 'engine.setting.props',
   title: '属性',
   type: 'setting',
-  align: 'left',
+  align: 'rightTop',
   name: 'props',
-  icon: 'form',
-  options: {
-    align: 'rightTop'
-  }
+  icon: 'form'
 }
diff --git a/packages/settings/styles/meta.js b/packages/settings/styles/meta.js
index b3090c77e5..cf3a7ab3b9 100644
--- a/packages/settings/styles/meta.js
+++ b/packages/settings/styles/meta.js
@@ -3,9 +3,6 @@ export default {
   title: '样式',
   name: 'style',
   type: 'setting',
-  align: 'left',
-  icon: 'display-inline',
-  options: {
-    align: 'rightTop'
-  }
+  align: 'rightTop',
+  icon: 'display-inline'
 }

From 192cce416c0198df032a54933380e8d87ea76f1a Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Thu, 20 Feb 2025 03:13:26 -0800
Subject: [PATCH 15/25] fix: setting some panel default width

---
 packages/plugins/i18n/meta.js   | 1 +
 packages/plugins/schema/meta.js | 3 ++-
 packages/plugins/script/meta.js | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/plugins/i18n/meta.js b/packages/plugins/i18n/meta.js
index 379b02c36e..d58ebe9901 100644
--- a/packages/plugins/i18n/meta.js
+++ b/packages/plugins/i18n/meta.js
@@ -3,5 +3,6 @@ export default {
   title: '国际化',
   type: 'plugins',
   align: 'leftTop',
+  width: 600,
   icon: 'plugin-icon-i18n'
 }
diff --git a/packages/plugins/schema/meta.js b/packages/plugins/schema/meta.js
index 731f37c0e9..8b010fb8b5 100644
--- a/packages/plugins/schema/meta.js
+++ b/packages/plugins/schema/meta.js
@@ -3,5 +3,6 @@ export default {
   title: '页面 Schema',
   type: 'plugins',
   icon: 'plugin-icon-page-schema',
-  align: 'leftBottom'
+  align: 'leftBottom',
+  width: 600
 }
diff --git a/packages/plugins/script/meta.js b/packages/plugins/script/meta.js
index 51642180eb..0ac7f10586 100644
--- a/packages/plugins/script/meta.js
+++ b/packages/plugins/script/meta.js
@@ -4,5 +4,6 @@ export default {
   type: 'plugins',
   icon: 'plugin-icon-js',
   align: 'leftTop',
+  width: 600,
   confirm: 'close' // 当点击插件栏切换或关闭前是否需要确认, 会调用插件中confirm值指定的方法，e.g. 此处指向 close方法，会调用插件的close方法执行确认逻辑
 }

From 415e376b5c5314faf8cc26bd7e040dc1e3a18426 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Thu, 20 Feb 2025 18:32:58 -0800
Subject: [PATCH 16/25] fix: state panel and resize line style issues

---
 packages/common/component/PluginPanel.vue   |  47 ++++++--
 packages/plugins/state/src/Main.vue         | 126 ++++++++++----------
 packages/plugins/state/src/styles/vars.less |   2 +-
 3 files changed, 103 insertions(+), 72 deletions(-)

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index dc25621796..8c6ccfd881 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { inject, ref } from 'vue'
+import { inject, ref, onMounted } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 import { SvgButton } from '@opentiny/tiny-engine-common'
 import LinkButton from './LinkButton.vue'
@@ -149,16 +149,15 @@ export default {
     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)
-    }
-
-    const onMouseUpLeft = () => {
-      changeMoveDragBarState(false)
-      document.removeEventListener('mousemove', throttledMouseMoveLeft)
-      document.removeEventListener('mouseup', onMouseUpLeft)
+      rightResizer.value.style.cursor = ''
+      rightResizer.value.classList.remove('dragging')
     }
 
     const onMouseDownRight = (event) => {
@@ -167,6 +166,16 @@ export default {
       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) => {
@@ -175,8 +184,19 @@ export default {
       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')
+    }
+
+    onMounted(() => {
+      initResizerDOM()
+    })
+
     return {
       closePanel,
       fixPanel,
@@ -212,12 +232,15 @@ export default {
     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;
@@ -233,6 +256,7 @@ export default {
       :deep(.svg-button + .svg-button) {
         margin-left: 4px;
       }
+
       :deep(.svg-button + .icon-wrap) {
         margin-left: 4px;
       }
@@ -251,10 +275,17 @@ export default {
   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;
@@ -266,10 +297,12 @@ export default {
   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;
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index ea6b136768..32b26a2000 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -5,77 +5,75 @@
     :fixedPanels="fixedPanels"
     :docsUrl="docsUrl"
     :isShowDocsIcon="true"
+    id="data-source"
     @close="closePanel"
   >
     <template #content>
-      <div id="data-source">
-        <div class="data-source-left-panel">
-          <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
-            <tiny-tab-item :name="STATE.CURRENT_STATE" :title="isBlock ? '区块状态' : '页面状态'"></tiny-tab-item>
-            <tiny-tab-item :name="STATE.GLOBAL_STATE" title="应用状态"></tiny-tab-item>
-          </tiny-tabs>
-          <tiny-search
-            :modelValue="query"
-            class="left-filter"
-            placeholder="请输入搜索条件"
-            clearable
-            @update:modelValue="search"
-          >
-            <template #prefix>
-              <tiny-icon-search />
-            </template>
-          </tiny-search>
-          <div class="add-btn">
-            <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
-              <svg-icon name="add" class="add-btn-icon"></svg-icon>
-              <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
-            </tiny-button>
-          </div>
-          <data-source-list
-            :modelValue="Object.keys(state.dataSource)"
-            :stateScope="activeName"
-            :query="query"
-            :selectedKey="selectedKey"
-            @openPanel="openPanel"
-            @remove="remove"
-            @removeStore="removeStore"
-          />
+      <div class="data-source-left-panel">
+        <tiny-tabs v-model="activeName" @click="tabClick" tab-style="button-card">
+          <tiny-tab-item :name="STATE.CURRENT_STATE" :title="isBlock ? '区块状态' : '页面状态'"></tiny-tab-item>
+          <tiny-tab-item :name="STATE.GLOBAL_STATE" title="应用状态"></tiny-tab-item>
+        </tiny-tabs>
+        <tiny-search
+          :modelValue="query"
+          class="left-filter"
+          placeholder="请输入搜索条件"
+          clearable
+          @update:modelValue="search"
+        >
+          <template #prefix>
+            <tiny-icon-search />
+          </template>
+        </tiny-search>
+        <div class="add-btn">
+          <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
+            <svg-icon name="add" class="add-btn-icon"></svg-icon>
+            <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
+          </tiny-button>
         </div>
+        <data-source-list
+          :modelValue="Object.keys(state.dataSource)"
+          :stateScope="activeName"
+          :query="query"
+          :selectedKey="selectedKey"
+          @openPanel="openPanel"
+          @remove="remove"
+          @removeStore="removeStore"
+        />
+      </div>
+      <div class="data-source-right-panel" v-if="isPanelShow" :style="{ left: `${firstPanelOffset}px` }">
+        <div class="header">
+          <span>{{ addDataSource }}</span>
+          <span class="options-wrap">
+            <tiny-button type="primary" @click="confirm">保存</tiny-button>
+            <close-icon @close="cancel"></close-icon>
+          </span>
+        </div>
+        <create-variable
+          v-if="activeName === STATE.CURRENT_STATE"
+          ref="variableRef"
+          :dataSource="state.dataSource"
+          :flag="flag"
+          :updateKey="updateKey"
+          :createData="state.createData"
+          @nameInput="updateName"
+          @close="cancel"
+          @mouseleave="onMouseLeaveVariable"
+        />
+        <create-store
+          v-if="activeName === STATE.GLOBAL_STATE"
+          ref="storeRef"
+          :dataSource="state.dataSource"
+          :flag="flag"
+          :updateKey="updateKey"
+          :storeData="state.createData"
+          @nameInput="validName"
+          @close="cancel"
+          @mouseleave="onMouseLeaveStore"
+        />
       </div>
     </template>
   </plugin-panel>
-
-  <div v-if="isPanelShow" class="data-source-right-panel data-source" :style="{ left: `${firstPanelOffset}px` }">
-    <div class="header">
-      <span>{{ addDataSource }}</span>
-      <span class="options-wrap">
-        <tiny-button type="primary" @click="confirm">保存</tiny-button>
-        <close-icon @close="cancel"></close-icon>
-      </span>
-    </div>
-    <create-variable
-      v-if="activeName === STATE.CURRENT_STATE"
-      ref="variableRef"
-      :dataSource="state.dataSource"
-      :flag="flag"
-      :updateKey="updateKey"
-      :createData="state.createData"
-      @nameInput="updateName"
-      @close="cancel"
-      @mouseleave="onMouseLeaveVariable"
-    />
-    <create-store
-      v-if="activeName === STATE.GLOBAL_STATE"
-      ref="storeRef"
-      :dataSource="state.dataSource"
-      :flag="flag"
-      :updateKey="updateKey"
-      :storeData="state.createData"
-      @nameInput="validName"
-      @close="cancel"
-      @mouseleave="onMouseLeaveStore"
-    />
-  </div>
 </template>
 
 <script>
diff --git a/packages/plugins/state/src/styles/vars.less b/packages/plugins/state/src/styles/vars.less
index af65e1cf43..3fd0a9ea23 100644
--- a/packages/plugins/state/src/styles/vars.less
+++ b/packages/plugins/state/src/styles/vars.less
@@ -1,4 +1,4 @@
-.data-source {
+#data-source {
   --te-state-add-btn-border-color: var(--te-common-border-default);
   --te-state-add-btn-border-color-hover: var(--te-common-border-hover);
   --te-state-add-btn-icon-color: var(--te-common-icon-secondary);

From 5c28c75fd327cdbad72d03f905de605d920c3712 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Thu, 20 Feb 2025 18:52:39 -0800
Subject: [PATCH 17/25] fix: increase the lower left corner to drag and drop

---
 packages/layout/src/DesignPlugins.vue  | 52 ++++++++++++++------------
 packages/layout/src/DesignSettings.vue |  1 +
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 17aa0e20f6..3e3b8277a2 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -34,31 +34,35 @@
         </div>
       </div>
     </vue-draggable-next>
-    <ul class="nav-panel-lists bottom">
-      <li style="flex: 1" class="list-item"></li>
-      <li
-        v-for="(item, index) in state.bottomNavLists"
-        :key="index"
-        :class="[
-          'list-item',
-          { active: renderPanel === item.id, prev: state.prevIdex - 1 === index, 'first-item': index === 0 }
-        ]"
-        :title="item.title"
-        @click="clickMenu({ item, index })"
-      >
-        <div :class="{ 'is-show': renderPanel }">
-          <span class="item-icon">
-            <public-icon
-              v-if="typeof iconComponents[item.id] === 'string'"
-              :name="iconComponents[item.id]"
-              class="panel-icon"
-              svgClass="panel-svg"
-            ></public-icon>
-            <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
-          </span>
+
+    <!-- 图标菜单下侧区域（附加icon） -->
+    <div class="nav-panel-lists bottom">
+      <div style="flex: 1" class="list-item" />
+      <vue-draggable-next id="leftBottom" v-model="state.bottomNavLists" group="plugins" @end="onEnd">
+        <div
+          v-for="(item, index) in state.bottomNavLists"
+          :key="index"
+          :class="[
+            'list-item',
+            { active: renderPanel === item.id, prev: state.prevIdex - 1 === index, 'first-item': index === 0 }
+          ]"
+          :title="item.title"
+          @click="clickMenu({ item, index })"
+        >
+          <div :class="{ 'is-show': renderPanel }">
+            <span class="item-icon">
+              <public-icon
+                v-if="typeof iconComponents[item.id] === 'string'"
+                :name="iconComponents[item.id]"
+                class="panel-icon"
+                svgClass="panel-svg"
+              ></public-icon>
+              <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+            </span>
+          </div>
         </div>
-      </li>
-    </ul>
+      </vue-draggable-next>
+    </div>
   </div>
 
   <div :class="{ 'not-selected': getMoveDragBarState() }">
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index 3ed4e7778d..c8fae75dae 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -233,6 +233,7 @@ export default {
     padding: 0;
     display: flex;
     flex-direction: column;
+    height: 100vh;
 
     &.bottom {
       flex: 1;

From 62ccc0c43b81858643b0a29478cf5d294c325066 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Fri, 21 Feb 2025 00:43:24 -0800
Subject: [PATCH 18/25] feat: add right-click menu and refactor folding logic

---
 packages/common/component/PluginPanel.vue     |  37 +++-
 packages/common/component/PluginRightMenu.vue | 167 ++++++++++++++++++
 packages/common/component/index.js            |   1 +
 packages/layout/src/DesignPlugins.vue         |  63 +++++--
 packages/layout/src/DesignSettings.vue        |  41 ++---
 packages/layout/src/Main.vue                  |  26 ++-
 packages/layout/src/composable/useLayout.js   |   8 +-
 packages/plugins/help/meta.js                 |   2 +-
 packages/settings/styles/src/Main.vue         |  18 +-
 9 files changed, 318 insertions(+), 45 deletions(-)
 create mode 100644 packages/common/component/PluginRightMenu.vue

diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index 8c6ccfd881..2cbe095dce 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -9,6 +9,17 @@
       </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'"
@@ -28,14 +39,16 @@
 </template>
 
 <script>
-import { inject, ref, onMounted } from 'vue'
+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,
     SvgButton
@@ -85,9 +98,16 @@ export default {
     headerMarginBottom: {
       type: Number,
       default: 12
+    },
+    /**
+     * 是否展示折叠按钮
+     */
+    isShowCollapseIcon: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['close'],
+  emits: ['close', 'updateCollapseStatus'],
   setup(props, { emit }) {
     const closePanel = () => {
       useLayout().closePlugin()
@@ -101,6 +121,11 @@ export default {
     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)
@@ -193,11 +218,19 @@ export default {
       rightResizer.value = document.querySelector('.resizer-right')
     }
 
+    const clickCollapseIcon = () => {
+      isCollapsed.value = !isCollapsed.value
+      emit('updateCollapseStatus', isCollapsed.value)
+    }
+
     onMounted(() => {
       initResizerDOM()
     })
 
     return {
+      clickCollapseIcon,
+      isCollapsed,
+      settingIcon,
       closePanel,
       fixPanel,
       panel,
diff --git a/packages/common/component/PluginRightMenu.vue b/packages/common/component/PluginRightMenu.vue
new file mode 100644
index 0000000000..c3875d168a
--- /dev/null
+++ b/packages/common/component/PluginRightMenu.vue
@@ -0,0 +1,167 @@
+<template>
+  <ul
+    v-if="contextMenu.visible"
+    class="context-menu"
+    :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+  >
+    <li v-if="contextMenu.type" @click="hidePlugin">隐藏 "{{ contextMenu.item.title }}"</li>
+    <li v-if="contextMenu.type" class="bottom-li" @click="switchAlign">
+      切换到{{ align.includes('right') ? '左侧' : '右侧' }}
+    </li>
+    <li
+      v-for="(item, index) in list"
+      :key="index"
+      @click.stop="changeShowState(item.id)"
+      class="menu-item-wrapper"
+      :class="{
+        'bottom-li': index === list.length - 1
+      }"
+    >
+      <span class="check-mark">
+        <span v-show="getPluginShown(item.id)">√</span>
+      </span>
+      <span>{{ item.title }}</span>
+    </li>
+    <li @click="hideSidebar">隐藏活动栏</li>
+  </ul>
+</template>
+
+<script>
+import { reactive, onMounted, onBeforeUnmount } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-meta-register'
+export default {
+  props: {
+    list: {
+      type: Array
+    },
+    align: {
+      type: String,
+      default: 'left'
+    }
+  },
+  emits: ['close', 'switchAlign'],
+  setup(props, { emit }) {
+    const { PLUGIN_POSITION, getPluginShown, changePluginShown, changeMenuShown } = useLayout()
+    const contextMenu = reactive({
+      type: true,
+      visible: false,
+      x: 0,
+      y: 0,
+      item: null,
+      index: null,
+      list: null
+    })
+
+    // 显示菜单
+    const contextMenuWidth = props.align.includes('right') ? 130 : 0
+    const showContextMenu = (x, y, type, item, index, align) => {
+      contextMenu.type = type
+      contextMenu.visible = true
+      contextMenu.x = x - contextMenuWidth
+      contextMenu.y = y
+      if (type) {
+        contextMenu.item = item
+        contextMenu.index = index
+        contextMenu.list = align
+      }
+    }
+
+    // 隐藏菜单
+    const hideContextMenu = () => {
+      contextMenu.visible = false
+    }
+
+    // 隐藏插件
+    const hidePlugin = () => {
+      emit('close')
+      changePluginShown(contextMenu.item.id)
+      hideContextMenu()
+    }
+
+    // 切换组件位置
+    const switchAlign = () => {
+      emit('close')
+      emit('switchAlign', contextMenu.index, contextMenu.item.id, contextMenu.list, PLUGIN_POSITION.leftTop)
+      hideContextMenu()
+    }
+
+    // 隐藏活动栏
+    const hideSidebar = () => {
+      const align = props.align.includes('right') ? 'right' : 'left'
+      changeMenuShown(align)
+      hideContextMenu()
+    }
+
+    // 改变组件显示状态
+    const changeShowState = (pluginName) => {
+      changePluginShown(pluginName)
+    }
+
+    const handleClickOutside = (event) => {
+      if (!event.target.closest('.context-menu')) {
+        hideContextMenu()
+      }
+    }
+
+    onMounted(() => {
+      document.addEventListener('click', handleClickOutside)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', handleClickOutside)
+    })
+
+    return {
+      contextMenu,
+      showContextMenu,
+      changeShowState,
+      getPluginShown,
+      hidePlugin,
+      switchAlign,
+      hideSidebar
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 引入B的CSS样式 */
+.context-menu {
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  list-style: none;
+  width: 135px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+.context-menu-header {
+  padding: 8px 12px;
+  font-weight: bold;
+  cursor: default;
+  background: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+}
+.bottom-li {
+  border-bottom: 1px solid #ccc;
+}
+
+.context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.context-menu li:hover {
+  background: #f0f0f0;
+}
+.menu-item-wrapper {
+  display: flex;
+  flex-grow: 1;
+}
+
+.check-mark {
+  width: 20px;
+  text-align: left;
+}
+</style>
diff --git a/packages/common/component/index.js b/packages/common/component/index.js
index 7397fd2809..98da34cce6 100644
--- a/packages/common/component/index.js
+++ b/packages/common/component/index.js
@@ -14,6 +14,7 @@ import ConfigGroup from './ConfigGroup.vue'
 import ConfigItem from './ConfigItem.vue'
 export { default as PluginSetting } from './PluginSetting.vue'
 export { default as PluginPanel } from './PluginPanel.vue'
+export { default as PluginRightMenu } from './PluginRightMenu.vue'
 export { default as SvgButton } from './SvgButton.vue'
 export { default as LinkButton } from './LinkButton.vue'
 export { default as ConfigCollapse } from './ConfigCollapse.vue'
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 3e3b8277a2..9784d13495 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -22,7 +22,7 @@
         @click="clickMenu({ item, index })"
         @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.leftTop)"
       >
-        <div>
+        <div v-if="getPluginShown(item.id)">
           <span class="item-icon">
             <svg-icon
               v-if="typeof iconComponents[item.id] === 'string'"
@@ -37,7 +37,7 @@
 
     <!-- 图标菜单下侧区域（附加icon） -->
     <div class="nav-panel-lists bottom">
-      <div style="flex: 1" class="list-item" />
+      <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)" />
       <vue-draggable-next id="leftBottom" v-model="state.bottomNavLists" group="plugins" @end="onEnd">
         <div
           v-for="(item, index) in state.bottomNavLists"
@@ -48,8 +48,9 @@
           ]"
           :title="item.title"
           @click="clickMenu({ item, index })"
+          @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.leftBottom)"
         >
-          <div :class="{ 'is-show': renderPanel }">
+          <div :class="{ 'is-show': renderPanel }" v-if="getPluginShown(item.id)">
             <span class="item-icon">
               <public-icon
                 v-if="typeof iconComponents[item.id] === 'string'"
@@ -85,6 +86,13 @@
       </div>
     </div>
   </div>
+
+  <plugin-right-menu
+    ref="rightMenu"
+    :list="[...state.topNavLists, ...state.bottomNavLists]"
+    :align="left"
+    @switchAlign="switchAlign"
+  />
 </template>
 
 <script>
@@ -92,13 +100,14 @@ import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { VueDraggableNext } from 'vue-draggable-next'
 import { useLayout, usePage, useModal, META_APP } from '@opentiny/tiny-engine-meta-register'
-import { PublicIcon } from '@opentiny/tiny-engine-common'
+import { PublicIcon, PluginRightMenu } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
 
 const { STORAGE_KEY_FIXED_PANELS } = constants
 
 export default {
   components: {
+    PluginRightMenu,
     VueDraggableNext,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
@@ -126,12 +135,24 @@ export default {
     const { message } = useModal()
     const pluginState = useLayout().getPluginState()
 
-    const { PLUGIN_POSITION, getMoveDragBarState, isSameSide, dragPluginLayout, getPluginsByPosition } = useLayout()
-
-    props.pluginList.forEach(({ id, entry, icon }) => {
-      components[id] = entry
-      iconComponents[id] = icon
-    })
+    const {
+      getPluginById,
+      getPluginShown,
+      PLUGIN_POSITION,
+      getMoveDragBarState,
+      isSameSide,
+      dragPluginLayout,
+      getPluginsByPosition
+    } = useLayout()
+
+    const rightMenu = ref(null)
+    const showContextMenu = (event, type, item, index, align) => {
+      if (!type) {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type)
+      } else {
+        rightMenu.value.showContextMenu(event.clientX, event.clientY, type, item, index, align)
+      }
+    }
 
     const state = reactive({
       prevIdex: -2,
@@ -139,6 +160,22 @@ export default {
       bottomNavLists: getPluginsByPosition(PLUGIN_POSITION.leftBottom, props.pluginList)
     })
 
+    const switchAlign = (index, id, list, align) => {
+      list === PLUGIN_POSITION.leftTop ? state.topNavLists.splice(index, 1) : state.bottomNavLists.splice(index, 1)
+      emit('changeLeftAlign', id)
+      dragPluginLayout(list, align, index, 0)
+    }
+
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(props.pluginList, pluginId)
+      state.topNavLists.unshift(item)
+    }
+
+    props.pluginList.forEach(({ id, entry, icon }) => {
+      components[id] = entry
+      iconComponents[id] = icon
+    })
+
     const clickMenu = ({ item, index }) => {
       if (item.id === META_APP.EditorHelp || item.id === META_APP.Robot) return
 
@@ -213,6 +250,12 @@ export default {
     }
 
     return {
+      changeAlign,
+      rightMenu,
+      PLUGIN_POSITION,
+      showContextMenu,
+      switchAlign,
+      getPluginShown,
       onEnd,
       state,
       clickMenu,
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index c8fae75dae..ebdc40df38 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -15,11 +15,6 @@
         ></component>
         <div v-show="activating" class="active2" />
       </div>
-      <div v-if="renderPanel === 'engine.setting.styles'" class="tabs-setting">
-        <tiny-tooltip effect="light" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
-          <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
-        </tiny-tooltip>
-      </div>
     </div>
   </div>
   <div id="tiny-engine-nav-panel">
@@ -40,19 +35,27 @@
       <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)"></div>
     </vue-draggable-next>
   </div>
+
+  <plugin-right-menu
+    ref="rightMenu"
+    :list="settingPlugins"
+    :align="PLUGIN_POSITION.rightTop"
+    @switchAlign="switchAlign"
+  />
 </template>
 
 <script>
-import { computed, provide, ref, watch, toRefs } from 'vue'
-import { Tabs, TabItem, Tooltip } from '@opentiny/vue'
+import { computed, ref, watch, toRefs } from 'vue'
+import { Tabs, TabItem } from '@opentiny/vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 import { VueDraggableNext } from 'vue-draggable-next'
+import { PluginRightMenu } from '@opentiny/tiny-engine-common'
 
 export default {
   components: {
+    PluginRightMenu,
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
-    TinyTooltip: Tooltip,
     VueDraggableNext
   },
   props: {
@@ -74,6 +77,7 @@ export default {
 
     const {
       getPluginsByPosition,
+      getPluginById,
       PLUGIN_POSITION,
       rightFixedPanelsStorage,
       changeRightFixedPanels,
@@ -111,6 +115,11 @@ export default {
       dragPluginLayout(list, align, index, 0)
     }
 
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(props.pluginList, pluginId)
+      settingPlugins.value.unshift(item)
+    }
+
     const setRender = (curId) => {
       settingsState.render = curId
     }
@@ -141,16 +150,11 @@ export default {
 
     const activating = computed(() => settingsState.activating)
     const showMask = ref(true)
-    const isCollapsed = ref(false)
-    const settingIcon = computed(() => (isCollapsed.value ? 'collapse_all' : 'expand_all'))
-
-    provide('isCollapsed', isCollapsed)
 
     return {
+      changeAlign,
       showMask,
-      isCollapsed,
       activating,
-      settingIcon,
       settingsState,
       settingPlugins,
       components,
@@ -203,15 +207,6 @@ export default {
   }
 }
 
-.tabs-setting {
-  position: absolute;
-  top: 9px;
-  right: 78px;
-  line-height: 26px;
-  color: var(--te-component-common-icon-color-primary);
-  cursor: pointer;
-}
-
 #tiny-engine-nav-panel {
   display: none;
   width: var(--base-nav-panel-width);
diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 08f7aad0fd..9d52d885b3 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -6,9 +6,12 @@
         <div class="tiny-engine-left-wrap">
           <div class="tiny-engine-content-wrap">
             <design-plugins
+              v-if="leftMenuShownStorage"
+              ref="left"
               :plugins="registry.plugins"
               :plugin-list="pluginList"
               :render-panel="plugins.render"
+              @changeLeftAlign="changeLeftAlign"
               @click="toggleNav"
             ></design-plugins>
             <component :is="registry.canvas.entry"></component>
@@ -16,11 +19,13 @@
         </div>
         <div class="tiny-engine-right-wrap">
           <design-settings
+            v-if="rightMenuShownStorage"
+            ref="right"
             :settings="registry.settings"
             :render-panel="settings.render"
             :plugin-list="pluginList"
             v-show="layoutState.settings.showDesignSettings"
-            ref="right"
+            @changeRightAlign="changeRightAlign"
           ></design-settings>
         </div>
       </div>
@@ -34,6 +39,7 @@ import DesignToolbars from './DesignToolbars.vue'
 import DesignPlugins from './DesignPlugins.vue'
 import DesignSettings from './DesignSettings.vue'
 import meta from '../meta'
+import { ref } from 'vue'
 
 export default {
   name: 'TinyLowCode',
@@ -57,7 +63,7 @@ export default {
     const configProvider = layoutRegistry.options.configProvider
     const configProviderDesign = layoutRegistry.options.configProviderDesign
 
-    const { layoutState } = useLayout()
+    const { layoutState, leftMenuShownStorage, rightMenuShownStorage } = useLayout()
     const { plugins, settings } = layoutState
 
     const toggleNav = ({ item }) => {
@@ -65,6 +71,16 @@ export default {
       plugins.render = plugins.render === item.id ? null : item.id
     }
 
+    const left = ref(null)
+    const right = ref(null)
+
+    const changeLeftAlign = (pluginId) => {
+      right.value?.changeAlign(pluginId)
+    }
+    const changeRightAlign = (pluginId) => {
+      left.value?.changeAlign(pluginId)
+    }
+
     // 合并插件和设置列表
     const pluginList = [...props.registry.plugins, ...props.registry.settings]
 
@@ -101,6 +117,12 @@ export default {
     localStorage.setItem('plugin', JSON.stringify(plugin))
 
     return {
+      left,
+      right,
+      changeLeftAlign,
+      changeRightAlign,
+      leftMenuShownStorage,
+      rightMenuShownStorage,
       pluginList,
       layoutRegistry,
       configProvider,
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index 5c54c6a4c7..dd64389888 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -210,12 +210,12 @@ export default () => {
     return pluginNames
   }
 
-  const getPluginByName = (pluginList, pluginName) => {
-    return pluginList.find((item) => item.id === pluginName)
+  const getPluginById = (pluginList, pluginId) => {
+    return pluginList.find((item) => item.id === pluginId)
   }
 
   const getPluginsByPosition = (position, pluginList) => {
-    return getPluginsByLayout(position).map((pluginName) => getPluginByName(pluginList, pluginName))
+    return getPluginsByLayout(position).map((pluginId) => getPluginById(pluginList, pluginId))
   }
 
   // 修改某个插件的布局
@@ -300,7 +300,7 @@ export default () => {
     setDimension,
     getDimension,
     registerPluginApi,
-    getPluginByName,
+    getPluginById,
     getPluginApi,
     pluginState,
     getPluginState,
diff --git a/packages/plugins/help/meta.js b/packages/plugins/help/meta.js
index 084d499781..67776688f8 100644
--- a/packages/plugins/help/meta.js
+++ b/packages/plugins/help/meta.js
@@ -2,7 +2,7 @@ import HelpIcon from './src/HelpIcon.vue'
 
 export default {
   id: 'engine.plugins.editorhelp',
-  title: '',
+  title: '帮助',
   type: 'plugins',
   icon: HelpIcon,
   align: 'leftBottom'
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index b769f59877..9d12ea3a28 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -1,5 +1,12 @@
 <template>
-  <plugin-panel title="样式" :fixed-panels="fixedPanels" :fixed-name="PLUGIN_NAME.Styles" @close="$emit('close')">
+  <plugin-panel
+    title="样式"
+    :fixed-panels="fixedPanels"
+    :fixed-name="PLUGIN_NAME.Styles"
+    :is-show-collapse-icon="true"
+    @updateCollapseStatus="updateCollapseStatus"
+    @close="$emit('close')"
+  >
     <template #content>
       <div class="style-editor">
         <div class="line-style">
@@ -71,7 +78,7 @@
 </template>
 
 <script>
-import { watch, inject, ref, reactive, provide } from 'vue'
+import { watch, ref, reactive, provide } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useLayout, useHistory, useCanvas, useProperties, getConfigurator } from '@opentiny/tiny-engine-meta-register'
 import {
@@ -128,7 +135,7 @@ export default {
       'borders',
       'effects'
     ]
-    const isCollapsed = inject('isCollapsed')
+    const isCollapsed = ref(false)
     const activeNames = ref(styleCategoryGroup)
     const { getCurrentSchema } = useCanvas()
     // 获取当前节点 style 对象
@@ -213,6 +220,10 @@ export default {
       }
     )
 
+    const updateCollapseStatus = (val) => {
+      isCollapsed.value = val
+    }
+
     watch(
       () => isCollapsed.value,
       () => {
@@ -225,6 +236,7 @@ export default {
     )
 
     return {
+      updateCollapseStatus,
       PLUGIN_NAME,
       CodeConfigurator,
       VariableConfigurator,

From 74a0e1ab22975c0940771e109e542ffafdea71a8 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 26 Feb 2025 19:41:33 -0800
Subject: [PATCH 19/25] fix: second-level panel unfolds after the plug-in is
 dragged on the right.

---
 packages/common/component/PluginSetting.vue   | 22 ++++++++++++++-----
 packages/plugins/block/src/BlockSetting.vue   |  5 ++++-
 packages/plugins/bridge/src/BridgeSetting.vue |  6 +++--
 .../plugins/datasource/src/DataSourceForm.vue | 14 +++++++++---
 .../src/DataSourceGlobalDataHandler.vue       | 14 +++++++++---
 .../datasource/src/DataSourceRecordList.vue   |  5 ++++-
 .../datasource/src/DataSourceRemotePanel.vue  |  9 ++++++--
 packages/plugins/datasource/src/Main.vue      |  1 +
 .../src/meta/block/src/BlockGroupPanel.vue    |  7 ++++--
 .../plugins/page/src/PageFolderSetting.vue    |  7 ++++--
 packages/plugins/page/src/PageSetting.vue     | 14 +++++++++---
 packages/plugins/state/src/Main.vue           | 12 +++++++---
 12 files changed, 89 insertions(+), 27 deletions(-)

diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index 124cc85ad7..b2efa58501 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -1,8 +1,13 @@
 <template>
   <div
     id="panel-setting"
-    :class="['plugin-setting', { 'second-panel': isSecond }, { 'full-screen': state.isFullScreen }]"
-    :style="{ left: `${firstPanelOffset}px` }"
+    :class="[
+      'plugin-setting',
+      { 'second-panel': isSecond },
+      { 'full-screen': state.isFullScreen },
+      { 'align-right': align.includes('right') }
+    ]"
+    :style="alignStyle"
     @click="$emit('click')"
   >
     <div class="plugin-setting-header">
@@ -116,11 +121,19 @@ export default {
       return getPluginWidth(props.fixedName)
     })
 
+    const secondPanelAlign = computed(() => {
+      return props.align.includes('left') ? 'left' : 'right'
+    })
+
+    const alignStyle = computed(() => {
+      return `${secondPanelAlign.value} : ${firstPanelOffset.value}px`
+    })
+
     watchEffect(() => {
       // 处理二级面板偏移量
       const secondPanelOffset = document.querySelector('.plugin-setting')?.clientWidth + firstPanelOffset.value
       nextTick(() => {
-        document.querySelector('.second-panel')?.style.setProperty('left', `${secondPanelOffset}px`)
+        document.querySelector('.second-panel')?.style.setProperty(secondPanelAlign.value, `${secondPanelOffset}px`)
       })
     })
 
@@ -138,6 +151,7 @@ export default {
     }
 
     return {
+      alignStyle,
       firstPanelOffset,
       state,
       fullScreen,
@@ -150,7 +164,6 @@ export default {
 <style lang="less" scoped>
 .plugin-setting {
   position: absolute;
-  left: var(--base-left-panel-width);
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
@@ -170,7 +183,6 @@ export default {
   }
 
   &.second-panel {
-    left: calc(var(--base-left-panel-width) + var(--base-collection-panel-width));
     z-index: 1;
   }
 
diff --git a/packages/plugins/block/src/BlockSetting.vue b/packages/plugins/block/src/BlockSetting.vue
index c4829d8c50..6577370db1 100644
--- a/packages/plugins/block/src/BlockSetting.vue
+++ b/packages/plugins/block/src/BlockSetting.vue
@@ -3,6 +3,7 @@
     v-if="isOpen"
     class="plugin-block-setting"
     title="区块设置"
+    :align="align"
     :fixed-name="PLUGIN_NAME.BlockManage"
     @mouseleave="onMouseLeave"
     @click="handleClick"
@@ -153,7 +154,8 @@ export default {
     })
     const blockConfigForm = ref(null)
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.BlockManage))
 
     const state = reactive({
       activeName: ['base', 'attribute', 'event', 'lifeCycle', 'history'],
@@ -273,6 +275,7 @@ export default {
     }
 
     return {
+      align,
       PLUGIN_NAME,
       state,
       isOpen,
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 06db813a4f..be222b88c9 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <plugin-setting v-if="isOpen" :fixed-name="PLUGIN_NAME.Bridge">
+  <plugin-setting v-if="isOpen" :align="align" :fixed-name="PLUGIN_NAME.Bridge">
     <template #title>
       <div class="title-wrap">
         <span>{{ state.title }}</span>
@@ -151,7 +151,8 @@ export default {
     }
     const { confirm } = useModal()
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Bridge))
 
     const state = reactive({
       resource: computed(() => getResource()),
@@ -275,6 +276,7 @@ export default {
     }
 
     return {
+      align,
       PLUGIN_NAME,
       rules,
       resourceForm,
diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue
index 64d010c270..0c711a3ba3 100644
--- a/packages/plugins/datasource/src/DataSourceForm.vue
+++ b/packages/plugins/datasource/src/DataSourceForm.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-setting v-if="isOpen" title="设置数据源" :fixed-name="PLUGIN_NAME.Collections" class="data-source-form">
+  <plugin-setting
+    v-if="isOpen"
+    title="设置数据源"
+    :fixed-name="PLUGIN_NAME.Collections"
+    :align="align"
+    class="data-source-form"
+  >
     <template #header>
       <button-group>
         <tiny-button class="field-save" type="primary" @click="save">保存</tiny-button>
@@ -27,7 +33,7 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, computed } from 'vue'
 import { Form, Button } from '@opentiny/vue'
 import { ButtonGroup, PluginSetting, SvgButton } from '@opentiny/tiny-engine-common'
 import DataSourceType from './DataSourceType.vue'
@@ -91,7 +97,8 @@ export default {
       dataSource: {}
     })
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
 
     watch(
       () => state.dataSource.name,
@@ -249,6 +256,7 @@ export default {
     }
 
     return {
+      align,
       PLUGIN_NAME,
       state,
       isOpen,
diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
index a2990c67ad..67b539a976 100644
--- a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
+++ b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
@@ -1,6 +1,12 @@
 <template>
   <div v-if="isOpen" class="global-data-handler">
-    <plugin-setting title="全局设置" :fixed-name="PLUGIN_NAME.Collections" @cancel="close" @save="saveGlobalDataHandle">
+    <plugin-setting
+      title="全局设置"
+      :align="align"
+      :fixed-name="PLUGIN_NAME.Collections"
+      @cancel="close"
+      @save="saveGlobalDataHandle"
+    >
       <template #content>
         <tiny-collapse v-model="activeNames">
           <tiny-collapse-item title="请求参数处理函数（willFetch）" name="willFetch">
@@ -20,7 +26,7 @@
 
 <script>
 import DataHandlerEditor from './RemoteDataAdapterForm.vue'
-import { watch, ref, nextTick, reactive } from 'vue'
+import { watch, ref, nextTick, reactive, computed } from 'vue'
 import { requestGlobalDataHandler } from './js/http'
 import { useLayout, useModal, useResource, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
@@ -48,7 +54,8 @@ export default {
   setup() {
     const { confirm } = useModal()
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
 
     const state = reactive({
       dataHandlerValue: useResource().appSchemaState?.dataHandler?.value,
@@ -88,6 +95,7 @@ export default {
     )
 
     return {
+      align,
       PLUGIN_NAME,
       isOpen,
       close,
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 500ca84504..950af77e06 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -4,6 +4,7 @@
     :is-icon-button="false"
     :showIfFullScreen="true"
     :fixed-name="PLUGIN_NAME.Collections"
+    :align="align"
     title="静态数据管理"
     class="datasource-record-list"
     @cancel="closeRecordList"
@@ -123,7 +124,8 @@ export default {
     const grid = ref(null)
     const { confirm } = useModal()
     const { toClipboard } = useClipboard()
-    const { layoutState, PLUGIN_NAME } = useLayout()
+    const { layoutState, PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
 
     const state = reactive({
       totalData: [],
@@ -560,6 +562,7 @@ export default {
     }
 
     return {
+      align,
       PLUGIN_NAME,
       isOpen,
       state,
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index 15073545a6..d8b8e304e1 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -4,6 +4,7 @@
       title="获取远程字段"
       class="remote-setting"
       :isSecond="true"
+      :align="align"
       @cancel="closePanel"
       @save="saveRemote"
     >
@@ -52,7 +53,7 @@
 </template>
 
 <script>
-import { reactive, watch, ref } from 'vue'
+import { reactive, watch, ref, computed } from 'vue'
 import { Collapse, CollapseItem, Tabs, TabItem, Button } from '@opentiny/vue'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import DataSourceRemoteForm, { getServiceForm } from './DataSourceRemoteForm.vue'
@@ -61,7 +62,7 @@ import DataSourceRemoteAutoload from './DataSourceRemoteAutoload.vue'
 import DataSourceRemoteAdapter from './DataSourceRemoteDataAdapter.vue'
 import DataSrouceRemoteDataResult, { getResponseData } from './DataSourceRemoteDataResult.vue'
 import { open as openRemoteMapping } from './DataSourceRemoteMapping.vue'
-import { useDataSource, useNotify } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useDataSource, useNotify } from '@opentiny/tiny-engine-meta-register'
 import { isEmptyObject } from '@opentiny/vue-renderless/common/type'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { getRequest } from './js/datasource'
@@ -114,6 +115,9 @@ export default {
     const dataSourceRemoteAdapteRef = ref(null)
     const { dataSourceState } = useDataSource()
 
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Collections))
+
     const state = reactive({
       remoteData: { options: {} },
       activeName: ['excute', 'result'],
@@ -219,6 +223,7 @@ export default {
     }
 
     return {
+      align,
       state,
       dataSourceRemoteAdapteRef,
       closePanel: close,
diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue
index 9f94e837d1..07d7f34edd 100644
--- a/packages/plugins/datasource/src/Main.vue
+++ b/packages/plugins/datasource/src/Main.vue
@@ -5,6 +5,7 @@
     :fixedPanels="fixedPanels"
     :docsUrl="docsUrl"
     :isShowDocsIcon="true"
+    @close="$emit('close')"
   >
     <template #header>
       <svg-button
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index ff40ef257c..188c9b1ac3 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -1,6 +1,7 @@
 <template>
   <plugin-setting
     v-if="panel.show"
+    :align="align"
     :title="validGroup.groupName"
     :fixed-name="PLUGIN_NAME.Materials"
     @cancel="closeGroupPanel"
@@ -33,7 +34,7 @@
   </plugin-setting>
 </template>
 <script>
-import { reactive, watch, provide, inject, ref } from 'vue'
+import { reactive, watch, provide, inject, ref, computed } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
@@ -124,7 +125,8 @@ export default {
 
     const validGroup = ref({ ...selectedGroup.value })
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Materials))
 
     watch(
       () => selectedGroup.value.groupId,
@@ -280,6 +282,7 @@ export default {
     })
 
     return {
+      align,
       validGroup,
       state,
       panel,
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index 8780be3771..08311115f5 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -2,6 +2,7 @@
   <plugin-setting
     v-if="isShow"
     :fixed-name="PLUGIN_NAME.AppManage"
+    :align="align"
     :title="state.title"
     class="pageFolder-plugin-setting"
   >
@@ -32,7 +33,7 @@
 </template>
 
 <script>
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { Button, Collapse, CollapseItem } from '@opentiny/vue'
 import { PluginSetting, SvgButton, ButtonGroup } from '@opentiny/tiny-engine-common'
 import {
@@ -89,7 +90,8 @@ export default {
     const pageGeneral = registry.components.PageGeneral
     const folderGeneralRef = ref(null)
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.AppManage))
 
     const closeFolderSetting = () => {
       if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
@@ -205,6 +207,7 @@ export default {
     }
 
     return {
+      align,
       PLUGIN_NAME,
       saveFolderSetting,
       deleteFolder: throttle(5000, true, deleteFolder),
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 9e47841789..edba8510d4 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -1,5 +1,11 @@
 <template>
-  <plugin-setting v-if="isShow" :fixed-name="PLUGIN_NAME.AppManage" :title="state.title" class="page-plugin-setting">
+  <plugin-setting
+    v-if="isShow"
+    :fixed-name="PLUGIN_NAME.AppManage"
+    :align="align"
+    :title="state.title"
+    class="page-plugin-setting"
+  >
     <template #header>
       <button-group>
         <tiny-button type="primary" @click="savePageSetting">保存</tiny-button>
@@ -54,7 +60,7 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { Button, Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { PluginSetting, ButtonGroup, SvgButton, LifeCycles } from '@opentiny/tiny-engine-common'
 import {
@@ -136,7 +142,8 @@ export default {
     const beforeCreatePage = registry?.options?.beforeCreatePage
     const pageGeneralRef = ref(null)
 
-    const { PLUGIN_NAME } = useLayout()
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.AppManage))
 
     const state = reactive({
       activeName: Object.values(PAGE_SETTING_SESSION),
@@ -383,6 +390,7 @@ export default {
     }
 
     return {
+      align,
       PLUGIN_NAME,
       state,
       isShow,
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 32b26a2000..52c87aa494 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -41,7 +41,7 @@
           @removeStore="removeStore"
         />
       </div>
-      <div class="data-source-right-panel" v-if="isPanelShow" :style="{ left: `${firstPanelOffset}px` }">
+      <div class="data-source-right-panel" v-if="isPanelShow" :style="alignStyle">
         <div class="header">
           <span>{{ addDataSource }}</span>
           <span class="options-wrap">
@@ -142,12 +142,18 @@ export default {
     })
     const selectedKey = ref(null)
 
-    const { PLUGIN_NAME, getPluginWidth } = useLayout()
+    const { PLUGIN_NAME, getPluginWidth, getPluginByLayout } = useLayout()
 
     const firstPanelOffset = computed(() => {
       return getPluginWidth(PLUGIN_NAME.State)
     })
 
+    const alignStyle = computed(() => {
+      const panelAlign = getPluginByLayout(PLUGIN_NAME.State)
+      const align = panelAlign.includes('left') ? 'left' : 'right'
+      return `${align}: ${firstPanelOffset.value}px`
+    })
+
     const panelState = reactive({
       emitEvent: emit
     })
@@ -378,6 +384,7 @@ export default {
     })
 
     return {
+      alignStyle,
       firstPanelOffset,
       PLUGIN_NAME,
       isBlock,
@@ -472,7 +479,6 @@ export default {
     border-right: 1px solid var(--te-state-common-border-color-divider);
     background: var(--te-state-common-bg-color);
     position: absolute;
-    left: var(--base-left-panel-width);
     top: 0;
 
     .header {

From fa32411314897fa9388b965cb3dabf2f9adf2b81 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Thu, 27 Feb 2025 01:03:44 -0800
Subject: [PATCH 20/25] fix: the icon is not displayed when the interface is
 first loaded.

---
 packages/layout/src/Main.vue                | 3 ++-
 packages/layout/src/composable/useLayout.js | 7 ++++++-
 packages/plugins/help/src/HelpIcon.vue      | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index 9d52d885b3..c6131ddad3 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -63,7 +63,7 @@ export default {
     const configProvider = layoutRegistry.options.configProvider
     const configProviderDesign = layoutRegistry.options.configProviderDesign
 
-    const { layoutState, leftMenuShownStorage, rightMenuShownStorage } = useLayout()
+    const { layoutState, leftMenuShownStorage, rightMenuShownStorage, initPluginStorageReactive } = useLayout()
     const { plugins, settings } = layoutState
 
     const toggleNav = ({ item }) => {
@@ -115,6 +115,7 @@ export default {
       }
     })
     localStorage.setItem('plugin', JSON.stringify(plugin))
+    initPluginStorageReactive(plugin)
 
     return {
       left,
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index dd64389888..b258896b91 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -165,7 +165,6 @@ export default () => {
 
   try {
     const storedPlugin = localStorage.getItem('plugin')
-
     if (storedPlugin) {
       plugin = JSON.parse(storedPlugin)
     }
@@ -288,7 +287,13 @@ export default () => {
     pluginStorageReactive.value[name].isShow = !pluginStorageReactive.value[name].isShow
   }
 
+  const initPluginStorageReactive = (pluginList) => {
+    if (Object.keys(pluginStorageReactive.value).length) return
+    pluginStorageReactive.value = pluginList
+  }
+
   return {
+    initPluginStorageReactive,
     PLUGIN_NAME,
     PLUGIN_POSITION,
     activeSetting,
diff --git a/packages/plugins/help/src/HelpIcon.vue b/packages/plugins/help/src/HelpIcon.vue
index 4140ce92f7..f6ea3a5412 100644
--- a/packages/plugins/help/src/HelpIcon.vue
+++ b/packages/plugins/help/src/HelpIcon.vue
@@ -154,7 +154,7 @@ export default {
       {
         title: '组件设置',
         text: '拖拽至画布中的组件或区块，在这里进行属性、样式、事件绑定等众多高级配置；',
-        domElement: '#tiny-right-panel',
+        domElement: '#rightTop',
         classes: 'lwocode-guide-toolbar-right',
         popPosition: 'left',
         button: [

From dd31b481ae9924825f894a94923fbc919f5be2b9 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Sun, 2 Mar 2025 19:25:55 -0800
Subject: [PATCH 21/25] fix: object stack exception

---
 packages/register/src/common.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/register/src/common.js b/packages/register/src/common.js
index 33fa0e960e..e2f9e2472e 100644
--- a/packages/register/src/common.js
+++ b/packages/register/src/common.js
@@ -9,7 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-
+import { isRef } from 'vue'
 import { initHook } from './hooks'
 
 const vueLifeHook = [
@@ -161,7 +161,7 @@ export const preprocessRegistry = (registry) => {
 
 export const generateRegistry = (registry) => {
   Object.entries(registry).forEach(([key, value]) => {
-    if (typeof value === 'object' && value) {
+    if (typeof value === 'object' && value && !isRef(value)) {
       const { id } = value
       // 如果匹配到了id，说明是元服务配置，对元服务配置做读取和写入
       if (id && key !== 'metaData') {

From 13747bb6cf7d0ca693656a30d636744a5d088371 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 3 Mar 2025 00:36:01 -0800
Subject: [PATCH 22/25] fix: remove redundant claims

---
 packages/plugins/script/src/Main.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 4265c26b2f..89335ba41a 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -57,7 +57,7 @@ export default {
       type: Array
     }
   },
-  emits: ['close', 'fix-panel'],
+  emits: ['close'],
   setup(props, { emit }) {
     const docsUrl = useHelp().getDocsUrl('script')
     const { state, monaco, change, close, saveMethods } = useMethod({ emit })

From 701d7f1432a598c4881e38c62c9ceefe844b1b09 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 3 Mar 2025 18:21:23 -0800
Subject: [PATCH 23/25] fix: right-click menu scroll bar appears

---
 packages/common/component/PluginRightMenu.vue | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/common/component/PluginRightMenu.vue b/packages/common/component/PluginRightMenu.vue
index c3875d168a..b8b1454392 100644
--- a/packages/common/component/PluginRightMenu.vue
+++ b/packages/common/component/PluginRightMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <ul
     v-if="contextMenu.visible"
-    class="context-menu"
+    class="plugin-context-menu"
     :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
   >
     <li v-if="contextMenu.type" @click="hidePlugin">隐藏 "{{ contextMenu.item.title }}"</li>
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { reactive, onMounted, onBeforeUnmount } from 'vue'
+import { reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 export default {
   props: {
@@ -55,10 +55,26 @@ export default {
     // 显示菜单
     const contextMenuWidth = props.align.includes('right') ? 130 : 0
     const showContextMenu = (x, y, type, item, index, align) => {
+      const windowHeight = window.innerHeight
+
       contextMenu.type = type
       contextMenu.visible = true
-      contextMenu.x = x - contextMenuWidth
-      contextMenu.y = y
+
+      nextTick(() => {
+        const pluginMenuPanel = document.querySelector('.plugin-context-menu')
+        const menuHeight = pluginMenuPanel?.offsetHeight
+
+        const spaceBelow = windowHeight - y - 20
+
+        if (menuHeight && spaceBelow < menuHeight) {
+          contextMenu.y = y - menuHeight
+        } else {
+          contextMenu.y = y
+        }
+
+        contextMenu.x = x - contextMenuWidth
+      })
+
       if (type) {
         contextMenu.item = item
         contextMenu.index = index
@@ -98,7 +114,7 @@ export default {
     }
 
     const handleClickOutside = (event) => {
-      if (!event.target.closest('.context-menu')) {
+      if (!event.target.closest('.plugin-context-menu')) {
         hideContextMenu()
       }
     }
@@ -126,7 +142,7 @@ export default {
 
 <style scoped>
 /* 引入B的CSS样式 */
-.context-menu {
+.plugin-context-menu {
   position: absolute;
   background: white;
   border: 1px solid #ccc;
@@ -136,7 +152,7 @@ export default {
   z-index: 1000;
 }
 
-.context-menu-header {
+.plugin-context-menu-header {
   padding: 8px 12px;
   font-weight: bold;
   cursor: default;
@@ -147,12 +163,12 @@ export default {
   border-bottom: 1px solid #ccc;
 }
 
-.context-menu li {
+.plugin-context-menu li {
   padding: 8px 12px;
   cursor: pointer;
 }
 
-.context-menu li:hover {
+.plugin-context-menu li:hover {
   background: #f0f0f0;
 }
 .menu-item-wrapper {

From c918f728b155ec02fe021514cb7e6271ece30b0c Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 12 Mar 2025 03:50:45 -0700
Subject: [PATCH 24/25] fix: right-click to migrate plugins and remove hidden
 plugin bar

---
 packages/common/component/PluginRightMenu.vue | 12 +++++-----
 packages/common/component/PluginSetting.vue   | 22 ++++++++++++++----
 packages/layout/src/DesignPlugins.vue         | 23 ++++++++++++++-----
 packages/layout/src/DesignSettings.vue        |  5 ++--
 packages/layout/src/composable/useLayout.js   |  9 +++++++-
 5 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/packages/common/component/PluginRightMenu.vue b/packages/common/component/PluginRightMenu.vue
index b8b1454392..401c147de5 100644
--- a/packages/common/component/PluginRightMenu.vue
+++ b/packages/common/component/PluginRightMenu.vue
@@ -22,12 +22,11 @@
       </span>
       <span>{{ item.title }}</span>
     </li>
-    <li @click="hideSidebar">隐藏活动栏</li>
   </ul>
 </template>
 
 <script>
-import { reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { reactive, onMounted, onBeforeUnmount, nextTick, ref } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'
 export default {
   props: {
@@ -41,7 +40,8 @@ export default {
   },
   emits: ['close', 'switchAlign'],
   setup(props, { emit }) {
-    const { PLUGIN_POSITION, getPluginShown, changePluginShown, changeMenuShown } = useLayout()
+    const { getPluginShown, changePluginShown, changeMenuShown } = useLayout()
+    const pluginGroupPosition = ref('')
     const contextMenu = reactive({
       type: true,
       visible: false,
@@ -54,7 +54,7 @@ export default {
 
     // 显示菜单
     const contextMenuWidth = props.align.includes('right') ? 130 : 0
-    const showContextMenu = (x, y, type, item, index, align) => {
+    const showContextMenu = (x, y, type, item, index, position) => {
       const windowHeight = window.innerHeight
 
       contextMenu.type = type
@@ -78,7 +78,7 @@ export default {
       if (type) {
         contextMenu.item = item
         contextMenu.index = index
-        contextMenu.list = align
+        pluginGroupPosition.value = position
       }
     }
 
@@ -97,7 +97,7 @@ export default {
     // 切换组件位置
     const switchAlign = () => {
       emit('close')
-      emit('switchAlign', contextMenu.index, contextMenu.item.id, contextMenu.list, PLUGIN_POSITION.leftTop)
+      emit('switchAlign', contextMenu.index, contextMenu.item.id, pluginGroupPosition.value)
       hideContextMenu()
     }
 
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index b2efa58501..34f9cf7e36 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -5,7 +5,8 @@
       'plugin-setting',
       { 'second-panel': isSecond },
       { 'full-screen': state.isFullScreen },
-      { 'align-right': align.includes('right') }
+      { 'align-right': align.includes('right') },
+      shadowClass
     ]"
     :style="alignStyle"
     @click="$emit('click')"
@@ -150,8 +151,15 @@ export default {
       return isFullScreen ? '收起' : '全屏查看'
     }
 
+    // 计算属性用于确定阴影类
+    const shadowClass = computed(() => {
+      if (props.isSecond) return ''
+      return props.align.includes('right') ? 'shadow-right' : 'shadow-left'
+    })
+
     return {
       alignStyle,
+      shadowClass,
       firstPanelOffset,
       state,
       fullScreen,
@@ -173,9 +181,15 @@ export default {
   border-left: 1px solid var(--te-component-common-border-color-divider);
 
   &:not(.second-panel) {
-    box-shadow: 6px 0px 3px 0px var(--te-component-common-shadow-color);
-    border-right: none;
-    border-left: none;
+    &.shadow-left {
+      box-shadow: 6px 0px 3px 0px var(--te-component-common-shadow-color);
+      border-right: none;
+    }
+
+    &.shadow-right {
+      box-shadow: -6px 0px 3px 0px var(--te-component-common-shadow-color);
+      border-left: none;
+    }
   }
 
   &.full-screen {
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index 9784d13495..61d643dcce 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -160,12 +160,6 @@ export default {
       bottomNavLists: getPluginsByPosition(PLUGIN_POSITION.leftBottom, props.pluginList)
     })
 
-    const switchAlign = (index, id, list, align) => {
-      list === PLUGIN_POSITION.leftTop ? state.topNavLists.splice(index, 1) : state.bottomNavLists.splice(index, 1)
-      emit('changeLeftAlign', id)
-      dragPluginLayout(list, align, index, 0)
-    }
-
     const changeAlign = (pluginId) => {
       const item = getPluginById(props.pluginList, pluginId)
       state.topNavLists.unshift(item)
@@ -215,6 +209,23 @@ export default {
       useLayout().closePlugin(true)
     }
 
+    /**
+     * @param index 组件索引
+     * @param id 组件 ID, 类似于 'engine.plugins.*'
+     * @param from 组件来源
+     */
+    const switchAlign = (index, id, from) => {
+      if (from === PLUGIN_POSITION.leftTop) {
+        state.topNavLists.splice(index, 1)
+      } else {
+        state.bottomNavLists.splice(index, 1)
+      }
+      emit('changeLeftAlign', id)
+
+      if (!isSameSide(index, 0)) close()
+      dragPluginLayout(from, PLUGIN_POSITION.rightTop, index, 0)
+    }
+
     const fixPanel = (pluginName) => {
       pluginState.fixedPanels = pluginState.fixedPanels?.includes(pluginName)
         ? pluginState.fixedPanels?.filter((item) => item !== pluginName)
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
index ebdc40df38..c83a10986d 100644
--- a/packages/layout/src/DesignSettings.vue
+++ b/packages/layout/src/DesignSettings.vue
@@ -109,10 +109,11 @@ export default {
       useLayout().closeSetting(true)
     }
 
-    const switchAlign = (index, id, list, align) => {
+    const switchAlign = (index, id, from) => {
       settingPlugins.value.splice(index, 1)
       emit('changeRightAlign', id)
-      dragPluginLayout(list, align, index, 0)
+      if (!isSameSide(index, 0)) close()
+      dragPluginLayout(from, PLUGIN_POSITION.leftTop, index, 0)
     }
 
     const changeAlign = (pluginId) => {
diff --git a/packages/layout/src/composable/useLayout.js b/packages/layout/src/composable/useLayout.js
index b258896b91..4062621f67 100644
--- a/packages/layout/src/composable/useLayout.js
+++ b/packages/layout/src/composable/useLayout.js
@@ -224,7 +224,14 @@ export default () => {
     }
   }
 
-  //拖拽后改变插件位置
+  /**
+   * 拖拽后改变插件位置
+   * @param {*} from 插件的起始位置
+   * @param {*} to  插件的结束位置
+   * @param {*} oldIndex  插件的起始索引
+   * @param {*} newIndex 插件的结束索引
+   * @returns
+   */
   const dragPluginLayout = (from, to, oldIndex, newIndex) => {
     if (from === to && oldIndex === newIndex) return
 

From 934d6d31c05dd94b17be8bb19e4ea7cd206a6e2c Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Wed, 12 Mar 2025 04:46:09 -0700
Subject: [PATCH 25/25] fix: Initialization datasource error

---
 packages/plugins/datasource/src/DataSourceForm.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue
index 0c711a3ba3..90662a5ffb 100644
--- a/packages/plugins/datasource/src/DataSourceForm.vue
+++ b/packages/plugins/datasource/src/DataSourceForm.vue
@@ -147,7 +147,8 @@ export default {
 
         dataSourceState.dataSourceColumn = { name, type: type || 'array', columns: filterColumns }
         dataSourceState.dataSourceColumnCopies = extend(true, {}, dataSourceState.dataSourceColumn)
-      }
+      },
+      { immediate: true }
     )
 
     const closeAllPanel = () => {