gaoluyang
2026-05-25 b87f35ad442544fa3892def5c2979357eb76e4d7
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 />
      </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,10 +42,15 @@
  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(() => {
    const isIndustrialBrainRoute = String(route.path || "").startsWith("/ai-industrial-brain");
    const isIndustrialBrainRoute = String(route.path || "").startsWith(
      "/ai-industrial-brain"
    );
    return !isIndustrialBrainRoute && aiEnabled.value;
  });
@@ -87,19 +94,23 @@
<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%
        circle at 14% -8%,
        rgba(59, 130, 246, 0.14),
        transparent 36%
      ),
      linear-gradient(180deg, #f7faf8 0%, var(--app-bg) 100%);
      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 +119,7 @@
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    background: rgba(15, 23, 42, 0.22);
    width: 100%;
    top: 0;
    height: 100%;
@@ -117,26 +127,45 @@
    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) 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--app-bg, #f3f7fc);
  }
  .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>