初始化3.0.0版本

km-console/packages/layout-clusters-fe/src/pages/Login/index.tsx

@@ -0,0 +1,71 @@
+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>4K</span>
+        <span>+ Star的项目 Know Streaming</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>
+  );
+};