fix: 修复渲染刷新问题

src/renderer/components/Preview.vue

@@ -50,6 +50,8 @@ import { useBus } from '@fe/core/bus'
 import { registerAction, removeAction } from '@fe/core/action'
 import { revealLineInCenter } from '@fe/services/editor'
 import { showExport } from '@fe/services/document'
+import { toggleAutoPreview } from '@fe/services/view'
+import { getLogger } from '@fe/utils'
 import Render from './Render.vue'
 import SvgIcon from './SvgIcon.vue'
 
@@ -57,6 +59,8 @@ import 'github-markdown-css/github-markdown.css'
 import 'highlight.js/styles/atom-one-dark.css'
 import 'katex/dist/katex.min.css'
 
+const logger = getLogger('preview')
+
 export default defineComponent({
   name: 'xview',
   components: { Render, SvgIcon },
@@ -137,6 +141,7 @@ export default defineComponent({
     }
 
     function render () {
+      logger.debug('render')
       // 编辑非 markdown 文件预览直接显示代码
       const content = (filePath.value || '').endsWith('.md')
         ? currentContent.value
@@ -201,10 +206,16 @@ export default defineComponent({
       return refView.value?.outerHTML || ''
     }
 
+    function refresh () {
+      logger.debug('refresh')
+      renderDebonce()
+      triggerHook('ON_VIEW_REFRESH', { getViewDom })
+    }
+
     onMounted(() => {
       nextTick(renderDebonce)
       triggerHook('ON_VIEW_MOUNTED', { getViewDom })
-      registerAction({ name: 'view.refresh', handler: render })
+      registerAction({ name: 'view.refresh', handler: refresh })
       registerAction({ name: 'view.reveal-line', handler: revealLine })
       registerAction({ name: 'view.scroll-top-to', handler: scrollTopTo })
       registerAction({ name: 'view.get-content-html', handler: getContentHtml })
@@ -222,10 +233,10 @@ export default defineComponent({
       bus.off('global.resize', resizeHandler)
     })
 
-    watch(currentContent, () => autoPreview.value && renderDebonce())
+    watch(() => currentContent.value + filePath.value, () => autoPreview.value && renderDebonce())
     watch(filePath, () => {
       // 切换文件后，开启自动预览
-      store.commit('setAutoPreview', true)
+      toggleAutoPreview(true)
       triggerHook('ON_VIEW_FILE_CHANGE', { getViewDom })
     })
 

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

@@ -1,6 +1,5 @@
 import { Plugin } from '@fe/context'
 import store from '@fe/support/store'
-import { getActionHandler } from '@fe/core/action'
 
 export default {
   name: 'status-bar-refresh',
@@ -11,7 +10,12 @@ export default {
         id: 'status-bar-refresh-status',
         position: 'right',
         title: '同步渲染-' + (autoPreview ? '已开启' : '已关闭'),
-        onClick: () => store.commit('setAutoPreview', !autoPreview)
+        onClick: () => {
+          ctx.view.toggleAutoPreview()
+          if (!autoPreview) {
+            ctx.view.refresh()
+          }
+        },
       }
 
       menus['status-bar-refresh-action'] = {
@@ -20,7 +24,7 @@ export default {
         tips: '强制渲染',
         icon: 'sync-alt-solid',
         hidden: autoPreview,
-        onClick: () => getActionHandler('view.refresh')()
+        onClick: () => ctx.view.refresh()
       }
     })
 

src/renderer/services/layout.ts

@@ -3,6 +3,7 @@ import store from '@fe/support/store'
 import { useBus } from '@fe/core/bus'
 import { getActionHandler, registerAction } from '../core/action'
 import { Alt } from '../core/command'
+import * as view from './view'
 
 const bus = useBus()
 
@@ -27,7 +28,10 @@ export function toggleSide (visible?: boolean) {
  * @param visible 是否展示
  */
 export function toggleView (visible?: boolean) {
-  store.commit('setShowView', typeof visible === 'boolean' ? visible : !store.state.showView)
+  const val = typeof visible === 'boolean' ? visible : !store.state.showView
+  val && nextTick(view.refresh)
+
+  store.commit('setShowView', val)
   store.commit('setShowEditor', true)
   emitResize()
 }

src/renderer/services/view.ts

@@ -59,6 +59,15 @@ export function exitPresent () {
   getActionHandler('view.exit-presentation')()
 }
 
+/**
+ * 切换自动预览刷新
+ * @param flag 是否开启自动刷新预览
+ */
+export function toggleAutoPreview (flag?: boolean) {
+  const showXterm = store.state.autoPreview
+  store.commit('setAutoPreview', typeof flag === 'boolean' ? flag : !showXterm)
+}
+
 registerAction({
   name: 'view.enter-presentation',
   handler: () => present(true),

src/renderer/support/embed.ts

@@ -1,7 +1,8 @@
 import { debounce } from 'lodash-es'
-import { defineComponent, h, IframeHTMLAttributes, onBeforeMount, onBeforeUnmount, PropType, ref, watch } from 'vue'
+import { defineComponent, h, IframeHTMLAttributes, nextTick, onBeforeMount, onBeforeUnmount, PropType, ref, watch } from 'vue'
 import { useBus } from '@fe/core/bus'
 import { md5 } from '@fe/utils'
+import { registerHook, removeHook } from '@fe/core/plugin'
 
 /**
  * 构建一个嵌入页面的 src 路径
@@ -51,11 +52,21 @@ export const IFrame = defineComponent({
       }
     }
 
+    const refresh = () => {
+      url.value = ''
+      nextTick(update)
+    }
+
     const bus = useBus()
     bus.on('theme.change', changeTheme)
 
+    registerHook('ON_VIEW_REFRESH', refresh)
+    registerHook('ON_VIEW_FILE_CHANGE', refresh)
+
     onBeforeUnmount(() => {
       bus.off('theme.change', changeTheme)
+      removeHook('ON_VIEW_REFRESH', refresh)
+      removeHook('ON_VIEW_FILE_CHANGE', refresh)
     })
 
     const onLoad = function () {

src/renderer/types.ts

@@ -121,6 +121,7 @@ export type BuildInHookTypes = {
   ON_VIEW_RENDERED: [{ getViewDom: ()=> HTMLElement | null }],
   ON_VIEW_MOUNTED: [{ getViewDom: ()=> HTMLElement | null }],
   ON_VIEW_FILE_CHANGE: [{ getViewDom: ()=> HTMLElement | null }],
+  ON_VIEW_REFRESH: [{ getViewDom: ()=> HTMLElement | null }],
   ON_TREE_NODE_SELECT: [Components.Tree.Node],
   ON_DOC_BEFORE_EXPORT: [],
 }