ant-design/.dumi/pages/index/components/Theme/index.tsx
舜岳 a72ea642b2
fix: document homepage style optimization ()
* fix: document homepage style optimization

* fix: use the wrap property of Space
2024-01-05 17:49:04 +08:00

646 lines
18 KiB
TypeScript

import * as React from 'react';
import { defaultAlgorithm, defaultTheme } from '@ant-design/compatible';
import {
BellOutlined,
FolderOutlined,
HomeOutlined,
QuestionCircleOutlined,
} from '@ant-design/icons';
import { TinyColor } from '@ctrl/tinycolor';
import type { MenuProps } from 'antd';
import {
Breadcrumb,
Button,
Card,
ConfigProvider,
Form,
Layout,
Menu,
Radio,
Space,
theme,
Typography,
} from 'antd';
import { createStyles, css, useTheme } from 'antd-style';
import type { Color } from 'antd/es/color-picker';
import { generateColor } from 'antd/es/color-picker/util';
import classNames from 'classnames';
import { useLocation } from 'dumi';
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';
import Group from '../Group';
import { getCarouselStyle } from '../util';
import BackgroundImage from './BackgroundImage';
import ColorPicker from './ColorPicker';
import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
import MobileCarousel from './MobileCarousel';
import RadiusPicker from './RadiusPicker';
import type { THEME } from './ThemePicker';
import ThemePicker from './ThemePicker';
const { Header, Content, Sider } = Layout;
const TokenChecker: React.FC = () => {
if (process.env.NODE_ENV !== 'production') {
console.log('Demo Token:', theme.useToken());
}
return null;
};
// ============================= Theme =============================
const locales = {
cn: {
themeTitle: '定制主题,随心所欲',
themeDesc: 'Ant Design 5.0 开放更多样式算法,让你定制主题更简单',
customizeTheme: '定制主题',
myTheme: '我的主题',
titlePrimaryColor: '主色',
titleBorderRadius: '圆角',
titleCompact: '宽松度',
default: '默认',
compact: '紧凑',
titleTheme: '主题',
light: '亮色',
dark: '暗黑',
toDef: '深度定制',
toUse: '去使用',
},
en: {
themeTitle: 'Flexible theme customization',
themeDesc: 'Ant Design 5.0 enable extendable algorithm, make custom theme easier',
customizeTheme: 'Customize Theme',
myTheme: 'My Theme',
titlePrimaryColor: 'Primary Color',
titleBorderRadius: 'Border Radius',
titleCompact: 'Compact',
titleTheme: 'Theme',
default: 'Default',
compact: 'Compact',
light: 'Light',
dark: 'Dark',
toDef: 'More',
toUse: 'Apply',
},
};
// ============================= Style =============================
const useStyle = createStyles(({ token, cx }) => {
const { carousel } = getCarouselStyle();
const demo = css`
overflow: hidden;
background: rgba(240, 242, 245, 0.25);
backdrop-filter: blur(50px);
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
transition: all ${token.motionDurationSlow};
`;
return {
demo,
otherDemo: css`
&.${cx(demo)} {
backdrop-filter: blur(10px);
background: rgba(247, 247, 247, 0.5);
}
`,
darkDemo: css`
&.${cx(demo)} {
background: #000;
}
`,
larkDemo: css`
&.${cx(demo)} {
// background: #f7f7f7;
background: rgba(240, 242, 245, 0.65);
}
`,
comicDemo: css`
&.${cx(demo)} {
// background: #ffe4e6;
background: rgba(240, 242, 245, 0.65);
}
`,
menu: css`
margin-inline-start: auto;
`,
darkSideMenu: css``,
header: css`
display: flex;
align-items: center;
border-bottom: 1px solid ${token.colorSplit};
padding-inline: ${token.paddingLG}px !important;
height: ${token.controlHeightLG * 1.2}px;
line-height: ${token.controlHeightLG * 1.2}px;
`,
headerDark: css`
border-bottom-color: rgba(255, 255, 255, 0.1);
`,
avatar: css`
width: ${token.controlHeight}px;
height: ${token.controlHeight}px;
border-radius: 100%;
background: rgba(240, 240, 240, 0.75);
`,
avatarDark: css`
background: rgba(200, 200, 200, 0.3);
`,
logo: css`
display: flex;
align-items: center;
column-gap: ${token.padding}px;
h1 {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}
`,
logoImg: css`
width: 30px;
height: 30px;
overflow: hidden;
img {
width: 30px;
height: 30px;
vertical-align: top;
}
`,
transBg: css`
background: transparent !important;
`,
form: css`
width: 100%;
margin: 0 auto;
`,
carousel,
};
});
// ========================== Menu Config ==========================
const subMenuItems = [
{
key: `Design Values`,
label: `Design Values`,
},
{
key: `Global Styles`,
label: `Global Styles`,
},
{
key: `Themes`,
label: `Themes`,
},
{
key: `DesignPatterns`,
label: `Design Patterns`,
},
];
const sideMenuItems: MenuProps['items'] = [
{
key: `Design`,
label: `Design`,
icon: <FolderOutlined />,
children: subMenuItems,
},
{
key: `Development`,
label: `Development`,
icon: <FolderOutlined />,
},
];
// ============================= Theme =============================
function getTitleColor(colorPrimary: string | Color, isLight?: boolean) {
if (!isLight) {
return '#FFF';
}
const color = generateColor(colorPrimary);
const closestColor = getClosetColor(colorPrimary);
switch (closestColor) {
case DEFAULT_COLOR:
case PINK_COLOR:
case '#F2BD27':
return undefined;
case '#5A54F9':
case '#E0282E':
return '#FFF';
default:
return color.toHsb().b < 0.7 ? '#FFF' : undefined;
}
}
interface ThemeData {
themeType: THEME;
colorPrimary: string | Color;
borderRadius: number;
compact: 'default' | 'compact';
}
const ThemeDefault: ThemeData = {
themeType: 'default',
colorPrimary: '#1677FF',
borderRadius: 6,
compact: 'default',
};
const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
default: {},
dark: {
borderRadius: 2,
},
lark: {
colorPrimary: '#00B96B',
borderRadius: 4,
},
comic: {
colorPrimary: PINK_COLOR,
borderRadius: 16,
},
v4: {
...defaultTheme.token,
},
};
const normalize = (value: number) => value / 255;
function rgbToColorMatrix(color: string) {
const rgb = new TinyColor(color).toRgb();
const { r, g, b } = rgb;
const invertValue = normalize(r) * 100;
const sepiaValue = 100;
const saturateValue = Math.max(normalize(r), normalize(g), normalize(b)) * 10000;
const hueRotateValue =
((Math.atan2(
Math.sqrt(3) * (normalize(g) - normalize(b)),
2 * normalize(r) - normalize(g) - normalize(b),
) *
180) /
Math.PI +
360) %
360;
return `invert(${invertValue}%) sepia(${sepiaValue}%) saturate(${saturateValue}%) hue-rotate(${hueRotateValue}deg)`;
}
export default function Theme() {
const { styles } = useStyle();
const token = useTheme();
const [locale, lang] = useLocale(locales);
const isZhCN = lang === 'cn';
const { search } = useLocation();
const [themeData, setThemeData] = React.useState<ThemeData>(ThemeDefault);
const onThemeChange = (_: Partial<ThemeData>, nextThemeData: ThemeData) => {
React.startTransition(() => {
setThemeData({ ...ThemesInfo[nextThemeData.themeType], ...nextThemeData });
});
};
const { compact, themeType, colorPrimary, ...themeToken } = themeData;
const isLight = themeType !== 'dark';
const [form] = Form.useForm();
const { isMobile } = React.useContext(SiteContext);
const colorPrimaryValue = React.useMemo(
() => (typeof colorPrimary === 'string' ? colorPrimary : colorPrimary.toHexString()),
[colorPrimary],
);
// const algorithmFn = isLight ? theme.defaultAlgorithm : theme.darkAlgorithm;
const algorithmFn = React.useMemo(() => {
const algorithms = [isLight ? theme.defaultAlgorithm : theme.darkAlgorithm];
if (compact === 'compact') {
algorithms.push(theme.compactAlgorithm);
}
if (themeType === 'v4') {
algorithms.push(defaultAlgorithm);
}
return algorithms;
}, [isLight, compact, themeType]);
// ================================ Themes ================================
React.useEffect(() => {
const mergedData = {
...ThemeDefault,
themeType,
...ThemesInfo[themeType],
};
setThemeData(mergedData);
form.setFieldsValue(mergedData);
}, [themeType]);
const isRootDark = useDark();
React.useEffect(() => {
onThemeChange({}, { ...themeData, themeType: isRootDark ? 'dark' : 'default' });
}, [isRootDark]);
// ================================ Tokens ================================
const closestColor = getClosetColor(colorPrimaryValue);
const [backgroundColor, avatarColor] = React.useMemo(() => {
let bgColor = 'transparent';
const mapToken = theme.defaultAlgorithm({
...theme.defaultConfig.token,
colorPrimary: colorPrimaryValue,
});
if (themeType === 'dark') {
bgColor = '#393F4A';
} else if (closestColor === DEFAULT_COLOR) {
bgColor = '#F5F8FF';
} else {
bgColor = mapToken.colorPrimaryHover;
}
return [bgColor, mapToken.colorPrimaryBgHover];
}, [themeType, closestColor, colorPrimaryValue]);
const logoColor = React.useMemo(() => {
const hsb = generateColor(colorPrimaryValue).toHsb();
hsb.b = Math.min(hsb.b, 0.7);
return generateColor(hsb).toHexString();
}, [colorPrimaryValue]);
// ================================ Render ================================
const themeNode = (
<ConfigProvider
theme={{
token: {
...themeToken,
colorPrimary: colorPrimaryValue,
},
algorithm: algorithmFn,
components: {
Layout: isLight
? {
headerBg: 'transparent',
bodyBg: 'transparent',
}
: {
// colorBgBody: 'transparent',
},
Menu: isLight
? {
itemBg: 'transparent',
subMenuItemBg: 'transparent',
activeBarBorderWidth: 0,
}
: {
// colorItemBg: 'transparent',
// colorSubItemBg: 'transparent',
// colorItemBgActive: 'rgba(255,255,255,0.2)',
// colorItemBgSelected: 'rgba(255,255,255,0.2)',
},
...(themeType === 'v4' ? defaultTheme.components : {}),
},
}}
>
<TokenChecker />
<div
className={classNames(styles.demo, {
[styles.otherDemo]: isLight && closestColor !== DEFAULT_COLOR && styles.otherDemo,
[styles.darkDemo]: !isLight,
})}
style={{ borderRadius: themeData.borderRadius }}
>
<Layout className={styles.transBg}>
<Header
className={classNames(styles.header, styles.transBg, !isLight && styles.headerDark)}
>
{/* Logo */}
<div className={styles.logo}>
<div className={styles.logoImg}>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
style={{
filter:
closestColor === DEFAULT_COLOR
? undefined
: // : `drop-shadow(30px 0 0 ${logoColor})`,
rgbToColorMatrix(logoColor),
}}
alt=""
/>
</div>
<h1>Ant Design 5.0</h1>
</div>
<Space className={styles.menu} size="middle">
<BellOutlined />
<QuestionCircleOutlined />
<div
className={classNames(styles.avatar, themeType === 'dark' && styles.avatarDark)}
style={{
backgroundColor: avatarColor,
backgroundImage: `url(${getAvatarURL(closestColor)})`,
backgroundSize: 'cover',
boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
}}
/>
</Space>
</Header>
<Layout className={styles.transBg} hasSider>
<Sider className={classNames(styles.transBg, 'site-layout-background')} width={200}>
<Menu
mode="inline"
className={classNames(styles.transBg, !isLight && styles.darkSideMenu)}
selectedKeys={['Themes']}
openKeys={['Design']}
style={{ height: '100%', borderRight: 0 }}
items={sideMenuItems}
expandIcon={false}
/>
</Sider>
<Layout className={styles.transBg} style={{ padding: '0 24px 24px' }}>
<Breadcrumb
style={{ margin: '16px 0' }}
items={[
{ title: <HomeOutlined /> },
{ title: 'Design', menu: { items: subMenuItems } },
{ title: 'Themes' },
]}
/>
<Content>
<Typography.Title level={2}>{locale.customizeTheme}</Typography.Title>
<Card
title={locale.myTheme}
extra={
<Space>
<Link to={utils.getLocalizedPathname('/theme-editor', isZhCN, search)}>
<Button type="default">{locale.toDef}</Button>
</Link>
<Link
to={utils.getLocalizedPathname(
'/docs/react/customize-theme',
isZhCN,
search,
)}
>
<Button type="primary">{locale.toUse}</Button>
</Link>
</Space>
}
>
<Form
form={form}
initialValues={themeData}
onValuesChange={onThemeChange}
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
className={styles.form}
>
<Form.Item label={locale.titleTheme} name="themeType">
<ThemePicker />
</Form.Item>
<Form.Item label={locale.titlePrimaryColor} name="colorPrimary">
<ColorPicker />
</Form.Item>
<Form.Item label={locale.titleBorderRadius} name="borderRadius">
<RadiusPicker />
</Form.Item>
<Form.Item label={locale.titleCompact} name="compact" htmlFor="compact_default">
<Radio.Group
options={[
{
label: locale.default,
value: 'default',
id: 'compact_default',
},
{
label: locale.compact,
value: 'compact',
},
]}
/>
</Form.Item>
</Form>
</Card>
</Content>
</Layout>
</Layout>
</Layout>
</div>
</ConfigProvider>
);
const posStyle: React.CSSProperties = {
position: 'absolute',
};
const leftTopImageStyle: React.CSSProperties = {
left: '50%',
transform: 'translate3d(-900px, 0, 0)',
top: -100,
height: 500,
};
const rightBottomImageStyle: React.CSSProperties = {
right: '50%',
transform: 'translate3d(750px, 0, 0)',
bottom: -100,
height: 287,
};
return isMobile ? (
<MobileCarousel title={locale.themeTitle} description={locale.themeDesc} id="flexible" />
) : (
<Group
title={locale.themeTitle}
titleColor={getTitleColor(colorPrimaryValue, isLight)}
description={locale.themeDesc}
id="flexible"
background={backgroundColor}
decoration={
// =========================== Theme Background ===========================
<>
{/* >>>>>> Default <<<<<< */}
<div
style={{
transition: `all ${token.motionDurationSlow}`,
opacity: isLight && closestColor === DEFAULT_COLOR ? 1 : 0,
}}
>
{/* Image Left Top */}
<img
style={{
...posStyle,
...leftTopImageStyle,
}}
src="https://gw.alipayobjects.com/zos/bmw-prod/bd71b0c6-f93a-4e52-9c8a-f01a9b8fe22b.svg"
alt=""
/>
{/* Image Right Bottom */}
<img
style={{
...posStyle,
...rightBottomImageStyle,
}}
src="https://gw.alipayobjects.com/zos/bmw-prod/84ad805a-74cb-4916-b7ba-9cdc2bdec23a.svg"
alt=""
/>
</div>
{/* >>>>>> Dark <<<<<< */}
<div
style={{
transition: `all ${token.motionDurationSlow}`,
opacity: !isLight || !closestColor ? 1 : 0,
}}
>
{/* Image Left Top */}
<img
style={{ ...posStyle, left: 0, top: -100, height: 500 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/a213184a-f212-4afb-beec-1e8b36bb4b8a.svg"
alt=""
/>
{/* Image Right Bottom */}
<img
style={{ ...posStyle, right: 0, bottom: -100, height: 287 }}
src="https://gw.alipayobjects.com/zos/bmw-prod/bb74a2fb-bff1-4d0d-8c2d-2ade0cd9bb0d.svg"
alt=""
/>
</div>
{/* >>>>>> Background Image <<<<<< */}
<BackgroundImage isLight={isLight} colorPrimary={colorPrimaryValue} />
</>
}
>
{themeNode}
</Group>
);
}