From b8408b82ebf2ce76701492497eeb5d43466a6d4d Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 15:16:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8F=92=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/StatusBar.vue         | 83 +------------------
 frontend/src/components/StatusBarMenu.vue     | 11 ++-
 frontend/src/plugins/status-bar-help.ts       | 54 ++++++++++++
 ...tch.ts => status-bar-repository-switch.ts} |  4 +-
 frontend/src/plugins/status-bar-view.ts       | 64 ++++++++++++++
 frontend/src/useful/plugin.ts                 |  4 +-
 frontend/src/useful/shortcut.ts               |  5 --
 7 files changed, 134 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/plugins/status-bar-help.ts
 rename frontend/src/plugins/{repository-switch.ts => status-bar-repository-switch.ts} (96%)
 create mode 100644 frontend/src/plugins/status-bar-view.ts

diff --git a/frontend/src/components/StatusBar.vue b/frontend/src/components/StatusBar.vue
index 1b6ce03b..29ee341f 100644
--- a/frontend/src/components/StatusBar.vue
+++ b/frontend/src/components/StatusBar.vue
@@ -2,7 +2,6 @@
   <div class="status-bar">
     <StatusBarMenu class="left" position="left" />
     <div class="right">
-      <StatusBarMenu class="right" position="right" />
       <div class="document-info">
         <span>行：{{documentInfo.line}}</span>
         <span>列：{{documentInfo.column}}</span>
@@ -10,12 +9,7 @@
         <span>字符数：{{documentInfo.textLength}}</span>
         <span v-if="documentInfo.selectedLength > 0">已选中：{{documentInfo.selectedLength}}</span>
       </div>
-      <div class="action" @click="toggleSide" :title="getActionLabel('toggle-side')">切换侧栏</div>
-      <div class="action" @click="toggleWrap" :title="getActionLabel('toggle-wrap')">切换换行</div>
-      <div class="action" @click="toggleView" :title="getActionLabel('toggle-view')">切换预览</div>
-      <div class="action" @click="toggleXterm" :title="getActionLabel('toggle-xterm')">切换终端</div>
-      <div class="action" @click="toggleReadme" :title="getActionLabel('toggle-readme')">README</div>
-      <div class="action" @click="toggleFeature">特色功能说明</div>
+      <StatusBarMenu class="right" position="right" />
       <div class="action" @click="toggleRender">{{autoPreview ? '同步渲染-已开启' : '同步渲染-已关闭'}}</div>
       <svg-icon v-if="!autoPreview" class="action action-icon" name="sync-alt-solid" @click="rerenderView" title="强制重新渲染" />
     </div>
@@ -23,12 +17,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeUnmount, onMounted, toRefs } from 'vue'
+import { defineComponent, toRefs } from 'vue'
 import { useStore } from 'vuex'
 import { useBus } from '../useful/bus'
 import StatusBarMenu from './StatusBarMenu.vue'
 import SvgIcon from '../components/SvgIcon.vue'
-import { isAction, getActionLabel } from '../useful/shortcut'
 
 export default defineComponent({
   name: 'status-bar',
@@ -38,30 +31,6 @@ export default defineComponent({
     const store = useStore()
     const { documentInfo, autoPreview } = toRefs(store.state)
 
-    function toggleSide () {
-      bus.emit('toggle-side')
-    }
-
-    function toggleView () {
-      bus.emit('toggle-view')
-    }
-
-    function toggleXterm () {
-      bus.emit('toggle-xterm')
-    }
-
-    function toggleFeature () {
-      store.dispatch('showHelp', 'FEATURES.md')
-    }
-
-    function toggleReadme () {
-      store.dispatch('showHelp', 'README.md')
-    }
-
-    function toggleWrap () {
-      bus.emit('editor-toggle-wrap')
-    }
-
     function toggleRender () {
       store.commit('setAutoPreview', !autoPreview.value)
     }
@@ -70,58 +39,11 @@ export default defineComponent({
       bus.emit('view-rerender')
     }
 
-    function keydownHandler (e: KeyboardEvent) {
-      if (isAction(e, 'toggle-side')) {
-        toggleSide()
-        e.preventDefault()
-        e.stopPropagation()
-      }
-
-      if (isAction(e, 'toggle-view')) {
-        toggleView()
-        e.preventDefault()
-        e.stopPropagation()
-      }
-
-      if (isAction(e, 'toggle-xterm')) {
-        toggleXterm()
-        e.preventDefault()
-        e.stopPropagation()
-      }
-
-      if (isAction(e, 'toggle-wrap')) {
-        toggleWrap()
-        e.preventDefault()
-        e.stopPropagation()
-      }
-
-      if (isAction(e, 'toggle-readme')) {
-        toggleReadme()
-        e.preventDefault()
-        e.stopPropagation()
-      }
-    }
-
-    onMounted(() => {
-      window.addEventListener('keydown', keydownHandler, true)
-    })
-
-    onBeforeUnmount(() => {
-      window.removeEventListener('keydown', keydownHandler)
-    })
-
     return {
       documentInfo,
       autoPreview,
-      toggleSide,
-      toggleWrap,
-      toggleView,
-      toggleXterm,
-      toggleReadme,
-      toggleFeature,
       toggleRender,
       rerenderView,
-      getActionLabel,
     }
   },
 })
@@ -152,6 +74,7 @@ export default defineComponent({
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-right: 0.3em;
 }
 
 .document-info > span {
diff --git a/frontend/src/components/StatusBarMenu.vue b/frontend/src/components/StatusBarMenu.vue
index 525dfa36..80f59d85 100644
--- a/frontend/src/components/StatusBarMenu.vue
+++ b/frontend/src/components/StatusBarMenu.vue
@@ -55,16 +55,21 @@ export default defineComponent({
 
 <style scoped>
 .status-bar-menu {
-  width: 100px;
   cursor: pointer;
   user-select: none;
+  z-index: 9999999999;
+  position: relative;
+  overflow-x: hidden;
 }
 
 .title {
-  padding: 0 .3em;
+  width: 100%;
+  padding: 0 .8em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  box-sizing: border-box;
+  width: fit-content;
 }
 
 .status-bar-menu:hover {
@@ -88,7 +93,7 @@ export default defineComponent({
 }
 
 .list li {
-  padding: 4px .6em;
+  padding: 4px .8em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/frontend/src/plugins/status-bar-help.ts b/frontend/src/plugins/status-bar-help.ts
new file mode 100644
index 00000000..5940ad05
--- /dev/null
+++ b/frontend/src/plugins/status-bar-help.ts
@@ -0,0 +1,54 @@
+import { Plugin } from '@/useful/plugin'
+import { Alt, getActionLabel, isAction } from '@/useful/shortcut'
+import store from '@/store'
+
+export default {
+  name: 'status-bar-view',
+  register: ctx => {
+    const actions = {
+      'toggle-readme': {
+        title: 'README',
+        action: () => store.dispatch('showHelp', 'README.md'),
+        shortcut: [Alt, 'h'],
+      },
+      'toggle-features': {
+        title: '特色功能说明',
+        action: () => store.dispatch('showHelp', 'FEATURES.md'),
+        shortcut: null,
+      },
+    }
+
+    Object.entries(actions).forEach(([key, item]) => {
+      item.shortcut && ctx.registerShortcutAction(key, item.shortcut)
+    })
+
+    function keydownHandler (e: KeyboardEvent) {
+      for (const [key, item] of Object.entries(actions)) {
+        if (isAction(e, key)) {
+          item.action()
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
+    }
+
+    window.addEventListener('keydown', keydownHandler, true)
+
+    ctx.updateStatusBarMenu({
+      id: 'status-bar-help',
+      location: 'status-bar',
+      position: 'right',
+      title: '帮助',
+      list: Object.entries(actions).map(([key, item]) => {
+        return {
+          id: key,
+          type: 'normal',
+          title: item.title,
+          tips: item.shortcut ? getActionLabel(key) : '',
+          onClick: item.action
+        }
+      })
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/repository-switch.ts b/frontend/src/plugins/status-bar-repository-switch.ts
similarity index 96%
rename from frontend/src/plugins/repository-switch.ts
rename to frontend/src/plugins/status-bar-repository-switch.ts
index bcb2dda2..4bf5cc63 100644
--- a/frontend/src/plugins/repository-switch.ts
+++ b/frontend/src/plugins/status-bar-repository-switch.ts
@@ -5,7 +5,7 @@ import { $args } from '@/useful/global-args'
 import file from '@/useful/file'
 
 export default {
-  name: 'repository-switch',
+  name: 'status-bar-repository-switch',
   register: ctx => {
     const bus = useBus()
 
@@ -41,7 +41,7 @@ export default {
     function updateMenu () {
       const { currentRepo, repositories } = store.state
       ctx.updateStatusBarMenu({
-        id: 'repository-switch',
+        id: 'status-bar-repository-switch',
         location: 'status-bar',
         position: 'left',
         title: currentRepo ? `仓库: ${currentRepo.name}` : '未选择仓库',
diff --git a/frontend/src/plugins/status-bar-view.ts b/frontend/src/plugins/status-bar-view.ts
new file mode 100644
index 00000000..866be4d7
--- /dev/null
+++ b/frontend/src/plugins/status-bar-view.ts
@@ -0,0 +1,64 @@
+import { Plugin } from '@/useful/plugin'
+import { useBus } from '@/useful/bus'
+import { Alt, getActionLabel, isAction } from '@/useful/shortcut'
+
+export default {
+  name: 'status-bar-view',
+  register: ctx => {
+    const bus = useBus()
+
+    const actions = {
+      'toggle-side': {
+        title: '切换侧栏',
+        action: () => bus.emit('toggle-side'),
+        shortcut: [Alt, 'e'],
+      },
+      'toggle-view': {
+        title: '切换预览',
+        action: () => bus.emit('toggle-view'),
+        shortcut: [Alt, 'v'],
+      },
+      'toggle-xterm': {
+        title: '切换终端',
+        action: () => bus.emit('toggle-xterm'),
+        shortcut: [Alt, 't'],
+      },
+      'toggle-wrap': {
+        title: '切换换行',
+        action: () => bus.emit('editor-toggle-wrap'),
+        shortcut: [Alt, 'w'],
+      },
+    }
+
+    Object.entries(actions).forEach(([key, item]) => ctx.registerShortcutAction(key, item.shortcut))
+
+    function keydownHandler (e: KeyboardEvent) {
+      for (const [key, item] of Object.entries(actions)) {
+        if (isAction(e, key)) {
+          item.action()
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
+    }
+
+    window.addEventListener('keydown', keydownHandler, true)
+
+    ctx.updateStatusBarMenu({
+      id: 'status-bar-view',
+      location: 'status-bar',
+      position: 'right',
+      title: '视图',
+      list: Object.entries(actions).map(([key, item]) => {
+        return {
+          id: key,
+          type: 'normal',
+          title: item.title,
+          tips: getActionLabel(key),
+          onClick: item.action
+        }
+      })
+    })
+  }
+} as Plugin
diff --git a/frontend/src/useful/plugin.ts b/frontend/src/useful/plugin.ts
index 2db28fdb..d5278414 100644
--- a/frontend/src/useful/plugin.ts
+++ b/frontend/src/useful/plugin.ts
@@ -89,7 +89,9 @@ export const init = () => {
   logger.debug('init')
 
   const localPlugins = [
-    require('@/plugins/repository-switch'),
+    require('@/plugins/status-bar-repository-switch'),
+    require('@/plugins/status-bar-view'),
+    require('@/plugins/status-bar-help'),
     require('@/plugins/markdown-source-line'),
     require('@/plugins/markdown-toc'),
     require('@/plugins/markdown-code'),
diff --git a/frontend/src/useful/shortcut.ts b/frontend/src/useful/shortcut.ts
index 53c84197..1a5f531e 100644
--- a/frontend/src/useful/shortcut.ts
+++ b/frontend/src/useful/shortcut.ts
@@ -13,11 +13,6 @@ export const LeftClick = 0
 type XKey = typeof Ctrl | typeof CtrlCmd | typeof Alt | typeof Shift
 
 const defaultActions = {
-  'toggle-side': [Alt, 'e'],
-  'toggle-wrap': [Alt, 'w'],
-  'toggle-view': [Alt, 'v'],
-  'toggle-xterm': [Alt, 't'],
-  'toggle-readme': [Alt, 'h'],
   'insert-document': [CtrlCmd, Alt, 'i'],
   'show-quick-open': [CtrlCmd, 'p'],
   'file-tabs-switch-left': [Ctrl, Alt, 'ArrowLeft'],