@aloudata/aloudata-design 2.16.0 → 2.17.0

package/dist/Avatar/component/Avatar/helper.d.ts

@@ -0,0 +1,11 @@
+import { TAvatarSize } from './type';
+/**
+ * 根据头像大小获取合适的字体大小和缩放样式
+ * @param size 头像大小，可以是预设值或数字
+ * @returns 包含fontSize和可能的transform样式的对象
+ */
+export declare const getFontSize: (size: TAvatarSize | number) => {
+    fontSize: number;
+    transform?: string | undefined;
+    fontWeight?: number | undefined;
+};

package/dist/Avatar/component/Avatar/helper.js

@@ -0,0 +1,83 @@
+import { AVATAR_SIZE_MAP, AVATAR_SIZE_TO_FONT_SIZE } from "./type";
+
+/**
+ * 根据头像大小获取合适的字体大小和缩放样式
+ * @param size 头像大小，可以是预设值或数字
+ * @returns 包含fontSize和可能的transform样式的对象
+ */
+export var getFontSize = function getFontSize(size) {
+  // 1. 将TAvatarSize转换为像素值
+  var pixelSize = typeof size === 'number' ? size : AVATAR_SIZE_MAP[size] || 32;
+
+  // 2. 计算合适的字体大小
+  var fontSize;
+
+  // 2.1 先检查映射表中是否有对应值
+  if (pixelSize in AVATAR_SIZE_TO_FONT_SIZE) {
+    fontSize = AVATAR_SIZE_TO_FONT_SIZE[pixelSize];
+  } else {
+    // 2.2 如果没有对应值，根据区间确定合适的字体大小
+
+    // 定义关键区间点
+    var sizeBenchmarks = Object.keys(AVATAR_SIZE_TO_FONT_SIZE).map(Number).sort(function (a, b) {
+      return a - b;
+    });
+
+    // 如果小于最小基准点
+    if (pixelSize < sizeBenchmarks[0]) {
+      // 对于非常小的尺寸，使用比例计算，但不小于6px
+      fontSize = Math.max(6, Math.floor(pixelSize / 2));
+      // 确保为偶数
+      fontSize = fontSize % 2 === 0 ? fontSize : fontSize - 1;
+    }
+    // 如果大于最大基准点
+    else if (pixelSize > sizeBenchmarks[sizeBenchmarks.length - 1]) {
+      // 对于特大尺寸，使用简单的比例计算，确保单调增长
+      var largestSize = sizeBenchmarks[sizeBenchmarks.length - 1];
+      var largestFontSize = AVATAR_SIZE_TO_FONT_SIZE[largestSize];
+      var ratio = largestFontSize / largestSize;
+      fontSize = Math.floor(pixelSize * ratio);
+
+      // 确保为偶数
+      fontSize = fontSize % 2 === 0 ? fontSize : fontSize - 1;
+    }
+    // 在两个基准点之间
+    else {
+      // 找到最近的两个基准点
+      var lowerIndex = 0;
+      for (var i = 0; i < sizeBenchmarks.length - 1; i++) {
+        if (pixelSize >= sizeBenchmarks[i] && pixelSize < sizeBenchmarks[i + 1]) {
+          lowerIndex = i;
+          break;
+        }
+      }
+      var lowerSize = sizeBenchmarks[lowerIndex];
+      var upperSize = sizeBenchmarks[lowerIndex + 1];
+      var lowerFontSize = AVATAR_SIZE_TO_FONT_SIZE[lowerSize];
+      var upperFontSize = AVATAR_SIZE_TO_FONT_SIZE[upperSize];
+
+      // 线性插值计算
+      var _ratio = (pixelSize - lowerSize) / (upperSize - lowerSize);
+      fontSize = Math.floor(lowerFontSize + _ratio * (upperFontSize - lowerFontSize));
+
+      // 确保为偶数
+      fontSize = fontSize % 2 === 0 ? fontSize : fontSize - 1;
+    }
+  }
+
+  // 3. 处理小于12px的字体
+  if (fontSize < 12) {
+    var scale = fontSize / 12;
+    return {
+      fontSize: 12,
+      transform: "scale(".concat(scale, ")"),
+      fontWeight: 600
+    };
+  }
+
+  // 4. 返回结果
+  return {
+    fontSize: fontSize,
+    fontWeight: 500
+  };
+};

package/dist/Avatar/component/Avatar/index.d.ts

@@ -1,8 +1,7 @@
 import { AvatarProps as antdAvatarProps } from 'antd/lib/avatar/avatar';
 import Group from 'antd/lib/avatar/group';
 import * as React from 'react';
-export type { GroupProps } from 'antd/lib/avatar/group';
-type TSize = 'large' | 'middle' | 'small' | number;
+import { TAvatarSize } from './type';
 export interface IAvatarProps extends Omit<antdAvatarProps, 'size'> {
     /**
      * @description 指定头像的形状
@@ -65,17 +64,17 @@ export interface IAvatarProps extends Omit<antdAvatarProps, 'size'> {
      */
     onError?: () => boolean;
     /**
-     * @description 头像的大小，可以显示的设置数字或者预设的大小值
+     * @description 头像的大小，可以显示的设置数字或者预设的大小值 40 32 28
      * @type 'large' | 'middle' | 'small' | number
      * @default middle
      */
-    size?: TSize;
+    size?: TAvatarSize;
     /**
-     * @description 是否展示完整的children内容，如果children为string则默认截取第一个单词作为头像展示
-     * @type boolean
-     * @default false
+     * @description 头像的类型
+     * @type 'default' | 'user' | 'userGroup'
+     * @default default
      */
-    showFullValue?: boolean;
+    type?: 'user' | 'userGroup' | 'count';
 }
 interface ICompoundedComponent extends React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> {
     Group: typeof Group;

package/dist/Avatar/component/Avatar/index.js

@@ -1,48 +1,76 @@
-var _excluded = ["size", "showFullValue", "children", "src"];
+var _excluded = ["size", "children", "src", "icon", "type"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import InternalAvatar from 'antd/lib/avatar/avatar';
-import classNames from 'classnames';
 import * as React from 'react';
 import { User } from "../../../Icon";
+import _ from 'lodash';
+import { useCallback, useMemo } from 'react';
+import { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR } from "./type";
+import { getFontSize } from "./helper";
+import classNames from 'classnames';
 var ZERO = 0;
 var Avatar = function Avatar(props) {
   var _props$size = props.size,
     size = _props$size === void 0 ? 'middle' : _props$size,
-    _props$showFullValue = props.showFullValue,
-    showFullValue = _props$showFullValue === void 0 ? false : _props$showFullValue,
     children = props.children,
     src = props.src,
+    icon = props.icon,
+    type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
-  var getSizeClass = function getSizeClass(avatarSize) {
-    var defaultAvatarClassName = '';
-    if (typeof src === 'undefined' && typeof children === 'undefined') {
-      defaultAvatarClassName = 'ald-avatar-default';
-    }
-    if (['large', 'small', 'mini'].includes("".concat(avatarSize))) {
-      return classNames('ald-avatar', defaultAvatarClassName, "ald-avatar-".concat(avatarSize));
+  var getSize = useCallback(function () {
+    if (typeof size === 'number') {
+      return size;
     }
-    return classNames('ald-avatar', defaultAvatarClassName, 'ald-avatar-middle');
-  };
-  var getChildren = function getChildren() {
-    if (!showFullValue && typeof children === 'string') {
+    return AVATAR_SIZE_MAP[size] || 32;
+  }, [size]);
+  var getChildren = useCallback(function () {
+    if (typeof children === 'string') {
       return children[ZERO].toLocaleUpperCase();
     }
     return children;
-  };
-  var defaultSrc = React.useMemo(function () {
-    if (typeof src === 'undefined' || !src) {
-      return /*#__PURE__*/React.createElement(User, {
-        size: size
-      });
+  }, [children]);
+  var bgColor = useMemo(function () {
+    if (type) {
+      return AVATAR_TYPE_TO_BG_COLOR[type];
+    }
+    return AVATAR_TYPE_TO_BG_COLOR.user;
+  }, [type]);
+  var fontColor = useMemo(function () {
+    if (type === 'count') {
+      return '#1F2937';
+    }
+    return '#fff';
+  }, [type]);
+  var innerIcon = useMemo(function () {
+    if (icon) {
+      return icon;
+    }
+    if (!_.isNil(children)) {
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          backgroundColor: bgColor,
+          color: fontColor,
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        style: getFontSize(getSize())
+      }, getChildren()));
     }
-    return src;
-  }, [size, src]);
+    return /*#__PURE__*/React.createElement(User, {
+      size: getSize()
+    });
+  }, [icon, getSize, children, getChildren, bgColor, fontColor]);
   return /*#__PURE__*/React.createElement(InternalAvatar, _extends({}, restProps, {
-    size: typeof size === 'number' ? size : undefined,
-    className: classNames(getSizeClass(size), restProps.className),
-    src: defaultSrc
-  }), getChildren());
+    size: getSize(),
+    className: classNames(restProps.className, 'ald-avatar'),
+    icon: innerIcon,
+    src: src
+  }));
 };
 export default Avatar;

package/dist/Avatar/component/Avatar/type.d.ts

@@ -0,0 +1,22 @@
+export type TAvatarSize = 'large' | 'middle' | 'small' | number;
+export type { GroupProps } from 'antd/lib/avatar/group';
+export declare const AVATAR_SIZE_MAP: {
+    large: number;
+    middle: number;
+    small: number;
+};
+export declare const AVATAR_SIZE_TO_FONT_SIZE: {
+    16: number;
+    20: number;
+    24: number;
+    28: number;
+    32: number;
+    40: number;
+    48: number;
+    64: number;
+};
+export declare const AVATAR_TYPE_TO_BG_COLOR: {
+    user: string;
+    userGroup: string;
+    count: string;
+};

package/dist/Avatar/component/Avatar/type.js

@@ -0,0 +1,16 @@
+var _AVATAR_SIZE_TO_FONT_;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+export var AVATAR_SIZE_MAP = {
+  large: 40,
+  middle: 32,
+  small: 28
+};
+export var AVATAR_SIZE_TO_FONT_SIZE = (_AVATAR_SIZE_TO_FONT_ = {}, _defineProperty(_AVATAR_SIZE_TO_FONT_, 16, 8), _defineProperty(_AVATAR_SIZE_TO_FONT_, 20, 10), _defineProperty(_AVATAR_SIZE_TO_FONT_, 24, 10), _defineProperty(_AVATAR_SIZE_TO_FONT_, 28, 12), _defineProperty(_AVATAR_SIZE_TO_FONT_, 32, 12), _defineProperty(_AVATAR_SIZE_TO_FONT_, 40, 14), _defineProperty(_AVATAR_SIZE_TO_FONT_, 48, 16), _defineProperty(_AVATAR_SIZE_TO_FONT_, 64, 24), _AVATAR_SIZE_TO_FONT_);
+export var AVATAR_TYPE_TO_BG_COLOR = {
+  user: '#1D4ED8',
+  userGroup: '#15803D',
+  count: '#E5E7EB'
+};

package/dist/Avatar/style/index.less

@@ -1,41 +1,12 @@
 @import '../../style/index.less';
 
 .ald-avatar.ald-avatar {
-  color: @ND0;
   background-color: #fff;
+  color: #1f2937;
   border: 0;
-
-  &.ald-avatar-default {
-    background-color: transparent;
-  }
-
-  &-large {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-    line-height: 40px;
-  }
-
-  &-middle {
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-    line-height: 32px;
-  }
-
-  &-small {
-    width: 28px;
-    height: 28px;
-    font-size: 14px;
-    line-height: 28px;
-  }
-
-  &-mini {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-    line-height: 24px;
-  }
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .ant-avatar-group {

package/dist/User/index.js

@@ -21,7 +21,7 @@ function User(_ref) {
     className: 'ald-user-avatar',
     src: src,
     size: getAvatarSize(size || 'middle')
-  }), /*#__PURE__*/React.createElement("div", {
+  }, nickname), /*#__PURE__*/React.createElement("div", {
     className: classNames('ald-user-text', nicknameClassName)
   }, nickname));
 }