feat(flat-web): add HomePage to Flat-web (#702)

packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less

@@ -6,8 +6,8 @@
 .main-page-nav-horizontal-content {
     display: flex;
     justify-content: space-between;
+    height: 50px;
     max-width: 960px;
-    max-height: 50px;
     margin: 0 auto;
 }
 

packages/flat-components/src/components/MainPageLayoutHorizontal/index.tsx

@@ -0,0 +1,63 @@
+import "./style.less";
+import React from "react";
+import classNames from "classnames";
+import { MainPageLayoutItem } from "../MainPageLayout/types";
+import {
+    MainPageNavHorizontal,
+    MainPageNavHorizontalProps,
+} from "../MainPageLayout/MainPageNavHorizontal";
+
+export * from "../MainPageLayout/MainPageHeader";
+export type { MainPageLayoutItem } from "../MainPageLayout/types";
+
+export interface MainPageLayoutHorizontalProps extends MainPageNavHorizontalProps {
+    /** when an item is clicked */
+    onClick: (mainPageLayoutItem: MainPageLayoutItem) => void;
+    /** a list of keys to highlight the items */
+    activeKeys: string[];
+    /** inside sub menu in MainPageLayout */
+    subMenu?: MainPageLayoutItem[];
+}
+
+export const MainPageLayoutHorizontal: React.FC<MainPageLayoutHorizontalProps> = ({
+    onClick,
+    activeKeys,
+    subMenu,
+    children,
+    ...restProps
+}) => {
+    return (
+        <div className="main-horizontal-layout-container">
+            <MainPageNavHorizontal {...restProps} onClick={onClick} activeKeys={activeKeys} />
+            {subMenu && (
+                <div className="main-horizontal-layout-sub-menu-container">
+                    <ul>
+                        {subMenu.map(menuItem => {
+                            return (
+                                <li key={menuItem.key}>
+                                    <a
+                                        className={classNames("main-layout-sub-menu-item", {
+                                            "is-active": activeKeys.includes(menuItem.key),
+                                        })}
+                                        onClick={e => {
+                                            e.preventDefault();
+                                            onClick(menuItem);
+                                        }}
+                                    >
+                                        <span className="main-layout-sub-menu-item-icon">
+                                            {menuItem.icon(activeKeys.includes(menuItem.key))}
+                                        </span>
+                                        {menuItem.title}
+                                    </a>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                </div>
+            )}
+            <div className="main-horizontal-layout-container-content fancy-scrollbar">
+                {children}
+            </div>
+        </div>
+    );
+};

packages/flat-components/src/components/MainPageLayoutHorizontal/style.less

@@ -0,0 +1,8 @@
+.main-horizontal-layout-container {
+    height: 100vh;
+}
+
+.main-horizontal-layout-container-content {
+    height: calc(100vh - 50px);
+    background-color: #f3f6f9;
+}

packages/flat-components/src/index.ts

@@ -13,6 +13,7 @@ export * from "./components/InviteModal";
 export * from "./components/LoadingPage";
 export * from "./components/LoginPage";
 export * from "./components/MainPageLayout";
+export * from "./components/MainPageLayoutHorizontal";
 export * from "./components/PeriodicRoomPage";
 export * from "./components/RemoveRoomModal";
 export * from "./components/RoomDetailPage";

web/flat-web/src/AppRoutes/route-pages.ts

@@ -15,6 +15,54 @@ export const routePages: RoutePages = {
     },
     [RouteNameType.HomePage]: {
         title: "Flat",
-        component: () => import("../pages/Homepage"),
+        component: () => import("../pages/HomePage"),
+    },
+    [RouteNameType.SmallClassPage]: {
+        title: "SmallClassPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.OneToOnePage]: {
+        title: "OneToOnePage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.BigClassPage]: {
+        title: "BigClassPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.RoomDetailPage]: {
+        title: "RoomDetailPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.UserScheduledPage]: {
+        title: "UserScheduledPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.PeriodicRoomDetailPage]: {
+        title: "PeriodicRoomDetailPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.ReplayPage]: {
+        title: "ReplayPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.ModifyOrdinaryRoomPage]: {
+        title: "ModifyOrdinaryRoomPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.ModifyPeriodicRoomPage]: {
+        title: "ModifyPeriodicRoomPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.SystemCheckPage]: {
+        title: "SystemCheckPage",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.GeneralSettingPage]: {
+        title: "Flat",
+        component: () => Promise.resolve({ default: () => null }),
+    },
+    [RouteNameType.CloudStoragePage]: {
+        title: "Flat",
+        component: () => Promise.resolve({ default: () => null }),
     },
 };