优化

2026-04-25 16:36:34 +08:00
commit db90e7579b
1876 changed files with 189777 additions and 0 deletions
--- a/client/packages/design/components/Avatar/combined.tsx
+++ b/client/packages/design/components/Avatar/combined.tsx
@@ -0,0 +1,106 @@
+import { Avatar, AvatarProps } from '.';
+import React from 'react';
+import _take from 'lodash/take';
+import { px2rem } from './utils';
+import './combined.css';
+
+interface CombinedAvatarProps {
+  shape?: 'circle' | 'square';
+  size?: number;
+  items: Pick<AvatarProps, 'name' | 'src'>[];
+}
+
+/**
+ * 组装式头像
+ */
+export const CombinedAvatar: React.FC<CombinedAvatarProps> = React.memo(
+  (props) => {
+    const { size = 32, shape = 'circle' } = props;
+    const items = _take(props.items, 4);
+
+    const length = items.length;
+    const getCellStyle = (i: number): React.CSSProperties => {
+      if (length === 1) {
+        return {};
+      }
+
+      if (length === 2) {
+        if (i === 0) {
+          return {
+            width: '50%',
+            overflow: 'hidden',
+            position: 'absolute',
+            left: 0,
+          };
+        }
+        if (i === 1) {
+          return {
+            width: '50%',
+            overflow: 'hidden',
+            position: 'absolute',
+            right: 0,
+          };
+        }
+      }
+
+      if (length === 3) {
+        if (i === 0) {
+          return {
+            width: '50%',
+            overflow: 'hidden',
+            position: 'absolute',
+            left: 0,
+          };
+        }
+        if (i === 1) {
+          return { transform: 'scale(50%)', transformOrigin: '100% 0 0' };
+        }
+        if (i === 2) {
+          return { transform: 'scale(50%)', transformOrigin: '100% 100% 0' };
+        }
+      }
+
+      if (length === 4) {
+        if (i === 0) {
+          return { transform: 'scale(50%)', transformOrigin: '0 0 0' };
+        }
+        if (i === 1) {
+          return { transform: 'scale(50%)', transformOrigin: '100% 0 0' };
+        }
+        if (i === 2) {
+          return { transform: 'scale(50%)', transformOrigin: '0 100% 0' };
+        }
+        if (i === 3) {
+          return { transform: 'scale(50%)', transformOrigin: '100% 100% 0' };
+        }
+      }
+
+      return {};
+    };
+
+    return (
+      <div
+        className={`td-combined-avatar td-combined-avatar-${length}`}
+        style={{
+          width: px2rem(size),
+          height: px2rem(size),
+          borderRadius: shape === 'circle' ? '50%' : 3,
+        }}
+      >
+        {items.map((item, i) => (
+          <Avatar
+            key={i}
+            className="td-combined-avatar__item"
+            style={getCellStyle(i)}
+            size={size}
+            {...item}
+          />
+        ))}
+
+        {items.length >= 2 && <div className="line1" />}
+        {items.length >= 3 && <div className="line2" />}
+      </div>
+    );
+  }
+);
+CombinedAvatar.displayName = 'CombinedAvatar';