sidebarIsShow

wujingjing

2025-04-03 446e503a51c904c9330fbd60043468e02a2e6b57

 src/layout/component/main.vue

@@ -7,13 +7,29 @@
         ref="layoutMainScrollbarRef"
         class="layout-main-scroll layout-backtop-header-fixed"
         wrap-class="layout-main-scroll  flex"
         view-class="layout-main-scroll bg-[#1c1e1d]  flex h100 w-full"
         view-class="layout-main-scroll bg-[var(--color-bg-side)]  flex h100 w-full"
      >
         <SideBar />
         <div class="flex-auto flex-col flex right-container">
            <waterHeader class="flex-0" />
         <!-- <WorkSpaceMenu v-show="isWorkSpace" /> -->
         <div v-show="isAskAnswer || isHome">
            <SideBar v-if="!isSharePage " :isShow="sidebarIsShow" @toggleSidebar="toggleSidebar" />
            <!-- <SidebarOther v-if="!isSharePage && !sidebarIsShow" :isShow="!sidebarIsShow" @toggleSidebar="toggleSidebar" /> -->
         </div>
         <GisMenu v-show="isGis" />

         <div
            class="flex-auto flex-col flex right-container"
            :class="{
               // 'm-[6px]': !isSharePage,
               // 'rounded-[10px]': !isSharePage,
               'bg-[var(--color-bg-side)]': !isSharePage,
               'bg-[#f7f8fa]': isSharePage,
            }"
         >
            <Header v-if="!isSharePage" class="flex-0" :sidebarIsShow="sidebarIsShow" />
            <ShareHeader v-else class="flex-0"></ShareHeader>
            <LayoutParentView class="flex-auto" />
         </div>
         <Login v-show="isShowLogin" />
      </el-scrollbar>
      <el-backtop :target="setBacktopClass" />
   </el-main>
@@ -23,15 +39,36 @@
import { storeToRefs } from 'pinia';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import waterHeader from './header/Header.vue';
import Header from './header/Header.vue';
import ShareHeader from './header/ShareHeader.vue';
import { selectFirstRoom, sidebarIsShow, toggleSidebar } from '/@/stores/chatRoom';
import Login from './login/Login.vue';
import SideBar from './sidebar/Sidebar.vue';
import SidebarOther from './sidebar/SidebarOther.vue';
import { isSharePage, isShowLogin } from '/@/stores/chatRoom';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';

import { Local } from '/@/utils/storage';
import WorkSpaceMenu from './sidebar/WorkSpaceMenu.vue';
import GisMenu from './sidebar/GisMenu.vue';
import router from '/@/router/index';
// 引入组件
const LayoutParentView = defineAsyncComponent(() => import('/@/layout/routerView/parent.vue'));
const LayoutFooter = defineAsyncComponent(() => import('/@/layout/footer/index.vue'));

const isWorkSpace = computed(() => {
   return router.currentRoute.value.path.startsWith('/workspace');
});
const isAskAnswer = computed(() => {
   return router.currentRoute.value.path.startsWith('/ask_answer');
});
const isHome = computed(() => {
   return router.currentRoute.value.path.startsWith('/home');
});
const isGis = computed(() => {
   return router.currentRoute.value.path.startsWith('/gis');
});

// 定义变量内容
const layoutMainScrollbarRef = ref();
@@ -40,7 +77,6 @@
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);

// 设置 footer 显示/隐藏
const isFooter = computed(() => {
   return themeConfig.value.isFooter && !route.meta.isIframe;
@@ -64,12 +100,20 @@
// 页面加载前
onMounted(() => {
   NextLoading.done(600);
   selectFirstRoom();
});

// 暴露变量
defineExpose({
   layoutMainScrollbarRef,
});

//#region ====================== 侧边栏显示隐藏 ======================
// const sidebarIsShow = ref( true);
// const toggleSidebar = (val) => {
//    sidebarIsShow.value = val;
// };
//#endregion
</script>

<style scoped lang="scss">
@@ -80,9 +124,9 @@
   overflow: hidden;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #1c1e1d;
   // background-color: #1c1e1d;
   font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   margin: 6px;
   border-radius: 10px;
   // margin: 6px;
   // border-radius: 10px;
}
</style>