README.md 2.55 KB
Newer Older
Julien Benchetrit's avatar
Julien Benchetrit committed
1 2
## Quick start

张烨's avatar
张烨 committed
3 4
```bash
git clone https://g.civnet.cn:8443/test/maintenance.git
Julien Benchetrit's avatar
Julien Benchetrit committed
5

张烨's avatar
张烨 committed
6
npm install
Julien Benchetrit's avatar
Julien Benchetrit committed
7

张烨's avatar
张烨 committed
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
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,
+      },
```
张烨's avatar
张烨 committed
28 29

## 环境变量
张烨's avatar
张烨 committed
30

张烨's avatar
张烨 committed
31 32
目前支持的变量有 `PROXY, HOST, PORT`

张烨's avatar
张烨 committed
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
修改`.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>
```
罗剑's avatar
罗剑 committed
54
如果用户有`LOGIN`权限时,则展示url匹配的路由页面,否则跳转到登录页.
张烨's avatar
张烨 committed
55 56


张烨's avatar
张烨 committed
57
用户的权限是在登录时调用`setAuthority`存储到一个对象中的,详见[登录页](./src/pages/user/login/index.js),[setAuthority](./src/utils/authority.js)
张烨's avatar
张烨 committed
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

## 路由配置
路由配置详见[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
张烨's avatar
张烨 committed
84
引入[appConnector](./src/containers/App/store/index.js)包裹一下自己的组件,即可获取redux里面的值,包括`userMode`,`token`
张烨's avatar
张烨 committed
85 86 87

## 常见组件封装

罗剑's avatar
罗剑 committed
88

张烨's avatar
张烨 committed
89 90 91 92
1.  [图片库](./src/components/Upload/index.tsx)
2.  [人员/角色选择器](./src/components/CheckGroup/index.jsx)
3.  [展开控制树](./src/components/ExpendableTree/index.js)
4.  [基础表单](./src/components/BaseForm/index.js)