feat(home): 优化样式

src/pages/home/components/Guide.tsx

@@ -38,7 +38,7 @@ const GuideItem = (props: GuideItemProps) => {
   };
 
   return (
-    <div className={'home-guide-item arrow'} onClick={jumpPage}>
+    <div className={'home-guide-item step-bar arrow-2'} onClick={jumpPage}>
       <div className={'item-english'}>{props.english}</div>
       <div className={'item-title'}>{props.name}</div>
       <div className={`item-index`}>
@@ -52,7 +52,10 @@ const Guide = (props: GuideProps) => {
   return (
     <div className={'home-guide'}>
       <Title title={props.title} />
-      <div className={'home-guide-items'}>
+      <div
+        className={'home-guide-items'}
+        style={{ gridTemplateColumns: `repeat(${props.data ? props.data.length : 1}, 1fr)` }}
+      >
         {props.data.map((item, index) => (
           <GuideItem {...item} index={index + 1} />
         ))}

src/pages/home/components/Steps.tsx

@@ -1,67 +1,45 @@
-import { RightOutlined } from '@ant-design/icons';
-import { Card, Col, Row } from 'antd';
+import './index.less';
+import Title from '@/pages/home/components/Title';
+import React from 'react';
 
-const Steps = () => {
+interface StepItemProps {
+  title: string | React.ReactNode;
+  content: string | React.ReactNode;
+  onClick: () => void;
+  url?: string;
+}
+
+interface StepsProps {
+  title: string | React.ReactNode;
+  data: StepItemProps[];
+}
+
+const ItemDefaultImg = require('/public/images/home/bottom-1.png');
+const StepsItem = (props: StepItemProps) => {
+  return (
+    <div className={'step-item step-bar arrow-1'}>
+      <div className={'step-item-title'}>
+        <div className={'step-item-img'}>
+          <img src={props.url || ItemDefaultImg} />
+        </div>
+        <span>{props.title}</span>
+      </div>
+      <div className={'step-item-content'}>{props.content}</div>
+    </div>
+  );
+};
+
+const Steps = (props: StepsProps) => {
   return (
-    <Card title={'设备接入推荐步骤'}>
-      <Row gutter={24}>
-        <Col span={4}>
-          <Card
-            bordered
-            title="创建产品"
-            onClick={() => {
-              // pageJump(!!devicePermission.add, 'device/Instance')
-            }}
-          >
-            产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。
-          </Card>
-        </Col>
-        <Col span={1}>
-          <RightOutlined />
-        </Col>
-        <Col span={4}>
-          <Card bordered title="配置产品接入方式" onClick={() => {}}>
-            通过产品对同一类型的所有设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。
-          </Card>
-        </Col>
-        <Col span={1}>
-          <RightOutlined />
-        </Col>
-        <Col span={4}>
-          <Card
-            bordered
-            title="添加测试设备"
-            onClick={() => {
-              // pageJump(!!devicePermission.add, 'device/Instance')
-            }}
-          >
-            添加单个设备，用于验证产品模型是否配置正确。
-          </Card>
-        </Col>
-        <Col span={1}>
-          <RightOutlined />
-        </Col>
-        <Col span={4}>
-          <Card bordered title="功能调试" onClick={() => {}}>
-            对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。
-          </Card>
-        </Col>
-        <Col span={1}>
-          <RightOutlined />
-        </Col>
-        <Col span={4}>
-          <Card
-            bordered
-            title="批量添加设备"
-            onClick={() => {
-              // pageJump(!!devicePermission.add, 'device/Instance')
-            }}
-          >
-            批量添加同一产品下的设备
-          </Card>
-        </Col>
-      </Row>
-    </Card>
+    <div className={'home-step'}>
+      <Title title={props.title} />
+      <div
+        className={'home-step-items'}
+        style={{ gridTemplateColumns: `repeat(${props.data ? props.data.length : 1}, 1fr)` }}
+      >
+        {props.data && props.data.map((item) => <StepsItem {...item} />)}
+      </div>
+    </div>
   );
 };
 

src/pages/home/components/Title.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 interface TitleProps {
-  title: string;
+  title: string | React.ReactNode;
   english?: string;
   className?: string;
   extra?: React.ReactNode | string;

src/pages/home/components/index.less

@@ -2,40 +2,30 @@
 @bodyPadding: 24px 16px;
 @margin: 24px;
 
+.home-base {
+  position: relative;
+  padding: @bodyPadding;
+  background-color: #fff;
+}
+
 .home-guide {
   margin-bottom: @margin;
   padding: @bodyPadding;
   background-color: #fff;
 
   .home-guide-items {
-    display: flex;
-    gap: 56px;
+    display: grid;
+    grid-column-gap: 56px;
   }
 }
 
 .home-guide-item {
   position: relative;
-  flex-grow: 1;
   padding: 16px;
   background: linear-gradient(135.62deg, #f6f7fd 22.27%, rgba(255, 255, 255, 0.86) 91.82%);
   border-radius: 2px;
   box-shadow: 0 4px 18px #efefef;
 
-  &.arrow {
-    &:not(:last-child) {
-      &::after {
-        position: absolute;
-        top: 50%;
-        right: -60px;
-        width: 60px;
-        height: 40px;
-        background: url('/images/home/arrow-2.png') no-repeat center;
-        transform: translateY(-50%);
-        content: ' ';
-      }
-    }
-  }
-
   .item-english {
     color: #4f4f4f;
   }
@@ -85,12 +75,11 @@
 }
 
 .home-body {
-  position: relative;
+  .home-base;
+
   height: 500px;
   margin-bottom: @margin;
-  padding: @bodyPadding;
   overflow: hidden;
-  background-color: #fff;
 
   .home-body-img {
     position: absolute;
@@ -102,12 +91,89 @@
 }
 
 .home-statistics {
-  position: relative;
-  padding: @bodyPadding;
-  background-color: #fff;
+  .home-base;
 
   .home-statistics-body {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     gap: 24px;
   }
 }
+
+.step-item-after {
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  width: 60px;
+  height: 40px;
+  transform: translateY(-50%);
+  content: ' ';
+}
+
+.home-step {
+  .home-base;
+
+  .home-step-items {
+    display: grid;
+    grid-column-gap: 66px;
+
+    .step-item {
+      display: flex;
+      flex-direction: column;
+
+      .step-item-title {
+        position: relative;
+        padding: 16px 24px;
+        color: #333;
+        font-weight: bold;
+        font-size: 20px;
+        background-color: #f8f9fd;
+
+        .step-item-img {
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 1;
+        }
+
+        > span {
+          position: relative;
+          z-index: 2;
+        }
+      }
+
+      .step-item-content {
+        flex-grow: 1;
+        height: auto;
+        padding: 24px;
+        border-right: 1px solid #e5edf4;
+        border-bottom: 1px solid #e5edf4;
+        border-left: 1px solid #e5edf4;
+      }
+    }
+  }
+}
+
+.step-bar {
+  position: relative;
+
+  &.arrow-1 {
+    &:not(:last-child) {
+      &::after {
+        .step-item-after;
+
+        background: url('/images/home/arrow-1.png') no-repeat center;
+      }
+    }
+  }
+
+  &.arrow-2 {
+    &:not(:last-child) {
+      &::after {
+        .step-item-after;
+
+        background: url('/images/home/arrow-2.png') no-repeat center;
+      }
+    }
+  }
+}

src/pages/home/device/index.tsx

@@ -1,8 +1,9 @@
-import { Col, Row } from 'antd';
+import { Col, Row, Tooltip } from 'antd';
 import { PermissionButton } from '@/components';
 import { Guide, Body } from '../components';
 import Statistics from '../components/Statistics';
 import Steps from '../components/Steps';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 const Device = () => {
   const productPermission = PermissionButton.usePermission('device/Product').permission;
@@ -90,7 +91,45 @@ const Device = () => {
         <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
       </Col>
       <Col span={24}>
-        <Steps />
+        <Steps
+          title={
+            <span>
+              设备接入推荐步骤
+              <Tooltip title={'不同的设备因为通信协议的不用，存在接入步骤的差异'}>
+                <QuestionCircleOutlined style={{ paddingLeft: 12 }} />
+              </Tooltip>
+            </span>
+          }
+          data={[
+            {
+              title: '创建产品',
+              content:
+                '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
+              onClick: () => {},
+            },
+            {
+              title: '配置产品接入方式',
+              content:
+                '通过产品对同一类型的所有设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
+              onClick: () => {},
+            },
+            {
+              title: '添加测试设备',
+              content: '添加单个设备，用于验证产品模型是否配置正确。',
+              onClick: () => {},
+            },
+            {
+              title: '功能调试',
+              content: '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
+              onClick: () => {},
+            },
+            {
+              title: '批量添加设备',
+              content: '批量添加同一产品下的设备',
+              onClick: () => {},
+            },
+          ]}
+        />
       </Col>
     </Row>
   );

src/pages/home/index.tsx

@@ -9,7 +9,7 @@ import Service from './service';
 export const service = new Service();
 const Home = () => {
   type ViewType = keyof typeof ViewMap;
-  const [current, setCurrent] = useState<ViewType>('init');
+  const [current, setCurrent] = useState<ViewType>('device');
 
   const ViewMap = {
     init: <Init changeView={(value: ViewType) => setCurrent(value)} />,
@@ -24,7 +24,7 @@ const Home = () => {
         if (resp.result.length == 0) {
           setCurrent('init');
         } else {
-          setCurrent(resp.result[0]?.content);
+          // setCurrent(resp.result[0]?.content);
         }
       }
     });