fix: 开始优化弹窗和抽屉编辑

JackySoft · Nov 24, 2024 · a23a182 · a23a182
1 parent ed5a698
commit a23a182
Show file tree

Hide file tree

Showing 3 changed files with 273 additions and 1 deletion.
diff --git a/packages/editor/src/components/FloatingCollector/index.module.less b/packages/editor/src/components/FloatingCollector/index.module.less
@@ -0,0 +1,111 @@
+.container {
+  position: absolute;
+  padding: 4px;
+  bottom: 30px;
+  left: 30px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.collectorContent {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  margin-bottom: 10px;
+  .title {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &.expanded {
+    width: 220px;
+    padding: 16px;
+
+  }
+}
+
+.itemList {
+  display: none;
+  flex-direction: column;
+  gap: 8px;
+
+  .expanded & {
+    display: flex;
+  }
+}
+
+.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;
+
+  &:hover {
+    background-color: #f0f0f0;
+    border: 1px dashed;
+  }
+
+  &.active {
+    color: #7d3fff;
+    border: 1px solid #7d3fff;
+    .action {
+      display: block;
+    }
+  }
+
+  .action {
+    display: none;
+  }
+}
+
+.relatedItems {
+  margin-top: 8px;
+  padding-left: 16px;
+  border-left: 2px solid #1890ff;
+  font-size: 0.9em;
+  color: #666;
+}
+
+.iconContainer {
+  display: flex;
+  flex-direction: column;
+  width: 40px;
+  padding: 10px 4px 6px 0;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: center;
+  background-color: #fff;
+  overflow: hidden;
+  border: 1px solid #e1e2e8;
+  border-radius: 4px;
+  transition: width 0.2s ease-out;
+
+  &:hover {
+    width: 80px;
+  }
+}
+
+.iconButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
diff --git a/packages/editor/src/components/FloatingCollector/index.tsx b/packages/editor/src/components/FloatingCollector/index.tsx
@@ -0,0 +1,128 @@
+import React, { useCallback, useState } from 'react';
+import styles from './index.module.less';
+import { Badge, Button, Popconfirm } 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;
+}
+
+interface FloatingCollectorProps {
+  modalList: CollectorItem[];
+  drawerList: CollectorItem[];
+  clickItem: (item: CollectorItem) => void;
+}
+
+const FloatingCollector = (props: FloatingCollectorProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const [currentItems, setCurrentItems] = useState<CollectorItem[]>([]);
+
+  const { modalList, drawerList } = props;
+
+  const handleTypeClick = useCallback((type: number) => {
+    setIsExpanded(true);
+    if (type === 1) {
+      setCurrentItems(modalList);
+    } else if (type === 2) {
+      setCurrentItems(drawerList);
+    }
+
+  }, [modalList, drawerList]);
+
+  const handleItemClick = useCallback((item: CollectorItem) => {
+    setSelectedItem(item.id);
+    props.clickItem(item);
+  }, []);
+
+  const handleClose = useCallback((item: CollectorItem) => {
+      setSelectedItem(null);
+  }, [currentItems]);
+
+  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' }} />}
+                >
+                  <DeleteOutlined style={{marginLeft: '5px'}} />
+                </Popconfirm>
+              </span>
+            </Button>
+          ))}
+        </div>
+      </div>
+      <div className={styles.iconContainer}>
+        <Button className={styles.iconButton} onClick={()=> handleTypeClick(1)}>
+          <Badge count={modalList.length} size='small' color='#7d3fff'>
+            <ModalIcon />
+          </Badge>
+          <span style={{marginLeft: '5px'}}>弹窗</span>
+        </Button>
+        <Button className={styles.iconButton} onClick={()=> handleTypeClick(2)}>
+          <Badge count={drawerList.length}  size='small' color='#7d3fff'>
+            <DrawerIcon />
+          </Badge>
+          <span style={{marginLeft: '5px'}}>抽屉</span>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const ModalIcon: 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" strokeLinecap="round" />
+    <path d="M9 4v16M15 4v16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 4" />
+  </svg>
+);
+
+const DrawerIcon: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 3h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" stroke="currentColor" strokeWidth="2" />
+    <path d="M15 3v18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+  </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/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -18,7 +18,8 @@ import { PageItem } from '@/api/pageMember';
 
 import CreatePage from '@/components/CreatePage';
 import './index.less';
-
+import FloatingCollector from '@/components/FloatingCollector';
+import { handleActionFlow } from '@/packages/utils/action';
 /**
  * 画布
  * 1. 从左侧拖拽组件到画布中
@@ -68,6 +69,8 @@ const Editor = () => {
   const createRef = useRef<{ open: (record?: PageItem) => void }>();
   const { id } = useParams();
 
+  const [modalList, setModalList] = useState<any[]>([]);
+
   useEffect(() => {
     if (!id) return;
     setLoaded(false);
@@ -129,6 +132,29 @@ const Editor = () => {
       if (monitor.didDrop()) return;
       // 生成默认配置
       const { config, events, methods = [], elements = [] }: any = (await getComponent(item.type + 'Config'))?.default || {};
+      if(item.type === 'Modal') {
+        console.log('Modal', config, events, methods, elements);
+        modalList.push({
+          id: createId(item.type),
+          name: item.name,
+          type: item.type,
+          config,
+          events: [
+            {
+              id: createId('Modal_event'),
+              title: '弹框选定点击事件',
+              type: 'normal',
+              config: {
+                actionName: '打开弹框',
+                actionType: 'openModal',
+                target: item.id
+              }
+            }
+          ],
+          methods,
+          elements,
+        });
+      }
       if (!checkComponentType(item.type, selectedElement?.id, selectedElement?.type, elementsMap)) {
         message.info('请把表单项放在Form容器内');
         return;
@@ -312,6 +338,11 @@ const Editor = () => {
     });
   };
 
+  // 浮动组件点击事件
+  const handleFloateItemClick = (item: any) => {
+    handleActionFlow(item.events, null);
+  };
+
   return (
     <div ref={drop} className="designer" onClick={handleClick}>
       <div className={`designer-bar ${mode === 'preview' ? 'hidden' : ''}`}>
@@ -373,6 +404,8 @@ const Editor = () => {
           });
         }}
       />
+      {/* <FloatingCollector /> */}
+      <FloatingCollector modalList={modalList} drawerList={modalList} clickItem={handleFloateItemClick} />
     </div>
   );
 };