4 天以前 fb6e4a0041575dfacc4da9f8fc66d9a3d1f8a6b8
src/layout/index.vue
@@ -7,11 +7,11 @@
         @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" />
@@ -31,8 +31,10 @@
  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);
@@ -40,6 +42,7 @@
  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(() => {
@@ -87,19 +90,16 @@
<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;
@@ -108,8 +108,7 @@
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    background: rgba(15, 23, 42, 0.22);
    width: 100%;
    top: 0;
    height: 100%;
@@ -117,26 +116,46 @@
    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>