From 02489434b814d2322883cfda62d4a984f2d47de1 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sat, 29 May 2021 12:18:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=8C=E6=AD=A5=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=BD=BF=E7=94=A8=E6=8F=92=E4=BB=B6=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/StatusBar.vue      | 22 ++-------------
 frontend/src/components/StatusBarMenu.vue  | 29 +++++++++++++++++---
 frontend/src/plugins/status-bar-refresh.ts | 32 ++++++++++++++++++++++
 frontend/src/useful/plugin/build-in.ts     |  1 +
 frontend/src/useful/plugin/status-bar.ts   |  4 ++-
 5 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/plugins/status-bar-refresh.ts

diff --git a/frontend/src/components/StatusBar.vue b/frontend/src/components/StatusBar.vue
index 29ee341f..c88ecdd5 100644
--- a/frontend/src/components/StatusBar.vue
+++ b/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>
diff --git a/frontend/src/components/StatusBarMenu.vue b/frontend/src/components/StatusBarMenu.vue
index 08d0cf57..7e148477 100644
--- a/frontend/src/components/StatusBarMenu.vue
+++ b/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 {
diff --git a/frontend/src/plugins/status-bar-refresh.ts b/frontend/src/plugins/status-bar-refresh.ts
new file mode 100644
index 00000000..bf325df4
--- /dev/null
+++ b/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
diff --git a/frontend/src/useful/plugin/build-in.ts b/frontend/src/useful/plugin/build-in.ts
index 2909e5a7..04cb7cb3 100644
--- a/frontend/src/useful/plugin/build-in.ts
+++ b/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'),
diff --git a/frontend/src/useful/plugin/status-bar.ts b/frontend/src/useful/plugin/status-bar.ts
index e5922521..5a321ad2 100644
--- a/frontend/src/useful/plugin/status-bar.ts
+++ b/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' })[];