## 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)