feat: 文档完善

packages/editor/src/config/components.ts

@@ -382,6 +382,16 @@ const components = [
         name: '二维码',
         type: 'QRCode',
       },
+      {
+        icon: '',
+        name: '徽标',
+        type: 'Badge',
+      },
+      {
+        icon: '',
+        name: '缎带',
+        type: 'Ribbon',
+      },
     ],
   },
   {

packages/editor/src/packages/Basic/Badge/Badge.tsx

@@ -1,27 +1,22 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 import { Badge } from 'antd';
 import MarsRender from '@/packages/MarsRender/MarsRender';
 import { getComponent } from '@/packages/index';
 import { useDrop } from 'react-dnd';
 import { usePageStore } from '@/stores/pageStore';
-import { default as DivConfig } from '../../Container/Div/Schema'
 import { ComponentType, IDragTargetItem } from '../../types';
-import { off } from 'process';
-import { platform } from 'os';
-import { rest } from 'lodash-es';
 
 export type BadgeSize = 'small' | 'default';
 
 /*泛型只需要定义组件本身用到的属性*/
 interface IConfig {
-  ribbon?: boolean;//是否使用缎带模式
-  placement?: 'start' | 'end'; //缎带模式下，设置Badge位置
   color?: string; // 自定义小圆点的颜色
   count?: React.ReactNode; // 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏
   classNames?: Record<string, string>; // 语义化结构 class
   dot?: boolean; // 不展示数字，只有一个小红点
   offsetX?: number; // 设置状态点的位置偏移x
   offsetY?: number; // 设置状态点的位置偏移y
+  offset?: [number, number]; // 设置状态点的位置偏移
   overflowCount?: number; // 展示封顶的数字值
   size?: 'small' | 'default'; // 在设置了 count 的前提下有效，设置小圆点的大小
   status?: 'success' | 'processing' | 'default' | 'error' | 'warning'; // 设置 Badge 为状态点
@@ -76,24 +71,19 @@ const MBadge = ({ id, type, config, elements }: ComponentType<IConfig>, ref: any
   });
 
 
-  const { placement, ...restProps } = config.props;
+  const { offsetX, offsetY, ...restProps } = config.props;
 
-  const rewriteProps = !config.props.ribbon ? {
-    offset: [config.props.offsetX, config.props.offsetY],
-    ...restProps,
-  } : {
-  };
-
-  const ribbonProps = config.props.ribbon ? {
-    color: config.props.color,
-    placement: config.props.placement,
-    text: config.props.text,
-  } : {};
+  const rewriteProps: IConfig = useMemo(() => {
+    return {
+      offset: [offsetX || 0, offsetY || 0],
+      ...restProps,
+    }
+  }, [config.props])
 
   return (
     visible && (
-      <Badge data-id={id} data-type={type} style={config.style} {...rewriteProps}>
-        {(<div style={config.style} {...config.props} data-type={type} ref={drop}>
+      <Badge data-id={id} data-type={type} style={config.style} {...rewriteProps} ref={drop}>
+        {(<div>
           {elements?.length ? (
             <MarsRender elements={elements || []} />
           ) : (

packages/editor/src/packages/Basic/Badge/Schema.tsx

@@ -1,10 +1,3 @@
-import { Tooltip } from "antd";
-import Ribbon from "antd/es/badge/Ribbon";
-import { count } from "console";
-import { options } from "less";
-import { over } from "lodash-es";
-import { off } from "process";
-import { OPTIONS } from "react-infinite-viewer";
 
 /**
  * 组件配置和属性值

packages/editor/src/packages/Basic/Ribbon/Ribbon.tsx

@@ -4,9 +4,7 @@ import MarsRender from '@/packages/MarsRender/MarsRender';
 import { getComponent } from '@/packages/index';
 import { useDrop } from 'react-dnd';
 import { usePageStore } from '@/stores/pageStore';
-import { default as DivConfig } from '../../Container/Div/Schema'
 import { ComponentType, IDragTargetItem } from '../../types';
-import './index.less';
 
 export type BadgeSize = 'small' | 'default';
 
@@ -19,6 +17,11 @@ interface IConfig {
   classNames?: Record<string, string>; // 语义化结构 class
 }
 
+const wrapperStyle: React.CSSProperties = {
+  display: 'inline-block',
+  width: 'fit-content',
+}
+
 /**
  *
  * @param props 组件本身属性
@@ -65,12 +68,11 @@ const MRibbon = ({ id, type, config, elements }: ComponentType<IConfig>, ref: an
   });
   return (
     visible && ((
-      <span
-        className='ant-badge'
-        data-id={id} data-type={type}
+      <span data-type={type} ref={drop}
+        style={{ ...wrapperStyle }}
       >
         <Badge.Ribbon style={config.style} {...config.props}>
-          {(<div style={config.style} {...config.props} data-type={type} ref={drop}>
+          {(<div >
             {elements?.length ? (
               <MarsRender elements={elements || []} />
             ) : (

packages/editor/src/packages/Basic/Ribbon/Schema.tsx

@@ -1,10 +1,3 @@
-import { Tooltip } from "antd";
-import Ribbon from "antd/es/badge/Ribbon";
-import { count } from "console";
-import { options } from "less";
-import { over } from "lodash-es";
-import { off } from "process";
-
 /**
  * 组件配置和属性值
  */