diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/edit-nodes-edges/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/edit-nodes-edges/index.tsx
index e6910b1a..9bbd8c2a 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/edit-nodes-edges/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/edit-nodes-edges/index.tsx
@@ -20,6 +20,7 @@ type Prop = {
   currentGraphName: string;
   onRefreshSchema?: () => void;
   onSwitch?: (onShow: () => void, onClose: () => void) => void;
+  onVisible?: (visible: boolean) => void;
 };
 type EditColumnsType<T> = ColumnsType & {
   inputType?: string;
@@ -36,6 +37,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
   currentGraphName,
   onRefreshSchema,
   onSwitch,
+  onVisible,
 }) => {
   const [form] = Form.useForm();
   const {
@@ -62,18 +64,23 @@ export const EditNodesEdges: React.FC<Prop> = ({
   useEffect(() => {
     onSwitch?.(onShow, onClose);
   }, []);
+
+  useEffect(() => {
+    onVisible?.(visible);
+  }, [visible]);
+
   const propertyList = () => {
     const attrPropertyNames = map(
-      filter(attrList, (attr) => !attr.optional),
-      (item) => item.name
+      filter(attrList, attr => !attr.optional),
+      item => item.name,
     );
-    const indexPropertyNames = map(configList, (item) => item.propertyName);
+    const indexPropertyNames = map(configList, item => item.propertyName);
     return map(
       filter(
         xor(attrPropertyNames, indexPropertyNames),
-        (item) => item !== undefined
+        item => item !== undefined,
       ),
-      (item) => ({ label: item, value: item })
+      item => ({ label: item, value: item }),
     );
   };
   const operateEdit = (record: AttrData) => {
@@ -82,8 +89,8 @@ export const EditNodesEdges: React.FC<Prop> = ({
         <Button
           disabled={isPrimaryField(record.name) || false}
           onClick={() => {
-            updateState((draft) => {
-              draft.attrList = map(attrList, (item) => {
+            updateState(draft => {
+              draft.attrList = map(attrList, item => {
                 if (record.id === item.id) {
                   return { ...item, disabled: false };
                 }
@@ -130,12 +137,12 @@ export const EditNodesEdges: React.FC<Prop> = ({
         </Button>
         <Button
           onClick={() => {
-            updateState((draft) => {
+            updateState(draft => {
               if (record.disabled !== undefined) {
-                const list = map(attrList, (item) => {
+                const list = map(attrList, item => {
                   if (item.id === record.id) {
                     return {
-                      ...find(currentAttrList, (attr) => attr.id === record.id),
+                      ...find(currentAttrList, attr => attr.id === record.id),
                     };
                   } else {
                     return item;
@@ -144,7 +151,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
                 draft.attrList = list;
               } else {
                 draft.attrList = [
-                  ...filter(attrList, (item) => item.id !== record.id),
+                  ...filter(attrList, item => item.id !== record.id),
                 ];
               }
             });
@@ -169,9 +176,9 @@ export const EditNodesEdges: React.FC<Prop> = ({
         </Button>
         <Button
           onClick={() => {
-            updateState((draft) => {
+            updateState(draft => {
               draft.configList = [
-                ...configList.filter((item) => item.id !== record?.id),
+                ...configList.filter(item => item.id !== record?.id),
               ];
             });
           }}
@@ -214,7 +221,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
         return {
           inputType: EditType.SELECT,
           prop: {
-            options: map(data.nodes, (item) => ({
+            options: map(data.nodes, item => ({
               label: item.labelName,
               value: item.labelName,
             })),
@@ -231,7 +238,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
         return {
           inputType: EditType.SELECT,
           prop: {
-            options: map(data.nodes, (item) => ({
+            options: map(data.nodes, item => ({
               label: item.labelName,
               value: item.labelName,
             })),
@@ -420,7 +427,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
   const findLabelItem = (labelName: string) => {
     return find(
       type === 'node' ? data.nodes : data.edges,
-      (item) => item.labelName === labelName
+      item => item.labelName === labelName,
     );
   };
   const isPrimaryField = (name: string) => {
@@ -433,12 +440,12 @@ export const EditNodesEdges: React.FC<Prop> = ({
       labelType: type,
       propertyNames: [record.name],
     })
-      .then((res) => {
+      .then(res => {
         if (res.success) {
           message.success('属性删除成功');
-          updateState((draft) => {
+          updateState(draft => {
             draft.attrList = [
-              ...attrList.filter((item) => item.id !== record?.id),
+              ...attrList.filter(item => item.id !== record?.id),
             ];
           });
           onRefreshSchema?.();
@@ -446,7 +453,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('属性删除失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('属性删除失败' + res.errorMessage);
       });
   };
@@ -459,12 +466,12 @@ export const EditNodesEdges: React.FC<Prop> = ({
         { name: record.name, type: record.type, optional: record.optional },
       ],
     })
-      .then((res) => {
+      .then(res => {
         if (res.success) {
           message.success('属性修改成功');
-          updateState((draft) => {
+          updateState(draft => {
             draft.attrList = [
-              ...attrList.map((item) => {
+              ...attrList.map(item => {
                 if (item.id === record?.id) {
                   return { ...item, disabled: true };
                 } else {
@@ -478,7 +485,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('属性修改失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('属性修改失败' + res.errorMessage);
       });
   };
@@ -491,12 +498,12 @@ export const EditNodesEdges: React.FC<Prop> = ({
         { name: record.name, type: record.type, optional: record.optional },
       ],
     })
-      .then((res) => {
+      .then(res => {
         if (res.success) {
           message.success('属性添加成功');
-          updateState((draft) => {
+          updateState(draft => {
             draft.attrList = [
-              ...attrList.map((item) => {
+              ...attrList.map(item => {
                 if (item.id === record?.id) {
                   return { ...item, disabled: true };
                 } else {
@@ -510,7 +517,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('属性添加失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('属性添加失败' + res.errorMessage);
       });
   };
@@ -521,12 +528,12 @@ export const EditNodesEdges: React.FC<Prop> = ({
       labelName,
       isUnique: record.isUnique,
     })
-      .then((res) => {
+      .then(res => {
         if (res.success) {
           message.success('索引添加成功');
-          updateState((draft) => {
+          updateState(draft => {
             draft.configList = [
-              ...configList.map((item) => {
+              ...configList.map(item => {
                 if (item.id === record?.id) {
                   return { ...item, disabled: true };
                 } else {
@@ -540,7 +547,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('索引添加失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('索引添加失败' + res.errorMessage);
       });
   };
@@ -550,12 +557,12 @@ export const EditNodesEdges: React.FC<Prop> = ({
       graphName: currentGraphName,
       labelName,
     })
-      .then((res) => {
+      .then(res => {
         if (res.success) {
           message.success('索引删除成功');
-          updateState((draft) => {
+          updateState(draft => {
             draft.configList = [
-              ...configList.filter((item) => item.id !== record?.id),
+              ...configList.filter(item => item.id !== record?.id),
             ];
           });
           onRefreshSchema?.();
@@ -563,19 +570,19 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('索引删除失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('索引删除失败' + res.errorMessage);
       });
   };
   const addNodeAttr = () => {
-    updateState((draft) => {
+    updateState(draft => {
       const list = [...attrList];
       list.push({ id: uniqueId(`attr_`) });
       draft.attrList = [...list];
     });
   };
   const addNodeConfig = () => {
-    updateState((draft) => {
+    updateState(draft => {
       const list = [...configList];
       list.push({ id: uniqueId(`index_`), index: `#${configList.length + 1}` });
       draft.configList = [...list];
@@ -583,14 +590,14 @@ export const EditNodesEdges: React.FC<Prop> = ({
   };
   useEffect(() => {
     form.setFieldsValue({ name: labelName });
-    updateState((draft) => {
+    updateState(draft => {
       const newAttrList = map(
         findLabelItem(labelName)?.properties,
         (item, index) => ({
           ...item,
           id: uniqueId(`attr_`),
           disabled: true,
-        })
+        }),
       );
       draft.attrList = [...newAttrList];
       draft.currentAttrList = [...newAttrList];
@@ -604,11 +611,11 @@ export const EditNodesEdges: React.FC<Prop> = ({
             disabled: true,
             id: uniqueId(`index_`),
             disabled: true,
-          })
+          }),
         );
       } else {
         draft.startList = [
-          ...map(findLabelItem(labelName)?.edgeConstraints, (item) => ({
+          ...map(findLabelItem(labelName)?.edgeConstraints, item => ({
             source: item[0],
             target: item[1],
             id: uniqueId(`edge_`),
@@ -670,8 +677,8 @@ export const EditNodesEdges: React.FC<Prop> = ({
               columns={defaultColumns}
               dataSource={attrList}
               rowKey="id"
-              onChange={(newData) => {
-                updateState((draft) => {
+              onChange={newData => {
+                updateState(draft => {
                   draft.attrList = [...newData];
                 });
               }}
@@ -708,8 +715,8 @@ export const EditNodesEdges: React.FC<Prop> = ({
                 columns={nodeConfigColumns}
                 dataSource={configList}
                 rowKey="id"
-                onChange={(newData) => {
-                  updateState((draft) => {
+                onChange={newData => {
+                  updateState(draft => {
                     draft.configList = [...newData];
                   });
                 }}
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.tsx
index b51dccae..ee2a5216 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.tsx
@@ -476,7 +476,7 @@ export const GraphConstruct = (props: PluginPorps) => {
         <div
           className={styles[`${PUBLIC_PERFIX_CLASS}-construct-canvas-layout`]}
           style={{
-            right: visible ? 596 : 24,
+            right: visible ? 617 : 24,
           }}
         >
           <GraphCanvasTools />
@@ -503,6 +503,11 @@ export const GraphConstruct = (props: PluginPorps) => {
                   draft.onEditClose = onClose;
                 });
               }}
+              onVisible={visible => {
+                setState(draft => {
+                  draft.visible = visible;
+                });
+              }}
             />
           ) : (
             <AddNodesEdges
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.tsx
index 8fa8063a..8164c692 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.tsx
@@ -154,7 +154,7 @@ export const GraphQuery = (props: PluginPorps) => {
     },
   ];
   useEffect(() => {
-    updateState((draft) => {
+    updateState(draft => {
       if (isEmpty(getLocalData('TUGRAPH_STATEMENT_LISTS')[currentGraphName])) {
         draft.queryList = [
           {
@@ -169,9 +169,9 @@ export const GraphQuery = (props: PluginPorps) => {
         ];
       }
     });
-    onGetGraphSchema({ graphName: currentGraphName }).then((res) => {
+    onGetGraphSchema({ graphName: currentGraphName }).then(res => {
       if (res.success) {
-        updateState((draft) => {
+        updateState(draft => {
           draft.graphData = { ...res.data };
         });
       }
@@ -179,7 +179,7 @@ export const GraphQuery = (props: PluginPorps) => {
   }, []);
   useEffect(() => {
     if (queryList.length) {
-      updateState((draft) => {
+      updateState(draft => {
         draft.queryList = getLocalData('TUGRAPH_STATEMENT_LISTS')[
           currentGraphName
         ];
@@ -188,46 +188,46 @@ export const GraphQuery = (props: PluginPorps) => {
   }, [activeTab]);
   useEffect(() => {
     if (history.location.hash) {
-      updateState((draft) => {
+      updateState(draft => {
         draft.storedVisible = true;
       });
     }
   }, []);
   const onSplitPaneWidthChange = useCallback((size: number) => {
-    updateState((draft) => {
+    updateState(draft => {
       draft.editorWidth = size;
     });
   }, []);
   const onSplitPaneHeightChange = useCallback((size: number) => {
-    updateState((draft) => {
+    updateState(draft => {
       draft.editorHeight = size;
     });
   }, []);
   const onSplitPanePathHeightChange = useCallback((size: number) => {
-    updateState((draft) => {
+    updateState(draft => {
       draft.pathHeight = size;
     });
   }, []);
   const redirectUrl = props?.redirectPath;
   const onResultClose = useCallback(
     (id: string) => {
-      updateState((draft) => {
-        draft.resultData = [...filter(resultData, (item) => item.id !== id)];
+      updateState(draft => {
+        draft.resultData = [...filter(resultData, item => item.id !== id)];
       });
     },
-    [resultData]
+    [resultData],
   );
   const handleQuery = (
     limit: number,
     conditions: Array<{ property: string; value: string; operator: string }>,
-    queryParams: string
+    queryParams: string,
   ) => {
     if (activeTab === IQUIRE_LIST[0].key) {
       onStatementQuery({
         graphName: currentGraphName,
         script,
-      }).then((res) => {
-        updateState((draft) => {
+      }).then(res => {
+        updateState(draft => {
           draft.resultData = [...resultData, { ...res, id: uniqueId('id_') }];
         });
       });
@@ -238,8 +238,8 @@ export const GraphQuery = (props: PluginPorps) => {
         path: queryParams,
         limit,
         conditions,
-      }).then((res) => {
-        updateState((draft) => {
+      }).then(res => {
+        updateState(draft => {
           draft.resultData = [...resultData, { ...res, id: uniqueId('id_') }];
           draft.script = res.script;
         });
@@ -251,8 +251,8 @@ export const GraphQuery = (props: PluginPorps) => {
         limit,
         conditions,
         nodes: queryParams,
-      }).then((res) => {
-        updateState((draft) => {
+      }).then(res => {
+        updateState(draft => {
           draft.resultData = [...resultData, { ...res, id: uniqueId('id_') }];
           draft.script = res.script;
         });
@@ -269,7 +269,7 @@ export const GraphQuery = (props: PluginPorps) => {
           }}
         />
         <Select
-          onChange={(value) => {
+          onChange={value => {
             window.location.href = `${location.pathname}?graphName=${value}`;
           }}
           defaultValue={currentGraphName}
@@ -280,13 +280,13 @@ export const GraphQuery = (props: PluginPorps) => {
         defaultActiveKey="statement"
         centered
         items={IQUIRE_LIST}
-        onChange={(val) => {
-          updateState((draft) => {
+        onChange={val => {
+          updateState(draft => {
             draft.activeTab = val;
           });
         }}
       >
-        {map(IQUIRE_LIST, (item) => (
+        {map(IQUIRE_LIST, item => (
           <Tabs.TabPane tab={item.label} key={item.key} />
         ))}
       </Tabs>
@@ -301,6 +301,7 @@ export const GraphQuery = (props: PluginPorps) => {
         </Tooltip>
         <Popover
           title="存储过程"
+          placement="bottomRight"
           content={
             <>
               <Table
@@ -318,27 +319,28 @@ export const GraphQuery = (props: PluginPorps) => {
             </>
           }
         >
-          <Button
+          <img
+            src="https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*kLPaSLhIEmoAAAAAAAAAAAAADgOBAQ/original"
+            alt=""
+            style={{ width: 24, height: 24 }}
             onClick={() => {
               window.history.replaceState(
                 null,
                 null,
                 `${
                   history.location.pathname + history.location.search
-                }#procedure`
+                }#procedure`,
               );
-              updateState((draft) => {
+              updateState(draft => {
                 draft.storedVisible = true;
               });
             }}
-          >
-            存储过程
-          </Button>
+          />
         </Popover>
         <Button
           onClick={() => {
             history.push(
-              `${redirectUrl?.[1]?.path}?graphName=${currentGraphName}` ?? '/'
+              `${redirectUrl?.[1]?.path}?graphName=${currentGraphName}` ?? '/',
             );
           }}
         >
@@ -390,12 +392,12 @@ export const GraphQuery = (props: PluginPorps) => {
                     ...getLocalData(`TUGRAPH_STATEMENT_LISTS`),
                     [currentGraphName]: map(
                       getLocalData(`TUGRAPH_STATEMENT_LISTS`)[currentGraphName],
-                      (item) => {
+                      item => {
                         if (item.id === editorKey) {
                           return { ...item, script };
                         }
                         return item;
-                      }
+                      },
                     ),
                   });
                   message.success('保存成功');
@@ -409,12 +411,12 @@ export const GraphQuery = (props: PluginPorps) => {
                 type="text"
                 icon={<AppstoreAddOutlined />}
                 onClick={() => {
-                  updateState((draft) => {
+                  updateState(draft => {
                     draft.queryList = [
                       ...(isEmpty(
                         getLocalData('TUGRAPH_STATEMENT_LISTS')[
                           currentGraphName
-                        ]
+                        ],
                       )
                         ? []
                         : getLocalData('TUGRAPH_STATEMENT_LISTS')[
@@ -433,7 +435,7 @@ export const GraphQuery = (props: PluginPorps) => {
                       ...(isEmpty(
                         getLocalData('TUGRAPH_STATEMENT_LISTS')[
                           currentGraphName
-                        ]
+                        ],
                       )
                         ? getLocalData('TUGRAPH_STATEMENT_LISTS')[
                             currentGraphName
@@ -469,8 +471,8 @@ export const GraphQuery = (props: PluginPorps) => {
         查看图模型
         <Switch
           defaultChecked
-          onChange={(val) => {
-            updateState((draft) => {
+          onChange={val => {
+            updateState(draft => {
               draft.isListShow = val;
               if (val) {
                 draft.editorWidth = editorWidth;
@@ -489,15 +491,15 @@ export const GraphQuery = (props: PluginPorps) => {
           <StatementList
             list={queryList}
             garphName={currentGraphName}
-            onSelect={(activeId) => {
+            onSelect={activeId => {
               const value = find(
                 getLocalData('TUGRAPH_STATEMENT_LISTS')[currentGraphName],
-                (item) => item.id === activeId
+                item => item.id === activeId,
               )?.script;
               if (!isEmpty(editor)) {
                 editor?.editorInstance?.setValue?.(value);
               }
-              updateState((draft) => {
+              updateState(draft => {
                 draft.editorKey = activeId;
                 draft.script = value;
               });
@@ -521,7 +523,7 @@ export const GraphQuery = (props: PluginPorps) => {
                         styles[`${PUBLIC_PERFIX_CLASS}-right-center`],
                         styles[`${PUBLIC_PERFIX_CLASS}-split-pane`],
                       ],
-                      ' '
+                      ' ',
                     )}
                   >
                     <SplitPane
@@ -542,23 +544,23 @@ export const GraphQuery = (props: PluginPorps) => {
                         <GremlinEditor
                           gremlinId="test"
                           initValue={script}
-                          onInit={(initEditor) => {
-                            updateState((draft) => {
+                          onInit={initEditor => {
+                            updateState(draft => {
                               draft.editor = initEditor;
                               if (editorKey) {
                                 const value = find(
                                   getLocalData('TUGRAPH_STATEMENT_LISTS')[
                                     currentGraphName
                                   ],
-                                  (item) => item.id === editorKey
+                                  item => item.id === editorKey,
                                 )?.script;
                                 initEditor?.editorInstance?.setValue?.(value);
                                 draft.script = value;
                               }
                             });
                           }}
-                          onValueChange={(val) => {
-                            updateState((draft) => {
+                          onValueChange={val => {
+                            updateState(draft => {
                               draft.script = val;
                             });
                           }}
@@ -671,9 +673,9 @@ export const GraphQuery = (props: PluginPorps) => {
           window.history.replaceState(
             null,
             null,
-            `${history.location.pathname + history.location.search}`
+            `${history.location.pathname + history.location.search}`,
           );
-          updateState((draft) => {
+          updateState(draft => {
             draft.storedVisible = false;
           });
         }}