tntd 1.4.17 → 2.0.0-beta-1

package/lib/Layout/README.md

@@ -1,783 +0,0 @@
-## 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 | 无          | 否       |