Merge pull request #8 from IoTSharp/feature/V1.0.0

maikebing · web-flow · commit c9bae6979563 · 2023-01-26T16:54:51.000+08:00
Feature/v1.0.0
diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
@@ -1,20 +1,25 @@
-import {FC, useContext, useEffect} from "react";
+import {FC, useContext, useState} from "react";
 import styles from "./styles.module.scss";
 import Image from "next/image";
 import logoIcon from "@/public/logo-icon.svg";
 import logoTextDark from "@/public/logo-text-dark.svg";
 import logoText from "@/public/logo-text.svg";
 import {ThemeContext} from "@/stores/theme";
-import {IconGithubLogo, IconMoon, IconSun} from '@douyinfe/semi-icons';
+import { Tooltip, SideSheet } from '@douyinfe/semi-ui';
+import {IconGithubLogo, IconMoon, IconSun, IconBox} from '@douyinfe/semi-icons';
 import {Themes} from "@/constants/enum";
 
 export interface INavBarProps {
 }
 
 const NavBar: FC<INavBarProps> = ({}) => {
+  const [visible, setVisible] = useState<boolean>(false);
   const {setTheme, theme} = useContext(ThemeContext);
   const icon = theme === Themes.light ? logoTextDark : logoText;
   const iconTheme = theme === Themes.light ? <IconMoon size="extra-large"/> : <IconSun size="extra-large"/>;
+  const onChange = () => {
+    setVisible(!visible);
+  };
   return (
     <div className={styles.navBar}>
       <a href="https://iotsharp.io/">
@@ -32,7 +37,14 @@ const NavBar: FC<INavBarProps> = ({}) => {
             }
           }}
         >
-          {iconTheme}
+          <Tooltip position="bottom" content={Themes.light ? '切换到暗色模式' : '切换到亮色模式'}>
+            {iconTheme}
+          </Tooltip>
+        </div>
+        <div className={styles.icon} onClick={onChange}>
+          <Tooltip position="bottom" content="查看安装包">
+            <IconBox size="extra-large"/>
+          </Tooltip>
         </div>
         <div className={styles.icon} onClick={(): void => {
           window.open(
@@ -41,9 +53,14 @@ const NavBar: FC<INavBarProps> = ({}) => {
             "noopener=yes,noreferrer=yes"
           );
         }}>
-          <IconGithubLogo size="extra-large"/>
+          <Tooltip position="bottom" content="查看Github">
+            <IconGithubLogo size="extra-large"/>
+          </Tooltip>
         </div>
       </div>
+      <SideSheet title="安装包" visible={visible} onCancel={onChange} placement="right">
+        <p>Here is more content...</p>
+      </SideSheet>
     </div>
   );
 };
diff --git a/components/navbar/styles.module.scss b/components/navbar/styles.module.scss
@@ -2,20 +2,21 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: hsla(0,0%,100%,.5);
+  background-color: var(--navbar-background-color);
   backdrop-filter: blur(0.5rem);
+  border-bottom: 1px solid var(--semi-color-border);
   width: 100%;
   height: 4rem;
   position: sticky;
   top: 0;
   left: 0;
-  padding: 1.25rem 8rem;
+  padding: 1.25rem 2rem;
   z-index: 100;
   box-sizing: border-box;
 
   .icon {
     cursor: pointer;
-    margin-left: 1rem;
+    margin-left: 1.8rem;
   }
 
   a {
diff --git a/pages/components/banner/index.tsx b/pages/components/banner/index.tsx
@@ -1,19 +1,14 @@
 import {FC, useContext, useEffect, useRef} from "react";
 import styles from "./styles.module.scss";
 import {Col, Row} from '@douyinfe/semi-ui';
-import Image from "next/image";
 import cName from "classnames";
-import bannerIcon from "@/public/banner.svg";
-import IoTIcon from "@/public/iot.svg";
-import logoText from "@/public/logo-text.svg";
 import {ThemeContext} from "@/stores/theme";
 
 export interface IBannerProps {}
 
 const Banner: FC<IBannerProps> = ({}) => {
   const mainRef = useRef<HTMLDivElement>(null);
   const {theme} = useContext(ThemeContext);
-
   useEffect(() => {
     mainRef.current?.classList.remove(styles.withAnimation);
     window.requestAnimationFrame(() => {
@@ -23,12 +18,10 @@ const Banner: FC<IBannerProps> = ({}) => {
   return (
     <div className={cName([styles.banner, styles.withAnimation])} ref={mainRef}>
       <Row type="flex" align="middle">
-        <Col xs={24} sm={24} md={24} lg={14} xl={14}>
+        <Col xs={24} sm={24} md={24} lg={8} xl={8}>
           <div className={styles.container}>
-            <div className={styles.subTitle}><Image src={IoTIcon} alt="" width={30} height={30}/>Internet of Things</div>
-            <div className={styles.title}><Image src={logoText} alt="" width={260} height={60}/></div>
-            <div className={styles.label}>基于.Net 6.0、C# 的开源IoT平台</div>
-            <div className={styles.description}>设备管理与数据收集、处理、可视化的解决方案</div>
+            <div className={styles.title}>连接物理设备与数字世界</div>
+            <div className={styles.description}>基于.Net 6.0 使用C#开发的数据采集、数据清洗、数据可视化与设备资产管理的开源物联网(IoT)基础服务平台。</div>
             <div className={styles.button} onClick={(): void => {
               window.open(
                 "https://docs.iotsharp.net/",
@@ -39,8 +32,11 @@ const Banner: FC<IBannerProps> = ({}) => {
             </div>
           </div>
         </Col>
-        <Col xs={24} sm={24} md={24} lg={10} xl={10}>
-          <Image src={bannerIcon} alt="" width={400} height={400} className={styles.icon}/>
+        <Col xs={24} sm={24} md={24} lg={14} xl={14} offset={2}>
+          <div className={styles.bannerImage}>
+            <div className={styles.background} />
+            <div className={styles.icon}/>
+          </div>
         </Col>
       </Row>
     </div>
diff --git a/pages/components/banner/styles.module.scss b/pages/components/banner/styles.module.scss
@@ -124,49 +124,41 @@
 
 .banner {
   width: 100%;
-  padding: 12rem 8rem;
-  background: url("/img.png");
-  background-size: 100% 100%;
+  padding: 10rem 8rem;
+  overflow: hidden;
+  border-bottom: 1px solid var(--semi-color-border);
   :global {
     .semi-row-flex {
       height: 100%;
     }
   }
   .icon {
-    width: 100%;
+    width: 920px;
+    position: relative;
+    border-radius: 8px;
+    height: 32.5rem!important;
+    border-bottom: 1px solid var(--semi-color-border);
+    background-image: var(--banner-icon);
+    background-size: 100% 100%;
   }
   .container {
     display: flex;
     flex-direction: column;
-    .subTitle {
-      font-size: 1.25rem;
-      margin-bottom: .7rem;
-      display: flex;
-      align-items: center;
-      color: #ffffff;
-      img {
-        margin-right: .313rem;
-      }
-    }
 
     .title {
       font-weight: 700;
-      font-size: 3rem;
+      font-size: 2.8rem;
       line-height: 4rem;
-      color: #fdfeff;
     }
 
     .label {
-      font-weight: 500;
       font-size: 1.8rem;
       line-height: 2rem;
-      color: #fdfeff;
     }
 
     .description {
       font-size: 1.25rem;
       line-height: 2rem;
-      color: #fdfeff;
       margin-top: 1.6rem;
     }
 
@@ -184,7 +176,41 @@
       cursor: pointer;
       border: 2px solid var(--yellow-color);
       background-color: var(--yellow-color);
-      margin-top: 2rem;
+      margin-top: 4rem;
+    }
+  }
+  .bannerImage {
+    position: relative;
+    width: 100%;
+    padding-top: 20px;
+    padding-left: 50px;
+  }
+  .background {
+    position: absolute;
+    width: 640px;
+    height: 640px;
+    left: -50px;
+    top: -20px;
+    -webkit-filter: blur(120px);
+    filter: blur(120px);
+    opacity: .6;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 474px;
+      height: 474px;
+      border-radius: 50%;
+      top: 132px;
+      background-color: rgb(var(--semi-purple-5));
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      width: 474px;
+      height: 474px;
+      border-radius: 50%;
+      left: 166px;
+      background-color: rgb(var(--semi-indigo-5));
     }
   }
 }
diff --git a/pages/global.scss b/pages/global.scss
@@ -18,6 +18,7 @@ html[data-theme="dark"] {
   --secondary-font-color-1: #9e9e9f;
   --popup-content-background-color: #1f1f1f;
   --box-shadow: rgba(255, 255, 255, 0.8);
+  --banner-icon: url("../public/banner_dark.png");
   --home-background-icon: url("../public/home_bg_dark.png");
   --home-background-icon-webp: url("../public/home_bg_dark.webp");
 }
@@ -36,6 +37,7 @@ html[data-theme="light"] {
   --semi-page-hover-background-color: rgb(244, 245, 245);
   --navbar-icon: url("../public/logo-text-dark.svg");
   --theme-icon: url("../public/theme_light.png");
+  --banner-icon: url("../public/banner_light.png");
   --popup-close-icon: url("../public/close_light.png");
   --popup-close-hover-background-color: #f5f5f5;
   --secondary-font-color-1: #333333;
diff --git a/public/banner_dark.png b/public/banner_dark.png
diff --git a/public/banner_light.png b/public/banner_light.png
