Merge pull request #285 from TsMask/next

vueComponent · Oct 21, 2023 · a4a26c9 · a4a26c9
2 parents 324c9d5 + 33c3d9a
commit a4a26c9
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 53 deletions.
diff --git a/packages/pro-layout/README.md b/packages/pro-layout/README.md
@@ -120,7 +120,7 @@ const layoutConf = reactive({
 | headerRender            | custom header render method                                           | `slot` \| (props: BasicLayoutProps) => VNode                           | -                  |
 | headerContentRender     | header content render method only layout side                         | `slot` \| (props: BasicLayoutProps) => VNode                           | -                  |
 | rightContentRender      | header right content render method                                    | `slot` \| (props: BasicLayoutProps) => VNode                           | -                  |
-| footerRender            | custom footer render method                                           | `slot` \| (props: BasicLayoutProps) => VNode                           | `false`            |
+| footerRender            | custom footer render method                                           | `slot` \| ({ width, ...BasicLayoutProps }) => VNode                           | `false`            |
 | tabRender               | custom tab render method                                              | `slot` \| ({ width, ...BasicLayoutProps }) => VNode                    | `false`            |
 | breadcrumbRender        | custom breadcrumb render method                                       | `slot` \| ({ route, params, routes, paths, h }) => VNode[]             | -                  |
 | locale                  | i18n                                                                  | Function (key: string) => string \| `false`                            | `false`            |
@@ -138,6 +138,7 @@ const layoutConf = reactive({
 | tabList        | Tabs title list                                  | `Array<{key: string, tab: sting}>` | -             |
 | tab-change     | Switch panel callback                            | (key) => void                      | -             |
 | tab-active-key | The currently highlighted tab item               | string                             | -             |
+| breadcrumb     | Show Bread crumbs bar                            | Boolean                            | -             |
 
 ### WaterMark
 
@@ -269,17 +270,29 @@ const layoutConf = reactive({
 #### Custom footer with slot
 
 ```vue
-<GlobalFooter>
-  <template #links>
-    <a>链接1</a>
-    <a>链接2</a>
-    <a>链接3</a>
-    <a>链接4</a>
-  </template>
-  <template #copyright>
-    <span>Pro Layout &copy; 2021 Sendya.</span>
-  </template>
-</GlobalFooter>
+<template #footerRender="{ width, headerTheme }">
+  <div>
+    <footer class="ant-layout-footer" style="height: 36px; line-height: 36px; background: transparent"></footer>
+    <div
+      :style="{
+        margin: '0',
+        height: '36px',
+        lineHeight: '36px',
+        right: '0px',
+        bottom: '0px',
+        position: headerTheme == 'dark' ? 'fixed' : 'unset',
+        zIndex: 14,
+        padding: '4px 16px',
+        width: width,
+        background: '#fff',
+        boxShadow: '0 1px 4px #0015291f',
+        transition: 'background 0.3s, width 0.2s'
+      }"
+    >
+      footerRender headerTheme：{{ headerTheme }} width：{{ width }}
+    </div>
+  </div>
+</template>
 ```
 
 #### Custom footer with props

diff --git a/packages/pro-layout/examples/layouts/BasicLayout.vue b/packages/pro-layout/examples/layouts/BasicLayout.vue
@@ -19,11 +19,11 @@
     <!-- custom right-content -->
     <template #rightContentRender>
       <div style="margin-right: 12px">
-        <a-avatar shape="square" size="small">
+        <Avatar shape="square" size="small">
           <template #icon>
             <UserOutlined />
           </template>
-        </a-avatar>
+        </Avatar>
       </div>
     </template>
     <!-- custom breadcrumb itemRender  -->
@@ -93,10 +93,22 @@ const state = reactive({
   splitMenus: true,
   // title: 'ProLayout',
   // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
-  navTheme: 'realDark',
+
+  // navTheme: 'realDark',
+  navTheme: 'dark',
+  headerTheme: 'dark',
+
   layout: 'mix',
+  // layout: 'side',
+  // layout: 'top',
+  
   fixSiderbar: true,
   fixedHeader: true,
+
+  headerRender: undefined,
+  // headerRender: false,
+  menuHeaderRender: undefined,
+  // menuHeaderRender: false,
 });
 const breadcrumb = computed(() =>
   router.currentRoute.value.matched.concat().map((item) => {

diff --git a/packages/pro-layout/examples/main.ts b/packages/pro-layout/examples/main.ts
@@ -8,7 +8,8 @@ import icons from './icons';
 import 'ant-design-vue/es/result/style';
 import 'ant-design-vue/es/button/style';
 import 'ant-design-vue/es/message/style';
-import 'ant-design-vue/dist/antd.dark.less';
+import 'ant-design-vue/dist/antd.variable.min.css';
+// import 'ant-design-vue/dist/antd.dark.less';
 import '@ant-design-vue/pro-layout/style.less';
 
 const app = createApp(App);

diff --git a/packages/pro-layout/examples/router/index.ts b/packages/pro-layout/examples/router/index.ts
@@ -55,37 +55,19 @@ const routes: RouteRecordRaw[] = [
               {
                 path: 'child1',
                 name: 'list-child1-child1',
-                meta: {
-                  title: '一一级列表页面',
-                  // attach `params` to `$route.params`
-                  params: {
-                    id: 1,
-                  },
-                },
+                meta: { title: '一一级列表页面' },
                 component: () => import('../views/DynamicPage.vue'),
               },
               {
                 path: 'child2',
                 name: 'list-child1-child2',
-                meta: {
-                  title: '二一级列表页面',
-                  // attach `params` to `$route.params`
-                  params: {
-                    id: 2,
-                  },
-                },
+                meta: { title: '二一级列表页面' },
                 component: () => import('../views/DynamicPage.vue'),
               },
               {
                 path: 'child3',
                 name: 'list-child1-child3',
-                meta: {
-                  title: '三一级列表页面',
-                  // attach `params` to `$route.params`
-                  params: {
-                    id: 3,
-                  },
-                },
+                meta: { title: '三一级列表页面' },
                 component: () => import('../views/DynamicPage.vue'),
               },
             ],
@@ -107,7 +89,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/test-tab',
         name: 'TestTab',
-        meta: { title: '测试Tab标签', hideInMenu: false },
+        meta: { title: '测试Tab标签', icon:'icon-icon-test', hideInMenu: false },
         component: () => import('../views/TestTab.vue'),
       },
       {

diff --git a/packages/pro-layout/examples/views/DynamicPage.vue b/packages/pro-layout/examples/views/DynamicPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <page-container :title="`${$route.meta.title} ${$route.params.id}`" sub-title="is a sub-title.">
+  <page-container :title="`${$route.meta.title}`" sub-title="is a sub-title.">
     <template #content>
       <div>
         container.content

diff --git a/packages/pro-layout/examples/views/TestTab.vue b/packages/pro-layout/examples/views/TestTab.vue
@@ -6,6 +6,7 @@
     :tab-list="tabList"
     :tab-active-key="tabActiveKey"
     @tab-change="tabChange"
+    :breadcrumb="false"
     :tabProps="{
       hideAdd: true,
       tabPosition: 'top',

diff --git a/packages/pro-layout/src/BasicLayout.tsx b/packages/pro-layout/src/BasicLayout.tsx
@@ -313,6 +313,21 @@ const ProLayout = defineComponent({
         }
         return tabRender({ width, ...props });
       });
+
+      const footerDom = computed(() => {
+        if (props.footerRender === false || !footerRender) {
+          return null;
+        }
+        let layout = props.layout;
+        // 计算侧边栏的宽度，不然导致左边的样式会出问题
+        let width = '100%';
+        if (layout === 'mix' && hasSplitMenu.value && flatMenuData.value.length === 0) {
+          width = '100%';
+        } else if(!isTop.value && !isMobile.value){
+          width = `calc(100% - ${siderWidth.value}px)`;
+        }
+        return footerRender({ width, ...props });
+      });
 
       routeContext.hasHeader = !!headerDom.value;
 
@@ -363,7 +378,7 @@ const ProLayout = defineComponent({
                   >
                     {props.loading ? <PageLoading /> : slots.default?.()}
                   </WrapContent>
-                  {footerRender && footerRender(props)}
+                  {footerDom.value}
                 </div>
               </Layout>
             </div>

diff --git a/packages/pro-layout/src/components/PageContainer/index.tsx b/packages/pro-layout/src/components/PageContainer/index.tsx
@@ -116,6 +116,10 @@ export const pageContainerProps = {
     type: Boolean,
     default: () => undefined,
   }, //PropTypes.looseBool,
+  breadcrumb: {
+    type: Boolean,
+    default: () => undefined,
+  },
 };
 
 export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>;
@@ -182,6 +186,7 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     title,
     tabList,
     tabActiveKey,
+    breadcrumb,
     content,
     pageHeaderRender,
     header,
@@ -191,7 +196,6 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     fixedHeader: _,
     ...restProps
   } = props;
-  const value = useRouteContext();
 
   if (pageHeaderRender === false) {
     return null;
@@ -200,25 +204,26 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
     return pageHeaderRender({ ...props });
   }
 
-  let pageHeaderTitle = title;
-  if (!title && title !== false) {
-    pageHeaderTitle = value.title;
-  }
+  const pageHeaderTitle = title !== false ? title : undefined;
 
-  const unrefBreadcrumb = unref(value.breadcrumb || {});
-  const breadcrumb = restProps.breadcrumb || {
-    ...unrefBreadcrumb,
-    routes: unrefBreadcrumb.routes,
-    itemRender: unrefBreadcrumb.itemRender,
-  };
+  let pageHeaderBreadcrumb = undefined;
+  if(breadcrumb !== false){
+    const value = useRouteContext();
+    const unrefBreadcrumb = unref(value.breadcrumb || {});
+    pageHeaderBreadcrumb = {
+      ...unrefBreadcrumb,
+      routes: unrefBreadcrumb.routes,
+      itemRender: unrefBreadcrumb.itemRender,
+    };
+  }
 
   return (
     <div class={`${prefixedClassName}-wrap`}>
       <PageHeader
         {...restProps}
         // {...value}
         title={pageHeaderTitle}
-        breadcrumb={breadcrumb}
+        breadcrumb={pageHeaderBreadcrumb}
         footer={renderFooter({
           ...restProps,
           tabList,

diff --git a/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx b/packages/pro-layout/src/components/SiderMenu/SiderMenu.tsx
@@ -159,6 +159,18 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const hasSplitMenu = computed(() => props.layout === 'mix' && props.splitMenus);
   const sTheme = computed(() => (props.layout === 'mix' && props.navTheme !== 'realDark' && 'light') || props.navTheme);
   const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
+  const sSideHeaderTop = computed(() => {
+    if(props.layout === 'mix'){
+      // 混合菜单布局去除顶栏
+      if(Reflect.get(props, 'headerRender') === false){
+        return undefined;
+      }
+      if(!props.isMobile) {
+        return `${props.headerHeight}px`;
+      }
+    }
+    return undefined;
+  });
   const classNames = computed(() => {
     return {
       [baseClassName]: true,
@@ -234,7 +246,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
         collapsedWidth={collapsedWidth}
         style={{
           overflow: 'hidden',
-          paddingTop: props.layout === 'mix' && !props.isMobile ? `${props.headerHeight}px` : undefined,
+          paddingTop: sSideHeaderTop.value,
         }}
         width={siderWidth}
         theme={sTheme.value === 'realDark' ? 'dark' : sTheme.value}