refactor: The plugin layout state is persisted using vueuse

packages/controller/src/useLayout.js

@@ -161,16 +161,33 @@ export default () => {
   } catch (error) {
     throw new Error(error)
   }
-  const pluginWidthStorage = useStorage('plugin', plugin)
+  const pluginStorageReactive = useStorage('plugin', plugin)
 
-  const getPluginWidth = (name) => pluginWidthStorage.value[name]?.width || 300
+  const getPluginWidth = (name) => pluginStorageReactive.value[name]?.width || 300
 
   const changePluginWidth = (name, width) => {
-    if (Object.prototype.hasOwnProperty.call(pluginWidthStorage.value, name)) {
-      pluginWidthStorage.value[name].width = width
+    if (Object.prototype.hasOwnProperty.call(pluginStorageReactive.value, name)) {
+      pluginStorageReactive.value[name].width = width
     }
   }
 
+  //获取某个布局（左上/左下/右上）的插件名称列表
+  const getPluginLayout = (layout) => {
+    const targetLayout = []
+    // 遍历对象并将 align 值分类到不同的数组中
+    for (const key in pluginStorageReactive.value) {
+      if (pluginStorageReactive.value[key].align === layout || layout === 'all') {
+        targetLayout.push(key)
+      }
+    }
+    return targetLayout //这里返回的是只有名字的数组
+  }
+
+  //修改某个插件的布局
+  const changePluginLayout = (name, layout) => {
+    pluginStorageReactive.value[name].align = layout
+  }
+
   return {
     PLUGIN_NAME,
     activeSetting,
@@ -191,6 +208,8 @@ export default () => {
     leftFixedPanelsStorage,
     rightFixedPanelsStorage,
     changeLeftFixedPanels,
-    changeRightFixedPanels
+    changeRightFixedPanels,
+    getPluginLayout,
+    changePluginLayout
   }
 }

packages/design-core/config/addons.js

@@ -65,4 +65,16 @@ const addons = {
   settings: [Props, Styles, Events]
 }
 
+const plugin = {}
+addons.plugins.forEach((item) => {
+  plugin[item.id] = item
+})
+addons.settings.forEach((item) => {
+  plugin[item.id] = item
+})
+
+export const getPlugin = (pluginName) => {
+  return plugin[pluginName]
+}
+
 export default addons

packages/design-core/src/App.vue

@@ -5,7 +5,7 @@
       <design-toolbars></design-toolbars>
       <div class="tiny-engine-main">
         <div class="tiny-engine-left-wrap">
-          <design-plugins :render-panel="plugins.render" :addons="addons" @click="toggleNav"></design-plugins>
+          <design-plugins :render-panel="plugins.render" @click="toggleNav"></design-plugins>
         </div>
         <div class="tiny-engine-content-wrap">
           <design-canvas></design-canvas>
@@ -14,7 +14,6 @@
           <design-settings
             :render-panel="settings.render"
             v-show="layoutState.settings.showDesignSettings"
-            :addons="addons"
             ref="right"
           ></design-settings>
         </div>
@@ -78,10 +77,10 @@ export default {
 
     const plugin = {}
     addons.plugins.forEach((item) => {
-      plugin[item.id] = { width: item.options?.width || 300 }
+      plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'leftTop' }
     })
     addons.settings.forEach((item) => {
-      plugin[item.id] = { width: item.options?.width || 320 }
+      plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'leftTop' }
     })
     localStorage.setItem('plugin', JSON.stringify(plugin))
 

packages/design-core/src/DesignPlugins.vue

@@ -110,7 +110,7 @@ import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { useLayout, usePage } from '@opentiny/tiny-engine-controller'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
-
+import { getPlugin } from '../config/addons.js'
 export default {
   components: {
     TinyPopover: Popover,
@@ -120,14 +120,10 @@ export default {
   props: {
     renderPanel: {
       type: String
-    },
-    addons: {
-      type: Array
     }
   },
   emits: ['click', 'node-click'],
   setup(props, { emit }) {
-    const plugins = props.addons && props.addons.plugins
     const components = {}
     const iconComponents = {}
     const pluginRef = ref(null)
@@ -136,9 +132,11 @@ export default {
     const { isTemporaryPage } = usePage()
     const HELP_PLUGIN_ID = 'EditorHelp'
 
-    const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage } = useLayout()
+    const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage, getPluginLayout } =
+      useLayout()
 
-    props.addons.plugins.forEach(({ id, component, api, icon }) => {
+    const plugins = getPluginLayout('all').map((pluginName) => getPlugin(pluginName))
+    plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
       iconComponents[id] = icon
       if (api) {
@@ -152,9 +150,9 @@ export default {
 
     const state = reactive({
       prevIdex: -2,
-      topNavLists: plugins.filter((item) => item.align === 'top'),
-      bottomNavLists: plugins.filter((item) => item.align === 'bottom'),
-      independence: plugins.find((item) => item.align === 'independence')
+      topNavLists: getPluginLayout('leftTop').map((pluginName) => getPlugin(pluginName)),
+      bottomNavLists: getPluginLayout('leftBottom').map((pluginName) => getPlugin(pluginName)),
+      independence: getPluginLayout('independence').map((pluginName) => getPlugin(pluginName))
     })
 
     const doCompleted = () => {

packages/design-core/src/DesignSettings.vue

@@ -49,6 +49,7 @@ import { computed, ref, toRefs, watch, reactive } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { Tabs, TabItem } from '@opentiny/vue'
 import { useLayout } from '@opentiny/tiny-engine-controller'
+import { getPlugin } from '../config/addons.js'
 
 export default {
   components: {
@@ -60,32 +61,37 @@ export default {
   props: {
     renderPanel: {
       type: String
-    },
-    addons: {
-      type: Array
     }
   },
 
   setup(props) {
+    const components = {}
+    const iconComponents = {}
     const { renderPanel } = toRefs(props)
     const {
       rightFixedPanelsStorage,
+      registerPluginApi,
       changeRightFixedPanels,
+      getPluginLayout,
       layoutState: { settings: settingsState }
     } = useLayout()
-    const settings = props.addons && props.addons.settings
-    const components = {}
-    const iconComponents = {}
-    const activating = computed(() => settingsState.activating) //高亮显示
-    const showMask = ref(true)
 
-    props.addons.settings.forEach(({ id, component, icon }) => {
+    const plugins = getPluginLayout('all').map((pluginName) => getPlugin(pluginName))
+    plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
       iconComponents[id] = icon
+      if (api) {
+        registerPluginApi({
+          [id]: api
+        })
+      }
     })
 
+    const activating = computed(() => settingsState.activating) //高亮显示
+    const showMask = ref(true)
+
     const state = reactive({
-      leftList: settings
+      leftList: getPluginLayout('rightTop').map((pluginName) => getPlugin(pluginName))
     })
 
     const setRender = (curId) => {
@@ -117,7 +123,6 @@ export default {
     return {
       state,
       showMask,
-      settings,
       activating,
       settingsState,
       components,

packages/plugins/block/index.js

@@ -17,7 +17,9 @@ export default {
   title: '区块管理',
   icon: 'plugin-icon-symbol',
   align: 'top',
-  option: {},
+  option: {
+    align: 'leftTop'
+  },
   api,
   component
 }

packages/plugins/bridge/index.js

@@ -17,6 +17,8 @@ export default {
   title: '资源管理',
   icon: 'plugin-icon-sresources',
   align: 'top',
-  option: {},
+  option: {
+    align: 'leftTop'
+  },
   component
 }

packages/plugins/data/index.js

@@ -17,6 +17,8 @@ export default {
   title: '状态管理',
   icon: 'plugin-icon-var',
   align: 'top',
-  option: {},
+  option: {
+    align: 'leftTop'
+  },
   component
 }

packages/plugins/datasource/index.js

@@ -18,7 +18,9 @@ export default {
   title: '数据源',
   icon: 'plugin-icon-data',
   align: 'top',
-  option: {},
+  option: {
+    align: 'leftTop'
+  },
   component
 }
 

packages/plugins/help/index.js

@@ -16,6 +16,8 @@ export default {
   id: 'EditorHelp',
   title: '',
   icon: HelpIcon,
-  option: {},
+  options: {
+    align: 'leftBottom'
+  },
   align: 'bottom'
 }

packages/plugins/i18n/index.js

@@ -18,7 +18,8 @@ export default {
   icon: 'plugin-icon-language',
   align: 'top',
   options: {
-    width: 620
+    width: 620,
+    align: 'leftTop'
   },
   component
 }

packages/plugins/materials/index.js

@@ -17,7 +17,9 @@ export default {
   title: '物料',
   icon: 'plugin-icon-materials',
   align: 'top',
-  options: {},
+  options: {
+    align: 'leftTop'
+  },
   component,
   api
 }

packages/plugins/page/index.js

@@ -17,7 +17,9 @@ export default {
   title: '页面管理',
   icon: 'plugin-icon-page',
   align: 'top',
-  option: {},
+  option: {
+    align: 'leftTop'
+  },
   api,
   component
 }

packages/plugins/robot/index.js

@@ -17,6 +17,8 @@ export default {
   title: 'AI对话框',
   icon: 'plugin-icon-robot',
   align: 'independence',
-  option: {},
+  options: {
+    align: 'independence'
+  },
   component
 }

packages/plugins/schema/index.js

@@ -18,6 +18,7 @@ export default {
   icon: 'plugin-icon-page-schema',
   align: 'bottom',
   options: {
+    align: 'leftBottom',
     width: 1000
   },
   component

packages/plugins/script/index.js

@@ -18,7 +18,8 @@ export default {
   icon: 'plugin-icon-js',
   align: 'top',
   options: {
-    width: 1000
+    width: 1000,
+    align: 'leftTop'
   },
   api,
   component,

packages/plugins/tree/index.js

@@ -17,6 +17,8 @@ export default {
   title: '大纲树',
   icon: 'plugin-icon-tree',
   align: 'top',
-  option: {},
+  option: {
+    align: 'leftTop'
+  },
   component
 }

packages/settings/events/index.js

@@ -19,7 +19,8 @@ export default {
   icon: 'target',
   align: 'top',
   options: {
-    width: 320
+    width: 320,
+    align: 'rightTop'
   },
   component
 }

packages/settings/props/index.js

@@ -22,7 +22,8 @@ export default {
   icon: 'form',
   align: 'top',
   options: {
-    width: 320
+    width: 320,
+    align: 'rightTop'
   },
   component
 }

packages/settings/styles/index.js

@@ -19,7 +19,8 @@ export default {
   icon: 'display-inline',
   align: 'top',
   options: {
-    width: 320
+    width: 320,
+    align: 'rightTop'
   },
   component
 }