0.2.13 • Published 3 years ago
@kbse/system v0.2.13
kb-smart Pro 基础框架
开发请参考以下文档
开始一个页面
以 demo 页面为例
在 src/pages
新建文件夹demo
,文件夹内新建index.tsx
.
src
├── pages
│ ├── demo
│ │ ├── index.less
│ │ └── index.tsx
注:
- 页面组件请使用
.tsx
,工具文件使用.ts
编写页面代码
import React from 'react';
import styles from './index.less';
import { Page } from '@kbse/system';
import { useModel } from 'umi';
const Demo: React.FC = () => {
const { currentUser } = useModel('system');
return (
<Page pageFooter>
<div className={styles.container}> demo</div>
<div>My name is {currentUser?.name}</div>
</Page>
);
};
export default Demo;
保存,访问http://localhost:8000/#/demo
即可看到页面
注:
Page
是@kbse/system
基础框架提供的页面组件,提供了页面 header 和 footer 以及面包屑等。参数会透传给 antdPageHeader
,可以使用其功能,见PageHeader- 组件和页面都推荐使用
react hooks
方式编写,class 组件建议新功能页面不使用
数据流方案
可以继续使用dva
数据方案,也可以使用useModel
方案,基础框架都使用useModel
hooks 方案,需要消费基础框架的数据,请使用以下方式
const { currentUser } = useModel('system');
models
dva
和 useModel
都支持
推荐使用hooks model
+ useRequest
编写 model,以下是框架里的写法:
import { useMemo } from 'react';
import { useRequest } from 'umi';
import { MenuDataItem } from '@ant-design/pro-layout';
import { Resource, User, LocalResource, ResourceType, ENV } from '../schema/system';
import { getResources, getCurrentUser, getEnv } from '../services/system';
import { formatJsonMessage } from '../utils/locale';
export interface Params {
resources: Resource[];
resourcesTree: LocalResource[];
refreshResources: () => Promise<Resource[]>;
routes: MenuDataItem[];
currentUser?: User;
loading: boolean;
env?: ENV; // 环境
}
/**
* 系统加载资源,在所有页面render前
*/
export default (): Params => {
// 加载资源
const { data: resources = [], loading: loadingResource, refresh: refreshResources } = useRequest(
getResources,
);
// 当前用户
const { data: currentUser, loading: loadingCurUser } = useRequest(getCurrentUser);
// 环境
const { data: env, loading: loadingEnv } = useRequest(getEnv);
// 树形资源
const resourcesTree = useMemo(() => {
return list2Tree(resources);
}, [resources]);
// 路由
const routes: MenuDataItem[] = useMemo(() => {
return resources2Routes(resources);
}, [resources]);
return {
resources,
routes,
resourcesTree,
refreshResources,
currentUser,
loading: loadingResource || loadingCurUser || loadingEnv,
env,
};
};
其中,hooks 就是纯函数,请务必写函数返回的类型,如上面的Params
,消费数据useModel('xxx')
返回值有语法提示,减少文件切换和手误成本。
注
- 关于请求 Hooks
useRequest
,请参考一个强大的管理异步数据请求的 Hook - 上例中,是在系统render前就会请求必备的全局数据,业务页面数据,请使用参数
{ manual: true }
和run
手动触发请求。
0.2.13
3 years ago
0.2.12
3 years ago
0.2.11
3 years ago
0.2.10
3 years ago
0.2.9
3 years ago
0.2.7
3 years ago
0.2.8
3 years ago
0.2.6
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
4 years ago
0.0.22
4 years ago
0.0.21
4 years ago
0.0.20
4 years ago
0.0.19
4 years ago
0.0.18
4 years ago
0.0.17
4 years ago
0.0.16
4 years ago
0.0.15
4 years ago
0.0.13
4 years ago
0.0.14
4 years ago
0.0.12
4 years ago
0.0.11
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago