Merge pull request #33 from jingjing20/feat/wzh/component/avatar

🆕 feat: 新增头像物料

packages/editor/src/config/components.ts

@@ -300,6 +300,11 @@ const components = [
         name: '结果页',
         type: 'Result',
       },
+      {
+        icon: '',
+        name: '头像',
+        type: 'Avatar',
+      },
     ],
   },
   {

packages/editor/src/packages/Functional/Avatar/Avatar.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { Avatar } from 'antd';
+import { ComponentType } from '@/packages/types';
+
+export type AvatarSize = 'large' | 'small' | 'default' | number;
+
+/*泛型只需要定义组件本身用到的属性*/
+export interface IConfig {
+  textavatar?: string; // 文字头像
+  /** Shape of avatar, options: `circle`, `square` */
+  shape?: 'circle' | 'square';
+  size?: AvatarSize;
+  gap?: number;
+  /** Src of image avatar */
+  src?: React.ReactNode;
+  /** Srcset of image avatar */
+  srcSet?: string;
+  draggable?: boolean | 'true' | 'false';
+  /** Icon to be used in avatar */
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  alt?: string;
+  crossOrigin?: '' | 'anonymous' | 'use-credentials';
+}
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MAvatar = ({ id, type, config }: ComponentType<IConfig>, ref: any) => {
+  const [visible, setVisible] = useState(true);
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+
+  return (
+    visible && (
+      <Avatar
+        data-id={id}
+        data-type={type}
+        style={config.style}
+        {...config.props}
+        size={!isNaN(Number(config.props?.size)) ? Number(config.props?.size) : config.props?.size}
+      >
+        {config.props.textavatar}
+      </Avatar>
+    )
+  );
+};
+export default forwardRef(MAvatar);

packages/editor/src/packages/Functional/Avatar/Schema.tsx

@@ -0,0 +1,118 @@
+import { FormInstance } from 'antd';
+import ActionSetting from '@/components/BulkAction/ActionSetting';
+
+/**
+ * 组件配置和属性值
+ */
+export default {
+  // 组件属性配置JSON
+  attrs: [
+    {
+      type: 'Title',
+      label: '基础设置',
+      key: 'basic',
+    },
+    {
+      type: 'Variable',
+      label: '文字头像',
+      name: ['textavatar'],
+      props: {
+        placeholder: '请输入',
+      },
+    },
+    {
+      type: 'Variable',
+      label: '图片地址',
+      name: ['src'],
+      props: {
+        placeholder: '图片地址',
+      },
+    },
+    {
+      type: 'InputSelect',
+      label: '头像大小',
+      name: ['size'],
+      tooltip: '可以选择图像系统默认大小或者手动输入像素值',
+      props: {
+        options: [
+          { value: 'large', label: 'large' },
+          { value: 'small', label: 'small' },
+          { value: 'default', label: 'default' },
+        ],
+      },
+    },
+    {
+      type: 'Variable',
+      label: '替代文本',
+      name: ['alt'],
+      tooltip: '图像无法显示时的替代文本',
+      props: {
+        placeholder: '请输入',
+      },
+    },
+    {
+      type: 'InputNumber',
+      label: '边界距离',
+      name: ['gap'],
+      tooltip: '字符类型距离左右两侧边界单位像素',
+      props: {
+        placeholder: '请输入',
+      },
+    },
+    {
+      type: 'Select',
+      label: '头像形状',
+      name: ['shape'],
+      tooltip: '指定头像的形状',
+      props: {
+        options: [
+          { value: 'circle', label: 'circle' },
+          { value: 'square', label: 'square' },
+        ],
+      },
+    },
+    {
+      type: 'Select',
+      label: 'draggable',
+      name: ['draggable'],
+      tooltip: '图片是否允许拖动',
+      props: {
+        placeholder: '图片是否允许拖动',
+        options: [
+          { value: 'true', label: 'true' },
+          { value: 'false', label: 'false' },
+        ],
+      },
+    },
+    {
+      type: 'Select',
+      label: 'CORS设置',
+      name: ['crossOrigin'],
+      tooltip: 'CORS属性设置',
+      props: {
+        placeholder: 'CORS属性设置',
+        allowClear: true,
+        options: [
+          { value: 'anonymous', label: 'anonymous' },
+          { value: 'use-credentials', label: 'use-credentials' },
+        ],
+      },
+    },
+  ],
+  config: {
+    // 组件默认属性值
+    props: {
+      textavatar: 'wang',
+      size: 'large',
+      shape: 'circle',
+      draggable: 'true',
+    },
+    // 组件样式
+    style: {},
+    // 事件
+    events: [],
+  },
+  // 组件事件
+  events: [],
+  methods: [],
+};

packages/editor/src/packages/Functional/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export { default as AvatarConfig } from './Schema';

packages/editor/src/packages/Functional/index.ts

@@ -9,3 +9,4 @@ export { Tabs, TabsConfig } from './Tabs';
 export { Tab, TabConfig } from './Tab';
 export { Drawer, DrawerConfig } from './Drawer';
 export { Result, ResultConfig } from './Result';
+export { Avatar, AvatarConfig } from './Avatar';

packages/materials/Functional/Avatar/Avatar.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { Avatar } from 'antd';
+import { ComponentType } from '../../types';
+
+export type AvatarSize = 'large' | 'small' | 'default' | number;
+
+/*泛型只需要定义组件本身用到的属性*/
+export interface IConfig {
+  textavatar?: string; // 文字头像
+  /** Shape of avatar, options: `circle`, `square` */
+  shape?: 'circle' | 'square';
+  size?: AvatarSize;
+  gap?: number;
+  /** Src of image avatar */
+  src?: React.ReactNode;
+  /** Srcset of image avatar */
+  srcSet?: string;
+  draggable?: boolean | 'true' | 'false';
+  /** Icon to be used in avatar */
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  alt?: string;
+  crossOrigin?: '' | 'anonymous' | 'use-credentials';
+}
+/**
+ *
+ * @param props 组件本身属性
+ * @param style 组件样式
+ * @returns
+ */
+const MAvatar = ({ config }: ComponentType<IConfig>, ref: any) => {
+  const [visible, setVisible] = useState(true);
+  // 对外暴露方法
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+    };
+  });
+
+  return (
+    visible && (
+      <Avatar style={config.style} {...config.props} size={!isNaN(Number(config.props?.size)) ? Number(config.props?.size) : config.props?.size}>
+        {config.props.textavatar}
+      </Avatar>
+    )
+  );
+};
+export default forwardRef(MAvatar);

packages/materials/Functional/Avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

packages/materials/Functional/Result/Result.tsx

@@ -24,9 +24,8 @@ export interface IConfig {
  * @param style 组件样式
  * @returns
  */
-const MResult = ({ id, type, config }: ComponentType<IConfig>, ref: any) => {
+const MResult = ({ config }: ComponentType<IConfig>, ref: any) => {
   const [visible, setVisible] = useState(true);
-  console.log(id, type, config, 'ppp');
   // 对外暴露方法
   useImperativeHandle(ref, () => {
     return {