Merge pull request #21 from waiterxiaoyy/yydev-MDrawer

🆕 feat: 新增抽屉物料

packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx

@@ -25,6 +25,7 @@ import RunScriptAction from './RunScriptAction';
 import SendParams from './SendParams';
 // 样式
 import styles from './index.module.less';
+import OpenDrawerAction from './OpenDrawerAction';
 
 const ActionModal = (props: any, ref: any) => {
   const [visible, setVisible] = useState(false);
@@ -66,6 +67,16 @@ const ActionModal = (props: any, ref: any) => {
           key: 'closeModal',
           render: () => <OpenModalAction />,
         },
+        {
+          label: '打开抽屉',
+          key: 'openDrawer',
+          render: () => <OpenDrawerAction />,
+        },
+        {
+          label: '关闭抽屉',
+          key: 'closeDrawer',
+          render: () => <OpenDrawerAction />,
+        },
         {
           label: '确认框',
           key: 'showConfirm',
@@ -273,7 +284,7 @@ const ActionModal = (props: any, ref: any) => {
 * 事件参数: eventParams
 */
 function run(){
-    
+
 }
 `,
       });

packages/editor/src/components/EventConfig/ActionModal/OpenDrawerAction.tsx

@@ -0,0 +1,42 @@
+import { Form, Select, Divider } from 'antd';
+import { usePageStore } from '@/stores/pageStore';
+import styles from './index.module.less';
+const OpenDrawerAction = () => {
+  // 页面组件
+  const { drawers } = usePageStore((state) => {
+    const drawers: { id: string; title: string }[] = [];
+    Object.values(state.page.elementsMap).forEach((item) => {
+      if (item.type === 'Drawer') {
+        const title = item.config.props.title;
+        drawers.push({
+          id: item.id,
+          title: typeof title === 'string' ? title : title.type === 'static' ? title.value : '动态标题',
+        });
+      }
+    });
+    console.log(drawers);
+    return {
+      drawers,
+    };
+  });
+
+  return (
+    <>
+      <div className={styles.desc}>
+        <h3 className={styles.descTitle}>说明</h3>
+        <p className={styles.descInfo}>触发一个按钮、表单等事件动作后，可以通过此行为来打开一个抽屉，前提是需要先创建一个抽屉。</p>
+        <Divider />
+      </div>
+      <Form.Item label="选择抽屉" name={'target'} rules={[{ required: true, message: '请选择抽屉组件' }]}>
+        <Select>
+          {drawers.map((item) => (
+            <Select.Option key={item.id} value={item.id}>
+              {`${item.title} (${item.id})`}
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+    </>
+  );
+};
+export default OpenDrawerAction;

packages/editor/src/config/components.ts

@@ -290,6 +290,11 @@ const components = [
         name: '标签页',
         type: 'Tabs',
       },
+      {
+        icon: '',
+        name: '抽屉',
+        type: 'Drawer',
+      },
     ],
   },
   {

packages/editor/src/packages/Functional/Drawer/Drawer.tsx

@@ -0,0 +1,125 @@
+import React, { forwardRef, memo, useImperativeHandle, useState } from 'react';
+import { ComponentType, IDragTargetItem } from '@/packages/types';
+import { usePageStore } from '@/stores/pageStore';
+import { useDrop } from 'react-dnd';
+import { Button, Drawer, Spin } from 'antd';
+import MarsRender from '@/packages/MarsRender/MarsRender';
+import * as Components from '@/packages/index';
+import * as icons from '@ant-design/icons';
+import { handleActionFlow } from '@/packages/utils/action';
+
+const AntDrawer = forwardRef(({ id, type, config, elements, onClose, onAfterOpenChange }: ComponentType, ref: any) => {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const addChildElements = usePageStore((state) => state.addChildElements);
+
+  const [, drop] = useDrop({
+    accept: 'MENU_ITEM',
+    drop(item: IDragTargetItem, monitor) {
+      if (monitor.didDrop()) return;
+      const { config, events, methods = [] }: any = Components[(item.type + 'Config') as keyof typeof Components] || {};
+      addChildElements({
+        type: item.type,
+        name: item.name,
+        parentId: id,
+        id: item.id,
+        config,
+        events,
+        methods,
+      });
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  });
+
+  useImperativeHandle(ref, () => {
+    return {
+      show() {
+        setVisible(true);
+      },
+      hide() {
+        setVisible(false);
+      },
+      // 显示确认Loading
+      showLoading: () => {
+        setLoading(true);
+      },
+      // 隐藏确认Loading
+      hideLoading: () => {
+        setLoading(false);
+      },
+    };
+  });
+
+  const handleOpenChange = (open: boolean) => {
+    onAfterOpenChange?.(open);
+  };
+
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.(); // 关闭时触发回调
+  };
+
+  const handleOperate = (eventName: string) => {
+    const btnEvent = config.events.find((event) => event.eventName === eventName);
+    handleActionFlow(btnEvent?.actions, {});
+  };
+
+  const bulkActionList = config.props.bulkActionList || [];
+  const iconsList: { [key: string]: any } = icons;
+
+  return (
+    <>
+      <div>
+        <Button onClick={() => setVisible(true)}>{config.props.title}</Button>
+      </div>
+      <Drawer
+        {...config.props}
+        data-type={type}
+        open={visible}
+        getContainer={false}
+        afterOpenChange={(open) => handleOpenChange(open)}
+        onClose={handleClose}
+        data-id={id}
+        footer={config.props.footer ? undefined : null}
+        style={{ ...config.style }}
+        zIndex={998}
+        extra={
+          <div>
+            {bulkActionList.map((item: any, index: number) => {
+              return (
+                <Button
+                  type={item.type}
+                  danger={item.danger}
+                  icon={item.icon ? React.createElement(iconsList[item.icon]) : null}
+                  onClick={() => handleOperate(item.eventName)}
+                  key={item.eventName}
+                  style={{ marginRight: 8 }}
+                >
+                  {item.text}
+                </Button>
+              );
+            })}
+          </div>
+        }
+      >
+        <div ref={drop}>
+          <Spin spinning={loading}>
+            {elements?.length ? (
+              <MarsRender elements={elements || []} />
+            ) : (
+              <div className="slots" style={{ lineHeight: '100px' }}>
+                拖拽组件到这里
+              </div>
+            )}
+          </Spin>
+        </div>
+      </Drawer>
+    </>
+  );
+});
+
+export default memo(AntDrawer);

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

@@ -0,0 +1,111 @@
+import { FormInstance } from 'antd';
+import ActionSetting from '@/components/BulkAction/ActionSetting';
+export default {
+  attrs: [
+    {
+      type: 'Title',
+      label: '右上角操作栏',
+    },
+    {
+      type: 'function',
+      render(form: FormInstance) {
+        return <ActionSetting key="ActionSetting" form={form} />;
+      },
+    },
+    {
+      type: 'Title',
+      label: '基础配置',
+      key: 'basic',
+    },
+    {
+      type: 'Variable',
+      label: '标题',
+      name: ['title'],
+    },
+    {
+      type: 'Select',
+      label: '抽屉方向',
+      name: ['placement'],
+      props: {
+        options: [
+          { label: '顶部', value: 'top' },
+          { label: '右侧', value: 'right' },
+          { label: '底部', value: 'bottom' },
+          { label: '左侧', value: 'left' },
+        ],
+      },
+    },
+    {
+      type: 'Input',
+      label: '高度',
+      name: ['height'],
+    },
+    {
+      type: 'Input',
+      label: '宽度',
+      name: ['width'],
+    },
+    {
+      type: 'Switch',
+      label: '销毁关闭',
+      name: ['destroyOnClose'],
+    },
+    {
+      type: 'Switch',
+      label: '键盘ESC关闭',
+      name: ['keyboard'],
+    },
+    {
+      type: 'Switch',
+      label: '遮罩',
+      name: ['mask'],
+    },
+    {
+      type: 'Switch',
+      label: '点击遮罩关闭',
+      name: ['maskClosable'],
+    },
+  ],
+  config: {
+    props: {
+      title: '抽屉',
+      destroyOnClose: true,
+      height: '40%',
+      width: '30%',
+      keyboard: true,
+      mask: true,
+      maskClosable: true,
+      placement: 'right',
+    },
+    // 组件样式
+    style: {},
+  },
+  events: [
+    {
+      value: 'onClose',
+      name: '关闭抽屉事件',
+    },
+    {
+      value: 'onAfterOpenChange',
+      name: '切换抽屉结束事件',
+    },
+  ],
+  methods: [
+    {
+      name: 'show',
+      title: '打开抽屉',
+    },
+    {
+      name: 'hide',
+      title: '关闭抽屉',
+    },
+    {
+      name: 'showLoading',
+      title: '显示加载Loading',
+    },
+    {
+      name: 'hideLoading',
+      title: '隐藏加载Loading',
+    },
+  ],
+};

packages/editor/src/packages/Functional/Drawer/index.tsx

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

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

@@ -7,3 +7,4 @@ export { Button, ButtonConfig } from './Button';
 export { FileUpload, FileUploadConfig } from './FileUpload';
 export { Tabs, TabsConfig } from './Tabs';
 export { Tab, TabConfig } from './Tab';
+export { Drawer, DrawerConfig } from './Drawer';

packages/editor/src/packages/utils/action.ts

@@ -173,6 +173,10 @@ const execAction = (node: any, params: any = {}) => {
       handleOpenModal(node, data, 'open');
     } else if (node.action.actionType === 'closeModal') {
       handleOpenModal(node, data, 'close');
+    } else if (node.action.actionType === 'openDrawer') {
+      handleOpenDrawer(node, data, 'open');
+    } else if (node.action.actionType === 'closeDrawer') {
+      handleOpenDrawer(node, data, 'close');
     } else if (node.action.actionType === 'jumpLink') {
       handleJumpLink(node, data);
     } else if (node.action.actionType === 'reloadPage') {
@@ -276,6 +280,15 @@ async function handleOpenModal({ action, next }: ActionNode<MethodsAction>, data
   execAction(next, data);
 }
 
+/**
+ * 打开/关闭抽屉
+ */
+async function handleOpenDrawer({ action, next }: ActionNode<MethodsAction>, data: any = {}, type: 'open' | 'close') {
+  const ref = getComponentRef(action.target);
+  if (type === 'close') ref.hide({ ...data });
+  if (type === 'open') await ref.show({ ...data });
+  execAction(next, data);
+}
 /**
  * 处理确认框
  */