fix: 优化弹框和抽屉收集

JackySoft · Dec 18, 2024 · dadbb5e · dadbb5e
1 parent 4b443b4
commit dadbb5e
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 112 deletions.
diff --git a/packages/editor/src/components/FloatingCollector/index.module.less b/packages/editor/src/components/FloatingCollector/index.module.less
@@ -9,6 +9,12 @@
   align-items: flex-start;
   border-radius: 4px;
   overflow: hidden;
+  :global {
+    .ant-btn {
+      border: none;
+      background: none;
+    }
+  }
 }
 
 .collectorContent {
@@ -25,7 +31,6 @@
   &.expanded {
     width: 220px;
     padding: 16px;
-
   }
 }
 
@@ -40,15 +45,14 @@
 }
 
 .item {
-  background: none;
-  border: none;
   text-align: left;
   padding: 8px;
   cursor: pointer;
   border-radius: 4px;
   display: flex;
   justify-content: space-between;
   transition: background-color 0.2s;
+  border: 1px solid #e1e2e8;
 
   &:hover {
     background-color: #f0f0f0;
@@ -80,7 +84,7 @@
   display: flex;
   flex-direction: column;
   width: 40px;
-  padding: 10px 4px 6px 0;
+  padding: 6px 4px 6px 2px;
   gap: 8px;
   align-items: flex-start;
   justify-content: center;
@@ -93,19 +97,31 @@
   &:hover {
     width: 80px;
   }
+
+  &.expanded {
+    width: 80px;
+  }
 }
 
 .iconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   border-radius: 4px;
   transition: background-color 0.2s;
+  font-size: 14px;
+
+  &:disabled {
+    cursor: not-allowed;
+    background: none;
+  }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
   }
 }
-
diff --git a/packages/editor/src/components/FloatingCollector/index.tsx b/packages/editor/src/components/FloatingCollector/index.tsx
@@ -1,102 +1,130 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './index.module.less';
-import { Badge, Button, Popconfirm } from 'antd';
+import { Badge, Button, Popconfirm, Tooltip } from 'antd';
 import { CloseCircleFilled, CloseCircleOutlined, DeleteOutlined, QuestionCircleFilled } from '@ant-design/icons';
-
-// modalList.push({
-//   id: createId(item.type),
-//   name: item.name,
-//   type: item.type,
-//   config,
-//   events,
-//   methods,
-//   elements,
-// });
-
-interface CollectorItem {
-  id: string;
-  name?: string;
-  type: string;
-  config?: any;
-  methods?: any;
-  events?: any;
-  elements?: any;
-}
+import { CollectorItem } from '@/packages/types';
 
 interface FloatingCollectorProps {
   modalList: CollectorItem[];
   drawerList: CollectorItem[];
   clickItem: (item: CollectorItem) => void;
+  closeItem: (item: CollectorItem) => void;
+  deleteItem: (targetId: string) => void;
 }
 
 const FloatingCollector = (props: FloatingCollectorProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const [currentItems, setCurrentItems] = useState<CollectorItem[]>([]);
-
+  const [currentType, setCurrentType] = useState<number>(1);
   const { modalList, drawerList } = props;
 
-  const handleTypeClick = useCallback((type: number) => {
-    setIsExpanded(true);
-    if (type === 1) {
+  useEffect(() => {
+    if (currentType === 1) {
       setCurrentItems(modalList);
-    } else if (type === 2) {
+    }
+    if (currentType === 2) {
       setCurrentItems(drawerList);
     }
-
+    if (modalList.length === 0 && drawerList.length === 0) {
+      setIsExpanded(false);
+    } else if (modalList.length > 0 && drawerList.length === 0) {
+      setCurrentItems(modalList);
+      setCurrentType(1);
+    } else if (modalList.length === 0 && drawerList.length > 0) {
+      setCurrentItems(drawerList);
+      setCurrentType(2);
+    }
   }, [modalList, drawerList]);
 
-  const handleItemClick = useCallback((item: CollectorItem) => {
-    setSelectedItem(item.id);
-    props.clickItem(item);
-  }, []);
+  const handleTypeClick = useCallback(
+    (type: number) => {
+      setCurrentType(type);
+      if (isExpanded && currentItems === (type === 1 ? modalList : drawerList)) {
+        // 如果已经展开并且当前是点击的同一种类型，则关闭
+        setIsExpanded(false);
+        setCurrentItems([]);
+      } else {
+        // 否则切换到新类型并展开
+        setIsExpanded(true);
+        setCurrentItems(type === 1 ? modalList : drawerList);
+      }
+    },
+    [isExpanded, modalList, drawerList, currentItems],
+  );
+
+  const handleItemClick = useCallback(
+    (item: CollectorItem, type: string) => {
+      setSelectedItem(item.id);
+      if (type === 'double') {
+        props.clickItem(item);
+        setIsExpanded(false);
+      }
+    },
+    [props],
+  );
 
   const handleClose = useCallback((item: CollectorItem) => {
-      setSelectedItem(null);
-  }, [currentItems]);
+    setSelectedItem(null);
+    props.closeItem(item);
+  }, []);
+
+  const handleDelete = useCallback((targetId: string) => {
+    setSelectedItem(null);
+    props.deleteItem(targetId);
+  }, []);
 
   return (
-    <div
-      className={styles.container}
-    >
-      <div className={`${styles.collectorContent} ${isExpanded ? styles.expanded : ''}`}>
-        <div className={styles.itemList}>
-          {currentItems.map((item) => (
-            <Button
-              key={item.id}
-              onClick={() => handleItemClick(item)}
-              className={`${styles.item} ${selectedItem === item.id ? styles.active : ''}`}
-            >
-              <span className={styles.title}>{item.name}</span>
-              <span className={styles.action}>
-                <CloseCircleOutlined onClick={(e) => {
-                  e.stopPropagation();
-                  handleClose(item);
-                }} />
-                <Popconfirm
-                  title="警告"
-                  description="将删除此项目及其关联项目"
-                  icon={<QuestionCircleFilled style={{ color: 'red' }} />}
+    <div className={styles.container}>
+      {/* 展开内容区域 */}
+      {isExpanded && (
+        <div className={`${styles.collectorContent} ${styles.expanded}`}>
+          <div className={styles.itemList}>
+            {currentItems.map((item) => (
+              <Tooltip title="单击选中，双击打开" placement="top">
+                <Button
+                  key={item.id}
+                  onClick={() => handleItemClick(item, 'single')}
+                  onDoubleClick={() => handleItemClick(item, 'double')}
+                  className={`${styles.item} ${selectedItem === item.id ? styles.active : ''}`}
                 >
-                  <DeleteOutlined style={{marginLeft: '5px'}} />
-                </Popconfirm>
-              </span>
-            </Button>
-          ))}
+                  <span className={styles.title}>{item.name}</span>
+                  <span className={styles.action}>
+                    <CloseCircleOutlined
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleClose(item);
+                      }}
+                    />
+                    <Popconfirm title="警告" description="将删除此项目及其关联项目" icon={<QuestionCircleFilled style={{ color: 'red' }} />}>
+                      <DeleteOutlined
+                        style={{ marginLeft: '5px' }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDelete(item.targetId);
+                        }}
+                      />
+                    </Popconfirm>
+                  </span>
+                </Button>
+              </Tooltip>
+            ))}
+          </div>
         </div>
-      </div>
-      <div className={styles.iconContainer}>
-        <Button className={styles.iconButton} onClick={()=> handleTypeClick(1)}>
-          <Badge count={modalList.length} size='small' color='#7d3fff'>
+      )}
+
+      <div className={`${styles.iconContainer} ${isExpanded ? styles.expanded : ''}`}>
+        <Button disabled={modalList.length === 0} className={styles.iconButton} onClick={() => handleTypeClick(1)}>
+          <Badge count={modalList.length} size="small" color="#7d3fff" showZero>
             <ModalIcon />
           </Badge>
-          <span style={{marginLeft: '5px'}}>弹窗</span>
+          <span style={{ marginLeft: '5px' }}>弹窗</span>
         </Button>
-        <Button className={styles.iconButton} onClick={()=> handleTypeClick(2)}>
-          <Badge count={drawerList.length}  size='small' color='#7d3fff'>
+        <Button disabled={drawerList.length === 0} className={styles.iconButton} onClick={() => handleTypeClick(2)}>
+          <Badge count={drawerList.length} size="small" color="#7d3fff" showZero>
             <DrawerIcon />
           </Badge>
-          <span style={{marginLeft: '5px'}}>抽屉</span>
+          <span style={{ marginLeft: '5px' }}>抽屉</span>
         </Button>
       </div>
     </div>
@@ -117,12 +145,4 @@ const DrawerIcon: React.FC = () => (
   </svg>
 );
 
-const NotificationIcon: React.FC = () => (
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" stroke="currentColor" strokeWidth="2" />
-    <path d="M8 9h8M8 13h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-  </svg>
-);
-
 export default FloatingCollector;
-
diff --git a/packages/editor/src/packages/FeedBack/Drawer/Drawer.tsx b/packages/editor/src/packages/FeedBack/Drawer/Drawer.tsx
@@ -80,9 +80,9 @@ const AntDrawer = forwardRef(({ id, type, config, elements, onClose, onAfterOpen
 
   return (
     <>
-      <div>
+      {/* <div>
         <Button onClick={() => setVisible(true)}>{config.props.title}</Button>
-      </div>
+      </div> */}
       <Drawer
         {...config.props}
         data-id={id}

diff --git a/packages/editor/src/packages/FeedBack/Modal/Modal.tsx b/packages/editor/src/packages/FeedBack/Modal/Modal.tsx
@@ -122,11 +122,11 @@ const AntdModal = forwardRef(({ id, type, config, elements, onLoad, onOk, onCanc
   return (
     <>
       {/* 虚拟一个按钮，来模拟弹框，生产模式下，需要删除 */}
-      {mode === 'edit' ? (
+      {/* {mode === 'edit' ? (
         <div>
           <Button onClick={() => setVisible(true)}>{config.props.title}</Button>
         </div>
-      ) : null}
+      ) : null} */}
       <Modal
         {...config.props}
         data-id={id}

diff --git a/packages/editor/src/packages/types/index.ts b/packages/editor/src/packages/types/index.ts
@@ -326,3 +326,28 @@ export interface SchemaType {
   // 渲染函数
   render?: (props?: any) => React.ReactNode;
 }
+
+// 针对弹窗和抽屉收集的封装
+export interface CollectorEvent {
+  id: string;
+  title: string;
+  type: string;
+  config: {
+    actionName: string;
+    actionType: string;
+    target: string;
+  };
+}
+
+// 针对弹窗和抽屉收集的封装
+export interface CollectorItem {
+  id: string;
+  targetId: string;
+  name: string;
+  type: string;
+  config: any;
+  events: {
+    open: CollectorEvent[];
+    close: CollectorEvent[];
+  };
+}