feat: Right Sidebar Menu and Layout Settings (#804)

* feat: Right Sidebar Menu and Layout Settings

* optimize: Deal with comments

* optimize: Encapsulate RightMenu Component And Refactor Rendering Method

packages/controller/src/useLayout.js

@@ -62,13 +62,15 @@ const layoutState = reactive({
     height: '100%'
   },
   plugins: {
+    isShow: true,
     fixedPanels: [PLUGIN_NAME.Materials],
     render: null,
     api: {}, // 插件需要注册交互API到这里
     activating: false, // 右侧面版激活提示状态
     showDesignSettings: true
   },
   settings: {
+    isShow: true,
     fixedPanels: [],
     render: null,
     api: null,
@@ -80,6 +82,20 @@ const layoutState = reactive({
   },
   pageStatus: ''
 })
+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)
 
@@ -258,6 +274,13 @@ export default () => {
     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,
@@ -278,12 +301,17 @@ export default () => {
     changePluginWidth,
     leftFixedPanelsStorage,
     rightFixedPanelsStorage,
+    leftMenuShownStorage,
+    rightMenuShownStorage,
     changeLeftFixedPanels,
     changeRightFixedPanels,
     getPluginsByLayout,
     changePluginLayout,
     getPluginByLayout,
     dragPluginLayout,
-    isSameSide
+    isSameSide,
+    getPluginShown,
+    changePluginShown,
+    changeMenuShown
   }
 }

packages/design-core/config/plugin.js

@@ -8,3 +8,6 @@ addons.plugins.forEach((item) => {
 export const getPlugin = (pluginName) => {
   return plugin[pluginName] || null
 }
+export const getPluginById = (pluginId) => {
+  return Object.values(plugin).find((item) => item.id === pluginId) || null
+}

packages/design-core/src/App.vue

@@ -5,16 +5,24 @@
       <design-toolbars></design-toolbars>
       <div class="tiny-engine-main">
         <div class="tiny-engine-left-wrap">
-          <design-plugins :render-panel="plugins.render" @click="toggleNav"></design-plugins>
+          <design-plugins
+            ref="left"
+            v-if="leftMenuShownStorage"
+            :render-panel="plugins.render"
+            @changeLeftAlign="changeLeftAlign"
+            @click="toggleNav"
+          ></design-plugins>
         </div>
         <div class="tiny-engine-content-wrap">
           <design-canvas></design-canvas>
         </div>
         <div class="tiny-engine-right-wrap">
           <design-settings
+            ref="right"
+            v-if="rightMenuShownStorage"
             :render-panel="settings.render"
             v-show="layoutState.settings.showDesignSettings"
-            ref="right"
+            @changeRightAlign="changeRightAlign"
           ></design-settings>
         </div>
       </div>
@@ -99,16 +107,25 @@ export default {
         plugin[item.id] = {
           width: item.options?.width || 300,
           align: align,
-          index: index
+          index: index,
+          isShow: true
         }
       }
     })
     localStorage.setItem('plugin', JSON.stringify(plugin))
 
-    const { layoutState } = useLayout()
+    const { layoutState, leftMenuShownStorage, rightMenuShownStorage } = useLayout()
     const { plugins, settings } = layoutState
+    const left = ref(null)
     const right = ref(null)
 
+    const changeLeftAlign = (pluginId) => {
+      right.value.changeAlign(pluginId)
+    }
+    const changeRightAlign = (pluginId) => {
+      left.value.changeAlign(pluginId)
+    }
+
     // 此处接收画布内部的错误和警告提示
     const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
 
@@ -170,16 +187,20 @@ export default {
     onUnmounted(() => {
       window.removeEventListener('popstate', handlePopStateEvent)
     })
-
     return {
       state,
+      left,
       right,
       plugins,
       settings,
       toggleNav,
       addons,
       layoutState,
-      designSmbConfig
+      designSmbConfig,
+      changeLeftAlign,
+      changeRightAlign,
+      leftMenuShownStorage,
+      rightMenuShownStorage
     }
   }
 }

packages/design-core/src/DesignPlugins.vue

@@ -22,8 +22,9 @@
           }"
           :title="item.title"
           @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'"
@@ -38,7 +39,7 @@
 
       <!-- 图标菜单下侧区域（附加icon） -->
       <div class="nav-panel-lists bottom">
-        <div style="flex: 1" class="list-item"></div>
+        <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)"></div>
         <vue-draggable-next id="leftBottom" v-model="state.bottomNavLists" group="plugins" @end="onEnd">
           <div
             v-for="(item, index) in state.bottomNavLists"
@@ -49,8 +50,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'"
@@ -131,29 +133,38 @@
       </keep-alive>
     </div>
   </Teleport>
+
+  <right-menu
+    ref="rightMenu"
+    :list="[...state.topNavLists, ...state.bottomNavLists]"
+    :align="left"
+    @switchAlign="switchAlign"
+  ></right-menu>
 </template>
 
 <script>
 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'
+import { getPlugin, getPluginById } from '../config/plugin.js'
 import { VueDraggableNext } from 'vue-draggable-next'
+import RightMenu from './RightMenu.vue'
 
 export default {
   components: {
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
     PublicIcon,
-    VueDraggableNext
+    VueDraggableNext,
+    RightMenu
   },
   props: {
     renderPanel: {
       type: String
     }
   },
-  emits: ['click', 'node-click'],
+  emits: ['click', 'node-click', 'changeLeftAlign'],
   setup(props, { emit }) {
     const components = {}
     const iconComponents = {}
@@ -171,9 +182,20 @@ export default {
       getPluginsByLayout,
       PLUGIN_POSITION,
       dragPluginLayout,
-      isSameSide
+      isSameSide,
+      getPluginShown,
+      closePlugin
     } = 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 plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
     plugins.forEach(({ id, component, api, icon }) => {
       components[id] = component
@@ -185,8 +207,6 @@ export default {
       }
     })
 
-    const completed = ref(false)
-
     const state = reactive({
       prevIdex: -2,
       topNavLists: getPluginsByLayout(PLUGIN_POSITION.leftTop).map((pluginName) => getPlugin(pluginName)),
@@ -195,10 +215,28 @@ export default {
       fixedNavLists: getPluginsByLayout(PLUGIN_POSITION.fixed).map((pluginName) => getPlugin(pluginName))
     })
 
+    const close = () => {
+      state.prevIdex = -2
+      closePlugin(true)
+    }
+
+    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 completed = ref(false)
+
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(pluginId)
+      state.topNavLists.unshift(item)
+    }
+
     const doCompleted = () => {
       if (!completed.value) {
         completed.value = true
-        useLayout().closePlugin()
+        closePlugin()
       }
     }
 
@@ -240,11 +278,6 @@ export default {
       robotVisible.value = !robotVisible.value
     }
 
-    const close = () => {
-      state.prevIdex = -2
-      useLayout().closePlugin(true)
-    }
-
     //切换面板状态
     const fixPanel = (pluginName) => {
       changeLeftFixedPanels(pluginName)
@@ -271,7 +304,13 @@ export default {
       doCompleted,
       pluginState,
       leftFixedPanelsStorage,
-      onEnd
+      onEnd,
+      showContextMenu,
+      changeAlign,
+      PLUGIN_POSITION,
+      getPluginShown,
+      switchAlign,
+      rightMenu
     }
   }
 }