feat: add full screen mode

src/main/app.ts

@@ -68,7 +68,7 @@ const createWindow = () => {
     frame: false,
     backgroundColor: '#282a2b',
     titleBarStyle: isMacos ? 'hidden' : undefined,
-    fullscreenable: false,
+    fullscreenable: true,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: true,

src/renderer/components/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{layout: true, presentation, electron: isElectron}">
-    <div class="header" v-show="isElectron">
+    <div class="header" v-show="isElectron && !isFullscreen">
       <slot name="header"></slot>
     </div>
     <div class="main">
@@ -44,7 +44,7 @@ export default defineComponent({
   setup () {
     const store = useStore()
 
-    const { showView, showXterm, showSide, showEditor, presentation } = toRefs(store.state)
+    const { showView, showXterm, showSide, showEditor, presentation, isFullscreen } = toRefs(store.state)
 
     const aside = ref(null)
     const editor = ref(null)
@@ -114,6 +114,7 @@ export default defineComponent({
       showEditor,
       presentation,
       isElectron,
+      isFullscreen,
       aside,
       editor,
       terminal,

src/renderer/components/TitleBar.vue

@@ -54,6 +54,14 @@ export default defineComponent({
     const isAlwaysOnTop = ref(false)
     const isFocused = ref(false)
 
+    function handleFullscreenEnter () {
+      store.commit('setIsFullscreen', true)
+    }
+
+    function handleFullscreenLeave () {
+      store.commit('setIsFullscreen', false)
+    }
+
     function updateWindowStatus () {
       if (win) {
         isMaximized.value = win.isMaximized()
@@ -111,6 +119,10 @@ export default defineComponent({
         win.on('always-on-top-changed', updateWindowStatus)
         win.on('focus', updateWindowStatus)
         win.on('blur', updateWindowStatus)
+
+        // win.isFullScreen() not work
+        win.on('enter-full-screen', handleFullscreenEnter)
+        win.on('leave-full-screen', handleFullscreenLeave)
       }
     })
 
@@ -127,6 +139,8 @@ export default defineComponent({
         win.removeListener('always-on-top-changed', updateWindowStatus)
         win.removeListener('focus', updateWindowStatus)
         win.removeListener('blur', updateWindowStatus)
+        win.removeListener('enter-full-screen', handleFullscreenEnter)
+        win.removeListener('leave-full-screen', handleFullscreenLeave)
       }
 
       win = null

src/renderer/support/store.ts

@@ -15,6 +15,7 @@ export const initState = {
   showSetting: false,
   showExport: false,
   presentation: false,
+  isFullscreen: false,
   currentContent: '',
   currentRepo: storage.get<Repo>('currentRepo'),
   currentFile: null as Doc | null,
@@ -64,6 +65,9 @@ export default createStore({
     setPresentation (state, data) {
       state.presentation = data
     },
+    setIsFullscreen (state, data) {
+      state.isFullscreen = data
+    },
     setAutoPreview (state, data) {
       state.autoPreview = data
     },