mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-29 11:58:31 +08:00
59ad48476b
* chore: add boime lint * fix lint * use files ignore * revert change * ignore clarity.js * fix some errors * fix some errors * fix some errors * fix some errors * add yml file * Update clarity.js Signed-off-by: afc163 <afc163@gmail.com> * add npm run lint:biome * add npm run lint:biome * fix test case * fix ts errors * fix ts errors * fix lint and add .lintstagedrc * shorten prop name * chore: update package.json * update biome.json * chore: remove stylelint * chore: useOptionalChain * fix lint * biome format * prettier all code * prettier all code * fix site test --------- Signed-off-by: afc163 <afc163@gmail.com>
100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import React, { Suspense } from 'react';
|
|
import { ConfigProvider, theme } from 'antd';
|
|
import { createStyles, css } from 'antd-style';
|
|
|
|
import useDark from '../../hooks/useDark';
|
|
import useLocale from '../../hooks/useLocale';
|
|
import BannerRecommends from './components/BannerRecommends';
|
|
import Group from './components/Group';
|
|
import PreviewBanner from './components/PreviewBanner';
|
|
|
|
const ComponentsList = React.lazy(() => import('./components/ComponentsList'));
|
|
const DesignFramework = React.lazy(() => import('./components/DesignFramework'));
|
|
const Theme = React.lazy(() => import('./components/Theme'));
|
|
|
|
const useStyle = createStyles(() => ({
|
|
image: css`
|
|
position: absolute;
|
|
left: 0;
|
|
top: -50px;
|
|
height: 160px;
|
|
`,
|
|
}));
|
|
|
|
const locales = {
|
|
cn: {
|
|
assetsTitle: '组件丰富,选用自如',
|
|
assetsDesc: '大量实用组件满足你的需求,灵活定制与拓展',
|
|
designTitle: '设计语言与研发框架',
|
|
designDesc: '配套生态,让你快速搭建网站应用',
|
|
},
|
|
en: {
|
|
assetsTitle: 'Rich components',
|
|
assetsDesc: 'Practical components to meet your needs, flexible customization and expansion',
|
|
designTitle: 'Design and framework',
|
|
designDesc: 'Supporting ecology, allowing you to quickly build website applications',
|
|
},
|
|
};
|
|
|
|
const Homepage: React.FC = () => {
|
|
const [locale] = useLocale(locales);
|
|
const { styles } = useStyle();
|
|
const { token } = theme.useToken();
|
|
|
|
const isRootDark = useDark();
|
|
|
|
return (
|
|
<section>
|
|
<PreviewBanner>
|
|
<BannerRecommends />
|
|
</PreviewBanner>
|
|
|
|
<div>
|
|
{/* 定制主题 */}
|
|
<ConfigProvider
|
|
theme={{
|
|
algorithm: theme.defaultAlgorithm,
|
|
}}
|
|
>
|
|
<Suspense fallback={null}>
|
|
<Theme />
|
|
</Suspense>
|
|
</ConfigProvider>
|
|
|
|
{/* 组件列表 */}
|
|
<Group
|
|
background={token.colorBgElevated}
|
|
collapse
|
|
title={locale.assetsTitle}
|
|
description={locale.assetsDesc}
|
|
id="design"
|
|
>
|
|
<Suspense fallback={null}>
|
|
<ComponentsList />
|
|
</Suspense>
|
|
</Group>
|
|
|
|
{/* 设计语言 */}
|
|
<Group
|
|
title={locale.designTitle}
|
|
description={locale.designDesc}
|
|
background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
|
|
decoration={
|
|
<img
|
|
className={styles.image}
|
|
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
|
alt=""
|
|
/>
|
|
}
|
|
>
|
|
<Suspense fallback={null}>
|
|
<DesignFramework />
|
|
</Suspense>
|
|
</Group>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Homepage;
|