fix: 优化组件大纲

JackySoft · Sep 22, 2024 · fe49a68 · fe49a68
1 parent e10a8cf
commit fe49a68
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/packages/editor/src/layout/components/Menu/OutlinePanel.tsx b/packages/editor/src/layout/components/Menu/OutlinePanel.tsx
@@ -1,17 +1,21 @@
-import { usePageStore } from '@/stores/pageStore';
-import { DownOutlined } from '@ant-design/icons';
+import { memo, useEffect, useState } from 'react';
 import { Tree, Row } from 'antd';
-import { useState } from 'react';
-
+import { DownOutlined } from '@ant-design/icons';
+import { usePageStore } from '@/stores/pageStore';
+import { useShallow } from 'zustand/react/shallow';
+import style from './index.module.less';
 /**
  * 大纲
  */
-const OutlinePanel = () => {
-  const { pageName, elements, setSelectedElement } = usePageStore((state) => ({
-    pageName: state.page.pageName,
-    elements: state.page.elements,
-    setSelectedElement: state.setSelectedElement,
-  }));
+const OutlinePanel = memo(() => {
+  const { pageName, elements, selectedEl, setSelectedElement } = usePageStore(
+    useShallow((state) => ({
+      pageName: state.page.pageName,
+      elements: state.page.elements,
+      selectedEl: state.selectedElement,
+      setSelectedElement: state.setSelectedElement,
+    })),
+  );
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
 
   const treeData: any = [
@@ -21,6 +25,14 @@ const OutlinePanel = () => {
       elements,
     },
   ];
+
+  useEffect(() => {
+    if (selectedEl) {
+      setSelectedKeys([selectedEl.id]);
+    } else {
+      setSelectedKeys([]);
+    }
+  }, [selectedEl]);
   const handleSelect = (selectedKeys: any, { node }: any) => {
     setSelectedKeys(selectedKeys);
     if (selectedKeys.length > 0) {
@@ -34,7 +46,7 @@ const OutlinePanel = () => {
   };
 
   return (
-    <Row style={{ paddingRight: '24px', height: 'calc(100vh - 110px)', overflowY: 'auto' }}>
+    <Row className={style.outlinePanel}>
       <Tree
         showLine
         defaultExpandAll
@@ -46,6 +58,6 @@ const OutlinePanel = () => {
       />
     </Row>
   );
-};
+});
 
 export default OutlinePanel;
diff --git a/packages/editor/src/layout/components/Menu/index.module.less b/packages/editor/src/layout/components/Menu/index.module.less
@@ -20,3 +20,15 @@
     }
   }
 }
+// 组件大纲
+.outlinePanel {
+  padding-right: 24px;
+  height: calc(100vh - 110px);
+  overflow-y: auto;
+  :global {
+    .ant-tree .ant-tree-node-selected {
+      background-color: #9d5cff;
+      color: #fff;
+    }
+  }
+}
diff --git a/packages/editor/src/packages/Map/BMap/Schema.ts b/packages/editor/src/packages/Map/BMap/Schema.ts
@@ -9,6 +9,10 @@ export default {
       type: 'Title',
       label: '基础配置',
       name: 'basic',
+      link: {
+        url: 'https://api.map.baidu.com/lbsapi/getpoint/index.html',
+        label: '坐标拾取',
+      },
     },
     {
       type: 'Input',
@@ -107,15 +111,6 @@ export default {
       label: '显示覆盖物',
       name: 'showOverlay',
     },
-    {
-      type: 'Title',
-      label: '覆盖物',
-      name: 'overlay',
-      link: {
-        url: 'https://api.map.baidu.com/lbsapi/getpoint/index.html',
-        label: '坐标拾取',
-      },
-    },
   ],
   config: {
     // 组件默认属性值