fix: 修复切换选中覆盖物名称不变的问题

src/editor/Catalog/index.tsx

@@ -63,6 +63,8 @@ const Catalog = () => {
   });
 
   return (
+    <>
+      <div className="pane-title">覆盖物</div>
       <div className="catalog-wrapper">
         <Collapse
           defaultActiveKey={["1", "2", "3", "4", "5"]}
@@ -85,6 +87,7 @@ const Catalog = () => {
           </Panel>
         </Collapse>
       </div>
+    </>
   );
 };
 

src/editor/Catalog/style.less

@@ -19,6 +19,6 @@
   background-color: #e5e6e7;
 }
 .catalog-wrapper{
-  height: 100%;
+  height: calc(100% - 36px);
   overflow-y: scroll;
 }

src/editor/Property/FineInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from "antd";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export type FineInputProps = {
   value: string | number;
@@ -7,7 +7,11 @@ export type FineInputProps = {
 };
 
 export const FineInput = (props: FineInputProps) => {
-  const [value, setValue] = useState(props.value);
+  const [value, setValue] = useState<string | number>("");
+
+  useEffect(() => {
+    setValue(props.value);
+  }, [props]);
 
   return (
     <Input

src/editor/Property/index.tsx

@@ -18,7 +18,12 @@ const { Option } = Select;
 const Property = () => {
   const selectedIds = useSelector(selectedIdsSelector);
   const { overlays } = useSelector(mapOptionsSelector);
-  if (!selectedIds?.length) return <></>;
+  if (!selectedIds?.length)
+    return (
+      <>
+        <div className="pane-title">覆盖物</div>
+      </>
+    );
   const [id] = selectedIds;
   const overlay = overlays.find((overlay) => overlay.id === id)!;
   const { lngLat = [0, 0] } = overlay;
@@ -69,6 +74,8 @@ const Property = () => {
   );
 
   return (
+    <>
+      <div className="pane-title">覆盖物</div>
       <div className="property-area">
         <Form size="small">
           <Form.Item label="名称">
@@ -103,6 +110,7 @@ const Property = () => {
           ) : null}
         </Form>
       </div>
+    </>
   );
 };
 

src/editor/index.less

@@ -66,6 +66,12 @@ body ::-webkit-scrollbar-thumb {
 body ::-webkit-scrollbar-corner {
   background-color: #eee;
 }
+.pane-title{
+  line-height: 24px;
+  padding:6px 12px;
+  background-color: #dbd8d8;
+  // color: #fff;
+}
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */

src/store/actions/index.ts

@@ -115,12 +115,17 @@ export class EditorAction {
   selectOverlay(id: string, reset = true) {
     const { selectedIds } = this.store.getState();
     if (selectedIds.indexOf(id) >= 0 && reset) {
+      if (reset) {
         this.mapEditor?.selectOverlays();
+        this.dispatch(StoreAction.selectOverlay());
       } else {
-      this.mapEditor?.selectOverlays([id]);
+        this.dispatch(StoreAction.selectOverlay(id));
       }
+    } else {
+      this.mapEditor?.selectOverlays([id]);
       this.dispatch(StoreAction.selectOverlay(id));
     }
+  }
 
   updateOverlay(props: Partial<IOverlay>) {
     this.dispatch(StoreAction.updateOverlayProps(props));