From 9942713de7ac9115347c8008f82e387225f066d6 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 25 Feb 2021 11:13:43 +0800
Subject: [PATCH 01/12] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E6=9C=BA=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Preview.vue         |  84 ++-------------
 frontend/src/plugins/TransformImgOutLink.ts | 108 ++++++++++++++++++++
 frontend/src/useful/plugin.ts               |  58 +++++++++++
 frontend/src/useful/shortcut.ts             |  42 +++++---
 4 files changed, 199 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/plugins/TransformImgOutLink.ts
 create mode 100644 frontend/src/useful/plugin.ts

diff --git a/frontend/src/components/Preview.vue b/frontend/src/components/Preview.vue
index fc019311..a0c4516e 100644
--- a/frontend/src/components/Preview.vue
+++ b/frontend/src/components/Preview.vue
@@ -41,7 +41,6 @@
 import loadsh from 'lodash'
 import { useStore } from 'vuex'
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
-import mime from 'mime-types'
 import Markdown from 'markdown-it'
 import TaskLists from 'markdown-it-task-lists'
 import katex from 'markdown-it-katex'
@@ -65,13 +64,13 @@ import MindMapPlugin from '../plugins/MindMapPlugin'
 import file from '../useful/file'
 import env from '../useful/env'
 import { encodeMarkdownLink } from '../useful/utils'
+import { triggerHook } from '../useful/plugin'
 
 import 'github-markdown-css/github-markdown.css'
 import 'highlight.js/styles/atom-one-dark.css'
 import 'katex/dist/katex.min.css'
 import { useBus } from '../useful/bus'
-import { useToast } from '../useful/toast'
-import { hasCtrlCmd, isAction } from '../useful/shortcut'
+import { hasCtrlCmd } from '../useful/shortcut'
 
 HighlightLineNumber.addStyles()
 
@@ -111,7 +110,6 @@ export default defineComponent({
   setup (_, { emit }) {
     const bus = useBus()
     const store = useStore()
-    const toast = useToast()
 
     const { currentContent, currentFile, autoPreview } = toRefs(store.state)
     const fileRepo = computed(() => currentFile.value?.repo)
@@ -273,63 +271,9 @@ export default defineComponent({
       nextTick(() => bus.emit('preview-rendered'))
     }, 500, { leading: true })
 
-    async function transformImgOutLink (img: HTMLImageElement) {
-      const transform = (ximg: HTMLImageElement): Promise<string> => {
-        const canvas = document.createElement('canvas')
-        canvas.width = ximg.naturalWidth
-        canvas.height = ximg.naturalHeight
-        canvas.getContext('2d')!!.drawImage(ximg, 0, 0)
-        return new Promise((resolve, reject) => {
-          canvas.toBlob(async blob => {
-            try {
-              const imgFile = new File([blob!!], 'file.png')
-              const { relativePath } = await file.upload(fileRepo.value, filePath.value, imgFile)
-              resolve(relativePath)
-            } catch (error) {
-              reject(error)
-            }
-          })
-        })
-      }
-
-      let replacedLink = ''
-      const imgAttrSrc = img.getAttribute('src') || ''
-      if (img.src.startsWith('data:')) {
-        replacedLink = await transform(img)
-      } else if (imgAttrSrc.startsWith('http://') || imgAttrSrc.startsWith('https://')) {
-        const res = await window.fetch(`api/proxy?url=${encodeURIComponent(img.src)}&headers=${img.getAttribute('headers') || ''}`)
-        const blob = await res.blob()
-        const imgFile = new File([blob!!], 'file.' + mime.extension(res.headers.get('content-type')!!))
-        const { relativePath } = await file.upload(fileRepo.value, filePath.value, imgFile)
-        replacedLink = relativePath
-      }
-
-      if (replacedLink) {
-        return { oldLink: img.src, replacedLink: encodeMarkdownLink(replacedLink) }
-      }
-
-      return null
-    }
-
     async function keydownHandler (e: KeyboardEvent) {
-      // 转换所有外链图片到本地
-      if (isAction(e, 'transform-img-link')) {
-        e.preventDefault()
-        e.stopPropagation()
-        const result = []
-        const imgList = refView.value!!.querySelectorAll('img')
-        for (let i = 0; i < imgList.length; i++) {
-          toast.show('info', `正在转换外链图片 ${i + 1}/${imgList.length}`)
-
-          const img = imgList[i]
-          const data = await transformImgOutLink(img)
-          if (data) {
-            result.push(data)
-          }
-        }
-        result.forEach(data => bus.emit('editor-replace-value', { search: data.oldLink, replace: data.replacedLink }))
-        bus.emit('tree-refresh')
-      }
+      const getRefview = () => refView.value
+      triggerHook('ON_VIEW_KEY_DOWN', e, getRefview())
     }
 
     function handleScroll (e: any) {
@@ -350,6 +294,8 @@ export default defineComponent({
     }
 
     async function handleClick (e: MouseEvent) {
+      triggerHook('ON_VIEW_ELEMENT_CLICK', e)
+
       const target = e.target as HTMLElement
 
       const preventEvent = () => {
@@ -432,24 +378,6 @@ export default defineComponent({
         bus.emit('copy-text', target.innerText)
       }
 
-      if (target.tagName === 'IMG') {
-        const img = target as HTMLImageElement
-        if (isAction(e, 'transform-img-link-by-click')) { // 转换外链图片到本地
-          const data = await transformImgOutLink(img)
-          if (data) {
-            bus.emit('tree-refresh')
-            bus.emit('editor-replace-value', { search: data.oldLink, replace: data.replacedLink })
-          }
-        } else if (img.parentElement!!.tagName === 'A') {
-          handleLink(img.parentElement as HTMLAnchorElement)
-        } else {
-          env.openAlwaysOnTopWindow(img.src)
-        }
-
-        e.stopPropagation()
-        return
-      }
-
       if (target.tagName === 'INPUT' && target.parentElement!!.classList.contains('source-line')) {
         switchTodo(parseInt(target.parentElement!!.dataset.sourceLine || '0'), (target as HTMLInputElement).checked)
         e.preventDefault()
diff --git a/frontend/src/plugins/TransformImgOutLink.ts b/frontend/src/plugins/TransformImgOutLink.ts
new file mode 100644
index 00000000..364d20a7
--- /dev/null
+++ b/frontend/src/plugins/TransformImgOutLink.ts
@@ -0,0 +1,108 @@
+import mime from 'mime-types'
+import file from '@/useful/file'
+import { Plugin, Ctx } from '@/useful/plugin'
+import { CtrlCmd, isAction, LeftClick, Shift } from '@/useful/shortcut'
+import { encodeMarkdownLink } from '@/useful/utils'
+import { useBus } from '@/useful/bus'
+import env from '@/useful/env'
+import { useToast } from '@/useful/toast'
+import store from '@/store'
+
+async function transformImgOutLink (img: HTMLImageElement) {
+  const { currentFile } = store.state
+  const { repo, path } = currentFile
+
+  const transform = (ximg: HTMLImageElement): Promise<string> => {
+    const canvas = document.createElement('canvas')
+    canvas.width = ximg.naturalWidth
+    canvas.height = ximg.naturalHeight
+    canvas.getContext('2d')!!.drawImage(ximg, 0, 0)
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(async blob => {
+        try {
+          const imgFile = new File([blob!!], 'file.png')
+          const { relativePath } = await file.upload(repo, path, imgFile)
+          resolve(relativePath)
+        } catch (error) {
+          reject(error)
+        }
+      })
+    })
+  }
+
+  let replacedLink = ''
+  const imgAttrSrc = img.getAttribute('src') || ''
+  if (img.src.startsWith('data:')) {
+    replacedLink = await transform(img)
+  } else if (imgAttrSrc.startsWith('http://') || imgAttrSrc.startsWith('https://')) {
+    const res = await window.fetch(`api/proxy?url=${encodeURIComponent(img.src)}&headers=${img.getAttribute('headers') || ''}`)
+    const blob = await res.blob()
+    const imgFile = new File([blob!!], 'file.' + mime.extension(res.headers.get('content-type')!!))
+    const { relativePath } = await file.upload(repo, path, imgFile)
+    replacedLink = relativePath
+  }
+
+  if (replacedLink) {
+    return { oldLink: img.src, replacedLink: encodeMarkdownLink(replacedLink) }
+  }
+
+  return null
+}
+
+const actionKeydown = 'transform-img-link'
+const actionClick = 'transform-img-link-by-click'
+
+export const plugin = {
+  name: 'transform-img-out-link',
+  register: (ctx: Ctx) => {
+    ctx.registerShortcutAction(actionKeydown, [CtrlCmd, Shift, 'l'])
+    ctx.registerShortcutAction(actionClick, [CtrlCmd, Shift, LeftClick])
+
+    ctx.registerHook('ON_VIEW_KEY_DOWN', async (e: KeyboardEvent, refView: HTMLElement) => {
+      const toast = useToast()
+      const bus = useBus()
+
+      if (isAction(e, actionKeydown)) {
+        e.preventDefault()
+        e.stopPropagation()
+        const result = []
+        const imgList = refView.querySelectorAll('img')
+        for (let i = 0; i < imgList.length; i++) {
+          toast.show('info', `正在转换外链图片 ${i + 1}/${imgList.length}`)
+
+          const img = imgList[i]
+          const data = await transformImgOutLink(img)
+          if (data) {
+            result.push(data)
+          }
+        }
+        result.forEach(data => bus.emit('editor-replace-value', { search: data.oldLink, replace: data.replacedLink }))
+        bus.emit('tree-refresh')
+      }
+    })
+
+    ctx.registerHook('ON_VIEW_ELEMENT_CLICK', async (e: MouseEvent) => {
+      const bus = useBus()
+      const target = e.target as HTMLElement
+      if (target.tagName !== 'IMG') {
+        return false
+      }
+
+      const img = target as HTMLImageElement
+      if (isAction(e, actionClick)) { // 转换外链图片到本地
+        const data = await transformImgOutLink(img)
+        if (data) {
+          bus.emit('tree-refresh')
+          bus.emit('editor-replace-value', { search: data.oldLink, replace: data.replacedLink })
+        }
+      } else {
+        env.openAlwaysOnTopWindow(img.src)
+      }
+
+      e.stopPropagation()
+      e.preventDefault()
+
+      return true
+    })
+  }
+} as Plugin
diff --git a/frontend/src/useful/plugin.ts b/frontend/src/useful/plugin.ts
new file mode 100644
index 00000000..4c792d01
--- /dev/null
+++ b/frontend/src/useful/plugin.ts
@@ -0,0 +1,58 @@
+import { addAction } from './shortcut'
+import { getLogger } from './utils'
+
+export type HookType = 'ON_VIEW_ELEMENT_CLICK'
+  | 'ON_VIEW_KEY_DOWN'
+
+export interface Plugin {
+  name: string;
+  register?: (ctx: Ctx) => void;
+}
+
+const logger = getLogger('plugin')
+
+const plugins: {[name: string]: Plugin} = {}
+
+const hooks: { [key in HookType]?: ((...args: any[]) => boolean | void | Promise<boolean | void>)[] } = {}
+
+const ctx = {
+  registerShortcutAction (name: string, keys: (string | number)[]) {
+    addAction(name, keys)
+  },
+  registerHook: (type: HookType, fun: (...args: any[]) => void) => {
+    if (Array.isArray(hooks[type])) {
+      hooks[type] = [...hooks[type]!!, fun]
+    } else {
+      hooks[type] = [fun]
+    }
+  }
+}
+
+export type Ctx = typeof ctx;
+
+export const register = (plugin: Plugin) => {
+  logger.debug('register', plugin)
+  plugins[plugin.name] = plugin
+  plugin.register && plugin.register(ctx)
+}
+
+export const init = () => {
+  logger.debug('init')
+
+  const localPlugins = [
+    require('@/plugins/TransformImgOutLink').plugin
+  ]
+
+  localPlugins.forEach(register)
+}
+
+export const triggerHook = async (type: HookType, ...args: any[]) => {
+  logger.debug('triggerHook', type, hooks, args)
+  for (const fun of (hooks[type] || [])) {
+    if (await fun(...args)) {
+      break
+    }
+  }
+}
+
+init()
diff --git a/frontend/src/useful/shortcut.ts b/frontend/src/useful/shortcut.ts
index 47cbce3a..53c84197 100644
--- a/frontend/src/useful/shortcut.ts
+++ b/frontend/src/useful/shortcut.ts
@@ -4,15 +4,15 @@ import env from './env'
 const logger = getLogger('shortcut')
 
 const isMacOS = env.isMacOS
-const Ctrl = 'Ctrl'
-const CtrlCmd = 'CtrlCmd'
-const Alt = 'Alt'
-const Shift = 'Shift'
-const LeftClick = 0
+export const Ctrl = 'Ctrl'
+export const CtrlCmd = 'CtrlCmd'
+export const Alt = 'Alt'
+export const Shift = 'Shift'
+export const LeftClick = 0
 
 type XKey = typeof Ctrl | typeof CtrlCmd | typeof Alt | typeof Shift
 
-const actions = {
+const defaultActions = {
   'toggle-side': [Alt, 'e'],
   'toggle-wrap': [Alt, 'w'],
   'toggle-view': [Alt, 'v'],
@@ -20,13 +20,15 @@ const actions = {
   'toggle-readme': [Alt, 'h'],
   'insert-document': [CtrlCmd, Alt, 'i'],
   'show-quick-open': [CtrlCmd, 'p'],
-  'transform-img-link-by-click': [CtrlCmd, Shift, LeftClick],
-  'transform-img-link': [CtrlCmd, Shift, 'l'],
   'file-tabs-switch-left': [Ctrl, Alt, 'ArrowLeft'],
   'file-tabs-switch-right': [Ctrl, Alt, 'ArrowRight'],
 }
 
-type ActionName = keyof typeof actions
+const actions: {[key: string]: (string | number)[]} = {
+  ...defaultActions
+}
+
+type ActionName = keyof typeof defaultActions
 
 export const hasCtrlCmd = (e: KeyboardEvent | MouseEvent) => isMacOS ? e.metaKey : e.ctrlKey
 
@@ -43,11 +45,6 @@ export const getKeyLabel = (key: XKey | string | number) => {
   }
 }
 
-export const getActionLabel = (name: ActionName) => {
-  const keys: any[] = actions[name]
-  return keys.map(getKeyLabel).join(' + ')
-}
-
 export const matchKeys = (e: KeyboardEvent | MouseEvent, keys: (string | number)[]) => {
   for (const key of keys) {
     switch (key) {
@@ -80,7 +77,22 @@ export const getCurrentAction = (e: KeyboardEvent | MouseEvent) => {
   return (Object.keys(actions) as ActionName[]).find(action => matchKeys(e, actions[action]))
 }
 
-export const isAction = (e: KeyboardEvent | MouseEvent, name: ActionName) => {
+export function isAction (e: KeyboardEvent | MouseEvent, name: ActionName): boolean
+export function isAction (e: KeyboardEvent | MouseEvent, name: string): boolean
+export function isAction (e: KeyboardEvent | MouseEvent, name: string) {
   logger.debug('isAction', name, e)
   return matchKeys(e, actions[name])
 }
+
+export function getActionLabel (name: ActionName): string
+export function getActionLabel (name: string): string
+export function getActionLabel (name: string): string {
+  const keys: any[] = actions[name]
+  return keys.map(getKeyLabel).join(' + ')
+}
+
+export function addAction (name: ActionName, keys: (string | number)[]): void
+export function addAction (name: string, keys: (string | number)[]): void
+export function addAction (name: string, keys: (string | number)[]): void {
+  actions[name] = keys
+}

From 43060874f9453a43445c97fbd0792a8a935137ed Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 25 Feb 2021 11:22:46 +0800
Subject: [PATCH 02/12] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/plugins/TransformImgOutLink.ts |  2 +-
 frontend/src/useful/plugin.ts               | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/plugins/TransformImgOutLink.ts b/frontend/src/plugins/TransformImgOutLink.ts
index 364d20a7..64781023 100644
--- a/frontend/src/plugins/TransformImgOutLink.ts
+++ b/frontend/src/plugins/TransformImgOutLink.ts
@@ -52,7 +52,7 @@ async function transformImgOutLink (img: HTMLImageElement) {
 const actionKeydown = 'transform-img-link'
 const actionClick = 'transform-img-link-by-click'
 
-export const plugin = {
+export default {
   name: 'transform-img-out-link',
   register: (ctx: Ctx) => {
     ctx.registerShortcutAction(actionKeydown, [CtrlCmd, Shift, 'l'])
diff --git a/frontend/src/useful/plugin.ts b/frontend/src/useful/plugin.ts
index 4c792d01..3adf8ca6 100644
--- a/frontend/src/useful/plugin.ts
+++ b/frontend/src/useful/plugin.ts
@@ -40,10 +40,16 @@ export const init = () => {
   logger.debug('init')
 
   const localPlugins = [
-    require('@/plugins/TransformImgOutLink').plugin
+    require('@/plugins/TransformImgOutLink')
   ]
 
-  localPlugins.forEach(register)
+  localPlugins.forEach((plugin) => {
+    if (plugin.__esModule && plugin.default) {
+      register(plugin.default)
+    } else {
+      register(plugin)
+    }
+  })
 }
 
 export const triggerHook = async (type: HookType, ...args: any[]) => {

From bfab83881e80212a0626bade3b4e5bab3792ac8d Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Fri, 26 Feb 2021 14:06:44 +0800
Subject: [PATCH 03/12] =?UTF-8?q?=E6=8F=92=E4=BB=B6=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |   2 +-
 frontend/src/components/Editor.vue            | 100 ++------
 frontend/src/components/MonacoEditor.vue      |  11 -
 frontend/src/components/Preview.vue           | 223 ++----------------
 frontend/src/components/TreeNode.vue          |  10 +-
 frontend/src/plugins/CodePlugin.ts            |  15 --
 frontend/src/plugins/LinkTargetPlugin.ts      |  13 -
 .../plugins/{AppletPlugin.ts => applet.ts}    |  21 +-
 ...ghtNumberPlugin.ts => code-line-number.ts} |  14 +-
 frontend/src/plugins/copy-text.ts             |  42 ++++
 .../plugins/{DrawioPlugin.ts => drawio.ts}    |  39 ++-
 .../plugins/{EChartsPlugin.ts => echarts.ts}  |  23 +-
 frontend/src/plugins/markdown-code.ts         |  20 ++
 frontend/src/plugins/markdown-link.ts         | 104 ++++++++
 ...eLinePlugin.ts => markdown-source-line.ts} |  23 +-
 .../plugins/{TocPlugin.ts => markdown-toc.ts} |  12 +-
 .../plugins/{MermaidPlugin.ts => mermaid.ts}  |  13 +-
 .../plugins/{MindMapPlugin.ts => mind-map.ts} |  26 +-
 .../{PlantumlPlugin.ts => plantuml.ts}        |  31 ++-
 .../src/plugins/{RunPlugin.ts => run-code.ts} |  11 +-
 frontend/src/plugins/switch-todo.ts           |  36 +++
 frontend/src/plugins/table-cell-edit.ts       | 116 +++++++++
 ...mgOutLink.ts => transform-img-out-link.ts} |   0
 frontend/src/useful/plugin.ts                 |  58 ++++-
 frontend/src/useful/startup.ts                |   7 +-
 frontend/src/views/Main.vue                   |   3 +-
 frontend/yarn.lock                            |  10 +-
 yarn.lock                                     |   5 +
 28 files changed, 589 insertions(+), 399 deletions(-)
 delete mode 100644 frontend/src/plugins/CodePlugin.ts
 delete mode 100644 frontend/src/plugins/LinkTargetPlugin.ts
 rename frontend/src/plugins/{AppletPlugin.ts => applet.ts} (85%)
 rename frontend/src/plugins/{HightLightNumberPlugin.ts => code-line-number.ts} (90%)
 create mode 100644 frontend/src/plugins/copy-text.ts
 rename frontend/src/plugins/{DrawioPlugin.ts => drawio.ts} (83%)
 rename frontend/src/plugins/{EChartsPlugin.ts => echarts.ts} (77%)
 create mode 100644 frontend/src/plugins/markdown-code.ts
 create mode 100644 frontend/src/plugins/markdown-link.ts
 rename frontend/src/plugins/{SourceLinePlugin.ts => markdown-source-line.ts} (55%)
 rename frontend/src/plugins/{TocPlugin.ts => markdown-toc.ts} (94%)
 rename frontend/src/plugins/{MermaidPlugin.ts => mermaid.ts} (78%)
 rename frontend/src/plugins/{MindMapPlugin.ts => mind-map.ts} (91%)
 rename frontend/src/plugins/{PlantumlPlugin.ts => plantuml.ts} (91%)
 rename frontend/src/plugins/{RunPlugin.ts => run-code.ts} (92%)
 create mode 100644 frontend/src/plugins/switch-todo.ts
 create mode 100644 frontend/src/plugins/table-cell-edit.ts
 rename frontend/src/plugins/{TransformImgOutLink.ts => transform-img-out-link.ts} (100%)

diff --git a/frontend/package.json b/frontend/package.json
index 9bac09b6..605169c6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,7 @@
     "github-markdown-css": "^4.0.0",
     "highlight.js": "^10.4.1",
     "katex": "^0.6.0",
-    "loadsh": "^0.0.4",
+    "lodash": "^4.17.21",
     "markdown-it": "^12.0.1",
     "markdown-it-attrs": "^3.0.3",
     "markdown-it-footnote": "^3.0.2",
diff --git a/frontend/src/components/Editor.vue b/frontend/src/components/Editor.vue
index a532f4ba..c69c6180 100644
--- a/frontend/src/components/Editor.vue
+++ b/frontend/src/components/Editor.vue
@@ -45,7 +45,6 @@ export default defineComponent({
     const getEditor = () => refEditor.value
     const revealLine = (line: number) => getEditor().revealLine(line)
     const revealLineInCenter = (line: number) => getEditor().revealLineInCenter(line)
-    const switchTodo = (line: number, checked: boolean) => getEditor().switchTodo(line, checked)
     const toUri = (file: any) => File.toUri(file)
 
     async function inputPassword (title: string, filename: string) {
@@ -253,100 +252,35 @@ export default defineComponent({
 
     const resize = () => nextTick(() => getEditor().resize())
     const insert = (text?: string) => getEditor().insert(text)
+
     const replaceValue = (value?: { search: string; replace: string }) => {
       if (value) {
         getEditor().replaceValue(value.search, value.replace)
       }
     }
 
-    const toggleWrap = () => getEditor().toggleWrap()
-
-    const editTableCell = async (params?: { start: number; end: number; cellIndex: number }) => {
-      if (!params) {
-        return
+    const replaceLine = (params?: { line: number; value: string }) => {
+      if (params) {
+        getEditor().replaceLine(params.line, params.value)
       }
-
-      const { start, end, cellIndex } = params
-      if (end - start !== 1) {
-        toast.show('warning', '暂只支持编辑单行文本')
-        return
-      }
-
-      const escapedSplit = (str: string) => {
-        const result = []
-        const max = str.length
-        let pos = 0
-        let ch = str.charCodeAt(pos)
-        let isEscaped = false
-        let lastPos = 0
-        let current = ''
-
-        while (pos < max) {
-          if (ch === 0x7c/* | */) {
-            if (!isEscaped) {
-              // pipe separating cells, '|'
-              result.push(current + str.substring(lastPos, pos))
-              current = ''
-              lastPos = pos + 1
-            } else {
-              // escaped pipe, '\|'
-              current += str.substring(lastPos, pos - 1)
-              lastPos = pos
-            }
-          }
-
-          isEscaped = (ch === 0x5c/* \ */)
-          pos++
-
-          ch = str.charCodeAt(pos)
-        }
-
-        result.push(current + str.substring(lastPos))
-
-        if (result.length && result[0] === '') result.shift()
-        if (result.length && result[result.length - 1] === '') result.pop()
-
-        return result
-      }
-
-      const text = getEditor().getLineContent(start).trim()
-      const columns = escapedSplit(text)
-      const cellText = columns[cellIndex]
-
-      if (typeof cellText !== 'string') {
-        toast.show('warning', '编辑错误')
-        return
-      }
-
-      let value = await modal.input({
-        title: '编辑单元格',
-        type: 'textarea',
-        value: cellText,
-        modalWidth: '600px',
-        hint: '单元格内容',
-      })
-      if (typeof value !== 'string') {
-        toast.show('warning', '取消编辑')
-        return
-      }
-
-      if (!value.startsWith(' ') && cellIndex > 0) value = ' ' + value
-      if (!value.endsWith(' ') && cellIndex < columns.length - 1) value += ' '
-      columns[cellIndex] = value.replace(/\|/g, '\\|').replace(/\n/g, ' ')
-
-      let content = columns.join('|').trim()
-      if (text.startsWith('|')) content = '| ' + content
-      if (text.endsWith('|')) content += ' |'
-
-      getEditor().replaceLine(start, content)
     }
 
+    const getLine = (params?: {line: number; callback?: (value: string) => void}) => {
+      if (params) {
+        const { line, callback } = params
+        callback && callback(getEditor().getLineContent(line))
+      }
+    }
+
+    const toggleWrap = () => getEditor().toggleWrap()
+
     onMounted(() => {
       bus.on('resize', resize)
       bus.on('editor-insert-value', insert)
       bus.on('editor-replace-value', replaceValue)
+      bus.on('editor-get-line', getLine)
+      bus.on('editor-replace-line', replaceLine)
       bus.on('editor-toggle-wrap', toggleWrap)
-      bus.on('editor-edit-table-cell', editTableCell)
       bus.on('file-new', createFile as any)
       restartTimer()
     })
@@ -355,16 +289,16 @@ export default defineComponent({
       bus.off('resize', resize)
       bus.off('editor-insert-value', insert)
       bus.off('editor-replace-value', replaceValue)
+      bus.off('editor-get-line', getLine)
+      bus.off('editor-replace-line', replaceLine)
       bus.off('editor-toggle-wrap', toggleWrap)
       bus.off('file-new', createFile as any)
-      bus.off('editor-edit-table-cell', editTableCell)
     })
 
     return {
       refEditor,
       revealLine,
       revealLineInCenter,
-      switchTodo,
       setCurrentValue,
       syncScrollView,
       pasteImg,
diff --git a/frontend/src/components/MonacoEditor.vue b/frontend/src/components/MonacoEditor.vue
index ae3d492d..67d2b867 100644
--- a/frontend/src/components/MonacoEditor.vue
+++ b/frontend/src/components/MonacoEditor.vue
@@ -204,16 +204,6 @@ export default defineComponent({
       return getEditor().getModel()!!.getLineContent(line)
     }
 
-    function switchTodo (line: number, checked: boolean) {
-      if (checked) {
-        const value = getLineContent(line).replace('[ ]', `[x] ~~${dayjs().format('YYYY-MM-DD HH:mm')}~~`)
-        replaceLine(line, value)
-      } else {
-        const value = getLineContent(line).replace(/(\[x\] ~~[\d-: ]+~~|\[x\])/, '[ ]')
-        replaceLine(line, value)
-      }
-    }
-
     function getValue () {
       return getEditor().getModel()!!.getValue(getMonaco().editor.DefaultEndOfLine.LF)
     }
@@ -323,7 +313,6 @@ export default defineComponent({
       revealLine,
       revealLineInCenter,
       setScrollToTop,
-      switchTodo,
       replaceValue,
       replaceLine,
       toggleWrap,
diff --git a/frontend/src/components/Preview.vue b/frontend/src/components/Preview.vue
index a0c4516e..b0c13016 100644
--- a/frontend/src/components/Preview.vue
+++ b/frontend/src/components/Preview.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import loadsh from 'lodash'
+import lodash from 'lodash'
 import { useStore } from 'vuex'
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 import Markdown from 'markdown-it'
@@ -49,30 +49,13 @@ import MultimdTable from 'markdown-it-multimd-table'
 import Footnote from 'markdown-it-footnote'
 import Highlight from 'highlight.js'
 
-import HighlightLineNumber from '../plugins/HightLightNumberPlugin'
-import MarkdownItToc from '../plugins/TocPlugin'
-import MarkdownItECharts from '../plugins/EChartsPlugin'
-import RunPlugin from '../plugins/RunPlugin'
-import AppletPlugin from '../plugins/AppletPlugin'
-import SourceLinePlugin from '../plugins/SourceLinePlugin'
-import LinkTargetPlugin from '../plugins/LinkTargetPlugin'
-import DrawioPlugin from '../plugins/DrawioPlugin'
-import PlantumlPlugin from '../plugins/PlantumlPlugin'
-import MermaidPlugin from '../plugins/MermaidPlugin'
-import CodePlugin from '../plugins/CodePlugin'
-import MindMapPlugin from '../plugins/MindMapPlugin'
 import file from '../useful/file'
-import env from '../useful/env'
-import { encodeMarkdownLink } from '../useful/utils'
-import { triggerHook } from '../useful/plugin'
+import { getMarkdownItPlugins, triggerHook } from '../useful/plugin'
+import { useBus } from '../useful/bus'
 
 import 'github-markdown-css/github-markdown.css'
 import 'highlight.js/styles/atom-one-dark.css'
 import 'katex/dist/katex.min.css'
-import { useBus } from '../useful/bus'
-import { hasCtrlCmd } from '../useful/shortcut'
-
-HighlightLineNumber.addStyles()
 
 const markdown = Markdown({
   linkify: true,
@@ -89,21 +72,14 @@ const markdown = Markdown({
   }
 })
   .use(TaskLists, { enabled: true })
-  .use(PlantumlPlugin)
-  .use(RunPlugin)
-  .use(AppletPlugin)
   .use(katex)
-  .use(SourceLinePlugin)
   .use(MarkdownItAttrs)
-  .use(LinkTargetPlugin)
   .use(Footnote)
-  .use(DrawioPlugin)
   .use(MultimdTable, { multiline: true })
-  .use(MarkdownItToc)
-  .use(MarkdownItECharts)
-  .use(MermaidPlugin)
-  .use(CodePlugin)
-  .use(MindMapPlugin)
+
+getMarkdownItPlugins().forEach(({ plugin, params }) => {
+  markdown.use(plugin, params)
+})
 
 export default defineComponent({
   name: 'xview',
@@ -120,6 +96,8 @@ export default defineComponent({
     const refView = ref<HTMLElement | null>(null)
     const refConvertForm = ref<HTMLFormElement | null>(null)
 
+    const getViewDom = () => refView.value
+
     const width = ref(1024)
     const height = ref(1024)
     const heads = ref<{
@@ -138,35 +116,6 @@ export default defineComponent({
       height.value = refViewWrapper.value!!.clientHeight
     }
 
-    function updatePlantuml () {
-      const nodes = refView.value!!.querySelectorAll<HTMLImageElement>('img[data-plantuml-src]')
-      nodes.forEach(el => {
-        el.src = el.dataset.plantumlSrc || ''
-      })
-    }
-
-    function runAppletScript () {
-      const nodes = refView.value!!.querySelectorAll<HTMLElement>('.applet[data-code]')
-      nodes.forEach(AppletPlugin.runScript)
-    }
-
-    function renderMindMap () {
-      const nodes = refView.value!!.querySelectorAll<HTMLElement>('.mindmap-list[data-mindmap-source]')
-      nodes.forEach(MindMapPlugin.render)
-    }
-
-    const updatePlantumlDebounce = loadsh.debounce(() => {
-      updatePlantuml()
-    }, 3000, { leading: true })
-
-    const runAppletScriptDebounce = loadsh.debounce(() => {
-      runAppletScript()
-    }, 1000, { leading: true })
-
-    const renderMindmapDebounce = loadsh.debounce(() => {
-      renderMindMap()
-    }, 1000, { leading: true })
-
     function replaceRelativeLink (md: string) {
       if (!fileRepo.value) {
         return md
@@ -208,22 +157,6 @@ export default defineComponent({
       })
     }
 
-    function initDrawio () {
-      if (!refView.value) {
-        return
-      }
-
-      const nodes = refView.value!!.querySelectorAll<HTMLIFrameElement>('.drawio[data-url]')
-      nodes.forEach(el => {
-        const url = el.dataset.url
-        if (url) {
-          DrawioPlugin.load(el, url)
-        } else {
-          DrawioPlugin.load(el)
-        }
-      })
-    }
-
     function updateOutline () {
       const tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
       const nodes = refView.value!!.querySelectorAll<HTMLHeadElement>(tags.join(','))
@@ -242,14 +175,7 @@ export default defineComponent({
       todoDoneCount.value = refView.value!!.querySelectorAll('input[type=checkbox][checked]').length
     }
 
-    function hightCode () {
-      const nodes = refView.value!!.querySelectorAll<HTMLImageElement>('code[class^="language-"]')
-      nodes.forEach(el => {
-        HighlightLineNumber.lineNumbersBlock(el)
-      })
-    }
-
-    const render = loadsh.debounce(() => {
+    const render = lodash.debounce(() => {
       // 编辑非 markdown 文件预览直接显示代码
       const content = (filePath.value || '').endsWith('.md')
         ? currentContent.value
@@ -257,23 +183,15 @@ export default defineComponent({
 
       const source = replaceRelativeLink(content)
       refView.value!!.innerHTML = markdown.render(source, { source })
-      runAppletScriptDebounce()
-      renderMindmapDebounce()
-      initDrawio()
       updateOutline()
       updateTodoCount()
-      updatePlantumlDebounce()
-      hightCode()
-      MarkdownItECharts.update()
-      MermaidPlugin.update()
 
-      // 渲染完成后触发渲染完成事件
-      nextTick(() => bus.emit('preview-rendered'))
+      triggerHook('ON_VIEW_RENDER', { getViewDom })
+      nextTick(() => triggerHook('ON_VIEW_RENDERED', { getViewDom }))
     }, 500, { leading: true })
 
     async function keydownHandler (e: KeyboardEvent) {
-      const getRefview = () => refView.value
-      triggerHook('ON_VIEW_KEY_DOWN', e, getRefview())
+      triggerHook('ON_VIEW_KEY_DOWN', e, getViewDom())
     }
 
     function handleScroll (e: any) {
@@ -284,10 +202,6 @@ export default defineComponent({
       emit('sync-scroll', line)
     }
 
-    function switchTodo (line: number, checked: boolean) {
-      emit('switch-todo', line, checked)
-    }
-
     function scrollToTop () {
       refViewWrapper.value!!.scrollTo(0, 0)
       syncScroll(1)
@@ -298,103 +212,6 @@ export default defineComponent({
 
       const target = e.target as HTMLElement
 
-      const preventEvent = () => {
-        e.preventDefault()
-        e.stopPropagation()
-      }
-
-      const handleLink = (link: HTMLAnchorElement) => {
-        // 系统中打开附件
-        if (link.classList.contains('open')) {
-          fetch(link.href.replace('api/attachment', 'api/open'))
-          return preventEvent()
-        }
-
-        const href = link.getAttribute('href') || ''
-
-        if (/^(http:|https:|ftp:)\/\//i.test(href)) { // 处理外链
-          // Electron 中打开外链
-          if (env.isElectron) {
-            env.require && env.require('opn')(link.href)
-            preventEvent()
-          }
-        } else { // 处理相对链接
-          if (/(\.md$|\.md#)/.test(href)) { // 处理打开相对 md 文件
-            const tmp = decodeURI(href).split('#')
-
-            let path = tmp[0]
-            if (path.startsWith('.')) { // 将相对路径转换为绝对路径
-              path = file.dirname(filePath.value || '') + path.replace('.', '')
-            }
-
-            // 打开文件
-            store.commit('setCurrentFile', {
-              path,
-              name: file.basename(path),
-              repo: fileRepo.value,
-              type: 'file'
-            })
-
-            // 跳转锚点
-            const hash = tmp.slice(1).join('#')
-            if (hash) {
-              bus.once('preview-rendered', () => {
-                const el = document.getElementById(hash) ||
-                  document.getElementById(encodeURIComponent(hash))
-
-                if (el) {
-                  // 如果是标题的话，也顺便将编辑器滚动到可视区域
-                  if (hash.startsWith('h-')) {
-                    el.click()
-                  }
-                  el.scrollIntoView()
-                }
-              })
-            }
-
-            preventEvent()
-          } else if (href && href.startsWith('#')) { // 处理 TOC 跳转
-            const el = document.getElementById(href.replace(/^#/, ''))
-            if (el) {
-              el.scrollIntoView()
-            }
-            preventEvent()
-          }
-        }
-      }
-
-      if (target.tagName === 'A') {
-        handleLink(target as HTMLAnchorElement)
-      }
-
-      // 复制标题链接
-      if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].indexOf(target.tagName) > -1 && target.id && hasCtrlCmd(e)) {
-        bus.emit('copy-text', encodeMarkdownLink(filePath.value) + '#' + encodeMarkdownLink(decodeURIComponent(target.id)))
-        return preventEvent()
-      }
-
-      // 复制内容
-      if (target.classList.contains('copy-inner-text')) {
-        bus.emit('copy-text', target.innerText)
-      }
-
-      if (target.tagName === 'INPUT' && target.parentElement!!.classList.contains('source-line')) {
-        switchTodo(parseInt(target.parentElement!!.dataset.sourceLine || '0'), (target as HTMLInputElement).checked)
-        e.preventDefault()
-        e.stopPropagation()
-        return
-      }
-
-      if (target.tagName === 'TD' && target.classList.contains('yank-td') && hasCtrlCmd(e)) {
-        const start = parseInt(target.dataset.sourceLine || '0')
-        const end = parseInt(target.dataset.sourceLineEnd || '0')
-        const td = target as HTMLTableDataCellElement
-        const cellIndex = [...td.parentElement!.children as any]
-          .slice(0, td.cellIndex)
-          .reduce((prev, current) => prev + current.colSpan, 0)
-        bus.emit('editor-edit-table-cell', { start, end, cellIndex })
-      }
-
       if (target.classList.contains('source-line') && window.getSelection()!!.toString().length < 1) {
         syncScroll(parseInt(target.dataset.sourceLine || '0'))
         e.stopPropagation()
@@ -419,7 +236,7 @@ export default defineComponent({
     }
 
     function convertFile (type: string) {
-      MarkdownItECharts.preparePrint()
+      triggerHook('ON_VIEW_BEFORE_CONVERT', { getViewDom })
 
       let baseUrl = location.origin + location.pathname.substring(0, location.pathname.lastIndexOf('/')) + '/'
 
@@ -433,7 +250,6 @@ export default defineComponent({
         html: refView.value!!.outerHTML.replace(/src="api/g, `src="${baseUrl}api`),
         type
       }
-      MarkdownItECharts.update()
       setTimeout(() => {
         refConvertForm.value!!.submit()
       }, 300)
@@ -444,11 +260,8 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      render()
-      setTimeout(() => {
-        updatePlantuml()
-      }, 100)
-
+      nextTick(render)
+      triggerHook('ON_VIEW_MOUNTED', { getViewDom })
       window.addEventListener('keydown', keydownHandler, true)
       bus.on('resize', resizeHandler)
       bus.on('view-rerender', render)
@@ -465,9 +278,7 @@ export default defineComponent({
     watch(filePath, () => {
       // 切换文件后，开启自动预览
       store.commit('setAutoPreview', true)
-      setTimeout(() => {
-        updatePlantuml()
-      }, 100)
+      triggerHook('ON_VIEW_FILE_CHANGE', { getViewDom })
     })
 
     return {
diff --git a/frontend/src/components/TreeNode.vue b/frontend/src/components/TreeNode.vue
index b4d38299..9425ea2e 100644
--- a/frontend/src/components/TreeNode.vue
+++ b/frontend/src/components/TreeNode.vue
@@ -38,10 +38,10 @@ import { useToast } from '../useful/toast'
 import { useModal } from '../useful/modal'
 import { useContextMenu } from '../useful/context-menu'
 import File from '../useful/file'
-import { Components } from '../types'
 import Extensions from '../useful/extensions'
+import { triggerHook } from '../useful/plugin'
+import { Components } from '../types'
 import SvgIcon from './SvgIcon.vue'
-import DrawioPlugin from '../plugins/DrawioPlugin'
 
 export default defineComponent({
   name: 'tree-node',
@@ -139,14 +139,12 @@ export default defineComponent({
       }
     }
 
-    function select (item: any) {
+    async function select (item: any) {
       if (item.type !== 'dir') {
         if (Extensions.supported(item.name)) {
           store.commit('setCurrentFile', item)
         } else {
-          if (item.path.toLowerCase().endsWith('.drawio')) {
-            DrawioPlugin.open(item)
-          } else {
+          if (!(await triggerHook('ON_TREE_NODE_SELECT', item))) {
             File.openInOS(props.item)
           }
         }
diff --git a/frontend/src/plugins/CodePlugin.ts b/frontend/src/plugins/CodePlugin.ts
deleted file mode 100644
index 7d96bf36..00000000
--- a/frontend/src/plugins/CodePlugin.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { getKeyLabel } from '@/useful/shortcut'
-import Markdown from 'markdown-it'
-
-export default (md: Markdown) => {
-  const Fun = (fn: Function) => (tokens: any, idx: any, options: any, env: any, slf: any) => {
-    if (tokens[idx].attrIndex('title') < 0) {
-      tokens[idx].attrJoin('class', 'copy-inner-text')
-      tokens[idx].attrPush(['title', getKeyLabel('CtrlCmd') + ' + 单击复制'])
-    }
-
-    return (fn)(tokens, idx, options, env, slf)
-  }
-
-  md.renderer.rules.code_inline = Fun(md.renderer.rules.code_inline!!.bind(md.renderer.rules))
-}
diff --git a/frontend/src/plugins/LinkTargetPlugin.ts b/frontend/src/plugins/LinkTargetPlugin.ts
deleted file mode 100644
index 5e250b97..00000000
--- a/frontend/src/plugins/LinkTargetPlugin.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Markdown from 'markdown-it'
-
-const LinkTargetPlugin = (md: Markdown) => {
-  md.renderer.rules.link_open = (tokens, idx, options, _, slf) => {
-    if (tokens[idx].attrIndex('target') < 0) {
-      tokens[idx].attrPush(['target', '_blank'])
-    }
-
-    return slf.renderToken(tokens, idx, options)
-  }
-}
-
-export default LinkTargetPlugin
diff --git a/frontend/src/plugins/AppletPlugin.ts b/frontend/src/plugins/applet.ts
similarity index 85%
rename from frontend/src/plugins/AppletPlugin.ts
rename to frontend/src/plugins/applet.ts
index 1a9562e4..5abe8137 100644
--- a/frontend/src/plugins/AppletPlugin.ts
+++ b/frontend/src/plugins/applet.ts
@@ -1,7 +1,9 @@
 import CryptoJS from 'crypto-js'
+import lodash from 'lodash'
 import dayjs from 'dayjs'
 import Markdown from 'markdown-it'
 import { useBus } from '@/useful/bus'
+import { Plugin } from '@/useful/plugin'
 
 const RunPlugin = (md: Markdown) => {
   const temp = md.renderer.rules.fence!!.bind(md.renderer.rules)
@@ -33,7 +35,7 @@ const RunPlugin = (md: Markdown) => {
   }
 }
 
-RunPlugin.runScript = (el: HTMLElement) => {
+const runScript = (el: HTMLElement) => {
   const appletId = el.id
   const appletCode = el.dataset.code
   if (!appletCode) {
@@ -44,7 +46,7 @@ RunPlugin.runScript = (el: HTMLElement) => {
   iframe.srcdoc = `
     <style>
       ::selection {
-        background: #d3d3d3;
+        background: #515455;
       }
 
       ::-webkit-scrollbar {
@@ -140,4 +142,17 @@ RunPlugin.runScript = (el: HTMLElement) => {
   el.appendChild(iframe)
 }
 
-export default RunPlugin
+export default {
+  name: 'applet',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(RunPlugin)
+
+    function runAppletScript ({ getViewDom }: any) {
+      const refView: HTMLElement = getViewDom()
+      const nodes = refView.querySelectorAll<HTMLElement>('.applet[data-code]')
+      nodes.forEach(runScript)
+    }
+
+    ctx.registerHook('ON_VIEW_RENDER', lodash.debounce(runAppletScript, 1000, { leading: true }))
+  }
+} as Plugin
diff --git a/frontend/src/plugins/HightLightNumberPlugin.ts b/frontend/src/plugins/code-line-number.ts
similarity index 90%
rename from frontend/src/plugins/HightLightNumberPlugin.ts
rename to frontend/src/plugins/code-line-number.ts
index e3340854..dc103b1e 100644
--- a/frontend/src/plugins/HightLightNumberPlugin.ts
+++ b/frontend/src/plugins/code-line-number.ts
@@ -2,6 +2,8 @@
 
 // https://github.com/wcoder/highlightjs-line-numbers.js
 
+import { Plugin } from '@/useful/plugin'
+
 const TABLE_NAME = 'hljs-ln'
 const LINE_NAME = 'hljs-ln-line'
 const CODE_BLOCK_NAME = 'hljs-ln-code'
@@ -149,4 +151,14 @@ function format (format: string, args: any) {
   })
 }
 
-export default { addStyles, lineNumbersBlock }
+export default {
+  name: 'markdown-toc',
+  register: ctx => {
+    ctx.registerHook('ON_STARTUP', addStyles)
+    ctx.registerHook('ON_VIEW_RENDER', ({ getViewDom }) => {
+      const refView: HTMLElement = getViewDom()
+      const nodes = refView.querySelectorAll<HTMLImageElement>('code[class^="language-"]')
+      nodes.forEach(lineNumbersBlock)
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/copy-text.ts b/frontend/src/plugins/copy-text.ts
new file mode 100644
index 00000000..36ba3330
--- /dev/null
+++ b/frontend/src/plugins/copy-text.ts
@@ -0,0 +1,42 @@
+import { Plugin, Ctx } from '@/useful/plugin'
+import { hasCtrlCmd } from '@/useful/shortcut'
+import { encodeMarkdownLink } from '@/useful/utils'
+import { useBus } from '@/useful/bus'
+import { copyText } from '@/useful/copy-text'
+import store from '@/store'
+
+export default {
+  name: 'copy-text',
+  register: (ctx: Ctx) => {
+    ctx.registerHook('ON_STARTUP', () => {
+      const bus = useBus()
+      bus.on('copy-text', copyText)
+    })
+
+    ctx.registerHook('ON_VIEW_ELEMENT_CLICK', async (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const bus = useBus()
+
+      const preventEvent = () => {
+        e.preventDefault()
+        e.stopPropagation()
+        return true
+      }
+
+      // 复制标题链接
+      if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].indexOf(target.tagName) > -1 && target.id && hasCtrlCmd(e)) {
+        const { currentFile } = store.state
+        bus.emit('copy-text', encodeMarkdownLink(currentFile.path) + '#' + encodeMarkdownLink(decodeURIComponent(target.id)))
+        return preventEvent()
+      }
+
+      // 复制内容
+      if (target.classList.contains('copy-inner-text')) {
+        bus.emit('copy-text', target.innerText)
+        return preventEvent()
+      }
+
+      return false
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/DrawioPlugin.ts b/frontend/src/plugins/drawio.ts
similarity index 83%
rename from frontend/src/plugins/DrawioPlugin.ts
rename to frontend/src/plugins/drawio.ts
index 990f4b15..d88851d5 100644
--- a/frontend/src/plugins/DrawioPlugin.ts
+++ b/frontend/src/plugins/drawio.ts
@@ -1,9 +1,10 @@
 import Markdown from 'markdown-it'
+import { Plugin } from '@/useful/plugin'
 import file from '@/useful/file'
 import { useBus } from '@/useful/bus'
 import { openInNewWindow } from '@/useful/utils'
 
-const Plugin = (md: Markdown) => {
+const MarkdownItPlugin = (md: Markdown) => {
   const renderHtml = ({ url, content }: any) => {
     const iframe = document.createElement('iframe')
     iframe.className = 'drawio'
@@ -119,7 +120,7 @@ const buildSrcdoc = async ({ repo, path, content, url }: F) => {
   `
 }
 
-Plugin.load = async (el: HTMLIFrameElement, url?: string) => {
+const load = async (el: HTMLIFrameElement, url?: string) => {
   const bus = useBus()
   const content = el.dataset.content || ''
 
@@ -154,9 +155,33 @@ Plugin.load = async (el: HTMLIFrameElement, url?: string) => {
   el.parentElement!!.appendChild(action)
 }
 
-Plugin.open = async (file: F) => {
-  const srcdoc = await buildSrcdoc(file)
-  openInNewWindow(srcdoc)
-}
+export default {
+  name: 'drawio',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(MarkdownItPlugin)
 
-export default Plugin
+    ctx.registerHook('ON_VIEW_RENDER', ({ getViewDom }) => {
+      const refView: HTMLElement = getViewDom()
+      const nodes = refView.querySelectorAll<HTMLIFrameElement>('.drawio[data-url]')
+      nodes.forEach(el => {
+        const url = el.dataset.url
+        if (url) {
+          load(el, url)
+        } else {
+          load(el)
+        }
+      })
+    })
+
+    ctx.registerHook('ON_TREE_NODE_SELECT', async (item: any) => {
+      if (item.path.toLowerCase().endsWith('.drawio')) {
+        const srcdoc = await buildSrcdoc(item)
+        openInNewWindow(srcdoc)
+
+        return true
+      }
+
+      return false
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/EChartsPlugin.ts b/frontend/src/plugins/echarts.ts
similarity index 77%
rename from frontend/src/plugins/EChartsPlugin.ts
rename to frontend/src/plugins/echarts.ts
index ae588c0e..8217cf99 100644
--- a/frontend/src/plugins/EChartsPlugin.ts
+++ b/frontend/src/plugins/echarts.ts
@@ -1,6 +1,7 @@
 import echarts from 'echarts'
 import CryptoJS from 'crypto-js'
 import Markdown from 'markdown-it'
+import { Plugin } from '@/useful/plugin'
 
 const renderHtml = (code: string) => {
   const id = `echart-${CryptoJS.MD5(code).toString()}-${Math.random().toString(36).substr(2)}`
@@ -24,7 +25,7 @@ const EChartsPlugin = (md: Markdown) => {
 
 let charts: {[key: string]: any} = {}
 
-EChartsPlugin.update = (theme = 'dark', animation: boolean | undefined = undefined, renderImg = false) => {
+const update = (theme = 'dark', animation: boolean | undefined = undefined, renderImg = false) => {
   Object.values(charts).forEach(x => x.chart.dispose())
   charts = {}
 
@@ -60,8 +61,8 @@ EChartsPlugin.update = (theme = 'dark', animation: boolean | undefined = undefin
   }
 }
 
-EChartsPlugin.preparePrint = () => {
-  EChartsPlugin.update('light', false, true)
+const preparePrint = () => {
+  update('light', false, true)
 
   for (const ele of document.getElementsByClassName('echarts')) {
     while (ele.firstChild) {
@@ -81,7 +82,19 @@ window.addEventListener('resize', () => {
 })
 
 window.addEventListener('beforeprint', () => {
-  EChartsPlugin.update('light', false)
+  update('light', false)
 })
 
-export default EChartsPlugin
+export default {
+  name: 'markdown-toc',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(EChartsPlugin)
+    ctx.registerHook('ON_VIEW_RENDER', () => {
+      update()
+    })
+    ctx.registerHook('ON_VIEW_BEFORE_CONVERT', () => {
+      preparePrint() // 转换成图片形式，设置主题
+      setTimeout(() => update(), 0) // 恢复
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/markdown-code.ts b/frontend/src/plugins/markdown-code.ts
new file mode 100644
index 00000000..6490c0b8
--- /dev/null
+++ b/frontend/src/plugins/markdown-code.ts
@@ -0,0 +1,20 @@
+import { getKeyLabel } from '@/useful/shortcut'
+import { Plugin, Ctx } from '@/useful/plugin'
+
+export default {
+  name: 'markdown-code',
+  register: (ctx: Ctx) => {
+    ctx.registerMarkdownItPlugin(md => {
+      const Fun = (fn: Function) => (tokens: any, idx: any, options: any, env: any, slf: any) => {
+        if (tokens[idx].attrIndex('title') < 0) {
+          tokens[idx].attrJoin('class', 'copy-inner-text')
+          tokens[idx].attrPush(['title', getKeyLabel('CtrlCmd') + ' + 单击复制'])
+        }
+
+        return (fn)(tokens, idx, options, env, slf)
+      }
+
+      md.renderer.rules.code_inline = Fun(md.renderer.rules.code_inline!!.bind(md.renderer.rules))
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/markdown-link.ts b/frontend/src/plugins/markdown-link.ts
new file mode 100644
index 00000000..f6560747
--- /dev/null
+++ b/frontend/src/plugins/markdown-link.ts
@@ -0,0 +1,104 @@
+import { Plugin, Ctx } from '@/useful/plugin'
+import store from '@/store'
+import env from '@/useful/env'
+import file from '@/useful/file'
+
+const handleLink = (link: HTMLAnchorElement, ctx: Ctx) => {
+  const { currentFile } = store.state
+  const { repo: fileRepo, path: filePath } = currentFile
+
+  // 系统中打开附件
+  if (link.classList.contains('open')) {
+    fetch(link.href.replace('api/attachment', 'api/open'))
+    return true
+  }
+
+  const href = link.getAttribute('href') || ''
+
+  if (/^(http:|https:|ftp:)\/\//i.test(href)) { // 处理外链
+    // Electron 中打开外链
+    if (env.isElectron) {
+      env.require && env.require('opn')(link.href)
+      return true
+    }
+  } else { // 处理相对链接
+    if (/(\.md$|\.md#)/.test(href)) { // 处理打开相对 md 文件
+      const tmp = decodeURI(href).split('#')
+
+      let path = tmp[0]
+      if (path.startsWith('.')) { // 将相对路径转换为绝对路径
+        path = file.dirname(filePath || '') + path.replace('.', '')
+      }
+
+      // 打开文件
+      store.commit('setCurrentFile', {
+        path,
+        name: file.basename(path),
+        repo: fileRepo,
+        type: 'file'
+      })
+
+      // 跳转锚点
+      const hash = tmp.slice(1).join('#')
+      if (hash) {
+        ctx.registerHook('ON_VIEW_RENDERED', () => {
+          const el = document.getElementById(hash) ||
+            document.getElementById(encodeURIComponent(hash))
+
+          if (el) {
+            // 如果是标题的话，也顺便将编辑器滚动到可视区域
+            if (hash.startsWith('h-')) {
+              el.click()
+            }
+            el.scrollIntoView()
+          }
+        }, true)
+      }
+
+      return true
+    } else if (href && href.startsWith('#')) { // 处理 TOC 跳转
+      const el = document.getElementById(href.replace(/^#/, ''))
+      if (el) {
+        el.scrollIntoView()
+      }
+      return true
+    }
+
+    return false
+  }
+}
+
+export default {
+  name: 'markdown-link',
+  register: (ctx: Ctx) => {
+    ctx.registerHook('ON_VIEW_ELEMENT_CLICK', async (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+
+      const preventEvent = () => {
+        e.preventDefault()
+        e.stopPropagation()
+        return true
+      }
+
+      if (target.tagName === 'A' || target.parentElement?.tagName === 'A') {
+        if (handleLink(target as HTMLAnchorElement, ctx)) {
+          return preventEvent()
+        } else {
+          return true
+        }
+      }
+
+      return false
+    })
+
+    ctx.registerMarkdownItPlugin(md => {
+      md.renderer.rules.link_open = (tokens, idx, options, _, slf) => {
+        if (tokens[idx].attrIndex('target') < 0) {
+          tokens[idx].attrPush(['target', '_blank'])
+        }
+
+        return slf.renderToken(tokens, idx, options)
+      }
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/SourceLinePlugin.ts b/frontend/src/plugins/markdown-source-line.ts
similarity index 55%
rename from frontend/src/plugins/SourceLinePlugin.ts
rename to frontend/src/plugins/markdown-source-line.ts
index f186f6a5..5bef7ec9 100644
--- a/frontend/src/plugins/SourceLinePlugin.ts
+++ b/frontend/src/plugins/markdown-source-line.ts
@@ -1,4 +1,4 @@
-import Markdown from 'markdown-it'
+import { Plugin } from '@/useful/plugin'
 import Renderer from 'markdown-it/lib/renderer'
 
 const buildFunction = (className: string): Renderer.RenderRule => {
@@ -16,12 +16,15 @@ const buildFunction = (className: string): Renderer.RenderRule => {
 
 export const injectLineNumbers = buildFunction('source-line')
 
-const SourceLinePlugin = (md: Markdown) => {
-  md.renderer.rules.paragraph_open = injectLineNumbers
-  md.renderer.rules.heading_open = injectLineNumbers
-  md.renderer.rules.list_item_open = injectLineNumbers
-  md.renderer.rules.table_open = injectLineNumbers
-  md.renderer.rules.td_open = buildFunction('yank-td')
-}
-
-export default SourceLinePlugin
+export default {
+  name: 'markdown-source-line',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(md => {
+      md.renderer.rules.paragraph_open = injectLineNumbers
+      md.renderer.rules.heading_open = injectLineNumbers
+      md.renderer.rules.list_item_open = injectLineNumbers
+      md.renderer.rules.table_open = injectLineNumbers
+      md.renderer.rules.td_open = buildFunction('yank-td')
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/TocPlugin.ts b/frontend/src/plugins/markdown-toc.ts
similarity index 94%
rename from frontend/src/plugins/TocPlugin.ts
rename to frontend/src/plugins/markdown-toc.ts
index 99d9cb2c..be447bb4 100644
--- a/frontend/src/plugins/TocPlugin.ts
+++ b/frontend/src/plugins/markdown-toc.ts
@@ -2,8 +2,9 @@
 
 import Markdown from 'markdown-it'
 import { getKeyLabel } from '@/useful/shortcut'
+import { Plugin } from '@/useful/plugin'
 
-import { injectLineNumbers } from './SourceLinePlugin'
+import { injectLineNumbers } from './markdown-source-line'
 
 const slugify = (s: string) => 'h-' + encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, '-'))
 
@@ -19,7 +20,7 @@ const defaults = {
   containerFooterHtml: undefined
 }
 
-export default (md: Markdown, o: any) => {
+const MarkdownItPlugin = (md: Markdown, o: any) => {
   const options = Object.assign({}, defaults, o)
   const tocRegexp = options.markerPattern
   let gstate: any
@@ -201,3 +202,10 @@ export default (md: Markdown, o: any) => {
   // Insert TOC
   md.inline.ruler.after('emphasis', 'toc', toc)
 }
+
+export default {
+  name: 'markdown-toc',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(MarkdownItPlugin)
+  }
+} as Plugin
diff --git a/frontend/src/plugins/MermaidPlugin.ts b/frontend/src/plugins/mermaid.ts
similarity index 78%
rename from frontend/src/plugins/MermaidPlugin.ts
rename to frontend/src/plugins/mermaid.ts
index 74910d32..8fb7b601 100644
--- a/frontend/src/plugins/MermaidPlugin.ts
+++ b/frontend/src/plugins/mermaid.ts
@@ -1,5 +1,6 @@
 import Markdown from 'markdown-it'
 import mermaid from 'mermaid'
+import { Plugin } from '@/useful/plugin'
 
 const mermaidChart = (code: string) => {
   try {
@@ -28,8 +29,10 @@ const MermaidPlugin = (md: Markdown) => {
   }
 }
 
-MermaidPlugin.update = () => {
-  mermaid.init('.mermaid')
-}
-
-export default MermaidPlugin
+export default {
+  name: 'mermaid',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(MermaidPlugin)
+    ctx.registerHook('ON_VIEW_RENDER', () => mermaid.init('.mermaid'))
+  }
+} as Plugin
diff --git a/frontend/src/plugins/MindMapPlugin.ts b/frontend/src/plugins/mind-map.ts
similarity index 91%
rename from frontend/src/plugins/MindMapPlugin.ts
rename to frontend/src/plugins/mind-map.ts
index 0b7297f4..a1e93c3a 100644
--- a/frontend/src/plugins/MindMapPlugin.ts
+++ b/frontend/src/plugins/mind-map.ts
@@ -1,5 +1,6 @@
-import Markdown from 'markdown-it'
+import lodash from 'lodash'
 import Renderer from 'markdown-it/lib/renderer'
+import { Plugin } from '@/useful/plugin'
 import crypto from '@/useful/crypto'
 import { dataURItoBlobLink, openInNewWindow } from '@/useful/utils'
 
@@ -21,10 +22,6 @@ const renderRule: Renderer.RenderRule = (tokens, idx, options, { source }, slf)
   return slf.renderToken(tokens, idx, options)
 }
 
-const Plugin = (md: Markdown) => {
-  md.renderer.rules.bullet_list_open = renderRule
-}
-
 const buildSrcdoc = (json: string, btns: string) => {
   return `
     <html>
@@ -87,7 +84,7 @@ const buildSrcdoc = (json: string, btns: string) => {
   `
 }
 
-Plugin.render = async (ele: HTMLElement) => {
+const render = async (ele: HTMLElement) => {
   const code = (ele.dataset.mindmapSource || '').trim()
 
   const div = document.createElement('div')
@@ -189,4 +186,19 @@ Plugin.render = async (ele: HTMLElement) => {
   div.appendChild(action)
 }
 
-export default Plugin
+export default {
+  name: 'mind-map',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(md => {
+      md.renderer.rules.bullet_list_open = renderRule
+    })
+
+    function renderMindMap ({ getViewDom }: any) {
+      const refView: HTMLElement = getViewDom()
+      const nodes = refView.querySelectorAll<HTMLElement>('.mindmap-list[data-mindmap-source]')
+      nodes.forEach(render)
+    }
+
+    ctx.registerHook('ON_VIEW_RENDER', lodash.debounce(renderMindMap, 1000, { leading: true }))
+  }
+} as Plugin
diff --git a/frontend/src/plugins/PlantumlPlugin.ts b/frontend/src/plugins/plantuml.ts
similarity index 91%
rename from frontend/src/plugins/PlantumlPlugin.ts
rename to frontend/src/plugins/plantuml.ts
index db6bf93d..cdf7103a 100644
--- a/frontend/src/plugins/PlantumlPlugin.ts
+++ b/frontend/src/plugins/plantuml.ts
@@ -1,7 +1,9 @@
 // https://github.com/DeepElement/markdown-it-plantuml-offline
+import lodash from 'lodash'
 import Markdown from 'markdown-it'
+import { Plugin } from '@/useful/plugin'
 
-export default function umlPlugin (md: Markdown, options: any) {
+const MarkdownItPlugin = function umlPlugin (md: Markdown, options: any) {
   function generateSourceDefault (umlCode: string) {
     return 'api/plantuml/png?data=' + encodeURIComponent(umlCode)
   }
@@ -136,3 +138,30 @@ export default function umlPlugin (md: Markdown, options: any) {
   })
   md.renderer.rules.uml_diagram = render
 }
+
+export default {
+  name: 'markdown-plantuml',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(MarkdownItPlugin)
+
+    const updatePlantuml = ({ getViewDom }: any) => {
+      const refView: HTMLElement = getViewDom()
+      const nodes = refView.querySelectorAll<HTMLImageElement>('img[data-plantuml-src]')
+      nodes.forEach(el => {
+        el.src = el.dataset.plantumlSrc || ''
+      })
+    }
+
+    const quickUpdateFun = (params: any) => {
+      setTimeout(() => {
+        ctx.registerHook('ON_VIEW_RENDERED', () => {
+          updatePlantuml(params)
+        }, true)
+      }, 0)
+    }
+
+    ctx.registerHook('ON_VIEW_MOUNTED', quickUpdateFun)
+    ctx.registerHook('ON_VIEW_FILE_CHANGE', quickUpdateFun)
+    ctx.registerHook('ON_VIEW_RENDERED', lodash.debounce(updatePlantuml, 3000, { leading: true }))
+  }
+} as Plugin
diff --git a/frontend/src/plugins/RunPlugin.ts b/frontend/src/plugins/run-code.ts
similarity index 92%
rename from frontend/src/plugins/RunPlugin.ts
rename to frontend/src/plugins/run-code.ts
index 0f02d5aa..7bfe35dd 100644
--- a/frontend/src/plugins/RunPlugin.ts
+++ b/frontend/src/plugins/run-code.ts
@@ -1,5 +1,6 @@
 import CryptoJS from 'crypto-js'
 import Markdown from 'markdown-it'
+import { Plugin } from '@/useful/plugin'
 
 const cachePrefix = 'run_code_result_'
 
@@ -60,7 +61,7 @@ const RunPlugin = (md: Markdown) => {
   }
 }
 
-RunPlugin.clearCache = () => {
+const clearCache = () => {
   Object.keys(localStorage).forEach(key => {
     if (key.startsWith(cachePrefix)) {
       localStorage.removeItem(key)
@@ -68,4 +69,10 @@ RunPlugin.clearCache = () => {
   })
 }
 
-export default RunPlugin
+export default {
+  name: 'run-code',
+  register: ctx => {
+    ctx.registerMarkdownItPlugin(RunPlugin)
+    ctx.registerHook('ON_STARTUP', clearCache)
+  }
+} as Plugin
diff --git a/frontend/src/plugins/switch-todo.ts b/frontend/src/plugins/switch-todo.ts
new file mode 100644
index 00000000..89571be6
--- /dev/null
+++ b/frontend/src/plugins/switch-todo.ts
@@ -0,0 +1,36 @@
+import { Plugin, Ctx } from '@/useful/plugin'
+import { useBus } from '@/useful/bus'
+import dayjs from 'dayjs'
+
+export default {
+  name: 'switch-todo',
+  register: (ctx: Ctx) => {
+    ctx.registerHook('ON_VIEW_ELEMENT_CLICK', async (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+      const bus = useBus()
+
+      const preventEvent = () => {
+        e.preventDefault()
+        e.stopPropagation()
+        return true
+      }
+
+      function switchTodo (line: number, checked: boolean) {
+        let lineText = ''
+        bus.emit('editor-get-line', { line, callback: (val: string) => { lineText = val } })
+
+        const value = checked
+          ? lineText.replace('[ ]', `[x] ~~${dayjs().format('YYYY-MM-DD HH:mm')}~~`)
+          : lineText.replace(/(\[x\] ~~[\d-: ]+~~|\[x\])/, '[ ]')
+        bus.emit('editor-replace-line', { line, value })
+      }
+
+      if (target.tagName === 'INPUT' && target.parentElement!!.classList.contains('source-line')) {
+        switchTodo(parseInt(target.parentElement!!.dataset.sourceLine || '0'), (target as HTMLInputElement).checked)
+        return preventEvent()
+      }
+
+      return false
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/table-cell-edit.ts b/frontend/src/plugins/table-cell-edit.ts
new file mode 100644
index 00000000..401ae819
--- /dev/null
+++ b/frontend/src/plugins/table-cell-edit.ts
@@ -0,0 +1,116 @@
+import { useBus } from '@/useful/bus'
+import { useModal } from '@/useful/modal'
+import { Plugin, Ctx } from '@/useful/plugin'
+import { hasCtrlCmd } from '@/useful/shortcut'
+import { useToast } from '@/useful/toast'
+
+const editTableCell = async (start: number, end: number, cellIndex: number) => {
+  const toast = useToast()
+  const modal = useModal()
+  const bus = useBus()
+
+  if (end - start !== 1) {
+    toast.show('warning', '暂只支持编辑单行文本')
+    return
+  }
+
+  const escapedSplit = (str: string) => {
+    const result = []
+    const max = str.length
+    let pos = 0
+    let ch = str.charCodeAt(pos)
+    let isEscaped = false
+    let lastPos = 0
+    let current = ''
+
+    while (pos < max) {
+      if (ch === 0x7c/* | */) {
+        if (!isEscaped) {
+          // pipe separating cells, '|'
+          result.push(current + str.substring(lastPos, pos))
+          current = ''
+          lastPos = pos + 1
+        } else {
+          // escaped pipe, '\|'
+          current += str.substring(lastPos, pos - 1)
+          lastPos = pos
+        }
+      }
+
+      isEscaped = (ch === 0x5c/* \ */)
+      pos++
+
+      ch = str.charCodeAt(pos)
+    }
+
+    result.push(current + str.substring(lastPos))
+
+    if (result.length && result[0] === '') result.shift()
+    if (result.length && result[result.length - 1] === '') result.pop()
+
+    return result
+  }
+
+  let text = ''
+  bus.emit('editor-get-line', { line: start, callback: (val: string) => { text = val.trim() } })
+
+  const columns = escapedSplit(text)
+  const cellText = columns[cellIndex]
+
+  if (typeof cellText !== 'string') {
+    toast.show('warning', '编辑错误')
+    return
+  }
+
+  let value = await modal.input({
+    title: '编辑单元格',
+    type: 'textarea',
+    value: cellText,
+    modalWidth: '600px',
+    hint: '单元格内容',
+  })
+  if (typeof value !== 'string') {
+    toast.show('warning', '取消编辑')
+    return
+  }
+
+  if (!value.startsWith(' ') && cellIndex > 0) value = ' ' + value
+  if (!value.endsWith(' ') && cellIndex < columns.length - 1) value += ' '
+  columns[cellIndex] = value.replace(/\|/g, '\\|').replace(/\n/g, ' ')
+
+  let content = columns.join('|').trim()
+  if (text.startsWith('|')) content = '| ' + content
+  if (text.endsWith('|')) content += ' |'
+
+  bus.emit('editor-replace-line', { line: start, value: content })
+}
+
+export default {
+  name: 'table-cell-edit',
+  register: (ctx: Ctx) => {
+    ctx.registerHook('ON_VIEW_ELEMENT_CLICK', async (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+
+      const preventEvent = () => {
+        e.preventDefault()
+        e.stopPropagation()
+        return true
+      }
+
+      if (target.tagName === 'TD' && target.classList.contains('yank-td') && hasCtrlCmd(e)) {
+        const start = parseInt(target.dataset.sourceLine || '0')
+        const end = parseInt(target.dataset.sourceLineEnd || '0')
+        const td = target as HTMLTableDataCellElement
+        const cellIndex = [...td.parentElement!.children as any]
+          .slice(0, td.cellIndex)
+          .reduce((prev, current) => prev + current.colSpan, 0)
+
+        editTableCell(start, end, cellIndex)
+
+        return preventEvent()
+      }
+
+      return false
+    })
+  }
+} as Plugin
diff --git a/frontend/src/plugins/TransformImgOutLink.ts b/frontend/src/plugins/transform-img-out-link.ts
similarity index 100%
rename from frontend/src/plugins/TransformImgOutLink.ts
rename to frontend/src/plugins/transform-img-out-link.ts
diff --git a/frontend/src/useful/plugin.ts b/frontend/src/useful/plugin.ts
index 3adf8ca6..766c5ec5 100644
--- a/frontend/src/useful/plugin.ts
+++ b/frontend/src/useful/plugin.ts
@@ -1,30 +1,50 @@
 import { addAction } from './shortcut'
 import { getLogger } from './utils'
+import Markdown from 'markdown-it'
 
-export type HookType = 'ON_VIEW_ELEMENT_CLICK'
+export type HookType = 'ON_STARTUP'
+  | 'ON_VIEW_ELEMENT_CLICK'
   | 'ON_VIEW_KEY_DOWN'
+  | 'ON_VIEW_RENDER'
+  | 'ON_VIEW_RENDERED'
+  | 'ON_VIEW_MOUNTED'
+  | 'ON_VIEW_FILE_CHANGE'
+  | 'ON_VIEW_BEFORE_CONVERT'
+  | 'ON_TREE_NODE_SELECT'
 
 export interface Plugin {
   name: string;
   register?: (ctx: Ctx) => void;
 }
 
+type HookFun = (...args: any[]) => boolean | void | Promise<boolean | void>
+
 const logger = getLogger('plugin')
 
 const plugins: {[name: string]: Plugin} = {}
 
-const hooks: { [key in HookType]?: ((...args: any[]) => boolean | void | Promise<boolean | void>)[] } = {}
+const hooks: { [key in HookType]?: {fun: HookFun; once: boolean}[] } = {}
+
+const markdownItPlugins: {plugin: any; params: any}[] = []
 
 const ctx = {
   registerShortcutAction (name: string, keys: (string | number)[]) {
     addAction(name, keys)
   },
-  registerHook: (type: HookType, fun: (...args: any[]) => void) => {
+  registerHook: (type: HookType, fun: HookFun, once = false) => {
     if (Array.isArray(hooks[type])) {
-      hooks[type] = [...hooks[type]!!, fun]
+      hooks[type] = [...hooks[type]!!, { fun, once }]
     } else {
-      hooks[type] = [fun]
+      hooks[type] = [{ fun, once }]
     }
+  },
+  removeHook: (type: HookType, fun: HookFun) => {
+    if (Array.isArray(hooks[type])) {
+      hooks[type] = hooks[type]!!.filter(x => x.fun !== fun)
+    }
+  },
+  registerMarkdownItPlugin: (plugin: (md: Markdown, ...args: any) => void, params?: any) => {
+    markdownItPlugins.push({ plugin, params })
   }
 }
 
@@ -40,7 +60,22 @@ export const init = () => {
   logger.debug('init')
 
   const localPlugins = [
-    require('@/plugins/TransformImgOutLink')
+    require('@/plugins/markdown-source-line'),
+    require('@/plugins/markdown-toc'),
+    require('@/plugins/markdown-code'),
+    require('@/plugins/markdown-link'),
+    require('@/plugins/code-line-number'),
+    require('@/plugins/transform-img-out-link'),
+    require('@/plugins/copy-text'),
+    require('@/plugins/table-cell-edit'),
+    require('@/plugins/switch-todo'),
+    require('@/plugins/run-code'),
+    require('@/plugins/plantuml'),
+    require('@/plugins/drawio'),
+    require('@/plugins/mind-map'),
+    require('@/plugins/mermaid'),
+    require('@/plugins/applet'),
+    require('@/plugins/echarts'),
   ]
 
   localPlugins.forEach((plugin) => {
@@ -53,12 +88,17 @@ export const init = () => {
 }
 
 export const triggerHook = async (type: HookType, ...args: any[]) => {
-  logger.debug('triggerHook', type, hooks, args)
-  for (const fun of (hooks[type] || [])) {
+  logger.debug('triggerHook', type, args)
+  for (const { fun, once } of (hooks[type] || [])) {
+    once && ctx.removeHook(type, fun)
     if (await fun(...args)) {
-      break
+      return true
     }
   }
+
+  return false
 }
 
+export const getMarkdownItPlugins = () => markdownItPlugins
+
 init()
diff --git a/frontend/src/useful/startup.ts b/frontend/src/useful/startup.ts
index bbe43f5f..46171442 100644
--- a/frontend/src/useful/startup.ts
+++ b/frontend/src/useful/startup.ts
@@ -1,15 +1,14 @@
 import { useStore } from 'vuex'
 import { useBus } from './bus'
-import RunPlugin from '@/plugins/RunPlugin'
-import { copyText } from './copy-text'
 import env from './env'
 import { hasCtrlCmd } from './shortcut'
+import { triggerHook } from './plugin'
 
 export default function startup () {
   const bus = useBus()
   const store = useStore()
 
-  RunPlugin.clearCache()
+  triggerHook('ON_STARTUP')
 
   bus.on('editor-ready', () => {
     const { currentFile } = store.state
@@ -20,8 +19,6 @@ export default function startup () {
     }
   })
 
-  bus.on('copy-text', copyText)
-
   // 在 Electron 环境中开启缩放页面功能
   if (env.isElectron) {
     const webContents = env.require('electron').remote.getCurrentWebContents()
diff --git a/frontend/src/views/Main.vue b/frontend/src/views/Main.vue
index b3a36adb..a1907ba9 100644
--- a/frontend/src/views/Main.vue
+++ b/frontend/src/views/Main.vue
@@ -19,8 +19,7 @@
     <template v-slot:preview>
       <Preview
         ref="refPreview"
-        @sync-scroll="line => refEditor.revealLineInCenter(line)"
-        @switch-todo="(line, checked) => refEditor.switchTodo(line, checked)" />
+        @sync-scroll="line => refEditor.revealLineInCenter(line)" />
     </template>
   </Layout>
   <XFilter />
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7736563d..a6c8736a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -6441,11 +6441,6 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-loadsh@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/loadsh/-/loadsh-0.0.4.tgz#5314babd12bb13315dde024a4ca70758c5489d2d"
-  integrity sha512-U+wLL8InpfRalWrr+0SuhWgGt10M4OyAk6G8xCYo2rwpiHtxZkWiFpjei0vO463ghW8LPCdhqQxXlMy2qicAEw==
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6514,6 +6509,11 @@ lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@2.2.0, log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
diff --git a/yarn.lock b/yarn.lock
index 237cbbd9..3ea421fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1799,6 +1799,11 @@ lodash@^4.17.10:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"

From 18018b88561a87f8d80ee8a15b4aabf8f70478b8 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sat, 27 Feb 2021 12:45:17 +0800
Subject: [PATCH 04/12] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=A0=8F=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/RepositorySwitch.vue | 125 -------------------
 frontend/src/components/StatusBar.vue        |   6 +-
 frontend/src/components/StatusBarMenu.vue    |  95 ++++++++++++++
 frontend/src/plugins/repository-switch.ts    |  78 ++++++++++++
 frontend/src/store.ts                        |   2 +-
 frontend/src/useful/plugin.ts                |  33 ++++-
 6 files changed, 207 insertions(+), 132 deletions(-)
 delete mode 100644 frontend/src/components/RepositorySwitch.vue
 create mode 100644 frontend/src/components/StatusBarMenu.vue
 create mode 100644 frontend/src/plugins/repository-switch.ts

diff --git a/frontend/src/components/RepositorySwitch.vue b/frontend/src/components/RepositorySwitch.vue
deleted file mode 100644
index 4c71c953..00000000
--- a/frontend/src/components/RepositorySwitch.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <div class="repository-switch">
-    <div class="current" v-if="currentRepo">仓库：{{currentRepo.name}}</div>
-    <div class="current" v-else>未选择仓库</div>
-    <ul class="list">
-      <li v-for="(path, name) in repositories" :key="name" :title="path" @click="choose({name, path})">{{name}}</li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onBeforeMount, onBeforeUnmount, toRefs, watch } from 'vue'
-import { useStore } from 'vuex'
-import file from '../useful/file'
-import { useBus } from '../useful/bus'
-import { $args } from '../useful/global-args'
-
-export default defineComponent({
-  name: 'repository-switch',
-  setup () {
-    const store = useStore()
-    const bus = useBus()
-
-    const { currentRepo, repositories } = toRefs(store.state)
-
-    function choose (repo: any) {
-      if (repo.name !== currentRepo.value?.name) {
-        store.commit('setCurrentRepo', repo)
-      }
-    }
-
-    function chooseRepoByName (name?: string) {
-      if (name && repositories.value[name]) {
-        choose({ name, path: repositories.value[name] })
-      }
-    }
-
-    function initRepo () {
-      const initRepoName = $args().get('init-repo')
-      const initFilePath = $args().get('init-file')
-
-      if (initRepoName) {
-        chooseRepoByName(initRepoName)
-      }
-
-      if (initFilePath) {
-        store.commit('setCurrentFile', { repo: currentRepo.value.name, name: file.basename(initFilePath), path: initFilePath })
-      }
-    }
-
-    onBeforeMount(() => {
-      bus.on('switch-repo-by-name', chooseRepoByName)
-      bus.on('editor-ready', initRepo)
-      store.dispatch('fetchRepositories')
-    })
-
-    onBeforeUnmount(() => {
-      bus.off('switch-repo-by-name', chooseRepoByName)
-      bus.off('editor-ready', initRepo)
-    })
-
-    watch(repositories, val => {
-      const keys = Object.keys(val)
-      if (!currentRepo.value || keys.indexOf(currentRepo.value.name) < 0) {
-        if (keys.length > 0) {
-          const name = keys[0]
-          store.commit('setCurrentRepo', { name, path: val[name] })
-        }
-      }
-    })
-
-    return {
-      currentRepo,
-      repositories,
-      choose,
-    }
-  },
-})
-</script>
-
-<style scoped>
-.repository-switch {
-  width: 100px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.current {
-  padding: 0 .3em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.repository-switch:hover {
-  background: #333030;
-}
-
-.repository-switch:hover .list {
-  display: block;
-}
-
-.list {
-  width: 100px;
-  margin: 0;
-  list-style: none;
-  background: #333030;
-  padding: 4px 0;
-  display: none;
-  position: fixed;
-  bottom: 20px;
-  box-sizing: border-box;
-}
-
-.list li {
-  padding: 4px .6em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.list li:hover {
-  background: #252525;
-}
-</style>
diff --git a/frontend/src/components/StatusBar.vue b/frontend/src/components/StatusBar.vue
index 49325b31..65230b05 100644
--- a/frontend/src/components/StatusBar.vue
+++ b/frontend/src/components/StatusBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="status-bar">
-    <RepositorySwitch class="left"></RepositorySwitch>
+    <StatusBarMenu class="left" />
     <div class="right">
       <div class="document-info">
         <span>行：{{documentInfo.line}}</span>
@@ -25,13 +25,13 @@
 import { defineComponent, onBeforeUnmount, onMounted, toRefs } from 'vue'
 import { useStore } from 'vuex'
 import { useBus } from '../useful/bus'
-import RepositorySwitch from './RepositorySwitch.vue'
+import StatusBarMenu from './StatusBarMenu.vue'
 import SvgIcon from '../components/SvgIcon.vue'
 import { isAction, getActionLabel } from '../useful/shortcut'
 
 export default defineComponent({
   name: 'status-bar',
-  components: { RepositorySwitch, SvgIcon },
+  components: { StatusBarMenu, SvgIcon },
   setup () {
     const bus = useBus()
     const store = useStore()
diff --git a/frontend/src/components/StatusBarMenu.vue b/frontend/src/components/StatusBarMenu.vue
new file mode 100644
index 00000000..e9d9e6c9
--- /dev/null
+++ b/frontend/src/components/StatusBarMenu.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="status-bar-menu-wrapper">
+    <div class="status-bar-menu" v-for="menu in list" :key="menu.id">
+      <div class="title">{{menu.title}}</div>
+      <ul class="list" v-if="showList">
+        <li v-for="item in menu.list" :key="item.id" :title="item.tips" @click="handleItemClick(item)">{{item.title}}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onBeforeUnmount, ref } from 'vue'
+import { useBus } from '../useful/bus'
+import { getStatusBarMenus, StatusBarMenuItem } from '../useful/plugin'
+
+export default defineComponent({
+  name: 'status-bar-menu',
+  setup () {
+    const bus = useBus()
+    const list = ref(getStatusBarMenus())
+    const showList = ref(true)
+
+    const handleItemClick = (item: StatusBarMenuItem) => {
+      item.onClick && item.onClick(item)
+      showList.value = false
+      nextTick(() => {
+        showList.value = true
+      })
+    }
+
+    const updateMenu = () => {
+      list.value = getStatusBarMenus()
+      console.log('rest', getStatusBarMenus())
+    }
+
+    bus.on('status-bar-menu-update', updateMenu)
+    onBeforeUnmount(() => {
+      bus.off('status-bar-menu-update', updateMenu)
+    })
+
+    return {
+      list,
+      showList,
+      handleItemClick
+    }
+  },
+})
+</script>
+
+<style scoped>
+.status-bar-menu {
+  width: 100px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.title {
+  padding: 0 .3em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.status-bar-menu:hover {
+  background: #2f3031;
+}
+
+.status-bar-menu:hover .list {
+  display: block;
+}
+
+.list {
+  width: 100px;
+  margin: 0;
+  list-style: none;
+  background: #37393a;
+  padding: 4px 0;
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  box-sizing: border-box;
+}
+
+.list li {
+  padding: 4px .6em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.list li:hover {
+  background: #2f3031;
+}
+</style>
diff --git a/frontend/src/plugins/repository-switch.ts b/frontend/src/plugins/repository-switch.ts
new file mode 100644
index 00000000..0fe6376c
--- /dev/null
+++ b/frontend/src/plugins/repository-switch.ts
@@ -0,0 +1,78 @@
+import { Plugin } from '@/useful/plugin'
+import store from '@/store'
+import { useBus } from '@/useful/bus'
+import { $args } from '@/useful/global-args'
+import file from '@/useful/file'
+
+export default {
+  name: 'repository-switch',
+  register: ctx => {
+    const bus = useBus()
+
+    function choose (repo: any) {
+      const { currentRepo } = store.state
+      if (repo.name !== currentRepo.name) {
+        store.commit('setCurrentRepo', repo)
+      }
+    }
+
+    function chooseRepoByName (name?: string) {
+      const { repositories } = store.state
+      if (name && repositories[name]) {
+        choose({ name, path: repositories[name] })
+      }
+    }
+
+    function initRepo () {
+      const { currentRepo } = store.state
+
+      const initRepoName = $args().get('init-repo')
+      const initFilePath = $args().get('init-file')
+
+      if (initRepoName) {
+        chooseRepoByName(initRepoName)
+      }
+
+      if (initFilePath) {
+        store.commit('setCurrentFile', { repo: currentRepo.name, name: file.basename(initFilePath), path: initFilePath })
+      }
+    }
+
+    function updateMenu () {
+      const { currentRepo, repositories } = store.state
+      ctx.updateStatusBarMenu({
+        id: 'repository-switch',
+        title: currentRepo ? `仓库: ${currentRepo.name}` : '未选择仓库',
+        list: Object.keys(repositories).map(name => {
+          const path = repositories[name]
+
+          return {
+            id: name,
+            type: 'normal',
+            title: name,
+            tips: path,
+            onClick: () => choose({ name, path })
+          }
+        })
+      })
+    }
+
+    bus.on('switch-repo-by-name', chooseRepoByName)
+    bus.on('editor-ready', initRepo)
+    store.dispatch('fetchRepositories')
+
+    store.watch(() => store.state.repositories, updateMenu)
+    store.watch(() => store.state.currentRepo, updateMenu)
+
+    store.watch(() => store.state.repositories, val => {
+      const { currentRepo } = store.state
+      const keys = Object.keys(val)
+      if (!currentRepo || keys.indexOf(currentRepo.name) < 0) {
+        if (keys.length > 0) {
+          const name = keys[0]
+          store.commit('setCurrentRepo', { name, path: val[name] })
+        }
+      }
+    })
+  }
+} as Plugin
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 9a80ca1c..8967486d 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -36,7 +36,7 @@ const getLastOpenFile = (repoName?: string) => {
 
 export default createStore({
   state: {
-    repositories: {},
+    repositories: {} as any,
     tree: null,
     showSide: Storage.get('showSide', true),
     showView: Storage.get('showView', true),
diff --git a/frontend/src/useful/plugin.ts b/frontend/src/useful/plugin.ts
index 766c5ec5..f89537c0 100644
--- a/frontend/src/useful/plugin.ts
+++ b/frontend/src/useful/plugin.ts
@@ -1,6 +1,7 @@
 import { addAction } from './shortcut'
 import { getLogger } from './utils'
 import Markdown from 'markdown-it'
+import { useBus } from './bus'
 
 export type HookType = 'ON_STARTUP'
   | 'ON_VIEW_ELEMENT_CLICK'
@@ -17,15 +18,31 @@ export interface Plugin {
   register?: (ctx: Ctx) => void;
 }
 
-type HookFun = (...args: any[]) => boolean | void | Promise<boolean | void>
+export type HookFun = (...args: any[]) => boolean | void | Promise<boolean | void>
+
+export type StatusBarMenuItem = {
+  id: string;
+  type: 'normal';
+  title: string;
+  tips?: string;
+  onClick?: (item: StatusBarMenuItem) => void;
+}
+
+export interface StatusBarMenu {
+  id: string;
+  title: string;
+  tips?: string;
+  onClick?: (menu: StatusBarMenu) => void;
+  list?: (StatusBarMenuItem | { type: 'separator' })[];
+}
 
 const logger = getLogger('plugin')
+const bus = useBus()
 
 const plugins: {[name: string]: Plugin} = {}
-
 const hooks: { [key in HookType]?: {fun: HookFun; once: boolean}[] } = {}
-
 const markdownItPlugins: {plugin: any; params: any}[] = []
+const statusBarMenus: { [key: string]: StatusBarMenu } = {}
 
 const ctx = {
   registerShortcutAction (name: string, keys: (string | number)[]) {
@@ -45,6 +62,14 @@ const ctx = {
   },
   registerMarkdownItPlugin: (plugin: (md: Markdown, ...args: any) => void, params?: any) => {
     markdownItPlugins.push({ plugin, params })
+  },
+  updateStatusBarMenu: (menu: StatusBarMenu) => {
+    statusBarMenus[menu.id] = menu
+    bus.emit('status-bar-menu-update', menu)
+  },
+  removeStatusBarMenu: (id: string) => {
+    delete statusBarMenus[id]
+    bus.emit('status-bar-menu-update')
   }
 }
 
@@ -60,6 +85,7 @@ export const init = () => {
   logger.debug('init')
 
   const localPlugins = [
+    require('@/plugins/repository-switch'),
     require('@/plugins/markdown-source-line'),
     require('@/plugins/markdown-toc'),
     require('@/plugins/markdown-code'),
@@ -100,5 +126,6 @@ export const triggerHook = async (type: HookType, ...args: any[]) => {
 }
 
 export const getMarkdownItPlugins = () => markdownItPlugins
+export const getStatusBarMenus = () => Object.values(statusBarMenus)
 
 init()

From 62e7d81245c1e3e9f175ecfcb55bb71ba8f544e3 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sun, 28 Feb 2021 15:12:01 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6=E5=BF=AB=E6=8D=B7=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/plugins/copy-text.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/plugins/copy-text.ts b/frontend/src/plugins/copy-text.ts
index 36ba3330..47ffb080 100644
--- a/frontend/src/plugins/copy-text.ts
+++ b/frontend/src/plugins/copy-text.ts
@@ -31,7 +31,7 @@ export default {
       }
 
       // 复制内容
-      if (target.classList.contains('copy-inner-text')) {
+      if (target.classList.contains('copy-inner-text') && hasCtrlCmd(e)) {
         bus.emit('copy-text', target.innerText)
         return preventEvent()
       }

From 0443dc3f9fa405d09ba41480fd76721ffb006798 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 10:25:40 +0800
Subject: [PATCH 06/12] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/StatusBarMenu.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/StatusBarMenu.vue b/frontend/src/components/StatusBarMenu.vue
index e9d9e6c9..81fdd64b 100644
--- a/frontend/src/components/StatusBarMenu.vue
+++ b/frontend/src/components/StatusBarMenu.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onBeforeUnmount, ref } from 'vue'
+import { defineComponent, onBeforeUnmount, ref } from 'vue'
 import { useBus } from '../useful/bus'
 import { getStatusBarMenus, StatusBarMenuItem } from '../useful/plugin'
 
@@ -24,9 +24,9 @@ export default defineComponent({
     const handleItemClick = (item: StatusBarMenuItem) => {
       item.onClick && item.onClick(item)
       showList.value = false
-      nextTick(() => {
+      setTimeout(() => {
         showList.value = true
-      })
+      }, 0)
     }
 
     const updateMenu = () => {

From dfc9afc2c99a1dacbe4c783780fd23b2020a49c7 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 11:24:07 +0800
Subject: [PATCH 07/12] =?UTF-8?q?=E6=8B=93=E5=B1=95=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/StatusBar.vue     |  3 ++-
 frontend/src/components/StatusBarMenu.vue | 13 +++++++++----
 frontend/src/plugins/repository-switch.ts |  2 ++
 frontend/src/useful/plugin.ts             |  7 ++++++-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/StatusBar.vue b/frontend/src/components/StatusBar.vue
index 65230b05..1b6ce03b 100644
--- a/frontend/src/components/StatusBar.vue
+++ b/frontend/src/components/StatusBar.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="status-bar">
-    <StatusBarMenu class="left" />
+    <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>
diff --git a/frontend/src/components/StatusBarMenu.vue b/frontend/src/components/StatusBarMenu.vue
index 81fdd64b..525dfa36 100644
--- a/frontend/src/components/StatusBarMenu.vue
+++ b/frontend/src/components/StatusBarMenu.vue
@@ -16,9 +16,15 @@ import { getStatusBarMenus, StatusBarMenuItem } from '../useful/plugin'
 
 export default defineComponent({
   name: 'status-bar-menu',
-  setup () {
+  props: {
+    position: {
+      type: String,
+      default: 'left'
+    }
+  },
+  setup (props) {
     const bus = useBus()
-    const list = ref(getStatusBarMenus())
+    const list = ref(getStatusBarMenus('status-bar', props.position))
     const showList = ref(true)
 
     const handleItemClick = (item: StatusBarMenuItem) => {
@@ -30,8 +36,7 @@ export default defineComponent({
     }
 
     const updateMenu = () => {
-      list.value = getStatusBarMenus()
-      console.log('rest', getStatusBarMenus())
+      list.value = getStatusBarMenus('status-bar', props.position)
     }
 
     bus.on('status-bar-menu-update', updateMenu)
diff --git a/frontend/src/plugins/repository-switch.ts b/frontend/src/plugins/repository-switch.ts
index 0fe6376c..bcb2dda2 100644
--- a/frontend/src/plugins/repository-switch.ts
+++ b/frontend/src/plugins/repository-switch.ts
@@ -42,6 +42,8 @@ export default {
       const { currentRepo, repositories } = store.state
       ctx.updateStatusBarMenu({
         id: 'repository-switch',
+        location: 'status-bar',
+        position: 'left',
         title: currentRepo ? `仓库: ${currentRepo.name}` : '未选择仓库',
         list: Object.keys(repositories).map(name => {
           const path = repositories[name]
diff --git a/frontend/src/useful/plugin.ts b/frontend/src/useful/plugin.ts
index f89537c0..2db28fdb 100644
--- a/frontend/src/useful/plugin.ts
+++ b/frontend/src/useful/plugin.ts
@@ -28,10 +28,14 @@ export type StatusBarMenuItem = {
   onClick?: (item: StatusBarMenuItem) => void;
 }
 
+export type MenuLocation = 'status-bar'
+
 export interface StatusBarMenu {
   id: string;
   title: string;
   tips?: string;
+  location: MenuLocation;
+  position: 'left' | 'right';
   onClick?: (menu: StatusBarMenu) => void;
   list?: (StatusBarMenuItem | { type: 'separator' })[];
 }
@@ -126,6 +130,7 @@ export const triggerHook = async (type: HookType, ...args: any[]) => {
 }
 
 export const getMarkdownItPlugins = () => markdownItPlugins
-export const getStatusBarMenus = () => Object.values(statusBarMenus)
+export const getStatusBarMenus = (location: MenuLocation, position: string) =>
+  Object.values(statusBarMenus).filter(x => x.location === location && x.position === position)
 
 init()

From 12e64b5d0ddf1be5b1f2a9074c8a83a65a6fc133 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 14:32:32 +0800
Subject: [PATCH 08/12] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=E9=BC=A0=E6=A0=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Layout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Layout.vue b/frontend/src/components/Layout.vue
index 07e36fb1..2ef5e048 100644
--- a/frontend/src/components/Layout.vue
+++ b/frontend/src/components/Layout.vue
@@ -188,7 +188,7 @@ export default defineComponent({
   right: 0;
   top: 0;
   width: 4px;
-  cursor: w-resize;
+  cursor: ew-resize;
 }
 
 .sash-top {
@@ -198,7 +198,7 @@ export default defineComponent({
   left: 0;
   top: 0;
   height: 4px;
-  cursor: s-resize;
+  cursor: ns-resize;
 }
 
 .right {

From eae0b5b482d075b740f02a7ad1b0b951e88e7465 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 15:13:02 +0800
Subject: [PATCH 09/12] =?UTF-8?q?=E5=BE=AE=E8=B0=83=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E6=96=87=E8=8F=9C=E5=8D=95=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ContextMenu.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ContextMenu.vue b/frontend/src/components/ContextMenu.vue
index 8210844e..70d42c47 100644
--- a/frontend/src/components/ContextMenu.vue
+++ b/frontend/src/components/ContextMenu.vue
@@ -109,7 +109,7 @@ export default defineComponent({
   left: -99999px;
   top: -99999px;
   visibility: hidden;
-  background: #696969;
+  background: #3d4042;
   border: 1px #333 solid;
   border-left: 0;
   border-top: 0;
@@ -120,8 +120,8 @@ export default defineComponent({
 }
 
 .menu > li.separator {
-  border-top: 1px #888888 solid;
-  border-bottom: 1px #646464 solid;
+  border-top: 1px #666 solid;
+  border-bottom: 1px #444 solid;
   margin: 3px 0;
 }
 

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 10/12] =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=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'],

From f3b2f0a16a82ecc80461e9fd10a622804c272696 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 15:20:31 +0800
Subject: [PATCH 11/12] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/plugins/status-bar-repository-switch.ts   | 15 +++++++++++----
 frontend/src/plugins/status-bar-view.ts           |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/plugins/status-bar-repository-switch.ts b/frontend/src/plugins/status-bar-repository-switch.ts
index 4bf5cc63..4700e7f5 100644
--- a/frontend/src/plugins/status-bar-repository-switch.ts
+++ b/frontend/src/plugins/status-bar-repository-switch.ts
@@ -1,4 +1,4 @@
-import { Plugin } from '@/useful/plugin'
+import { Plugin, StatusBarMenu } from '@/useful/plugin'
 import store from '@/store'
 import { useBus } from '@/useful/bus'
 import { $args } from '@/useful/global-args'
@@ -38,12 +38,17 @@ export default {
       }
     }
 
+    const menu = {
+      id: 'status-bar-repository-switch',
+      location: 'status-bar',
+      position: 'left',
+      title: '仓库',
+    } as StatusBarMenu
+
     function updateMenu () {
       const { currentRepo, repositories } = store.state
       ctx.updateStatusBarMenu({
-        id: 'status-bar-repository-switch',
-        location: 'status-bar',
-        position: 'left',
+        ...menu,
         title: currentRepo ? `仓库: ${currentRepo.name}` : '未选择仓库',
         list: Object.keys(repositories).map(name => {
           const path = repositories[name]
@@ -59,6 +64,8 @@ export default {
       })
     }
 
+    ctx.updateStatusBarMenu(menu)
+
     bus.on('switch-repo-by-name', chooseRepoByName)
     bus.on('editor-ready', initRepo)
     store.dispatch('fetchRepositories')
diff --git a/frontend/src/plugins/status-bar-view.ts b/frontend/src/plugins/status-bar-view.ts
index 866be4d7..0111686f 100644
--- a/frontend/src/plugins/status-bar-view.ts
+++ b/frontend/src/plugins/status-bar-view.ts
@@ -48,7 +48,7 @@ export default {
     ctx.updateStatusBarMenu({
       id: 'status-bar-view',
       location: 'status-bar',
-      position: 'right',
+      position: 'left',
       title: '视图',
       list: Object.entries(actions).map(([key, item]) => {
         return {

From b60017f59dac2cfe6d038cf748af074db16eff93 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Thu, 4 Mar 2021 15:24:18 +0800
Subject: [PATCH 12/12] =?UTF-8?q?=E5=8D=87=E7=BA=A7=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 9 +++++++--
 package.json | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c77583f4..3286ce32 100644
--- a/README.md
+++ b/README.md
@@ -77,12 +77,17 @@
 ## 更新日志
 [最新发布](https://github.com/purocean/yn/releases)
 
-### [v2.5.5](https://github.com/purocean/yn/releases/tag/v2.5.5) 2021-02-03
-1. 调整预览文字选择颜色
+### [v2.6.0](https://github.com/purocean/yn/releases/tag/v2.6.0) 2021-03-04
+1. 内部功能插件化，增强拓展性
+2. 微调界面样式
+3. 修复复制代码快捷键不正确问题
 
 <details>
 <summary>展开查看更多版本记录</summary>
 
+### [v2.5.5](https://github.com/purocean/yn/releases/tag/v2.5.5) 2021-02-03
+1. 调整预览文字选择颜色
+
 ### [v2.5.4](https://github.com/purocean/yn/releases/tag/v2.5.4) 2021-01-31
 1. 调整 macOS 上应用边框样式
 2. macOS 打包增加签名公证
diff --git a/package.json b/package.json
index 4aa71d69..cc00f22f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yank.note",
-  "version": "2.5.5",
+  "version": "2.6.0",
   "description": "Yank Note 一款面向程序员的 Markdown 笔记应用",
   "main": "dist/app.js",
   "license": "Apache-2.0",