open-index/open-npm huggingface dataset:
npm package: @kbse-frame/system
Description: KBSE 前端开发框架
Latest version: 1.1.7

# kb-smart Pro 基础框架

开发请参考以下文档

## 开始一个页面

以 demo 页面为例

### 在 `src/pages` 新建文件夹`demo`,文件夹内新建`index.tsx`.

```bash
src
├── pages
│   ├── demo
│   │   ├── index.less
│   │   └── index.tsx
```

注：

- 页面组件请使用`.tsx`,工具文件使用`.ts`

### 编写页面代码

```tsx
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 以及面包屑等。参数会透传给 antd `PageHeader`,可以使用其功能，见[PageHeader](https://ant.design/components/page-header-cn/#header)
- 组件和页面都推荐使用`react hooks`方式编写，class 组件建议新功能页面不使用

### 数据流方案

可以继续使用[`dva`](https://dvajs.com/)数据方案，也可以使用[`useModel`](https://umijs.org/zh-CN/plugins/plugin-model)方案，基础框架都使用`useModel`hooks 方案，需要消费基础框架的数据，请使用以下方式

```ts
const { currentUser } = useModel('system');
```

#### models

`dva` 和 `useModel` 都支持

推荐使用`hooks model` + `useRequest`编写 model，以下是框架里的写法：

```ts
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](https://ahooks.js.org/zh-CN/hooks/async)
- 上例中，是在系统render前就会请求必备的全局数据，业务页面数据，请使用参数`{ manual: true }`和`run`手动触发请求。
npm package: @kbse/system
Description: KBSE 前端开发框架
Latest version: 0.2.13

# kb-smart Pro 基础框架

开发请参考以下文档

## 开始一个页面

以 demo 页面为例

### 在 `src/pages` 新建文件夹`demo`,文件夹内新建`index.tsx`.

```bash
src
├── pages
│   ├── demo
│   │   ├── index.less
│   │   └── index.tsx
```

注：

- 页面组件请使用`.tsx`,工具文件使用`.ts`

### 编写页面代码

```tsx
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](https://ant.design/components/page-header-cn/#header)
- 组件和页面都推荐使用`react hooks`方式编写，class 组件建议新功能页面不使用

### 数据流方案

可以继续使用[`dva`](https://dvajs.com/)数据方案，也可以使用[`useModel`](https://umijs.org/zh-CN/plugins/plugin-model)方案，基础框架都使用`useModel`hooks 方案，需要消费基础框架的数据，请使用以下方式

```ts
const { currentUser } = useModel('system');
```

#### models

`dva` 和 `useModel` 都支持

推荐使用`hooks model` + `useRequest`编写 model，以下是框架里的写法：

```ts
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](https://ahooks.js.org/zh-CN/hooks/async)
- 上例中，是在系统render前就会请求必备的全局数据，业务页面数据，请使用参数`{ manual: true }`和`run`手动触发请求。