优化

client/packages/design/components/AvatarWithPreview/index.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import { AvatarWithPreview } from '.';
+
+export default {
+  title: 'Tailchat/AvatarWithPreview',
+  component: AvatarWithPreview,
+  argTypes: {
+    name: {
+      description: '显示名称，用于无图片下的展示',
+    },
+    isOnline: {
+      description: '是否在线, 可不传',
+    },
+    size: {
+      description: '图标大小',
+      type: 'number',
+    },
+    src: {
+      description: '头像图片地址',
+      type: 'string',
+    },
+  },
+} as ComponentMeta<typeof AvatarWithPreview>;
+
+const Template: ComponentStory<typeof AvatarWithPreview> = (args) => (
+  <AvatarWithPreview {...args} />
+);
+
+export const NoImage = Template.bind({});
+NoImage.args = {
+  name: 'Anonymous',
+};
+
+export const withImage = Template.bind({});
+withImage.args = {
+  name: 'Anonymous',
+  src: 'http://dummyimage.com/50x50',
+};

client/packages/design/components/AvatarWithPreview/index.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Avatar, AvatarProps } from '../Avatar';
+import { Image, imageUrlParser } from '../Image';
+import { isValidStr } from '../utils';
+
+export const AvatarWithPreview: React.FC<AvatarProps> = React.memo((props) => {
+  const [visible, setVisible] = useState(false);
+
+  const hasImage = isValidStr(props.src);
+
+  return (
+    <>
+      <div
+        style={{
+          cursor: hasImage ? 'pointer' : 'auto',
+        }}
+        onClick={() => setVisible(!visible)}
+      >
+        <Avatar {...props} />
+      </div>
+
+      {hasImage && (
+        <div
+          style={{
+            display: 'none',
+          }}
+        >
+          <Image
+            preview={{
+              visible,
+              src: imageUrlParser(String(props.src)),
+              onVisibleChange: (value) => {
+                setVisible(value);
+              },
+            }}
+          />
+        </div>
+      )}
+    </>
+  );
+});
+AvatarWithPreview.displayName = 'AvatarWithPreview';