chore：配置全景默认登录页

src/pages/user/login/template/panorama/PanoBaseLogin.js

+import 'kit_utils/lib/format';
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal } from 'antd';
+// eslint-disable-next-line import/no-unresolved
+import classNames from 'classnames';
+import { dom } from '@wisdom-utils/utils/lib/helpers';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { connect } from 'react-redux';
+import { useHistory } from '@wisdom-utils/runtime';
+import { actionCreators } from '@/containers/App/store';
+import defaultSetting from '../../../../../../config/defaultSetting';
+import LoginAction from '../../login';
+import styles from './style.less';
+import useRenderQcode from '../../js/useRenderQcode';
+import Account from '../../js/useAccount';
+import IotComponent from '../../js/useIOTComponent';
+import { defaultApp } from '../../../../../micro';
+import Krpano from '../../components/Krpano';
+
+const PanoBaseLogin = forwardRef((props, _ref) => {
+    const videoRef = useRef();
+    const loginRef = useRef();
+    const timeRef = useRef();
+    const titleRef = useRef();
+    const sliVerify = useRef();
+    const loginFormRef = useRef();
+    const formRef = useRef(null);
+    const footerRef = useRef();
+    const [status, setStatus] = useState('normal');
+    const [autoLogin, setAutoLogin] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [currentDate, setCurrentDate] = useState({});
+    const [type, setType] = useState('Account');
+    const [visible, setVisible] = useState(false);
+    const history = useHistory();
+    const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
+    let { ddCode } = props.global;
+    const loginMode =props.loginMode;
+    const { projectName } = props.loginParams
+
+    if (loginMode && loginMode === 'iotWechat') ddCode = null;
+    // useEffect(() => {
+    //   action.globalConfig = props.global;
+    // }, [props.global]);
+
+    const handleSubmit = values => {
+        /* eslint-disable */
+        action &&
+            (type === 'Account'
+                ? action.loginHandler(
+                    values.userName,
+                    values.password,
+                    null,
+                    autoLogin,
+                    sliVerify,
+                )
+                : type === 'Mobile'
+                    ? action.phoneLoginFormHandler(values.mobile, values.captcha)
+                    : null);
+
+        setSubmitting(true);
+        props.updateCurrentIndex && props.updateCurrentIndex(-1);
+    };
+
+    useEffect(() => {
+        // if (props.loginMode === LOGIN_WAY.WeChart) {
+        action &&
+            action.events.on('loginSuccess', event => {
+                setSubmitting(false);
+                props.updateCurrentIndex && props.updateCurrentIndex(0);
+                props.history.push(`/?client=${props.global.client}`);
+                // window.share.event.emit('triggerMicro', props.global);
+                // initMicroApps();
+
+                defaultApp();
+            });
+        action &&
+            action.events.on('loginError', event => {
+                setVisible(false);
+                setSubmitting(false);
+            });
+        action &&
+            action.events.on('loginVisible', status => {
+                setVisible(status);
+            });
+        // }
+        return () => {
+            action && action.events && action.events.removeAllListeners('loginSuccess');
+            action && action.events && action.events.removeAllListeners('loginError');
+            action && action.events && action.events.removeAllListeners('loginVisible');
+        }
+    }, [props.loginMode]);
+
+    let loginTimeInterval = null;
+    useEffect(() => {
+        if (loginTimeInterval)
+            clearInterval(loginTimeInterval), (loginTimeInterval = null);
+        loginTimeInterval = setInterval(() => {
+            const date = new Date();
+            const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+            const time = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
+                }:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+                }:${date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
+                }`;
+            setCurrentDate({
+                time,
+                dayofweek: weekday[date.getDay()],
+                date: date.pattern('yyyy/MM/dd'),
+            });
+        }, 1000);
+        return () => {
+            loginTimeInterval && clearInterval(loginTimeInterval);
+        };
+    }, []);
+
+    useEffect(() => {
+        setSubmitting(false);
+    }, [visible]);
+    const renderAddons = useRenderQcode(props.global);
+    const renderPlatform = () => {
+        const template = props.global.loginTemplate;
+        const params = {
+            fromRef: formRef,
+            type,
+            setType,
+            status,
+            submitting,
+            autoLogin,
+            setAutoLogin,
+            action,
+            onSubmit: handleSubmit,
+            loginMode: props.loginMode,
+            updateLoginMode: props.updateLoginMode,
+        };
+        switch (template) {
+            case 'DarkCloud.html':
+            case 'Dark.html':
+                return <Account {...params} />;
+            case 'Dark - IOTMultiLogin.html':
+                return <IotComponent {...params} />;
+            default:
+                return <Account {...params} />;
+        }
+    };
+    /* eslint-disable */
+
+    return (
+        <HelmetProvider>
+            <Helmet>
+                <title>{props.global.title || defaultSetting.title}</title>
+                <meta name="description" content={props.global.title || defaultSetting.title} />
+            </Helmet>
+            <div className={styles.main}>
+                <div className={styles.inner}>
+                    <div
+                        className={classNames(styles.loginTime)}
+                        ref={loginRef}
+                    >
+                        <img
+                            role="logo"
+                            src={props.global && props.global.transformDevAssetsBaseURL && props.global.transformDevAssetsBaseURL(props.global.logo)}
+                        />
+                        <div
+                            className={classNames(
+                                styles.titleCase
+                            )}
+                            ref={titleRef}
+                        >
+                            <span className={styles.title}>{props.global.title}</span>
+                            <span className={styles.subtitle}>
+                                {window.globalConfig && window.globalConfig.subtitle}
+                            </span>
+                        </div>
+                    </div>
+                    <div
+                        className={classNames(
+                            styles.timeCase
+                        )}
+                        ref={timeRef}
+                    >
+                        <span className={styles.time}>{currentDate.time}</span>
+                        <span className={styles.dayofweek}>{currentDate.dayofweek}</span>
+                        <span className={styles.date}>{currentDate.date}</span>
+                    </div>
+                    <div
+                        className={classNames(
+                            styles['login-block']
+                        )}
+                        ref={loginFormRef}
+                    >
+                        <div>
+                            <img src="https://panda-water.cn/web4/assets/images/login/dark/login.png" />
+                        </div>
+                        <div className={styles['login-form']}>{renderPlatform()}</div>
+                    </div>
+                </div>
+                {projectName ? <div className={styles.krpano}>
+                    <Krpano projectName={projectName} />
+                </div> : null}
+
+                <Modal
+                    centered
+                    visible={visible}
+                    width={340}
+                    footer={null}
+                    closable={false}
+                    bodyStyle={{ padding: '15px' }}
+                >
+                    <div ref={sliVerify} />
+                </Modal>
+            </div>
+        </HelmetProvider>
+    );
+});
+
+const mapStateToProps = state => ({
+    global: state.getIn(['global', 'globalConfig']),
+    loginMode: state.getIn(['global', 'loginMode']),
+});
+
+const mapDispatchToProps = dispatch => ({
+    updateConfig(config) {
+        dispatch(actionCreators.getConfig(config));
+    },
+    createContext(data) {
+        dispatch(actionCreators.createContext(data));
+    },
+    updateLoginMode(mode) {
+        dispatch(actionCreators.changeLoginMode(mode));
+    },
+    updateCurrentIndex(index) {
+        dispatch(actionCreators.updateCurrentIndex(index));
+    },
+});
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)((PanoBaseLogin));

src/pages/user/login/template/panorama/index.js

-import BaseLogin from "../baseLogin"
+import PanoBaseLogin from "./PanoBaseLogin"
 import TieShanLogin from "../project/tieshan"
 import { useState , useEffect } from "react"
 
 const LoginTemplate = {
     "铁山" : TieShanLogin,
-    default : BaseLogin
+    default : PanoBaseLogin
 }
 
 const Panorama = props => {

src/pages/user/login/template/panorama/style.less

+@import '~antd/es/style/themes/variable.less';
+@userPageLogin-prefix-cls: ~'@{ant-prefix}-pro-pages-user-login';
+@keyframes loginTimeShow {
+  0% {
+    opacity: 1;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    zoom: 2;
+  }
+  50% {
+    opacity: 1;
+    top: 28px;
+    left: 45px;
+    transform: translate(0, 0);
+    zoom: 1;
+  }
+  60% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+  70% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+  75% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+  100% {
+    opacity: 1;
+    left: 45px;
+    top: 28px;
+    transform: translate(0, 0);
+  }
+}
+
+.main {
+  // width: 368px;
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+  @media screen and (max-width: @screen-sm) {
+    width: 95%;
+  }
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+
+    .register {
+      float: right;
+    }
+  }
+  .videLayer {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: fill;
+  }
+
+  .inner {
+    position: absolute;
+    width: 100%;
+    height: 84%;
+    z-index: 100;
+    &.newYearInner {
+      height: 100%!important;
+    }
+    .loginTime {
+      position: absolute;
+      top: 25px;
+      left: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      &.newYearLoginTime {
+        position: absolute!important;
+        top: 28px!important;
+        left: 45px!important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        transform: inherit!important;
+
+      }
+      img[role='logo'] {
+        height: 40px;
+        vertical-align: middle;
+      }
+      &.loginTimeShow {
+        animation-name: loginTimeShow;
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+      }
+      .titleCase {
+        display: flex;
+        flex-direction: column;
+        margin: -5px 0 0 20px;
+        max-width: 570px;
+        .title,
+        .subtitle {
+          font-family: 'Microsoft YaHei';
+          text-align: left;
+          overflow-wrap: break-word;
+          color: #ffffff;
+        }
+        .title {
+          font-size: 28px;
+        }
+        .subtitle {
+          font-size: 12px;
+          line-height: 1;
+        }
+      }
+    }
+    .timeCase {
+      .time,
+      .dayofweek,
+      .date {
+        position: absolute;
+        font-family: 'MicrosoftYaHeiUI';
+        color: rgba(255, 255, 255, 1);
+      }
+      .time {
+        top: 26px;
+        right: 170px;
+        font-size: 40px;
+        margin-right: 10px;
+      }
+      .dayofweek {
+        top: 32px;
+        right: 125px;
+        font-size: 16px;
+      }
+      .date {
+        top: 57px;
+        right: 95px;
+        font-size: 14px;
+      }
+    }
+    .loginBlockWrapper {
+      width: 100%;
+      height: 100%;
+      background-image: url(https://panda-water.com/web4/assets/images/login/workflow/智联新春背景.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+    .login-block {
+      width: 800px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -400px;
+      margin-top: -150px;
+      display: flex;
+      background:rgba(255,255,255,0.5);
+      &.login-newYear-block {
+        width: 994px!important;
+        height: 424px!important;
+        margin-left: -497px!important;
+        margin-top: -212px!important;
+        background: url(https://panda-water.com/web4/assets/images/login/workflow/%E6%99%BA%E8%81%94%E6%96%B0%E6%98%A5%E8%83%8C%E6%99%AF%E6%A1%86.png)!important;
+        //width: 994px;
+        //height: 424px;
+        //position: absolute;
+        //left: 50%;
+        //top: 50%;
+        //margin-left: -497px;
+        //margin-top: -212px;
+        //display: flex;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        img {
+          margin-top: 90px;
+          margin-left: 168px;
+        }
+        .login-form {
+          display: flex;
+          align-items: center;
+          margin-left: 32px;
+          padding: 0;
+          background: transparent;
+          margin-top: -36px;
+          // :global {
+          //   .ant-btn-primary {
+          //     background: #ff9600 !important;
+          //     border-color:  #ff9600 !important;
+          //   }
+          // }
+        }
+      }
+
+      img {
+        margin-top: 50px;
+        margin-bottom: 50px;
+        margin-left: 30px;
+      }
+      .login-form {
+        padding: 50px 50px 50px;
+      //  background-color: #ffffff;
+      }
+    }
+  }
+
+
+  .footerCase {
+    width: 100%;
+    height: 16%;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    .quickMark {
+      position: absolute;
+      bottom: 48px;
+      text-align: center;
+      width: 100%;
+      font-size: 12px;
+      min-height: 71px;
+
+      &-single {
+        text-align: center;
+        width: 120px;
+        display: inline-block;
+        span {
+          &.Android {
+            display: block;
+            background-image: url(https://panda-water.cn/web4/assets/images/login/dark/Android1.png);
+            width: 26px;
+            height: 32px;
+            margin: auto;
+            margin-bottom: 6px;
+          }
+          &.Wechat {
+            display: block;
+            background-image: url(https://panda-water.cn/web4/assets/images/login/dark/Wechat1.png);
+            width: 34px;
+            height: 32px;
+            margin: auto;
+            margin-bottom: 6px;
+          }
+          &.iphone {
+            display: block;
+            background-image: url(https://panda-water.cn/web4/assets/images/login/dark/iphone1.png);
+            width: 28px;
+            height: 32px;
+            margin: auto;
+            margin-bottom: 6px;
+          }
+        }
+      }
+      .Android-single .Android-code,
+      .iphone-single .iphone-code {
+        margin: 0px 0px 10px 0px;
+        width: 150px;
+        height: 150px;
+        background: #fff;
+        padding: 5px;
+        display: none;
+        transform: translateX(-15px);
+      }
+      .icon-Container {
+        height: 50px;
+        cursor: pointer;
+      }
+    }
+    .copyright {
+      position: absolute;
+      z-index: 2;
+      text-align: center;
+      width: 100%;
+      bottom: 10px;
+      font-size: 13pz;
+      color: #000000;
+      .frontIcon {
+        margin-top: -5px;
+      }
+      a {
+        color: #000000;
+      }
+      .addons {
+        display: none;
+      }
+      .split {
+        border-left: 1px solid #000000;
+        margin: 0 8px;
+      }
+      .glyphicon-qrcode {
+        vertical-align: text-top;
+      }
+    }
+  }
+
+  :global {
+    .antd-pro-login-submit {
+      width: 100%;
+      margin-top: 24px;
+    }
+  }
+  .wechatQRcode {
+    width: 250px;
+    height: 220px;
+    margin: 0 15px;
+  }
+  .loginDisplay {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    a {
+      &:hover {
+        color: @primary-color;
+        transition: all 0.3s ease-in-out;
+      }
+    }
+  }
+  .captcha {
+    color: @primary-6;
+    font-weight: 400;
+    cursor: pointer;
+    font-size: 12px;
+  }
+}
+.krpano {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+