From 3b913cf17ba6517dc4e6d5f8eeb1b97f951796ae Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 18 Aug 2023 10:41:45 +0800 Subject: [PATCH] site: add internationalization for docs (#44263) * site: add internationalization for docs * fix * Update .dumi/theme/common/Color/ColorPaletteTool.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * fix: fix * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .dumi/theme/common/Color/ColorPaletteTool.tsx | 28 +++- .../common/Color/ColorPaletteToolDark.tsx | 26 +++- .dumi/theme/common/Color/ColorPatterns.tsx | 12 +- components/calendar/demo/lunar.tsx | 120 +++++++++--------- package.json | 2 +- 5 files changed, 114 insertions(+), 74 deletions(-) diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx index 5f9b4319eb68..2c2de6d3f9ef 100644 --- a/.dumi/theme/common/Color/ColorPaletteTool.tsx +++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx @@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react'; import { ColorPicker } from 'antd'; import type { Color } from 'antd/es/color-picker'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); + const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); setPrimaryColorInstance(color); }; + const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return {text.trim()}; @@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
-
{ColorPatterns({ color: primaryColor })}
+
+ +
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx index 2c81fa008a5c..59400cfae121 100644 --- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx @@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi'; import React, { useMemo, useState } from 'react'; import { Col, ColorPicker, Row } from 'antd'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [backgroundColor, setBackgroundColor] = useState('#141414'); - const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); @@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => { const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return ( @@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => { return (
- {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })} +
diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx index d40d88a0c997..080b5651cea9 100644 --- a/.dumi/theme/common/Color/ColorPatterns.tsx +++ b/.dumi/theme/common/Color/ColorPatterns.tsx @@ -9,11 +9,15 @@ interface ColorPatternsProps { backgroundColor?: string; } -const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => { +const ColorPatterns: React.FC = ({ color, dark, backgroundColor }) => { const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); - return uniq(colors).map((colorString, i) => ( - - )); + return ( + <> + {uniq(colors).map((colorString, i) => ( + + ))} + + ); }; export default ColorPatterns; diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx index b5476d5f8968..f23d5bdb0d54 100644 --- a/components/calendar/demo/lunar.tsx +++ b/components/calendar/demo/lunar.tsx @@ -16,74 +16,74 @@ const useStyle = createStyles(({ token, css, cx }) => { `; return { wrapper: css` - width: 400px; - border: 1px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadiusOuter}; - padding: 5px; - `, + width: 400px; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusOuter}; + padding: 5px; + `, dateCell: css` - position: relative; - &:before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; - max-width: 40px; - max-height: 40px; - background: transparent; - transition: background 300ms; - border-radius: ${token.borderRadiusOuter}px; - border: 1px solid transparent; - box-sizing: border-box; - } - &:hover:before { - background: rgba(0, 0, 0, 0.04); - } - `, + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: 40px; + max-height: 40px; + background: transparent; + transition: background 300ms; + border-radius: ${token.borderRadiusOuter}px; + border: 1px solid transparent; + box-sizing: border-box; + } + &:hover:before { + background: rgba(0, 0, 0, 0.04); + } + `, today: css` - &:before { - border: 1px solid ${token.colorPrimary}; - } + &:before { + border: 1px solid ${token.colorPrimary}; + } `, text: css` - position: relative; - z-index: 1; - `, + position: relative; + z-index: 1; + `, lunar, current: css` - color: ${token.colorTextLightSolid}; - &:before { - background: ${token.colorPrimary}; - } - &:hover:before { - background: ${token.colorPrimary}; - opacity: .8; - } - .${cx(lunar)} { - color: ${token.colorTextLightSolid}; - opacity: .9; - } - `, + color: ${token.colorTextLightSolid}; + &:before { + background: ${token.colorPrimary}; + } + &:hover:before { + background: ${token.colorPrimary}; + opacity: 0.8; + } + .${cx(lunar)} { + color: ${token.colorTextLightSolid}; + opacity: 0.9; + } + `, monthCell: css` - width: 120px; - color: ${token.colorTextBase}; - border-radius: ${token.borderRadiusOuter}px; - padding: 5px 0; - &:hover { - background: rgba(0, 0, 0, 0.04); - } - `, + width: 120px; + color: ${token.colorTextBase}; + border-radius: ${token.borderRadiusOuter}px; + padding: 5px 0; + &:hover { + background: rgba(0, 0, 0, 0.04); + } + `, monthCellCurrent: css` - color: ${token.colorTextLightSolid}; - background: ${token.colorPrimary}; - &:hover { - background: ${token.colorPrimary}; - opacity: .8; - } - `, + color: ${token.colorTextLightSolid}; + background: ${token.colorPrimary}; + &:hover { + background: ${token.colorPrimary}; + opacity: 0.8; + } + `, }; }); diff --git a/package.json b/package.json index 37571a6196b9..29527721dc5d 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ "throttle-debounce": "^5.0.0" }, "devDependencies": { - "@ant-design/compatible": "^5.1.1", + "@ant-design/compatible": "^5.1.2", "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^17.0.0", "@antv/g6": "^4.8.13",