From 8fe422b9d2ab9730ab183bbc43cca095340921ca Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sun, 1 Aug 2021 17:01:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=A0=8F=E8=8F=9C=E5=8D=95=E5=BF=AB=E6=8D=B7=E9=94=AE=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/StatusBarMenu.vue      | 15 +++++++++++++--
 src/renderer/context/shortcut.ts               |  5 +++--
 src/renderer/context/status-bar.ts             |  1 +
 src/renderer/plugins/status-bar-view.ts        | 12 ++++++------
 src/renderer/plugins/transform-img-out-link.ts |  2 +-
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/StatusBarMenu.vue b/src/renderer/components/StatusBarMenu.vue
index addac80c..df8e1324 100644
--- a/src/renderer/components/StatusBarMenu.vue
+++ b/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 {
diff --git a/src/renderer/context/shortcut.ts b/src/renderer/context/shortcut.ts
index 77fe0a85..b4204a0d 100644
--- a/src/renderer/context/shortcut.ts
+++ b/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) {
diff --git a/src/renderer/context/status-bar.ts b/src/renderer/context/status-bar.ts
index 1ceb1010..69ed170f 100644
--- a/src/renderer/context/status-bar.ts
+++ b/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;
 }
 
diff --git a/src/renderer/plugins/status-bar-view.ts b/src/renderer/plugins/status-bar-view.ts
index 0d67cd99..6f599117 100644
--- a/src/renderer/plugins/status-bar-view.ts
+++ b/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')()
             },
           ]
diff --git a/src/renderer/plugins/transform-img-out-link.ts b/src/renderer/plugins/transform-img-out-link.ts
index 62f1cfaf..5d32784c 100644
--- a/src/renderer/plugins/transform-img-out-link.ts
+++ b/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)
       })
     })