fix: full content error

This commit is contained in:
chansee97 2025-08-01 11:33:28 +08:00
parent 4e08b796c0
commit 1b4639d5d8
3 changed files with 39 additions and 8 deletions

View File

@ -1,7 +1,7 @@
{ {
"name": "nova-admin", "name": "nova-admin",
"type": "module", "type": "module",
"version": "0.9.15", "version": "0.9.17",
"private": true, "private": true,
"description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.", "description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.",
"author": { "author": {

View File

@ -2,16 +2,49 @@
import { useAppStore } from '@/store' import { useAppStore } from '@/store'
const appStore = useAppStore() const appStore = useAppStore()
let previousLayoutMode = appStore.layoutMode
function enterFullContent() {
previousLayoutMode = appStore.layoutMode
appStore.layoutMode = 'full-content'
}
function exitFullContent() {
// vertical
if (previousLayoutMode === 'full-content' || !previousLayoutMode) {
previousLayoutMode = 'vertical'
}
appStore.layoutMode = previousLayoutMode
}
</script> </script>
<template> <template>
<n-tooltip placement="bottom" trigger="hover"> <n-tooltip placement="bottom" trigger="hover">
<template #trigger> <template #trigger>
<CommonWrapper @click="appStore.contentFullScreen = !appStore.contentFullScreen"> <CommonWrapper @click="enterFullContent">
<icon-park-outline-off-screen-one v-if="appStore.contentFullScreen" /> <icon-park-outline-full-screen-one />
<icon-park-outline-full-screen-one v-else />
</CommonWrapper> </CommonWrapper>
</template> </template>
<span>{{ $t('app.togglContentFullScreen') }}</span> {{ $t('app.togglContentFullScreen') }}
</n-tooltip> </n-tooltip>
<Teleport to="body">
<div
v-if="appStore.layoutMode === 'full-content'"
class="fixed top-4 right-0 z-[9999]"
>
<n-tooltip placement="left" trigger="hover">
<template #trigger>
<n-el
class="bg-[var(--primary-color)] c-[var(--base-color)] rounded-l-lg shadow-lg p-2 cursor-pointer"
@click="exitFullContent"
>
<icon-park-outline-off-screen-one />
</n-el>
</template>
{{ $t('app.togglContentFullScreen') }}
</n-tooltip>
</div>
</Teleport>
</template> </template>

View File

@ -38,7 +38,6 @@ export const useAppStore = defineStore('app-store', {
showSetting: false, showSetting: false,
transitionAnimation: 'fade-slide' as TransitionAnimation, transitionAnimation: 'fade-slide' as TransitionAnimation,
layoutMode: 'vertical' as ProLayoutMode, layoutMode: 'vertical' as ProLayoutMode,
contentFullScreen: false,
} }
}, },
getters: { getters: {
@ -68,8 +67,7 @@ export const useAppStore = defineStore('app-store', {
this.showBreadcrumbIcon = true this.showBreadcrumbIcon = true
this.showWatermark = false this.showWatermark = false
this.transitionAnimation = 'fade-slide' this.transitionAnimation = 'fade-slide'
this.layoutMode = 'leftMenu' this.layoutMode = 'vertical'
this.contentFullScreen = false
// 重置所有配色 // 重置所有配色
this.setPrimaryColor(this.primaryColor) this.setPrimaryColor(this.primaryColor)