refactor: The plugin layout state is persisted using vueuse (#766)

* refactor: The plugin layout state is persisted using vueuse * optimize: Deal with comments * optimize: Deal with comments2
opentiny · Aug 31, 2024 · fa2ca2f · fa2ca2f
1 parent 170ccad
commit fa2ca2f
Show file tree

Hide file tree

Showing 21 changed files with 133 additions and 45 deletions.
diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
@@ -37,6 +37,13 @@ const PLUGIN_NAME = {
   Style: 'SettingStyles',
   Props: 'SettingProps'
 }
+const PLUGIN_POSITION = {
+  leftTop: 'leftTop',
+  leftBottom: 'leftBottom',
+  independence: 'independence',
+  rightTop: 'rightTop',
+  rightBottom: 'rightBottom'
+}
 
 const pluginState = reactive({
   pluginEvent: 'all'
@@ -161,18 +168,35 @@ 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 getPluginsByLayout = (layout = 'all') => {
+    // 遍历对象并将 align 值分类到不同的数组中
+    const targetLayout = Object.keys(pluginStorageReactive.value).filter(
+      (key) => pluginStorageReactive.value[key].align === layout || layout === 'all'
+    )
+    return targetLayout //这里返回的是只有名字的数组
+  }
+
+  //修改某个插件的布局
+  const changePluginLayout = (name, layout) => {
+    if (pluginStorageReactive.value[name]) {
+      pluginStorageReactive.value[name].align = layout
     }
   }
 
   return {
     PLUGIN_NAME,
+    PLUGIN_POSITION,
     activeSetting,
     activePlugin,
     closePlugin,
@@ -191,6 +215,8 @@ export default () => {
     leftFixedPanelsStorage,
     rightFixedPanelsStorage,
     changeLeftFixedPanels,
-    changeRightFixedPanels
+    changeRightFixedPanels,
+    getPluginsByLayout,
+    changePluginLayout
   }
 }
diff --git a/packages/design-core/config/addons.js b/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] || null
+}
+
 export default addons
diff --git a/packages/design-core/config/plugin.js 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
+})
+addons.settings.forEach((item) => {
+  plugin[item.id] = item
+})
+
+export const getPlugin = (pluginName) => {
+  return plugin[pluginName] || null
+}
diff --git a/packages/design-core/src/App.vue b/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,14 @@ export default {
 
     const plugin = {}
     addons.plugins.forEach((item) => {
-      plugin[item.id] = { width: item.options?.width || 300 }
+      if (item.id) {
+        plugin[item.id] = { width: item.options?.width || 300, align: item.options?.align || 'rightTop' }
+      }
     })
     addons.settings.forEach((item) => {
-      plugin[item.id] = { width: item.options?.width || 320 }
+      if (item.id) {
+        plugin[item.id] = { width: item.options?.width || 320, align: item.options?.align || 'rightTop' }
+      }
     })
     localStorage.setItem('plugin', JSON.stringify(plugin))
 

diff --git a/packages/design-core/src/DesignPlugins.vue b/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/plugin.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,17 @@ export default {
     const { isTemporaryPage } = usePage()
     const HELP_PLUGIN_ID = 'EditorHelp'
 
-    const { pluginState, registerPluginApi, changeLeftFixedPanels, leftFixedPanelsStorage } = useLayout()
-
-    props.addons.plugins.forEach(({ id, component, api, icon }) => {
+    const {
+      pluginState,
+      registerPluginApi,
+      changeLeftFixedPanels,
+      leftFixedPanelsStorage,
+      getPluginsByLayout,
+      PLUGIN_POSITION
+    } = useLayout()
+
+    const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
+    plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
       iconComponents[id] = icon
       if (api) {
@@ -152,9 +156,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: getPluginsByLayout(PLUGIN_POSITION.leftTop).map((pluginName) => getPlugin(pluginName)),
+      bottomNavLists: getPluginsByLayout(PLUGIN_POSITION.leftBottom).map((pluginName) => getPlugin(pluginName)),
+      independence: getPluginsByLayout(PLUGIN_POSITION.independence).map((pluginName) => getPlugin(pluginName))
     })
 
     const doCompleted = () => {

diff --git a/packages/design-core/src/DesignSettings.vue b/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/plugin.js'
 
 export default {
   components: {
@@ -60,32 +61,38 @@ export default {
   props: {
     renderPanel: {
       type: String
-    },
-    addons: {
-      type: Array
     }
   },
 
   setup(props) {
+    const components = {}
+    const iconComponents = {}
     const { renderPanel } = toRefs(props)
     const {
+      PLUGIN_POSITION,
       rightFixedPanelsStorage,
+      registerPluginApi,
       changeRightFixedPanels,
+      getPluginsByLayout,
       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 = getPluginsByLayout().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: getPluginsByLayout(PLUGIN_POSITION.rightTop).map((pluginName) => getPlugin(pluginName))
     })
 
     const setRender = (curId) => {
@@ -117,7 +124,6 @@ export default {
     return {
       state,
       showMask,
-      settings,
       activating,
       settingsState,
       components,

diff --git a/packages/plugins/block/index.js b/packages/plugins/block/index.js
@@ -17,7 +17,9 @@ export default {
   title: '区块管理',
   icon: 'plugin-icon-symbol',
   align: 'top',
-  option: {},
+  options: {
+    align: 'leftTop'
+  },
   api,
   component
 }
diff --git a/packages/plugins/bridge/index.js b/packages/plugins/bridge/index.js
@@ -17,6 +17,8 @@ export default {
   title: '资源管理',
   icon: 'plugin-icon-sresources',
   align: 'top',
-  option: {},
+  options: {
+    align: 'leftTop'
+  },
   component
 }
diff --git a/packages/plugins/data/index.js b/packages/plugins/data/index.js
@@ -17,6 +17,8 @@ export default {
   title: '状态管理',
   icon: 'plugin-icon-var',
   align: 'top',
-  option: {},
+  options: {
+    align: 'leftTop'
+  },
   component
 }
diff --git a/packages/plugins/datasource/index.js b/packages/plugins/datasource/index.js
@@ -18,7 +18,9 @@ export default {
   title: '数据源',
   icon: 'plugin-icon-data',
   align: 'top',
-  option: {},
+  options: {
+    align: 'leftTop'
+  },
   component
 }
 

diff --git a/packages/plugins/help/index.js b/packages/plugins/help/index.js
@@ -16,6 +16,8 @@ export default {
   id: 'EditorHelp',
   title: '',
   icon: HelpIcon,
-  option: {},
+  options: {
+    align: 'leftBottom'
+  },
   align: 'bottom'
 }
diff --git a/packages/plugins/i18n/index.js b/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
 }
diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js
@@ -17,7 +17,9 @@ export default {
   title: '物料',
   icon: 'plugin-icon-materials',
   align: 'top',
-  options: {},
+  options: {
+    align: 'leftTop'
+  },
   component,
   api
 }

diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js
@@ -17,7 +17,9 @@ export default {
   title: '页面管理',
   icon: 'plugin-icon-page',
   align: 'top',
-  option: {},
+  options: {
+    align: 'leftTop'
+  },
   api,
   component
 }
diff --git a/packages/plugins/robot/index.js b/packages/plugins/robot/index.js
@@ -17,6 +17,8 @@ export default {
   title: 'AI对话框',
   icon: 'plugin-icon-robot',
   align: 'independence',
-  option: {},
+  options: {
+    align: 'independence'
+  },
   component
 }
diff --git a/packages/plugins/schema/index.js b/packages/plugins/schema/index.js
@@ -18,6 +18,7 @@ export default {
   icon: 'plugin-icon-page-schema',
   align: 'bottom',
   options: {
+    align: 'leftBottom',
     width: 1000
   },
   component

diff --git a/packages/plugins/script/index.js b/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,

diff --git a/packages/plugins/tree/index.js b/packages/plugins/tree/index.js
@@ -17,6 +17,8 @@ export default {
   title: '大纲树',
   icon: 'plugin-icon-tree',
   align: 'top',
-  option: {},
+  options: {
+    align: 'leftTop'
+  },
   component
 }
diff --git a/packages/settings/events/index.js b/packages/settings/events/index.js
@@ -19,7 +19,8 @@ export default {
   icon: 'target',
   align: 'top',
   options: {
-    width: 320
+    width: 320,
+    align: 'rightTop'
   },
   component
 }
diff --git a/packages/settings/props/index.js b/packages/settings/props/index.js
@@ -22,7 +22,8 @@ export default {
   icon: 'form',
   align: 'top',
   options: {
-    width: 320
+    width: 320,
+    align: 'rightTop'
   },
   component
 }