# antd-deer-ui

**Repository Path**: gjq0208/react-component-template

## Basic Information

- **Project Name**: antd-deer-ui
- **Description**: react+typescript开发；
开发预览web使用storybook做组件文档工具；
rollup.js做组件打包dist
jest.js做单元测试工具
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-04
- **Last Updated**: 2021-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# antd-deer-ui 基于antd封装的ui库
- react+typescript+antd
- 开发预览web使用storybook做组件文档工具
-  rollup.js做组件打包dist jest.js做单元测试工具<br />
   
[在线预览](http://g_guojq.gitee.io/react-component-template)
## 安装
```shell
npm install antd-deer-ui
or
yarn add antd-deer-ui
```
## 使用
```shell
import {Layout} from 'antd-deer-ui'
or
const {Layout} = from 'antd-deer-ui'
```
## Layout

![layout](./docs/layout.png)

基于antd构建的管理后台ui模版
### LayoutProps
```ts
export interface LayoutProps {
  style?: React.CSSProperties;
  className?: string;
  /**
   *  图标
   */
  logo?: any;
  /**
   *  项目名
   */
  proName?: string;
  /**
   * aliveControl 路由缓存函数，若要使用请安装[react-router-cache-route](https://github.com/CJY0208/react-router-cache-route)
   * 替换react-router-dom中Switch=>CacheSwitch,Route=>CacheRoute,并将dropByCacheKey、refreshByCacheKey方法放入该对象导入。导入改对象后默认开启路由缓存功能。
   */
  aliveControl?: aliveControlInterface;
  /**
   *  路由表
   */
  routeItems: Array<RouteItem>;
  /**
   * history 对象
   */
  history: History;
  /**
   *  用户名
   */
  username: string;
  /**
   *  退出函数
   */
  onClickDrop: () => void;
}
```
### 基础使用
```tsx
import {Layout} from 'antd-deer-ui'
const MyLayout = () => <Layout
        proName='admin-demo'
        routeItems={routeItems}
        history={createHashHistory()}
        username={'测试'}
        onClickDrop={() => {console.log('退出')}}
>
   <div>layout</div>
</Layout>
```

### 可配置化菜单
#### RouteItem
```ts
export interface RouteItem {
  path: string;
  exact: boolean;
  meta: {
    tabFixed?: boolean;
    isCache?: boolean;
    hidden?: boolean;
    name: string;
    icon: Function | string;
  };
  component: ComponentType;
  routes?: Array<RouteItem>;
}
```
用户只需提供以下格式结构数据，菜单即可生成。支持小分辨率自适应。
```ts
// 例子
const routeItems = [
  {
    path: '/home',
    exact: true,
    meta: {
      tabFixed: true,
      isCache: true,
      icon: 'iconuser',
      name: '首页',
    },
    component: () => <div>home</div>,
  },
  {
    path: '/test',
    exact: true,
    meta: {
      isCache: true,
      icon: 'iconuser',
      name: '测试页',
    },
    component: () => <div>test</div>,
  },
]
```
### 可缓存tab页
#### 根据用户点击菜单，增加tab，用户可对tab进行关闭、刷新操作（仅缓存路由情况使用）
#### 非缓存使用
```tsx
const myHistory = createHashHistory()

const routeItems = [
  {
    path: '/home',
    exact: true,
    meta: {
      tabFixed: true,
      isCache: true,
      icon: 'iconuser',
      name: '首页',
    },
    component: () => <div>首页</div>,
  },
  {
    path: '/test',
    exact: true,
    meta: {
      isCache: true,
      icon: 'iconuser',
      name: '测试页',
    },
    component: () => <div>
      test
    </div>,
  },
]

const Routes = () => {
  const renderRoutes = () => {
    let routes = []
    const routeMap = (arr) => {
      arr.forEach(route => {
        if (!route.meta.hidden) {
          routes.push(
            <Route
              key={route.path}
              exact={route.exact}
              path={route.path}
              component={route.component}
            />,
          )
        }
        if (route.routes && route.routes.length) routeMap(route.routes)
      })
    }
    routeMap(routeItems)
    return routes
  }
  return (
    <Router history={myHistory}>
      <Switch>
        <Layout
          routeItems={routeItems}
          username={'测试'}
          proName={'admin'}
          history={myHistory}
          onClickDrop={() => {}}>
          {renderRoutes()}
        </Layout>
      </Switch>
    </Router>
  )
}
```
#### 缓存路由
```tsx
// yarn add react-router-cache-route or npm install react-router-cache-route
import {CacheRoute, CacheSwitch, refreshByCacheKey, dropByCacheKey} from 'react-router-cache-route'

const aliveControl = {
   dropByCacheKey,
   refreshByCacheKey
}

const Routes = () => {
  const renderRoutes = () => {
    let routes = []
    const routeMap = (arr) => {
      arr.forEach(route => {
        if (!route.meta.hidden) {
          routes.push(
            <CacheRoute  // 替换Route => CacheRoute
              when={() => !!route.meta.isCache} // 是否缓存
              cacheKey={route.path} // 缓存key
              key={route.path}
              exact={route.exact}
              path={route.path}
              component={route.component}
            />,
          )
        }
        if (route.routes && route.routes.length) routeMap(route.routes)
      })
    }
    routeMap(routeItems)
    return routes
  }
  return (
    <Router history={myHistory}>
      <CacheSwitch aliveControl={aliveControl}> // 替换 Switch => CacheSwitch, 添加aliveControl
        ...
      </CacheSwitch>
    </Router>
  )
}
```
### 面包屑
提供页面层级关系。