refactor:The plugin width is persisted using vueuse.

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
     }
   }
 }

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
   }
 }

packages/plugins/bridge/src/BridgeSetting.vue

@@ -126,8 +126,8 @@ 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']])
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Bridge']))
 
 export const openPanel = () => {
   isOpen.value = true

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({

packages/plugins/datasource/src/DataSourceForm.vue

@@ -48,8 +48,8 @@ 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']])
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
 
 export const open = () => {
   isOpen.value = true

packages/plugins/datasource/src/DataSourceGlobalDataHandler.vue

@@ -35,8 +35,8 @@ 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']])
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
 export const open = () => {
   isOpen.value = true
 }

packages/plugins/datasource/src/DataSourceRecordList.vue

@@ -107,8 +107,8 @@ 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']])
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']))
 
 export const open = () => {
   isOpen.value = true

packages/plugins/datasource/src/DataSourceRemotePanel.vue

@@ -59,8 +59,8 @@ 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)
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['Datasource']) - 280)
 export const open = () => {
   isOpen.value = true
 }

packages/plugins/page/src/PageFolderSetting.vue

@@ -43,8 +43,8 @@ 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']])
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['AppManage']))
 
 export const openFolderSettingPanel = () => {
   isShow.value = true

packages/plugins/page/src/PageSetting.vue

@@ -73,8 +73,8 @@ 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"]])
+const { getPluginWidth, PLUGIN_NAME } = useLayout()
+const leftMargin = computed(() => getPluginWidth(PLUGIN_NAME['AppManage']))
 
 export const openPageSettingPanel = () => {
   isShow.value = true

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="SETTING_NAME.Event" @close="$emit('close')">
     <template #content>
       <tiny-collapse v-model="activeNames">
         <tiny-collapse-item title="事件绑定" name="bindEvent">