1.1.7 • Published 2 years ago
@kbse-frame/system v1.1.7
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-frame/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-frame/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
手动触发请求。