mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-03 02:52:08 +08:00
72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { LOGIN_MENU, LOGIN_MENU_MAP } from './config';
|
||
import './index.less';
|
||
import { AppContainer, Carousel } from 'knowdesign';
|
||
import Logo from '@src/assets/ks-logo.png';
|
||
import egOneTitle from './img/eg1-title.png';
|
||
import egOneContent from './img/eg1-content.png';
|
||
import egTwoContent from './img/eg2-content.png';
|
||
|
||
const carouselList = [
|
||
<div key="2">
|
||
<div className="carousel-eg-ctr carousel-eg-ctr-two">
|
||
<img className="carousel-eg-ctr-two-img img-one" src={egTwoContent} />
|
||
<div className="carousel-eg-ctr-two-desc desc-one">
|
||
<span>Github: </span>
|
||
<span>5.8K</span>
|
||
<span>+ Star的的实时流处理平台</span>
|
||
</div>
|
||
<div className="carousel-eg-ctr-two-desc desc-two">
|
||
从开源至今社区内已经超过 2000+ 用户使用，从新创公司到巨头，尤其是得到各行业一线企业开发者的信赖。
|
||
</div>
|
||
</div>
|
||
</div>,
|
||
// <div key="1">
|
||
// <div className="carousel-eg-ctr carousel-eg-ctr-one">
|
||
// <img className="carousel-eg-ctr-one-img img-one" src={egOneTitle} />
|
||
// <div className="carousel-eg-ctr-one-desc desc-one">可能是北半球最简单易用的 Kafka 管控平台</div>
|
||
// <img className="carousel-eg-ctr-one-img img-two" src={egOneContent} />
|
||
// </div>
|
||
// </div>,
|
||
];
|
||
|
||
export const Login: React.FC<any> = () => {
|
||
const [global, setGlobal] = AppContainer.useGlobalValue();
|
||
const [selectedKeys, setSelectedKeys] = useState([LOGIN_MENU[0].key]);
|
||
|
||
const renderContent = () => {
|
||
return LOGIN_MENU_MAP.get(selectedKeys[0])?.render(handleMenuClick) || LOGIN_MENU_MAP.get(LOGIN_MENU[0].key)?.render(handleMenuClick);
|
||
};
|
||
|
||
const handleMenuClick = (e: string) => {
|
||
setSelectedKeys([e]);
|
||
window.location.hash = e;
|
||
};
|
||
|
||
// 跳转到登录页时，清空全局状态
|
||
useEffect(() => {
|
||
if (Object.keys(global).length) {
|
||
setGlobal({});
|
||
}
|
||
}, [global]);
|
||
|
||
return (
|
||
<div className="login-page">
|
||
<div className="login-page-left">
|
||
<Carousel autoplay={true} autoplaySpeed={5000}>
|
||
{carouselList}
|
||
</Carousel>
|
||
</div>
|
||
<div className="login-page-right">
|
||
<div className="login-page-right-content">
|
||
<div className="login-page-right-content-title">
|
||
<img className="logo" src={Logo} />
|
||
<div className="desc">可能是北半球最简单易用的 Kafka 管控平台</div>
|
||
</div>
|
||
<div className="login-page-right-content-content">{renderContent()}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|