fix: style

examples/base-menu.tsx

@@ -15,7 +15,7 @@ const BaseMenuDemo = {
       themeChecked: true,
       modeChecked: true,
     })
-    const { state: menuState } = useMenuState({
+    const [menuState] = useMenuState({
       collapsed: false,
       openKeys: ['/dashboard'] as string[],
       selectedKeys: ['/dashboard/monitor'] as string[],

examples/index.tsx

@@ -11,7 +11,7 @@ const BasicLayout = defineComponent({
   name: 'BasicLayout',
   inheritAttrs: false,
   setup(_, { slots, attrs }) {
-    const { state: menuState } = useMenuState({
+    const [menuState] = useMenuState({
       collapsed: false,
       openKeys: [],
       selectedKeys: ['/welcome'],

examples/page-container.tsx

 import { createApp, defineComponent, reactive } from 'vue';
 import 'ant-design-vue/dist/antd.less';
-import { Button, Descriptions, Space, Statistic, Tabs } from 'ant-design-vue';
+import { Button, Descriptions, Space, Statistic, Tag, message } from 'ant-design-vue';
 import { PageContainer } from '../src/PageContainer';
 import { default as ProProvider } from '../src/ProProvider';
 import { createRouteContext } from '../src/RouteContext';
 import { LikeOutlined } from '@ant-design/icons-vue';
-
-const { Item: DescriptionsItem } = Descriptions;
+import './index.less';
 
 const App = defineComponent({
   name: 'App',
@@ -37,14 +36,16 @@ const App = defineComponent({
     });
 
     return () => (
-      <div>
+      <div class="demo-page-box" style="padding: 20px; background: #ccc;">
         <ProProvider prefixCls={'ant-pro'} contentWidth={'Fixed'}>
           <RouteContextProvider>
+            <div style="background: #fff; height: 500px;">
               <PageContainer
                 title="Title"
                 subTitle="This is a subtitle"
                 breadcrumb={{ routes }}
-              onBack={() => null}
+                onBack={() => message.info('@back click')}
+                tags={['Tag 1', 'Tag 2'].map(tag => (<Tag color="blue">{tag}</Tag>))}
                 extra={[
                   <Button key="3">操作</Button>,
                   <Button key="2">操作</Button>,
@@ -53,7 +54,7 @@ const App = defineComponent({
                   </Button>,
                 ]}
                 content={
-                <Descriptions size="small" column={2}>
+                  <Descriptions size="small" column={{ md: 2 }}>
                     <Descriptions.Item label="创建人">张三</Descriptions.Item>
                     <Descriptions.Item label="联系方式">
                       <a>421421</a>
@@ -73,6 +74,9 @@ const App = defineComponent({
                   { key: '1', tab: 'Details' },
                   { key: '2', tab: 'Rule' },
                 ]}
+                tabProps={{
+                  type: 'card',
+                }}
                 tabActiveKey={state.tabActiveKey}
                 onTabChange={(key: string) => {
                   console.log('onTabChange', key);
@@ -87,6 +91,7 @@ const App = defineComponent({
               >
                 <div>Page Content</div>
               </PageContainer>
+            </div>
           </RouteContextProvider>
         </ProProvider>
       </div>

examples/side-menu.tsx

@@ -10,7 +10,7 @@ import * as Icon from '@ant-design/icons-vue';
 
 const DemoComponent = {
   setup() {
-    const { state: menuState } = useMenuState({
+    const [menuState] = useMenuState({
       collapsed: false,
       openKeys: [''],
       selectedKeys: ['/welcome'],

src/PageContainer/index.less

@@ -2,6 +2,7 @@
 
 @pro-layout-page-container: ~'@{ant-prefix}-pro-page-container';
 
+
 .@{pro-layout-page-container}-children-content {
   margin: 24px 24px 0;
 }
@@ -13,11 +14,19 @@
       margin: 0;
     }
     // fix antd@4 upgrade PageHeader style.
-    .ant-page-header-heading {
-      .ant-page-header-heading-title,.ant-page-header-heading-extra {
+    .@{ant-prefix}-page-header-heading {
+      .@{ant-prefix}-page-header-back {
+        margin: 12px 0;
+        margin-right: 16px;
+      }
+      .@{ant-prefix}-page-header-heading-title,
+      .@{ant-prefix}-page-header-heading-extra {
         margin: 4px 0;
       }
-      .ant-page-header-heading-sub-title {
+      .@{ant-prefix}-page-header-heading-sub-title {
+        margin: 9px 12px 9px 0;
+      }
+      .@{ant-prefix}-page-header-heading-tags {
         margin: 9px 0;
       }
     }

src/PageContainer/index.tsx

@@ -78,6 +78,7 @@ const renderFooter = (
     tabProps,
     prefixedClassName,
   } = props;
+  console.log('tabProps', tabProps);
   if (tabList && tabList.length) {
     return (
       <Tabs

src/PageContainer/interfaces/Tabs.ts

 import { VNodeChild, CSSProperties } from 'vue';
 
+export type TabBarType = 'line' | 'card' | 'editable-card';
+export type TabSize = 'default' | 'large' | 'small';
+export type TabPosition = 'left' | 'right';
+export type TabBarExtraPosition = TabPosition;
+
+export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
+
+export type TabBarExtraContent = VNodeChild | TabBarExtraMap;
+
 export interface TabsProps {
   prefixCls?: string;
   class?: string | string[];
@@ -7,10 +16,11 @@ export interface TabsProps {
   id?: string;
 
   activeKey?: string;
+  hideAdd?: boolean;
+  // Unchangeable
+  // size?: TabSize;
+  tabBarStyle?: CSSProperties;
+  tabPosition?: TabPosition;
+  type?: TabBarType;
+  tabBarGutter?: number;
 }
-
-export type TabBarExtraPosition = 'left' | 'right';
-
-export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
-
-export type TabBarExtraContent = VNodeChild | TabBarExtraMap;

src/SiderMenu/BaseMenu.tsx

@@ -42,10 +42,7 @@ interface MenuStated {
   openKeys: string[];
 }
 
-export interface MenuStateWatched {
-  state: MenuStated;
-  watchRef: WatchStopHandle;
-}
+export type MenuStateWatched = [state: MenuStated, watchRef: WatchStopHandle]
 
 export function useMenuState({
   collapsed = false,
@@ -71,10 +68,7 @@ export function useMenuState({
     },
   );
 
-  return {
-    state,
-    watchRef,
-  };
+  return [state, watchRef]
 }
 
 export function useRootSubmenuKeys(menus: RouteProps[]): ComputedRef<string[]> {