diff --git a/mockServer/assets/css/0.1.20/index.css b/mockServer/assets/css/0.1.20/index.css
index 9a0397a1b..e4b8210e3 100644
--- a/mockServer/assets/css/0.1.20/index.css
+++ b/mockServer/assets/css/0.1.20/index.css
@@ -476,6 +476,7 @@
   --ti-base-size-height-small: 28px;
   --ti-base-size-height-minor: 30px;
   --ti-base-size-height-mini: 24px;
+  --ti-date-picker-width: 280px;
 }
 :root {
   --ti-errortips-box-background: var(--ti-base-color-light);
diff --git a/package.json b/package.json
index 8586040b0..4cc3d19e5 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,8 @@
     "vite": "^4.3.7",
     "vite-plugin-monaco-editor": "^1.0.10",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-eslint-parser": "^8.0.1"
+    "vue-eslint-parser": "^8.0.1",
+    "@vueuse/core": "^9.6.0"
   },
   "browserslist": [
     "> 1%",
diff --git a/packages/common/component/PluginPanel.vue b/packages/common/component/PluginPanel.vue
index b759c58a9..c1793be13 100644
--- a/packages/common/component/PluginPanel.vue
+++ b/packages/common/component/PluginPanel.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { inject, ref, watch } from 'vue'
+import { inject, ref } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-controller'
 import CloseIcon from './CloseIcon.vue'
 import SvgButton from './SvgButton.vue'
@@ -70,7 +70,7 @@ export default {
   },
   emits: ['close'],
   setup(props, { emit }) {
-    const { pluginWidth } = useLayout()
+    const { getPluginWidth, changePluginWidth } = useLayout()
     const panelState = inject('panelState')
     const closePanel = () => {
       useLayout().closePlugin()
@@ -104,23 +104,20 @@ export default {
     const MIN_WIDTH = 300 // 固定的最小宽度值
     const MAX_WIDTH = 1000 // 固定的最大宽度值
     const panel = ref(null)
-    const panelWidth = ref(pluginWidth[props.fixedName]) // 使用默认宽度
-    watch(pluginWidth, (newWidth) => {
-      panelWidth.value = newWidth[props.fixedName]
-    })
+    const panelWidth = ref(getPluginWidth(props.fixedName)) // 使用默认宽度
     let startX = 0
     let startWidth = 0
 
     const onMouseMoveRight = (event) => {
       const newWidth = startWidth + (event.clientX - startX)
       panelWidth.value = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH))
-      pluginWidth[props.fixedName] = panelWidth.value
+      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))
-      pluginWidth[props.fixedName] = panelWidth.value
+      changePluginWidth(props.fixedName, panelWidth.value)
     }
 
     const throttledMouseMoveRight = throttle(onMouseMoveRight, 50)
@@ -156,8 +153,7 @@ export default {
       panel,
       panelWidth,
       onMouseDownRight,
-      onMouseDownLeft,
-      pluginWidth
+      onMouseDownLeft
     }
   }
 }
diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
index 7c24b1ccc..53594195e 100644
--- a/packages/controller/src/useLayout.js
+++ b/packages/controller/src/useLayout.js
@@ -12,6 +12,7 @@
 
 import { reactive, nextTick } from 'vue'
 import { constants } from '@opentiny/tiny-engine-utils'
+import { useStorage } from '@vueuse/core'
 
 const { PAGE_STATUS } = constants
 
@@ -36,7 +37,8 @@ const PLUGIN_NAME = {
   Style: 'SettingStyles',
   Props: 'SettingProps'
 }
-const pluginWidth = reactive({
+
+const pluginWidth = {
   Materials: '300',
   OutlineTree: '300',
   AppManage: '300',
@@ -50,7 +52,17 @@ const pluginWidth = reactive({
   SettingProps: '320',
   SettingStyles: '320',
   SettingEvents: '320'
-})
+}
+const pluginWidthStorage = useStorage('pluginWidth', pluginWidth)
+const getPluginWidth = (name) => {
+  return pluginWidthStorage.value[name]
+}
+const changePluginWidth = (name, width) => {
+  if (Object.prototype.hasOwnProperty.call(pluginWidthStorage.value, name)) {
+    pluginWidthStorage.value[name] = width
+  }
+}
+
 const pluginState = reactive({
   pluginEvent: 'all'
 })
@@ -167,6 +179,7 @@ export default () => {
     getPluginState,
     pluginState,
     isEmptyPage,
-    pluginWidth
+    getPluginWidth,
+    changePluginWidth
   }
 }
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index 373aa772b..6c35a1636 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/packages/design-core/src/DesignPlugins.vue
@@ -1,95 +1,100 @@
 <!-- 左侧插件栏-->
 <template>
-  <div id="tiny-engine-nav-panel" :style="{ 'pointer-events': pluginState.pluginEvent }">
-    <!-- 图标菜单上侧区域（主要icon） -->
-    <ul class="nav-panel-lists top">
-      <li
-        v-for="(item, index) in state.topNavLists"
-        :key="index"
-        :class="{
-          'list-item': true,
-          'first-item': index === 0,
-          active: item.id === renderPanel,
-          prev: state.prevIdex - 1 === index
-        }"
-        :title="item.title"
-        @click="clickMenu({ item, index })"
-      >
-        <div>
-          <span class="item-icon">
-            <svg-icon
-              v-if="typeof iconComponents[item.id] === 'string'"
-              :name="iconComponents[item.id]"
-              class="panel-icon"
-            ></svg-icon>
-            <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
-          </span>
-        </div>
-      </li>
-    </ul>
-
-    <!-- 图标菜单下侧区域（附加icon） -->
-    <ul class="nav-panel-lists bottom">
-      <!-- 与上侧间隔 -->
-      <li style="flex: 1" class="list-item"></li>
-      <!-- 下侧具体icon插件菜单遍历渲染 -->
-      <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>
-        </div>
-      </li>
-      <!-- 其他依赖插件菜单(比如AI机器人插件) -->
-      <li
-        v-if="state.independence"
-        :key="state.bottomNavLists.length + 1"
-        :class="['list-item']"
-        :title="state.independence.title"
-        @click="openAIRobot"
-      >
-        <div>
-          <span class="item-icon">
-            <img class="chatgpt-icon" src="../assets/AI.png" />
-          </span>
-        </div>
-      </li>
-    </ul>
+  <div>
+    <div id="tiny-engine-nav-panel" :style="{ 'pointer-events': pluginState.pluginEvent }">
+      <!-- 图标菜单上侧区域（主要icon） -->
+      <ul class="nav-panel-lists top">
+        <li
+          v-for="(item, index) in state.topNavLists"
+          :key="index"
+          :class="{
+            'list-item': true,
+            'first-item': index === 0,
+            active: item.id === renderPanel,
+            prev: state.prevIdex - 1 === index
+          }"
+          :title="item.title"
+          @click="clickMenu({ item, index })"
+        >
+          <div>
+            <span class="item-icon">
+              <svg-icon
+                v-if="typeof iconComponents[item.id] === 'string'"
+                :name="iconComponents[item.id]"
+                class="panel-icon"
+              ></svg-icon>
+              <component v-else :is="iconComponents[item.id]" class="panel-icon"></component>
+            </span>
+          </div>
+        </li>
+      </ul>
+
+      <!-- 图标菜单下侧区域（附加icon） -->
+      <ul class="nav-panel-lists bottom">
+        <!-- 与上侧间隔 -->
+        <li style="flex: 1" class="list-item"></li>
+        <!-- 下侧具体icon插件菜单遍历渲染 -->
+        <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>
+          </div>
+        </li>
+        <!-- 其他依赖插件菜单(比如AI机器人插件) -->
+        <li
+          v-if="state.independence"
+          :key="state.bottomNavLists.length + 1"
+          :class="['list-item']"
+          :title="state.independence.title"
+          @click="openAIRobot"
+        >
+          <div>
+            <span class="item-icon">
+              <img class="chatgpt-icon" src="../assets/AI.png" />
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 
-  <!-- 插件面板 -->
-  <div
-    v-show="renderPanel && components[renderPanel]"
-    id="tiny-engine-left-panel"
-    :class="[renderPanel, { 'is-fixed': pluginsState.fixedPanels.includes(renderPanel) }]"
-  >
-    <div class="left-panel-wrap">
-      <keep-alive>
-        <component
-          :is="components[renderPanel]"
-          ref="pluginRef"
-          :fixed-panels="pluginsState.fixedPanels"
-          @close="close"
-          @fixPanel="fixPanel"
-        ></component>
-      </keep-alive>
+  <div>
+    <!-- 插件面板 -->
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-left-panel"
+      :class="[renderPanel, { 'is-fixed': pluginsState.fixedPanels.includes(renderPanel) }]"
+    >
+      <div class="left-panel-wrap">
+        <keep-alive>
+          <component
+            :is="components[renderPanel]"
+            ref="pluginRef"
+            :fixed-panels="pluginsState.fixedPanels"
+            @close="close"
+            @fixPanel="fixPanel"
+          ></component>
+        </keep-alive>
+      </div>
     </div>
   </div>
+
   <!--  AI 悬浮窗  -->
   <Teleport to="body">
     <div v-if="robotVisible" class="robot-dialog">
@@ -266,6 +271,7 @@ export default {
 #tiny-engine-nav-panel {
   display: none;
   width: var(--base-nav-panel-width);
+  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -287,7 +293,7 @@ export default {
 
     &.bottom {
       flex: 1;
-      padding-bottom: 36px;
+      padding-bottom: 80px;
     }
 
     .list-item {
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index 74fb0f8af..8c5f6ab04 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -1,43 +1,45 @@
 <!-- 右侧插件栏-->
 <template>
-  <!-- 插件面板 -->
-  <div
-    v-show="renderPanel && components[renderPanel]"
-    id="tiny-engine-right-panel"
-    :class="[renderPanel, { 'is-fixed': settingsState.fixedPanels.includes(renderPanel) }]"
-  >
-    <div class="right-panel-wrap">
-      <component
-        :is="components[renderPanel]"
-        :fixed-panels="settingsState.fixedPanels"
-        @close="close"
-        @fixPanel="fixPanel"
-      ></component>
-      <div v-show="activating" class="active2" />
+  <div>
+    <!-- 插件面板 -->
+    <div
+      v-show="renderPanel && components[renderPanel]"
+      id="tiny-engine-right-panel"
+      :class="[renderPanel, { 'is-fixed': settingsState.fixedPanels.includes(renderPanel) }]"
+    >
+      <div class="right-panel-wrap">
+        <component
+          :is="components[renderPanel]"
+          :fixed-panels="settingsState.fixedPanels"
+          @close="close"
+          @fixPanel="fixPanel"
+        ></component>
+        <div v-show="activating" class="active2" />
+      </div>
+    </div>
+    <div id="tiny-engine-nav-panel">
+      <!-- 图标菜单 -->
+      <ul class="nav-panel-lists">
+        <li
+          v-for="(item, index) in state.leftList"
+          :key="index"
+          :class="{
+            'list-item': true,
+            'first-item': index === 0,
+            active: item.id === renderPanel
+          }"
+          :title="item.title"
+          @click="clickMenu({ item, index })"
+        >
+          <div>
+            <span class="item-icon">
+              <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>
+        </li>
+      </ul>
     </div>
-  </div>
-  <div id="tiny-engine-nav-panel">
-    <!-- 图标菜单 -->
-    <ul class="nav-panel-lists">
-      <li
-        v-for="(item, index) in state.leftList"
-        :key="index"
-        :class="{
-          'list-item': true,
-          'first-item': index === 0,
-          active: item.id === renderPanel
-        }"
-        :title="item.title"
-        @click="clickMenu({ item, index })"
-      >
-        <div>
-          <span class="item-icon">
-            <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>
-      </li>
-    </ul>
   </div>
 </template>
 
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 9c486c51e..5b0eb264a 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -126,8 +126,6 @@ import { useLayout, useApp, getGlobalConfig, useModal, useNotify } from '@openti
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 
 const isOpen = ref(false)
-const { pluginWidth, PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['Bridge']])
 
 export const openPanel = () => {
   isOpen.value = true
@@ -155,6 +153,8 @@ export default {
     SvgButton
   },
   setup(props, { emit }) {
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Bridge']))
     const monacoOptions = {
       theme: theme(),
       roundedSelection: true,
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index a11148b91..454d6880a 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -127,14 +127,13 @@ export default {
     const activeName = ref(STATE.CURRENT_STATE)
     const isBlock = computed(() => useCanvas().isBlock())
     const { setSaved } = useCanvas()
-    const { PLUGIN_NAME, getPluginApi, pluginWidth } = useLayout()
+    const { PLUGIN_NAME, getPluginApi, getPluginWidth } = useLayout()
     const { openCommon } = getPluginApi(PLUGIN_NAME.save)
     const docsUrl = useHelp().getDocsUrl('data')
     const panelState = reactive({
       emitEvent: emit
     })
-    const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['Data']])
-
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Data']))
     provide('panelState', panelState)
 
     const state = reactive({
diff --git a/packages/plugins/datasource/src/DataSourceForm.vue b/packages/plugins/datasource/src/DataSourceForm.vue
index 98311ebdc..a5b089678 100644
--- a/packages/plugins/datasource/src/DataSourceForm.vue
+++ b/packages/plugins/datasource/src/DataSourceForm.vue
@@ -48,8 +48,6 @@ import { useModal, useApp, useDataSource } from '@opentiny/tiny-engine-controlle
 import { extend } from '@opentiny/vue-renderless/common/object'
 
 let isOpen = ref(false)
-const { pluginWidth, PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['Datasource']])
 
 export const open = () => {
   isOpen.value = true
@@ -85,7 +83,8 @@ export default {
     const { confirm, message } = useModal()
     const { appInfoState } = useApp()
     const { dataSourceState } = useDataSource()
-
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
     const state = reactive({
       dataSource: {}
     })
diff --git a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
index 8c6c4fdbe..c0fca7c1d 100644
--- a/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
+++ b/packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue
@@ -35,8 +35,7 @@ import { constants } from '@opentiny/tiny-engine-utils'
 
 const { DEFAULT_INTERCEPTOR } = constants
 const isOpen = ref(false)
-const { pluginWidth, PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['Datasource']])
+
 export const open = () => {
   isOpen.value = true
 }
@@ -54,7 +53,8 @@ export default {
   },
   setup() {
     const { confirm } = useModal()
-
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
     const state = reactive({
       dataHandlerValue: useResource().resState?.dataHandler?.value,
       willFetchValue: useResource().resState.willFetch?.value,
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index e8a91ee76..444b181b1 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -107,8 +107,6 @@ import { downloadFn, handleImportedData, overrideOrMergeData, getDataAfterPage }
 import DataSourceRecordUpload from './DataSourceRecordUpload.vue'
 
 let isOpen = ref(false)
-const { pluginWidth, PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['Datasource']])
 
 export const open = () => {
   isOpen.value = true
@@ -139,6 +137,8 @@ export default {
     const { confirm } = useModal()
     const { toClipboard } = useClipboard()
     const { layoutState } = useLayout()
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
 
     const state = reactive({
       totalData: [],
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index 724546394..e16242dc0 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="box">
     <plugin-setting
       title="获取远程字段"
       :isSecond="true"
@@ -57,10 +57,8 @@ import { useDataSource, useNotify } from '@opentiny/tiny-engine-controller'
 import { isEmptyObject } from '@opentiny/vue-renderless/common/type'
 import { obj2String, string2Obj } from '@opentiny/tiny-engine-controller/adapter'
 import { getRequest } from './js/datasource'
-
 export const isOpen = ref(false)
-const { pluginWidth, PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['Datasource']] - 280)
+
 export const open = () => {
   isOpen.value = true
 }
@@ -103,6 +101,10 @@ export default {
   setup(props, { emit }) {
     const dataSourceRemoteAdapteRef = ref(null)
     const { dataSourceState } = useDataSource()
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+
+    const panelWidth = window.getComputedStyle(document.body).getPropertyValue('--base-left-panel-width')
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']) - parseInt(panelWidth))
 
     const state = reactive({
       remoteData: { options: {} },
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index 1dbdef95d..c1b1c029e 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -43,8 +43,6 @@ import PageGeneral from './PageGeneral.vue'
 import http from './http.js'
 
 let isShow = ref(false)
-const { pluginWidth, PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME['AppManage']])
 
 export const openFolderSettingPanel = () => {
   isShow.value = true
@@ -84,6 +82,8 @@ export default {
     const { appInfoState } = useApp()
     const { pageSettingState, changeTreeData } = usePage()
     const { confirm } = useModal()
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['AppManage']))
 
     const closeFolderSetting = () => {
       if (isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)) {
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 381cce187..2900a7879 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -73,8 +73,6 @@ import http from './http.js'
 
 const { COMPONENT_NAME } = constants
 const isShow = ref(false)
-const { pluginWidth,PLUGIN_NAME } = useLayout()
-const leftMargin = computed(() => pluginWidth[PLUGIN_NAME["AppManage"]])
 
 export const openPageSettingPanel = () => {
   isShow.value = true
@@ -130,6 +128,8 @@ export default {
     const { pageState, initData } = useCanvas()
     const { confirm } = useModal()
     const pageGeneralRef = ref(null)
+    const { getPluginWidth, PLUGIN_NAME } = useLayout()
+    const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['AppManage']))
 
     const state = reactive({
       activeName: Object.values(PAGE_SETTING_SESSION),
diff --git a/packages/settings/events/src/Main.vue b/packages/settings/events/src/Main.vue
index 6177829ca..5857ea2bd 100644
--- a/packages/settings/events/src/Main.vue
+++ b/packages/settings/events/src/Main.vue
@@ -1,11 +1,5 @@
 <template>
-  <plugin-panel
-    title="高级"
-    :fixed-panels="fixedPanels"
-    :fixed-name="PLUGIN_NAME.Event"
-    :defaultWidth="320"
-    @close="$emit('close')"
-  >
+  <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">