feat: 首页UI基本完成

Author: Alexzjt

.dumi/theme/locales/en.json

@@ -1,6 +1,6 @@
 {
   "蚂蚁数据可视化": "AntV",
-  "让数据栩栩如生": "Liven Data Lively",
+  "·让AGI栩栩如生": "· Liven AGI Lively",
   "蚂蚁集团全新一代数据可视化解决方案": "A new generation of data visualization solution from Ant Group",
   "AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。": "AntV is a new generation of data visualization solution from Ant Group. We provide best practices of data visualization with simplicity, convenience, profession, reliability, and infinite possibilities.",
   "立业・利业": "Found business・Help business",

.dumi/theme/locales/zh.json

@@ -1,6 +1,6 @@
 {
   "蚂蚁数据可视化": "蚂蚁数据可视化",
-  "让数据栩栩如生": "让数据栩栩如生",
+  "·让AGI栩栩如生": "·让AGI栩栩如生",
   "蚂蚁集团全新一代数据可视化解决方案": "蚂蚁集团全新一代数据可视化解决方案",
   "AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。": "AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。",
   "立业・利业": "立业・利业",

.dumirc.ts

@@ -31,7 +31,15 @@ export default defineConfig({
       apiKey: '9d1cd586972bb492b7b41b13a949ef30',
       indexName: 'antv_g6',
     },
-    navs: [],
+    navs: [
+      {
+        slug: 'docs/specification/principles/basic',
+        title: {
+          zh: '设计语言',
+          en: 'Design',
+        },
+      },
+    ],
     ecosystems: [
       // 头部的菜单中的「周边生态」
     ],

package.json

@@ -18,6 +18,8 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
+    "ahooks": "^3.9.5",
+    "@tanstack/react-query": "^5.90.2",
     "@ant-design/icons": "^4.8.3",
     "@antv/dumi-theme-antv": "0.7.9",
     "@antv/g2plot": "^2.3.1",

site/components/Banner/Banner.module.less

@@ -108,7 +108,7 @@
   }
 
   .header {
-    height: 670px;
+    height: 1130px;
     position: relative;
     font-family: PingFangSC;
   }
@@ -127,7 +127,7 @@
     font-size: 64px;
     color: #000;
     text-align: center;
-    margin-top: 138px;
+    margin-top: 108px;
     font-family: AlibabaPuHuiTiRHeavy;
 
     > span {
@@ -218,7 +218,7 @@
     z-index: 10;
     width: 100%;
     position: absolute;
-    top: 506px;
+    top: 966px;
 
     .message {
       &:extend(.commonFlexConfig);
@@ -299,3 +299,7 @@
     background-position-y: -100px, -80px, -60px, -40px, -20px, 0px;
   }
 }
+
+//:root {
+//  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
+//}

site/components/Banner/Banner.tsx

@@ -4,6 +4,7 @@ import { ActiveIcon } from '../common';
 import { ANCHORNAME } from '../ProjectCard';
 
 import styles from './Banner.module.less';
+import { HomeDialog } from '@antv/dumi-theme-antv/dist/components/AI/HomeDialog';
 
 export default () => {
   const [message, setMessage] = useState([]);
@@ -64,33 +65,36 @@ export default () => {
         <div className={styles.top}>
           <div className={styles.mainTitle}>
             <span>AntV</span>
-            {useT('·让数据栩栩如生')}
+            {useT('·让AGI栩栩如生')}
           </div>
           <div className={styles.subTitle}>
             {useT(
               '蚂蚁企业级数据可视化解决方案，让人们在数据世界里获得视觉化思考能力',
             )}
           </div>
         </div>
-        <div className={styles.buttons}>
-          <div className={styles.start} onClick={scrollToAnchor}>
-            <div className={styles.startIcon} />
-            {useT('开始使用')}
-          </div>
-          <ActiveIcon
-            href="/specification/principles/basic"
-            className={styles.design}
-            img="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_xFsQbWE_AYAAAAAAAAAAAAADmJ7AQ/original"
-            activeImg="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9VnTpferioAAAAAAAAAAAAADmJ7AQ/original"
-            text={useT('设计语言')}
-          />
-        </div>
+        <HomeDialog className={styles.top}
+                    promptTextareaStyle={{margin: "0 auto", width: "760px"}}
+                    style={{margin: "270px auto", width: "unset"}}/>
+        {/*<div className={styles.buttons}>*/}
+        {/*  <div className={styles.start} onClick={scrollToAnchor}>*/}
+        {/*    <div className={styles.startIcon} />*/}
+        {/*    {useT('开始使用')}*/}
+        {/*  </div>*/}
+        {/*  <ActiveIcon*/}
+        {/*    href="/specification/principles/basic"*/}
+        {/*    className={styles.design}*/}
+        {/*    img="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_xFsQbWE_AYAAAAAAAAAAAAADmJ7AQ/original"*/}
+        {/*    activeImg="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A9VnTpferioAAAAAAAAAAAAADmJ7AQ/original"*/}
+        {/*    text={useT('设计语言')}*/}
+        {/*  />*/}
+        {/*</div>*/}
         <div className={styles.bottom}>
           {message.map(({ title, subTitle, img, link }) => {
             return (
               <a
                 className={styles.message}
-                key={title}
+                key={JSON.stringify(title)}
                 target="_blank"
                 href={link}
               >