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 以及面包屑等。参数会透传给 antd PageHeader,可以使用其功能，见PageHeader
• 组件和页面都推荐使用react hooks方式编写，class 组件建议新功能页面不使用

数据流方案

可以继续使用dva数据方案，也可以使用useModel方案，基础框架都使用useModelhooks 方案，需要消费基础框架的数据，请使用以下方式

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手动触发请求。