first commit

src/layouts/default/content/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
+    <PageLayout />
+    <!-- update-begin-author:zyf date:20211129 for:qiankun 挂载子应用盒子 -->
+    <div id="content" class="app-view-box" v-if="openQianKun == 'true'"></div>
+    <!-- update-end-author:zyf date:20211129 for: qiankun 挂载子应用盒子-->
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted } from 'vue';
+  import PageLayout from '/@/layouts/page/index.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
+  import { useContentViewHeight } from './useContentViewHeight';
+  import registerApps from '/@/qiankun';
+  import { useGlobSetting } from '/@/hooks/setting';
+  export default defineComponent({
+    name: 'LayoutContent',
+    components: { PageLayout },
+    setup() {
+      const { prefixCls } = useDesign('layout-content');
+      const { getOpenPageLoading } = useTransitionSetting();
+      const { getLayoutContentMode, getPageLoading } = useRootSetting();
+      const globSetting = useGlobSetting();
+      const openQianKun = globSetting.openQianKun;
+      useContentViewHeight();
+      onMounted(() => {
+        // //注册openQianKun
+        // if (openQianKun == 'true') {
+        //   if (!window.qiankunStarted) {
+        //     window.qiankunStarted = true;
+        //     registerApps();
+        //   }
+        // }
+      });
+      return {
+        prefixCls,
+        openQianKun,
+        getOpenPageLoading,
+        getLayoutContentMode,
+        getPageLoading,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-layout-content';
+
+  .@{prefix-cls} {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+
+    &.fixed {
+      width: 1200px;
+      margin: 0 auto;
+    }
+
+    &-loading {
+      position: absolute;
+      top: 200px;
+      z-index: @page-loading-z-index;
+    }
+  }
+</style>

src/layouts/default/content/useContentContext.ts

@@ -0,0 +1,17 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import { createContext, useContext } from '/@/hooks/core/useContext';
+
+export interface ContentContextProps {
+  contentHeight: ComputedRef<number>;
+  setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<ContentContextProps> = Symbol();
+
+export function createContentContext(context: ContentContextProps) {
+  return createContext<ContentContextProps>(context, key, { native: true });
+}
+
+export function useContentContext() {
+  return useContext<ContentContextProps>(key);
+}

src/layouts/default/content/useContentViewHeight.ts

@@ -0,0 +1,42 @@
+import { ref, computed, unref } from 'vue';
+import { createPageContext } from '/@/hooks/component/usePageContext';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+
+const headerHeightRef = ref(0);
+const footerHeightRef = ref(0);
+
+export function useLayoutHeight() {
+  function setHeaderHeight(val) {
+    headerHeightRef.value = val;
+  }
+  function setFooterHeight(val) {
+    footerHeightRef.value = val;
+  }
+  return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight };
+}
+
+export function useContentViewHeight() {
+  const contentHeight = ref(window.innerHeight);
+  const pageHeight = ref(window.innerHeight);
+  const getViewHeight = computed(() => {
+    return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0;
+  });
+
+  useWindowSizeFn(
+    () => {
+      contentHeight.value = window.innerHeight;
+    },
+    100,
+    { immediate: true }
+  );
+
+  async function setPageHeight(height: number) {
+    pageHeight.value = height;
+  }
+
+  createPageContext({
+    contentHeight: getViewHeight,
+    setPageHeight,
+    pageHeight,
+  });
+}