mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 13:38:29 +02:00
site: translate chinese desc to english desc (#54494)
This commit is contained in:
lijianan
GitHub
parent
b883612670
commit
4022993143
2 changed files with 163 additions and 96 deletions
|
|
@ -1,89 +1,158 @@
|
|||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import Palette from './Palette';
|
||||
|
||||
const colors = [
|
||||
{
|
||||
name: 'red',
|
||||
english: 'Dust Red',
|
||||
chinese: '薄暮',
|
||||
description: '斗志、奔放',
|
||||
const locales = {
|
||||
cn: {
|
||||
redTitle: '薄暮',
|
||||
redDescription: '斗志、奔放',
|
||||
|
||||
volcanoTitle: '火山',
|
||||
volcanoDescription: '醒目、澎湃',
|
||||
|
||||
orangeTitle: '日暮',
|
||||
orangeDescription: '温暖、欢快',
|
||||
|
||||
limeTitle: '青柠',
|
||||
limeDescription: '自然、生机',
|
||||
|
||||
goldTitle: '金盏花',
|
||||
goldDescription: '活力、积极',
|
||||
|
||||
yellowTitle: '日出',
|
||||
yellowDescription: '出生、阳光',
|
||||
|
||||
greenTitle: '极光绿',
|
||||
greenDescription: '健康、创新',
|
||||
|
||||
cyanTitle: '明青',
|
||||
cyanDescription: '希望、坚强',
|
||||
|
||||
blueTitle: '拂晓蓝',
|
||||
blueDescription: '包容、科技、普惠',
|
||||
|
||||
geekblueTitle: '极客蓝',
|
||||
geekblueDescription: '探索、钻研',
|
||||
|
||||
purpleTitle: '酱紫',
|
||||
purpleDescription: '优雅、浪漫',
|
||||
|
||||
magentaTitle: '法式洋红',
|
||||
magentaDescription: '明快、感性',
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
english: 'Volcano',
|
||||
chinese: '火山',
|
||||
description: '醒目、澎湃',
|
||||
en: {
|
||||
redTitle: 'Dust Red',
|
||||
redDescription: 'Fighting Spirit, Unrestrained',
|
||||
|
||||
volcanoTitle: 'Volcano',
|
||||
volcanoDescription: 'Eye-catching, Surging',
|
||||
|
||||
orangeTitle: 'Sunset Orange',
|
||||
orangeDescription: 'Warm, Cheerful',
|
||||
|
||||
limeTitle: 'Lime',
|
||||
limeDescription: 'Natural, Vitality',
|
||||
|
||||
goldTitle: 'Calendula Gold',
|
||||
goldDescription: 'Energetic, Positive',
|
||||
|
||||
yellowTitle: 'Sunrise Yellow',
|
||||
yellowDescription: 'Birth, Sunshine',
|
||||
|
||||
greenTitle: 'Polar Green',
|
||||
greenDescription: 'Healthy, Innovative',
|
||||
|
||||
cyanTitle: 'Cyan',
|
||||
cyanDescription: 'Hope, Strong',
|
||||
|
||||
blueTitle: 'Daybreak Blue',
|
||||
blueDescription: 'Inclusive, Technology, Universal',
|
||||
|
||||
geekblueTitle: 'Geek Blue',
|
||||
geekblueDescription: 'Exploration, Research',
|
||||
|
||||
purpleTitle: 'Golden Purple',
|
||||
purpleDescription: 'Elegant, Romantic',
|
||||
|
||||
magentaTitle: 'French Magenta',
|
||||
magentaDescription: 'Bright, Emotional',
|
||||
},
|
||||
{
|
||||
name: 'orange',
|
||||
english: 'Sunset Orange',
|
||||
chinese: '日暮',
|
||||
description: '温暖、欢快',
|
||||
},
|
||||
{
|
||||
name: 'gold',
|
||||
english: 'Calendula Gold',
|
||||
chinese: '金盏花',
|
||||
description: '活力、积极',
|
||||
},
|
||||
{
|
||||
name: 'yellow',
|
||||
english: 'Sunrise Yellow',
|
||||
chinese: '日出',
|
||||
description: '出生、阳光',
|
||||
},
|
||||
{
|
||||
name: 'lime',
|
||||
english: 'Lime',
|
||||
chinese: '青柠',
|
||||
description: '自然、生机',
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
english: 'Polar Green',
|
||||
chinese: '极光绿',
|
||||
description: '健康、创新',
|
||||
},
|
||||
{
|
||||
name: 'cyan',
|
||||
english: 'Cyan',
|
||||
chinese: '明青',
|
||||
description: '希望、坚强',
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
english: 'Daybreak Blue',
|
||||
chinese: '拂晓蓝',
|
||||
description: '包容、科技、普惠',
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
english: 'Geek Blue',
|
||||
chinese: '极客蓝',
|
||||
description: '探索、钻研',
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
english: 'Golden Purple',
|
||||
chinese: '酱紫',
|
||||
description: '优雅、浪漫',
|
||||
},
|
||||
{
|
||||
name: 'magenta',
|
||||
english: 'Magenta',
|
||||
chinese: '法式洋红',
|
||||
description: '明快、感性',
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const ColorPalettes: React.FC<{ dark?: boolean }> = (props) => {
|
||||
const { dark } = props;
|
||||
const [locale] = useLocale(locales);
|
||||
const memoizedColors = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: 'red',
|
||||
title: locale.redTitle,
|
||||
description: locale.redDescription,
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
title: locale.volcanoTitle,
|
||||
description: locale.volcanoDescription,
|
||||
},
|
||||
{
|
||||
name: 'orange',
|
||||
title: locale.orangeTitle,
|
||||
description: locale.orangeDescription,
|
||||
},
|
||||
{
|
||||
name: 'lime',
|
||||
title: locale.limeTitle,
|
||||
description: locale.limeDescription,
|
||||
},
|
||||
{
|
||||
name: 'gold',
|
||||
title: locale.goldTitle,
|
||||
description: locale.goldDescription,
|
||||
},
|
||||
{
|
||||
name: 'yellow',
|
||||
title: locale.yellowTitle,
|
||||
description: locale.yellowDescription,
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
title: locale.greenTitle,
|
||||
description: locale.greenDescription,
|
||||
},
|
||||
{
|
||||
name: 'cyan',
|
||||
title: locale.cyanTitle,
|
||||
description: locale.cyanDescription,
|
||||
},
|
||||
{
|
||||
name: 'blue',
|
||||
title: locale.blueTitle,
|
||||
description: locale.blueDescription,
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
title: locale.geekblueTitle,
|
||||
description: locale.geekblueDescription,
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
title: locale.purpleTitle,
|
||||
description: locale.purpleDescription,
|
||||
},
|
||||
{
|
||||
name: 'magenta',
|
||||
title: locale.magentaTitle,
|
||||
description: locale.magentaDescription,
|
||||
},
|
||||
],
|
||||
[locale],
|
||||
);
|
||||
return (
|
||||
<div className={classNames('color-palettes', { 'color-palettes-dark': dark })}>
|
||||
{colors.map((color) => (
|
||||
<Palette key={color.name} color={color} dark={dark} showTitle />
|
||||
{memoizedColors.map((color) => (
|
||||
<Palette key={`item-${color.name}`} color={color} dark={dark} showTitle />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ const rgbToHex = (rgbString: string): string => {
|
|||
if (!rgb) {
|
||||
return '';
|
||||
}
|
||||
let r = parseInt(rgb[0], 10).toString(16);
|
||||
let g = parseInt(rgb[1], 10).toString(16);
|
||||
let b = parseInt(rgb[2], 10).toString(16);
|
||||
let r = Number.parseInt(rgb[0], 10).toString(16);
|
||||
let g = Number.parseInt(rgb[1], 10).toString(16);
|
||||
let b = Number.parseInt(rgb[2], 10).toString(16);
|
||||
r = r.length === 1 ? `0${r}` : r;
|
||||
g = g.length === 1 ? `0${g}` : g;
|
||||
b = b.length === 1 ? `0${b}` : b;
|
||||
|
|
@ -21,22 +21,19 @@ interface PaletteProps {
|
|||
showTitle?: boolean;
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
dark?: boolean;
|
||||
count?: number;
|
||||
color?: {
|
||||
name: string;
|
||||
count?: number;
|
||||
name?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
english?: string;
|
||||
chinese?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const Palette: React.FC<PaletteProps> = (props) => {
|
||||
const {
|
||||
showTitle,
|
||||
direction,
|
||||
dark,
|
||||
color: { name, count = 10, description, english, chinese } = { name: 'gray', count: 13 },
|
||||
} = props;
|
||||
const { showTitle, direction, dark, count = 10, color = {} } = props;
|
||||
|
||||
const { name, title = 'gray', description } = color;
|
||||
|
||||
const [hexColors, setHexColors] = React.useState<Record<PropertyKey, string>>({});
|
||||
const colorNodesRef = React.useRef<Record<PropertyKey, HTMLDivElement>>({});
|
||||
const { message } = App.useApp();
|
||||
|
|
@ -44,19 +41,20 @@ const Palette: React.FC<PaletteProps> = (props) => {
|
|||
useEffect(() => {
|
||||
const colors: Record<string, string> = {};
|
||||
Object.keys(colorNodesRef.current || {}).forEach((key) => {
|
||||
const computedColor = getComputedStyle(colorNodesRef.current[key])['background-color'];
|
||||
if (computedColor.includes('rgba')) {
|
||||
colors[key] = computedColor;
|
||||
const { backgroundColor } = getComputedStyle(colorNodesRef.current[key]);
|
||||
if (backgroundColor.includes('rgba')) {
|
||||
colors[key] = backgroundColor;
|
||||
} else {
|
||||
colors[key] = rgbToHex(computedColor);
|
||||
colors[key] = rgbToHex(backgroundColor);
|
||||
}
|
||||
});
|
||||
setHexColors(colors);
|
||||
}, []);
|
||||
|
||||
const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
|
||||
|
||||
const colors: React.ReactNode[] = [];
|
||||
const colorName = `${english} / ${chinese}`;
|
||||
|
||||
const colorPaletteMap = {
|
||||
dark: ['#fff', 'unset'],
|
||||
default: ['rgba(0, 0, 0, 0.85)', '#fff'],
|
||||
|
|
@ -64,7 +62,7 @@ const Palette: React.FC<PaletteProps> = (props) => {
|
|||
const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default;
|
||||
for (let i = 1; i <= count; i += 1) {
|
||||
const colorText = `${name}-${i}`;
|
||||
const defaultBgStyle = dark ? presetDarkPalettes[name][i - 1] : '';
|
||||
const defaultBgStyle = dark && name ? presetDarkPalettes[name][i - 1] : '';
|
||||
colors.push(
|
||||
<CopyToClipboard
|
||||
text={hexColors[colorText]}
|
||||
|
|
@ -96,8 +94,8 @@ const Palette: React.FC<PaletteProps> = (props) => {
|
|||
<div className={className}>
|
||||
{showTitle && (
|
||||
<div className="color-title">
|
||||
{colorName}
|
||||
<span className="color-description">{description}</span>
|
||||
{title}
|
||||
{description && <span className="color-description">{description}</span>}
|
||||
</div>
|
||||
)}
|
||||
<div className="main-color">{colors}</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue