feat: 优化状态栏菜单快捷键展示

src/renderer/components/StatusBarMenu.vue

@@ -10,7 +10,10 @@
         <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" :title="item.tips" @click="handleItemClick(item)">{{item.title}}</li>
+        <li v-for="item in menu.list" :key="item.id" :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>
       </ul>
     </div>
   </div>
@@ -61,7 +64,7 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .status-bar-menu {
   cursor: pointer;
   user-select: none;
@@ -124,6 +127,14 @@ export default defineComponent({
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+
+  .menu-item-sub-title {
+    font-size: 12px;
+    color: var(--g-color-50);
+    margin-left: 1em;
+  }
 }
 
 .list li:hover {

src/renderer/context/shortcut.ts

@@ -1,3 +1,4 @@
+import { upperFirst } from 'lodash-es'
 import { getLogger } from '@fe/utils'
 import { isMacOS } from '@fe/utils/env'
 import { getActionHandler } from './action'
@@ -33,7 +34,7 @@ export const getKeyLabel = (key: XKey | string | number) => {
       return isMacOS ? 'Option' : 'Alt'
 
     default:
-      return key.toString().toUpperCase()
+      return upperFirst(key.toString())
   }
 }
 
@@ -104,7 +105,7 @@ export function getKeysLabel (id: string): string {
     return ''
   }
 
-  return command.keys.map(getKeyLabel).join(' + ')
+  return command.keys.map(getKeyLabel).join('+')
 }
 
 export function registerCommand (command: Command) {

src/renderer/context/status-bar.ts

@@ -8,6 +8,7 @@ export type MenuItem = {
   type: 'normal';
   title: string;
   tips?: string;
+  subTitle?: string;
   onClick?: (item: MenuItem) => void;
 }
 

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

@@ -19,42 +19,42 @@ export default {
               id: 'show-quick-open',
               type: 'normal',
               title: '快速跳转',
-              tips: getKeysLabel('filter.show-quick-open'),
+              subTitle: getKeysLabel('filter.show-quick-open'),
               onClick: () => getActionHandler('filter.show-quick-open')()
             },
             {
               id: 'toggle-side',
               type: 'normal',
               title: toggleTitle(ctx.store.state.showSide, '侧栏'),
-              tips: getKeysLabel('layout.toggle-side'),
+              subTitle: getKeysLabel('layout.toggle-side'),
               onClick: () => getActionHandler('layout.toggle-side')()
             },
             {
               id: 'toggle-editor',
               type: 'normal',
               title: toggleTitle(ctx.store.state.showEditor, '编辑'),
-              tips: getKeysLabel('layout.toggle-editor'),
+              subTitle: getKeysLabel('layout.toggle-editor'),
               onClick: () => getActionHandler('layout.toggle-editor')()
             },
             {
               id: 'toggle-view',
               type: 'normal',
               title: toggleTitle(ctx.store.state.showView, '预览'),
-              tips: getKeysLabel('layout.toggle-view'),
+              subTitle: getKeysLabel('layout.toggle-view'),
               onClick: () => getActionHandler('layout.toggle-view')()
             },
             ...(!FLAG_DISABLE_XTERM ? [{
               id: 'toggle-xterm',
               type: 'normal' as any,
               title: toggleTitle(ctx.store.state.showXterm, '终端'),
-              tips: getKeysLabel('layout.toggle-xterm'),
+              subTitle: getKeysLabel('layout.toggle-xterm'),
               onClick: () => getActionHandler('layout.toggle-xterm')()
             }] : []),
             {
               id: 'toggle-wrap',
               type: 'normal',
               title: '切换换行',
-              tips: getKeysLabel('editor.toggle-wrap'),
+              subTitle: getKeysLabel('editor.toggle-wrap'),
               onClick: () => getActionHandler('editor.toggle-wrap')()
             },
           ]

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

@@ -127,7 +127,7 @@ export default {
         id: actionKeydown,
         type: 'normal',
         title: '转换外链图片',
-        tips: getKeysLabel(actionKeydown),
+        subTitle: getKeysLabel(actionKeydown),
         onClick: ctx.action.getActionHandler(actionKeydown)
       })
     })