feat(detail): update Antv home update dumi-theme-antv

.dumi/theme/locales/en.json

@@ -317,5 +317,14 @@
   "用户总量": "Total",
   "3D 可视化图": "3D Visual Chart",
   "渲染器运行时切换": "Renderer Runtime Switch",
-  "分面帧动画": "Faceted Frame Animation"
+  "分面帧动画": "Faceted Frame Animation",
+
+  "分类色板": "Classification Color Palette",
+  "单一顺序色板": "Single Sequential Color Palette",
+  "邻近顺序色板": "Adjacent Sequential Color Palette",
+  "发散色板": "Diverge Color Palette",
+  "主要用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。": "It is mainly used to describe classified data, such as apples, bananas, pears, usually a color represents a value to distinguish different types, the color distribution is balanced, the difference between adjacent colors should be considered between the light and dark, often used for different pie chart classification, filling different countries in the map, different roles in the relationship chart, etc.",
+  "单色顺序色板，均基于分类色板生长而来，一般使用同一色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "Monochromatic sequential color palette, all based on the growth of classification swatches, generally use the same hue, through the gradual change of brightness or saturation, commonly used to represent the numerical size or gradient change in the same thing, such as ranking changes, comparison of the number of new people in a country or region, risk level changes, etc.",
+  "邻近顺序色板，均基于分类色板生长而来，为加大辨识度也可使用邻近色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "Adjacent sequential color palette, all based on the growth of the classification color palette, in order to increase the recognition can also use adjacent colors, through the gradual change of brightness or saturation, commonly used to represent the value size or gradient change in the same thing, such as ranking change, comparison of the number of new population in a country or region, risk level change.",
+  "点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等。": "The continuous change interval from the point to the positive value shows the size relationship between the two opposite values, which is often used for the cold and hot temperature, altitude, stock rise and fall, etc."
 }

.dumi/theme/locales/zh.json

@@ -310,5 +310,13 @@
   "用户总量": "用户总量",
   "3D 可视化图": "3D 可视化图",
   "渲染器运行时切换": "渲染器运行时切换",
-  "分面帧动画": "分面帧动画"
+  "分面帧动画": "分面帧动画",
+  "分类色板": "分类色板",
+  "单一顺序色板": "单一顺序色板",
+  "邻近顺序色板": "邻近顺序色板",
+  "发散色板": "发散色板",
+  "主要用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。": "主要用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。",
+  "单色顺序色板，均基于分类色板生长而来，一般使用同一色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "单色顺序色板，均基于分类色板生长而来，一般使用同一色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。",
+  "邻近顺序色板，均基于分类色板生长而来，为加大辨识度也可使用邻近色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "邻近顺序色板，均基于分类色板生长而来，为加大辨识度也可使用邻近色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。",
+  "点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等。": "点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等。"
 }

.dumi/theme/slots/Detail/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import { debounce } from 'lodash';
+import React, { useEffect, useState, useRef } from 'react';
 import Banner from 'site/components/Banner/Banner';
 import { ThemeCharts } from 'site/components/ThemeCharts';
 import { ComplexCharts } from 'site/components/ComplexCharts';
@@ -16,8 +17,9 @@ interface NotificationProps {
 }
 
 export const Detail: React.FC = () => {
-  const locale = useLocale()
-  const intl = useIntl()
+  const locale = useLocale();
+  const intl = useIntl();
+  const ref = useRef(null);
 
   const useT = (transformedMessage: string) => {
     return intl.formatMessage({
@@ -35,6 +37,21 @@ export const Detail: React.FC = () => {
       });
   }, [notificationsUrl]);
 
+  useEffect(() => {
+    const onResize = debounce(() => {
+      if (ref?.current) {
+        const scrollDom = ref?.current as HTMLDivElement;
+        const { clientWidth, scrollWidth } = scrollDom;
+        scrollDom.scrollLeft = (scrollWidth - clientWidth) / 2;
+      }
+    }, 100);
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    }
+  }, []);
+
   return (
     <div className="home-container" style={{ backgroundImage: 'linear-gradient(180deg, #F0E5FF 0%, #FFFFFF 13%, #FFFFFF 92%, #F7F8FD 100%)' }} >
       <SEO
@@ -45,8 +62,11 @@ export const Detail: React.FC = () => {
         )}
         lang={locale.id}
       />
-      <div style={{ overflowX: 'auto' }}>
-        <div style={{ minWidth: '1200px' }}>
+      <div
+        style={{ overflowX: 'auto' }}
+        ref={ref}
+      >
+        <div style={{ minWidth: '1280px', scrollSnapAlign: 'center' }}>
           <Banner remoteNews={remoteNews} />
           <ThemeCharts />
           <ComplexCharts />

site/components/Banner/Banner.module.less

@@ -5,10 +5,32 @@
 }
 
 .banner {
+  position: relative;
   overflow: hidden;
-  background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*T_hsTocdvtQAAAAAAAAAAAAADmJ7AQ/original);
-  background-size: cover;
+  background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*KL9wS54k2U8AAAAAAAAAAAAADmJ7AQ/original);
+
   background-repeat: no-repeat;
+  background-size: cover;
+
+  .leftBackground,.rightBackground {
+    width: 900px;
+    height: 100%;
+    position: absolute;
+    top: 20;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  .leftBackground {
+    left: 0;
+    background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gNDhS5nDO4sAAAAAAAAAAAAADmJ7AQ/original);
+  }
+
+  .rightBackground {
+    right: 0;
+    background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*OXF7QbWURnMAAAAAAAAAAAAADmJ7AQ/original);
+  }
+
 
   .header {
     height: 618px;
@@ -107,15 +129,16 @@
     .message {
       &:extend(.commonFlexConfig);
       min-height: 114px;
-      min-width: 381px;
-      max-width: 381px;
+      width: calc((100vw - 280px - 26px) / 3);
+      min-width: 338px; 
+      max-width: 551px;
       background-color: #FFFFFF;
       border: 1px solid #E5E8EF;
       transition: all .2s;
       padding: 16px;
       box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
       border-radius: 16px;
-      margin:0 13px;
+      margin: 0 13px;
       flex-direction: column;
 
       .messageTitle {
@@ -128,7 +151,7 @@
         text-indent: 2em;
         position: relative;
 
-        > img {
+        >img {
           position: absolute;
           top: 2px;
           left: 4px;

site/components/Banner/Banner.tsx

@@ -34,6 +34,8 @@ export default () => {
 
   return (
     <div className={styles.banner}>
+      <div className={styles.leftBackground} />
+      <div className={styles.rightBackground} />
       <div className={styles.header}>
         <div className={styles.top}>
           <div className={styles.mainTitle}><span>AntV</span>{useT("·让数据栩栩如生")}</div>

site/components/ComplexCharts/index.module.less

@@ -53,8 +53,9 @@
   }
 
   .content {
-    height: 484px;
-    width: 1200px;
+    width: calc(100vw - 240px);
+    max-width: 1680px;
+    min-width: 1040px;
     border-radius: 16px;
     box-sizing: border-box;
     padding: 24px;
@@ -81,6 +82,7 @@
       >video {
         width: 100%;
         height: 100%;
+        background-size: cover ;
       }
     }
   }

site/components/ComplexCharts/index.tsx

@@ -3,36 +3,10 @@ import React, { useState } from 'react';
 import { useLocale, useIntl } from 'dumi';
 import { useChinaMirrorHost } from '@antv/dumi-theme-antv/dist/slots/hooks';
 import { transformUrl } from '../Products/getProducts';
+import COMPLEX_DATAS from '../../data/complex-charts.json';
 
 import styles from './index.module.less';
 
-const COMPLEX_DATAS = [
-  {
-    text: '3D大图',
-    video: 'https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/wg8jTrLg-3EAAAAAAAAAAAAAK4eUAQBr',
-    link: 'https://g6-next.antv.antgroup.com/examples/feature/features#webgl3d',
-    message: '3D 可视化图',
-    img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RFK7R4TWuWQAAAAAAAAAAAAADmJ7AQ/original',
-    activeImg: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NYQ-SLUYDpMAAAAAAAAAAAAADmJ7AQ/original',
-  },
-  {
-    text: '超强性能',
-    message: '渲染器运行时切换',
-    video: 'https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/w-ePQbtxxZQAAAAAAAAAAAAAK4eUAQBr',
-    link: 'https://g6-next.antv.antgroup.com/zh/examples/feature/features/#rendererSwitch',
-    img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EZ7OTLICg8MAAAAAAAAAAAAADmJ7AQ/original',
-    activeImg: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2_soSbk9R-gAAAAAAAAAAAAADmJ7AQ/original',
-  },
-  {
-    text: '叙事动画',
-    message: '分面帧动画',
-    video: 'https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/6aeMQqQag_4AAAAAAAAAAAAAK4eUAQBr',
-    link: 'https://g2.antv.antgroup.com/examples/storytelling/storytelling/#facet-keyframe',
-    img: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yrlSTZeONjUAAAAAAAAAAAAADmJ7AQ/original',
-    activeImg: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HG6pSovStWgAAAAAAAAAAAAADmJ7AQ/original',
-  },
-];
-
 export function ComplexCharts() {
 
   const locale = useLocale();

site/components/FamousPersons/index.module.less

@@ -21,7 +21,9 @@
       flex-direction: column;
       justify-content: space-between;
       height: 377px;
-      width: 279px;
+      width: calc((100vw - 316px)/ 4);
+      min-width: 239px;
+      max-width: 399px;
       padding: 29px 20px 20px;
       position: relative;
       margin: 0 14px;

site/components/ProjectCard/index.module.less

@@ -14,15 +14,17 @@
 
   .cards {
     height: 540px;
-    width: 1200px;
+    width: calc(100vw - 240px);
+    max-width: 1680px;
+    min-width: 1040px;
     background-image: linear-gradient(114deg, #332F4F 0%, #28243F 100%);
     box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.20);
     border-radius: 16px;
     padding: 24px;
     letter-spacing: 0;
 
     .box {
-      width: 1318px;
+      width: 114%;
 
       .card {
         &:extend(.commonFlexConfig);
@@ -46,6 +48,7 @@
           opacity: 0.65;
           font-size: 16px;
           line-height: 24px;
+          white-space: nowrap;
         }
 
         &.AVA {