门户V2页面说明

新门户主要由登录页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 ——行为逻辑块

1 登录页

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

登录页由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 {
    ...
}

2 门户页

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

门户页由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{
    ...
}

3 首页

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

首页由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 {
    ...
}