diff --git a/client/package.json b/client/package.json
index 982aee03..37948056 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,7 +19,48 @@
   },
   "resolutions": {
     "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0"
+    "@types/react-dom": "^17.0.0",
+    "umzug": "3.1.1",
+    "tsparticles-engine": "2.9.3",
+    "tsparticles-move-base": "2.9.3",
+    "tsparticles-shape-circle": "2.9.3",
+    "tsparticles-updater-color": "2.9.3",
+    "tsparticles-updater-opacity": "2.9.3",
+    "tsparticles-updater-out-modes": "2.9.3",
+    "tsparticles-updater-size": "2.9.3",
+    "tsparticles-interaction-external-trail": "2.9.3",
+    "tsparticles-plugin-absorbers": "2.9.3",
+    "tsparticles-plugin-emitters": "2.9.3",
+    "tsparticles-slim": "2.9.3",
+    "tsparticles-updater-destroy": "2.9.3",
+    "tsparticles-updater-roll": "2.9.3",
+    "tsparticles-updater-tilt": "2.9.3",
+    "tsparticles-updater-twinkle": "2.9.3",
+    "tsparticles-updater-wobble": "2.9.3",
+    "tsparticles-interaction-external-attract": "2.9.3",
+    "tsparticles-interaction-external-bounce": "2.9.3",
+    "tsparticles-interaction-external-bubble": "2.9.3",
+    "tsparticles-interaction-external-connect": "2.9.3",
+    "tsparticles-interaction-external-grab": "2.9.3",
+    "tsparticles-interaction-external-pause": "2.9.3",
+    "tsparticles-interaction-external-push": "2.9.3",
+    "tsparticles-interaction-external-remove": "2.9.3",
+    "tsparticles-interaction-external-repulse": "2.9.3",
+    "tsparticles-interaction-external-slow": "2.9.3",
+    "tsparticles-interaction-particles-attract": "2.9.3",
+    "tsparticles-interaction-particles-collisions": "2.9.3",
+    "tsparticles-interaction-particles-links": "2.9.3",
+    "tsparticles-move-parallax": "2.9.3",
+    "tsparticles-particles.js": "2.9.3",
+    "tsparticles-plugin-easing-quad": "2.9.3",
+    "tsparticles-shape-image": "2.9.3",
+    "tsparticles-shape-line": "2.9.3",
+    "tsparticles-shape-polygon": "2.9.3",
+    "tsparticles-shape-square": "2.9.3",
+    "tsparticles-shape-star": "2.9.3",
+    "tsparticles-shape-text": "2.9.3",
+    "tsparticles-updater-life": "2.9.3",
+    "tsparticles-updater-stroke-color": "2.9.3"
   },
   "dependencies": {
     "@tugraph/openpiece-cli": "0.0.6",
diff --git a/client/packages/app/client/.umirc.ts b/client/packages/app/client/.umirc.ts
index a100fd83..725ea094 100644
--- a/client/packages/app/client/.umirc.ts
+++ b/client/packages/app/client/.umirc.ts
@@ -8,7 +8,7 @@ const umiConfig = getUmiConfig();
 
 process.env.MFSU_AD = 'none';
 
-const ANTD_VERSION = '4.23.5';
+const ANTD_VERSION = '4.24.0';
 const GI_SDK_APP_VERSION = '1.2.0';
 
 export default defineConfig({
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.module.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.module.less
index a2665c61..128b78ba 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.module.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.module.less
@@ -17,6 +17,14 @@
         overflow: hidden;
       }
     }
+    .ant-table-cell {
+      font-weight: 400;
+      font-size: 14px;
+      color: #6a6b71;
+    }
+    .ant-form-item-required {
+      color: #363740;
+    }
   }
   &-content {
     padding: 0 24px 24px;
@@ -41,6 +49,12 @@
   }
   &-addbtn {
     margin: 8px 0 10px 0;
+    &:hover {
+      border: 1px dashed #1650ff;
+    }
+  }
+  &-name:focus {
+    border: 1px solid #1650ff;
   }
   &-attr {
     margin-bottom: 16px;
@@ -50,4 +64,7 @@
     font-size: 14px;
     color: rgba(54, 55, 64, 1);
   }
+  &-attributes {
+    background-color: #1650ff;
+  }
 }
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.tsx
index 4a046ca2..fbb4fa77 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/add-nodes-edges/index.tsx
@@ -17,6 +17,7 @@ type Prop = {
   data?: any;
   onFinish?: (value?: any) => void;
   onSwitch?: (onShow: () => void, onClose: () => void) => void;
+  onVisible?: (visible: boolean) => void;
 };
 interface EditColumnsType<T> extends ColumnsType<T> {
   editorConfig: {
@@ -33,6 +34,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
   data = [],
   onFinish,
   onSwitch,
+  onVisible,
 }) => {
   const [form] = Form.useForm();
   const { visible, onShow, onClose } = useVisible({ defaultVisible: true });
@@ -50,18 +52,22 @@ export const AddNodesEdges: 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 addButton = (handleAdd?: () => void, text: string = '添加属性') => {
@@ -87,7 +93,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
         return {
           inputType: EditType.SELECT,
           prop: {
-            options: map(data.nodes, (item) => ({
+            options: map(data.nodes, item => ({
               label: item.labelName,
               value: item.labelName,
             })),
@@ -104,7 +110,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
         return {
           inputType: EditType.SELECT,
           prop: {
-            options: map(data.nodes, (item) => ({
+            options: map(data.nodes, item => ({
               label: item.labelName,
               value: item.labelName,
             })),
@@ -120,9 +126,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
         <Popconfirm
           title="确定要删除吗？"
           onConfirm={() => {
-            updateState((draft) => {
+            updateState(draft => {
               draft.startList = [
-                ...startList.filter((item) => item.id !== record?.id),
+                ...startList.filter(item => item.id !== record?.id),
               ];
             });
           }}
@@ -194,9 +200,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
         <Popconfirm
           title="确定要删除吗？"
           onConfirm={() => {
-            updateState((draft) => {
+            updateState(draft => {
               draft.attrList = [
-                ...attrList.filter((item) => item.id !== record?.id),
+                ...attrList.filter(item => item.id !== record?.id),
               ];
             });
           }}
@@ -294,9 +300,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
         <Popconfirm
           title="确定要删除吗？"
           onConfirm={() => {
-            updateState((draft) => {
+            updateState(draft => {
               draft.configList = [
-                ...configList.filter((item) => item.id !== record?.id),
+                ...configList.filter(item => item.id !== record?.id),
               ];
             });
           }}
@@ -309,14 +315,14 @@ export const AddNodesEdges: React.FC<Prop> = ({
     },
   ];
   const addNodeAttr = () => {
-    updateState((draft) => {
+    updateState(draft => {
       const list = [...attrList];
       list.push({ id: attrList.length + 1 });
       draft.attrList = [...list];
     });
   };
   const addNodeConfig = () => {
-    updateState((draft) => {
+    updateState(draft => {
       const list = [...configList];
       list.push({
         id: configList.length + 1,
@@ -326,7 +332,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
     });
   };
   const addEdge = () => {
-    updateState((draft) => {
+    updateState(draft => {
       const list = [...startList];
       list.push({ id: `${startList.length + 1}` });
       draft.startList = [...list];
@@ -347,7 +353,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
             onClick={() => {
               onClose();
               form.resetFields();
-              updateState((draft) => {
+              updateState(draft => {
                 draft.startList = [];
                 draft.configList = [];
                 draft.attrList = [];
@@ -359,7 +365,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
           <Button
             onClick={() => {
               const isEdgeRepeat =
-                uniq(map(startList, (item) => `${item.source}_${item.target}`))
+                uniq(map(startList, item => `${item.source}_${item.target}`))
                   .length === startList.length;
               if (!isEdgeRepeat) {
                 return message.error('两条边的起点和终点不能相同');
@@ -375,7 +381,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
                   },
                   indexs: configList,
                   properties: attrList,
-                  edgeConstraints: map(startList, (item) => {
+                  edgeConstraints: map(startList, item => {
                     return [item.source, item.target];
                   }),
                 });
@@ -391,7 +397,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
         <div className={styles[`${PUBLIC_PERFIX_CLASS}-container-header`]}>
           <span> 添加{`${isNode ? '点' : '边'}`}类型</span>
           <div>
-            命令行建模
+            <span style={{ marginRight: 4 }}>命令行建模</span>
             <a href="https://tugraph.antgroup.com/doc" target="_blank">
               参见文档
             </a>
@@ -409,12 +415,12 @@ export const AddNodesEdges: React.FC<Prop> = ({
                     var reg = new RegExp('^[a-zA-Z0-9_\u4e00-\u9fa5]+$');
                     if (!value) {
                       return Promise.reject(
-                        `请填写${isNode ? '点' : '边'}类型名称！`
+                        `请填写${isNode ? '点' : '边'}类型名称！`,
                       );
                     }
                     if (!reg.test(value)) {
                       return Promise.reject(
-                        '名称由中文、字母、数字、下划线组成。'
+                        '名称由中文、字母、数字、下划线组成。',
                       );
                     } else {
                       return Promise.resolve();
@@ -426,6 +432,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
               <Input
                 autoComplete="off"
                 placeholder={`请输入${isNode ? '点' : '边'}类型名称`}
+                className={styles[`${PUBLIC_PERFIX_CLASS}-container-name`]}
               />
             </Form.Item>
           </Form>
@@ -434,11 +441,13 @@ export const AddNodesEdges: React.FC<Prop> = ({
               属性列表
             </p>
             <EditTable
+              // className={styles[`${PUBLIC_PERFIX_CLASS}-container-attributes`]}
+              // style={{ background: 'red' }}
               columns={defaultColumns}
               dataSource={attrList}
               rowKey="id"
-              onChange={(newData) => {
-                updateState((draft) => {
+              onChange={newData => {
+                updateState(draft => {
                   draft.attrList = [...(newData || [])];
                 });
               }}
@@ -460,9 +469,9 @@ export const AddNodesEdges: React.FC<Prop> = ({
                 rowKey="id"
                 bordered
                 pagination={false}
-                onChange={(newData) => {
-                  updateState((draft) => {
-                    draft.startList = map([...newData], (item) => ({
+                onChange={newData => {
+                  updateState(draft => {
+                    draft.startList = map([...newData], item => ({
                       ...item,
                       label: form.getFieldValue('name'),
                       style: { label: { value: form.getFieldValue('name') } },
@@ -485,8 +494,8 @@ export const AddNodesEdges: 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/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/file-uploader/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/file-uploader/index.tsx
index c5cfa3a1..9ebd6783 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/file-uploader/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/file-uploader/index.tsx
@@ -115,7 +115,7 @@ export const FileUploader = (props: FileUploaderProps) => {
       {type === 'drop' ? (
         <Dragger {...uploadProps}>
           <p className="ant-upload-drag-icon">
-            <InboxOutlined />
+            <InboxOutlined style={{ color: '#1650FF' }} />
           </p>
           <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
           <p className="ant-upload-hint">您可以通过 CSV 文件导入数据</p>
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.module.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.module.less
index fa74c2ba..e8c5038d 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.module.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/index.module.less
@@ -13,7 +13,7 @@
     align-items: center;
     background-color: #fafafa;
     margin: 0 -20px;
-    padding: 0 20px;
+    padding: 0 24px;
     .@{perfix-cls}-headerLeft {
       width: 185px;
       :global {
@@ -84,7 +84,7 @@
     box-shadow: 0 1px 0 0 #f2f2f2;
     border: 1px solid #fafafa;
     margin: 0 -20px;
-    padding: 0 20px;
+    padding: 0 16px;
     &-item {
       color: #6a6b71;
       font-weight: 400;
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 697e4699..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
@@ -67,6 +67,7 @@ export const GraphConstruct = (props: PluginPorps) => {
     onEditClose: () => void;
     onAddShow: () => void;
     onAddClose: () => void;
+    visible: boolean;
     onImportShow: () => void;
     onImportClose: () => void;
     isModelOpen: boolean;
@@ -99,6 +100,7 @@ export const GraphConstruct = (props: PluginPorps) => {
     onEditClose: () => {},
     onAddShow: () => {},
     onAddClose: () => {},
+    visible: false,
     onImportShow: () => {},
     onImportClose: () => {},
     isModelOpen: false,
@@ -126,21 +128,22 @@ export const GraphConstruct = (props: PluginPorps) => {
     isModelOpen,
     override,
     schema,
+    visible,
   } = state;
 
   const { onGetGraphSchema, onCreateLabelSchema, onDeleteLabelSchema } =
     useSchema();
   const getGraphCanvasContextValue = useCallback((contextValue: any) => {
-    setState((draft) => {
+    setState(draft => {
       if (contextValue) {
         draft.graphCanvasContextValue = contextValue;
       }
     });
   }, []);
   const getGraphSchema = (graphName: string) => {
-    onGetGraphSchema({ graphName }).then((res) => {
+    onGetGraphSchema({ graphName }).then(res => {
       if (res.success) {
-        setState((draft) => {
+        setState(draft => {
           draft.data = res.data;
         });
       }
@@ -163,11 +166,11 @@ export const GraphConstruct = (props: PluginPorps) => {
   useEffect(() => {
     if (data.nodes?.length || data.edges?.length) {
       onAddClose?.();
-      setState((draft) => {
+      setState(draft => {
         draft.activeBtnType = '';
       });
     } else {
-      setState((draft) => {
+      setState(draft => {
         draft.activeBtnType = 'node';
       });
     }
@@ -176,17 +179,17 @@ export const GraphConstruct = (props: PluginPorps) => {
   const onLayoutChange = useCallback(
     (layout: Layout) => {
       if (data.edges.length || data.nodes.length) {
-        setState((draft) => {
+        setState(draft => {
           draft.layouting = true;
         });
       }
       setTimeout(() => {
-        setState((draft) => {
+        setState(draft => {
           draft.currentLayout = layout;
         });
       });
     },
-    [graphCanvasContextValue]
+    [graphCanvasContextValue],
   );
   const dealEdges = (edges: Array<any>) => {
     return Utils.processEdges([...edges], { poly: 50, loop: 10 });
@@ -199,7 +202,7 @@ export const GraphConstruct = (props: PluginPorps) => {
       graphName: currentGraphName,
       labelType,
       labelName: newSchema.labelName,
-      properties: newSchema.properties.map((item) => ({
+      properties: newSchema.properties.map(item => ({
         name: item.name,
         type: item.type,
         optional: item.optional,
@@ -207,15 +210,14 @@ export const GraphConstruct = (props: PluginPorps) => {
     } as LabelSchema;
     if (labelType === 'node') {
       if (
-        filter(newSchema.indexs, (item) => item.primaryField === true).length >
-        1
+        filter(newSchema.indexs, item => item.primaryField === true).length > 1
       ) {
         return message.error('主键必须唯一');
       }
       (params.primaryField = newSchema.indexs.find(
-        (item) => item.primaryField === true
+        item => item.primaryField === true,
       )?.propertyName),
-        (params.indexs = newSchema.indexs.map((item) => ({
+        (params.indexs = newSchema.indexs.map(item => ({
           propertyName: item?.propertyName,
           isUnique: item?.isUnique,
           labelName: newSchema.labelName,
@@ -227,7 +229,7 @@ export const GraphConstruct = (props: PluginPorps) => {
       return message.error('请设置主键');
     }
 
-    onCreateLabelSchema(params).then((res) => {
+    onCreateLabelSchema(params).then(res => {
       if (res.success) {
         message.success('创建成功');
         window.location.reload();
@@ -246,11 +248,12 @@ export const GraphConstruct = (props: PluginPorps) => {
           }}
         />
         <Select
-          onChange={(value) => {
+          onChange={value => {
             window.location.href = `${location.pathname}?graphName=${value}`;
           }}
           defaultValue={currentGraphName}
           options={graphListOptions}
+          style={{ fontSize: 16 }}
         />
       </div>
       <Steps
@@ -266,7 +269,7 @@ export const GraphConstruct = (props: PluginPorps) => {
           style={{ marginRight: '8px' }}
           onClick={() => {
             history.push(
-              `${redirectPath?.[1]?.path}?graphName=${currentGraphName}` ?? '/'
+              `${redirectPath?.[1]?.path}?graphName=${currentGraphName}` ?? '/',
             );
           }}
         >
@@ -275,8 +278,9 @@ export const GraphConstruct = (props: PluginPorps) => {
         {currentStep === 0 ? (
           <Button
             disabled={isEmpty(data.edges) && isEmpty(data.nodes)}
+            type="primary"
             onClick={() => {
-              setState((draft) => {
+              setState(draft => {
                 draft.currentStep += 1;
               });
             }}
@@ -286,7 +290,7 @@ export const GraphConstruct = (props: PluginPorps) => {
         ) : (
           <Button
             onClick={() => {
-              setState((draft) => {
+              setState(draft => {
                 draft.currentStep -= 1;
               });
             }}
@@ -299,7 +303,7 @@ export const GraphConstruct = (props: PluginPorps) => {
   );
   const operate = (
     <div className={styles[`${PUBLIC_PERFIX_CLASS}-operate`]}>
-      {GRAPH_OPERATE.map((item) => (
+      {GRAPH_OPERATE.map(item => (
         <div
           key={item.lable}
           className={join(
@@ -309,10 +313,10 @@ export const GraphConstruct = (props: PluginPorps) => {
                 ? styles[`${PUBLIC_PERFIX_CLASS}-operate-item-active`]
                 : '',
             ],
-            ' '
+            ' ',
           )}
           onClick={() => {
-            setState((draft) => {
+            setState(draft => {
               if (item.value === 'node' || item.value === 'edge') {
                 onAddShow();
                 draft.labelName = '';
@@ -325,7 +329,7 @@ export const GraphConstruct = (props: PluginPorps) => {
               if (item.value === 'export') {
                 downloadFile(
                   JSON.stringify(schemaTransform(data)),
-                  `${currentGraphName}.json`
+                  `${currentGraphName}.json`,
                 );
                 message.success('模型导出成功');
               }
@@ -342,15 +346,15 @@ export const GraphConstruct = (props: PluginPorps) => {
     </div>
   );
   useEffect(() => {
-    graphCanvasContextValue.graph?.on('click', (val) => {
+    graphCanvasContextValue.graph?.on('click', val => {
       onEditShow();
       if (val.shape) {
-        setState((draft) => {
+        setState(draft => {
           draft.activeElementType = val.item._cfg.type;
           draft.labelName = val.item._cfg.model.label;
         });
       } else {
-        setState((draft) => {
+        setState(draft => {
           draft.isActiveItem = false;
         });
       }
@@ -366,11 +370,11 @@ export const GraphConstruct = (props: PluginPorps) => {
         message.error(`${info.file.name} 文件上传失败`);
       }
     },
-    beforeUpload: (file) => {
+    beforeUpload: file => {
       const reader = new FileReader();
       reader.readAsText(file);
-      reader.onload = (result) => {
-        setState((draft) => {
+      reader.onload = result => {
+        setState(draft => {
           try {
             draft.schema = JSON.parse(result.target?.result);
           } catch (e) {
@@ -393,18 +397,18 @@ export const GraphConstruct = (props: PluginPorps) => {
         onClick={(item, type) => {
           const edgeChildrenList = filter(
             nodesEdgesListTranslator('edge', data),
-            (edge) => edge.label === item.labelName
+            edge => edge.label === item.labelName,
           );
           onEditShow();
           const isEdges = edgeChildrenList.length !== 1 && type === 'edge';
-          setState((draft) => {
+          setState(draft => {
             draft.activeElementType = type;
             draft.labelName = item.labelName;
             draft.isActiveItem = true;
             let selectedValue;
             if (item.edgeConstraints?.length > 0 || type === 'node') {
               if (isEdges) {
-                selectedValue = edgeChildrenList.map((child) => child.id);
+                selectedValue = edgeChildrenList.map(child => child.id);
               } else {
                 if (type === 'node') {
                   selectedValue = item.labelName;
@@ -412,19 +416,19 @@ export const GraphConstruct = (props: PluginPorps) => {
                   selectedValue = edgeChildrenList[0]?.id;
                 }
               }
-              graphCanvasContextValue.graph?.getNodes().forEach((node) => {
+              graphCanvasContextValue.graph?.getNodes().forEach(node => {
                 graphCanvasContextValue.graph?.clearItemStates(node);
               });
-              graphCanvasContextValue.graph?.getEdges().forEach((node) => {
+              graphCanvasContextValue.graph?.getEdges().forEach(node => {
                 graphCanvasContextValue.graph?.clearItemStates(node);
               });
               if (Array.isArray(selectedValue)) {
-                selectedValue.forEach((item) => {
+                selectedValue.forEach(item => {
                   graphCanvasContextValue.graph.focusItem(item, true);
                   graphCanvasContextValue.graph.setItemState(
                     item,
                     'selected',
-                    true
+                    true,
                   );
                 });
               } else {
@@ -432,7 +436,7 @@ export const GraphConstruct = (props: PluginPorps) => {
                 graphCanvasContextValue.graph.setItemState(
                   selectedValue,
                   'selected',
-                  true
+                  true,
                 );
               }
             }
@@ -445,7 +449,7 @@ export const GraphConstruct = (props: PluginPorps) => {
             graphName: currentGraphName,
             labelType: type,
             labelName: name,
-          }).then((res) => {
+          }).then(res => {
             if (res.success) {
               message.success('删除成功');
               window.location.reload();
@@ -471,6 +475,9 @@ export const GraphConstruct = (props: PluginPorps) => {
         </div>
         <div
           className={styles[`${PUBLIC_PERFIX_CLASS}-construct-canvas-layout`]}
+          style={{
+            right: visible ? 617 : 24,
+          }}
         >
           <GraphCanvasTools />
           <GraphCanvasLayout
@@ -491,20 +498,30 @@ export const GraphConstruct = (props: PluginPorps) => {
                 getGraphSchema(currentGraphName);
               }}
               onSwitch={(onShow, onClose) => {
-                setState((draft) => {
+                setState(draft => {
                   draft.onEditShow = onShow;
                   draft.onEditClose = onClose;
                 });
               }}
+              onVisible={visible => {
+                setState(draft => {
+                  draft.visible = visible;
+                });
+              }}
             />
           ) : (
             <AddNodesEdges
               onSwitch={(onShow, onClose) => {
-                setState((draft) => {
+                setState(draft => {
                   draft.onAddShow = onShow;
                   draft.onAddClose = onClose;
                 });
               }}
+              onVisible={visible => {
+                setState(draft => {
+                  draft.visible = visible;
+                });
+              }}
               type={btnType}
               data={data}
               onFinish={createLabelSchema}
@@ -515,7 +532,7 @@ export const GraphConstruct = (props: PluginPorps) => {
         <ImportData
           graphName={currentGraphName}
           onSwitch={(onShow, onClose) => {
-            setState((draft) => {
+            setState(draft => {
               draft.onImportShow = onShow;
               draft.onImportClose = onClose;
             });
@@ -532,7 +549,7 @@ export const GraphConstruct = (props: PluginPorps) => {
         width={480}
         visible={isModelOpen}
         onCancel={() => {
-          setState((draft) => {
+          setState(draft => {
             draft.isModelOpen = false;
           });
         }}
@@ -543,11 +560,11 @@ export const GraphConstruct = (props: PluginPorps) => {
             graph: currentGraphName,
             schema,
             override,
-          }).then((res) => {
+          }).then(res => {
             if (res.success) {
               message.success('导入成功');
               window.location.reload();
-              setState((draft) => {
+              setState(draft => {
                 draft.isModelOpen = false;
               });
             } else {
@@ -579,8 +596,8 @@ export const GraphConstruct = (props: PluginPorps) => {
         </div>
 
         <Checkbox
-          onChange={(e) => {
-            setState((draft) => {
+          onChange={e => {
+            setState(draft => {
               draft.override = e.target.checked;
             });
           }}
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.module.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.module.less
index 127fc2f4..e6c62bc6 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.module.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.module.less
@@ -41,6 +41,9 @@
       display: flex;
       flex-direction: column;
       padding: 20px 16px;
+      &-search:hover {
+        border: 1px solid #1650ff;
+      }
 
       &-list {
         flex: 1;
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.tsx
index 71c5cc60..81933e19 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-construct/nodes-edges-list/index.tsx
@@ -65,16 +65,10 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
     nodesTotal: data.nodes.length,
     edgeTotal: data.edges.length,
   });
-  const {
-    activeElementId,
-    activeTab,
-    edges,
-    nodes,
-    nodesTotal,
-    edgeTotal,
-  } = state;
+  const { activeElementId, activeTab, edges, nodes, nodesTotal, edgeTotal } =
+    state;
   useEffect(() => {
-    setState((draft) => {
+    setState(draft => {
       draft.nodesTotal = data.nodes.length;
       draft.edgeTotal = data.edges.length;
       draft.edges = [...data.edges];
@@ -102,8 +96,8 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
         <div style={{ overflow: 'hidden' }}>
           <TextTabs
             type="card"
-            onChange={(value) => {
-              setState((draft) => {
+            onChange={value => {
+              setState(draft => {
                 draft.activeTab = value;
               });
             }}
@@ -115,14 +109,14 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
                   <div
                     className={join(
                       [styles[`${PUBLIC_PERFIX_CLASS}-title`], 'title'],
-                      ' '
+                      ' ',
                     )}
                   >
                     点类型
                     <span
                       className={join(
                         [styles[`${PUBLIC_PERFIX_CLASS}-total`], 'total'],
-                        ' '
+                        ' ',
                       )}
                     >
                       {nodesTotal}
@@ -136,14 +130,14 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
                   <div
                     className={join(
                       [styles[`${PUBLIC_PERFIX_CLASS}-title`], 'title'],
-                      ' '
+                      ' ',
                     )}
                   >
                     边类型
                     <span
                       className={join(
                         [styles[`${PUBLIC_PERFIX_CLASS}-total`], 'total'],
-                        ' '
+                        ' ',
                       )}
                     >
                       {edgeTotal}
@@ -157,26 +151,28 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
 
         <div className={styles[`${PUBLIC_PERFIX_CLASS}-content`]}>
           <SearchInput
+            className={styles[`${PUBLIC_PERFIX_CLASS}-content-search`]}
             placeholder={`请输入搜索关键字`}
-            onChange={(e) => {
-              setState((draft) => {
+            onChange={e => {
+              setState(draft => {
                 if (isNodeTab) {
                   draft.nodes = filter(
                     data.nodes,
-                    (item) => item.labelName.indexOf(e.target.value) !== -1
+                    item => item.labelName.indexOf(e.target.value) !== -1,
                   );
                 } else {
                   draft.edges = filter(
                     data.edges,
-                    (item) =>
-                      (item.id || item.labelName).indexOf(e.target.value) !== -1
+                    item =>
+                      (item.id || item.labelName).indexOf(e.target.value) !==
+                      -1,
                   );
                 }
               });
             }}
           />
           <div className={styles[`${PUBLIC_PERFIX_CLASS}-content-list`]}>
-            {(isNodeTab ? nodes : edges).map((item) => {
+            {(isNodeTab ? nodes : edges).map(item => {
               const isActive =
                 activeElementId === item.labelName && isActiveItem;
               const styleList = [
@@ -184,7 +180,7 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
               ];
               if (isActive) {
                 styleList.push(
-                  styles[`${PUBLIC_PERFIX_CLASS}-content-list-item-active`]
+                  styles[`${PUBLIC_PERFIX_CLASS}-content-list-item-active`],
                 );
               }
               return (
@@ -192,7 +188,7 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
                   <div
                     className={styles[`${PUBLIC_PERFIX_CLASS}-element-type`]}
                     onClick={() => {
-                      setState((draft) => {
+                      setState(draft => {
                         draft.activeElementId = item.labelName;
                       });
                       onClick(item, activeTab);
@@ -206,7 +202,7 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
                     >
                       <Tooltip title="复制">
                         <IconFont
-                          onClick={(e) => {
+                          onClick={e => {
                             e.stopPropagation();
                             copy(item.labelName);
                             message.success('复制成功');
@@ -217,7 +213,7 @@ const NodesEdgesList: React.FC<NodesEdgesListProps> = ({
                       </Tooltip>
                       <Popconfirm
                         title="确定要删除吗"
-                        onConfirm={(e) => {
+                        onConfirm={e => {
                           e?.stopPropagation();
                           onDelete?.(item.labelName, activeTab);
                         }}
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.module.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.module.less
index 1e4f9682..30fc49cb 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.module.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.module.less
@@ -7,6 +7,7 @@
   &-drawer {
     height: 100%;
     border-top: 1px solid #ececec;
+    box-shadow: 1px 0 0 0 #f6f6f6;
     &-content {
       padding: 0 20px;
       &-title {
@@ -27,11 +28,13 @@
       &-search {
         :global {
           .ant-input-affix-wrapper {
-            background-color: #ededee;
+            border-radius: 4px;
+            background-color: rgba(26, 27, 37, 0.08);
             border: none;
           }
         }
       }
+
       &-list {
         padding-top: 20px;
         &-item {
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.tsx b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.tsx
index dfaf251b..038da680 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.tsx
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/statement-query-list/index.tsx
@@ -43,7 +43,7 @@ export const StatementList: React.FC<Prop> = ({
   });
   useEffect(() => {
     if (garphName && list?.length) {
-      updateState((draft) => {
+      updateState(draft => {
         draft.queryList = [...list];
       });
       setLocalData(`TUGRAPH_STATEMENT_LISTS`, {
@@ -54,7 +54,7 @@ export const StatementList: React.FC<Prop> = ({
   }, [list]);
   const { queryList, activeId } = state;
   const addStatement = () => {
-    updateState((draft) => {
+    updateState(draft => {
       const newList = [
         ...queryList,
         {
@@ -71,8 +71,8 @@ export const StatementList: React.FC<Prop> = ({
     });
   };
   const editStatement = (id: string) => {
-    updateState((draft) => {
-      const newList = map(queryList, (item) => {
+    updateState(draft => {
+      const newList = map(queryList, item => {
         if (item.id === id) {
           return { ...item, isEdit: true };
         }
@@ -86,8 +86,8 @@ export const StatementList: React.FC<Prop> = ({
     });
   };
   const deleteStatement = (id: string) => {
-    updateState((draft) => {
-      const newList = filter(queryList, (item) => item.id !== id);
+    updateState(draft => {
+      const newList = filter(queryList, item => item.id !== id);
       draft.queryList = newList;
       setLocalData(`TUGRAPH_STATEMENT_LISTS`, {
         ...getLocalData('TUGRAPH_STATEMENT_LISTS'),
@@ -96,10 +96,10 @@ export const StatementList: React.FC<Prop> = ({
     });
   };
   const searchStatement = (searchKeyword: string) => {
-    updateState((draft) => {
+    updateState(draft => {
       draft.queryList = filter(
         getLocalData('TUGRAPH_STATEMENT_LISTS')[garphName],
-        (item) => item.value.indexOf(searchKeyword) != -1
+        item => item.value.indexOf(searchKeyword) != -1,
       );
     });
   };
@@ -137,7 +137,7 @@ export const StatementList: React.FC<Prop> = ({
             <SearchInput
               placeholder="请输入搜索关键字"
               bordered={false}
-              onSearch={(keyword) => {
+              onSearch={keyword => {
                 searchStatement(keyword);
               }}
             />
@@ -146,7 +146,7 @@ export const StatementList: React.FC<Prop> = ({
                 styles[`${PUBLIC_PERFIX_CLASS}-statement-drawer-content-list`]
               }
             >
-              {map(queryList, (item) => (
+              {map(queryList, item => (
                 <div
                   key={item.id}
                   className={join(
@@ -160,10 +160,10 @@ export const StatementList: React.FC<Prop> = ({
                           ]
                         : '',
                     ],
-                    ' '
+                    ' ',
                   )}
                   onClick={() => {
-                    updateState((draft) => {
+                    updateState(draft => {
                       draft.activeId = item.id;
                       onSelect?.(item.id);
                     });
@@ -181,9 +181,9 @@ export const StatementList: React.FC<Prop> = ({
                       <Input
                         defaultValue={item.value}
                         autoFocus={true}
-                        onBlur={(e) => {
-                          updateState((draft) => {
-                            draft.queryList = map(queryList, (statement) => {
+                        onBlur={e => {
+                          updateState(draft => {
+                            draft.queryList = map(queryList, statement => {
                               if (statement.id === item.id) {
                                 return {
                                   ...statement,
@@ -195,14 +195,14 @@ export const StatementList: React.FC<Prop> = ({
                             });
                             setLocalData(`TUGRAPH_STATEMENT_LISTS`, {
                               ...getLocalData('TUGRAPH_STATEMENT_LISTS'),
-                              [garphName]: map(queryList, (statement) => {
+                              [garphName]: map(queryList, statement => {
                                 if (statement.id === item.id) {
                                   return omit(
                                     {
                                       ...statement,
                                       value: e.target.value,
                                     },
-                                    'isEdit'
+                                    'isEdit',
                                   );
                                 }
                                 return statement;
@@ -227,14 +227,14 @@ export const StatementList: React.FC<Prop> = ({
                   </div>
                   <div>
                     <EditOutlined
-                      onClick={(e) => {
+                      onClick={e => {
                         e.stopPropagation();
                         editStatement(item.id);
                       }}
                     />
                     <Popconfirm
                       title="确定要删除吗？"
-                      onConfirm={(e) => {
+                      onConfirm={e => {
                         e?.stopPropagation();
                         deleteStatement(item.id);
                       }}
@@ -242,7 +242,7 @@ export const StatementList: React.FC<Prop> = ({
                       cancelText="取消"
                     >
                       <DeleteOutlined
-                        onClick={(e) => {
+                        onClick={e => {
                           e.stopPropagation();
                         }}
                       />
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/stored-procedure/index.module.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/stored-procedure/index.module.less
index b7667631..4139a03e 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/stored-procedure/index.module.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/components/stored-procedure/index.module.less
@@ -101,9 +101,9 @@
 
     .Resizer.horizontal {
       width: 100%;
-      height: 4px;
+      height: 3px;
       z-index: 9999;
-      margin: -5px 0;
+      margin: -4px 0;
       border-top: 5px solid rgb(255 255 255 / 0%);
       border-bottom: 5px solid rgb(255 255 255 / 0%);
       cursor: row-resize;
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.module.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.module.less
index 496a96ba..1f3aef45 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.module.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/domain-core/graph-query/index.module.less
@@ -216,9 +216,9 @@
 
     .Resizer.horizontal {
       width: 100%;
-      height: 4px;
+      height: 3px;
       z-index: 9999;
-      margin: -5px 0;
+      margin: -4px 0;
       border-top: 5px solid rgb(255 255 255 / 0%);
       border-bottom: 5px solid rgb(255 255 255 / 0%);
       cursor: row-resize;
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;
           });
         }}
diff --git a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/global.less b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/global.less
index ea66af9e..6e81803c 100644
--- a/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/global.less
+++ b/client/packages/app/client/src/components/@@plugins/src/components/studio/tugraph/global.less
@@ -41,12 +41,17 @@
 
 .gi-rich-container .gi-rich-container-toolbar {
   border-bottom: none !important;
+  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.04), 0px 1px 6px -1px rgba(0, 0, 0, 0.04), 0px 2px 4px 0 rgba(0, 0, 0, 0.04);
+  z-index: 12;
   .toolbar-item {
     .anticon {
       svg {
         font-size: 16px;
       }
     }
+    .ant-btn {
+      color: #6A6B71;
+    }
   }
 }
 
@@ -65,23 +70,39 @@
   .ant-segmented:not(.ant-segmented-disabled):focus {
     background: #eaeff9;
   }
-}
 
-.style-setting-container {
-  height: calc(100vh - 110px) !important;
-  .style-setting-element-container .nodeConfigurationContainer, .style-setting-element-container .edgeConfigurationContainer {
-    height: calc(100vh - 210px) !important;
-    .ant-slider-mark-text {
-      font-size: 12px;
-      color: #6A6B71;
+  .style-setting-container {
+    height: calc(100vh - 110px) !important;
+    .style-setting-element-container .nodeConfigurationContainer, .style-setting-element-container .edgeConfigurationContainer {
+      height: calc(100vh - 210px) !important;
+      .ant-slider-mark-text {
+        font-size: 12px;
+        color: #6A6B71;
+      }
+      
+      #nodeConfigurationForm_badgeValue {
+        .ant-checkbox {
+          left: 4px;
+        }
+      }
     }
   }
-}
+  
+  .attribute-filter-container .attribute-filter-container-form {
+    height: calc(100vh - 205px) !important;
+  }
+  
+  .statictics-filter-container .statictics-filter-container-form {
+    height: calc(100vh - 205px) !important;
+  }
 
-.attribute-filter-container .attribute-filter-container-form {
-  height: calc(100vh - 195px) !important;
+  .tugraph-path-analysis {
+    height: calc(100vh - 176px);
+    .tugraph-path-analysis-result-container {
+      height: calc(100vh - 435px) !important;
+    }
+    .path-query-btn-group {
+      right: 10px;
+    }
+  }
 }
-
-.statictics-filter-container .statictics-filter-container-form {
-  height: calc(100vh - 195px) !important;
-}
\ No newline at end of file
diff --git a/client/packages/plugins/graph-analysis/src/client/GI_EXPORT_FILES.ts b/client/packages/plugins/graph-analysis/src/client/GI_EXPORT_FILES.ts
index 4d50d9f7..e0e2c4a5 100644
--- a/client/packages/plugins/graph-analysis/src/client/GI_EXPORT_FILES.ts
+++ b/client/packages/plugins/graph-analysis/src/client/GI_EXPORT_FILES.ts
@@ -1,7 +1,7 @@
 export default {
   "workbook": {
-    "id": "d72a7985-292f-4dc5-a9c9-c38f3e3639e5",
-    "name": "admin",
+    "id": "d1cd7ab4-82dd-45da-a0c0-04507ce06b9a",
+    "name": "TuGraph 图分析",
     "activeAssetsKeys": {
       "elements": [
         "SimpleNode",
@@ -14,26 +14,31 @@ export default {
         "ClearCanvas",
         "ConfigQuery",
         "ContextMenu",
-        "GraphDemo",
+        "DoubleClickExpandNode",
+        "FilterPanel",
+        "GremlinQuery",
         "Initializer",
         "JSONMode",
         "LanguageQuery",
         "LassoSelect",
+        "LayoutContent",
         "LayoutSwitchTool",
         "Loading",
         "PinNodeWithMenu",
         "Placeholder",
         "PointEdgeView",
-        "PropertiesPanel",
         "PropertyGraphInitializer",
+        "RemoveNodeWithMenu",
         "RichContainer",
         "SimpleQuery",
         "ToggleClusterWithMenu",
+        "Toolbar",
         "TuGraphAttributesFilter",
         "TuGraphBack",
+        "TuGraphPathQuery",
+        "TuGraphPropertiesPanel",
         "TuGraphStatisticsFilter",
-        "TuGraphStyleSetting",
-        "ZoomStatus"
+        "TuGraphStyleSetting"
       ],
       "layouts": [
         "Force2",
@@ -49,7 +54,12 @@ export default {
           "props": {
             "size": 26,
             "color": "#ddd",
-            "label": []
+            "label": [],
+            "advanced": {
+              "label": {
+                "fill": "#000"
+              }
+            }
           },
           "name": "官方节点",
           "order": -1,
@@ -105,7 +115,8 @@ export default {
           "props": {
             "styleCanvas": {
               "backgroundColor": "#fff",
-              "backgroundImage": ""
+              "backgroundImage": "https://gw.alipayobjects.com/mdn/rms_0d75e8/afts/img/A*k9t4QamMuQ4AAAAAAAAAAAAAARQnAQ",
+              "background": "#fff"
             },
             "dragCanvas": {
               "disabled": false,
@@ -190,7 +201,8 @@ export default {
             "GI_CONTAINER": [
               "AdvanceNeighborsQuery",
               "ToggleClusterWithMenu",
-              "PinNodeWithMenu"
+              "PinNodeWithMenu",
+              "RemoveNodeWithMenu"
             ],
             "nodeMenuComponents": [
               "NeighborsQuery",
@@ -200,30 +212,96 @@ export default {
           }
         },
         {
-          "id": "GraphDemo",
-          "type": "GIAC",
-          "name": "Graph Demo 示例",
+          "id": "DoubleClickExpandNode",
+          "type": "AUTO",
+          "name": "双击扩散节点",
+          "props": {}
+        },
+        {
+          "id": "FilterPanel",
+          "type": "GIAC_CONTENT",
+          "name": "筛选面板",
           "props": {
+            "histogramColor": "#3056E3",
+            "isFilterIsolatedNodes": true,
+            "highlightMode": true,
+            "filterKeys": [],
             "GI_CONTAINER_INDEX": 2,
-            "GIAC": {
+            "GIAC_CONTENT": {
               "visible": false,
               "disabled": false,
-              "isShowTitle": false,
-              "title": "Demo 示例",
+              "isShowTitle": true,
+              "title": "筛选面板",
               "isShowIcon": true,
-              "icon": "icon-xiaodengpao",
-              "iconFontSize": "25px",
-              "buttonType": "text",
+              "icon": "icon-filter",
               "isShowTooltip": true,
-              "tooltip": "",
-              "tooltipColor": "rgba(0,0,0,1)",
+              "tooltip": "通过属性筛选画布信息，可自定义",
+              "tooltipColor": "#3056e3",
               "tooltipPlacement": "top",
               "hasDivider": false,
               "height": "46px",
-              "isVertical": true
+              "isVertical": true,
+              "containerType": "div",
+              "containerAnimate": false,
+              "containerPlacement": "RT",
+              "offset": [
+                0,
+                0
+              ],
+              "containerWidth": "400px",
+              "containerHeight": "calc(100% - 100px)",
+              "contaienrMask": false
+            },
+            "enableInfoDetect": true,
+            "filterLogic": "and",
+            "histogramOptions": {
+              "isCustom": false,
+              "min": null,
+              "max": null,
+              "binWidth": null
             }
           }
         },
+        {
+          "id": "GremlinQuery",
+          "type": "GIAC_CONTENT",
+          "name": "Gremlin 查询",
+          "props": {
+            "serviceId": "TuGraph-DB/GremlinQuery",
+            "isShowPublishButton": false,
+            "saveTemplateServceId": "TuGraph-DB/PublishTemplate",
+            "initialValue": "g.V().limit(10)",
+            "height": 200,
+            "GI_CONTAINER_INDEX": 2,
+            "GIAC_CONTENT": {
+              "visible": false,
+              "disabled": false,
+              "isShowTitle": true,
+              "title": "Gremlin",
+              "isShowIcon": true,
+              "icon": "icon-query",
+              "isShowTooltip": true,
+              "tooltip": "",
+              "tooltipColor": "#3056e3",
+              "tooltipPlacement": "right",
+              "hasDivider": false,
+              "height": "60px",
+              "isVertical": true,
+              "containerType": "div",
+              "containerAnimate": false,
+              "containerPlacement": "RT",
+              "offset": [
+                0,
+                0
+              ],
+              "containerWidth": "350px",
+              "containerHeight": "calc(100% - 100px)",
+              "containerMask": false
+            },
+            "isShowLimit": false,
+            "isShowTimeout": false
+          }
+        },
         {
           "id": "Initializer",
           "type": "INITIALIZER",
@@ -333,9 +411,44 @@ export default {
             }
           }
         },
+        {
+          "id": "LayoutContent",
+          "type": "GIAC_CONTENT",
+          "name": "布局参数配置",
+          "props": {
+            "GI_CONTAINER_INDEX": 2,
+            "GIAC_CONTENT": {
+              "visible": false,
+              "disabled": false,
+              "isShowTitle": true,
+              "title": "布局参数配置",
+              "isShowIcon": true,
+              "icon": "icon-kinship",
+              "isShowTooltip": true,
+              "tooltip": "",
+              "tooltipColor": "#3056e3",
+              "tooltipPlacement": "right",
+              "hasDivider": false,
+              "height": "60px",
+              "isVertical": true,
+              "containerType": "div",
+              "containerAnimate": false,
+              "containerDraggable": false,
+              "dragHandle": "header",
+              "containerPlacement": "RT",
+              "offset": [
+                0,
+                0
+              ],
+              "containerWidth": "400px",
+              "containerHeight": "calc(100% - 100px)",
+              "contaienrMask": false
+            }
+          }
+        },
         {
           "id": "LayoutSwitchTool",
-          "type": "GIAC",
+          "type": "GIAC_CONTENT",
           "name": "高级布局切换",
           "props": {
             "GI_CONTAINER_INDEX": 2,
@@ -388,31 +501,18 @@ export default {
           "name": "TuGraph 图例",
           "props": {}
         },
-        {
-          "id": "PropertiesPanel",
-          "type": "AUTO",
-          "name": "属性面板",
-          "props": {
-            "serviceId": "GI/PropertiesPanel",
-            "title": "属性面板",
-            "placement": "RT",
-            "width": "356px",
-            "height": "calc(100% - 0px)",
-            "offset": [
-              10,
-              10
-            ],
-            "animate": false,
-            "enableInfoDetect": true,
-            "defaultiStatistic": false
-          }
-        },
         {
           "id": "PropertyGraphInitializer",
           "type": "AUTO",
           "name": "属性图计算",
           "props": {}
         },
+        {
+          "id": "RemoveNodeWithMenu",
+          "type": "GIAC_MENU",
+          "name": "节点删除",
+          "props": {}
+        },
         {
           "id": "RichContainer",
           "type": "GICC_LAYOUT",
@@ -463,6 +563,12 @@ export default {
                 "name": "画布操作",
                 "required": true,
                 "GI_CONTAINER": []
+              },
+              {
+                "id": "condition-content",
+                "name": "条件展示容器",
+                "required": true,
+                "GI_CONTAINER": []
               }
             ],
             "isSheet": false
@@ -483,6 +589,20 @@ export default {
             "degree": 1
           }
         },
+        {
+          "id": "Toolbar",
+          "type": "GICC",
+          "name": "工具栏",
+          "props": {
+            "GI_CONTAINER": [],
+            "direction": "vertical",
+            "placement": "LT",
+            "offset": [
+              24,
+              64
+            ]
+          }
+        },
         {
           "id": "TuGraphAttributesFilter",
           "type": "GIAC_CONTENT",
@@ -525,6 +645,50 @@ export default {
           "name": "返回按钮",
           "props": {}
         },
+        {
+          "id": "TuGraphPathQuery",
+          "type": "GIAC_CONTENT",
+          "name": "路径查询",
+          "props": {
+            "pathNodeLabel": "id",
+            "hasDirection": false,
+            "hasMaxDeep": false,
+            "GI_CONTAINER_INDEX": 2,
+            "GIAC_CONTENT": {
+              "visible": false,
+              "disabled": false,
+              "isShowTitle": true,
+              "title": "路径查询",
+              "isShowIcon": true,
+              "icon": "icon-path-analysis",
+              "isShowTooltip": true,
+              "tooltip": "",
+              "tooltipColor": "#3056e3",
+              "tooltipPlacement": "right",
+              "hasDivider": false,
+              "height": "60px",
+              "isVertical": true,
+              "containerType": "div",
+              "containerAnimate": false,
+              "containerDraggable": false,
+              "dragHandle": "header",
+              "containerPlacement": "RT",
+              "offset": [
+                0,
+                0
+              ],
+              "containerWidth": "400px",
+              "containerHeight": "calc(100% - 100px)",
+              "contaienrMask": false
+            }
+          }
+        },
+        {
+          "id": "TuGraphPropertiesPanel",
+          "type": "AUTO",
+          "name": "TuGraph 属性面板",
+          "props": {}
+        },
         {
           "id": "TuGraphStatisticsFilter",
           "type": "GIAC_CONTENT",
@@ -564,7 +728,7 @@ export default {
         {
           "id": "TuGraphStyleSetting",
           "type": "GIAC_CONTENT",
-          "name": "样式设置",
+          "name": "业务样式设置",
           "props": {
             "localServiceId": "TuGraph-DB/saveElementStyleToLocalService",
             "schemaServiceId": "TuGraph-DB/graphSchemaService",
@@ -577,6 +741,7 @@ export default {
               "isShowIcon": true,
               "icon": "icon-tugraph-styling",
               "isShowTooltip": true,
+              "tooltip": "根据点上的属性值可指定颜色、大小、形状",
               "tooltipColor": "rgba(0,0,0,1)",
               "tooltipPlacement": "right",
               "hasDivider": false,
@@ -593,19 +758,9 @@ export default {
               ],
               "containerWidth": "350px",
               "containerHeight": "calc(100% - 100px)",
-              "contaienrMask": false,
-              "tooltip": "根据点上的属性值可指定颜色、大小、形状"
+              "contaienrMask": false
             }
           }
-        },
-        {
-          "id": "ZoomStatus",
-          "type": "AUTO",
-          "name": "缩放状态",
-          "props": {
-            "minZoom": 0.6,
-            "statusName": "minZoom"
-          }
         }
       ],
       "layout": {
@@ -669,9 +824,7 @@ export default {
               "id": "navbar-right",
               "name": "导航右区",
               "required": true,
-              "GI_CONTAINER": [
-                "GraphDemo"
-              ],
+              "GI_CONTAINER": [],
               "display": true
             },
             {
@@ -699,6 +852,10 @@ export default {
                 {
                   "value": "ConfigQuery",
                   "label": "配置查询"
+                },
+                {
+                  "value": "TuGraphPathQuery",
+                  "label": "路径查询"
                 }
               ],
               "icon": "icon-tugraph-query",
@@ -726,13 +883,13 @@ export default {
               "name": "布局样式",
               "required": true,
               "GI_CONTAINER": [
-                {
-                  "value": "TuGraphStyleSetting",
-                  "label": "业务样式设置"
-                },
                 {
                   "value": "LayoutSwitchTool",
                   "label": "高级布局切换"
+                },
+                {
+                  "value": "TuGraphStyleSetting",
+                  "label": "业务样式设置"
                 }
               ],
               "display": true
@@ -753,6 +910,18 @@ export default {
               ],
               "display": true
             },
+            {
+              "id": "condition-content",
+              "name": "条件展示容器",
+              "required": true,
+              "GI_CONTAINER": [
+                {
+                  "value": "LayoutContent",
+                  "label": "布局参数配置"
+                }
+              ],
+              "display": true
+            },
             {
               "id": "GI_FreeContainer",
               "name": "自运行组件",
@@ -867,6 +1036,10 @@ export default {
                   "label": "缩放状态",
                   "value": "ZoomStatus"
                 },
+                {
+                  "label": "多画布页签",
+                  "value": "Sheetbar"
+                },
                 {
                   "label": "分析历史沉淀",
                   "value": "AnalysisHistory"
@@ -884,25 +1057,34 @@ export default {
                   "value": "SimpleQuery"
                 },
                 {
-                  "label": "demo案例",
-                  "value": "Demo"
+                  "label": "TuGraph 图例",
+                  "value": "PointEdgeView"
+                },
+                {
+                  "label": "TuGraph 属性面板",
+                  "value": "TuGraphPropertiesPanel"
+                },
+                {
+                  "label": "双击扩散节点",
+                  "value": "DoubleClickExpandNode"
                 }
               ],
               "GI_CONTAINER": [
                 "CanvasSetting",
                 "Initializer",
                 "ActivateRelations",
+                "DoubleClickExpandNode",
                 "Loading",
                 "Placeholder",
                 "PointEdgeView",
-                "PropertiesPanel",
                 "PropertyGraphInitializer",
                 "SimpleQuery",
-                "ZoomStatus"
+                "TuGraphPropertiesPanel"
               ],
               "display": true
             }
-          ]
+          ],
+          "isSheet": false
         }
       }
     },
@@ -1205,8 +1387,8 @@ export default {
     },
     "GISDK": {
       "name": "@antv/gi-sdk",
-      "version": "2.4.10",
-      "url": "https://gw.alipayobjects.com/os/lib/antv/gi-sdk/2.4.10/dist/index.min.js",
+      "version": "2.4.12",
+      "url": "https://gw.alipayobjects.com/os/lib/antv/gi-sdk/2.4.12/dist/index.min.js",
       "global": "GISDK"
     },
     "G2Plot": {
@@ -1225,8 +1407,8 @@ export default {
   "GI_ASSETS_PACKAGES": {
     "GI_ASSETS_BASIC": {
       "name": "@antv/gi-assets-basic",
-      "version": "2.4.14",
-      "url": "https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.4.14/dist/index.min.js",
+      "version": "2.4.22",
+      "url": "https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.4.22/dist/index.min.js",
       "global": "GI_ASSETS_BASIC"
     },
     "GI_ASSETS_ADVANCE": {
@@ -1237,9 +1419,9 @@ export default {
     },
     "GI_ASSETS_TUGRAPH_DB": {
       "name": "@tugraph/gi-assets-tugraph-db",
-      "version": "0.6.12",
+      "version": "0.6.26",
       "global": "GI_ASSETS_TUGRAPH_DB",
-      "url": "https://gw.alipayobjects.com/os/lib/tugraph/gi-assets-tugraph-db/0.6.12/dist/index.min.js"
+      "url": "https://gw.alipayobjects.com/os/lib/tugraph/gi-assets-tugraph-db/0.6.26/dist/index.min.js"
     }
   }
-}
\ No newline at end of file
+}