扩展 Layouts 配置

用 Create Godzilla App 创建的 UI 应用，已经集成了很多功能，包括登录页面，主页左侧的菜单树，主页顶部的 logo、用户信息等，底部的状态栏等等。用户只需编写 pages 页面即可，但是在很多情况下，有些是需要提供配置功能的，以满足不同客户的需求，例如最普通的 logo，不同客户有自己的公司的 logo，这个需要根据每个客户提供个性化的配置。

框架在高度集成的基础上，也提供了灵活的配置，可以修改登录页的 logo、主页顶部的 logo、增删改主页顶部和底部的组件等等功能，下面提供几个例子。

修改登录页的 logo

第一步，新增配置文件 app/layouts/index.ts(或者 index.js)，注意文件路径不可改，内容如下。

import defaultLayouts from '@/containers/defaultLayouts';
import { cloneDeep } from 'lodash';

// 这里需要先深拷贝一份配置
const layouts = cloneDeep(defaultLayouts);

export default layouts;

第二步，引入自定义的 logo，并修改 logoStyle，然后重新 npm start 后登录页面的 logo 就会替换为新的 logo，注意，需自行修改样式以达到最佳效果。

import defaultLayouts from '@/containers/defaultLayouts';
import { cloneDeep } from 'lodash';

const logo = require('./logo.png');

// 这里需要先深拷贝一份配置
const layouts = cloneDeep(defaultLayouts);

 // 修改登录页面的logo
layouts.login.logoStyle = {
  background: `url(${logo}) no-repeat`,
  backgroundSize: '146px 16px',
};

export default layouts;

修改系统主页的 logo

同理，修改主页的 logo 也很简单，如下：

// 修改主页面的logo
layouts.header.logoStyle = {
  background: `url(${logo}) no-repeat`,
  backgroundSize: '100% 25px',
  marginTop: '15px',
};

在主页显示系统日期

假设我们想在主页的顶部显示系统日期，那么也很简单，只需要提供相应的组件并挂载上去即可。

第一步，在 layouts 目录下新增 SysData.tsx 组件（目录和组件名可以随意定义，并无要求）。

// layouts/SysDate.tsx
import React from 'react';
import moment from 'moment';
const styles = require('./index.scss');

const SysDate = () => {
  const date = moment(new Date().getTime()).format('YYYY-MM-DD');
  return (
    <div className={styles['sys-date']}>
      <span>
        系统日期：
        {date}{' '}
      </span>
    </div>
  );
};

export default SysDate;

index.scss 文件

// layouts/index.scss
.sys-date {
  display: flex;
  align-items: center;
  justify-content: center;
}

第二步，修改 layouts/index.ts 中的 header.items 配置，将该组件插入其中,这样就可以将组件挂在到 Header 区域了，非常方便。

+ layouts.header.items.splice(4, 0, {
+   component: SysDate,
+   fixed: 'right',
+ });

在主页删除切换主题的按钮

主页顶部 Header 中的组件和底部 Footer 中的组件都可以随意增删改，例如删除主题切换按钮。

+layouts.header.items.splice(3, 1);

其它配置项

layouts.login.afterLogin

// ...
// 登录成功后，在重定向到主页(/app)之前，调用afterLogin的钩子，返回promise对象
// Promise.resolve()，重定向到主页
// Promise.reject()，停留在登录页面，并且框架不做任何提示,需要业务自己提示（比如调用Alert.error(...)))
layouts.login.afterLogin = async () => {
  return Promise.resolve();
  // return Promise.reject();
};
// ...

layouts.login.getUserButton

// ...
// 调用接口获取用户按钮权限
layouts.login.getUserButton = async () => {
  return Promise.resolve([{ code: '001', name: '新增' }]);
};
// ...

layouts.login.login

修改登录接口（用户名/密码登录方式）

layouts.login.login = async () => {
  params.loginPassword = Util.sha256Encode(params.loginPassword);
  return new API('auth').post('/api/v1/users/login', params);
};

layouts.login.logout

修改登出接口（用户名/密码登录方式）

layouts.login.logout = async () => {
  return new API('auth').put('/api/v1/users/logout');
};

layouts.main.afterGlobalInit

全局函数（变量）初始化完毕，渲染页面之前调用，在这里可以修改或者定制框架的一些行为，例如在这里调用 DBUtil.setAdaptor 自定义模板的存储方式，详情请参考：使用自定义-adaptor

// ...
//
layouts.main.afterGlobalInit = () => {};
// ...

layouts.main.sendMetrics

提供用户行为上传接口

// ...
// 将用户行为数据上传到服务端
layouts.main.sendMetrics = (params) => {
  let api = new API('auth');
  return api.post('/api/v1/client_metrics', params, { loading: false });
};
// ...

layouts.main.getUserMenu

默认获取用户菜单数据的逻辑如下，静态菜单数据保存在 BFF 中

// 默认为
layouts.main.getUserMenu = () => {
  const api = new API('auth');
  const userInfo = appWindow.userLocalStore.getItem('userInfo'); // 获取用户数据
  return api.get<MenuItem[]>('/api/v1/users/{id}/menus', {
    id: userInfo.id,
    appId: process.env.APP_ID,
  });
};

可以修改获取用户菜单数据的接口

layouts.main.getUserMenu = () => {
  // 菜单数据的格式要求如下，如果后端提供的菜单数据格式不一致，则需要转换
  const menus = [
    {
      id: 10, // ID，可以为字符串
      pId: 10, // 父ID
      icon: 'chanpinguanli', // 菜单图标（一级菜单需要）
      appId: 'portal', // APP ID
      name: '快速入门', // 菜单名称
    },
    {
      id: 11,
      pId: 10,
      appId: 'portal',
      name: '新页面',
      url: 'sample/NewPage', // 菜单URL
    },
    {
      id: 12,
      pId: 10,
      appId: 'portal',
      name: '用户管理',
      url: 'sample/User',
    },
  ];
  const res = {
    code: 200,
    data: menus,
  };
  return Promise.resolve(res);
};

layouts.main.updateUserPwd

提供修改用户自身密码

// 默认为
layouts.main.updateUserPwd = (params) => {
  const api = new API('auth');
  params.oldPassword = Util.sha256Encode(params.oldPassword);
  params.newPassword = Util.base64Encode(params.newPassword);
  return api.put('/api/v1/users/pwd_update', params);
};

layouts.main.updateUserProfile

保存个人设置

// 默认为
layouts.main.updateUserProfile = (params) => {
  console.log('updateUserProfile', params);
  return Promise.resolve({
    code: 200,
    msg: '操作成功',
    data: null,
  });
};

layouts.main.getUserProfile

获取个人设置

// 默认为
layouts.main.getUserProfile = (params) => {
  return Promise.resolve({
    code: 200,
    msg: '操作成功',
    data: {
      lockScreen: 1,
    },
  });
};

layouts.main.getMicroAppEntryScript

获取微应用首页静态资源

// 默认为
layouts.main.getMicroAppEntryScript = (appId) => {
  return new API('auth').get('/api/v1/applications/{appId}/html_entry_scripts', { appId });
};

layouts.provider.config

自定义 ConfigProvider 组件配置。

// 默认为
layouts.provider.config = {
  agConfig: {
    theme: 'ag-theme-balham',
    enableTooltip: true,
  },
  dictConfig: {
    optionNameProp: 'name',
    optionIdProp: 'id',
  },
};