diff --git a/client/packages/design/components/Avatar/combined.tsx b/client/packages/design/components/Avatar/combined.tsx index 1ae5e52b..8057454f 100644 --- a/client/packages/design/components/Avatar/combined.tsx +++ b/client/packages/design/components/Avatar/combined.tsx @@ -2,6 +2,7 @@ import { Avatar, AvatarProps } from '.'; import React from 'react'; import _take from 'lodash/take'; import './combined.css'; +import { px2rem } from './utils'; interface CombinedAvatarProps { shape?: 'circle' | 'square'; @@ -81,8 +82,8 @@ export const CombinedAvatar: React.FC = React.memo(
diff --git a/client/packages/design/components/Avatar/index.tsx b/client/packages/design/components/Avatar/index.tsx index e22b5947..b827d8da 100644 --- a/client/packages/design/components/Avatar/index.tsx +++ b/client/packages/design/components/Avatar/index.tsx @@ -7,7 +7,7 @@ import _isEmpty from 'lodash/isEmpty'; import _isNumber from 'lodash/isNumber'; import _omit from 'lodash/omit'; import type { AvatarProps as AntdAvatarProps } from 'antd/lib/avatar'; -import { getTextColorHex } from './utils'; +import { getTextColorHex, px2rem } from './utils'; import { isValidStr } from '../utils'; export { getTextColorHex }; @@ -45,13 +45,13 @@ export const Avatar: React.FC = React.memo((_props) => { if (_isNumber(props.size)) { // 为了支持rem统一管理宽度,将size转换为样式宽度(size类型上不支持rem单位) - style.width = props.size * (1 / 16) + 'rem'; - style.height = props.size * (1 / 16) + 'rem'; + style.width = px2rem(props.size); + style.height = px2rem(props.size); if (typeof style.fontSize === 'undefined') { // 如果props.size是数字且没有指定文字大小 // 则自动增加fontSize大小 - style.fontSize = props.size * 0.4 * (1 / 16) + 'rem'; + style.fontSize = px2rem(props.size * 0.4); } } diff --git a/client/packages/design/components/Avatar/utils.ts b/client/packages/design/components/Avatar/utils.ts index 47d7ccc6..698f8dfb 100644 --- a/client/packages/design/components/Avatar/utils.ts +++ b/client/packages/design/components/Avatar/utils.ts @@ -32,3 +32,10 @@ export function getTextColorHex(text: unknown): string { const id = str2int(text); return colors[id % colors.length]; } + +/** + * 将像素转换为rem单位 + */ +export function px2rem(size: number): string { + return size * (1 / 16) + 'rem'; +}