## Quick start

```bash
git clone https://g.civnet.cn:8443/test/maintenance.git

npm install

npm start
```

## 提交代码
提交代码时有提交信息校验,形式为 `[type]: message`, `type`有[fix, style, perf, merge, feat](./commitlint.config.js)等,不按这个格式将无法提交

```bash
git commit -m 'fix: 修复了一个bug'
```

## 代码格式化
代码风格规范校验,需要在提交前处理好代码格式,否则将无法提交

一般设置保存自动启用prettier格式化,这样就不需要手动修复代码格式:
```js
// settings.json
+     "editor.codeActionsOnSave": {
+        "source.fixAll": true,
+      },
```

## 环境变量

目前支持的变量有 `PROXY, HOST, PORT`

修改`.env`文件的`PROXY`值为你要代理的服务器地址,要带上协议,多个代理之间用分号分开,详见[.env](./.env)
本地使用可以新建`.env.local`文件,这个文件不会提交, 本地开发时优先于`.env`

## 权限控制
权限主要由 `@/components/Authorized`组件控制,使用时引用`@/utils/authority.js`导出的组件。
用法如下:

```jsx
<Router basename={BASENAME}>
    <Authozed
        noMatch={
        <UserLayout>
            <UserLogin />
        </UserLayout>
        }
        authority={[AUTHORITY.LOGIN]}
    >
        <Switch>{renderRoutes(routesConfig.routes)}</Switch>
    </Authozed>
</Router>
```
如果用户有`LOGIN`权限时,则展示url匹配的路由页面,否则跳转到登录页.


用户的权限是在登录时调用`setAuthority`存储到一个对象中的,详见[登录页](./src/pages/user/login/index.js),[setAuthority](./src/utils/authority.js)

## 路由配置
路由配置详见[routes/config.js](./src/routes/config.js)

若要隐藏配置路由可以加上 `hideMenu` 设为true:
```js
export default {
  routes: [
    {
      path: '/user',
      component: UserLayout,
      hideMenu: true,
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: Login,
        },
      ],
    },
  ]
}
```
`authority`属性用来进行权限控制,除了常见的路由配置属性,其他属性将作为`props`被传递到组件内部

## redux
引入[appConnector](./src/containers/App/store/index.js)包裹一下自己的组件,即可获取redux里面的值,包括`userMode`,`token`等

## 常见组件封装


1.  [图片库](./src/components/Upload/index.tsx)
2.  [人员/角色选择器](./src/components/CheckGroup/index.jsx)
3.  [展开控制树](./src/components/ExpendableTree/index.js)
4.  [基础表单](./src/components/BaseForm/index.js)