fix: 修复问题

JackySoft · Nov 5, 2024 · 31ded9f · 31ded9f
1 parent 8579f90
commit 31ded9f
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 23 deletions.
diff --git a/packages/editor/src/components/VariableBind/VariableSelect.tsx b/packages/editor/src/components/VariableBind/VariableSelect.tsx
@@ -1,6 +1,6 @@
 import { Button, Collapse, Form, Modal, Popover, Tree } from 'antd';
 import type { CollapseProps } from 'antd';
-import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
 import { DownOutlined, NotificationOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { usePageStore } from '@/stores/pageStore';
 import VsEditor from '../VsEditor';
@@ -27,11 +27,11 @@ const SelectVariableModal = ({ onSelect }: { onSelect: (record: any) => void },
   const getFormAndTable = useCallback(() => {
     const list: Array<{ id: string; name: string; elements: any[] }> = [];
     Object.keys(elementsMap).map((id) => {
-      if (id.startsWith('SearchForm_') || id.startsWith('Form_') || id.startsWith('MarsTable_')) {
+      if (id.startsWith('SearchForm_') || id.startsWith('Form_') || id.startsWith('GridForm_') || id.startsWith('MarsTable_')) {
         const { element }: any = getElement(cloneDeep(elements), id);
         if (!element) return;
         element.elements?.map((item: any) => {
-          const formItem = elementsMap[item.id].config.props.formItem;
+          const formItem = elementsMap[item.id]?.config.props.formItem;
           if (formItem) {
             item.name = `${formItem.label}(${formItem.name})`;
           } else {
@@ -46,7 +46,7 @@ const SelectVariableModal = ({ onSelect }: { onSelect: (record: any) => void },
       }
     });
     return list;
-  }, [elementsMap]);
+  }, [elementsMap, elements]);
 
   // 定义树形结构
   const treeData: any = [
@@ -293,4 +293,4 @@ const SelectVariableModal = ({ onSelect }: { onSelect: (record: any) => void },
   );
 };
 
-export default forwardRef(SelectVariableModal);
+export default memo(forwardRef(SelectVariableModal));
diff --git a/packages/editor/src/layout/components/Menu/OutlinePanel.tsx b/packages/editor/src/layout/components/Menu/OutlinePanel.tsx
@@ -79,26 +79,30 @@ const OutlinePanel = memo(() => {
       name,
       elements: dragChildren,
     };
+    let parentId = null;
     // 移动到组件里面，添加为子组件
     if (!info.dropToGap) {
       if (dropKey == 'page') {
         list.unshift(dropItem);
       } else {
         const { element } = getElement(list, dropKey);
         if (element) {
+          parentId = dropKey;
           element.elements = element.elements || [];
-          element.elements.unshift(dropItem);
+          element.elements.unshift({ ...dropItem, parentId: dropKey });
         }
       }
     } else {
       const { index, elements } = getElement(list, dropKey) || { item: {}, index: 0 };
+      parentId = elements[index].parentId;
       if (dropPosition === -1) {
-        elements?.splice(index, 0, dropItem);
+        elements?.splice(index, 0, { ...dropItem, parentId });
       } else {
-        elements?.splice(index + 1, 0, dropItem);
+        elements?.splice(index + 1, 0, { ...dropItem, parentId });
       }
     }
-    dragSortElements(list);
+    dragSortElements({ id: dragKey, list, parentId });
+    setSelectedKeys([]);
   };
 
   return (

diff --git a/packages/editor/src/packages/Scene/GridForm/GridForm.tsx b/packages/editor/src/packages/Scene/GridForm/GridForm.tsx
@@ -38,6 +38,7 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C
   const [isExpand, setIsExpand] = useState(true);
   const [visible, setVisible] = useState(true);
   const [len, setlen] = useState(0);
+  const [minWidth, setMinWidth] = useState(200);
   const [initialValues, setInitialValues] = useState({});
   const formRef = useRef<HTMLDivElement>(null);
   const formItemRef = useRef<HTMLDivElement>(null);
@@ -142,13 +143,15 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C
     const subEl = formItemRef.current?.getBoundingClientRect();
     if (!parentEl || !subEl) return;
     // 计算可以放入的个数
-    const count = Math.floor(parentEl.width / subEl.width);
+    const count = config.props.cols;
+    const minWidth = Math.floor(parentEl.width / count);
+    setMinWidth(minWidth);
     if (!isExpand) {
       setlen(count);
     } else {
       setlen(elements.length + 1);
     }
-  }, [elements, isExpand]);
+  }, [elements, isExpand, config.props.cols]);
 
   useEffect(() => {
     if (formRef.current) {
@@ -185,13 +188,13 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C
         <Form
           form={form}
           style={config.style}
-          {...omit(config.props, 'minWidth')}
+          {...omit(config.props, 'cols')}
           initialValues={initialValues}
           onValuesChange={handleValuesChange}
           data-id={id}
           data-type={type}
         >
-          <DivWrapper $len={len} $minWidth={config.props.minWidth} ref={formRef}>
+          <DivWrapper $len={len} $minWidth={minWidth} ref={formRef}>
             {elements.length ? (
               <MarsRender elements={elements} />
             ) : (

diff --git a/packages/editor/src/packages/Scene/GridForm/Schema.tsx b/packages/editor/src/packages/Scene/GridForm/Schema.tsx
@@ -52,8 +52,8 @@ export default {
     },
     {
       type: 'InputNumber',
-      label: '最小宽度',
-      name: ['minWidth'],
+      label: '每行几列',
+      name: ['cols'],
     },
     {
       type: 'Title',

diff --git a/packages/editor/src/pages/welcome/Welcome.tsx b/packages/editor/src/pages/welcome/Welcome.tsx
@@ -62,8 +62,8 @@ export default function Welcome() {
           <h1 className={style.title}>Marsview 低代码搭建</h1>
           <p className={style.desc}>让搭建更简单，让开发更高效</p>
           <div className={style.count}>
-            服务 <CountUp end={1000} duration={3} />+ 项目，
-            <CountUp end={2000} duration={3} />+ 页面
+            服务 <CountUp end={2000} duration={3} />+ 项目，
+            <CountUp end={2500} duration={3} />+ 页面
           </div>
           <div className={style.btnGroup}>
             <Button type="primary" ghost size="large" onClick={openDoc}>

diff --git a/packages/editor/src/stores/pageStore.ts b/packages/editor/src/stores/pageStore.ts
@@ -407,10 +407,11 @@ export const usePageStore = create<PageState & PageAction>((set) => ({
     );
   },
   // 组件大纲拖拽排序
-  dragSortElements(payload: any) {
+  dragSortElements({ id, list, parentId }: any) {
     set(
       produce((state) => {
-        state.page.elements = payload;
+        state.page.elements = list;
+        state.page.elementsMap[id].parentId = parentId;
       }),
     );
   },

diff --git a/packages/materials/Scene/GridForm/GridForm.tsx b/packages/materials/Scene/GridForm/GridForm.tsx
@@ -36,6 +36,7 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C
   const [isExpand, setIsExpand] = useState(true);
   const [visible, setVisible] = useState(true);
   const [len, setlen] = useState(0);
+  const [minWidth, setMinWidth] = useState(200);
   const [initialValues, setInitialValues] = useState({});
   const formRef = useRef<HTMLDivElement>(null);
   const formItemRef = useRef<HTMLDivElement>(null);
@@ -114,13 +115,15 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C
     const subEl = formItemRef.current?.getBoundingClientRect();
     if (!parentEl || !subEl) return;
     // 计算可以放入的个数
-    const count = Math.floor(parentEl.width / subEl.width);
+    const count = config.props.cols;
+    const minWidth = Math.floor(parentEl.width / count);
+    setMinWidth(minWidth);
     if (!isExpand) {
       setlen(count);
     } else {
       setlen(elements.length + 1);
     }
-  }, [elements, isExpand]);
+  }, [elements, isExpand, config.props.cols]);
 
   // 展开收起
   const toggleExpand = () => {
@@ -150,13 +153,13 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C
         <Form
           form={form}
           style={config.style}
-          {...omit(config.props, 'minWidth')}
+          {...omit(config.props, 'cols')}
           initialValues={initialValues}
           data-id={id}
           data-type={type}
           onValuesChange={handleValuesChange}
         >
-          <DivWrapper $len={len} $minWidth={config.props.minWidth} ref={formRef}>
+          <DivWrapper $len={len} $minWidth={minWidth} ref={formRef}>
             {elements.length ? (
               <MarsRender elements={elements} />
             ) : (