fix: PageContainer fixedHeader no work

Author: sendya

packages/pro-layout/examples/layouts/BasicLayout.vue

@@ -68,103 +68,70 @@
   </pro-layout>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, reactive, ref, watchEffect, onMounted } from 'vue';
+<script setup lang="ts">
+import { computed, reactive, ref, watchEffect, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { message, Button, Input, Switch, Select, Avatar, Space, Badge, Menu } from 'ant-design-vue';
-import { getMenuData, clearMenuItem, WaterMark, FooterToolbar } from '@ant-design-vue/pro-layout';
-import type { RouteContextProps } from '@ant-design-vue/pro-layout';
+import { getMenuData, clearMenuItem, type RouteContextProps } from '@ant-design-vue/pro-layout';
 
 const i18n = (t: string) => t;
 
-export default defineComponent({
-  name: 'BasicLayout',
-  components: {
-    FooterToolbar,
-    WaterMark,
+const watermarkContent = ref('Pro Layout');
+const loading = ref(false);
+const router = useRouter();
+const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
 
-    [Button.name]: Button,
-    [Input.name]: Input,
-    [Input.Search.name]: Input.Search,
-    [Switch.name]: Switch,
-    [Select.name]: Select,
-    ['a-slect-option']: Select.Option,
-    [Space.name]: Space,
-    [Badge.name]: Badge,
-    [Avatar.name]: Avatar,
-    [Menu.Item.name]: Menu.Item,
-  },
-  setup() {
-    const loading = ref(false);
-    const watermarkContent = ref('Pro Layout');
-    const router = useRouter();
-    const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
-
-    const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
-      selectedKeys: [],
-      openKeys: [],
-      // default
-      collapsed: false,
-    });
-
-    const state = reactive({
-      menuData,
-      splitMenus: false,
-      // title: 'ProLayout',
-      // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
-      navTheme: 'light',
-      layout: 'side',
-      fixSiderbar: false,
-      fixedHeader: true,
-    });
-    const breadcrumb = computed(() =>
-      router.currentRoute.value.matched.concat().map((item) => {
-        return {
-          path: item.path,
-          breadcrumbName: item.meta.title || '',
-        };
-      })
-    );
+const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
+  selectedKeys: [],
+  openKeys: [],
+  // default
+  collapsed: false,
+});
 
-    const handleCollapsed = (collapsed?: boolean) => {
-      console.log('collapsed', collapsed);
-      baseState.collapsed = collapsed;
+const state = reactive({
+  menuData,
+  splitMenus: false,
+  // title: 'ProLayout',
+  // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
+  navTheme: 'light',
+  layout: 'mix',
+  fixSiderbar: true,
+  fixedHeader: true,
+});
+const breadcrumb = computed(() =>
+  router.currentRoute.value.matched.concat().map((item) => {
+    return {
+      path: item.path,
+      breadcrumbName: item.meta.title || '',
     };
-    watchEffect(() => {
-      if (router.currentRoute) {
-        const matched = router.currentRoute.value.matched.concat();
-        baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path);
-        baseState.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map((r) => r.path);
-      }
-    });
+  })
+);
 
-    function handlePageLoadingClick() {
-      loading.value = true;
-      setTimeout(() => {
-        loading.value = false;
-      }, 2000);
-    }
-
-    onMounted(() => {
-      setTimeout(() => {
-        watermarkContent.value = 'New Mark';
-      }, 2000);
-    });
+watchEffect(() => {
+  if (router.currentRoute) {
+    const matched = router.currentRoute.value.matched.concat();
+    baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path);
+    baseState.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map((r) => r.path);
+  }
+});
 
-    return {
-      i18n,
-      watermarkContent,
-      baseState,
-      state,
-      loading,
-      breadcrumb,
+const handleCollapsed = (collapsed?: boolean) => {
+  baseState.collapsed = collapsed;
+};
+const handlePageLoadingClick = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+};
 
-      handlePageLoadingClick,
-      handleCollapsed,
-      handleSearch: () => {
-        message.info('search..');
-      },
-    };
-  },
+onMounted(() => {
+  setTimeout(() => {
+    watermarkContent.value = 'New Mark';
+  }, 2000);
 });
+
+const handleSearch = () => {
+  message.info('search..');
+};
 </script>

packages/pro-layout/examples/views/MyPage.vue

@@ -1,10 +1,10 @@
 <template>
-  <PageContainer :title="$route.meta.title">
+  <PageContainer fixed-header :title="(route.meta.title as string)">
     <template #tags>
-      <a-tag>tag1</a-tag>
-      <a-tag color="pink">tag2</a-tag>
+      <Tag>tag1</Tag>
+      <Tag color="pink">tag2</Tag>
     </template>
-    <a-result
+    <Result
       status="404"
       :style="{
         height: '100%',
@@ -14,24 +14,17 @@
       sub-title="Sorry, you are not authorized to access this page."
     >
       <template #extra>
-        <a-button type="primary">Back Home</a-button>
+        <Button type="primary">Back Home</Button>
       </template>
-    </a-result>
+    </Result>
   </PageContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { Button, Tag, Result } from 'ant-design-vue';
+import { PageContainer } from '@ant-design-vue/pro-layout';
 
-export default defineComponent({
-  components: {
-    [Button.name]: Button,
-    [Tag.name]: Tag,
-    [Result.name]: Result,
-  },
-  setup() {
-    return {};
-  },
-});
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 </script>

packages/pro-layout/examples/views/TestPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-container title="Page 1" sub-title="is a sub-title.">
+  <page-container fixed-header title="Page 1" sub-title="is a sub-title.">
     <template #content>
       <div>
         container.content

packages/pro-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

packages/pro-layout/src/BasicLayout.tsx

@@ -227,6 +227,7 @@ const ProLayout = defineComponent({
         'disableMobile',
         'fixSiderbar',
         'fixedHeader',
+        'headerHeight',
         // 'hasSideMenu',
         // 'hasHeader',
         // 'hasFooter',
@@ -238,6 +239,7 @@ const ProLayout = defineComponent({
       breadcrumb,
       flatMenuData,
       hasSide,
+      hasHeader: true,
       flatMenu: hasFlatMenu,
     });
     provide(routeContextInjectKey, routeContext);
@@ -292,6 +294,8 @@ const ProLayout = defineComponent({
         )
       );
 
+      routeContext.hasHeader = !!headerDom.value;
+
       const contentClassName = computed(() => {
         return {
           [`${baseClassName.value}-content`]: true,

packages/pro-layout/src/components/PageContainer/index.tsx

@@ -188,6 +188,7 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     extraContent,
     prefixedClassName,
     prefixCls,
+    fixedHeader: _,
     ...restProps
   } = props;
   const value = useRouteContext();
@@ -215,7 +216,7 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     <div class={`${prefixedClassName}-wrap`}>
       <PageHeader
         {...restProps}
-        {...value}
+        // {...value}
         title={pageHeaderTitle}
         breadcrumb={breadcrumb}
         footer={renderFooter({
@@ -279,7 +280,6 @@ const PageContainer = defineComponent({
     return () => {
       const { fixedHeader } = props;
       const footer = getSlot(slots, props, 'footer');
-
       return (
         <div class={classNames.value}>
           {fixedHeader && headerDom.value ? (