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

antvis · Nov 6, 2023 · 4c1c7db · 4c1c7db
1 parent d00a4bc
commit 4c1c7db
Show file tree

Hide file tree

Showing 19 changed files with 257 additions and 70 deletions.
diff --git a/.dumi/theme/locales/en.json b/.dumi/theme/locales/en.json
@@ -272,16 +272,16 @@
   "经历了海量数据场景下的严苛考验，蚂蚁集团自研了数据库、云原生、隐私计算、图计算为代表的数字化“根技术”": "Having experienced the severe test under the massive data scenario, Ant Group has self-developed the digital “root technology” represented by database, cloud native, privacy computing and graph computing.",
   "丰富图表，选用自如": "Rich Chart, Choose Freely",
   "数据驱动，高度易用，可扩展的可视化图形语法": "Data-driven, highly easy to use, extensible visual graphics syntax",
-  "开箱即用的多维可视分析表格": "Multi-dimensional visual analysis form out of the box",
-  "便捷的关系数据可视化引擎与图分析工具": "Convenient relational data visualization engine and graph analysis tool",
+  "开箱即用的多维可视分析表格": "Multi-dimensional visual analysis form out of the box.",
+  "便捷的关系数据可视化引擎与图分析工具": "Convenient relational data visualization engine and graph analysis tool.",
   "散点图 (3D图表)": "Scatter Plot (3D Chart)",
-  "高性能/高渲染质量的地理空间数据可视化框架": "High performance/high render quality geospatial data visualization framework",
+  "高性能/高渲染质量的地理空间数据可视化框架": "High performance/high render quality geospatial data visualization framework.",
   "统计图表 (移动端)": "Statistical Charts (Mobile)",
-  "专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境": "Focus on mobile visualization solutions, compatible with H5/Mini Program/Weex and other multi-terminal environments",
+  "专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境": "Focus on mobile visualization solutions, compatible with H5/Mini Program/Weex and other multi-terminal environments.",
   "树形图表 (移动端)": "Tree Chart (Mobile)",
   "思维导图": "Mind Map",
-  "一款可以快速、流畅运行于移动设备中的图可视化引擎": "A graphical visualization engine that runs fast and smoothly on mobile devices",
-  "极易定制、开箱即用、数据驱动的图编辑引擎": "Easy to customize, out of the box, data-driven graph editing engine",
+  "一款可以快速、流畅运行于移动设备中的图可视化引擎": "A graphical visualization engine that runs fast and smoothly on mobile devices.",
+  "极易定制、开箱即用、数据驱动的图编辑引擎": "Easy to customize, out of the box, data-driven graph editing engine.",
   "树形图表": "Tree Chart",
   "地图 (3D图表)": "Map (3D Chart)",
   "矩形式树图 (移动端)": "Heat Tree Map (Mobile)",
@@ -311,7 +311,7 @@
   "让普通应用低成本享受 Serverless 体验，帮助企业降本增效！": "Let common applications enjoy Serverless experience at low cost to help enterprises reduce costs and increase efficiency!",
   "产品首页": "HomePage",
   "使用文档": "Docs",
-  "伊利诺伊大学计算机科学客座教授H2O.ai 首席科学家，G2 项目顾问": "Visiting Professor of Computer Science at the University of Illinois, Principal Scientist at H2O.ai and Advisor to the G2 project",
+  "伊利诺伊大学计算机科学客座教授H2O.ai 首席科学家，G2 项目顾问": "Visiting Professor of Computer Science at the University of Illinois, Principal Scientist at H2O.ai and Advisor to the G2 project.",
   "在多年可视化设计与开发的基础上，蚂蚁金服推出了 AntV 产品，这是工业界基础可视化语法与实践方面发出的最强声音，也是工业界与学术界一道推进可视化研发进展的最佳利器。": "Building on years of visualization design and development, Ant Financial launched AntV, the industry's strongest voice in basic visualization grammar and practice, and the best tool for industry to work with academia to advance visualization research and development.",
   "设计，让数据美而简单，让可视化更普惠。好策略、好资产助力好报表、好产品。": "Design, make the data beautiful and simple, make the visualization more inclusive. Good strategy, good assets help good reports, good products.",
   "用户总量": "Total",

diff --git a/site/components/Banner/Banner.module.less b/site/components/Banner/Banner.module.less
@@ -13,7 +13,7 @@
   .header {
     height: 618px;
     position: relative;
-    font-family:  PingFangSC;
+    font-family: PingFangSC;
   }
 
   .top {
@@ -23,12 +23,12 @@
     right: 0;
     top: 0;
     bottom: 0;
-    font-family:  AlibabaPuHuiTiR;
+    font-family: AlibabaPuHuiTiR;
   }
 
   .mainTitle {
-    font-size: 48px;
-    font-weight: 800;
+    font-size: 64px;
+    font-weight: 900;
     color: #000;
     text-align: center;
     margin-top: 112px;
@@ -65,10 +65,11 @@
       &:extend(.commonFlexConfig);
       height: 54px;
       width: 166px;
-      border-radius: 6px;
+      border-radius: 12px;
       font-size: 18px;
+      font-weight: bold;
       cursor: pointer;
-      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.20);
+      box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.10);
       margin: 0 11.5px;
 
       >img {
@@ -110,6 +111,7 @@
       max-width: 381px;
       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;
@@ -119,16 +121,16 @@
       .messageTitle {
         &:extend(.commonFlexConfig);
         font-weight: 500;
-        font-size: 20px;
+        font-size: 18px;
         color: #1D2129;
         margin-bottom: 8px;
         text-align: center;
-        text-indent: 1.6em;
+        text-indent: 2em;
         position: relative;
 
         > img {
           position: absolute;
-          top: 4px;
+          top: 2px;
           left: 4px;
         }
       }
@@ -140,7 +142,8 @@
       }
 
       &:hover {
-        box-shadow: 0 12px 32px 0 rgba(0,0,0,0.10);
+        transform: translateY(-8px);
+        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.10);
 
         .messageTitle {
           color: rgba(105, 30, 255, 1);

diff --git a/site/components/ComplexCharts/index.module.less b/site/components/ComplexCharts/index.module.less
@@ -33,7 +33,7 @@
       border-radius: 8px;
       margin-right: 20px;
       line-height: 52px;
-      font-size: 20px;
+      font-size: 18px;
 
       >img {
         margin-right: 8px;

diff --git a/site/components/FamousPersons/index.module.less b/site/components/FamousPersons/index.module.less
@@ -20,14 +20,14 @@
       &:extend(.commonFlexConfig);
       flex-direction: column;
       justify-content: space-between;
-      height: 373px;
+      height: 377px;
       width: 279px;
-      padding: 29px 12px 12px;
+      padding: 29px 20px 20px;
       position: relative;
       margin: 0 14px;
       letter-spacing: 0;
       transition: all .2s;
-      background-color: #F6F8FD;
+      background-color: #fff;
       border: 1px solid #E5E8EF;
       box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.05);
       border-radius: 16px;
@@ -56,15 +56,16 @@
       }
 
       .name {
+        margin: 4px 0;
         font-size: 24px;
         color: #1D2129;
-        font-family: AlibabaPuHuiTiB;
+        font-weight: 500;
+        font-family: PingFangSC;
       }
 
       .text {
-        position: relative;
-        top: -10px;
-        padding: 0 11px;
+        line-height: 28px;
+        height: 56px;
         font-size: 14px;
         color: #424E66;
         overflow: hidden;
@@ -74,17 +75,16 @@
         -webkit-box-orient: vertical;
       }
 
+      .hr {
+        width: 100%;
+        border-top: 1px solid #f5f5f5;
+        margin: 14px 0;
+      }
+
       .msg {
-        line-height: 25px;
-        padding: 8px 12px;
-        height: 164px;
-        background-color: #FFFFFF;
-        border-radius: 12px;
+        color: #86909C;
+        flex: 1;
         overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 6;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
       }
     }
   }

diff --git a/site/components/FamousPersons/index.tsx b/site/components/FamousPersons/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'dumi';
-import { ModuleTitle as Title } from '../common';
+import { ModuleTitle as Title, OverflowedText } from '../common';
 import FAMOUS_PERSONS_DATAS from '../../data/famous-persons.json';
 
 import styles from './index.module.less';
@@ -32,8 +32,13 @@ export function FamousPersons() {
                 />
               </div>
               <div className={styles.name}>{useT(data.name)}</div>
-              <div className={styles.text}>{useT(data.text)}</div>
-              <div className={styles.msg}>{useT(data.msg)}</div>
+              <div className={styles.text}>
+                <OverflowedText text={useT(data.text)} maxHeight={56} maxWidth={237} style={{ fontSize: 14, lineHeight: 1.9 }}  />
+                </div>
+              <div className={styles.hr} />
+              <div className={styles.msg}>
+                <OverflowedText text={useT(data.msg)} maxHeight={143} maxWidth={237} style={{ fontSize: 14, lineHeight: 1.9 }}  />
+              </div>
             </div>
           })
         }

diff --git a/site/components/LinkCharts/index.module.less b/site/components/LinkCharts/index.module.less
@@ -44,7 +44,7 @@
         letter-spacing: 0;
         position: relative;
         margin: 0 14px;
-        transition: all 1s;
+        transition: all .2s;
         cursor: pointer;
 
         &:hover {
@@ -62,7 +62,6 @@
         }
 
         .subTitle {
-          height: 44px;
           font-size: 14px;
           color: #424E66;
           line-height: 22px;
@@ -82,8 +81,9 @@
           font-size: 14px;
           top: 0;
           right: 0;
-          border-radius: 0 16px 0 16px;
+          border-radius: 0 8px 0 8px;
           color: #fff;
+
         }
 
         .image {
@@ -94,6 +94,7 @@
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
         }
       }
     }
@@ -117,5 +118,9 @@
         background-color: #E5E8EF;
       }
     }
+
+    > .left {
+      transform: rotate(180deg);
+    }
   }
 }
diff --git a/site/components/LinkCharts/index.tsx b/site/components/LinkCharts/index.tsx
@@ -1,9 +1,8 @@
 import classNames from 'classnames';
 import { useLocale, useIntl } from 'dumi';
-import React, { useCallback, useEffect, useState } from 'react';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import React, { useCallback, useState } from 'react';
 import { useChinaMirrorHost } from '@antv/dumi-theme-antv/dist/slots/hooks';
-import { ModuleTitle as Title } from '../common';
+import { ModuleTitle as Title, OverflowedText } from '../common';
 import { transformUrl } from '../Products/getProducts';
 import CHARTS_DATAS from '../../data/link-charts.json';
 
@@ -60,7 +59,9 @@ export function LinkCharts() {
             data.map((data) => {
               return <a className={styles.chart} href={transformUrl({ url: data.link, language, isChinaMirrorHost })} target='_black' >
                 <div className={styles.title}>{useT(data.title)}</div>
-                <div className={styles.subTitle}>{useT(data.subTitle)}</div>
+                <div className={styles.subTitle}>
+                  <OverflowedText text={useT(data.subTitle)} maxWidth={341} />
+                </div>
                 <div className={styles.antv} style={{ background: data.color }} >{data.antv}</div>
                 <div className={styles.image} style={{ backgroundImage: `url(${data.image})` }} />
               </a>
@@ -69,8 +70,8 @@ export function LinkCharts() {
         </div>
       </div>
       <div className={styles.buttons}>
-        <div className={styles.left} onClick={() => onClick('left')} ><LeftOutlined /></div>
-        <div className={styles.right} onClick={() => onClick('right')}><RightOutlined /></div>
+        <div className={styles.left} onClick={() => onClick('left')} ><img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Q4WbQ5DCXEAAAAAAAAAAAAAADmJ7AQ/original' /></div>
+        <div className={styles.right} onClick={() => onClick('right')}><img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Q4WbQ5DCXEAAAAAAAAAAAAAADmJ7AQ/original' /></div>
       </div>
     </div>
   );

diff --git a/site/components/ProjectCard/index.module.less b/site/components/ProjectCard/index.module.less
@@ -8,7 +8,7 @@
   &:extend(.commonFlexConfig);
   padding: 80px 0 40px;
   flex-direction: column;
-  height: 768px;
+  height: 782px;
   overflow: hidden;
   font-family:  PingFangSC;
 

diff --git a/site/components/ThemeCharts/Charts/Column/index.tsx b/site/components/ThemeCharts/Charts/Column/index.tsx
@@ -10,6 +10,7 @@ export const DARK_THEME_CONFIG = {
         fill: '#fff',
       },
     },
+    radio: false,
   },
   yAxis: {
     tickCount: 4,
@@ -42,7 +43,7 @@ export const DARK_THEME_CONFIG = {
       },
     },
   },
-};
+} as any;
 
 export const LIGHT_THEME_CONFIG = {
   legend: {
@@ -51,6 +52,7 @@ export const LIGHT_THEME_CONFIG = {
         fill: '#424E66',
       },
     },
+    radio: false,
   },
   yAxis: {
     tickCount: 4,
@@ -83,7 +85,7 @@ export const LIGHT_THEME_CONFIG = {
       },
     },
   },
-}
+} as any;
 
 type ColumnProps = {
   theme?: any;

diff --git a/site/components/ThemeCharts/Charts/Gauge/index.tsx b/site/components/ThemeCharts/Charts/Gauge/index.tsx
@@ -32,12 +32,13 @@ export function GaugeChart(props: GaugeProps) {
         },
         statistic: {
           content: {
-            offsetY: -30,
+            offsetY: -80,
             customHtml: () => {
               return `
                 <div>
+                  <img style="width: 36px; height: 36px;margin-bottom: 12px;" src="${isDark ? 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hINPQYnKaIAAAAAAAAAAAAAADmJ7AQ/original' : 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BjKVTp2kKSQAAAAAAAAAAAAADmJ7AQ/original'}" />
                   <div style="font-size: 12px;color: ${isDark ? 'rgba(255,255,255,0.65)' : '#424E66'};" >${useT('用户总量')}</div>
-                  <div style="font-size: 32px;color: ${isDark ? '#fff' : '#1D2129'}; line-height: 45px;" >1,320</div>
+                  <div style="font-size: 32px;color: ${isDark ? '#fff' : '#1D2129'}; line-height: 45px;font-family: AlibabaPuHuiTiB;" >1,320</div>
                 </div>
               `;
             },

diff --git a/site/components/ThemeCharts/Charts/Pie/index.tsx b/site/components/ThemeCharts/Charts/Pie/index.tsx
@@ -53,7 +53,7 @@ export function PieChart(props: PieProps) {
             offsetY: -2,
             content: '3,200',
             style: {
-              fontFamily: 'PingFangSC',
+              fontFamily: 'AlibabaPuHuiTiB',
               fontSize: '20px',
               color: isDark ? '#fff' : '#1D2129'
             },

diff --git a/site/components/ThemeCharts/Charts/index.module.less b/site/components/ThemeCharts/Charts/index.module.less
@@ -5,5 +5,6 @@
   >div {
     width: 100%;
     height: 100%;
+
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,6 @@ @@
       >div {
         width: 100%;
         height: 100%;
       }
     }