xq-manager-app

导出一个根组件,根据app.config.json配置文件生成路由

Usage no npm install needed!

<script type="module">
  import xqManagerApp from 'https://cdn.skypack.dev/xq-manager-app';
</script>

README

导出一个根组件,根据app.config.json配置文件生成路由

使用说明

1、安装

yarn add xq-manager-app

or

npm install xq-manager-app --dev

2、配置 app.config.json (该文件必须在src根目录下)

  • app.config.json配置模板
    {
      "menu": [{
          "key": "/a",
          "title": "模块A",
          "icon": "form",
          "auth": "/a",
          "subMenu": [{
              "key": "/a/a",
              "title": "子模块a"
            },
            {
              "key": "/a/b",
              "title": "子模块b"
            }
          ]
        },
        {
          "key": "/b",
          "title": "模块B",
          "icon": "form",
          "subMenu": [{
              "key": "/b/a",
              "title": "子模块a"
            },
            {
              "key": "/b/b",
              "title": "子模块b"
            }, {
              "key": "/b/c",
              "title": "子模块c-不会显示在menu菜单中",
              "hidden": true
            }
          ]
        },
        {
          "key": "/c",
          "title": "模块C",
          "icon": "form"
        }
      ],
      "other": [{
          "key": "/i",
          "title": "全局模块I"
        },
        {
          "key": "/j",
          "title": "全局模块J"
        }
      ],
      "404": true
    }
    
  • 字段解释
    • menu 此字段配置的页面将在左侧导航栏中显示
    • other 此字段配置的页面将在全局显示
    • 404 路由匹配失败后将显示404页面
    • key 文件夹生成路径和导航路径
    • title 描述信息
    • icon antd中的icon字体图标
    • subMenu 嵌套的导航
    • hidden 为true时该页面不会在导航栏中显示
    • auth 权限字段,必须明确指定一个字符串,当auth字段转换成布尔值为false时,该页面可被访问,为true时会匹配传入的权限信息

2、使用

  • 在项目根目录下运行以下命令创建 app.config.json 配置的页面和路由信息

    链接xq-manager-app库

    yarn link xq-manager-app
    

    or

    npm link xq-manager-app
    

    创建页面和路由管理

    yarn run create
    

    or

    npm run create
    
  • App 组件的用法

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { App } from 'xq-manager-app';
    
    ReactDOM.render(
      <App
        headerHeight={100}
        headerComponent={<p style={{ color: '#fff' }}>自定义 header</p>}
        logo={
          (collapsed)=>{ return <span>logo</span> }
        } 
        logout={this.handleLogout.bind(this)}/>,
      document.getElementById('root')
    );
    
  • App 组件props说明

    • headerHeight 自定义header的高度
    • headerComponent 自定义header部分,传入一个react组件
    • logo 自定义logo部分,该函数会传入一个布尔值,代码左侧导航栏的收缩状态
    • navType tab式的面包屑 tab | breadcrumb
    • logout 退出登录的回调
    • tabNum 最多显示多少个标签
    • historyType 路由类型 borwser | hash

3、路由跳转

  • 使用props的history

    // 只能从配置页面的props中获得
    this.props.history.push(path, state);
    
  • 使用导出的history

    import { history } from 'xq-manager-app';
    
    // 任意地方可以使用
    history.push(path, state);
    

4、设置权限信息

// app.config.json文件中配置的页面都会接收该函数
let authInfo=[
  {auth: '/a',name:'模块A'},
  {auth: '/b',name:'模块B'},
]

this.props.setAuthInfo(authInfo);

5、设置、删除面包屑

// app.config.json文件中menu字段配置的页面都会接收该函数

let arr = [
    { name: '面包屑名称1' },
    { path: '/b/b?a=1&b=2', name: '模块b' },
    { path: '/a/a', name: '面包屑名称2' }
  ];

this.props.setBreadcrumb(arr);

// 删除面包屑,仅 <App navType="tab"/> 可用
this.props.setBreadcrumb([{path:'/a/b?id=123', name:'模块b'}]);
this.props.deleteBreadcrumb(['/a/b?id=123']);

6、加载全局loading

import {Spin} from 'xq-manager-app';

Spin.spin(); //显示loading,可以加载多次
Spin.removeSpin();  //删除一个loading
Spin.removeSpin(true); //删除全部loading

7、重置App的state

// 只能从配置页面的props中获得
this.props.resetState();