issues/28440

public/react/src/modules/developer/components/initTabCtx/index.scss

@@ -1,58 +1,67 @@
-.tab_ctx_area{
+.tab_ctx_area {
   display: flex;
   height: 100%;
   color: #666;
   font-size: 14px;
-  &.pos_start{
+
+  &.pos_start {
     justify-content: flex-start;
   }
-  &.pos_center{
+
+  &.pos_center {
     justify-content: center;
     align-items: center;
   }
-  &.pos_end{
+
+  &.pos_end {
     justify-content: flex-end;
   }
-  .ctx_default{
+
+  .ctx_default {
     margin: 10px 20px;
   }
+
   .ctx_loading,
-  .ctx_loaded{
+  .ctx_loaded {
     display: flex;
     position: relative;
     flex-direction: column;
     top: -20px;
     color: #1890ff;
-    .ctx_icon{
+
+    .ctx_icon {
       font-size: 40px;
       margin-bottom: 10px;
     }
   }
 }
 
-.user_case_form{
+.user_case_form {
   display: flex;
   align-items: flex-start;
-  margin-top: 20px;
+  padding-top: 20px;
-  .input_area{
+
+  .input_area {
     flex: 1;
-    .ant-form-item-required{
+
+    .ant-form-item-required {
       color: #fff;
     }
   }
-  .flex_l{
+
+  .flex_l {
     padding: 0 10px 0 10px;
     color: #fff;
   }
-  .flex_r{
+
+  .flex_r {
     padding: 0 20px 0 10px;
   }
 
-  .input_textarea_style{
+  .input_textarea_style {
-    // background:rgba(30,30,30,1) !important;
+    background: rgba(7, 15, 25, 1) !important;
-    background:rgba(7,15,25,1) !important;
     color: #fff;
-    border-color: transparent;
+    border: 0px solid transparent !important;
     outline: none;
   }
-}
+}

public/react/src/modules/developer/components/myMonacoEditor/index.js

@@ -150,7 +150,6 @@ function MyMonacoEditor(props, ref) {
           onChange={onChangeHandler}
         />
       </div>
-
       <Drawer
         className={'setting_drawer'}
         placement="right"
@@ -164,6 +163,7 @@ function MyMonacoEditor(props, ref) {
         />
         <SettingDrawer {...opacitySetting} />
       </Drawer>
+
     </React.Fragment>
   )
 };

public/react/src/modules/developer/components/myMonacoEditor/index.scss

@@ -1,12 +1,19 @@
+.user_case_form,
+.excute_result_area {
+  background-color: rgba(7, 15, 25, 1);
+}
+
 .monaco_editor_area {
   height: 100%;
 
+  background-color: rgba(7, 15, 25, 1);
+
   .code_title {
     display: flex;
     align-items: center;
+    background-color: rgba(18, 28, 36, 1);
     color: #fff;
     height: 56px;
-    background-color: rgba(18, 28, 36, 1);
     padding: 0 20px;
 
     .flex_strict {
@@ -30,6 +37,17 @@
     }
   }
 
+  // .margin,
+  // .margin-view-overlays,
+  // .current-line{
+  //   width: 40px !important;
+  // }
+  // .monaco-editor .margin-view-overlays .line-numbers{
+  //   text-align: center;
+  // }
+  // .monaco-scrollable-element{
+  //   left: 40px !important;
+  // }
 }
 
 .setting_drawer {
@@ -71,6 +89,13 @@
   animation-iteration-count: 3;
 }
 
+// .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input,
+// .monaco-editor .margin,
+// .minimap slider-mouseover,
+// .minimap-decorations-layer{
+//   background:rgba(3,19,40,1) !important;
+// }
+
 @keyframes blink {
   50% {
     color: #fff;