From 88a118c2cef0e38748c371e722905fef6e621ff7 Mon Sep 17 00:00:00 2001
From: noneAuth <wb-zqm915773@antgroup.com>
Date: Mon, 11 Dec 2023 14:20:41 +0800
Subject: [PATCH 1/3] feat: styles update

---
 .../graph-construct/add-nodes-edges/index.tsx |  92 ++++----
 .../edit-nodes-edges/index.tsx                | 104 ++++-----
 .../components/node-query/index.module.less   |   6 +-
 .../components/path-query/index.module.less   |   4 -
 .../domain-core/graph-query/index.module.less |  16 +-
 .../components/project-card/index.tsx         |  23 +-
 client/src/layouts/global.less                | 202 ++++++++++++------
 client/src/layouts/index.less                 |  16 +-
 client/src/layouts/index.tsx                  |   6 +-
 client/src/pages/construct.tsx                |   7 +-
 client/src/pages/query.tsx                    |   7 +-
 11 files changed, 295 insertions(+), 188 deletions(-)

diff --git a/client/src/components/studio/domain-core/graph-construct/add-nodes-edges/index.tsx b/client/src/components/studio/domain-core/graph-construct/add-nodes-edges/index.tsx
index 17a43ecd..81fae62a 100644
--- a/client/src/components/studio/domain-core/graph-construct/add-nodes-edges/index.tsx
+++ b/client/src/components/studio/domain-core/graph-construct/add-nodes-edges/index.tsx
@@ -67,16 +67,16 @@ export const AddNodesEdges: React.FC<Prop> = ({
 
   const propertyList = () => {
     const attrPropertyNames = map(
-      filter(attrList, (attr) => !attr.optional && !attr.primaryField),
-      (item) => item.name
+      filter(attrList, attr => !attr.optional && !attr.primaryField),
+      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 = '添加属性') => {
@@ -102,7 +102,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,
             })),
@@ -119,7 +119,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,
             })),
@@ -135,9 +135,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),
               ];
             });
           }}
@@ -197,7 +197,10 @@ export const AddNodesEdges: React.FC<Prop> = ({
             defaultValue: false,
             disabled: record.primaryField,
             options: [
-              { label: '否', value: false },
+              {
+                label: record.primaryField ? '否（主键）' : '否',
+                value: false,
+              },
               { label: '是', value: true },
             ],
           },
@@ -208,22 +211,25 @@ export const AddNodesEdges: React.FC<Prop> = ({
       title: '操作',
       dataIndex: 'operate',
       key: 'operate',
-      render: (_, record: any) => (record.primaryField ? <a style={{ color: 'rgba(54,55,64,1)' }}>主键</a> :
-        <Popconfirm
-          title="确定要删除吗？"
-          onConfirm={() => {
-            updateState((draft) => {
-              draft.attrList = [
-                ...attrList.filter((item) => item.id !== record?.id),
-              ];
-            });
-          }}
-          okText="确定"
-          cancelText="取消"
-        >
-          <a style={{ color: 'rgba(54,55,64,1)' }}>删除</a>
-        </Popconfirm>
-      ),
+      render: (_, record: any) =>
+        record.primaryField ? (
+          <a style={{ color: 'rgba(54,55,64,1)' }}>主键</a>
+        ) : (
+          <Popconfirm
+            title="确定要删除吗？"
+            onConfirm={() => {
+              updateState(draft => {
+                draft.attrList = [
+                  ...attrList.filter(item => item.id !== record?.id),
+                ];
+              });
+            }}
+            okText="确定"
+            cancelText="取消"
+          >
+            <a style={{ color: 'rgba(54,55,64,1)' }}>删除</a>
+          </Popconfirm>
+        ),
     },
   ];
   const nodeConfigColumns: EditColumnsType<IndexData> = [
@@ -312,9 +318,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),
               ];
             });
           }}
@@ -327,14 +333,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,
@@ -344,7 +350,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];
@@ -365,7 +371,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
             onClick={() => {
               onClose();
               form.resetFields();
-              updateState((draft) => {
+              updateState(draft => {
                 draft.startList = [];
                 draft.configList = [];
                 draft.attrList = [];
@@ -377,7 +383,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('两条边的起点和终点不能相同');
@@ -393,7 +399,7 @@ export const AddNodesEdges: React.FC<Prop> = ({
                   },
                   indexs: configList,
                   properties: attrList,
-                  edgeConstraints: map(startList, (item) => {
+                  edgeConstraints: map(startList, item => {
                     return [item.source, item.target];
                   }),
                 });
@@ -427,12 +433,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();
@@ -458,8 +464,8 @@ export const AddNodesEdges: React.FC<Prop> = ({
               columns={defaultColumns}
               dataSource={attrList}
               rowKey="id"
-              onChange={(newData) => {
-                updateState((draft) => {
+              onChange={newData => {
+                updateState(draft => {
                   draft.attrList = [...(newData || [])];
                 });
               }}
@@ -481,9 +487,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') } },
@@ -506,8 +512,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/src/components/studio/domain-core/graph-construct/edit-nodes-edges/index.tsx b/client/src/components/studio/domain-core/graph-construct/edit-nodes-edges/index.tsx
index 30b5537e..d5c252da 100644
--- a/client/src/components/studio/domain-core/graph-construct/edit-nodes-edges/index.tsx
+++ b/client/src/components/studio/domain-core/graph-construct/edit-nodes-edges/index.tsx
@@ -71,29 +71,29 @@ export const EditNodesEdges: React.FC<Prop> = ({
 
   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) => {
     if (isPrimaryField(record.name)) {
-      return <Button type="text">主键</Button>
+      return <Button type="text">主键</Button>;
     }
     return (
       <>
         <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 };
                 }
@@ -140,12 +140,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;
@@ -154,7 +154,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),
                 ];
               }
             });
@@ -179,9 +179,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),
               ];
             });
           }}
@@ -224,7 +224,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,
             })),
@@ -241,7 +241,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,
             })),
@@ -309,7 +309,10 @@ export const EditNodesEdges: React.FC<Prop> = ({
             disabled: record.disabled,
             defaultValue: false,
             options: [
-              { label: '否', value: false },
+              {
+                label: isPrimaryField(record.name) ? '否（主键）' : '否',
+                value: false,
+              },
               { label: '是', value: true },
             ],
           },
@@ -370,7 +373,10 @@ export const EditNodesEdges: React.FC<Prop> = ({
           inputType: EditType.SELECT,
           prop: {
             options: [
-              { label: '否', value: false },
+              {
+                label: record.primaryField ? '否（主键）' : '否',
+                value: false,
+              },
               { label: '是', value: true },
             ],
             disabled: record.disabled,
@@ -430,7 +436,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) => {
@@ -443,12 +449,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?.();
@@ -456,7 +462,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('属性删除失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('属性删除失败' + res.errorMessage);
       });
   };
@@ -469,12 +475,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 {
@@ -488,7 +494,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('属性修改失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('属性修改失败' + res.errorMessage);
       });
   };
@@ -501,12 +507,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 {
@@ -520,7 +526,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('属性添加失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('属性添加失败' + res.errorMessage);
       });
   };
@@ -531,12 +537,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 {
@@ -550,7 +556,7 @@ export const EditNodesEdges: React.FC<Prop> = ({
           message.error('索引添加失败' + res.errorMessage);
         }
       })
-      .catch((res) => {
+      .catch(res => {
         message.error('索引添加失败' + res.errorMessage);
       });
   };
@@ -560,12 +566,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?.();
@@ -573,19 +579,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];
@@ -593,14 +599,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];
@@ -613,11 +619,11 @@ export const EditNodesEdges: React.FC<Prop> = ({
             primaryField: isPrimaryField(item.propertyName),
             disabled: true,
             id: uniqueId(`index_`),
-          })
+          }),
         );
       } else {
         draft.startList = [
-          ...map(findLabelItem(labelName)?.edgeConstraints, (item) => ({
+          ...map(findLabelItem(labelName)?.edgeConstraints, item => ({
             source: item[0],
             target: item[1],
             id: uniqueId(`edge_`),
@@ -679,8 +685,8 @@ export const EditNodesEdges: React.FC<Prop> = ({
               columns={defaultColumns}
               dataSource={attrList}
               rowKey="id"
-              onChange={(newData) => {
-                updateState((draft) => {
+              onChange={newData => {
+                updateState(draft => {
                   draft.attrList = [...newData];
                 });
               }}
@@ -718,8 +724,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/src/components/studio/domain-core/graph-query/components/node-query/index.module.less b/client/src/components/studio/domain-core/graph-query/components/node-query/index.module.less
index e3e2d66b..7b4e0db2 100644
--- a/client/src/components/studio/domain-core/graph-query/components/node-query/index.module.less
+++ b/client/src/components/studio/domain-core/graph-query/components/node-query/index.module.less
@@ -59,7 +59,7 @@
       }
       .ant-input-number {
         margin-top: 0;
-        border-radius: 0px 6px 6px 0px;
+        border-radius: 0px 6px 6px 0px !important;
       }
     }
   }
@@ -80,10 +80,10 @@
     }
     .ant-input-number {
       width: 100%;
-      border-radius: 6px;
+      border-radius: 6px !important;
       margin-top: 8px;
       .ant-input-number-handler-wrap {
-        border-radius: 0 6px 6px 0;
+        border-radius: 0 6px 6px 0 !important;
       }
     }
     .ant-checkbox-wrapper {
diff --git a/client/src/components/studio/domain-core/graph-query/components/path-query/index.module.less b/client/src/components/studio/domain-core/graph-query/components/path-query/index.module.less
index cfc1d687..7c6aeb57 100644
--- a/client/src/components/studio/domain-core/graph-query/components/path-query/index.module.less
+++ b/client/src/components/studio/domain-core/graph-query/components/path-query/index.module.less
@@ -15,10 +15,6 @@
       justify-content: space-between;
       gap: 12px;
     }
-    span {
-      font-weight: 400;
-      color: rgba(54, 55, 64, 1);
-    }
     :global {
       .ant-select-selector {
         width: 1135px;
diff --git a/client/src/components/studio/domain-core/graph-query/index.module.less b/client/src/components/studio/domain-core/graph-query/index.module.less
index c818e58e..f9155f82 100644
--- a/client/src/components/studio/domain-core/graph-query/index.module.less
+++ b/client/src/components/studio/domain-core/graph-query/index.module.less
@@ -118,6 +118,7 @@
         height: 48px;
         padding: 12px 24px;
         box-shadow: 0 1px 0 0 #f2f2f2;
+        margin-bottom: 1px;
         :global {
           .ant-space {
             gap: 0 !important;
@@ -127,9 +128,6 @@
                 margin: 0 0 0 8px;
               }
             }
-            .ant-btn-text {
-              padding: 0 0 0 16px;
-            }
           }
         }
         .@{perfix-cls}-left-btn {
@@ -141,6 +139,13 @@
             }
             .ant-btn {
               border-radius: 4px;
+              &:hover,
+              &:focus {
+                background-color: #f2f2f2 !important;
+                border-radius: 4px !important;
+                color: rgba(0, 0, 0, 0.85) !important;
+                border-color: transparent !important;
+              }
             }
           }
           .@{perfix-cls}-btn-implement {
@@ -274,6 +279,7 @@
 }
 .@{perfix-cls}-popover-table {
   overflow: hidden;
+  margin-top: 0px;
   :global {
     .ant-table {
       width: calc(100% + 2px);
@@ -281,6 +287,10 @@
       .ant-table-container {
         background-color: #fbfbfb;
       }
+      .ant-table-thead > tr > th,
+      .ant-table-tbody > tr > td {
+        padding: 10px;
+      }
       table {
         border-top: none !important;
       }
diff --git a/client/src/components/studio/domain-core/project/project-list/components/project-card/index.tsx b/client/src/components/studio/domain-core/project/project-list/components/project-card/index.tsx
index c0a1e0f3..7b001171 100644
--- a/client/src/components/studio/domain-core/project/project-list/components/project-card/index.tsx
+++ b/client/src/components/studio/domain-core/project/project-list/components/project-card/index.tsx
@@ -62,12 +62,12 @@ const ProjectCard = ({
   );
   // 点边统计
   const nodeEdgeStatistics = (graphName: string) => {
-    updateState((draft) => {
+    updateState(draft => {
       draft.isNodeEdgeObj = true;
     });
-    onGetNodeEdgeStatistics(graphName).then((res) => {
+    onGetNodeEdgeStatistics(graphName).then(res => {
       if (res.success) {
-        updateState((draft) => {
+        updateState(draft => {
           draft.nodeEdgeObjList = [
             { text: '类点', value: res.data.vertexLabels },
             { text: '点', value: res.data.vertexCount },
@@ -79,7 +79,7 @@ const ProjectCard = ({
     });
   };
   const isOfficial =
-    TUGRAPH_DEOM.filter((item) => item.graph_name === graphName).length > 0;
+    TUGRAPH_DEOM.filter(item => item.graph_name === graphName).length > 0;
   return (
     <div className={styles[`${PUBLIC_PERFIX_CLASS}-card-box`]}>
       {index === 0 ? (
@@ -90,7 +90,7 @@ const ProjectCard = ({
           hoverable
           className={styles[`${PUBLIC_PERFIX_CLASS}-create-card`]}
           onClick={() => {
-            updateState((draft) => {
+            updateState(draft => {
               draft.isAdd = true;
             });
           }}
@@ -107,7 +107,7 @@ const ProjectCard = ({
             getActions(
               '图构建',
               true,
-              `${'/construct'}?graphName=${graphName}`
+              `${'/construct'}?graphName=${graphName}`,
             ),
             getActions('图查询', true, `${'/query'}?graphName=${graphName}`),
             getActions('图分析', true, `${'/analysis'}?graphName=${graphName}`),
@@ -186,7 +186,7 @@ const ProjectCard = ({
                         placement="top"
                         title={`你确定将子图「${graphName}」永久删除吗？`}
                         onConfirm={() => {
-                          onDeleteGraph({ graphName }).then((res) => {
+                          onDeleteGraph({ graphName }).then(res => {
                             if (res.success) {
                               onRefreshProjectList();
                               message.success('删除成功');
@@ -205,12 +205,11 @@ const ProjectCard = ({
                       <IconFont
                         type="icon-bianjimoxing"
                         onClick={() => {
-                          updateState((draft) => {
+                          updateState(draft => {
                             draft.isEdit = true;
                           });
                         }}
                         style={{
-                          marginRight: 12,
                           color: `rgba(152, 152, 157, 1)`,
                         }}
                       />
@@ -228,7 +227,7 @@ const ProjectCard = ({
                     <div
                       className={styles[`${PUBLIC_PERFIX_CLASS}-env-node-edge`]}
                     >
-                      {nodeEdgeObjList?.map((item) => {
+                      {nodeEdgeObjList?.map(item => {
                         return (
                           <div
                             className={
@@ -296,7 +295,7 @@ const ProjectCard = ({
         open={state.isEdit}
         detail={{ graphName, description, maxSizeGB }}
         onClose={() => {
-          updateState((draft) => {
+          updateState(draft => {
             draft.isEdit = false;
           });
         }}
@@ -305,7 +304,7 @@ const ProjectCard = ({
       <AddTuGraphModal
         open={state.isAdd}
         onClose={() => {
-          updateState((draft) => {
+          updateState(draft => {
             draft.isAdd = false;
           });
           onRefreshProjectList();
diff --git a/client/src/layouts/global.less b/client/src/layouts/global.less
index e736082c..dcfb7809 100644
--- a/client/src/layouts/global.less
+++ b/client/src/layouts/global.less
@@ -1,72 +1,144 @@
 @focus: #1650ff;
 @hover: #f5f5f5;
-.ant-input,
-.ant-select-selector,
-.ant-input-affix-wrapper,
-.ant-btn,
-textarea .ant-input,
-.ant-input-number-group,
-.ant-modal-content,
-.ant-btn-dashed {
-  border-radius: 6px !important;
-  overflow: hidden;
-}
-.ant-input-affix-wrapper:hover,
-.ant-input-affix-wrapper:focus,
-textarea .ant-input:hover,
-textarea .ant-input:focus,
-.ant-steps .ant-steps-item-process .ant-steps-item-icon,
-.ant-btn-dashed:hover,
-.ant-btn-dashed:focus {
-  color: @focus !important;
-  border-color: @focus !important;
-}
-
-.ant-input:hover,
-.ant-input:focus,
-.ant-dropdown-link,
-.ant-dropdown-link:focus,
-.ant-dropdown-link:hover,
-.ant-select-selector:focus,
-.ant-input-number-focused,
-.ant-select-selector:hover {
-  border-color: @focus !important;
-}
-.monaco-editor .line-numbers {
-  color: rgba(106, 106, 112, 0.6) !important;
-}
-.ant-segmented-item-input {
-  border-radius: 4px !important;
-}
-.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon,
-.ant-btn-primary,
-.ant-switch-checked {
-  background-color: @focus !important;
-}
-.popoverTitle {
-  .ant-popover-title {
-    padding-top: 12px;
-    padding-bottom: 0;
+#TUGRAPH_DB_BROWSER {
+  .ant-upload,
+  .ant-input,
+  .ant-select-selector,
+  .ant-input-affix-wrapper,
+  .ant-btn,
+  textarea .ant-input,
+  .ant-input-number-group,
+  .ant-modal-content,
+  .ant-btn-dashed {
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .ant-steps-item-finish .ant-steps-item-icon,
+  .ant-input-affix-wrapper-focused,
+  .ant-pagination-item-active,
+  .ant-select-focused,
+  .ant-select-focused:not(.ant-select-disabled).ant-select:not(
+      .ant-select-customize-input
+    )
+    .ant-select-selector {
+    border-color: @focus;
+  }
+  .ant-steps-item-finish
+    > .ant-steps-item-container
+    > .ant-steps-item-content
+    > .ant-steps-item-title::after {
+    background-color: @focus;
+  }
+  .ant-input-affix-wrapper:hover,
+  .ant-input-affix-wrapper:focus,
+  .ant-btn:hover,
+  .ant-btn:focus,
+  textarea .ant-input:hover,
+  textarea .ant-input:focus,
+  .ant-steps .ant-steps-item-process .ant-steps-item-icon,
+  .ant-pagination-item-active,
+  .ant-btn-dashed:hover,
+  .ant-btn-dashed:focus {
+    color: @focus;
+    border-color: @focus;
+  }
+  .ant-btn-link:hover,
+  .ant-btn-link:focus,
+  .ant-upload:hover,
+  .ant-upload:focus,
+  .ant-input:hover,
+  .ant-input:focus,
+  .ant-dropdown-link,
+  .ant-dropdown-link:focus,
+  .ant-dropdown-link:hover,
+  .ant-select:focus,
+  .ant-input-number-focused,
+  .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
+  .ant-select:hover {
+    border-color: @focus;
+  }
+  .ant-btn-primary,
+  .ant-btn-primary:focus,
+  .ant-btn-primary:hover {
+    color: #fff;
+    background-color: @focus;
+  }
+  .monaco-editor .line-numbers {
+    color: rgba(106, 106, 112, 0.6);
+  }
+  .ant-segmented-item-input,
+  .ant-pagination-item,
+  .ant-pagination-item-active {
+    border-radius: 4px;
+  }
+  .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon,
+  .ant-switch-checked {
+    background-color: @focus;
+  }
+  .popoverTitle {
+    .ant-popover-title {
+      padding-top: 16px;
+      padding-bottom: 0;
+    }
+  }
+  .ant-segmented,
+  .ant-segmented-group,
+  .ant-segmented-item {
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .ant-btn-link,
+  .ant-menu-item-selected,
+  .ant-pagination-item-active a,
+  .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
+    color: @focus;
   }
-}
-.ant-segmented,
-.ant-segmented-group,
-.ant-segmented-item {
-  border-radius: 6px !important;
-  overflow: hidden;
-}
 
-.ant-menu-item-selected {
-  color: @focus !important;
-}
+  .ant-input-number {
+    border-radius: 6px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .ant-input-number-group-addon {
+    border-radius: 6px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .ant-input[disabled],
+  .ant-input[disabled]:hover,
+  .ant-input[disabled]:focus,
+  .ant-input[disabled]:active,
+  .ant-select[disabled],
+  .ant-select[disabled]:hover,
+  .ant-select[disabled]:focus,
+  .ant-select[disabled]:active,
+  .ant-select-disabled,
+  .ant-select-disabled:focus,
+  .ant-select-disabled:hover,
+  .ant-btn[disabled],
+  .ant-btn[disabled]:hover,
+  .ant-btn[disabled]:focus,
+  .ant-btn[disabled]:active {
+    color: rgba(0, 0, 0, 0.25);
+    border-color: #d9d9d9;
+    background: #f5f5f5;
+    text-shadow: none;
+    box-shadow: none;
+  }
 
-.ant-input-number {
-  border-radius: 6px !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
+  .ant-select-disabled
+    .ant-select:not(.ant-select-customize-input)
+    .ant-select-selector {
+    color: rgba(0, 0, 0, 0.25);
+    background: #f5f5f5;
+    cursor: not-allowed;
+  }
+  .ant-space-item {
+    display: flex;
+  }
 }
-.ant-input-number-group-addon {
-  border-radius: 6px !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
+.gi-rich-container .gi-rich-container-toolbar .toolbar-item .ant-btn-primary {
+  background-color: #fff;
+  border-color: #fff;
+  color: rgb(106, 107, 113);
 }
diff --git a/client/src/layouts/index.less b/client/src/layouts/index.less
index a569ffa5..a89d0e2b 100644
--- a/client/src/layouts/index.less
+++ b/client/src/layouts/index.less
@@ -27,18 +27,22 @@
     align-items: center;
     width: 100%;
     .link {
-      padding: 0 12px;
+      margin: 0 12px;
       cursor: pointer;
-      height: 54px;
+      height: 48px;
       background-color: #e4ebff;
-      color: rgba(54, 55, 64, 1);
+      color: rgba(26, 27, 37, 0.65);
+      font-size: 16px;
     }
     .linked {
-      padding: 0 12px;
+      margin: 0 12px;
       cursor: pointer;
-      height: 54px;
+      height: 48px;
+      font-size: 16px;
       background-color: #e4ebff;
-      color: rgba(26, 27, 37, 0.65);
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: bold;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.85);
     }
   }
 }
diff --git a/client/src/layouts/index.tsx b/client/src/layouts/index.tsx
index f2ad88de..8d1bcf6e 100644
--- a/client/src/layouts/index.tsx
+++ b/client/src/layouts/index.tsx
@@ -7,7 +7,11 @@ import './global.less';
 
 export const Container = (props: React.ComponentProps<any>) => {
   return (
-    <div className={styles?.umiContainer} style={props?.style}>
+    <div
+      className={styles?.umiContainer}
+      style={props?.style}
+      id="TUGRAPH_DB_BROWSER"
+    >
       {props?.children}
     </div>
   );
diff --git a/client/src/pages/construct.tsx b/client/src/pages/construct.tsx
index 5ab3a1db..d8c07bb6 100644
--- a/client/src/pages/construct.tsx
+++ b/client/src/pages/construct.tsx
@@ -1,7 +1,12 @@
 import Construct from '@/components/studio/domain-core/graph-construct';
+import { Container } from '@/layouts';
 
 const ConstructPage = () => {
-  return <Construct />;
+  return (
+    <Container>
+      <Construct />
+    </Container>
+  );
 };
 
 export default ConstructPage;
diff --git a/client/src/pages/query.tsx b/client/src/pages/query.tsx
index ec0ac1e9..4ee68659 100644
--- a/client/src/pages/query.tsx
+++ b/client/src/pages/query.tsx
@@ -1,7 +1,12 @@
 import Query from '@/components/studio/domain-core/graph-query';
+import { Container } from '@/layouts';
 
 const QueryPage = () => {
-  return <Query />;
+  return (
+    <Container>
+      <Query />
+    </Container>
+  );
 };
 
 export default QueryPage;

From 58d2ea04a57f2ed0bf434df826e08f964e9cd0ce Mon Sep 17 00:00:00 2001
From: noneAuth <wb-zqm915773@antgroup.com>
Date: Thu, 14 Dec 2023 14:35:29 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E6=96=B0=E6=89=8B=E5=BC=95?=
 =?UTF-8?q?=E5=AF=BC=E7=9B=B8=E5=85=B3=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/guidance/assets/index.ts   |  57 ++++++---
 client/src/components/guidance/index.tsx      | 119 ++++++++++++++----
 client/src/components/guidance/spread.tsx     |  32 ++++-
 client/src/pages/analysis.tsx                 |   4 +-
 4 files changed, 160 insertions(+), 52 deletions(-)

diff --git a/client/src/components/guidance/assets/index.ts b/client/src/components/guidance/assets/index.ts
index 99e7fbc6..a40e156a 100644
--- a/client/src/components/guidance/assets/index.ts
+++ b/client/src/components/guidance/assets/index.ts
@@ -1,22 +1,41 @@
 export const Assets = {
-  welcome: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*gACYRIZ5m0YAAAAAAAAAAAAADgOBAQ/fmt.webp',
-  query: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*UhR6QpIWBmIAAAAAAAAAAAAADgOBAQ/fmt.webp',
-  spread: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*6g-mS7BKH_kAAAAAAAAAAAAADgOBAQ/fmt.webp',
-  styleBtn: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*Ls3WRaRHU30AAAAAAAAAAAAADgOBAQ/original',
-  stylePanel: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*4OutRZw69QIAAAAAAAAAAAAADgOBAQ/fmt.webp',
-  filterBtn: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*CiM9R73L10cAAAAAAAAAAAAADgOBAQ/original',
-  filterPanel: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*QlKsS4gxcT8AAAAAAAAAAAAADgOBAQ/fmt.webp',
-  download: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*QjWNRZ-LQ2kAAAAAAAAAAAAADgOBAQ/original',
+  welcome:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*gACYRIZ5m0YAAAAAAAAAAAAADgOBAQ/fmt.webp',
+  query:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*UhR6QpIWBmIAAAAAAAAAAAAADgOBAQ/fmt.webp',
+  spread:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*jpB0Q7Hbm5sAAAAAAAAAAAAADgOBAQ/original',
+  styleBtn:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*Ls3WRaRHU30AAAAAAAAAAAAADgOBAQ/original',
+  stylePanel:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*4OutRZw69QIAAAAAAAAAAAAADgOBAQ/fmt.webp',
+  filterBtn:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*CiM9R73L10cAAAAAAAAAAAAADgOBAQ/original',
+  filterPanel:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*QlKsS4gxcT8AAAAAAAAAAAAADgOBAQ/fmt.webp',
+  download:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*QjWNRZ-LQ2kAAAAAAAAAAAAADgOBAQ/original',
   end: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*-a6uRYo-9qEAAAAAAAAAAAAADgOBAQ/fmt.webp',
-  close: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*1qMxQ4fS3e0AAAAAAAAAAAAADgOBAQ/original',
-  btnWelcome: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*-0IkQ4wm8TEAAAAAAAAAAAAADgOBAQ/original',
-  btnNext: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*T7bRTrLqVcUAAAAAAAAAAAAADgOBAQ/original',
-  btnEnd: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*8lvqQr_me34AAAAAAAAAAAAADgOBAQ/original',
-  afterStyle: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*x3QnTr_EA2oAAAAAAAAAAAAADgOBAQ/original',
-  afterFilter: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*iWG-S7i0c6EAAAAAAAAAAAAADgOBAQ/original',
-  afterSpread: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*2XqOQ4y9pjsAAAAAAAAAAAAADgOBAQ/original',
-  styleGif: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*v8SsRJ0mkFAAAAAAAAAAAAAADgOBAQ/original',
-  spreadGif: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*P2nrTLAjhCkAAAAAAAAAAAAADgOBAQ/original',
-  queryGif: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*hsYDRLBPUj8AAAAAAAAAAAAADgOBAQ/original',
-  filterGif: 'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*p8zcR7cc0tQAAAAAAAAAAAAADgOBAQ/original',
+  close:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*1qMxQ4fS3e0AAAAAAAAAAAAADgOBAQ/original',
+  btnWelcome:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*-0IkQ4wm8TEAAAAAAAAAAAAADgOBAQ/original',
+  btnNext:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*T7bRTrLqVcUAAAAAAAAAAAAADgOBAQ/original',
+  btnEnd:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*8lvqQr_me34AAAAAAAAAAAAADgOBAQ/original',
+  afterStyle:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*x3QnTr_EA2oAAAAAAAAAAAAADgOBAQ/original',
+  afterFilter:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*q5jTQ5vZLAQAAAAAAAAAAAAADgOBAQ/original',
+  afterSpread:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*k8NSR4y7j40AAAAAAAAAAAAADgOBAQ/original',
+  styleGif:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*v8SsRJ0mkFAAAAAAAAAAAAAADgOBAQ/original',
+  spreadGif:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*P2nrTLAjhCkAAAAAAAAAAAAADgOBAQ/original',
+  queryGif:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*hsYDRLBPUj8AAAAAAAAAAAAADgOBAQ/original',
+  filterGif:
+    'https://mdn.alipayobjects.com/huamei_qcdryc/afts/img/A*p8zcR7cc0tQAAAAAAAAAAAAADgOBAQ/original',
 };
diff --git a/client/src/components/guidance/index.tsx b/client/src/components/guidance/index.tsx
index 76de225b..338fbbad 100644
--- a/client/src/components/guidance/index.tsx
+++ b/client/src/components/guidance/index.tsx
@@ -39,29 +39,50 @@ function getBoundings(selector: string): DOMRect {
 
 function getClipPathByTwoRect(rect: DOMRect, fullscreen: DOMRect) {
   const rects = [
-    [[fullscreen.left, fullscreen.top], [rect.left, fullscreen.bottom]],
-    [[rect.right, fullscreen.top], [fullscreen.right, fullscreen.bottom]],
-    [[rect.left, fullscreen.top], [rect.right, rect.top]],
-    [[rect.left, rect.bottom], [rect.right, fullscreen.bottom]],
+    [
+      [fullscreen.left, fullscreen.top],
+      [rect.left, fullscreen.bottom],
+    ],
+    [
+      [rect.right, fullscreen.top],
+      [fullscreen.right, fullscreen.bottom],
+    ],
+    [
+      [rect.left, fullscreen.top],
+      [rect.right, rect.top],
+    ],
+    [
+      [rect.left, rect.bottom],
+      [rect.right, fullscreen.bottom],
+    ],
   ];
 
   const points = rects.map(([p1, p2]) => {
-    return [[p1[0], p1[1]], [p2[0], p1[1]], [p2[0], p2[1]], [p1[0], p2[1]]];
-  })
+    return [
+      [p1[0], p1[1]],
+      [p2[0], p1[1]],
+      [p2[0], p2[1]],
+      [p1[0], p2[1]],
+    ];
+  });
 
-  const path = points.map(point => (
-    point.map(([x, y], idx) => idx === 0 ? `M${x},${y}` : `L${x},${y}`).join(' ') + 'Z'
-  ));
+  const path = points.map(
+    point =>
+      point
+        .map(([x, y], idx) => (idx === 0 ? `M${x},${y}` : `L${x},${y}`))
+        .join(' ') + 'Z',
+  );
   return `path("${path.join(' ')}")`;
 }
 
 /**
  * 新手引导组件
- * @returns 
+ * @returns
  */
 export const Guidance: React.FC = () => {
   // localStorage 存储
-  const [isGuidanceFinished, setGuidanceFinished] = useLocalStorageState<string>(LocalStorageKey);
+  const [isGuidanceFinished, setGuidanceFinished] =
+    useLocalStorageState<string>(LocalStorageKey);
 
   const [step, setStep] = useState<number>(0);
 
@@ -90,47 +111,87 @@ export const Guidance: React.FC = () => {
       setStep(-1);
       setGuidanceFinished('1');
     },
-  }
+  };
 
   function getGuidanceUI() {
-    if (step === 0) return (<Welcome {...props} />);
+    if (step === 0) return <Welcome {...props} />;
     if (step === 1) {
       const rect = getBoundings(SelectorSidebar);
-      return (<Query {...props } x={rect.right - 16} y={rect.top + 100} />);
+      return <Query {...props} x={rect.right - 16} y={rect.top + 100} />;
     }
     if (step === 2) {
       const rect = getBoundings(SelectorCanvas);
-      return (<Spread {...props } x={rect.x + rect.width * 0.382} y={300} />);
+      return <Spread {...props} x={rect.x + rect.width * 0.382} y={300} />;
     }
     if (step === 3) {
       const rect = getBoundings(SelectorStyle);
       const canvasRect = getBoundings(SelectorCanvas);
       // 32px 是箭头的偏移
-      return (<StyleBtn {...props } x={rect.x + rect.width / 2 - 32} y={rect.bottom} canvasX={canvasRect.x + canvasRect.width * 0.382} canvasY={300} />);
+      return (
+        <StyleBtn
+          {...props}
+          x={rect.x + rect.width / 2 - 32}
+          y={rect.bottom}
+          canvasX={canvasRect.x + canvasRect.width * 0.382}
+          canvasY={300}
+        />
+      );
     }
     if (step === 4) {
       const rect = getBoundings(SelectorSidebar);
       const canvasRect = getBoundings(SelectorCanvas);
-      return (<StylePanel {...props } x={rect.right - 16} y={rect.top + 200} canvasX={canvasRect.x + canvasRect.width * 0.382} canvasY={300} />);
+      return (
+        <StylePanel
+          {...props}
+          x={rect.right - 16}
+          y={rect.top + 200}
+          canvasX={canvasRect.x + canvasRect.width * 0.382}
+          canvasY={300}
+        />
+      );
     }
     if (step === 5) {
       const rect = getBoundings(SelectorFilter);
       const canvasRect = getBoundings(SelectorCanvas);
       // 32px 是箭头的偏移
-      return (<FilterBtn {...props } x={rect.x + rect.width / 2 - 32} y={rect.bottom} canvasX={canvasRect.x + canvasRect.width * 0.382} canvasY={300} />);
+      return (
+        <FilterBtn
+          {...props}
+          x={rect.x + rect.width / 2 - 32}
+          y={rect.bottom}
+          canvasX={canvasRect.x + canvasRect.width * 0.382}
+          canvasY={300}
+        />
+      );
     }
     if (step === 6) {
       const rect = getBoundings(SelectorSidebar);
       const canvasRect = getBoundings(SelectorCanvas);
-      return (<FilterPanel {...props }  x={rect.right - 16} y={rect.top + 100} canvasX={canvasRect.x + canvasRect.width * 0.382} canvasY={300} />);
+      return (
+        <FilterPanel
+          {...props}
+          x={rect.right - 16}
+          y={rect.top + 100}
+          canvasX={canvasRect.x + canvasRect.width * 0.382}
+          canvasY={300}
+        />
+      );
     }
     if (step === 7) {
       const rect = getBoundings(SelectorDownload);
       const canvasRect = getBoundings(SelectorCanvas);
-      return (<Download {...props } x={rect.x + rect.width / 2} y={rect.bottom} canvasX={canvasRect.x + canvasRect.width * 0.382} canvasY={300} />);
+      return (
+        <Download
+          {...props}
+          x={rect.x + rect.width / 2}
+          y={rect.bottom}
+          canvasX={canvasRect.x + canvasRect.width * 0.382}
+          canvasY={300}
+        />
+      );
     }
     if (step === 8) {
-      return (<End {...props } />);
+      return <End {...props} />;
     }
     return null;
   }
@@ -157,9 +218,15 @@ export const Guidance: React.FC = () => {
     return 'none';
   }
 
-  return !isGuidanceFinished && 
-    <div className={styles.guidance} style={{ display: step >= 0 && step <= 8 ? 'unset' : 'none' }}>
-      <div className={styles.mask} style={{ clipPath: getClipPath() }} />
-      { getGuidanceUI() }
-    </div>;
+  return (
+    !isGuidanceFinished && (
+      <div
+        className={styles.guidance}
+        style={{ display: step >= 0 && step <= 8 ? 'unset' : 'none' }}
+      >
+        <div className={styles.mask} style={{ clipPath: getClipPath() }} />
+        {getGuidanceUI()}
+      </div>
+    )
+  );
 };
diff --git a/client/src/components/guidance/spread.tsx b/client/src/components/guidance/spread.tsx
index eabb56b3..2abe3660 100644
--- a/client/src/components/guidance/spread.tsx
+++ b/client/src/components/guidance/spread.tsx
@@ -6,21 +6,41 @@ import styles from './index.module.less';
 
 /**
  * 新手引导 - 扩散
- * @returns 
+ * @returns
  */
-export const Spread: React.FC<StepUIProps> = ({ prev, next, end, x = 0, y = 0 }) => {
+export const Spread: React.FC<StepUIProps> = ({
+  prev,
+  next,
+  end,
+  x = 0,
+  y = 0,
+}) => {
   return (
     <div className={styles.spread} style={{ top: y, left: x }}>
       <div className={styles.container}>
-        <img className={styles.background} style={{ width: 430 }} src={Assets.spread} />
-        <img className={styles.gif} src={Assets.spreadGif} style={{ top: 82, left: 77, maxWidth: 246 }} />
+        <img
+          className={styles.background}
+          style={{ width: 430 }}
+          src={Assets.spread}
+        />
+        <img
+          className={styles.gif}
+          src={Assets.spreadGif}
+          style={{ top: 105, left: 92, width: '238px', height: '206px' }}
+        />
         <div className={styles.btnContainer} style={{ top: 356, left: 245 }}>
           <div className={styles.nextBtn}>
             <img className={styles.btnBackground} src={Assets.btnNext} />
-            <div className={styles.nextText} onClick={next}>下一步</div>
+            <div className={styles.nextText} onClick={next}>
+              下一步
+            </div>
           </div>
         </div>
-        <div className={styles.close} onClick={end} style={{ top: 0, left: 358 }}>
+        <div
+          className={styles.close}
+          onClick={end}
+          style={{ top: 0, left: 358 }}
+        >
           <img src={Assets.close} />
         </div>
       </div>
diff --git a/client/src/pages/analysis.tsx b/client/src/pages/analysis.tsx
index 7ff77415..d8a254d0 100644
--- a/client/src/pages/analysis.tsx
+++ b/client/src/pages/analysis.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import { useRafInterval } from 'ahooks';
 import { Guidance } from '@/components/guidance';
 import TuGraphGraphAppConfig from '@/constants/GI_EXPORT_FILES';
-import '../components/studio/global.less'
+import '../components/studio/global.less';
+import { setLocalData } from '@/components/studio';
 
 //@ts-ignore
 const { default: GI_SDK_APP } = window?.GI_SDK_APP;
@@ -25,6 +26,7 @@ const GraphAnalysis = () => {
     }
   }, 100);
   useEffect(() => {
+    setLocalData('ActiveAssetID', 'ConfigQuery');
     if (ready) clearInterval();
   }, [ready]);
   // end 循环检测

From 235bcd58f0662cbea8578d5e9cab255562702a6a Mon Sep 17 00:00:00 2001
From: noneAuth <wb-zqm915773@antgroup.com>
Date: Thu, 14 Dec 2023 15:05:41 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=96=B0=E6=89=8B=E5=BC=95?=
 =?UTF-8?q?=E5=AF=BC=E7=9B=B8=E5=85=B3=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/analysis.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/pages/analysis.tsx b/client/src/pages/analysis.tsx
index d8a254d0..5afdae9e 100644
--- a/client/src/pages/analysis.tsx
+++ b/client/src/pages/analysis.tsx
@@ -3,7 +3,6 @@ import { useRafInterval } from 'ahooks';
 import { Guidance } from '@/components/guidance';
 import TuGraphGraphAppConfig from '@/constants/GI_EXPORT_FILES';
 import '../components/studio/global.less';
-import { setLocalData } from '@/components/studio';
 
 //@ts-ignore
 const { default: GI_SDK_APP } = window?.GI_SDK_APP;
@@ -26,7 +25,6 @@ const GraphAnalysis = () => {
     }
   }, 100);
   useEffect(() => {
-    setLocalData('ActiveAssetID', 'ConfigQuery');
     if (ready) clearInterval();
   }, [ready]);
   // end 循环检测