fix: global footer

examples/index.tsx

@@ -12,7 +12,7 @@ const SimpleDemo = {
       collapsed: false,
       openKeys: [],
       selectedKeys: [],
-    })
+    });
 
     return () => (
       <div class="components">
@@ -31,12 +31,11 @@ const SimpleDemo = {
           openKeys={menuState.openKeys}
           selectedKeys={menuState.selectedKeys}
           onOpenChange={$event => {
-            menuState.openKeys = $event
+            menuState.openKeys = $event;
           }}
           onSelect={$event => {
-            menuState.selectedKeys = $event
+            menuState.selectedKeys = $event;
           }}
-
         >
           <Button
             onClick={() => {
@@ -53,11 +52,11 @@ const SimpleDemo = {
 
 const app = createApp(SimpleDemo);
 
-const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
+const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
 Object.keys(Icon)
   .filter(k => !filterIcons.includes(k))
   .forEach(k => {
-    app.component(Icon[k].displayName, Icon[k])
-  })
+    app.component(Icon[k].displayName, Icon[k]);
+  });
 
 app.use(BasicLayout).mount('#__vue-content>div');

examples/menus.ts

 import { RouteProps } from '../src/typings';
 
 export const menus: RouteProps[] = [
+  {
+    path: '/welcome',
+    name: 'welcome',
+    meta: { icon: 'SmileOutlined', title: 'Welcome' },
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',

examples/side-menu.tsx

-import { createApp, reactive } from 'vue';
+import { createApp } from 'vue';
 import 'ant-design-vue/dist/antd.less';
 
 import './side-menu.less';
-import { Card, Space, Button, Layout } from 'ant-design-vue';
+import { Layout } from 'ant-design-vue';
 import { menus } from './menus';
-import SiderMenuWrapper from '../src/SiderMenu';
-import * as Icon from '@ant-design/icons-vue';
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
+import { default as SiderMenuWrapper } from '../src/SiderMenu';
 import { useMenuState } from '../src/SiderMenu/BaseMenu';
+import * as Icon from '@ant-design/icons-vue';
 
 const DemoComponent = {
   setup() {
-    const {
-      state: menuState,
-    } = useMenuState({
+    const { state: menuState } = useMenuState({
       collapsed: false,
-      openKeys: ['/dashboard'] as string[],
-      selectedKeys: ['/dashboard/monitor'] as string[],
+      openKeys: [''],
+      selectedKeys: ['/welcome'],
     });
 
-    const handleClick = () => {
-      menuState.collapsed = !menuState.collapsed;
-      console.log('handleClick', menuState.collapsed);
+    const handleCollapse = (collapsed: boolean) => {
+      menuState.collapsed = collapsed;
     };
     const handleOpenChange = (openKeys: string[]) => {
       menuState.openKeys = openKeys;
-    }
+    };
     const handleSelect = (selectedKeys: string[]) => {
       menuState.selectedKeys = selectedKeys;
-    }
+    };
 
     return () => (
       <div class="components">
@@ -47,25 +43,26 @@ const DemoComponent = {
                 selectedKeys={menuState.selectedKeys}
                 onOpenChange={handleOpenChange}
                 onSelect={handleSelect}
+                onCollapse={handleCollapse}
                 matchMenuKeys={[]}
                 contentWidth={'Fixed'}
                 primaryColor={'#1890ff'}
                 siderWidth={208}
               />
               <Layout>
-                <Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;">
-                  {
-                    menuState.collapsed
-                      ? <MenuUnfoldOutlined class="trigger" onClick={handleClick} />
-                      : <MenuFoldOutlined  class="trigger" onClick={handleClick} />
-                  }
-                </Layout.Header>
-                <Layout.Content style={{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }}>
+                <Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;"></Layout.Header>
+                <Layout.Content
+                  style={{
+                    margin: '24px 16px',
+                    padding: '24px',
+                    background: '#fff',
+                    minHeight: '280px',
+                  }}
+                >
                   <div>Context</div>
                 </Layout.Content>
               </Layout>
             </Layout>
-
           </div>
         </div>
       </div>
@@ -75,11 +72,11 @@ const DemoComponent = {
 
 const app = createApp(DemoComponent);
 
-const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
+const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
 Object.keys(Icon)
   .filter(k => !filterIcons.includes(k))
   .forEach(k => {
-    app.component(Icon[k].displayName, Icon[k])
-  })
+    app.component(Icon[k].displayName, Icon[k]);
+  });
 
 app.mount('#__vue-content>div');

src/BasicLayout.tsx

@@ -6,11 +6,13 @@ import { Layout } from 'ant-design-vue';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { default as ProProvider } from './ProProvider';
 import { createRouteContext } from './RouteContext';
+import { WrapContent } from './WrapContent';
+import { default as GlobalFooter } from './GlobalFooter';
 import SiderMenuWrapper from './SiderMenu';
 
 const defaultI18nRender = (key: string) => key;
 
-const { state, provider: RouteContextProvider } = createRouteContext({
+const { state: routeContext, Provider: RouteContextProvider } = createRouteContext({
   isMobile: false,
   menuData: [],
   sideWidth: 208,
@@ -32,7 +34,10 @@ const BasicLayout = (props, { emit, slots }) => {
     <ProProvider {...props} i18n={defaultI18nRender}>
       <RouteContextProvider>
         <Layout class="ant-pro-basicLayout">
-          <SiderMenuWrapper {...props} />
+          <SiderMenuWrapper
+            {...props}
+            onCollapse={(collapsed: boolean) => emit('update:collapsed', collapsed)}
+          />
           <Layout>
             <Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;">
               {props.collapsed ? (
@@ -41,7 +46,7 @@ const BasicLayout = (props, { emit, slots }) => {
                 <MenuFoldOutlined class="trigger" onClick={handleClick} />
               )}
             </Layout.Header>
-            <Layout.Content
+            <WrapContent
               style={{
                 margin: '24px 16px',
                 padding: '24px',
@@ -49,8 +54,31 @@ const BasicLayout = (props, { emit, slots }) => {
                 minHeight: '280px',
               }}
             >
-              {slots.default?.()}
-            </Layout.Content>
+              <div>Context</div>
+            </WrapContent>
+            <GlobalFooter
+              links={[
+                {
+                  key: '1',
+                  title: 'Pro Layout',
+                  href: 'https://www.github.com/vueComponent/pro-layout',
+                  blankTarget: true,
+                },
+                {
+                  key: '2',
+                  title: 'Github',
+                  href: 'https://www.github.com/vueComponent/ant-design-vue-pro',
+                  blankTarget: true,
+                },
+                {
+                  key: '3',
+                  title: '@Sendya',
+                  href: 'https://www.github.com/sendya/',
+                  blankTarget: true,
+                }
+              ]}
+              copyright={(<a href="https://github.com/vueComponent" target="_blank">vueComponent</a>)}
+            />
           </Layout>
         </Layout>
       </RouteContextProvider>

src/SiderMenu/SiderMenu.tsx

 import './index.less';
-import { computed, ref, VNodeChild, inject } from 'vue';
+import { FunctionalComponent, computed, ref, VNodeChild } from 'vue';
 
 // import 'ant-design-vue/es/layout/style';
 // import Layout from 'ant-design-vue/es/layout';
-import { Layout } from 'ant-design-vue';
+import { Layout, Menu } from 'ant-design-vue';
 import BaseMenu, { BaseMenuProps } from './BaseMenu';
 import { WithFalse } from '../typings';
 import { SiderProps } from './typings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-import { defaultProProviderProps, injectProConfigKey } from '../ProProvider';
+import { useProProvider } from '../ProProvider';
 
 const { Sider } = Layout;
 
@@ -85,7 +85,7 @@ export const defaultRenderLogoAndTitle = (
 export const defaultRenderCollapsedButton = (collapsed?: boolean) =>
   collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />;
 
-const SiderMenu = (props: SiderMenuProps) => {
+const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
   const {
     menuData,
     collapsed,
@@ -94,8 +94,11 @@ const SiderMenu = (props: SiderMenuProps) => {
     onOpenChange,
     onSelect,
     collapsedWidth = 48,
+    onCollapse,
+    menuFooterRender = false,
+    collapsedButtonRender = defaultRenderCollapsedButton,
   } = props;
-  const { getPrefixCls } = inject(injectProConfigKey, defaultProProviderProps);
+  const { getPrefixCls } = useProProvider();
   const baseClassName = getPrefixCls('sider');
 
   const isMix = computed(() => props.layout === 'mix');
@@ -136,8 +139,13 @@ const SiderMenu = (props: SiderMenuProps) => {
         collapsible={false}
         collapsedWidth={collapsedWidth}
       >
-        <div class="ant-pro-sider-logo">{headerDom}</div>
-        <div style="flex: 1 1 0%; overflow: hidden auto;">
+        <div class={`${baseClassName}-logo`}>{headerDom}</div>
+        {extraDom && (
+          <div class={`${baseClassName}-extra ${!headerDom && `${baseClassName}-extra-no-logo`}`}>
+            {extraDom}
+          </div>
+        )}
+        <div style="flex: 1; overflow: hidden auto;">
           <BaseMenu
             menus={menuData}
             theme={props.theme}
@@ -159,6 +167,29 @@ const SiderMenu = (props: SiderMenuProps) => {
             }}
           />
         </div>
+        <div class={`${baseClassName}-links`}>
+          <Menu
+            class={`${baseClassName}-link-menu`}
+            inlineIndent={16}
+            theme={runtimeTheme.value}
+            selectedKeys={[]}
+            openKeys={[]}
+            mode="inline"
+          >
+            <Menu.Item
+              class={`${baseClassName}-collapsed-button`}
+              title={false}
+              onClick={() => {
+                if (onCollapse) {
+                  onCollapse(!props.collapsed);
+                }
+              }}
+            >
+              {collapsedButtonRender(collapsed)}
+            </Menu.Item>
+          </Menu>
+        </div>
+        {menuFooterRender && <div class={`${baseClassName}-footer`}>{menuFooterRender(props)}</div>}
       </Sider>
     </>
   );

src/SiderMenu/index.tsx

@@ -7,6 +7,7 @@ import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
 
 const SiderMenuWrapper: FunctionalComponent<SiderMenuProps & PrivateSiderMenuProps> = (
   props,
+  { emit },
 ) => {
   return props.isMobile ? (
     <Drawer>

src/WrapContent.tsx

+import { FunctionalComponent, ref, toRefs } from 'vue';
+import { Layout } from 'ant-design-vue';
+import { useProProvider } from './ProProvider';
+import { ContentWidth } from './typings';
+
+const { Content } = Layout;
+
+export interface WrapContentProps {
+  isChildrenLayout?: boolean;
+  location?: string | string[] | any;
+  contentHeight?: number;
+  contentWidth?: ContentWidth;
+}
+
+export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots }) => {
+  const { getPrefixCls } = toRefs(useProProvider());
+  const prefixCls = getPrefixCls.value('basicLayout');
+  const classNames = ref({
+    [`${prefixCls}-content`]: true,
+    [`${prefixCls}-has-header`]: true,
+  });
+
+  return <Content class={classNames.value}>{slots.default?.()}</Content>;
+};
+
+export default WrapContent;