feat(merge): merge xyh

feat(Home): 优化home样式

config/proxy.ts

@@ -12,11 +12,11 @@ export default {
       // target: 'http://192.168.32.44:8844/',
       // ws: 'ws://192.168.32.44:8844/',
       // 开发环境
-      // target: 'http://120.79.18.123:8844/',
-      // ws: 'ws://120.79.18.123:8844/',
+      target: 'http://120.79.18.123:8844/',
+      ws: 'ws://120.79.18.123:8844/',
       // 测试环境
-      target: 'http://120.77.179.54:8844/',
-      ws: 'ws://120.77.179.54:8844/',
+      // target: 'http://120.77.179.54:8844/',
+      // ws: 'ws://120.77.179.54:8844/',
       // target: 'http://192.168.66.5:8844/',
       // ws: 'ws://192.168.66.5:8844/',
       // ws: 'ws://demo.jetlinks.cn/jetlinks',

src/components/AMapComponent/PathSimplifier/index.tsx

@@ -34,7 +34,6 @@ const PathSimplifier = (props: PathSimplifierProps) => {
       }
 
       if (props.pathData) {
-        console.log(props.pathData.map((item) => ({ name: item.name || '路线', path: item.path })));
         pathSimplifierRef.current?.setData(
           props.pathData.map((item) => ({ name: item.name || '路线', path: item.path })),
         );

src/pages/home/components/Body.tsx

@@ -0,0 +1,21 @@
+import Title from '@/pages/home/components/Title';
+import './index.less';
+import classNames from 'classnames';
+
+interface BodyProps {
+  title: string;
+  english: string;
+  className?: string;
+  url?: string;
+}
+const defaultUrl = require('/public/images/home/content.png');
+export default (props: BodyProps) => {
+  return (
+    <div className={classNames('home-body', props.className)}>
+      <div className={'home-body-img'}>
+        <img src={props.url || defaultUrl} />
+      </div>
+      <Title title={props.title} english={props.english} />
+    </div>
+  );
+};

src/pages/home/components/Guide.tsx

@@ -1,36 +1,66 @@
-import { Card, Col, Row } from 'antd';
+import './index.less';
+import { getMenuPathByCode } from '@/utils/menu';
+import { message } from 'antd';
+import useHistory from '@/hooks/route/useHistory';
+import Title from './Title';
 
-interface Props {
+const Image = {
+  1: require('/public/images/home/1.png'),
+  2: require('/public/images/home/2.png'),
+  3: require('/public/images/home/3.png'),
+};
+
+interface GuideProps {
   title: string;
-  data: any[];
-  jump?: (auth: boolean, url: string, param: string) => void;
+  data: GuideItemProps[];
+}
+
+interface GuideItemProps {
+  key: string;
+  name: string;
+  english: string;
+  url: string;
+  param: string;
+  index?: number;
+  auth: boolean;
 }
 
-const Guide = (props: Props) => {
-  const { title, data, jump } = props;
+const GuideItem = (props: GuideItemProps) => {
+  const path = getMenuPathByCode(props.url);
+  const history = useHistory();
+
+  const jumpPage = () => {
+    if (path && props.auth) {
+      history.push(`${path}${props.param}`);
+    } else {
+      message.warning('暂无权限，请联系管理员');
+    }
+  };
+
   return (
-    <Card>
-      <div style={{ marginBottom: 15 }}>
-        <h3>{title}</h3>
+    <div className={'home-guide-item arrow'} onClick={jumpPage}>
+      <div className={'item-english'}>{props.english}</div>
+      <div className={'item-title'}>{props.name}</div>
+      <div className={`item-index`}>
+        <img src={Image[props.index!]} />
       </div>
-      <Row gutter={24}>
-        {data.map((item) => (
-          <Col key={item.key} span={8}>
-            <Card
-              bordered
-              onClick={() => {
-                if (jump) {
-                  jump(item.auth, item.url, item.param);
-                }
-              }}
-            >
-              {item.name}
-            </Card>
-          </Col>
+    </div>
+  );
+};
+
+const Guide = (props: GuideProps) => {
+  return (
+    <div className={'home-guide'}>
+      <Title title={props.title} />
+      <div className={'home-guide-items'}>
+        {props.data.map((item, index) => (
+          <GuideItem {...item} index={index + 1} />
         ))}
-      </Row>
-    </Card>
+      </div>
+    </div>
   );
 };
 
+Guide.Item = GuideItem;
+
 export default Guide;

src/pages/home/components/Statistics.tsx

@@ -1,28 +1,36 @@
-import { Card, Col, Row } from 'antd';
+import Title from '@/pages/home/components/Title';
+import React from 'react';
+import './index.less';
 
-const Statistics = () => {
+type StatisticsItem = {
+  name: string;
+  value: number;
+  img: string;
+};
+
+interface StatisticsProps {
+  extra?: React.ReactNode | string;
+  data: StatisticsItem[];
+}
+
+const defaultImage = require('/public/images/home/top-1.png');
+
+const Statistics = (props: StatisticsProps) => {
   return (
-    <Card
-      title={'设备统计'}
-      extra={
-        <a
-          onClick={() => {
-            // pageJump(!!getMenuPathByCode('device/DashBoard'), 'device/DashBoard');
-          }}
-        >
-          详情
-        </a>
-      }
-    >
-      <Row gutter={24}>
-        <Col span={12}>
-          <Card bordered>产品数量</Card>
-        </Col>
-        <Col span={12}>
-          <Card bordered>设备数量</Card>
-        </Col>
-      </Row>
-    </Card>
+    <div className={'home-statistics'}>
+      <Title title={'设备统计'} extra={props.extra} />
+      <div className={'home-statistics-body'}>
+        {props.data.map((item) => (
+          <div className={'home-guide-item'}>
+            <div className={'item-english'}>{item.name}</div>
+            <div className={'item-title'}>{item.value}</div>
+            <div className={`item-index`}>
+              <img src={item.img || defaultImage} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 

src/pages/home/components/Title.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface TitleProps {
+  title: string;
+  english?: string;
+  className?: string;
+  extra?: React.ReactNode | string;
+}
+
+export default (props: TitleProps) => {
+  return (
+    <div className={classNames('home-title', props.className)}>
+      <span>{props.title}</span>
+      <div>{props.extra}</div>
+      {props.english && <div className={'home-title-english'}>{props.english}</div>}
+    </div>
+  );
+};

src/pages/home/components/index.less

@@ -0,0 +1,113 @@
+@import '~antd/es/style/themes/default.less';
+@bodyPadding: 24px 16px;
+@margin: 24px;
+
+.home-guide {
+  margin-bottom: @margin;
+  padding: @bodyPadding;
+  background-color: #fff;
+
+  .home-guide-items {
+    display: flex;
+    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;
+  }
+
+  .item-title {
+    margin: 20px 0;
+    color: @text-color;
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  .item-index {
+    position: absolute;
+    right: 10%;
+    bottom: 0;
+  }
+}
+
+.home-title {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-left: 18px;
+  font-weight: bold;
+  font-size: 18px;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    background-color: @primary-color;
+    border: 1px solid #b4c0da;
+    transform: translateY(-50%);
+    content: ' ';
+  }
+
+  .home-title-english {
+    position: absolute;
+    top: 30px;
+    color: rgba(0, 0, 0, 0.3);
+    font-size: 12px;
+  }
+}
+
+.home-body {
+  position: relative;
+  height: 500px;
+  margin-bottom: @margin;
+  padding: @bodyPadding;
+  overflow: hidden;
+  background-color: #fff;
+
+  .home-body-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    height: 100%;
+  }
+}
+
+.home-statistics {
+  position: relative;
+  padding: @bodyPadding;
+  background-color: #fff;
+
+  .home-statistics-body {
+    display: flex;
+    gap: 24px;
+  }
+}

src/pages/home/components/index.ts

@@ -0,0 +1,4 @@
+export { default as Guide } from './Guide';
+export { default as Title } from './Title';
+export { default as Statistics } from './Statistics';
+export { default as Body } from './Body';

src/pages/home/device/index.tsx

@@ -1,7 +1,6 @@
-import { Card, Col, message, Row } from 'antd';
+import { Col, Row } from 'antd';
 import { PermissionButton } from '@/components';
-import { getMenuPathByCode } from '@/utils/menu';
-import Guide from '../components/Guide';
+import { Guide, Body } from '../components';
 import Statistics from '../components/Statistics';
 import Steps from '../components/Steps';
 
@@ -10,40 +9,28 @@ const Device = () => {
   const devicePermission = PermissionButton.usePermission('device/Instance').permission;
   const rulePermission = PermissionButton.usePermission('rule-engine/Instance').permission;
   // // 跳转
-  const pageJump = (auth: boolean, url: string, param: string) => {
-    if (auth) {
-      // 判断是否有权限
-      const path = getMenuPathByCode(url);
-      if (path) {
-        const tab: any = window.open(`${origin}/#${path}${param}`);
-        tab!.onTabSaveSuccess = () => {
-          // if (value.status === 200) {
-          // }
-        };
-      }
-    } else {
-      message.error('暂无权限，请联系管理员');
-    }
-  };
 
   const guideList = [
     {
       key: 'product',
-      name: '1、创建产品',
+      name: '创建产品',
+      english: 'CREATE PRODUCT',
       auth: !!productPermission.add,
       url: 'device/Product',
       param: '?save=true',
     },
     {
       key: 'device',
-      name: '2、创建设备',
+      name: '创建设备',
+      english: 'CREATE DEVICE',
       auth: !!devicePermission.add,
       url: 'device/Instance',
       param: '?save=true',
     },
     {
       key: 'rule-engine',
-      name: '3、规则引擎',
+      name: '规则引擎',
+      english: 'RULE ENGINE',
       auth: !!rulePermission.add,
       url: 'rule-engine/Instance',
       param: '?save=true',
@@ -74,22 +61,33 @@ const Device = () => {
 
   return (
     <Row gutter={24}>
-      <Col span={12}>
+      <Col span={14}>
         <Guide
           title="物联网引导"
           data={guideList}
-          jump={(auth: boolean, url: string, param: string) => {
-            pageJump(auth, url, param);
-          }}
+          // jump={(auth: boolean, url: string, param: string) => {
+          //   pageJump(auth, url, param);
+          // }}
         />
       </Col>
-      <Col span={12}>
-        <Statistics />
+      <Col span={10}>
+        <Statistics
+          data={[
+            {
+              name: '产品数量',
+              value: 111,
+              img: '',
+            },
+            {
+              name: '设备数量',
+              value: 12,
+              img: '',
+            },
+          ]}
+        />
       </Col>
       <Col span={24}>
-        <Card style={{ margin: '20px 0' }} title="平台架构图">
-          <img style={{ height: 500 }} src={require('/public/images/login.png')} />
-        </Card>
+        <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
       </Col>
       <Col span={24}>
         <Steps />

src/pages/media/DashBoard/index.tsx

@@ -100,10 +100,10 @@ export default () => {
           type: 'value',
         },
         grid: {
-          left: '2%',
+          left: '4%',
           right: '2%',
           top: '2%',
-          bottom: '2%',
+          bottom: '4%',
         },
         series: [
           {