门户页面说明

门户页面主要包括：登录页 login、门户页 index 和首页 main。每个页面由 w 文件、js 文件和 css 文件组成。

企业门户应用使用Ant Design Pro Components提供的 ProLayout、PageContainer、LoginForm/Page 等组件实现，组件说明可参考官网。

页面展现通过 js 代码实现，js 文件命名规范如下

xxx.js ——w 文件对应的 js 文件
xxx.Axx.js ——渲染逻辑块以及对应的事件逻辑
xxx.axx.js ——行为逻辑块

登录页

登录页实现用户名密码登录、手机号验证码登录、忘记密码等功能，运行效果如下图所示

登录页由 login.w、login.js、login.Form.js 和 login.css 等文件组成，位于企业门户应用的 UI2/pcx/user 目录下

login.w

调用 login.js 的 loginRender 方法渲染页面

<antdpro:Page>
    {$page.loginRender()}
</antdpro:Page>

login.js

引用 login.Form.js 文件，实现渲染页面。参数 this.state 在 onPageInitState 方法中准备。除了渲染页面，登录、重置密码等逻辑都在这个 js 文件中实现。

import LoginForm from './login.Form';
loginRender() {
    return <LoginForm {...this.state}></LoginForm>
}

login = async (values) => {
    ...
}

changePwd = async (values) => {
    ...
}

login.Form.js

实现渲染页面的功能

export default (props) => {
    return <div>...</div>
};

login.css

定义登录页的样式

.login-form {
    ...
}

门户页

门户页显示顶部导航栏，左侧功能树，运行效果如下图所示

门户页由 index.w、index.js、index.*.js 和 index.css 等文件组成，位于企业门户应用的 UI2/pcx 目录下

index.w

调用 index.js 的 layoutRender 方法渲染页面

<antdpro:Page>
    {$page.layoutRender()}
</antdpro:Page>

index.js

使用 pro-components 提供的 ProLayout 组件实现门户页

layoutRender() {
    return <>
        {this.state.userInfo?this._layoutRender():null}
    </>
}

_layoutRender() {    
    return <ProLayout>...</ProLayout>
}

index.Axx.js

将门户页分为8个渲染区，分别是标题区 HeaderTitle、菜单搜索区 HeaderSearchInput、顶部操作区 HeaderActions、用户头像区 HeaderAvatar、功能树区 MenuItem、功能树底部区 MenuFooter、已打开功能页签区 MultiPageTabs、当前打开页面区 PageContainer，具体位置如下图所示

每个渲染区使用独立的 js 实现渲染，再整合到 index.js 中运行

//顶部区域
import HeaderTitle from './index.HeaderTitle';
import HeaderSearchInput from './index.HeaderSearchInput';
import HeaderActions from './index.HeaderActions';
import HeaderAvatar from './index.HeaderAvatar';
//侧边栏区域 主要是菜单
import MenuItem from './index.MenuItem';
import MenuFooter from './index.MenuFooter';
import MultiPageTabs from './index.MultiPageTabs';

//通过原型链扩展方案 拆分首页各个模块 方便理解 定制
Object.assign(IndexPage.prototype, HeaderTitle, HeaderSearchInput,HeaderActions,HeaderAvatar,MenuItem,MenuFooter,IndexActions
);

index.axx.js

门户页包括4个行为逻辑块 js 文件

index.initState.js 门户初始的静态配置，通过修改 state 实现动态配置
index.actions.js 页面逻辑，例如获取门户配置信息
index.usePageTabs.js 已打开功能页签逻辑，例如关闭页签
index.utils.js 工具类

index.css

定义门户页的样式

.uix-portal{
    ...
}

首页

首页位于门户页内部，用于显示小部件，运行效果如下图所示

首页由 main.w、main.js、main.*.js 和 main.css等文件组成，位于企业门户应用的 UI2/pcx/main 目录下

main.w

调用 main.js 的 mainRender 方法渲染页面

<antdpro:Page>
    {$page.mainRender()}
</antdpro:Page>

main.js

引用 main.Layout.js 文件，实现渲染页面。参数 this.state 在 onPageInitState 方法中准备。调用了 main-design.actions.js 文件中的 fetchContentSettings 方法获取当前登录者的首页布局，

mainRender() {
    return <Layout show={this.state.show} page={this}
    layouts={this.state.currentLayout?.layouts}
    widgets={this.state.currentLayout?.widgets}></Layout>;
}

main.Layout.js

引用 main.Widget.js 文件，实现渲染小部件。

import Widget from './main.Widget';

export default function Layout(props) {
    return <ResponsiveReactGridLayout>...</ResponsiveReactGridLayout>
};

main.Widget.js

用卡片显示小部件

export default function Widget(props){
    return <Card>...</Card>
}

main.css

定义首页的样式

.uix-widget-card {
    ...
}

桌面端门户页面说明