Merge pull request #623 from easyops-cn/jie/CMDB_INSTANCE-885

fix(): cmdb部分构件适配UI8.2
easyops-cn · Nov 10, 2023 · 4c0777b · 4c0777b
2 parents 5a62a7d + 05bcb7c
commit 4c0777b
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 20 deletions.
diff --git a/libs/cmdb-instances/src/cmdb-instances-select-panel/CmdbInstancesSelectPanel.tsx b/libs/cmdb-instances/src/cmdb-instances-select-panel/CmdbInstancesSelectPanel.tsx
@@ -305,7 +305,7 @@ export function CmdbInstancesSelectPanel(
         <a
           className={style.addButton}
           style={{
-            marginBottom: "12px",
+            marginBottom: "20px",
           }}
           onClick={openAddInstancesModal}
         >

diff --git a/libs/cmdb-instances/src/instance-list-table/AdvancedSearchCondition.module.css b/libs/cmdb-instances/src/instance-list-table/AdvancedSearchCondition.module.css
@@ -4,7 +4,7 @@
     rgb(250, 250, 250)
   );
   padding: 8px 16px;
-  margin-bottom: 18px;
+  margin-bottom: var(--page-padding-top) !important;
   border-radius: 6px;
 }
 

diff --git a/libs/cmdb-instances/src/instance-list-table/AdvancedSearchCondition.tsx b/libs/cmdb-instances/src/instance-list-table/AdvancedSearchCondition.tsx
@@ -197,7 +197,7 @@ export function AdvancedSearchCondition(
   return (
     <div className={styles.advancedSearchWrapper}>
       {!props?.hideDynamicSearch && (
-        <div style={{ marginBottom: "18px" }}>
+        <div style={{ marginBottom: "var(--page-padding-top)" }}>
           <DynamicSearch
             fields={state.fields}
             onSearch={onAdvancedSearch}

diff --git a/libs/cmdb-instances/src/instance-list/InstanceList.module.css b/libs/cmdb-instances/src/instance-list/InstanceList.module.css
@@ -1,7 +1,7 @@
 .instanceListToolbar {
   display: flex;
   align-items: center;
-  margin-bottom: 18px;
+  margin-bottom: var(--page-padding-top) !important;
   justify-content: space-between;
 }
 
@@ -21,7 +21,7 @@
     rgb(250, 250, 250)
   );
   padding: 8px 16px;
-  margin-bottom: 18px;
+  margin-bottom: var(--page-padding-top) !important;
   border-radius: 6px;
 }
 

diff --git a/libs/cmdb-instances/src/model-attribute-form/ModelAttributeForm.module.css b/libs/cmdb-instances/src/model-attribute-form/ModelAttributeForm.module.css
@@ -37,17 +37,40 @@
     }
   }
 }
+
+html[data-ui="v8-2"] .collapseStyle {
+  &:global(.ant-collapse) {
+    :global(.ant-collapse-content) {
+      padding-top: var(--page-padding-top);
+      :global(.ant-collapse-content-box) {
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+      :global(.ant-legacy-form-item) {
+        padding-bottom: 0px;
+      }
+      :global(.ant-legacy-form-item-children) {
+        :global(.ant-input-number) {
+          min-width: 260px;
+        }
+        :global(.ant-btn) {
+          padding-left: 0px;
+        }
+      }
+    }
+  }
+}
 .generalFormFooter {
   width: 100%;
   box-shadow: 0px -2px 8px 0px rgb(0 0 0 / 8%);
   border-radius: 0 0 6px 6px;
   position: absolute;
-  padding: 0px 20px;
   left: 0;
   bottom: 0;
   box-sizing: border-box;
   background: var(--antd-card-footer-bg);
   z-index: 998;
+  padding: 16px 20px 0;
   /* z-index为999时，会和侧边栏的z-index冲突，侧边栏的z-index也是999 */
 }
 .submitAndContinueBtn {

diff --git a/libs/cmdb-instances/src/model-attribute-form/ModelAttributeForm.tsx b/libs/cmdb-instances/src/model-attribute-form/ModelAttributeForm.tsx
@@ -114,10 +114,16 @@ export class ModelAttributeForm extends Component<
     cancelType: "default" as ButtonType,
   };
 
-  formItemProps: FormItemProps = {
-    labelCol: { span: 6 },
-    wrapperCol: { span: 18 },
-  };
+  formItemProps: FormItemProps =
+    document.querySelector("html")?.getAttribute("data-ui") === "v8-2"
+      ? {
+          labelCol: { span: 24 },
+          wrapperCol: { span: 24 },
+        }
+      : {
+          labelCol: { span: 6 },
+          wrapperCol: { span: 18 },
+        };
 
   getFeildTag(field: any) {
     return (
@@ -219,7 +225,10 @@ export class ModelAttributeForm extends Component<
       !!Object.keys(this.state.fixedStyle).length
     ) {
       this.setState({ fixedStyle: {} });
-    } else if (heightDifferenceBetweenCardRectAndViewPort > 0) {
+    } else if (
+      heightDifferenceBetweenCardRectAndViewPort > 0 ||
+      document.querySelector("html")?.getAttribute("data-ui") === "v8-2"
+    ) {
       this.resizeUpdate();
     }
   };
@@ -753,8 +762,6 @@ export class ModelAttributeForm extends Component<
         style={{
           ...this.state.fixedStyle,
           borderTop: "none",
-          paddingTop: "16px",
-          paddingLeft: "20px",
         }}
       >
         <div className="ant-collapse-content-box">

diff --git a/libs/cmdb-instances/src/struct-components/AddStruct.tsx b/libs/cmdb-instances/src/struct-components/AddStruct.tsx
@@ -136,7 +136,7 @@ export class AddStruct extends React.Component<AddStructProps, AddStructState> {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            marginBottom: 16,
+            marginBottom: 20,
           }}
         >
           {

diff --git a/libs/cmdb-utils/src/cmdbUtil.ts b/libs/cmdb-utils/src/cmdbUtil.ts
@@ -319,12 +319,22 @@ export function getFixedStyle(
   rootNodeRect: Record<string, any>
 ): Record<string, any> {
   if (rootNodeRect) {
-    const fixedStyle = {
-      position: "fixed",
-      left: rootNodeRect.left,
-      bottom: 0,
-      width: rootNodeRect?.width,
-    };
+    const fixedStyle =
+      document.querySelector("html")?.getAttribute("data-ui") === "v8-2"
+        ? {
+            position: "fixed",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            paddingLeft: rootNodeRect.left,
+            paddingTop: 0,
+          }
+        : {
+            position: "fixed",
+            left: rootNodeRect.left,
+            bottom: 0,
+            width: rootNodeRect?.width,
+          };
     return fixedStyle;
   }
   return {};