From ba679fc3ab7399f147674d551e922a35593d8945 Mon Sep 17 00:00:00 2001
From: STATICHIT <108850075+STATICHIT@users.noreply.github.com>
Date: Thu, 26 Sep 2024 19:50:42 +0800
Subject: [PATCH] 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        |  30 +++-
 packages/design-core/config/plugin.js       |   3 +
 packages/design-core/src/App.vue            |  33 +++-
 packages/design-core/src/DesignPlugins.vue  |  71 +++++++--
 packages/design-core/src/DesignSettings.vue |  69 ++++++--
 packages/design-core/src/RightMenu.vue      | 167 ++++++++++++++++++++
 packages/plugins/help/src/HelpIcon.vue      |   3 +
 packages/toolbars/logo/src/Main.vue         | 127 ++++++++++-----
 8 files changed, 422 insertions(+), 81 deletions(-)
 create mode 100644 packages/design-core/src/RightMenu.vue

diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
index 841794b14..8c87566e8 100644
--- a/packages/controller/src/useLayout.js
+++ b/packages/controller/src/useLayout.js
@@ -62,6 +62,7 @@ const layoutState = reactive({
     height: '100%'
   },
   plugins: {
+    isShow: true,
     fixedPanels: [PLUGIN_NAME.Materials],
     render: null,
     api: {}, // 插件需要注册交互API到这里
@@ -69,6 +70,7 @@ const layoutState = reactive({
     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
   }
 }
diff --git a/packages/design-core/config/plugin.js b/packages/design-core/config/plugin.js
index f1dfcc8a9..17a3a1c1b 100644
--- a/packages/design-core/config/plugin.js
+++ b/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
+}
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index 1e29ecaff..219d2b265 100644
--- a/packages/design-core/src/App.vue
+++ b/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
     }
   }
 }
diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index 6787b6bcd..b209b65f2 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/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,6 +133,13 @@
       </keep-alive>
     </div>
   </Teleport>
+
+  <right-menu
+    ref="rightMenu"
+    :list="[...state.topNavLists, ...state.bottomNavLists]"
+    :align="left"
+    @switchAlign="switchAlign"
+  ></right-menu>
 </template>
 
 <script>
@@ -138,22 +147,24 @@ 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
     }
   }
 }
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index 00d65e138..952a556cc 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -22,19 +22,28 @@
   <div id="tiny-engine-nav-panel">
     <vue-draggable-next id="rightTop" v-model="state.leftList" class="nav-panel-lists" group="plugins" @end="onEnd">
       <div
-        v-for="item in state.leftList"
-        :key="item.id"
+        v-for="(item, index) in state.leftList"
+        :key="index"
         :class="['list-item', { 'first-item': item === state.leftList[0], active: item.id === renderPanel }]"
         :title="item.title"
-        @click="clickMenu({ item, index: state.leftList.indexOf(item) })"
+        @click="clickMenu({ item, index })"
+        @contextmenu.prevent="showContextMenu($event, true, item, index, PLUGIN_POSITION.rightTop)"
       >
-        <span class="item-icon">
+        <span class="item-icon" v-if="getPluginShown(item.id)">
           <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>
+      <div style="flex: 1" class="list-item" @contextmenu.prevent="showContextMenu($event, false)"></div>
     </vue-draggable-next>
   </div>
+
+  <right-menu
+    ref="rightMenu"
+    :list="state.leftList"
+    :align="PLUGIN_POSITION.rightTop"
+    @switchAlign="switchAlign"
+  ></right-menu>
 </template>
 
 <script>
@@ -42,8 +51,9 @@ 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'
+import { getPlugin, getPluginById } from '../config/plugin.js'
 import { VueDraggableNext } from 'vue-draggable-next'
+import RightMenu from './RightMenu.vue'
 
 export default {
   components: {
@@ -51,15 +61,16 @@ export default {
     TinyTabItem: TabItem,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
-    VueDraggableNext
+    VueDraggableNext,
+    RightMenu
   },
   props: {
     renderPanel: {
       type: String
     }
   },
-
-  setup(props) {
+  emits: ['changeRightAlign'],
+  setup(props, { emit }) {
     const components = {}
     const iconComponents = {}
     const { renderPanel } = toRefs(props)
@@ -71,9 +82,19 @@ export default {
       getPluginsByLayout,
       dragPluginLayout,
       isSameSide,
+      getPluginShown,
       layoutState: { settings: settingsState }
     } = 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
@@ -85,13 +106,27 @@ export default {
       }
     })
 
-    const activating = computed(() => settingsState.activating) //高亮显示
-    const showMask = ref(true)
-
     const state = reactive({
       leftList: getPluginsByLayout(PLUGIN_POSITION.rightTop).map((pluginName) => getPlugin(pluginName))
     })
 
+    const close = () => {
+      useLayout().closeSetting(true)
+    }
+
+    const switchAlign = (index, id, list, align) => {
+      state.leftList.splice(index, 1)
+      emit('changeRightAlign', id)
+      dragPluginLayout(list, align, index, 0)
+    }
+    const activating = computed(() => settingsState.activating) //高亮显示
+    const showMask = ref(true)
+
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(pluginId)
+      state.leftList.unshift(item)
+    }
+
     const setRender = (curId) => {
       settingsState.render = curId
     }
@@ -105,10 +140,6 @@ export default {
       setRender(item.id)
     }
 
-    const close = () => {
-      useLayout().closeSetting(true)
-    }
-
     watch(renderPanel, (n) => {
       setRender(n)
     })
@@ -135,7 +166,13 @@ export default {
       close,
       fixPanel,
       rightFixedPanelsStorage,
-      onEnd
+      onEnd,
+      showContextMenu,
+      changeAlign,
+      PLUGIN_POSITION,
+      getPluginShown,
+      switchAlign,
+      rightMenu
     }
   }
 }
diff --git a/packages/design-core/src/RightMenu.vue b/packages/design-core/src/RightMenu.vue
new file mode 100644
index 000000000..8de60f46f
--- /dev/null
+++ b/packages/design-core/src/RightMenu.vue
@@ -0,0 +1,167 @@
+<template>
+  <ul
+    v-if="contextMenu.visible"
+    class="context-menu"
+    :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+  >
+    <li v-if="contextMenu.type" @click="hidePlugin">隐藏 "{{ contextMenu.item.title }}"</li>
+    <li v-if="contextMenu.type" class="bottom-li" @click="switchAlign">
+      切换到{{ align.includes('right') ? '左侧' : '右侧' }}
+    </li>
+    <li
+      v-for="(item, index) in list"
+      :key="index"
+      @click.stop="changeShowState(item.id)"
+      class="menu-item-wrapper"
+      :class="{
+        'bottom-li': index === list.length - 1
+      }"
+    >
+      <span class="check-mark">
+        <span v-show="getPluginShown(item.id)">√</span>
+      </span>
+      <span>{{ item.title }}</span>
+    </li>
+    <li @click="hideSidebar">隐藏活动栏</li>
+  </ul>
+</template>
+
+<script>
+import { reactive, onMounted, onBeforeUnmount } from 'vue'
+import { useLayout } from '@opentiny/tiny-engine-controller'
+export default {
+  props: {
+    list: {
+      type: Array
+    },
+    align: {
+      type: String,
+      default: 'left'
+    }
+  },
+  emits: ['close', 'switchAlign'],
+  setup(props, { emit }) {
+    const { PLUGIN_POSITION, getPluginShown, changePluginShown, changeMenuShown } = useLayout()
+    const contextMenu = reactive({
+      type: true,
+      visible: false,
+      x: 0,
+      y: 0,
+      item: null,
+      index: null,
+      list: null
+    })
+
+    // 显示菜单
+    const contextMenuWidth = props.align.includes('right') ? 130 : 0
+    const showContextMenu = (x, y, type, item, index, align) => {
+      contextMenu.type = type
+      contextMenu.visible = true
+      contextMenu.x = x - contextMenuWidth
+      contextMenu.y = y
+      if (type) {
+        contextMenu.item = item
+        contextMenu.index = index
+        contextMenu.list = align
+      }
+    }
+
+    // 隐藏菜单
+    const hideContextMenu = () => {
+      contextMenu.visible = false
+    }
+
+    // 隐藏插件
+    const hidePlugin = () => {
+      emit('close')
+      changePluginShown(contextMenu.item.id)
+      hideContextMenu()
+    }
+
+    // 切换组件位置
+    const switchAlign = () => {
+      emit('close')
+      emit('switchAlign', contextMenu.index, contextMenu.item.id, contextMenu.list, PLUGIN_POSITION.leftTop)
+      hideContextMenu()
+    }
+
+    // 隐藏活动栏
+    const hideSidebar = () => {
+      const align = props.align.includes('right') ? 'right' : 'left'
+      changeMenuShown(align)
+      hideContextMenu()
+    }
+
+    // 改变组件显示状态
+    const changeShowState = (pluginName) => {
+      changePluginShown(pluginName)
+    }
+
+    const handleClickOutside = (event) => {
+      if (!event.target.closest('.context-menu')) {
+        hideContextMenu()
+      }
+    }
+
+    onMounted(() => {
+      document.addEventListener('click', handleClickOutside)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', handleClickOutside)
+    })
+
+    return {
+      contextMenu,
+      showContextMenu,
+      changeShowState,
+      getPluginShown,
+      hidePlugin,
+      switchAlign,
+      hideSidebar
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 引入B的CSS样式 */
+.context-menu {
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  list-style: none;
+  width: 135px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+.context-menu-header {
+  padding: 8px 12px;
+  font-weight: bold;
+  cursor: default;
+  background: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+}
+.bottom-li {
+  border-bottom: 1px solid #ccc;
+}
+
+.context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.context-menu li:hover {
+  background: #f0f0f0;
+}
+.menu-item-wrapper {
+  display: flex;
+  flex-grow: 1;
+}
+
+.check-mark {
+  width: 20px;
+  text-align: left;
+}
+</style>
diff --git a/packages/plugins/help/src/HelpIcon.vue b/packages/plugins/help/src/HelpIcon.vue
index 64da288a7..56a2ec801 100644
--- a/packages/plugins/help/src/HelpIcon.vue
+++ b/packages/plugins/help/src/HelpIcon.vue
@@ -243,6 +243,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+#help-plugin {
+  z-index: 1000;
+}
 .help-plugin-tooltip-close {
   margin-left: 20px;
   cursor: pointer;
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index 72f4b15c2..16963c6ab 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -8,8 +8,25 @@
     </h1>
     <div v-if="state.showMenu" class="main-menu">
       <ul>
-        <li v-for="(item, index) in menus" :key="index" @click="handleClick(item)">
+        <li v-if="!(getGlobalConfig()?.dslMode === 'Angular')" @click="handleClick({ code: 'publishApp' })">
+          <span class="menu-item">发布应用</span>
+        </li>
+        <li @mouseenter="state.showSubMenu = true" @mouseleave="state.showSubMenu = false" @click.stop>
+          <span class="menu-item">布局设置</span>
+          <icon-right></icon-right>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="state.showMenu && state.showSubMenu"
+      class="sub-menu"
+      @mouseenter="state.showSubMenu = true"
+      @mouseleave="state.showSubMenu = false"
+    >
+      <ul>
+        <li v-for="(item, index) in subMenus" :key="index" @click.stop="changeShowState(item)">
           <span class="menu-item">{{ item.name }}</span>
+          <span v-show="item.isShow">√</span>
         </li>
       </ul>
     </div>
@@ -99,7 +116,7 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, nextTick, onUnmounted } from 'vue'
+import { computed, reactive, ref, nextTick, onUnmounted, watch } from 'vue'
 import {
   DialogBox as TinyDialogBox,
   Input as TinyInput,
@@ -110,20 +127,22 @@ import {
   Switch as TinySwitch,
   Tooltip as TinyTooltip
 } from '@opentiny/vue'
-import { iconHelpCircle } from '@opentiny/vue-icon'
+import { iconHelpCircle, iconChevronRight } from '@opentiny/vue-icon'
 import { useLayout, useApp, getGlobalConfig, useModal } from '@opentiny/tiny-engine-controller'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { isDevelopEnv } from '@opentiny/tiny-engine-controller/js/environments'
 
 const http = useHttp()
 
-const { activePlugin } = useLayout()
+const { activePlugin, changeMenuShown, leftMenuShownStorage, rightMenuShownStorage } = useLayout()
 
 const IconHelp = iconHelpCircle()
+const IconRight = iconChevronRight()
 
 const state = reactive({
   hoverState: false,
   showMenu: false,
+  showSubMenu: false,
   show: false,
   showPreview: false,
   formData: {
@@ -144,10 +163,24 @@ const state = reactive({
 const tipBoxVisibility = ref(false)
 let tipText = ref('发布成功')
 const form = ref(null)
-const menus = ref(
-  getGlobalConfig()?.dslMode === 'Angular' ? [] : [{ name: '应用发布', code: 'publishApp', icon: 'news' }]
-)
+const subMenus = ref([
+  { name: '左侧活动栏', code: 'left', isShow: true },
+  { name: '右侧活动栏', code: 'right', isShow: true }
+])
+
+watch(leftMenuShownStorage, (newValue) => {
+  const leftMenu = subMenus.value.find((menu) => menu.code === 'left')
+  if (leftMenu) {
+    leftMenu.isShow = newValue
+  }
+})
 
+watch(rightMenuShownStorage, (newValue) => {
+  const rightMenu = subMenus.value.find((menu) => menu.code === 'right')
+  if (rightMenu) {
+    rightMenu.isShow = newValue
+  }
+})
 const repalceTrim = (e) => {
   const val = e.target.value.replaceAll(/^\s*/g, '')
   state.formData.commitMsg = val
@@ -155,7 +188,10 @@ const repalceTrim = (e) => {
 const getTargetUrl = (centerName) => {
   return `/#/${centerName}/`
 }
-
+const changeShowState = (item) => {
+  item.isShow = !item.isShow
+  changeMenuShown(item.code)
+}
 const actions = {
   pageManagement() {
     activePlugin('AppManage')
@@ -290,6 +326,7 @@ const saveRule = {
 
 const handleCloseMenu = () => {
   state.showMenu = false
+  state.showSubMenu = false
   window.removeEventListener('click', handleCloseMenu)
 }
 
@@ -356,43 +393,49 @@ onUnmounted(() => {
     top: var(--base-top-panel-height);
     left: 10px;
     color: var(--ti-lowcode-toolbar-icon-color);
-    ul {
-      min-width: 130px;
-      border: 1px solid transparent;
-      border-radius: 6px;
-      background-color: var(--ti-lowcode-main-menu-bg);
-      box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
-      padding: 8px 0;
+  }
+  .sub-menu {
+    position: absolute;
+    top: var(--base-top-panel-height);
+    left: 125px;
+    color: var(--ti-lowcode-toolbar-icon-color);
+  }
+  ul {
+    min-width: 120px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background-color: var(--ti-lowcode-main-menu-bg);
+    box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
+    padding: 8px 0;
+    display: flex;
+    flex-direction: column;
+    li {
+      font-size: 14px;
+      color: var(--ti-lowcode-toolbar-title-color);
+      cursor: pointer;
+      height: 32px;
+      width: 100%;
       display: flex;
-      flex-direction: column;
-      li {
-        font-size: 14px;
-        color: var(--ti-lowcode-toolbar-title-color);
-        cursor: pointer;
-        height: 32px;
-        width: 100%;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        .tiny-svg {
-          margin: 0 9px;
-          font-size: 16px;
-        }
-        &:hover {
-          background: var(--ti-lowcode-toolbar-hover-color);
-        }
+      justify-content: flex-start;
+      align-items: center;
+      .tiny-svg {
+        margin: 0 9px;
+        font-size: 16px;
+      }
+      &:hover {
+        background: var(--ti-lowcode-toolbar-hover-color);
+      }
 
-        &:first-child {
-          border-radius: 2px 2px 0 0;
-        }
+      &:first-child {
+        border-radius: 2px 2px 0 0;
+      }
 
-        &:last-child {
-          border-radius: 0 0 2px 2px;
-        }
-        .menu-item {
-          margin: 0 16px;
-          line-height: 20px;
-        }
+      &:last-child {
+        border-radius: 0 0 2px 2px;
+      }
+      .menu-item {
+        margin: 0 12px;
+        line-height: 20px;
       }
     }
   }