diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 58f370169..ffa33cc3d 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -1,32 +1,36 @@
 <template>
   <div :class="['editor-container', { 'editor-container-full': fullscreen }]">
-    <div class="toolbar">
-      <div class="toolbar-start">
-        <slot name="toolbarStart"></slot>
-      </div>
-      <div :class="['buttons', { fullscreen: fullscreen }]">
-        <slot name="buttons"></slot>
-        <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
-          <public-icon name="json" @click="formatCode"></public-icon>
-        </tiny-tooltip>
-        <span v-if="showFullScreenBtn">
-          <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
-            <public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
-          </tiny-tooltip>
-          <tiny-tooltip v-else content="退出全屏" placement="top">
-            <public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
+    <slot v-if="fullscreen" name="fullscreenHead"></slot>
+    <div class="editor-container-content">
+      <div class="toolbar">
+        <div class="toolbar-start">
+          <slot name="toolbarStart"></slot>
+        </div>
+        <div :class="['buttons', { fullscreen: fullscreen }]">
+          <slot name="buttons"></slot>
+          <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
+            <public-icon name="json" @click="formatCode"></public-icon>
           </tiny-tooltip>
-        </span>
+          <span v-if="showFullScreenBtn">
+            <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
+              <public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
+            </tiny-tooltip>
+            <tiny-tooltip v-else content="退出全屏" placement="top">
+              <public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
+            </tiny-tooltip>
+          </span>
+        </div>
       </div>
+      <monaco-editor
+        ref="editor"
+        class="editor"
+        :value="value"
+        :options="editorOptions"
+        language="javascript"
+        @editorDidMount="$emit('editorDidMount', $event)"
+      ></monaco-editor>
     </div>
-    <monaco-editor
-      ref="editor"
-      class="editor"
-      :value="value"
-      :options="editorOptions"
-      language="javascript"
-      @editorDidMount="$emit('editorDidMount', $event)"
-    ></monaco-editor>
+    <slot v-if="fullscreen" name="fullscreenFooter"></slot>
   </div>
 </template>
 
@@ -164,6 +168,11 @@ export default {
   }
 }
 
+.editor-container-content {
+  flex: 1;
+  overflow: hidden;
+}
+
 .editor {
   flex: 1;
   overflow: hidden;
diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index ec55cb924..a09a3d633 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -13,8 +13,8 @@
       <tiny-input v-model="state.storeData.name" placeholder="只能包含数字字母及下划线"></tiny-input>
     </tiny-form-item>
     <tiny-collapse v-model="state.activeName">
-      <tiny-collapse-item title="state" name="state">
-        <tiny-form-item prop="state">
+      <tiny-collapse-item :title="STATE" :name="STATE">
+        <tiny-form-item :prop="STATE">
           <monaco-editor
             ref="variableEditor"
             class="store-editor"
@@ -32,27 +32,34 @@
             <template #toolbarStart>
               <div class="label-left-wrap"></div>
             </template>
+            <template #fullscreenHead>
+              <state-fullscreen-head :title="STATE" @close="cancel"></state-fullscreen-head>
+            </template>
+            <template #fullscreenFooter>
+              <div class="fullscreen-footer-content">
+                <state-tips></state-tips>
+              </div>
+            </template>
           </monaco-editor>
-          <div class="tips">
-            <div>字符串:"string"</div>
-            <div>数字:123</div>
-            <div>布尔值:true/false</div>
-            <div>对象:{"name":"xxx"}</div>
-            <div>数组:["1","2"]</div>
-            <div>空值:null</div>
-            <div>"color":red</div>
-            <div>"background":"blue"</div>
-          </div>
+          <state-tips></state-tips>
         </tiny-form-item>
       </tiny-collapse-item>
-      <tiny-collapse-item title="getters" name="getters">
-        <tiny-form-item prop="getters">
-          <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters"> </monaco-editor>
+      <tiny-collapse-item :title="GETTERS" :name="GETTERS">
+        <tiny-form-item :prop="GETTERS">
+          <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
+            <template #fullscreenHead>
+              <state-fullscreen-head :title="GETTERS" @close="cancel"></state-fullscreen-head>
+            </template>
+          </monaco-editor>
         </tiny-form-item>
       </tiny-collapse-item>
-      <tiny-collapse-item title="actions" name="actions">
-        <tiny-form-item prop="actions">
-          <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions"> </monaco-editor>
+      <tiny-collapse-item :title="ACTIONS" :name="ACTIONS">
+        <tiny-form-item :prop="ACTIONS">
+          <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
+            <template #fullscreenHead>
+              <state-fullscreen-head :title="ACTIONS" @close="cancel"></state-fullscreen-head>
+            </template>
+          </monaco-editor>
         </tiny-form-item>
       </tiny-collapse-item>
     </tiny-collapse>
@@ -65,10 +72,14 @@ import { Form, FormItem, Input, Collapse as TinyCollapse, CollapseItem as TinyCo
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
 import { string2Ast, ast2String, insertName } from '@opentiny/tiny-engine-common/js/ast'
 import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
+import StateTips from './StateTips.vue'
+import StateFullscreenHead from './StateFullscreenHead.vue'
 
 export default {
   components: {
     MonacoEditor,
+    StateTips,
+    StateFullscreenHead,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
@@ -89,7 +100,11 @@ export default {
       type: String
     }
   },
+  emits: ['close'],
   setup(props, { emit }) {
+    const STATE = 'state'
+    const GETTERS = 'getters'
+    const ACTIONS = 'actions'
     const instance = getCurrentInstance()
     const isDemoShow = ref(false)
     const gettersEditor = ref(null)
@@ -205,7 +220,14 @@ export default {
       return Object.prototype.toString.call(variable) === '[object Object]'
     }
 
+    const cancel = () => {
+      emit('close')
+    }
+
     return {
+      STATE,
+      GETTERS,
+      ACTIONS,
       isDemoShow,
       state,
       getEditor,
@@ -219,7 +241,8 @@ export default {
       actionsEditor,
       editorDidMount,
       variableEditor,
-      actions
+      actions,
+      cancel
     }
   }
 }
@@ -229,15 +252,6 @@ export default {
 .store-form {
   height: calc(100% - 45px);
   overflow-y: auto;
-  .tips {
-    font-size: 11px;
-    line-height: 18px;
-    margin-top: 8px;
-    border-radius: 4px;
-    padding: 8px 14px;
-    background: var(--ti-lowcode-data-source-box-bg);
-    color: var(--ti-lowcode-datasource-tip-color);
-  }
   :deep(.tiny-collapse-item__wrap) {
     padding: 0 12px;
   }
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index 53b65ecad..4614d61fc 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -19,7 +19,7 @@
       <tiny-radio-group v-model="state.variableType" :options="VAR_TYPES"></tiny-radio-group>
     </tiny-form-item>
     <tiny-collapse v-model="state.activeName">
-      <tiny-collapse-item title="初始值" name="initValue">
+      <tiny-collapse-item :title="INIT" name="initValue">
         <tiny-form-item>
           <monaco-editor
             ref="variableEditor"
@@ -29,69 +29,32 @@
             :options="state.editorOptions"
             @editorDidMount="editorDidMount"
           >
-            <template #toolbarStart>
-              <div class="label-left-wrap">
-                <tiny-popover
-                  placement="bottom-start"
-                  effect="dark"
-                  trigger="hover"
-                  popper-class="state-data-example-tips"
-                >
-                  <div class="tips-content">
-                    <div class="create-content-head">
-                      <div class="create-content-tip">数据写法和JS写法一致</div>
-                    </div>
-                    <div class="create-content-demo">
-                      <ul>
-                        <li>字符串: "string"</li>
-                        <li>数字: 123</li>
-                        <li>布尔值: true/false</li>
-                        <li>对象: {"name": "xxx"}</li>
-                        <li>数组: ["1", "2"]</li>
-                        <li>空值: null</li>
-                        <li>JS表达式: (需要先选择JS表达式类型)</li>
-                        <li class="ml20">示例1： t('i18nkey1')</li>
-                        <li class="ml20">示例2： function fnName() {}</li>
-                        <li class="ml20">示例3： { getValue: () => {} }</li>
-                      </ul>
-                      <div class="create-content-foot">
-                        <div class="create-content-tip">
-                          注意：使用JS表达式定义state变量的时候无法调用state其他变量定义，<br />另由于JS函数定义在变量之后，也无法调用JS面板定义的函数
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </tiny-popover>
-              </div>
-            </template>
             <template #buttons>
               <editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
             </template>
+            <template #fullscreenHead>
+              <state-fullscreen-head :title="INIT" @close="cancel"></state-fullscreen-head>
+            </template>
+            <template #fullscreenFooter>
+              <div class="fullscreen-footer-content">
+                <state-tips></state-tips>
+              </div>
+            </template>
           </monaco-editor>
-          <div class="tips">
-            <div>字符串:"string"</div>
-            <div>数字:123</div>
-            <div>布尔值:true/false</div>
-            <div>对象:{"name":"xxx"}</div>
-            <div>数组:["1","2"]</div>
-            <div>空值:null</div>
-            <div>"color":red</div>
-            <div>"background":"blue"</div>
-          </div>
+          <state-tips></state-tips>
         </tiny-form-item>
       </tiny-collapse-item>
-      <tiny-collapse-item title="getter" name="getter">
+      <tiny-collapse-item :title="GETTER" :name="GETTER">
         <tiny-form-item>
           <monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue">
-            <template #toolbarStart>
-              <div class="label-left-wrap">
-                <tiny-popover placement="bottom-start" trigger="hover" popper-class="state-data-example-tips">
-                  <div class="tips-content">
-                    <div class="create-content-demo">
-                      <pre><code>{{ getterExample }}</code></pre>
-                    </div>
-                  </div>
-                </tiny-popover>
+            <template #fullscreenHead>
+              <state-fullscreen-head :title="GETTER" @close="cancel"></state-fullscreen-head>
+            </template>
+            <template #fullscreenFooter>
+              <div class="fullscreen-footer-content">
+                <div class="tips">
+                  <pre><code>{{ getterExample }}</code></pre>
+                </div>
               </div>
             </template>
           </monaco-editor>
@@ -100,18 +63,17 @@
           </div>
         </tiny-form-item>
       </tiny-collapse-item>
-      <tiny-collapse-item title="setter" name="setter">
+      <tiny-collapse-item :title="SETTER" :name="SETTER">
         <tiny-form-item>
           <monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue">
-            <template #toolbarStart>
-              <div class="label-left-wrap">
-                <tiny-popover placement="bottom-start" trigger="hover" popper-class="state-data-example-tips">
-                  <div class="tips-content">
-                    <div class="create-content-demo">
-                      <pre><code>{{ setterExample }}</code></pre>
-                    </div>
-                  </div>
-                </tiny-popover>
+            <template #fullscreenHead>
+              <state-fullscreen-head :title="SETTER" @close="cancel"></state-fullscreen-head>
+            </template>
+            <template #fullscreenFooter>
+              <div class="fullscreen-footer-content">
+                <div class="tips">
+                  <pre><code>{{ setterExample }}</code></pre>
+                </div>
               </div>
             </template>
           </monaco-editor>
@@ -127,7 +89,6 @@
 <script>
 import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
 import {
-  Popover,
   Form,
   FormItem,
   Input,
@@ -141,14 +102,17 @@ import { initCompletion } from '@opentiny/tiny-engine-common/js/completion'
 import * as Monaco from 'monaco-editor'
 import { validateMonacoEditorData } from './js/common'
 import EditorI18nTool from './EditorI18nTool.vue'
+import StateTips from './StateTips.vue'
+import StateFullscreenHead from './StateFullscreenHead.vue'
 
 export default {
   components: {
     MonacoEditor,
+    StateTips,
+    StateFullscreenHead,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
-    TinyPopover: Popover,
     TinyRadioGroup: RadioGroup,
     EditorI18nTool,
     TinyCollapse,
@@ -168,8 +132,11 @@ export default {
       type: String
     }
   },
-  emits: ['nameInput'],
-  setup(props) {
+  emits: ['nameInput', 'close'],
+  setup(props, { emit }) {
+    const INIT = '初始值'
+    const GETTER = 'getter'
+    const SETTER = 'setter'
     const variableEditor = ref(null)
     const getterEditor = ref(null)
     const setterEditor = ref(null)
@@ -390,6 +357,10 @@ export default {
       monacoEditor.focus()
     }
 
+    const cancel = () => {
+      emit('close')
+    }
+
     const options = {
       lineNumbers: true,
       language: 'javascript',
@@ -403,6 +374,9 @@ export default {
       "function setter() {\r\n  // const [firstName, lastName] = this.state.name.split(' ')\r\n  // this.emit('update:firstName', firstName)\r\n  // this.emit('update:lastName', lastName)\r\n}" // eslint-disable-line
 
     return {
+      INIT,
+      GETTER,
+      SETTER,
       state,
       VAR_TYPES,
       variableEditor,
@@ -419,7 +393,8 @@ export default {
       editorDidMount,
       validate,
       getFormData,
-      insertContent
+      insertContent,
+      cancel
     }
   }
 }
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index ead5033b7..1f2ec4343 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -53,6 +53,7 @@
         :updateKey="updateKey"
         :createData="state.createData"
         @nameInput="updateName"
+        @close="cancel"
       />
       <create-store
         v-if="activeName === STATE.GLOBAL_STATE"
@@ -62,6 +63,7 @@
         :updateKey="updateKey"
         :storeData="state.createData"
         @nameInput="validName"
+        @close="cancel"
       />
     </div>
   </div>
diff --git a/packages/plugins/state/src/StateFullscreenHead.vue b/packages/plugins/state/src/StateFullscreenHead.vue
new file mode 100644
index 000000000..86f17ddf6
--- /dev/null
+++ b/packages/plugins/state/src/StateFullscreenHead.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="fullscreen-head-content">
+    <span>{{ title }}</span>
+    <close-icon @close="close"></close-icon>
+  </div>
+</template>
+<script>
+import { CloseIcon } from '@opentiny/tiny-engine-common'
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    CloseIcon
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const close = () => {
+      emit('close')
+    }
+
+    return {
+      close
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.fullscreen-head-content {
+  font-size: 12px;
+  color: var(--te-common-text-primary);
+  height: 30px;
+  line-height: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/packages/plugins/state/src/StateTips.vue b/packages/plugins/state/src/StateTips.vue
new file mode 100644
index 000000000..8599ba91b
--- /dev/null
+++ b/packages/plugins/state/src/StateTips.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="tips">
+    <div>字符串:"string"</div>
+    <div>数字:123</div>
+    <div>布尔值:true/false</div>
+    <div>对象:{"name":"xxx"}</div>
+    <div>数组:["1","2"]</div>
+    <div>空值:null</div>
+    <div>"color":red</div>
+    <div>"background":"blue"</div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tips {
+  font-size: 11px;
+  line-height: 18px;
+  margin-top: 8px;
+  border-radius: 4px;
+  padding: 8px 14px;
+  background: var(--ti-lowcode-data-source-box-bg);
+  color: var(--ti-lowcode-datasource-tip-color);
+}
+</style>