2022-11-09 12:28:04 +08:00
|
|
|
import { Col, Row, Typography } from 'antd';
|
2022-12-11 20:39:46 +08:00
|
|
|
import React, { useContext } from 'react';
|
2023-07-20 19:27:33 +08:00
|
|
|
import { createStyles, useTheme } from 'antd-style';
|
2022-11-10 19:46:44 +08:00
|
|
|
import { Link, useLocation } from 'dumi';
|
2022-11-30 11:05:41 +08:00
|
|
|
import useLocale from '../../../hooks/useLocale';
|
2022-11-10 19:46:44 +08:00
|
|
|
import * as utils from '../../../theme/utils';
|
2022-12-19 11:42:41 +08:00
|
|
|
import SiteContext from '../../../theme/slots/SiteContext';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
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/',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const locales = {
|
|
|
|
cn: {
|
|
|
|
values: '设计价值观',
|
|
|
|
valuesDesc: '确定性、意义感、生长性、自然',
|
|
|
|
guide: '设计指引',
|
|
|
|
guideDesc: '全局样式、设计模式',
|
|
|
|
lib: '组件库',
|
|
|
|
libDesc: 'Ant Design of React / Angular / Vue',
|
|
|
|
|
|
|
|
// Secondary
|
|
|
|
mobile: 'Ant Design Mobile',
|
2022-11-10 20:23:36 +08:00
|
|
|
mobileDesc: 'Ant Design 移动端 UI 组件库',
|
2022-11-09 12:28:04 +08:00
|
|
|
antv: 'AntV',
|
|
|
|
antvDesc: '全新一代数据可视化解决方案',
|
|
|
|
kitchen: 'Kitchen',
|
|
|
|
kitchenDesc: '一款为设计者提升工作效率的 Sketch 工具集',
|
|
|
|
},
|
|
|
|
en: {
|
|
|
|
values: 'Design values',
|
|
|
|
valuesDesc: 'Certainty, Meaningfulness, Growth, Naturalness',
|
|
|
|
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',
|
|
|
|
antv: 'AntV',
|
|
|
|
antvDesc: 'New generation of data visualization solutions',
|
|
|
|
kitchen: 'Kitchen',
|
|
|
|
kitchenDesc: 'Sketch Tool set for designers',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
const useStyle = createStyles(({ token, css }) => ({
|
|
|
|
card: css`
|
2022-11-09 12:28:04 +08:00
|
|
|
padding: ${token.paddingSM}px;
|
|
|
|
border-radius: ${token.borderRadius * 2}px;
|
|
|
|
background: #fff;
|
|
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
|
|
|
|
0 2px 4px rgba(0, 0, 0, 0.02);
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
vertical-align: top;
|
|
|
|
border-radius: ${token.borderRadius}px;
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
cardMini: css`
|
2022-11-09 12:28:04 +08:00
|
|
|
display: block;
|
|
|
|
border-radius: ${token.borderRadius * 2}px;
|
|
|
|
padding: ${token.paddingMD}px ${token.paddingLG}px;
|
|
|
|
background: rgba(0, 0, 0, 0.02);
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
|
|
img {
|
|
|
|
height: 48px;
|
|
|
|
}
|
|
|
|
`,
|
2023-07-20 19:27:33 +08:00
|
|
|
}));
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
export default function DesignFramework() {
|
|
|
|
const [locale] = useLocale(locales);
|
2023-07-20 19:27:33 +08:00
|
|
|
const token = useTheme();
|
|
|
|
const { styles } = useStyle();
|
2022-11-10 19:46:44 +08:00
|
|
|
const { pathname, search } = useLocation();
|
|
|
|
const isZhCN = utils.isZhCN(pathname);
|
2022-12-11 20:39:46 +08:00
|
|
|
const { isMobile } = useContext(SiteContext);
|
|
|
|
const colSpan = isMobile ? 24 : 8;
|
2022-11-10 19:46:44 +08:00
|
|
|
|
|
|
|
const MAINLY_LIST = [
|
|
|
|
{
|
|
|
|
img: 'https://gw.alipayobjects.com/zos/bmw-prod/36a89a46-4224-46e2-b838-00817f5eb364.svg',
|
|
|
|
key: 'values',
|
|
|
|
path: utils.getLocalizedPathname('/docs/spec/values/', isZhCN, search),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: 'https://gw.alipayobjects.com/zos/bmw-prod/8379430b-e328-428e-8a67-666d1dd47f7d.svg',
|
|
|
|
key: 'guide',
|
|
|
|
path: utils.getLocalizedPathname('/docs/spec/colors/', isZhCN, search),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: 'https://gw.alipayobjects.com/zos/bmw-prod/1c363c0b-17c6-4b00-881a-bc774df1ebeb.svg',
|
|
|
|
key: 'lib',
|
|
|
|
path: utils.getLocalizedPathname('/docs/react/introduce/', isZhCN, search),
|
|
|
|
},
|
|
|
|
];
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Row gutter={[token.marginXL, token.marginXL]}>
|
2022-11-10 19:46:44 +08:00
|
|
|
{MAINLY_LIST.map(({ img, key, path }, index) => {
|
2022-11-09 12:28:04 +08:00
|
|
|
const title = locale[key as keyof typeof locale];
|
|
|
|
const desc = locale[`${key}Desc` as keyof typeof locale];
|
|
|
|
|
|
|
|
return (
|
2022-12-11 20:39:46 +08:00
|
|
|
<Col key={index} span={colSpan}>
|
2022-11-10 19:46:44 +08:00
|
|
|
<Link to={path}>
|
2023-07-20 19:27:33 +08:00
|
|
|
<div className={styles.card}>
|
2022-11-10 19:46:44 +08:00
|
|
|
<img 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>
|
2022-11-09 12:28:04 +08:00
|
|
|
</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 (
|
2022-12-11 20:39:46 +08:00
|
|
|
<Col key={index} span={colSpan}>
|
2023-07-20 19:27:33 +08:00
|
|
|
<a className={styles.cardMini} target="_blank" href={url} rel="noreferrer">
|
2022-11-09 12:28:04 +08:00
|
|
|
<img 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>
|
|
|
|
);
|
|
|
|
}
|