diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index 62f4f653d9..2977b040c8 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -10,19 +10,19 @@
       </tiny-button>
     </slot>
     <tiny-dialog-box
-        v-model:visible="editorState.show"
-        :title="titleLabel"
-        width="50vw"
-        class="meta-code-editor-dialog-box"
-        append-to-body
+      v-model:visible="editorState.show"
+      :title="titleLabel"
+      width="50vw"
+      class="meta-code-editor-dialog-box"
+      append-to-body
     >
       <div class="source-code">
         <div v-if="editorTipsTitle" class="header-tips-container">
           <span class="header-tips-title" :title="editorTipsTitle">{{ editorTipsTitle }}</span>
           <div
-              v-if="editorTipsDemo"
-              class="header-tips-showdemo"
-              @click="editorState.showEditorDemo = !editorState.showEditorDemo"
+            v-if="editorTipsDemo"
+            class="header-tips-showdemo"
+            @click="editorState.showEditorDemo = !editorState.showEditorDemo"
           >
             <span>{{ editorState.showEditorDemo ? $t('common.collapseExample') : $t('common.expandExample') }}</span>
             <icon-chevron-up v-if="editorState.showEditorDemo" class="collapse-icon"></icon-chevron-up>
@@ -35,11 +35,11 @@
           </div>
         </div>
         <monaco-editor
-            ref="editor"
-            class="source-code-content"
-            :value="value"
-            :options="options"
-            @editorDidMount="editorDidMount"
+          ref="editor"
+          class="source-code-content"
+          :value="value"
+          :options="options"
+          @editorDidMount="editorDidMount"
         ></monaco-editor>
         <div v-if="showErrorMsg" class="error-msg">{{ editorState.errorMsg }}</div>
       </div>
@@ -273,8 +273,9 @@ export default {
 }
 .full-width {
   border: 1px solid #adb0b8;
-  border-radius: 2px;
+  border-radius: 6px;
   padding: 4px 8px;
+  height: 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue
index f54967ab33..ae3855b1bf 100644
--- a/packages/plugins/page/src/PageInputOutput.vue
+++ b/packages/plugins/page/src/PageInputOutput.vue
@@ -7,22 +7,24 @@
       class="life-cycle-alert"
     ></tiny-alert>
     <tiny-form label-position="left" class="input-output-form">
-      <tiny-form-item label="输入配置">
+      <tiny-form-item label="输入配置" class="item-wrap">
         <meta-code-editor
           :modelValue="inputValue"
           title="输入配置"
           button-text="输入配置"
           language="json"
+          :buttonShowContent="hasContent(inputValue)"
           single
           @save="saveInputValue"
         ></meta-code-editor>
       </tiny-form-item>
-      <tiny-form-item label="输出配置">
+      <tiny-form-item label="输出配置" class="item-wrap">
         <meta-code-editor
           :modelValue="outputValue"
           title="输出配置"
           button-text="输出配置"
           language="json"
+          :buttonShowContent="hasContent(outputValue)"
           single
           @save="saveOutputValue"
         ></meta-code-editor>
@@ -86,12 +88,16 @@ export default {
       }
     }
 
+    const hasContent = (value) =>
+      (Array.isArray(value) && value.length > 0) || (typeof value === 'object' && Object.keys(value).length > 0)
+
     return {
       inputValue,
       outputValue,
       saveInputValue,
       saveOutputValue,
-      pageSettingState
+      pageSettingState,
+      hasContent
     }
   }
 }
@@ -120,6 +126,9 @@ export default {
   .input-output-form {
     margin-top: 16px;
     margin-left: 28px;
+    .item-wrap {
+      width: 348px;
+    }
     :deep(.tiny-form-item) {
       .tiny-form-item__label {
         font-size: 14px;