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,56 +36,62 @@ const App = defineComponent({
     });
 
     return () => (
-      <div>
+      <div class="demo-page-box" style="padding: 20px; background: #ccc;">
         <ProProvider prefixCls={'ant-pro'} contentWidth={'Fixed'}>
           <RouteContextProvider>
-            <PageContainer
-              title="Title"
-              subTitle="This is a subtitle"
-              breadcrumb={{ routes }}
-              onBack={() => null}
-              extra={[
-                <Button key="3">操作</Button>,
-                <Button key="2">操作</Button>,
-                <Button key="1" type="primary">
-                  主操作
-                </Button>,
-              ]}
-              content={
-                <Descriptions size="small" column={2}>
-                  <Descriptions.Item label="创建人">张三</Descriptions.Item>
-                  <Descriptions.Item label="联系方式">
-                    <a>421421</a>
-                  </Descriptions.Item>
-                  <Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
-                  <Descriptions.Item label="更新时间">2017-10-10</Descriptions.Item>
-                  <Descriptions.Item label="备注">中国浙江省杭州市西湖区古翠路</Descriptions.Item>
-                </Descriptions>
-              }
-              extraContent={
-                <Space size={24}>
-                  <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
-                  <Statistic title="Unmerged" value={93} suffix="/ 100" />
-                </Space>
-              }
-              tabList={[
-                { key: '1', tab: 'Details' },
-                { key: '2', tab: 'Rule' },
-              ]}
-              tabActiveKey={state.tabActiveKey}
-              onTabChange={(key: string) => {
-                console.log('onTabChange', key);
-                state.tabActiveKey = key;
-              }}
-              footer={[
-                <Button key="3">重置</Button>,
-                <Button key="2" type="primary">
-                  提交
-                </Button>,
-              ]}
-            >
-              <div>Page Content</div>
-            </PageContainer>
+            <div style="background: #fff; height: 500px;">
+              <PageContainer
+                title="Title"
+                subTitle="This is a subtitle"
+                breadcrumb={{ routes }}
+                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>,
+                  <Button key="1" type="primary">
+                    主操作
+                  </Button>,
+                ]}
+                content={
+                  <Descriptions size="small" column={{ md: 2 }}>
+                    <Descriptions.Item label="创建人">张三</Descriptions.Item>
+                    <Descriptions.Item label="联系方式">
+                      <a>421421</a>
+                    </Descriptions.Item>
+                    <Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
+                    <Descriptions.Item label="更新时间">2017-10-10</Descriptions.Item>
+                    <Descriptions.Item label="备注">中国浙江省杭州市西湖区古翠路</Descriptions.Item>
+                  </Descriptions>
+                }
+                extraContent={
+                  <Space size={24}>
+                    <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
+                    <Statistic title="Unmerged" value={93} suffix="/ 100" />
+                  </Space>
+                }
+                tabList={[
+                  { key: '1', tab: 'Details' },
+                  { key: '2', tab: 'Rule' },
+                ]}
+                tabProps={{
+                  type: 'card',
+                }}
+                tabActiveKey={state.tabActiveKey}
+                onTabChange={(key: string) => {
+                  console.log('onTabChange', key);
+                  state.tabActiveKey = key;
+                }}
+                footer={[
+                  <Button key="3">重置</Button>,
+                  <Button key="2" type="primary">
+                    提交
+                  </Button>,
+                ]}
+              >
+                <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[]> {