tntd 1.3.64 → 1.4.0

package/es/Layout/README.md

@@ -0,0 +1,783 @@
+## Layout外框架组件
+### 代码演示
+#### 初始化数据
+```jsx
+import { createGlobalStyle } from 'styled-components';
+import 'antd/dist/antd.css';
+
+const GlobalStyle = createGlobalStyle`
+  .site-body {
+    .ichYgh {
+        padding: 0;
+        overflow: visible;
+    }
+}
+`;
+
+const icons = [
+  "setting",
+  "puzzle",
+  "plus",
+  "minus",
+  "selfhood",
+  "zhuanzhang",
+  "shoukuan",
+  "jizhang",
+  "database",
+  "system",
+  "pm",
+  "zhibiao",
+  "workflow",
+  "network",
+  "tongji",
+  "jianmo",
+  "deal-type",
+  "org",
+  "limit",
+  "role",
+  "user-group",
+  "yunwei",
+  "permission",
+  "guanjia",
+  "pingfen",
+  "spider",
+  "tag",
+  "model",
+  "yuce",
+  "celve1",
+  "check",
+  "access",
+  "loan",
+  "case",
+  "entry"
+]; 
+const menus = [
+    {
+        code: 'dadicasesearch1',
+        enName: 'dadicasesearch1',
+        icon: 'home',
+        menuName: '案件检索1',
+        path: '/orion/case/relation1',
+        code: 'relation1'
+    },
+    {
+        children: new Array(16).fill({
+            code: 'dadicasesearch',
+            enName: 'dadicasesearch',
+            icon: 'home',
+            menuName: '案件检索',
+            path: '/orion/case/relation'
+        }).map((item, index) => ({
+            ...item,
+            code: `${item.code}-${index}`,
+            menuName: `${item.menuName}-${index}`,
+            path: `${item.path}${index}`
+        })),
+        code: 'casegraph',
+        enName: 'casegraph',
+        groupIcon: 'setting',
+        groupName: '案件分析'
+    },
+    {
+        children: [
+            {
+                code: 'taglist',
+                enName: 'taglist',
+                icon: 'home',
+                menuName: '标签管理',
+                path: 'http://baidu.com/orion/tag/list'
+            },
+            {
+                code: 'tagdata',
+                enName: 'tagdata',
+                icon: 'layer-color',
+                menuName: '打标数据管理abc',
+                path: '/orion/tag/datalist'
+            },
+            {
+                children: [
+                    {
+                       code: 'taglist11',
+                        enName: 'taglist11',
+                        icon: 'home',
+                        menuName: '标签管理11',
+                        path: '/orion/tag/list11',  
+                    },
+                    {
+                        code: 'taglist22',
+                        enName: 'taglist22',
+                        icon: 'home',
+                        menuName: '标签管理22',
+                        path: '/orion/tag/list22', 
+                    }
+                ],
+                code: 'tagmm-g',
+                enName: 'tagmm-g', 
+                groupIcon: 'tag',
+                groupName: '标签分组',
+            },
+            {
+                children: [
+                    {
+                       code: 'tagdata11',
+                        enName: 'tagdata11',
+                        icon: 'home',
+                        menuName: '数据管理11',
+                        path: '/orion/tagdata/list11',  
+                    },
+                    {
+                        code: 'tagdata22',
+                        enName: 'tagdata22',
+                        icon: 'home',
+                        menuName: '数据管理22',
+                        path: '/orion/tagdata/list22', 
+                    }
+                ],
+                code: 'tagdata-g',
+                enName: 'tagdata-g', 
+                groupIcon: 'tag',
+                groupName: '标签数据分组',
+            }
+        ],
+        code: 'tagmm',
+        enName: 'tagmm', 
+        groupIcon: 'tag',
+        groupName: '标签管理3'
+    },
+    {
+        children: [
+            {
+                code: 'QX0101',
+                enName: 'Organization Manage',
+                icon: 'org',
+                menuName: '机构管理\t',
+                path: '/bridge/permission/organization'
+            },
+            {
+                code: 'QX0102',
+                enName: 'Role Manage',
+                icon: 'role',
+                menuName: '角色管理',
+                path: '/bridge/permission/role'
+            },
+            {
+                code: 'QX0103',
+                enName: 'User Manage',
+                icon: 'user-group',
+                menuName: '用户管理',
+                path: '/bridge/permission/user'
+            }
+        ],
+        code: 'permission',
+        enName: 'Permission Manage',
+        groupIcon: 'user-group',
+        groupName: '权限管理'
+    },
+    {
+        children: [
+            {
+                code: 'QX0201',
+                enName: 'Function Register',
+                icon: 'python',
+                menuName: '功能注册',
+                path: '/bridge/system/register'
+            },
+            {
+                code: 'QX0202',
+                enName: 'Solution',
+                icon: 'python',
+                menuName: '解决方案',
+                path: '/bridge/system/solution'
+            },
+            {
+                code: 'QX0203',
+                enName: 'System Configuration',
+                icon: 'Python',
+                menuName: '系统设置',
+                path: '/bridge/system/startup'
+            }
+        ],
+        code: 'QX0203',
+        enName: 'System Configuration',
+        groupIcon: 'puzzle',
+        groupName: '解决方案'
+    } 
+];
+
+const userInfo = {
+    account: 'admin',
+    avatar: 'male1',
+    lang: 'cn',
+    layout: 'default',
+    theme: 'default',
+    userName: '超级管理员',
+    uuid: 'c693e0ec0a2e4bf8b71eef8152d88a29'
+};
+
+Object.assign(window, {
+    store: {
+        menus,
+        userInfo
+    }
+});
+
+ReactDOM.render(
+    <GlobalStyle />,
+    document.getElementById('root')
+);
+```
+
+#### 全家桶模式（新）
+```jsx
+import React, { useContext } from 'react';
+import ReactDOM from 'react-dom';
+import { Layout, QueryListScene } from 'tntd';
+
+const { menus, userInfo } = window.store;
+const { AuthContext } = Layout;
+const onMenuChange = param => {
+    console.log('onMenuChange:', param);
+};
+const onMenuSelect = param => {
+    console.log('onMeneMenuSelectChange:', param);
+};
+const onLanguageChange = language => {
+    console.log('onLanguageChange:', language);
+};
+const onThemeChange = theme => {
+    console.log('onThemeChange:', theme);
+};
+const onAppChange = param => {
+    console.log('onAppChange', param);
+};
+const onLogoClick = () => {
+    console.log('logo click');
+};
+
+ReactDOM.render(
+    <Layout
+        // logo={<img src="" />}
+        logo="xxxx"
+        name="私有云全家桶"
+        enName="Private Cloud"
+        config={{
+            globalNavigation: true,
+            theme:true,
+            language: true
+        }}
+        appList={[
+            { key: 'movie', name: '电影图谱', children: [{ key: 'movie1', name: 'subitem' }] },
+            { key: 'enterprise', name: '企业图谱' }
+        ]}
+        userInfo={userInfo}
+        selectedMenuKey="tagdata"
+        menus={menus}
+        onMenuChange={onMenuChange}
+        onMenuSelect={onMenuSelect}
+        onLanguageChange={onLanguageChange}
+        onThemeChange={onThemeChange}
+        onAppChange={onAppChange}
+        onLogoClick={onLogoClick}
+        onLogout={() => alert('do logout')}
+    >
+        <AuthContext.Consumer>
+            {
+                auth => {
+                    window.auth = auth;
+                    console.log('window.auth...', auth('dadicasesearch'))
+                    return <QueryListScene title="Page Title"></QueryListScene>;
+                }
+            }
+        </AuthContext.Consumer>
+    </Layout>,
+    document.getElementById('root')
+)
+```
+
+#### 全家桶模式（多页签）
+```jsx
+import React, { useContext, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Layout, QueryListScene } from 'tntd';
+
+const { menus, userInfo } = window.store;
+const { HeaderTabs } = Layout;
+
+const LayoutTabsDemo = () => {
+    const selectedMenu = menus[2].children[1];
+    const [tabs, setTabs] = useState([{ ...selectedMenu, key: selectedMenu.code, name: selectedMenu.menuName }]);
+    const [activeTab, setActiveTab] = useState(tabs[0]);
+    const [appList,setAppList] = useState([]);
+    const [orgAppList,setOrgAppList] = useState([]);
+    const onMenuChange = param => {
+        console.log('onMenuChange:', param);
+    };
+    const onMenuSelect = param => {
+        console.log('onMeneMenuSelectChange:', param);
+        const { data } = param;
+
+        const currentTab = tabs.find(({ key }) => key === data.code);
+
+        if (currentTab) {
+            setActiveTab(currentTab);
+        } else {
+            const newTabs = [...tabs, { ...data, key: data.code, name: data.menuName }];
+            setTabs(newTabs);
+            setActiveTab(newTabs[newTabs.length - 1]);
+        }
+    };
+    const onTabChange = tab => {
+        setActiveTab(tab);
+    };
+    const onTabClose = (tab, tabs, activeTab) => {
+        setTabs(tabs);
+        setActiveTab(activeTab);
+    }
+    const onLanguageChange = language => {
+        console.log('onLanguageChange:', language);
+    };
+    const onThemeChange = theme => {
+        console.log('onThemeChange:', theme);
+    };
+    const onAppChange = param => {
+        console.log('onAppChange', param);
+    };
+    const onLogoClick = () => {
+        console.log('logo click');
+    };
+
+    return (
+        <Layout
+            type="enterprise"
+            logo="xxxx"
+            name="私有云全家桶"
+            enName="Private Cloud"
+            config={{
+                globalNavigation: true,
+                theme: true,
+                language:true
+            }}
+            orgTreeConfig={true}
+            orgList = {{
+                'uuid':'da435225387f40dd80f7757d712c999b',
+                'gmtCreate':1625820797000,
+                'gmtModified':1625820797000,
+                'code':'s',
+                'level':1,
+                'name':'szx',
+                'children': [
+                    {
+                        'uuid':'73efa4a6be2541cb9226c6c40c12d076',
+                        'gmtCreate':1625820807000,
+                        'gmtModified':1625820807000,
+                        'code':'1',
+                        'level':2,
+                        'parentUuid':'da435225387f40dd80f7757d712c999b',
+                        'name':'活动撒活动啊活动撒后发多少分活动啊等候骚的撒后发多少大号双方都撒哈佛的撒哈佛大事好大红花都送啊',
+                        'children': [
+                            {
+                                'uuid':'019c7af784c4481491975eb46e362bcf',
+                                'gmtCreate':1625820823000,
+                                'gmtModified':1625820823000,
+                                'code':'2',
+                                'level':3,
+                                'parentUuid':'73efa4a6be2541cb9226c6c40c12d076',
+                                'name':'szx2',
+                                'children': [
+                                    {
+                                        'uuid':'01997af784c4481491975eb46e362bcf',
+                                        'gmtCreate':1625820823000,
+                                        'gmtModified':1625820823000,
+                                        'code':'2',
+                                        'level':4,
+                                        'parentUuid':'73efa4a6be2541cb9226c6c40c12d076',
+                                        'name':'szx4'
+                                    }
+                                ]
+                            },
+                            {
+                                'uuid':'83cf61ad78cd440aaec3b101ee76c789',
+                                'gmtCreate':1626058346000,
+                                'gmtModified':1626058346000,
+                                'code':'3',
+                                'level':3,
+                                'parentUuid':'73efa4a6be2541cb9226c6c40c12d076',
+                                'name':'szx3'
+                            }
+                        ]
+                    }
+                ]
+            }}
+            onOrgChange={(org)=>{
+                setOrgAppList([
+                    { key: 'movie2', name: '电影图谱' },
+                    { key: 'enterprise2', name: '企业图谱' }
+                ])
+            }}
+            orgAppShow={true}
+            orgAppList={orgAppList}
+            appList={appList}
+            userInfo={userInfo}
+            selectedMenuKey={activeTab.key}
+            collapseIconPlacement="bottom"
+            menus={menus}
+            headerTabs={<HeaderTabs
+                tabs={tabs}
+                selectedKey={activeTab.key}
+                onTabChange={onTabChange}
+                onTabClose={onTabClose}
+                appListVisible={true}
+                orgListVisible={false}
+                orgAppListVisible={false}
+            />}
+            onMenuChange={onMenuChange}
+            onMenuSelect={onMenuSelect}
+            onLanguageChange={onLanguageChange}
+            onThemeChange={onThemeChange}
+            onAppChange={onAppChange}
+            onLogoClick={onLogoClick}
+            onLogout={() => alert('do logout')}
+        >
+            <QueryListScene title="Page Title"></QueryListScene>
+        </Layout>
+    );
+};
+
+ReactDOM.render(
+    <LayoutTabsDemo />,
+    document.getElementById('root')
+)
+```
+
+#### 全家桶模式（旧）
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Layout, Icon, DevelopmentLogin } from 'tntd';
+
+const { menus, userInfo } = window.store;
+const { HeaderNavs, HeaderActionItem } = Layout;
+const onMenuChange = param => {
+    console.log('onMenuChange:', param);
+};
+const onMenuSelect = param => {
+    console.log('onMenuMenuSelectChange:', param);
+};
+const onLanguageChange = language => {
+    console.log('onLanguageChange:', language);
+};
+const onThemeChange = theme => {
+    console.log('onThemeChange:', theme);
+};
+const onAppChange = param => {
+    console.log('onAppChange', param);
+};
+const onLogoClick = () => {
+    console.log('logo click');
+};
+
+ReactDOM.render(
+    <Layout
+        logo=""
+        name="私有云全家桶xxxx"
+        enName="Private Cloud"
+        // size="large"
+        compatible
+        appList={[
+            { key: 'movie', name: '电影图谱' },
+            { key: 'enterprise', name: '企业图谱' }
+        ]}
+        userInfo={userInfo}
+        selectedMenuKey="tagdata"
+        menus={menus}
+        onBeforeMenuChange={params => {
+            console.log('onBeforeMenuChange...', params.data);
+            return params.data.path !== '/orion/tag/list';
+        }}
+        onMenuChange={onMenuChange}
+        onMenuSelect={onMenuSelect}
+        onLanguageChange={onLanguageChange}
+        onThemeChange={onThemeChange}
+        onAppChange={onAppChange}
+        onLogoClick={onLogoClick}
+        extraHeaderActions={[
+            <HeaderActionItem key="help" onClick={() => console.log('Help')}>
+                <DevelopmentLogin
+                    signIn={userInfo => new Promise(resolve => {
+                        setTimeout(() => {
+                            resolve({ tdToken: '_td_token_', userId: '_uid_' });
+                        }, 100);
+                    })}
+                />
+            </HeaderActionItem>
+        ]}
+    >
+    </Layout>,
+    document.getElementById('root')
+)
+```
+
+#### 全家桶Paas模式
+```jsx
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Radio } from 'antd';
+import { Layout } from 'tntd';
+
+const DemoPage = props => {
+    const { menus, userInfo } = window.store;
+    const [menuAlignMode, setMenuAlignMode] = useState('side');
+
+    const onApplicationChange = appKey => {
+        console.log('onApplicationChange:', appKey);
+    };
+    const onLanguageChange = language => {
+        console.log('onLanguageChange...', language);
+    };
+    const onLogout = () => {
+        console.log('onLogout...');
+    };
+    // 头部导航菜单切换事件(menuAlignMode 为 top 时才有该回调函数)
+    const onHeaderNavChange = navItem => {
+        console.log('onHeaderNavChange', navItem);
+    };
+
+    return (
+        <>
+            <div>
+                <Radio.Group
+                    value={menuAlignMode}
+                    onChange={evt => setMenuAlignMode(evt.target.value)}
+                >
+                    <Radio.Button value="side">侧边栏菜单</Radio.Button>
+                    <Radio.Button value="top">顶部导航菜单</Radio.Button>
+                </Radio.Group>
+            </div>
+            <Layout
+                type="paas"
+                menuAlignMode={menuAlignMode}
+                compatible
+                // size="large"
+                appKey="orion"
+                logo=""
+                name="私有云全家桶"
+                enName="Private Cloud"
+                userInfo={userInfo}
+                menus={menus}
+                // menuAlignMode 为 top 时才有该回调函数
+                onHeaderNavChange={onHeaderNavChange}
+                onBeforeMenuChange={(menuInfo, currentMenuKey) => {
+                    console.log('onBeforeMenuChange...', menuInfo);
+                    if (menuInfo.key === 'tagdata') {
+                        alert('特殊处理，禁止选中菜单')
+                        return false;
+                    }
+
+                    return true;
+                }}
+                onApplicationChange={onApplicationChange}
+                onLanguageChange={onLanguageChange}
+                onLogout={onLogout}
+            >
+            </Layout>
+        </>
+    );
+};
+
+
+ReactDOM.render(
+    <DemoPage />,
+    document.getElementById('root')
+)
+```
+
+
+#### Paas模式 - 自定义菜单
+```jsx
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { Menu, Layout as AntLayout } from 'antd';
+import { Layout, Icon } from 'tntd';
+
+const { HeaderNavs, HeaderActionItem } = Layout;
+const { Sider } = AntLayout;
+const { menus, userInfo } = window.store;
+const navs = [
+    {
+        name: '数据开发',
+        key: '/dataocean/',
+        menus: [
+            { name: '作业开发', key: 'home' },
+            { name: '资源管理', key: 'resource' },
+            { name: '函数管理', key: 'func' }
+        ]
+    },
+    {
+        name: '数据管理',
+        key: '/dataocean/dm',
+        menus: [
+            { name: '数据管理概览', key: 'overview' },
+            { name: '数据查找', key: 'search' },
+            { name: '我的表管理', key: 'table' }
+        ]
+    },
+    {
+        name: '运维中心',
+        key: '/dataocean/jm',
+        menus: [
+            { name: '数据管理概览', key: 'jm1' },
+            { name: '数据查找', key: 'jm2' },
+            { name: '我的表管理', key: 'jm3' }
+        ]
+    },
+    {
+        name: '系统管理',
+        key: '/dataocean/system',
+        menus: [
+            { name: '数据管理概览', key: 'system1' },
+            { name: '数据查找', key: 'system2' },
+            { name: '我的表管理', key: 'system3' }
+        ]
+    }
+];
+
+const SideMenu = props => {
+    const [collapsed, setCollapsed] = useState(false);
+    const { selectedNav } = props;
+    const MenuTitleBlock = styled.div`
+        margin: 0 24px;
+        padding-right: 8px;
+        line-height: 60px;
+        height: 60px;
+        vertical-align: middle;
+        border-bottom: 1px solid #e8e8e8;
+        font-size: 16px;
+        i {
+            float: right;
+            line-height: 60px;
+            cursor: pointer;
+        }
+    `;
+
+    console.log('collapsed...', collapsed);
+
+    return (
+        <Sider width={216} theme="light" collapsed={collapsed}>
+            <MenuTitleBlock>
+                {
+                    !collapsed && selectedNav.name
+                }
+                <Icon
+                    type={collapsed ? 'menu-unfold' : 'menu-fold'}
+                    onClick={() => {
+                        setCollapsed(!collapsed);
+                    }}
+                />
+            </MenuTitleBlock>
+            <Menu
+                defaultSelectedKeys={selectedNav.menus[0].key}
+                mode="inline"
+                theme="light"
+            >
+                {
+                    (selectedNav.menus || []).map(menu => (
+                        <Menu.Item key={menu.key}>
+                            <Icon type="chart-pie-alt" />
+                            <span>{menu.name}</span>
+                        </Menu.Item>
+                    ))
+                }
+            </Menu>
+        </Sider>
+    );
+};
+
+const PaasLayout = props => {
+    const [selectedNav, setSelectedNav] = useState(navs[0]);
+    const onNavChange = nav => {
+        setSelectedNav(nav);
+    };
+
+    return (
+        <Layout
+            type="paas"
+            compatible
+            // size="large"
+            appKey="orion"
+            logo=""
+            name="私有云全家桶"
+            enName="Private Cloud"
+            userInfo={userInfo}
+            menus={menus}
+            config={{
+                language: false,
+                // theme: false
+            }}
+            headerNavs={
+                <HeaderNavs navs={navs} onChange={onNavChange} />
+            }
+            extraHeaderActions={[
+                <HeaderActionItem key="help" onClick={() => alert('Help')}>
+                    <Icon type="zhibiao" />
+                </HeaderActionItem>,
+                <HeaderActionItem key="mail" onClick={() => alert('Mail')}>
+                    <Icon type="guanjia" />
+                </HeaderActionItem>
+            ]}
+            sideMenu={<SideMenu selectedNav={selectedNav} />}
+        >
+            {props.children}
+        </Layout>
+    );
+};
+
+ReactDOM.render(
+    <PaasLayout>
+        PaasLayout
+    </PaasLayout>,
+    document.getElementById('root')
+)
+```
+
+### API
+#### Layout
+
+| 属性名称            | 属性说明                                                                                                     | 类型             | 默认值                                                            | 是否必须                       |
+| :------------------ | :----------------------------------------------------------------------------------------------------------- | :--------------- | :---------------------------------------------------------------- | :----------------------------- |
+| type                | Layout类型，全家桶风格、Paas风格；default                                                                    | string           | default                                                           | 否                             |
+| size                | Layout里面header，菜单等高度尺寸设置，目前是不设置或设置为large，large是老的样式                             | string           | default                                                           | 否                             |
+| compatible          | 兼容模式，新的全家桶设计样式与现有的不一致，为了保证老的项目过渡，需要保持原有的全家桶风格则设置             | boolean          | false                                                             | 否                             |
+| isEmptyLayout                | 该参数控制是否使用空layout，不显示框架的header和sideMenu                                                                    | boolean           | false                                                           | 否                             |
+| appKey              | 当前应用的前缀,如 图谱 orion, 机器学习 turing, 解决方案中path的前缀，type=paas才需要                         | string           | 无                                                                | 否                             |
+| logo                | 应用的logo, 如果对应的应用logo图片有内置在layout组件中则，传对应应用的key即可，否则传React Component、string | React Component  | 无                                                                | 是                             |
+| name                | 应用名称                                                                                                     | string           | 无                                                                | 是                             |
+| enName              | 应用名称英文名称                                                                                             | string           | 无                                                                | 否（需要支持英文模式则需要传） |
+| userInfo            | 用户信息,统一登录用户信息数据直接传过来                                                                      | Object           | 无                                                                | 否                             |
+| selectedMenuKey     | 激活菜单选中,目前是用menuTree中的code作为标识                                                                | string           | menus[0].children[0]                                              | 否                             |
+| menus               | 菜单信息，解决方案中menuTree接口获取的菜单数据直接传过来                                                     | Array            | 无                                                                | 否                             |
+| formatMenuPath               | 点击菜单默认跳转的路径是菜单数据中的path字段，如果有需要动态添加参数的场景可传入此函数进行处理                                                     | Function            | 无                                                                | 否                             |
+| changeRouter               | 当前子应用内路由跳转逻辑，目前业务传path => history.push(path)即可                                                     | Function            | path => window.history.pushState(menuInfo, 'menuName', path)                                                               | 否                             |
+| config              | 功能配置信息，主题(theme)、语言切换(language)、用户头像(avatar)、应用切换(application)、全局导航(globalNavigation)                       | Object           | { theme: true, language: true, avatar: true, application: false, globalNavigation: false } | 否                             |
+| extendMap              | 解决方案中配置的显示信息，由解决方案菜单树接口中下发该字段，主要配置Layout类型、支持语言、主题切换配置、菜单布局方式、全局导航功能开启，如果和config中的某些功能配置相同，取config中的配置值Object.assign({}, extendMap, config)| Object           | 无 | 否                             |
+| headerNavs          | 头部导航组件，如果有需要可以在头部区域加导航                                                                 | React Component  | 无                                                                | 否                             |
+| extraHeaderActions | 头部右上角一些额外操作项，主要适用于一些定制化场景                                                           | Array、ReactNode | 无                                                                | 否                             |
+| sideMenu            | 侧边栏菜单组件，有自定义侧边栏菜单的场景时可用                                                               | ReactNode        | 无                                                                | 否                             |
+| onMenuChange        | 菜单切换回调事件                                                                                             | Function         | 无                                                                | 否                             |
+| onBeforeMenuChange        | 菜单切换前回调事件（return false则可以禁止默认行为）                                                                                             | Function         | 无                                                                | 否                             |
+| onMenuSelect        | 菜单选中回调事件                                                                                             | Function         | 无                                                                | 否                             |
+| onThemeChange       | 主题切换回调事件                                                                                             | Function         | 无                                                                | 否                             |
+| onLanguageChange          | 语言切换回调事件                                                                                             | Function         | 无                                                                | 否                             |
+| onApplicationChange | 应用切换回调事件                                                                                             | Function         | 无                                                                | 否                             |
+| onLogoClick         | logo区域点击事件                                                                                             | Function         | 无                                                                | 否                             |
+| onLogout         | 退出登录事件                                                                                             | Function         | 跳转登录页面                                                                | 否                             |
+| onCollapseChange         | 左侧菜单树收起/展开变化事件件                                                                                             | Function         |                                                                 | 否                             |
+
+
+#### HeaderNavs
+| 属性名称    | 属性说明                                                        | 类型     | 默认值      | 是否必须 |
+| :---------- | :-------------------------------------------------------------- | :------- | :---------- | :------- |
+| navs        | 导航数据,格式[{ name: "看板", key: "/dashboard" }], key要求唯一 | Array    | 无          | 是       |
+| selectedKey | 指定选中的导航                                                  | String   | navs[0].key | 否       |
+| onChange    | 导航变化事件回调函数onChange(Object: selectedNav)               | Function | 无          | 否       |
+| onSelect    | 选中导航事件回调函数onSelect(Object: selectedNav)               | Function | 无          | 否       |