diff --git a/km-console/packages/layout-clusters-fe/package.json b/km-console/packages/layout-clusters-fe/package.json
index 4453210ba..9529094ed 100644
--- a/km-console/packages/layout-clusters-fe/package.json
+++ b/km-console/packages/layout-clusters-fe/package.json
@@ -108,6 +108,7 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "prettier": "2.3.2",
     "progress-bar-webpack-plugin": "^1.12.1",
+    "pubsub-js": "^1.9.4",
     "query-string": "^7.0.1",
     "react-refresh": "^0.10.0",
     "react-router-dom": "5.2.1",
diff --git a/km-console/packages/layout-clusters-fe/src/components/CardBar/ConnectDetailCard.tsx b/km-console/packages/layout-clusters-fe/src/components/CardBar/ConnectDetailCard.tsx
index f3f9f5453..615490958 100644
--- a/km-console/packages/layout-clusters-fe/src/components/CardBar/ConnectDetailCard.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/CardBar/ConnectDetailCard.tsx
@@ -49,7 +49,7 @@ const ConnectDetailCard = (props: { record: any }) => {
             return (
               <>
                 {
-                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 32, color: '#212529' }}>
+                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 28, color: '#212529' }}>
                     {Utils.firstCharUppercase(type) || '-'}
                   </span>
                 }
@@ -64,7 +64,7 @@ const ConnectDetailCard = (props: { record: any }) => {
             return (
               <>
                 {
-                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 32, color: stateEnum[state].color }}>
+                  <span style={{ fontFamily: 'HelveticaNeue-Medium', fontSize: 28, color: stateEnum[state].color }}>
                     {Utils.firstCharUppercase(state) || '-'}
                   </span>
                 }
diff --git a/km-console/packages/layout-clusters-fe/src/pages/Connect/index.less b/km-console/packages/layout-clusters-fe/src/pages/Connect/index.less
index c4e230942..75aba54b8 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/Connect/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/index.less
@@ -185,9 +185,10 @@
 
 .operate-connector-drawer-use-json {
   .CodeMirror.cm-s-default {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 196px);
   }
   .dcloud-form-item {
+    margin-top: 16px;
     margin-bottom: 0 !important;
   }
 }
diff --git a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx
index f2fa3c83f..da88da008 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 import EditTable from '../TestingProduce/component/EditTable';
 import Api from '@src/api/index';
 import moment from 'moment';
-import PubSub from 'pubsub-js'
+import PubSub from 'pubsub-js';
 
 const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => {
   const { value, onChange } = props;
diff --git a/km-console/packages/layout-clusters-fe/src/pages/MirrorMaker2/index.less b/km-console/packages/layout-clusters-fe/src/pages/MirrorMaker2/index.less
index 826649028..d73f5625a 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/MirrorMaker2/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/MirrorMaker2/index.less
@@ -185,7 +185,7 @@
 
 .operate-connector-drawer-use-json {
   .CodeMirror.cm-s-default {
-    height: calc(100vh - 146px);
+    height: calc(100vh - 196px);
   }
   .dcloud-form-item {
     margin-bottom: 0 !important;