状态栏功能菜单插件化

2026-10-16 07:26:07 +08:00 · 2021-03-04 15:16:04 +08:00
parent eae0b5b482
commit b8408b82eb
7 changed files with 134 additions and 91 deletions
@@ -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 {
@@ -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;
@@ -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
@@ -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}` : '未选择仓库',
@@ -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
@@ -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'),
@@ -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'],