diff --git a/src/assets/main.css b/src/assets/main.css index d9ea050..e06c34f 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -599,4 +599,40 @@ body, .dark .monaco-editor.vs-dark .monaco-editor-background { background-color: #1e1e1e !important; +} + +.home-main.is-maximized { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 2000; + background-color: var(--el-bg-color); +} + +.fullscreen-btn { + position: fixed; + top: auto; + right: 40px; + bottom: 90px; + z-index: 999; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--el-bg-color-overlay); + color: var(--el-color-primary); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: var(--el-box-shadow-lighter); + opacity: 1; + transition: opacity 0.3s; + font-size: 20px; +} + +.fullscreen-btn:hover { + opacity: 1; + box-shadow: var(--el-box-shadow); } \ No newline at end of file diff --git a/src/stores/TabsViewStore.js b/src/stores/TabsViewStore.js index 1a09d5e..38e61fa 100644 --- a/src/stores/TabsViewStore.js +++ b/src/stores/TabsViewStore.js @@ -39,6 +39,7 @@ const serializer = { */ export const useTabsViewStore = defineStore('tabsView', () => { const isTabMode = ref(false) + const isMainMaximized = ref(false) const isCachedTabMode = ref(true) const isShowTabIcon = ref(true) const currentTab = ref('') @@ -204,6 +205,10 @@ export const useTabsViewStore = defineStore('tabsView', () => { }) return { + isMainMaximized, + toggleMainFullscreen () { + isMainMaximized.value = !isMainMaximized.value + }, isTabMode, isCachedTabMode, isShowTabIcon,