| | |
| | | @click="handleClickOutside" /> |
| | | <sidebar v-if="!sidebar.hide" |
| | | class="sidebar-container" /> |
| | | <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" |
| | | class="main-container"> |
| | | <div :class="{ 'fixed-header': fixedHeader }"> |
| | | <div :class="{ hasTagsView: showTagsView, sidebarHide: sidebar.hide }" |
| | | class="main-container main-layout"> |
| | | <div :class="{ 'fixed-header': fixedHeader, 'with-tags': showTagsView }"> |
| | | <navbar @setLayout="setLayout" /> |
| | | <tags-view v-if="needTagsView" /> |
| | | <tags-view v-if="showTagsView" /> |
| | | </div> |
| | | <app-main /> |
| | | <settings ref="settingRef" /> |
| | |
| | | import useAppStore from "@/store/modules/app"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import useSettingsStore from "@/store/modules/settings"; |
| | | import useTagsViewStore from "@/store/modules/tagsView"; |
| | | |
| | | const settingsStore = useSettingsStore(); |
| | | const tagsViewStore = useTagsViewStore(); |
| | | const userStore = useUserStore(); |
| | | const route = useRoute(); |
| | | const theme = computed(() => settingsStore.theme); |
| | |
| | | const sidebar = computed(() => useAppStore().sidebar); |
| | | const device = computed(() => useAppStore().device); |
| | | const needTagsView = computed(() => settingsStore.tagsView); |
| | | const showTagsView = computed(() => needTagsView.value && tagsViewStore.visitedViews.length > 1); |
| | | const fixedHeader = computed(() => settingsStore.fixedHeader); |
| | | const aiEnabled = computed(() => Number(userStore.aiEnabled) === 1); |
| | | const showGlobalAiChat = computed(() => { |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | @import "@/assets/styles/mixin.scss"; |
| | | @import "@/assets/styles/variables.module.scss"; |
| | | |
| | | .app-wrapper { |
| | | @include clearfix; |
| | | position: relative; |
| | | height: 100%; |
| | | min-height: 100%; |
| | | width: 100%; |
| | | background: radial-gradient( |
| | | circle at top, |
| | | rgba(223, 232, 226, 0.95), |
| | | transparent 32% |
| | | ), |
| | | linear-gradient(180deg, #f7faf8 0%, var(--app-bg) 100%); |
| | | background: |
| | | radial-gradient(circle at 14% -8%, rgba(59, 130, 246, 0.14), transparent 36%), |
| | | radial-gradient(circle at 88% -12%, rgba(56, 189, 248, 0.1), transparent 30%), |
| | | linear-gradient(165deg, #f3f7fc 0%, #eef5ff 56%, #f8fbff 100%); |
| | | |
| | | &.mobile.openSidebar { |
| | | position: fixed; |
| | |
| | | } |
| | | |
| | | .drawer-bg { |
| | | background: #000; |
| | | opacity: 0.3; |
| | | background: rgba(15, 23, 42, 0.22); |
| | | width: 100%; |
| | | top: 0; |
| | | height: 100%; |
| | |
| | | z-index: 999; |
| | | } |
| | | |
| | | .fixed-header { |
| | | position: fixed; |
| | | top: 0px; |
| | | padding-top: 12px; |
| | | right: 16px; |
| | | z-index: 9; |
| | | width: calc(100% - #{$base-sidebar-width} - 32px); |
| | | transition: width 0.28s, right 0.28s; |
| | | padding-bottom: 8px; |
| | | background-color: #f3f6f4; |
| | | } |
| | | .hideSidebar .fixed-header { |
| | | width: calc(100% - 100px); |
| | | .main-layout { |
| | | min-height: 100vh; |
| | | margin-left: var(--sidebar-width); |
| | | transition: margin-left 0.25s ease; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .sidebarHide .fixed-header { |
| | | width: calc(100% - 32px); |
| | | .fixed-header { |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: var(--layout-header-z); |
| | | width: 100%; |
| | | padding: 8px var(--content-gap) 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 6px; |
| | | background: transparent; |
| | | backdrop-filter: none; |
| | | } |
| | | |
| | | .fixed-header.with-tags { |
| | | padding-bottom: 6px; |
| | | } |
| | | |
| | | .hideSidebar .fixed-header { |
| | | width: 100%; |
| | | } |
| | | |
| | | .hideSidebar .main-layout { |
| | | margin-left: var(--sidebar-collapsed-width); |
| | | } |
| | | |
| | | .mobile .fixed-header { |
| | | width: 100%; |
| | | padding: 8px 10px 0; |
| | | } |
| | | |
| | | .mobile .main-layout, |
| | | .sidebarHide.main-layout { |
| | | margin-left: 0; |
| | | } |
| | | </style> |