From 1ad2ec6bbd033c2c5188de0de933a6eb9c831efe Mon Sep 17 00:00:00 2001
From: STATICHIT <2394412110@qq.com>
Date: Fri, 20 Sep 2024 00:42:20 +0800
Subject: [PATCH 1/3] feat: Right Sidebar Menu and Layout Settings

---
 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  | 191 +++++++++++++++++--
 packages/design-core/src/DesignSettings.vue | 193 ++++++++++++++++++--
 packages/plugins/help/src/HelpIcon.vue      |   3 +
 packages/toolbars/logo/src/Main.vue         | 132 ++++++++-----
 7 files changed, 505 insertions(+), 80 deletions(-)

diff --git a/packages/controller/src/useLayout.js b/packages/controller/src/useLayout.js
index 841794b14b..8c87566e8d 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 f1dfcc8a94..17a3a1c1b5 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 1e29ecaffa..219d2b2650 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 6787b6bcdd..c4c7192843 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,14 +133,41 @@
       </keep-alive>
     </div>
   </Teleport>
+
+  <ul
+    v-if="contextMenu.visible"
+    class="context-menu"
+    :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
+  >
+    <template v-if="contextMenu.type">
+      <li class="context-menu-header">{{ contextMenu.item.title }}</li>
+      <li v-for="action in actions" :key="action.method" @click="handleContextAction(action.method)">
+        {{ action.label }}
+      </li>
+    </template>
+
+    <template v-else>
+      <li
+        v-for="(item, index) in [...state.topNavLists, ...state.bottomNavLists]"
+        :key="index"
+        @click.stop="changeShowState(item.id)"
+        class="menu-item-wrapper"
+      >
+        <span class="check-mark">
+          <span v-show="getPluginShown(item.id)">√</span>
+        </span>
+        <span>{{ item.title }}</span>
+      </li>
+    </template>
+  </ul>
 </template>
 
 <script>
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, onMounted, onBeforeUnmount } 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'
 
 export default {
@@ -153,7 +182,7 @@ export default {
       type: String
     }
   },
-  emits: ['click', 'node-click'],
+  emits: ['click', 'node-click', 'changeLeftAlign'],
   setup(props, { emit }) {
     const components = {}
     const iconComponents = {}
@@ -171,7 +200,10 @@ export default {
       getPluginsByLayout,
       PLUGIN_POSITION,
       dragPluginLayout,
-      isSameSide
+      isSameSide,
+      getPluginShown,
+      changePluginShown,
+      changeMenuShown
     } = useLayout()
 
     const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
@@ -185,8 +217,6 @@ export default {
       }
     })
 
-    const completed = ref(false)
-
     const state = reactive({
       prevIdex: -2,
       topNavLists: getPluginsByLayout(PLUGIN_POSITION.leftTop).map((pluginName) => getPlugin(pluginName)),
@@ -195,6 +225,94 @@ export default {
       fixedNavLists: getPluginsByLayout(PLUGIN_POSITION.fixed).map((pluginName) => getPlugin(pluginName))
     })
 
+    const close = () => {
+      state.prevIdex = -2
+      useLayout().closePlugin(true)
+    }
+
+    const actions = [
+      { label: '隐藏插件', method: 'hidePlugin' },
+      { label: '切换到右侧', method: 'switchToRight' },
+      { label: '隐藏左侧活动栏', method: 'hideLeftSidebar' }
+    ]
+
+    const contextMenu = reactive({
+      type: true,
+      visible: false,
+      x: 0,
+      y: 0,
+      item: null,
+      index: null,
+      list: null
+    })
+
+    const showContextMenu = (event, type, item, index, align) => {
+      contextMenu.type = type
+      contextMenu.visible = true
+      contextMenu.x = event.clientX
+      contextMenu.y = event.clientY
+      if (type) {
+        contextMenu.item = item
+        contextMenu.index = index
+        contextMenu.list = align
+      }
+    }
+
+    const hideContextMenu = () => {
+      contextMenu.visible = false
+    }
+
+    const handleContextAction = (action) => {
+      switch (action) {
+        case 'hidePlugin': {
+          close()
+          changePluginShown(contextMenu.item.id)
+          break
+        }
+        case 'switchToRight': {
+          close()
+          contextMenu.list === PLUGIN_POSITION.leftTop
+            ? state.topNavLists.splice(contextMenu.index, 1)
+            : state.bottomNavLists.splice(contextMenu.index, 1)
+          emit('changeLeftAlign', contextMenu.item.id)
+          dragPluginLayout(contextMenu.list, PLUGIN_POSITION.rightTop, contextMenu.index, 0)
+          break
+        }
+        case 'hideLeftSidebar': {
+          changeMenuShown('left')
+          break
+        }
+        default: {
+          break
+        }
+      }
+      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)
+    })
+
+    const completed = ref(false)
+
+    const changeAlign = (pluginId) => {
+      const item = getPluginById(pluginId)
+      state.topNavLists.unshift(item)
+    }
+
     const doCompleted = () => {
       if (!completed.value) {
         completed.value = true
@@ -240,11 +358,6 @@ export default {
       robotVisible.value = !robotVisible.value
     }
 
-    const close = () => {
-      state.prevIdex = -2
-      useLayout().closePlugin(true)
-    }
-
     //切换面板状态
     const fixPanel = (pluginName) => {
       changeLeftFixedPanels(pluginName)
@@ -271,7 +384,16 @@ export default {
       doCompleted,
       pluginState,
       leftFixedPanelsStorage,
-      onEnd
+      onEnd,
+      contextMenu,
+      showContextMenu,
+      hideContextMenu,
+      handleContextAction,
+      changeAlign,
+      PLUGIN_POSITION,
+      getPluginShown,
+      changeShowState,
+      actions
     }
   }
 }
@@ -414,4 +536,43 @@ export default {
 :deep(.svg-icon.icon-plugin-icon-plugin-help) {
   font-size: 22px;
 }
+
+.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;
+}
+
+.context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.context-menu li:hover {
+  background: #f0f0f0;
+}
+.menu-item-wrapper {
+  display: flex;
+  flex-grow: 1;
+  border-bottom: 1px solid rgb(231, 231, 231);
+  padding: 10px 0;
+}
+.menu-item-wrapper:last-child {
+  border-bottom: none;
+}
+.check-mark {
+  width: 20px;
+  text-align: left;
+}
 </style>
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index 00d65e1389..71c89ec81f 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -22,27 +22,57 @@
   <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>
+
+  <!-- 右键菜单 -->
+  <ul
+    v-if="contextMenu.visible"
+    class="context-menu"
+    :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
+  >
+    <template v-if="contextMenu.type">
+      <li class="context-menu-header">{{ contextMenu.item.title }}</li>
+      <li v-for="action in actions" :key="action.method" @click="handleContextAction(action.method)">
+        {{ action.label }}
+      </li>
+    </template>
+
+    <template v-else>
+      <li
+        v-for="(item, index) in state.leftList"
+        :key="index"
+        @click.stop="changeShowState(item.id)"
+        class="menu-item-wrapper"
+      >
+        <span class="check-mark">
+          <span v-show="getPluginShown(item.id)">√</span>
+        </span>
+        <span>{{ item.title }}</span>
+      </li>
+    </template>
+  </ul>
 </template>
 
 <script>
-import { computed, ref, toRefs, watch, reactive } from 'vue'
+import { computed, ref, toRefs, watch, reactive, onMounted, onBeforeUnmount } 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'
 
 export default {
@@ -58,8 +88,8 @@ export default {
       type: String
     }
   },
-
-  setup(props) {
+  emits: ['changeRightAlign'],
+  setup(props, { emit }) {
     const components = {}
     const iconComponents = {}
     const { renderPanel } = toRefs(props)
@@ -71,8 +101,12 @@ export default {
       getPluginsByLayout,
       dragPluginLayout,
       isSameSide,
+      getPluginShown,
+      changePluginShown,
+      changeMenuShown,
       layoutState: { settings: settingsState }
     } = useLayout()
+    const contextMenuWidth = 130
 
     const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
     plugins.forEach(({ id, component, api, icon }) => {
@@ -85,13 +119,96 @@ 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 actions = [
+      { label: '隐藏插件', method: 'hidePlugin' },
+      { label: '切换到左侧', method: 'switchToLeft' },
+      { label: '隐藏右侧活动栏', method: 'hideRightSidebar' }
+    ]
+
+    const contextMenu = reactive({
+      type: true,
+      visible: false,
+      x: 0,
+      y: 0,
+      item: null,
+      index: null,
+      list: null
+    })
+
+    const showContextMenu = (event, type, item, index, align) => {
+      contextMenu.type = type
+      contextMenu.visible = true
+      contextMenu.x = event.clientX - contextMenuWidth
+      contextMenu.y = event.clientY
+      if (type) {
+        contextMenu.item = item
+        contextMenu.index = index
+        contextMenu.list = align
+      }
+    }
+
+    const hideContextMenu = () => {
+      contextMenu.visible = false
+    }
+
+    const handleContextAction = (action) => {
+      switch (action) {
+        case 'hidePlugin': {
+          close()
+          changePluginShown(contextMenu.item.id)
+          break
+        }
+        case 'switchToLeft': {
+          close()
+          state.leftList.splice(contextMenu.index, 1)
+          emit('changeRightAlign', contextMenu.item.id)
+          dragPluginLayout(contextMenu.list, PLUGIN_POSITION.leftTop, contextMenu.index, 0)
+          break
+        }
+        case 'hideRightSidebar': {
+          changeMenuShown('right')
+          break
+        }
+        default: {
+          break
+        }
+      }
+      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)
+    })
+
+    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 +222,6 @@ export default {
       setRender(item.id)
     }
 
-    const close = () => {
-      useLayout().closeSetting(true)
-    }
-
     watch(renderPanel, (n) => {
       setRender(n)
     })
@@ -135,7 +248,16 @@ export default {
       close,
       fixPanel,
       rightFixedPanelsStorage,
-      onEnd
+      onEnd,
+      contextMenu,
+      showContextMenu,
+      hideContextMenu,
+      handleContextAction,
+      changeAlign,
+      PLUGIN_POSITION,
+      getPluginShown,
+      changeShowState,
+      actions
     }
   }
 }
@@ -278,4 +400,43 @@ export default {
   opacity: 0.5;
   background: #f2f2f2;
 }
+.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;
+}
+
+.context-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.context-menu li:hover {
+  background: #f0f0f0;
+}
+.menu-item-wrapper {
+  display: flex;
+  flex-grow: 1;
+  border-bottom: 1px solid rgb(231, 231, 231);
+  padding: 10px 0;
+}
+.menu-item-wrapper:last-child {
+  border-bottom: none;
+}
+.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 64da288a7a..56a2ec801d 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 72f4b15c24..1cce53b43c 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,12 @@ const repalceTrim = (e) => {
 const getTargetUrl = (centerName) => {
   return `/#/${centerName}/`
 }
-
+const changeShowState = (item) => {
+  state.showMenu = true
+  state.showSubMenu = true
+  item.isShow = !item.isShow
+  changeMenuShown(item.code)
+}
 const actions = {
   pageManagement() {
     activePlugin('AppManage')
@@ -197,6 +235,9 @@ const actions = {
       ? `./previewApp.html?appid=${appId}&tenant=${tenantId}`
       : `${href}/previewApp?appid=${appId}&tenant=${tenantId}`
     window.open(openUrl)
+  },
+  showSubMenu() {
+    state.showSubMenu = true
   }
 }
 
@@ -290,6 +331,7 @@ const saveRule = {
 
 const handleCloseMenu = () => {
   state.showMenu = false
+  state.showSubMenu = false
   window.removeEventListener('click', handleCloseMenu)
 }
 
@@ -356,43 +398,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;
       }
     }
   }

From 75c7207cbc5f7ac86df2a37fea68ec7a7551afe6 Mon Sep 17 00:00:00 2001
From: STATICHIT <2394412110@qq.com>
Date: Fri, 20 Sep 2024 01:41:50 +0800
Subject: [PATCH 2/3] optimize: Deal with comments

---
 packages/design-core/src/DesignPlugins.vue | 7 ++++---
 packages/toolbars/logo/src/Main.vue        | 5 -----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index c4c7192843..64bce3b3aa 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/packages/design-core/src/DesignPlugins.vue
@@ -203,7 +203,8 @@ export default {
       isSameSide,
       getPluginShown,
       changePluginShown,
-      changeMenuShown
+      changeMenuShown,
+      closePlugin
     } = useLayout()
 
     const plugins = getPluginsByLayout().map((pluginName) => getPlugin(pluginName))
@@ -227,7 +228,7 @@ export default {
 
     const close = () => {
       state.prevIdex = -2
-      useLayout().closePlugin(true)
+      closePlugin(true)
     }
 
     const actions = [
@@ -316,7 +317,7 @@ export default {
     const doCompleted = () => {
       if (!completed.value) {
         completed.value = true
-        useLayout().closePlugin()
+        closePlugin()
       }
     }
 
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index 1cce53b43c..16963c6ab3 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -189,8 +189,6 @@ const getTargetUrl = (centerName) => {
   return `/#/${centerName}/`
 }
 const changeShowState = (item) => {
-  state.showMenu = true
-  state.showSubMenu = true
   item.isShow = !item.isShow
   changeMenuShown(item.code)
 }
@@ -235,9 +233,6 @@ const actions = {
       ? `./previewApp.html?appid=${appId}&tenant=${tenantId}`
       : `${href}/previewApp?appid=${appId}&tenant=${tenantId}`
     window.open(openUrl)
-  },
-  showSubMenu() {
-    state.showSubMenu = true
   }
 }
 

From 06e35ea1315e1fbf3d1cac193110163b11fbb817 Mon Sep 17 00:00:00 2001
From: STATICHIT <2394412110@qq.com>
Date: Thu, 26 Sep 2024 01:34:08 +0800
Subject: [PATCH 3/3] optimize: Encapsulate RightMenu Component And Refactor
 Rendering Method

---
 packages/design-core/src/DesignPlugins.vue  | 173 +++----------------
 packages/design-core/src/DesignSettings.vue | 174 +++-----------------
 packages/design-core/src/RightMenu.vue      | 167 +++++++++++++++++++
 3 files changed, 217 insertions(+), 297 deletions(-)
 create mode 100644 packages/design-core/src/RightMenu.vue

diff --git a/packages/design-core/src/DesignPlugins.vue b/packages/design-core/src/DesignPlugins.vue
index 64bce3b3aa..b209b65f2d 100644
--- a/packages/design-core/src/DesignPlugins.vue
+++ b/packages/design-core/src/DesignPlugins.vue
@@ -134,48 +134,30 @@
     </div>
   </Teleport>
 
-  <ul
-    v-if="contextMenu.visible"
-    class="context-menu"
-    :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
-  >
-    <template v-if="contextMenu.type">
-      <li class="context-menu-header">{{ contextMenu.item.title }}</li>
-      <li v-for="action in actions" :key="action.method" @click="handleContextAction(action.method)">
-        {{ action.label }}
-      </li>
-    </template>
-
-    <template v-else>
-      <li
-        v-for="(item, index) in [...state.topNavLists, ...state.bottomNavLists]"
-        :key="index"
-        @click.stop="changeShowState(item.id)"
-        class="menu-item-wrapper"
-      >
-        <span class="check-mark">
-          <span v-show="getPluginShown(item.id)">√</span>
-        </span>
-        <span>{{ item.title }}</span>
-      </li>
-    </template>
-  </ul>
+  <right-menu
+    ref="rightMenu"
+    :list="[...state.topNavLists, ...state.bottomNavLists]"
+    :align="left"
+    @switchAlign="switchAlign"
+  ></right-menu>
 </template>
 
 <script>
-import { reactive, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+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, 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: {
@@ -202,11 +184,18 @@ export default {
       dragPluginLayout,
       isSameSide,
       getPluginShown,
-      changePluginShown,
-      changeMenuShown,
       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
@@ -231,82 +220,12 @@ export default {
       closePlugin(true)
     }
 
-    const actions = [
-      { label: '隐藏插件', method: 'hidePlugin' },
-      { label: '切换到右侧', method: 'switchToRight' },
-      { label: '隐藏左侧活动栏', method: 'hideLeftSidebar' }
-    ]
-
-    const contextMenu = reactive({
-      type: true,
-      visible: false,
-      x: 0,
-      y: 0,
-      item: null,
-      index: null,
-      list: null
-    })
-
-    const showContextMenu = (event, type, item, index, align) => {
-      contextMenu.type = type
-      contextMenu.visible = true
-      contextMenu.x = event.clientX
-      contextMenu.y = event.clientY
-      if (type) {
-        contextMenu.item = item
-        contextMenu.index = index
-        contextMenu.list = align
-      }
-    }
-
-    const hideContextMenu = () => {
-      contextMenu.visible = false
-    }
-
-    const handleContextAction = (action) => {
-      switch (action) {
-        case 'hidePlugin': {
-          close()
-          changePluginShown(contextMenu.item.id)
-          break
-        }
-        case 'switchToRight': {
-          close()
-          contextMenu.list === PLUGIN_POSITION.leftTop
-            ? state.topNavLists.splice(contextMenu.index, 1)
-            : state.bottomNavLists.splice(contextMenu.index, 1)
-          emit('changeLeftAlign', contextMenu.item.id)
-          dragPluginLayout(contextMenu.list, PLUGIN_POSITION.rightTop, contextMenu.index, 0)
-          break
-        }
-        case 'hideLeftSidebar': {
-          changeMenuShown('left')
-          break
-        }
-        default: {
-          break
-        }
-      }
-      hideContextMenu()
-    }
-
-    const changeShowState = (pluginName) => {
-      changePluginShown(pluginName)
-    }
-    const handleClickOutside = (event) => {
-      if (!event.target.closest('.context-menu')) {
-        hideContextMenu()
-      }
+    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)
     }
 
-    onMounted(() => {
-      document.addEventListener('click', handleClickOutside)
-    })
-
-    onBeforeUnmount(() => {
-      document.removeEventListener('click', handleClickOutside)
-    })
-
     const completed = ref(false)
 
     const changeAlign = (pluginId) => {
@@ -386,15 +305,12 @@ export default {
       pluginState,
       leftFixedPanelsStorage,
       onEnd,
-      contextMenu,
       showContextMenu,
-      hideContextMenu,
-      handleContextAction,
       changeAlign,
       PLUGIN_POSITION,
       getPluginShown,
-      changeShowState,
-      actions
+      switchAlign,
+      rightMenu
     }
   }
 }
@@ -537,43 +453,4 @@ export default {
 :deep(.svg-icon.icon-plugin-icon-plugin-help) {
   font-size: 22px;
 }
-
-.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;
-}
-
-.context-menu li {
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.context-menu li:hover {
-  background: #f0f0f0;
-}
-.menu-item-wrapper {
-  display: flex;
-  flex-grow: 1;
-  border-bottom: 1px solid rgb(231, 231, 231);
-  padding: 10px 0;
-}
-.menu-item-wrapper:last-child {
-  border-bottom: none;
-}
-.check-mark {
-  width: 20px;
-  text-align: left;
-}
 </style>
diff --git a/packages/design-core/src/DesignSettings.vue b/packages/design-core/src/DesignSettings.vue
index 71c89ec81f..952a556cc7 100644
--- a/packages/design-core/src/DesignSettings.vue
+++ b/packages/design-core/src/DesignSettings.vue
@@ -38,42 +38,22 @@
     </vue-draggable-next>
   </div>
 
-  <!-- 右键菜单 -->
-  <ul
-    v-if="contextMenu.visible"
-    class="context-menu"
-    :style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
-  >
-    <template v-if="contextMenu.type">
-      <li class="context-menu-header">{{ contextMenu.item.title }}</li>
-      <li v-for="action in actions" :key="action.method" @click="handleContextAction(action.method)">
-        {{ action.label }}
-      </li>
-    </template>
-
-    <template v-else>
-      <li
-        v-for="(item, index) in state.leftList"
-        :key="index"
-        @click.stop="changeShowState(item.id)"
-        class="menu-item-wrapper"
-      >
-        <span class="check-mark">
-          <span v-show="getPluginShown(item.id)">√</span>
-        </span>
-        <span>{{ item.title }}</span>
-      </li>
-    </template>
-  </ul>
+  <right-menu
+    ref="rightMenu"
+    :list="state.leftList"
+    :align="PLUGIN_POSITION.rightTop"
+    @switchAlign="switchAlign"
+  ></right-menu>
 </template>
 
 <script>
-import { computed, ref, toRefs, watch, reactive, onMounted, onBeforeUnmount } from 'vue'
+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, getPluginById } from '../config/plugin.js'
 import { VueDraggableNext } from 'vue-draggable-next'
+import RightMenu from './RightMenu.vue'
 
 export default {
   components: {
@@ -81,7 +61,8 @@ export default {
     TinyTabItem: TabItem,
     TinyPopover: Popover,
     TinyTooltip: Tooltip,
-    VueDraggableNext
+    VueDraggableNext,
+    RightMenu
   },
   props: {
     renderPanel: {
@@ -102,11 +83,17 @@ export default {
       dragPluginLayout,
       isSameSide,
       getPluginShown,
-      changePluginShown,
-      changeMenuShown,
       layoutState: { settings: settingsState }
     } = useLayout()
-    const contextMenuWidth = 130
+
+    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 }) => {
@@ -127,80 +114,11 @@ export default {
       useLayout().closeSetting(true)
     }
 
-    const actions = [
-      { label: '隐藏插件', method: 'hidePlugin' },
-      { label: '切换到左侧', method: 'switchToLeft' },
-      { label: '隐藏右侧活动栏', method: 'hideRightSidebar' }
-    ]
-
-    const contextMenu = reactive({
-      type: true,
-      visible: false,
-      x: 0,
-      y: 0,
-      item: null,
-      index: null,
-      list: null
-    })
-
-    const showContextMenu = (event, type, item, index, align) => {
-      contextMenu.type = type
-      contextMenu.visible = true
-      contextMenu.x = event.clientX - contextMenuWidth
-      contextMenu.y = event.clientY
-      if (type) {
-        contextMenu.item = item
-        contextMenu.index = index
-        contextMenu.list = align
-      }
-    }
-
-    const hideContextMenu = () => {
-      contextMenu.visible = false
+    const switchAlign = (index, id, list, align) => {
+      state.leftList.splice(index, 1)
+      emit('changeRightAlign', id)
+      dragPluginLayout(list, align, index, 0)
     }
-
-    const handleContextAction = (action) => {
-      switch (action) {
-        case 'hidePlugin': {
-          close()
-          changePluginShown(contextMenu.item.id)
-          break
-        }
-        case 'switchToLeft': {
-          close()
-          state.leftList.splice(contextMenu.index, 1)
-          emit('changeRightAlign', contextMenu.item.id)
-          dragPluginLayout(contextMenu.list, PLUGIN_POSITION.leftTop, contextMenu.index, 0)
-          break
-        }
-        case 'hideRightSidebar': {
-          changeMenuShown('right')
-          break
-        }
-        default: {
-          break
-        }
-      }
-      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)
-    })
-
     const activating = computed(() => settingsState.activating) //高亮显示
     const showMask = ref(true)
 
@@ -249,15 +167,12 @@ export default {
       fixPanel,
       rightFixedPanelsStorage,
       onEnd,
-      contextMenu,
       showContextMenu,
-      hideContextMenu,
-      handleContextAction,
       changeAlign,
       PLUGIN_POSITION,
       getPluginShown,
-      changeShowState,
-      actions
+      switchAlign,
+      rightMenu
     }
   }
 }
@@ -400,43 +315,4 @@ export default {
   opacity: 0.5;
   background: #f2f2f2;
 }
-.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;
-}
-
-.context-menu li {
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.context-menu li:hover {
-  background: #f0f0f0;
-}
-.menu-item-wrapper {
-  display: flex;
-  flex-grow: 1;
-  border-bottom: 1px solid rgb(231, 231, 231);
-  padding: 10px 0;
-}
-.menu-item-wrapper:last-child {
-  border-bottom: none;
-}
-.check-mark {
-  width: 20px;
-  text-align: left;
-}
 </style>
diff --git a/packages/design-core/src/RightMenu.vue b/packages/design-core/src/RightMenu.vue
new file mode 100644
index 0000000000..8de60f46fb
--- /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>