# 系统导航栏组件

## 1.功能说明

系统导航栏，根据传入的参数，按上下布局，分别展示logo和系统选项、底部选项。

## 2.组件依赖

- antd

- classnames

## 3.依赖结构体

```tsx
export interface Item {
    name: string,
    type?: number,
    url?: string,
    crossDomain?: boolean,
    icon?: any,
    iconActive?: any,
}
```
## 4.组件接口

```tsx
interface Iprops {
    logoSrc?: string, // logo图片路径
    activeType: number, // 当前激活Item的type
    items?: Item[], // 系统的选项
    bottomItems?: Item[], // 位于底部的选项
    indicatorColor?: string, // 指针颜色
    onClick?: (item: Item) => void, // 点击选项的回调
}
```
## 5.案例

1)导入组件

```tsx
import SystemNavigation from './common/system-navigation';
```

2)使用

```tsx
 <SystemNavigation activeType={1}
    logoSrc="/assets/logo-color.png"
    items={[
        {
            name: '我的',
            type: 1,
            url: '/me',
            icon: <ProjectOutlined />,
            iconActive: <ProjectFilled />,
        },
        {
            name: '库',
            type: 2,
            url: process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'http://lib.tncet.com',
            crossDomain: true,
            icon: <AppstoreOutlined />,
            iconActive: <AppstoreFilled />
        },
    ]} 
    bottomItems={[
        {
            name: '退出登录',
            type: 11,
            url: '',
            crossDomain: true,
            icon: <Avatar style={{ backgroundColor: '#999' }} className="avatar" size="small" icon={<UserOutlined />} />,
            iconActive: <Avatar style={{ backgroundColor: '#0283b5' }} className="avatar" size="small" icon={<UserOutlined />} />
        },
        {
            name: '设置',
            type: 12,
            url: '/settings',
            crossDomain: false,
            icon: <SettingOutlined />,
            iconActive: <SettingFilled />
        }
    ]}
/>
```