在文档中心登录前进行品牌展示，为满足企业或组织的的个性化需求

如何为文档中心定制欢迎页？

该组件仅适用于私有化WPS365版本

1. 方案概述

欢迎页是由客户自己设计和定义的独立页面，可以在文档中心登录前进行品牌展示。

总的来说，欢迎页的内容客户可以根据自己的需求自行设计，通常比较高频的使用方式有：

1. 视觉品牌植入： 展示企业LOGO、标语等元素，强化员工和客户对公司品牌的日常感知。
2. 文化仪式感营造： 根据节日/企业纪念日更新主题（如周年庆动态海报、春节祝福），增强员工情感联结。

如果没有定制欢迎页，客户在登录文档中心时，会直接进入文档中心登录页，输入账号和密码进行登录。

客户定制了文档中心欢迎页之后，遇到需要登录的场景，会先跳转进入企业欢迎页，在欢迎页进行相关操作（例如：点击【去使用】按钮）之后再进入登录页。

欢迎页页面示例，企业可自定义欢迎语等页面设计

实现效果	客户在进行登录操作前，被拦截跳转到欢迎页：
支持端	文档中心PC端、文档中心H5端
版本限制	2024-0613（含）以上
操作系统限制	支持X86、XC

2. 使用指南

👉独立页面插件

• 欢迎页： /c/cid/index.html#/welcome

👉能力

sdk.login.pageInit

👉方法

onIntercept

登陆页面-页面初始化拦截

其他说明：无

参数

示例

sdk.login.pageInit.onIntercept((data)=>{
  console.log(data, 'onIntercept')
  return true
})

👉代码示例

目录结构

ecis-frontend-plugin-custom-frame/
├── src/
│   ├── components/
│   │   ├── welcome/
│   │   │   ├── index.tsx            //欢迎页
│   │   │   ├── index.module.less
│   ├── libs/
│   │   ├── i18n/
│   │   │   ├── locales/
│   │   │   │   ├── zh-CN.json  // 包含中文语言的翻译键值对
│   │   │   │   ├── zh-HK.json  // 包含繁体语言的翻译键值对
│   │   │   │   ├── en-US.json  // 包含英文语言的翻译键值对
│   ├── web/
│   │   ├── bootstrap.tsx   // 页面开发根节点组件路径
│   ├── plugin/
│   │   ├── index.tsx   // 插件功能具体实现

路由划分

src/web/bootstrap.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

import Welcome from '../componetns/welcome/index';
import '../libs/i18n';
import './index.css';

// eslint-disable-next-line react/no-deprecated
ReactDOM.render(
  <Router>
    <Switch>
      <Route path={'/welcome'} exact={true} component={Welcome} />
    </Switch>
  </Router>,
  document.querySelector('#app')
);

欢迎页定制

src/components/welcome/index.tsx

📌 注意

1. /c/cid/index.html/#/welcome 地址为插件独立页面地址
2. 在欢迎页中通过cb获取登录地址，进行等待或其他逻辑后跳转回登录页

import React from 'react';
import { Button } from 'antd';
import sdk from '@libs/sdk';

import styles from './index.module.less';

const Welcome = () => {
  /**
   * 可在此基于客户提供诉求，进行定制实现
   * ......
   * 诉求完成后，跳转回登录页
   */

  const setStoreItem = () => {
    // 此处为示例，可依需求自行实现
    localStorage.setItem('LOGIN_WELCOME_INFO', JSON.stringify({ isJump: true }));
  };

  const redirectDamian = () => {
    const webpath = sdk.utils.env.webpath;
    window.location.replace(webpath);
  };

  const login = () => {
    try {
      const cb = new URL(window.location.href).searchParams.get('cb');
      if (cb) {
        // 跳转前，记录已经跳转过
        setStoreItem();
        return window.location.replace(cb);
      }
    } catch (error) {
      console.error('welcome page jump to login page error', error);
    }
    setStoreItem();
    return redirectDamian();
  };

  return (
    <div className={styles.welcome}>
      <h1>欢迎使用xxx(自定义欢迎语)</h1>
      <div>具体描述xxx</div>
      <div>
        <Button type="primary" onClick={() => login()}>
          去使用
        </Button>
      </div>
    </div>
  );
};

export default Welcome;

拦截登录页跳转到欢迎页

src/plugin/index.tsx

import sdk from '@libs/sdk';
import '../libs/i18n';

// 必须使用pnpm安装依赖
console.log('--- plugin start ---');

// 这里通过传参的方式把资源传进来
// 这里面直接写sdk.kdrive.aside会导致插件不可用
ecissdk.register(
  (data: any) => {
    console.log('ecis: index start');
    console.log('ecis: index end', data, sdk);
  },
  async () => {
    console.log('ecis async start');
    // 初始化登录页拦截
    sdk.login.pageInit.onIntercept((data: any) => {
      console.log(data, 'onIntercept');

      const gotoWelcomePage = () => {
        // cid根据实现前端组件id修改
        const webpath = sdk.utils.env.webpath;
        window.location.replace(webpath + 'c/cid/index.html?cb=' + encodeURIComponent(window.location.href));
      };

      const storeName = 'LOGIN_WELCOME_INFO';
      const localInfo = localStorage.getItem(storeName);
      if (!localInfo) {
        return gotoWelcomePage();
      }
      try {
        const info = JSON.parse(localInfo) as { isJump: boolean };
        if (!info?.isJump) {
          // 未跳转过，进行跳转
          return gotoWelcomePage();
        }
      } catch (error) {
        console.error('login page init jump to welcome page error', error);
      }
      // 跳转过，保证后续重新进入登录页时再次跳转，需要重置localStorage
      localStorage.removeItem(storeName);
    });
    return {
      login: await sdk.login,
    };
  }
);

console.log('--- plugin end ---');

👉效果截图

欢迎页

登录页拦截跳转到欢迎页