feat: add separator for status bar menu

src/renderer/components/StatusBarMenu.vue

@@ -11,15 +11,17 @@
         <div v-if="menu.title" class="title-text">{{menu.title}}</div>
       </div>
       <ul class="list" v-if="showList && menu.list && menu.list.length">
-        <li
-          v-for="item in menu.list"
-          :key="item.id"
-          :class="{disabled: item.disabled, hidden: item.hidden}"
-          :title="item.tips"
-          @click="handleItemClick(item)">
-          <div class="menu-item-title">{{item.title}}</div>
-          <div v-if="item.subTitle" class="menu-item-sub-title">{{item.subTitle}}</div>
-        </li>
+        <template v-for="item in menu.list" :key="item.id">
+          <li v-if="item.type === 'separator'" v-show="!item.hidden" :key="i" :class="item.type"></li>
+          <li
+            v-else
+            :class="{[item.type]: true, disabled: item.disabled, hidden: item.hidden}"
+            :title="item.tips"
+            @click="handleItemClick(item)">
+            <div class="menu-item-title">{{item.title}}</div>
+            <div v-if="item.subTitle" class="menu-item-sub-title">{{item.subTitle}}</div>
+          </li>
+        </template>
       </ul>
     </div>
   </div>
@@ -89,8 +91,7 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
-.status-bar-menu.hidden,
-.status-bar-menu .hidden {
+.status-bar-menu.hidden {
   display: none;
 }
 
@@ -143,7 +144,7 @@ export default defineComponent({
   border-bottom-right-radius: 0;
 }
 
-.list li {
+.list li.normal {
   padding: 4px .8em;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -152,6 +153,10 @@ export default defineComponent({
   justify-content: space-between;
   border-radius: var(--g-border-radius);
 
+  &:hover {
+    background: #2f3031;
+  }
+
   &.disabled {
     cursor: default;
 
@@ -164,6 +169,10 @@ export default defineComponent({
     }
   }
 
+  &.hidden {
+    display: none;
+  }
+
   .menu-item-sub-title {
     font-size: 12px;
     color: var(--g-color-50);
@@ -171,7 +180,16 @@ export default defineComponent({
   }
 }
 
-.list li:hover {
-  background: #2f3031;
+.list li.separator {
+  border-top: 1px #757677 solid;
+  border-bottom: 1px #4e4f50 solid;
+  margin: 3px 0;
+
+  &:first-child,
+  &:last-child,
+  & + li.separator {
+    display: none;
+  }
 }
+
 </style>

src/renderer/plugins/copy-rendered-content.ts

@@ -21,6 +21,7 @@ export default {
 
     ctx.statusBar.tapMenus(menus => {
       menus['status-bar-tool']?.list?.push(
+        { type: 'separator' },
         {
           id: 'plugin.copy-rendered-content.copy-rtf',
           type: 'normal',
@@ -35,6 +36,7 @@ export default {
           subTitle: 'Styled',
           onClick: () => copyRTF(true)
         },
+        { type: 'separator' },
         {
           id: 'plugin.copy-rendered-content.copy-html',
           type: 'normal',

src/renderer/plugins/editor-attachment.ts

@@ -144,6 +144,7 @@ export default {
           subTitle: ctx.command.getKeysLabel([ctx.command.Alt, ctx.command.Shift, 'f']),
           onClick: () => linkFile(),
         },
+        { type: 'separator' },
       )
     })
   }

src/renderer/plugins/editor-paste.ts

@@ -109,6 +109,7 @@ export default {
           subTitle: 'Markdown',
           onClick: pasteRtf
         },
+        { type: 'separator' },
       )
     })
 

src/renderer/plugins/status-bar-navigation.ts

@@ -16,6 +16,7 @@ export default {
             subTitle: ctx.command.getKeysLabel('filter.show-quick-open'),
             onClick: () => ctx.action.getActionHandler('filter.show-quick-open')()
           },
+          { type: 'separator' },
         ]
       }
     })

src/renderer/plugins/status-bar-view.ts

@@ -51,6 +51,7 @@ export default {
               subTitle: getKeysLabel('layout.toggle-xterm'),
               onClick: () => ctx.layout.toggleXterm()
             }] : []),
+            { type: 'separator' },
             {
               id: 'toggle-wrap',
               type: 'normal',

src/renderer/plugins/transform-img-out-link.ts

@@ -121,12 +121,15 @@ export default {
     ctx.registerHook('VIEW_ELEMENT_CLICK', handleClick)
 
     ctx.statusBar.tapMenus(menus => {
-      menus['status-bar-tool']?.list?.push({
-        id: actionKeydown,
-        type: 'normal',
-        title: ctx.i18n.t('status-bar.tool.convert-img-link'),
-        onClick: ctx.action.getActionHandler(actionKeydown)
-      })
+      menus['status-bar-tool']?.list?.push(
+        {
+          id: actionKeydown,
+          type: 'normal',
+          title: ctx.i18n.t('status-bar.tool.convert-img-link'),
+          onClick: ctx.action.getActionHandler(actionKeydown)
+        },
+        { type: 'separator' },
+      )
     })
 
     ctx.view.tapContextMenus((items, e) => {

src/renderer/services/status-bar.ts

@@ -11,7 +11,7 @@ export type MenuItem = {
   disabled?: boolean;
   hidden?: boolean;
   onClick?: (item: MenuItem) => void;
-}
+} | { type: 'separator' }
 
 export interface Menu {
   id: string;