From 4c1cc9e6a9b40a55a15d018d0cc3701f2d83b664 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Thu, 14 Sep 2023 23:41:41 +0800
Subject: [PATCH] Add Indicator to home. Optimize stylesheet.

---
 src/assets/css/common.scss                    | 15 +++++---
 .../css/components/common/fit-center.scss     |  8 -----
 .../css/components/common/indicator.scss      | 28 +++++++++++++++
 src/assets/css/components/home/home.scss      |  1 -
 src/assets/css/components/home/slogan.scss    |  2 +-
 src/assets/css/constants.scss                 |  4 +++
 src/assets/css/pages/header.scss              |  2 +-
 src/components/common/FitCenter.tsx           |  2 +-
 src/components/common/Indicator.tsx           | 36 +++++++++++++++++--
 src/components/home/index.tsx                 |  7 ++--
 10 files changed, 83 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/css/components/common/indicator.scss
 create mode 100644 src/assets/css/constants.scss

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index 98f3115..e1716f7 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -1,7 +1,4 @@
-$main-color: #00D4FF;
-$background-color: #F5F5F5;
-$font-main-color: #4D4D4D;
-$font-secondary-color: #9E9E9E;
+@use '@/assets/css/constants.scss' as constants;
 
 #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;
@@ -107,4 +104,12 @@ $font-secondary-color: #9E9E9E;
     width: 23px;
     height: 23px;
   }
+}
+
+.flex-horizontal {
+  flex-direction: row;
+}
+
+.flex-vertical {
+  flex-direction: column;
 }
\ No newline at end of file
diff --git a/src/assets/css/components/common/fit-center.scss b/src/assets/css/components/common/fit-center.scss
index b4818fc..fd07971 100644
--- a/src/assets/css/components/common/fit-center.scss
+++ b/src/assets/css/components/common/fit-center.scss
@@ -4,12 +4,4 @@
   align-items: center;
   width: 100%;
   height: 100%;
-}
-
-.direction-horizontal {
-  flex-direction: row;
-}
-
-.direction-vertical {
-  flex-direction: column;
 }
\ No newline at end of file
diff --git a/src/assets/css/components/common/indicator.scss b/src/assets/css/components/common/indicator.scss
new file mode 100644
index 0000000..85981c8
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/css/components/home/home.scss b/src/assets/css/components/home/home.scss
index 14e810d..f339e4f 100644
--- a/src/assets/css/components/home/home.scss
+++ b/src/assets/css/components/home/home.scss
@@ -8,5 +8,4 @@
   right: 0;
   top: 50%;
   transform: translateY(-50%);
-  background-color: #00D4FF;
 }
\ No newline at end of file
diff --git a/src/assets/css/components/home/slogan.scss b/src/assets/css/components/home/slogan.scss
index 58134a9..018eec3 100644
--- a/src/assets/css/components/home/slogan.scss
+++ b/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;
diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
new file mode 100644
index 0000000..78451a4
--- /dev/null
+++ b/src/assets/css/constants.scss
@@ -0,0 +1,4 @@
+$main-color: #00D4FF;
+$background-color: #F5F5F5;
+$font-main-color: #4D4D4D;
+$font-secondary-color: #9E9E9E;
diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index 69f6e16..37180a9 100644
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -1,4 +1,4 @@
-@use "../mixins" as mixins;
+@use "@/assets/css/mixins" as mixins;
 
 .nav {
   display: flex;
diff --git a/src/components/common/FitCenter.tsx b/src/components/common/FitCenter.tsx
index 356ab8d..b33d8e6 100644
--- a/src/components/common/FitCenter.tsx
+++ b/src/components/common/FitCenter.tsx
@@ -12,7 +12,7 @@ const FitCenter: React.FC<FitCenterProps> = (props) => {
         <>
             <div
                 className={`fit-center${className ? ' ' + className : ''}${
-                    vertical ? ' direction-vertical' : ' direction-horizontal'
+                    vertical ? ' flex-vertical' : ' flex-horizontal'
                 }`}
                 {..._props}
             ></div>
diff --git a/src/components/common/Indicator.tsx b/src/components/common/Indicator.tsx
index c58863d..e234fe9 100644
--- a/src/components/common/Indicator.tsx
+++ b/src/components/common/Indicator.tsx
@@ -1,7 +1,39 @@
 import React from 'react'
+import _ from 'lodash'
+import '@/assets/css/components/common/indicator.scss'
 
-const Indicator: React.FC = () => {
-    return <></>
+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
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 0c246e3..cc26b1a 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -10,7 +10,7 @@ import Indicator from '@/components/common/Indicator.tsx'
 const Home: React.FC = () => {
     const {
         hideScrollbarRef,
-        navbarHiddenState: { setNavbarHidden },
+        navbarHiddenState: { navbarHidden, setNavbarHidden },
         preventScrollState: { setPreventScroll }
     } = useContext(MainFrameworkContext)
 
@@ -124,6 +124,7 @@ const Home: React.FC = () => {
         if (event.key === 'ArrowDown') {
             handleScrollDown()
         }
+        console.log(content.length)
     }
 
     const content = [
@@ -152,8 +153,8 @@ const Home: React.FC = () => {
                 })}
             </div>
 
-            <div className={'indicator'}>
-                <Indicator />
+            <div hidden={navbarHidden} className={'indicator'}>
+                <Indicator total={content.length} current={currentContent} />
             </div>
         </>
     )