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

antvis · Nov 14, 2023 · 15a7eec · 15a7eec
1 parent 3ad0499
commit 15a7eec
Show file tree

Hide file tree

Showing 19 changed files with 781 additions and 145 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@antv/dumi-theme-antv": "0.3.20-beta.0",
+    "@antv/dumi-theme-antv": "^0.3.20-beta.1",
     "@antv/g2plot": "^2.3.1",
     "@antv/g6": "3.3.7",
     "@antv/knowledge": "^0.1.3-alpha.17",

diff --git a/site/components/Banner/Banner.module.less b/site/components/Banner/Banner.module.less
@@ -15,7 +15,8 @@
   background-repeat: no-repeat;
   background-size: cover;
 
-  .leftBackground,.rightBackground {
+  .leftBackground,
+  .rightBackground {
     width: 765px;
     height: 100%;
     position: absolute;
@@ -25,7 +26,7 @@
 
   .leftBackground {
     left: 0;
-    top: 40px;
+    top: 35px;
     background-image: url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gNDhS5nDO4sAAAAAAAAAAAAADmJ7AQ/original);
   }
 
@@ -107,8 +108,28 @@
       background-color: #691EFF;
       color: #FFFFFF;
 
+      .startIcon {
+        width: 20px;
+        height: 20px;
+        margin-right: 6px;
+        background-image:
+          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lo_5RYdqKLsAAAAAAAAAAAAADmJ7AQ/original),
+          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UcuoSovQjxAAAAAAAAAAAAAADmJ7AQ/original),
+          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3VvbT7spBhIAAAAAAAAAAAAADmJ7AQ/original),
+          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PI67SoRSfgsAAAAAAAAAAAAADmJ7AQ/original),
+          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sP-zRZweTJcAAAAAAAAAAAAADmJ7AQ/original),
+          url(https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SFfnTachgWgAAAAAAAAAAAAADmJ7AQ/original),
+        ;
+        background-repeat: no-repeat;
+        background-position-y: 0, 20px, 40px, 60px, 80px, 100px;
+      }
+
       &:hover {
         opacity: 0.8;
+
+        .startIcon {
+          animation: hoverIcon 5s;
+        }
       }
     }
 
@@ -133,7 +154,7 @@
       &:extend(.commonFlexConfig);
       min-height: 114px;
       width: calc((100vw - 360px - 26px) / 3);
-      min-width: 338px; 
+      min-width: 338px;
       max-width: 551px;
       background-color: #FFFFFF;
       border: 1px solid #E5E8EF;
@@ -177,4 +198,34 @@
       }
     }
   }
-}
+}
+
+@keyframes hoverIcon {
+  0% {
+    background-position-y: 0px, 20px, 40px, 60px, 80px, 100px;
+  }
+
+  16.6% {
+    background-position-y: -20px, 0px, 20px, 40px, 60px, 80px;
+  }
+
+  33.3% {
+    background-position-y: -40px, -20px, 0px, 20px, 40px, 60px;
+  }
+
+  50% {
+    background-position-y: -60px, -40px, -20px, 0px, 20px, 40px;
+  }
+
+  66.6% {
+    background-position-y: -80px, -60px, -40px, -20px, 0px, 20px;
+  }
+
+  83.3% {
+    background-position-y: -100px, -80px, -60px, -40px, -20px, 0px;
+  }
+
+  100% {
+    background-position-y: -100px, -80px, -60px, -40px, -20px, 0px;
+  }
+}
diff --git a/site/components/Banner/Banner.tsx b/site/components/Banner/Banner.tsx
@@ -43,7 +43,7 @@ export default () => {
         </div>
         <div className={styles.buttons}>
           <div className={styles.start} onClick={scrollToAnchor} >
-            <img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lo_5RYdqKLsAAAAAAAAAAAAADmJ7AQ/original' alt='start' />
+            <div className={styles.startIcon} />
             {useT("开始使用")}
           </div>
           <ActiveIcon
@@ -67,6 +67,7 @@ export default () => {
           }
         </div>
       </div>
+      <div className={styles.test} />
     </div>
   );
 };
diff --git a/site/components/ComplexCharts/index.module.less b/site/components/ComplexCharts/index.module.less
@@ -54,19 +54,20 @@
 
   .content {
     width: calc(100vw - 360px);
+    height: calc((100vw - 360px) * (571 /1680));
     max-width: 1680px;
     min-width: 1040px;
-    height: 530px;
+    max-height: 571px;
+    min-height: 353px;
     border-radius: 16px;
     box-sizing: border-box;
-    background-image: linear-gradient(111deg, #332F4F 0%, #28243F 100%);
     box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.20);
     overflow: hidden;
 
-      >video {
-        width: 100%;
-        height: 100%;
-        background-size: cover;
-      }
+    >video {
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+    }
   }
 }
diff --git a/site/components/FamousPersons/index.module.less b/site/components/FamousPersons/index.module.less
@@ -20,7 +20,7 @@
       &:extend(.commonFlexConfig);
       flex-direction: column;
       justify-content: space-between;
-      height: calc((1680px - 100vw) / 10 + 377px);
+      height: calc((1680px - 100vw) / 10 + 370px);
       max-height: 377px;
       min-height: 350px;
       width: calc((100vw - 380px - 84px)/ 4);
@@ -36,8 +36,6 @@
       box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
       border-radius: 16px;
 
-
-
       &:hover {
         transform: translateY(-8px);
         box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.10);

diff --git a/site/components/LinkCharts/index.module.less b/site/components/LinkCharts/index.module.less
@@ -65,7 +65,7 @@
           font-size: 14px;
           color: #424E66;
           line-height: 22px;
-          margin-bottom: 10px;
+          margin-bottom: 18px;
           overflow: hidden;
           text-overflow: ellipsis;
           -webkit-line-clamp: 2;

diff --git a/site/components/ProjectCard/index.module.less b/site/components/ProjectCard/index.module.less
@@ -126,6 +126,7 @@
 
 .content {
   font-family: PingFangSC;
+  padding: 0 8px;
 
   .msg {
     display: flex;
@@ -167,6 +168,13 @@
       font-size: 14px;
       color: #1D2129;
 
+      .link {
+        > img {
+          width: 16px;
+          height: 16px;
+        }
+      }
+
       &:hover {
         color: #691EFF;
       }

diff --git a/site/components/ThemeCharts/Charts/Column/index.tsx b/site/components/ThemeCharts/Charts/Column/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useMemo } from 'react';
 import { Column } from '@antv/g2plot';
+import React, { useEffect, useRef, useMemo } from 'react';
 
 import styles from '../index.module.less';
 
@@ -156,7 +156,8 @@ const DATA = [
 
 export function ColumnChart(props: ColumnProps) {
   const { theme = {} } = props;
-  const { value, colors10 } = theme;
+  const { value, categorical } = theme;
+  const colors10 = categorical.colors;
   const isDark = useMemo(() => value === 'dark', [value]);
 
   const containerRef = useRef<HTMLDivElement>(null);

diff --git a/site/components/ThemeCharts/Charts/Gauge/index.tsx b/site/components/ThemeCharts/Charts/Gauge/index.tsx
@@ -1,4 +1,5 @@
 import { useIntl } from 'dumi';
+import { get } from 'lodash';
 import { Gauge } from '@antv/g2plot';
 import React, { useEffect, useMemo, useRef } from 'react';
 
@@ -9,8 +10,9 @@ type GaugeProps = {
 }
 
 export function GaugeChart(props: GaugeProps) {
-  const { theme } = props;
-  const { value, colors10 } = theme;
+  const { theme = {} } = props;
+  const { value, sequential } = theme;
+  const colors10 = get(sequential, ['colors', '0'], []);
   const isDark = useMemo(() => value === 'dark', [value]);
 
   const intl = useIntl();

diff --git a/site/components/ThemeCharts/Charts/Graph/index.tsx b/site/components/ThemeCharts/Charts/Graph/index.tsx
@@ -29,8 +29,9 @@ const DATA = {
 };
 
 export function GraphChart(props: GraphProps) {
-  const { theme } = props;
-  const { value, colors10 } = theme;
+  const { theme = {} } = props;
+  const { value, categorical } = theme;
+  const colors10 = categorical.colors;
   const isDark = useMemo(() => value === 'dark', [value]);
 
   const containerRef = useRef<HTMLDivElement>(null);

diff --git a/site/components/ThemeCharts/Charts/Line/index.tsx b/site/components/ThemeCharts/Charts/Line/index.tsx
@@ -52,8 +52,9 @@ const DATA = [
 ];
 
 export function LineChart(props: LineProps) {
-  const { theme } = props;
-  const { value, colors10 } = theme;
+  const { theme = {} } = props;
+  const { value, categorical } = theme;
+  const colors10 = categorical.colors;
   const isDark = useMemo(() => value === 'dark', [value]);
 
   const containerRef = useRef<HTMLDivElement>(null);

diff --git a/site/components/ThemeCharts/Charts/Pie/index.tsx b/site/components/ThemeCharts/Charts/Pie/index.tsx
@@ -17,7 +17,8 @@ const DATA = [
 
 export function PieChart(props: PieProps) {
   const { theme = {} } = props;
-  const { value, colors10 } = theme;
+  const { value, categorical } = theme;
+  const colors10 = categorical.colors;
   const isDark = useMemo(() => value === 'dark', [value]);
 
   const intl = useIntl();

diff --git a/site/components/ThemeCharts/Charts/StackedColumn/index.tsx b/site/components/ThemeCharts/Charts/StackedColumn/index.tsx
@@ -92,8 +92,9 @@ const DATA = [
 ];
 
 export function StackedColumnChart(props: StackedColumnProps) {
-  const { theme } = props;
-  const { value, colors10 } = theme;
+  const { theme = {} } = props;
+  const { value, categorical } = theme;
+  const colors10 = categorical.colors;
   const isDark = useMemo(() => value === 'dark', [value]);
 
   const containerRef = useRef<HTMLDivElement>(null);