feat: 同步预览按钮使用插件实现

frontend/src/components/StatusBar.vue

@@ -10,8 +10,6 @@
         <span v-if="documentInfo.selectedLength > 0">已选中：{{documentInfo.selectedLength}}</span>
       </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>
   </div>
 </template>
@@ -19,32 +17,16 @@
 <script lang="ts">
 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'
 
 export default defineComponent({
   name: 'status-bar',
-  components: { StatusBarMenu, SvgIcon },
+  components: { StatusBarMenu },
   setup () {
-    const bus = useBus()
     const store = useStore()
     const { documentInfo, autoPreview } = toRefs(store.state)
 
-    function toggleRender () {
-      store.commit('setAutoPreview', !autoPreview.value)
-    }
-
-    function rerenderView () {
-      bus.emit('view-rerender')
-    }
-
-    return {
-      documentInfo,
-      autoPreview,
-      toggleRender,
-      rerenderView,
-    }
+    return { documentInfo, autoPreview }
   },
 })
 </script>

frontend/src/components/StatusBarMenu.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="status-bar-menu-wrapper">
     <div
-      class="status-bar-menu"
+      :class="{'status-bar-menu': true, hidden: menu.hidden}"
       v-for="menu in list"
       :key="menu.id"
       @click="menu.onClick && menu.onClick(menu)">
-      <div class="title">{{menu.title}}</div>
+      <div class="title" :title="menu.tips">
+        <svg-icon v-if="menu.icon" :name="menu.icon" class="title-icon" />
+        <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>
       </ul>
@@ -17,8 +20,10 @@
 import { defineComponent, onBeforeUnmount, ref } from 'vue'
 import { useBus } from '../useful/bus'
 import { getMenus, MenuItem } from '../useful/plugin/status-bar'
+import SvgIcon from './SvgIcon.vue'
 
 export default defineComponent({
+  components: { SvgIcon },
   name: 'status-bar-menu',
   props: {
     position: {
@@ -66,14 +71,30 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
+.status-bar-menu.hidden {
+  display: none;
+}
+
 .title {
   width: 100%;
   padding: 0 .8em;
+  box-sizing: border-box;
+  width: fit-content;
+  display: flex;
+  align-content: center;
+}
+
+.title-icon {
+  width: 12px;
+  height: 20px;
+  padding-right: 4px;
+  display: block;
+}
+
+.title-text {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  box-sizing: border-box;
-  width: fit-content;
 }
 
 .status-bar-menu:hover {

frontend/src/plugins/status-bar-refresh.ts

@@ -0,0 +1,32 @@
+import { Plugin } from '@/useful/plugin'
+import store from '@/store'
+import { useBus } from '@/useful/bus'
+
+export default {
+  name: 'status-bar-refresh',
+  register: ctx => {
+    const bus = useBus()
+
+    const updateMenu = (autoPreview: boolean) => {
+      ctx.statusBar.updateMenu({
+        id: 'status-bar-refresh-status',
+        position: 'right',
+        title: '同步渲染-' + (autoPreview ? '已开启' : '已关闭'),
+        onClick: () => store.commit('setAutoPreview', !autoPreview)
+      })
+
+      ctx.statusBar.updateMenu({
+        id: 'status-bar-refresh-action',
+        position: 'right',
+        tips: '强制渲染',
+        icon: 'sync-alt-solid',
+        hidden: autoPreview,
+        onClick: () => bus.emit('view-rerender')
+      })
+    }
+
+    store.watch(() => store.state.autoPreview, updateMenu)
+
+    updateMenu(store.state.autoPreview)
+  }
+} as Plugin

frontend/src/useful/plugin/build-in.ts

@@ -2,6 +2,7 @@ export default [
   require('@/plugins/status-bar-repository-switch'),
   require('@/plugins/status-bar-view'),
   require('@/plugins/status-bar-help'),
+  require('@/plugins/status-bar-refresh'),
   require('@/plugins/markdown-source-line'),
   require('@/plugins/markdown-toc'),
   require('@/plugins/markdown-code'),

frontend/src/useful/plugin/status-bar.ts

@@ -12,8 +12,10 @@ export type MenuItem = {
 
 export interface Menu {
   id: string;
-  title: string;
+  title?: string;
   tips?: string;
+  icon?: string;
+  hidden?: boolean;
   position: 'left' | 'right';
   onClick?: (menu: Menu) => void;
   list?: (MenuItem | { type: 'separator' })[];