You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.0 KiB
104 lines
3.0 KiB
import React, { useEffect, useLayoutEffect, type FC } from 'react';
|
|
import { useLocale as useDumiLocale } from 'dumi';
|
|
import { css } from '@emotion/react';
|
|
import useLocale from '../../hooks/useLocale';
|
|
import Banner from './components/Banner';
|
|
import Group from './components/Group';
|
|
import { useSiteData } from './components/util';
|
|
import useSiteToken from '../../hooks/useSiteToken';
|
|
import Theme from './components/Theme';
|
|
import BannerRecommends from './components/BannerRecommends';
|
|
import ComponentsList from './components/ComponentsList';
|
|
import DesignFramework from './components/DesignFramework';
|
|
import { ConfigProvider } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import 'dayjs/locale/zh-cn';
|
|
|
|
const useStyle = () => {
|
|
const { token } = useSiteToken();
|
|
|
|
return {
|
|
container: css`
|
|
// padding: 0 116px;
|
|
|
|
// background: url(https://gw.alipayobjects.com/zos/bmw-prod/5741382d-cc22-4ede-b962-aea287a1d1a1/l4nq43o8_w2646_h1580.png);
|
|
// background-size: 20% 10%;
|
|
`,
|
|
};
|
|
};
|
|
|
|
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: FC = () => {
|
|
const [locale, lang] = useLocale(locales);
|
|
const { id: localeId } = useDumiLocale();
|
|
const localeStr = localeId === 'zh-CN' ? 'cn' : 'en';
|
|
|
|
const [siteData, loading] = useSiteData();
|
|
|
|
const style = useStyle();
|
|
|
|
useLayoutEffect(() => {
|
|
if (lang === 'cn') {
|
|
dayjs.locale('zh-cn');
|
|
} else {
|
|
dayjs.locale('en');
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<ConfigProvider theme={{ algorithm: undefined }}>
|
|
<section>
|
|
<Banner>
|
|
<BannerRecommends extras={siteData?.extras?.[localeStr]} icons={siteData?.icons} />
|
|
</Banner>
|
|
|
|
<div css={style.container}>
|
|
<Theme />
|
|
<Group
|
|
background="#fff"
|
|
collapse
|
|
title={locale.assetsTitle}
|
|
description={locale.assetsDesc}
|
|
id="design"
|
|
>
|
|
<ComponentsList />
|
|
</Group>
|
|
<Group
|
|
title={locale.designTitle}
|
|
description={locale.designDesc}
|
|
background="#F5F8FF"
|
|
decoration={
|
|
<>
|
|
{/* Image Left Top */}
|
|
<img
|
|
style={{ position: 'absolute', left: 0, top: -50, height: 160 }}
|
|
src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
|
|
/>
|
|
</>
|
|
}
|
|
>
|
|
<DesignFramework />
|
|
</Group>
|
|
</div>
|
|
</section>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default Homepage;
|
|
|