feat: design freamwork

ant-design · Nov 21, 2024 · 54bcd57 · 54bcd57
1 parent 4cfa419
commit 54bcd57
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 386 deletions.
diff --git a/.dumi/pages/index/common/Introduction.tsx b/.dumi/pages/index/common/Introduction.tsx
@@ -95,19 +95,21 @@ const useStyle = createStyles(({ token, css }) => {
   };
 });
 
-export interface IntroductionItem {
+export interface IntroductionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   title?: React.ReactNode;
   desc?: React.ReactNode;
   tag?: React.ReactNode;
   startColor?: string;
   endColor?: string;
   icon?: string;
+  url?: string;
   header?: React.ReactNode;
 }
 
 interface IntroductionProps extends ContainerProps {
   column?: number;
   items?: IntroductionItem[];
+  cardStyle?: React.CSSProperties;
 }
 
 const Introduction: React.FC<IntroductionProps> = (props) => {
@@ -122,7 +124,12 @@ const Introduction: React.FC<IntroductionProps> = (props) => {
         }}
       >
         {props.items?.map((item) => (
-          <div className={styles.item} key={`${item.title}`}>
+          <div
+            className={styles.item}
+            key={`${item.title}`}
+            style={props.cardStyle}
+            onClick={item.onClick}
+          >
             {item.header && (
               <div className={styles.item_header}>
                 <CustomizationProvider>{item.header}</CustomizationProvider>

diff --git a/.dumi/pages/index/components/CompIntroduction/index.tsx b/.dumi/pages/index/components/CompIntroduction/index.tsx
@@ -1,18 +1,11 @@
-import { Bubble } from '@ant-design/x';
 import { createStyles } from 'antd-style';
 import React from 'react';
 
 import useLocale from '../../../../hooks/useLocale';
 import { DESIGN_STAGE_COLOR } from '../../common/CustomizationProvider';
 import Introduction, { type IntroductionItem } from '../../common/Introduction';
 import SiteContext from '../SiteContext';
-import {
-  CustomConversations,
-  CustomizationBubble,
-  CustomizationPrompts,
-  CustomizationSuggestion,
-  CustomizationWelcome,
-} from './Customization';
+import { CustomizationBubble, CustomizationPrompts, CustomizationWelcome } from './Customization';
 
 const locales = {
   cn: {

diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx
@@ -1,82 +1,64 @@
-import { Col, Row, Typography } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
-import { useLocation } from 'dumi';
+import { createStyles } from 'antd-style';
+import { useLocation, useNavigate } from 'dumi';
 import React, { useContext } from 'react';
 
-import Container from '../common/Container';
-
-import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
-import Link from '../../../theme/common/Link';
 import SiteContext from '../../../theme/slots/SiteContext';
 import * as utils from '../../../theme/utils';
-
-const SECONDARY_LIST = [
-  {
-    img: 'https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg',
-    key: 'mobile',
-    url: 'https://mobile.ant.design/',
-    imgScale: 1.5,
-  },
-  {
-    img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
-    key: 'antv',
-    url: 'https://antv.vision/',
-  },
-  {
-    img: 'https://gw.alipayobjects.com/zos/bmw-prod/af1ea898-bf02-45d1-9f30-8ca851c70a5b.svg',
-    key: 'kitchen',
-    url: 'https://kitchen.alipay.com/',
-  },
-];
+import Introduction from '../common/Introduction';
 
 const locales = {
   cn: {
     title: 'AI 设计语言与研发框架',
     desc: '配套生态 , 让你快速搭建网站应用',
 
-    values: '设计价值观',
-    valuesDesc: '确定性、意义感、生长性、自然',
-    guide: '设计指引',
+    values: 'RICH 设计指南',
+    valuesDesc: '意图、角色、会话、混合 UI',
+    guide: '组件设计指引',
     guideDesc: '全局样式、设计模式',
     lib: '组件库',
     libDesc: 'Ant Design of React / Angular / Vue',
 
     // Secondary
-    mobile: 'Ant Design Mobile',
-    mobileDesc: 'Ant Design 移动端 UI 组件库',
+    antd: 'Ant Design',
+    antdDesc: '企业级 UI 设计语言和 React 组件库',
+    antdMobile: 'Ant Design Mobile',
+    antdMobileDesc: 'Ant Design移动端 UI 组件库',
     antv: 'AntV',
     antvDesc: '全新一代数据可视化解决方案',
-    kitchen: 'Kitchen',
-    kitchenDesc: '一款为设计者提升工作效率的 Sketch 工具集',
   },
   en: {
     title: 'Design & Framework',
     desc: 'An ecosystem for rapid web app development',
 
-    values: 'Design values',
-    valuesDesc: 'Certainty, Meaningfulness, Growth, Naturalness',
+    values: 'RICH Design Guide',
+    valuesDesc: 'Intention, Role, Conversation, Hybrid',
     guide: 'Design guide',
     guideDesc: 'Global style and design pattern',
     lib: 'Components Libraries',
     libDesc: 'Ant Design of React / Angular / Vue',
 
     // Secondary
-    mobile: 'Ant Design Mobile',
-    mobileDesc: 'Mobile UI component library',
+    antd: 'Ant Design',
+    antdDesc:
+      'Help designers/developers building beautiful products more flexible and working with happiness',
+    antdMobile: 'Ant Design Mobile',
+    antdMobileDesc: 'Mobile UI component library',
     antv: 'AntV',
     antvDesc: 'New generation of data visualization solutions',
-    kitchen: 'Kitchen',
-    kitchenDesc: 'Sketch Tool set for designers',
   },
 };
 
 const useStyle = () => {
-  const isRootDark = useDark();
-
   return createStyles(({ token, css }) => ({
     container: css`
-      background: radial-gradient(ellipse 0px 699px at 699px 699px, #5bc6e4 0%, #5bc6e400 100%);
+    `,
+    header: css`
+    display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 270px;
+
     `,
     card: css`
       padding: ${token.paddingSM}px;
@@ -86,6 +68,9 @@ const useStyle = () => {
         0 1px 6px -1px rgba(0, 0, 0, 0.02),
         0 2px 4px rgba(0, 0, 0, 0.02);
 
+        background: #ffffff1a;
+        border-radius: 24px;  
+
       img {
         width: 100%;
         vertical-align: top;
@@ -94,11 +79,11 @@ const useStyle = () => {
     `,
 
     cardMini: css`
+      background: #ffffff1a;
+      border-radius: 24px;  
       display: block;
       border-radius: ${token.borderRadius * 2}px;
       padding: ${token.paddingMD}px ${token.paddingLG}px;
-      background: ${isRootDark ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.02)'};
-      border: 1px solid ${isRootDark ? 'rgba(255, 255, 255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
 
       img {
         height: 48px;
@@ -109,88 +94,87 @@ const useStyle = () => {
 
 const DesignFramework: React.FC = () => {
   const [locale] = useLocale(locales);
-  const token = useTheme();
   const { styles } = useStyle();
   const { pathname, search } = useLocation();
   const isZhCN = utils.isZhCN(pathname);
   const { isMobile } = useContext(SiteContext);
-  const colSpan = isMobile ? 24 : 8;
+  const navigate = useNavigate();
 
-  const MAINLY_LIST = [
+  const items = [
+    {
+      title: locale.values,
+      desc: locale.valuesDesc,
+      header: (
+        <div className={styles.header}>
+          <img
+            loading="lazy"
+            alt="thumbnails"
+            style={{ width: 227 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*AhrTT6K2vU0AAAAAAAAAAAAADgCCAQ/fmt.webp"
+          />
+        </div>
+      ),
+      onClick: () => navigate(utils.getLocalizedPathname('/docs/spec/introduce', isZhCN, search)),
+    },
+    {
+      title: locale.guide,
+      desc: locale.guideDesc,
+      header: (
+        <div className={styles.header}>
+          <img
+            loading="lazy"
+            alt="thumbnails"
+            style={{ width: 184 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Off_QYoo0GIAAAAAAAAAAAAADgCCAQ/fmt.webp"
+          />
+        </div>
+      ),
+      onClick: () =>
+        navigate(utils.getLocalizedPathname('/docs/spec/hybrid-ui-design', isZhCN, search)),
+    },
+    {
+      title: locale.lib,
+      desc: locale.libDesc,
+      header: (
+        <div className={styles.header}>
+          <img
+            loading="lazy"
+            alt="thumbnails"
+            style={{ width: 261 }}
+            src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*poTnSZrI7-oAAAAAAAAAAAAADgCCAQ/fmt.webp"
+          />
+        </div>
+      ),
+      onClick: () => navigate(utils.getLocalizedPathname('/components/overview', isZhCN, search)),
+    },
     {
-      img: 'https://gw.alipayobjects.com/zos/bmw-prod/36a89a46-4224-46e2-b838-00817f5eb364.svg',
-      key: 'values',
-      path: utils.getLocalizedPathname('/docs/spec/values/', isZhCN, search),
+      title: locale.antd,
+      desc: locale.antdDesc,
+      icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*dUzuRJes4pUAAAAAAAAAAAAADgCCAQ/original',
+      onClick: () => window.open('https://ant.design/'),
     },
     {
-      img: 'https://gw.alipayobjects.com/zos/bmw-prod/8379430b-e328-428e-8a67-666d1dd47f7d.svg',
-      key: 'guide',
-      path: utils.getLocalizedPathname('/docs/spec/colors/', isZhCN, search),
+      title: locale.antdMobile,
+      desc: locale.antdMobileDesc,
+      icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rzh3RoWC9zAAAAAAAAAAAAAADgCCAQ/original',
+      onClick: () => window.open('https://mobile.ant.design/'),
     },
     {
-      img: 'https://gw.alipayobjects.com/zos/bmw-prod/1c363c0b-17c6-4b00-881a-bc774df1ebeb.svg',
-      key: 'lib',
-      path: utils.getLocalizedPathname('/docs/react/introduce/', isZhCN, search),
+      title: locale.antv,
+      desc: locale.antvDesc,
+      icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9MFyQ77L6E4AAAAAAAAAAAAADgCCAQ/fmt.webp',
+      onClick: () => window.open('https://antv.vision/'),
     },
   ];
 
   return (
-    <Container className={styles.container} title={locale.title} desc={locale.desc}>
-      <Row gutter={[token.marginXL, token.marginXL]}>
-        {MAINLY_LIST.map(({ img, key, path }, index) => {
-          const title = locale[key as keyof typeof locale];
-          const desc = locale[`${key}Desc` as keyof typeof locale];
-
-          return (
-            <Col key={index} span={colSpan}>
-              <Link to={path}>
-                <div className={styles.card}>
-                  <img draggable={false} alt={title} src={img} />
-
-                  <Typography.Title
-                    level={4}
-                    style={{ marginTop: token.margin, marginBottom: token.marginXS }}
-                  >
-                    {title}
-                  </Typography.Title>
-                  <Typography.Paragraph type="secondary" style={{ margin: 0 }}>
-                    {desc}
-                  </Typography.Paragraph>
-                </div>
-              </Link>
-            </Col>
-          );
-        })}
-
-        {SECONDARY_LIST.map(({ img, key, url, imgScale = 1 }, index) => {
-          const title = locale[key as keyof typeof locale];
-          const desc = locale[`${key}Desc` as keyof typeof locale];
-
-          return (
-            <Col key={index} span={colSpan}>
-              <a className={styles.cardMini} target="_blank" href={url} rel="noreferrer">
-                <img
-                  draggable={false}
-                  alt={title}
-                  src={img}
-                  style={{ transform: `scale(${imgScale})` }}
-                />
-
-                <Typography.Title
-                  level={4}
-                  style={{ marginTop: token.margin, marginBottom: token.marginXS }}
-                >
-                  {title}
-                </Typography.Title>
-                <Typography.Paragraph type="secondary" style={{ margin: 0 }}>
-                  {desc}
-                </Typography.Paragraph>
-              </a>
-            </Col>
-          );
-        })}
-      </Row>
-    </Container>
+    <Introduction
+      cardStyle={{ background: '#ffffff1a' }}
+      title={locale.title}
+      desc={locale.desc}
+      items={items}
+      column={isMobile ? 1 : 3}
+    />
   );
 };
 

diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx
@@ -22,6 +22,10 @@ const useStyle = createStyles(({ token, css }) => {
     container: css`
       margin-top: -40px;
     `,
+    framework: css`
+      border-radius: 0;
+      background-image: linear-gradient(90deg, #5a37e6 0%, #0059c9 100%);
+    `,
   };
 });
 
@@ -41,7 +45,7 @@ const Homepage: React.FC = () => {
         <SceneIntroduction />
         <CompIntroduction />
       </section>
-      <section className={classnames(styles.section, styles.container)}>
+      <section className={classnames(styles.section, styles.framework, styles.container)}>
         <DesignFramework />
       </section>
     </main>

diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx
@@ -21,7 +21,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
 
   const isDark = value.includes('dark');
 
-  if (pathname.startsWith('/index')) return null;
+  if (pathname.startsWith('/index') || pathname === '') return null;
 
   return (
     <FloatButton.Group

diff --git a/docs/playground/independent.tsx b/docs/playground/independent.tsx
@@ -92,7 +92,7 @@ const useStyle = createStyles(({ token, css }) => {
       justify-content: start;
       padding: 0 24px;
       box-sizing: border-box;
-      
+
       img {
         width: 24px;
         height: 24px;

diff --git a/docs/react/common-props.en-US.md b/docs/react/common-props.en-US.md