feat: 增加组合式头像

package.json

@@ -17,6 +17,11 @@
     "preinstall": "npx only-allow pnpm",
     "test": "cd web && pnpm test"
   },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": ["acorn"]
+    }
+  },
   "lint-staged": {
     "src/*.{json,less}": [
       "prettier --write --config ./.prettierrc.json"

packages/design/components/Avatar/combined.css

@@ -0,0 +1,64 @@
+.td-combined-avatar {
+  position: relative;
+  overflow: hidden;
+}
+
+.td-combined-avatar-2::after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 1px;
+  background-color: white;
+  left: 50%;
+  top: 0;
+  z-index: 1;
+}
+
+.td-combined-avatar-3::before {
+  content: '';
+  position: absolute;
+  width: 50%;
+  height: 1px;
+  background-color: white;
+  right: 0;
+  top: 50%;
+  z-index: 1;
+}
+
+.td-combined-avatar-3::after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 1px;
+  background-color: white;
+  left: 50%;
+  top: 0;
+  z-index: 1;
+}
+
+.td-combined-avatar-4::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background-color: white;
+  left: 0;
+  top: 50%;
+  z-index: 1;
+}
+
+.td-combined-avatar-4::after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 1px;
+  background-color: white;
+  left: 50%;
+  top: 0;
+  z-index: 1;
+}
+
+.td-combined-avatar__item {
+  position: absolute;
+  border-radius: 0;
+}

packages/design/components/Avatar/combined.tsx

@@ -0,0 +1,102 @@
+import { Avatar, AvatarProps } from '.';
+import React from 'react';
+import _take from 'lodash/take';
+import './combined.css';
+
+interface CombinedAvatarProps {
+  shape?: 'circle' | 'square';
+  size?: number;
+  items: AvatarProps[];
+}
+
+/**
+ * 组装式头像
+ */
+export const CombinedAvatar: React.FC<CombinedAvatarProps> = React.memo(
+  (props) => {
+    const { size = 16, 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: size,
+          height: size,
+          borderRadius: shape === 'circle' ? '50%' : 3,
+        }}
+      >
+        {items.map((item, i) => (
+          <Avatar
+            key={i}
+            className="td-combined-avatar__item"
+            style={getCellStyle(i)}
+            size={size}
+            {...item}
+          />
+        ))}
+      </div>
+    );
+  }
+);
+CombinedAvatar.displayName = 'CombinedAvatar';

packages/design/components/Avatar/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
 import { Avatar } from '.';
+import { CombinedAvatar } from './combined';
 
 export default {
   title: 'Tailchat/Avatar',
@@ -48,3 +48,73 @@ withImage.args = {
   name: 'Anonymous',
   src: 'http://dummyimage.com/50x50',
 };
+
+const CombinedTemplate: ComponentStory<typeof CombinedAvatar> = (args) => (
+  <div>
+    <CombinedAvatar {...args} />
+  </div>
+);
+
+export const combined1 = CombinedTemplate.bind({});
+combined1.args = {
+  size: 48,
+  items: [
+    {
+      name: 'Anonymous',
+      src: 'http://dummyimage.com/50x50',
+    },
+  ],
+};
+
+export const combined2 = CombinedTemplate.bind({});
+combined2.args = {
+  size: 48,
+  items: [
+    {
+      name: 'Anonymous',
+      src: 'http://dummyimage.com/50x50',
+    },
+    {
+      name: 'Anonymous',
+    },
+  ],
+};
+
+export const combined3 = CombinedTemplate.bind({});
+combined3.args = {
+  size: 48,
+  items: [
+    {
+      name: 'Anonymous',
+      src: 'http://dummyimage.com/50x50',
+    },
+    {
+      name: 'Anonymous',
+      src: 'http://dummyimage.com/50x50',
+    },
+    {
+      name: 'Anonymous',
+    },
+  ],
+};
+
+export const combined4 = CombinedTemplate.bind({});
+combined4.args = {
+  size: 48,
+  items: [
+    {
+      name: 'Anonymous',
+      src: 'http://dummyimage.com/50x50',
+    },
+    {
+      name: 'Anonymous',
+      src: 'http://dummyimage.com/50x50',
+    },
+    {
+      name: 'Anonymous',
+    },
+    {
+      name: 'Anonymous',
+    },
+  ],
+};

packages/design/components/Avatar/index.tsx

@@ -9,7 +9,7 @@ import type { AvatarProps as AntdAvatarProps } from 'antd/lib/avatar';
 import { getTextColorHex } from './utils';
 import { isValidStr } from '../utils';
 
-interface AvatarProps extends AntdAvatarProps {
+export interface AvatarProps extends AntdAvatarProps {
   name?: string;
   isOnline?: boolean;
 }