Merge pull request 'Add vertical prop to FitCenter. Add OxygenToolbox to home page. Add Indicator to home.' (#20) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#20

src/assets/css/common.scss

@@ -1,7 +1,4 @@
-$main-color: #00D4FF;
+@use '@/assets/css/constants.scss' as constants;
-$background-color: #F5F5F5;
-$font-main-color: #4D4D4D;
-$font-secondary-color: #9E9E9E;
 
 #root {
   height: 100vh;
@@ -9,7 +6,7 @@ $font-secondary-color: #9E9E9E;
 }
 
 .body {
-  color: $font-main-color;
+  color: constants.$font-main-color;
   user-select: none;
   min-width: 900px;
   min-height: 400px;
@@ -108,3 +105,11 @@ $font-secondary-color: #9E9E9E;
     height: 23px;
   }
 }
+
+.flex-horizontal {
+  flex-direction: row;
+}
+
+.flex-vertical {
+  flex-direction: column;
+}

src/assets/css/components/common/indicator.scss

@@ -0,0 +1,28 @@
+@use '@/assets/css/constants.scss' as constants;
+
+.dot-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  .item {
+    flex: auto;
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      border: {
+        width: 2px;
+        color: constants.$font-secondary-color;
+        style: solid;
+      };
+    }
+  }
+
+  .active>* {
+    background-color: constants.$font-secondary-color;
+  }
+}

src/assets/css/components/home/home.scss

@@ -0,0 +1,11 @@
+.indicator {
+  position: fixed;
+  margin: {
+    right: 20px;
+  };
+  width: 20px;
+  height: 100px;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}

src/assets/css/components/home/slogan.scss

@@ -1,4 +1,4 @@
-@use "../../mixins" as mixins;
+@use "@/assets/css/mixins" as mixins;
 
 .center-box {
   display: flex;

src/assets/css/constants.scss

@@ -0,0 +1,4 @@
+$main-color: #00D4FF;
+$background-color: #F5F5F5;
+$font-main-color: #4D4D4D;
+$font-secondary-color: #9E9E9E;

src/assets/css/pages/header.scss

@@ -1,4 +1,4 @@
-@use "../mixins" as mixins;
+@use "@/assets/css/mixins" as mixins;
 
 .nav {
   display: flex;

src/components/Project.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Project: React.FC = () => {
-    return (
-        <>
-            <h1>App</h1>
-        </>
-    )
-}
-
-export default Project

src/components/common/FitCenter.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import '@/assets/css/components/common/fit-center.scss'
 
-const FitCenter: React.FC<
+interface FitCenterProps
-    React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-> = (props) => {
+    vertical?: boolean
-    const { className, ..._props } = props
+}
+
+const FitCenter: React.FC<FitCenterProps> = (props) => {
+    const { className, vertical, ..._props } = props
     return (
         <>
-            <div className={`fit-center${className ? ' ' + className : ''}`} {..._props}></div>
+            <div
+                className={`fit-center${className ? ' ' + className : ''}${
+                    vertical ? ' flex-vertical' : ' flex-horizontal'
+                }`}
+                {..._props}
+            ></div>
         </>
     )
 }

src/components/common/Indicator.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import _ from 'lodash'
+import '@/assets/css/components/common/indicator.scss'
+
+interface IndicatorProps {
+    total: number
+    current: number
+    onSwitch?: (index: number) => void
+}
+
+const Indicator: React.FC<IndicatorProps> = (props) => {
+    const { total, current, onSwitch } = props
+
+    const handleClick = (index: number) => {
+        return () => {
+            onSwitch && onSwitch(index)
+        }
+    }
+
+    return (
+        <>
+            <ul className={'dot-list flex-vertical'}>
+                {_.range(0, total).map((_value, index) => {
+                    return (
+                        <li
+                            key={index}
+                            className={'item center-box' + (index === current ? ' active' : '')}
+                            onClick={handleClick(index)}
+                        >
+                            <div className={'dot'} />
+                        </li>
+                    )
+                })}
+            </ul>
+        </>
+    )
+}
+
+export default Indicator

src/components/home/OxygenToolbox.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FitCenter from '@/components/common/FitCenter.tsx'
+
+const OxygenToolbox: React.FC = () => {
+    return (
+        <>
+            <FitCenter vertical>
+                <div>
+                    <div style={{ fontSize: '4.5em', fontWeight: 'bold' }}>Oxygen Toolbox</div>
+                    <div style={{ fontSize: '1.4em', textAlign: 'end' }}>is coming soon...</div>
+                </div>
+            </FitCenter>
+        </>
+    )
+}
+
+export default OxygenToolbox

src/components/home/index.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react'
+import '@/assets/css/components/home/home.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import FitCenter from '@/components/common/FitCenter'
 import { MainFrameworkContext } from '@/pages/MainFramework'
 import Slogan from '@/components/home/Slogan'
+import OxygenToolbox from '@/components/home/OxygenToolbox'
+import Indicator from '@/components/common/Indicator.tsx'
 
 const Home: React.FC = () => {
     const {
         hideScrollbarRef,
-        navbarHiddenState: { setNavbarHidden },
+        navbarHiddenState: { navbarHidden, setNavbarHidden },
         preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
 
@@ -121,6 +124,7 @@ const Home: React.FC = () => {
         if (event.key === 'ArrowDown') {
             handleScrollDown()
         }
+        console.log(content.length)
     }
 
     const content = [
@@ -129,7 +133,7 @@ const Home: React.FC = () => {
             ref: fitFullScreenRef,
             children: <Slogan onClickScrollDown={handleScrollDown} />
         },
-        { children: <FitCenter>2</FitCenter> },
+        { children: <OxygenToolbox /> },
         { children: <FitCenter>3</FitCenter> }
     ]
 
@@ -148,6 +152,10 @@ const Home: React.FC = () => {
                     return <FitFullScreen key={index} {...element} />
                 })}
             </div>
+
+            <div hidden={navbarHidden} className={'indicator'}>
+                <Indicator total={content.length} current={currentContent} />
+            </div>
         </>
     )
 }

src/router/index.tsx

@@ -38,16 +38,6 @@ const routes: RouteObject[] = [
                             menu: true,
                             auth: false
                         }
-                    },
-                    {
-                        path: 'project',
-                        id: 'project',
-                        Component: React.lazy(() => import('@/components/Project')),
-                        handle: {
-                            name: '项目',
-                            menu: true,
-                            auth: false
-                        }
                     }
                 ]
             },