Merge pull request #1352 from alibaba/feat-generator-setting

feat(generator): 新增pop交互，用于介绍组件。

Author: lhbxs

tools/schema-generator/src/components/Sidebar/Element.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import { Popover } from 'antd';
 import { useDrag } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 import { addItem } from '../../utils';
 import { useGlobal, useStore } from '../../utils/hooks';
 import './Element.less';
 
-const Element = ({ text, name, schema, icon, fixedName }) => {
+const Element = ({ text, name, schema, icon, fixedName, popover }) => {
   const setGlobal = useGlobal();
   const {
     selected,
@@ -52,6 +53,7 @@ const Element = ({ text, name, schema, icon, fixedName }) => {
   const widgetProps = {
     text,
     icon,
+    popover,
     onClick: handleElementClick,
   };
 
@@ -69,12 +71,22 @@ const Element = ({ text, name, schema, icon, fixedName }) => {
 export default Element;
 
 // 目前没有用icon，但是可以补上
-const WidgetUI = ({ onClick, text, icon }) => {
+const WidgetUI = ({ onClick, text, icon, popover }) => {
   const { t } = useTranslation(["components"]);
-  return (
-    <li className="left-item" onClick={onClick}>
-      {icon}
-      {t(text)}
-    </li>
-  );
+  if (popover?.content) {
+    return <Popover title={popover?.title || ''} content={popover?.content} mouseLeaveDelay={0}>
+      <li className="left-item" onClick={onClick}>
+        {icon}
+        {t(text)}
+      </li>
+    </Popover>
+  } else {
+    return (
+      <li className="left-item" onClick={onClick}>
+        {icon}
+        {t(text)}
+      </li>
+    );
+  }
+
 };

tools/schema-generator/src/settings/index.js

@@ -109,6 +109,9 @@ export const elements = [
   {
     text: '输入框',
     name: 'input',
+    popover: {
+      content: '可以输入内容'
+    },
     schema: {
       title: '输入框',
       type: 'string',
@@ -161,6 +164,10 @@ export const elements = [
   },
   {
     text: '大输入框',
+    popover: {
+      title: '介绍',
+      content: '可以输入多行内容'
+    },
     name: 'textarea',
     schema: {
       title: '编辑框',
@@ -203,6 +210,10 @@ export const elements = [
   {
     text: '日期选择',
     name: 'date',
+    popover: {
+      title: '略缩图',
+      content: <img width={348} height={43} src="https://img.alicdn.com/imgextra/i4/O1CN01gPzKrs1eNTHPhuSIG_!!6000000003859-0-tps-348-43.jpg" />
+    },
     schema: {
       title: '日期选择',
       type: 'string',