feat: 新增演示模式

src/renderer/components/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout">
+  <div :class="{layout: true, presentation, electron: isElectron}">
     <div class="header">
       <slot name="header"></slot>
     </div>
@@ -36,6 +36,7 @@ import { useStore } from 'vuex'
 import { useBus } from '@fe/support/bus'
 import { $args, FLAG_DISABLE_XTERM } from '@fe/support/global-args'
 import { emitResize } from '@fe/context/layout'
+import { isElectron } from '@fe/utils/env'
 
 let resizeOrigin: any = null
 
@@ -45,7 +46,7 @@ export default defineComponent({
     const bus = useBus()
     const store = useStore()
 
-    const { showView, showXterm, showSide } = toRefs(store.state)
+    const { showView, showXterm, showSide, presentation } = toRefs(store.state)
 
     const aside = ref(null)
     const editor = ref(null)
@@ -112,6 +113,8 @@ export default defineComponent({
       showXterm: FLAG_DISABLE_XTERM ? false : showXterm,
       showFooter,
       showView,
+      presentation,
+      isElectron,
       aside,
       editor,
       terminal,
@@ -120,12 +123,32 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .layout {
   display: flex;
   flex-direction: column;
   width: 100vw;
   height: 100vh;
+
+  &.presentation {
+    .terminal,
+    .left,
+    .editor,
+    .header,
+    .footer {
+      display: none;
+    }
+
+    &.electron {
+      .header {
+        display: block;
+      }
+    }
+
+    .preview {
+      width: 100%;
+    }
+  }
 }
 
 .header {

src/renderer/components/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="refViewWrapper" class="markdown-view" @scroll="handleScroll">
+  <div ref="refViewWrapper" :class="{'markdown-view': true, presentation}" @scroll="handleScroll">
     <div class="action-bar" :style="{width: (width - 50) + 'px'}">
       <div :style="{background: todoCount ? 'var(--g-color-87)' : 'transparent'}">
         <div v-if="todoCount" class="todo-progress">
@@ -64,7 +64,7 @@ export default defineComponent({
     const store = useStore()
     const toast = useToast()
 
-    const { currentContent, currentFile, autoPreview } = toRefs(store.state)
+    const { currentContent, currentFile, autoPreview, presentation } = toRefs(store.state)
     const fileName = computed(() => currentFile.value?.name)
     const filePath = computed(() => currentFile.value?.path)
 
@@ -244,6 +244,7 @@ export default defineComponent({
       refViewWrapper,
       refConvertForm,
       refView,
+      presentation,
       renderContent,
       width,
       height,
@@ -266,7 +267,18 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.markdown-view.presentation {
+  .action-bar {
+    display: none;
+  }
+
+  .markdown-body {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
 .action-bar {
   position: fixed;
   width: 27vw;

src/renderer/support/store.ts

@@ -44,6 +44,7 @@ export default createStore({
     showXterm: false,
     autoPreview: true,
     showSetting: false,
+    presentation: false,
     currentContent: '',
     currentRepo: Storage.get('currentRepo'),
     currentFile: null as Doc | null,
@@ -79,6 +80,9 @@ export default createStore({
     setShowSetting (state, data) {
       state.showSetting = data
     },
+    setPresentation (state, data) {
+      state.presentation = data
+    },
     setAutoPreview (state, data) {
       state.autoPreview = data
     },