From 8d4f3b23c3667b0963306c7fe6963719c831ebf8 Mon Sep 17 00:00:00 2001
From: lichunn <269031597@qq.com>
Date: Sat, 19 Oct 2024 03:04:12 -0700
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E7=8A=B6=E6=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=8F=92=E4=BB=B6=E7=9A=84=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=8A=A0=E4=B8=8A=E6=A0=87=E9=A2=98=E3=80=81?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E5=92=8C=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MonacoEditor.vue    |  59 +++++----
 packages/plugins/state/src/CreateStore.vue    |  72 ++++++----
 packages/plugins/state/src/CreateVariable.vue | 124 ++++++++----------
 packages/plugins/state/src/Main.vue           |   2 +
 packages/plugins/state/src/StateTips.vue      |  24 ++++
 5 files changed, 164 insertions(+), 117 deletions(-)
 create mode 100644 packages/plugins/state/src/StateTips.vue

diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 057c97dbd..117f03614 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>
 
@@ -137,7 +141,7 @@ export default {
   bottom: 0;
   left: calc(var(--base-nav-panel-width) + var(--base-left-panel-width));
   right: var(--base-left-panel-width);
-  z-index: 10;
+  z-index: 100;
   padding: 10px 16px 16px 16px;
   background-color: var(--ti-lowcode-common-component-bg);
   height: auto !important;
@@ -163,6 +167,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..afff6384d 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -32,27 +32,43 @@
             <template #toolbarStart>
               <div class="label-left-wrap"></div>
             </template>
+            <template #fullscreenHead>
+              <div class="fullscreen-head-content">
+                <span>state</span>
+                <close-icon @close="cancel"></close-icon>
+              </div>
+            </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>
+          <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
+            <template #fullscreenHead>
+              <div class="fullscreen-head-content">
+                <span>getters</span>
+                <close-icon @close="cancel"></close-icon>
+              </div>
+            </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>
+          <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
+            <template #fullscreenHead>
+              <div class="fullscreen-head-content">
+                <span>actions</span>
+                <close-icon @close="cancel"></close-icon>
+              </div>
+            </template>
+          </monaco-editor>
         </tiny-form-item>
       </tiny-collapse-item>
     </tiny-collapse>
@@ -62,13 +78,16 @@
 <script>
 import { getCurrentInstance, reactive, ref, computed, watch } from 'vue'
 import { Form, FormItem, Input, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { MonacoEditor } from '@opentiny/tiny-engine-common'
+import { MonacoEditor, CloseIcon } 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'
 
 export default {
   components: {
     MonacoEditor,
+    CloseIcon,
+    StateTips,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
@@ -89,6 +108,7 @@ export default {
       type: String
     }
   },
+  emits: ['close'],
   setup(props, { emit }) {
     const instance = getCurrentInstance()
     const isDemoShow = ref(false)
@@ -205,6 +225,10 @@ export default {
       return Object.prototype.toString.call(variable) === '[object Object]'
     }
 
+    const cancel = () => {
+      emit('close')
+    }
+
     return {
       isDemoShow,
       state,
@@ -219,7 +243,8 @@ export default {
       actionsEditor,
       editorDidMount,
       variableEditor,
-      actions
+      actions,
+      cancel
     }
   }
 }
@@ -229,15 +254,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;
   }
@@ -261,6 +277,16 @@ export default {
     color: var(--ti-lowcode-toolbar-icon-color);
     display: flex;
   }
+
+  .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;
+  }
 }
 
 .create-content-description {
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index 53b65ecad..8ee750633 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -29,69 +29,38 @@
             :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>
+              <div class="fullscreen-head-content">
+                <span>初始值</span>
+                <close-icon @close="cancel"></close-icon>
+              </div>
+            </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-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>
+              <div class="fullscreen-head-content">
+                <span>getter</span>
+                <close-icon @close="cancel"></close-icon>
+              </div>
+            </template>
+            <template #fullscreenFooter>
+              <div class="fullscreen-footer-content">
+                <div class="tips">
+                  <pre><code>{{ getterExample }}</code></pre>
+                </div>
               </div>
             </template>
           </monaco-editor>
@@ -103,15 +72,17 @@
       <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>
+              <div class="fullscreen-head-content">
+                <span>setter</span>
+                <close-icon @close="cancel"></close-icon>
+              </div>
+            </template>
+            <template #fullscreenFooter>
+              <div class="fullscreen-footer-content">
+                <div class="tips">
+                  <pre><code>{{ setterExample }}</code></pre>
+                </div>
               </div>
             </template>
           </monaco-editor>
@@ -127,7 +98,6 @@
 <script>
 import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
 import {
-  Popover,
   Form,
   FormItem,
   Input,
@@ -135,20 +105,22 @@ import {
   Collapse as TinyCollapse,
   CollapseItem as TinyCollapseItem
 } from '@opentiny/vue'
-import { MonacoEditor } from '@opentiny/tiny-engine-common'
+import { MonacoEditor, CloseIcon } from '@opentiny/tiny-engine-common'
 import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
 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'
 
 export default {
   components: {
     MonacoEditor,
+    CloseIcon,
+    StateTips,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
-    TinyPopover: Popover,
     TinyRadioGroup: RadioGroup,
     EditorI18nTool,
     TinyCollapse,
@@ -168,8 +140,8 @@ export default {
       type: String
     }
   },
-  emits: ['nameInput'],
-  setup(props) {
+  emits: ['nameInput', 'close'],
+  setup(props, { emit }) {
     const variableEditor = ref(null)
     const getterEditor = ref(null)
     const setterEditor = ref(null)
@@ -390,6 +362,10 @@ export default {
       monacoEditor.focus()
     }
 
+    const cancel = () => {
+      emit('close')
+    }
+
     const options = {
       lineNumbers: true,
       language: 'javascript',
@@ -419,7 +395,8 @@ export default {
       editorDidMount,
       validate,
       getFormData,
-      insertContent
+      insertContent,
+      cancel
     }
   }
 }
@@ -511,6 +488,15 @@ export default {
 
 .variable-editor {
   height: 270px;
+  .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;
+  }
 }
 
 .show-advanced {
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/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>

From 31578c2a1cefc3261a5e5ea691bc39217a576de1 Mon Sep 17 00:00:00 2001
From: lichunn <269031597@qq.com>
Date: Sun, 20 Oct 2024 23:56:45 -0700
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E6=8A=BD=E5=8F=96=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=85=A8=E5=B1=8F=E5=A4=B4=E9=83=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/state/src/CreateStore.vue    | 30 +++-----------
 packages/plugins/state/src/CreateVariable.vue | 29 +++----------
 .../plugins/state/src/StateFullscreenHead.vue | 41 +++++++++++++++++++
 3 files changed, 53 insertions(+), 47 deletions(-)
 create mode 100644 packages/plugins/state/src/StateFullscreenHead.vue

diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index afff6384d..8154cc57d 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -33,10 +33,7 @@
               <div class="label-left-wrap"></div>
             </template>
             <template #fullscreenHead>
-              <div class="fullscreen-head-content">
-                <span>state</span>
-                <close-icon @close="cancel"></close-icon>
-              </div>
+              <state-fullscreen-head title="state" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -51,10 +48,7 @@
         <tiny-form-item prop="getters">
           <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
             <template #fullscreenHead>
-              <div class="fullscreen-head-content">
-                <span>getters</span>
-                <close-icon @close="cancel"></close-icon>
-              </div>
+              <state-fullscreen-head title="getters" @close="cancel"></state-fullscreen-head>
             </template>
           </monaco-editor>
         </tiny-form-item>
@@ -63,10 +57,7 @@
         <tiny-form-item prop="actions">
           <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
             <template #fullscreenHead>
-              <div class="fullscreen-head-content">
-                <span>actions</span>
-                <close-icon @close="cancel"></close-icon>
-              </div>
+              <state-fullscreen-head title="actions" @close="cancel"></state-fullscreen-head>
             </template>
           </monaco-editor>
         </tiny-form-item>
@@ -78,16 +69,17 @@
 <script>
 import { getCurrentInstance, reactive, ref, computed, watch } from 'vue'
 import { Form, FormItem, Input, Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { MonacoEditor, CloseIcon } from '@opentiny/tiny-engine-common'
+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,
-    CloseIcon,
     StateTips,
+    StateFullscreenHead,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
@@ -277,16 +269,6 @@ export default {
     color: var(--ti-lowcode-toolbar-icon-color);
     display: flex;
   }
-
-  .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;
-  }
 }
 
 .create-content-description {
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index 8ee750633..c77a7c97a 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -33,10 +33,7 @@
               <editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
             </template>
             <template #fullscreenHead>
-              <div class="fullscreen-head-content">
-                <span>初始值</span>
-                <close-icon @close="cancel"></close-icon>
-              </div>
+              <state-fullscreen-head title="初始值" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -51,10 +48,7 @@
         <tiny-form-item>
           <monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue">
             <template #fullscreenHead>
-              <div class="fullscreen-head-content">
-                <span>getter</span>
-                <close-icon @close="cancel"></close-icon>
-              </div>
+              <state-fullscreen-head title="getter" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -73,10 +67,7 @@
         <tiny-form-item>
           <monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue">
             <template #fullscreenHead>
-              <div class="fullscreen-head-content">
-                <span>setter</span>
-                <close-icon @close="cancel"></close-icon>
-              </div>
+              <state-fullscreen-head title="setter" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -105,19 +96,20 @@ import {
   Collapse as TinyCollapse,
   CollapseItem as TinyCollapseItem
 } from '@opentiny/vue'
-import { MonacoEditor, CloseIcon } from '@opentiny/tiny-engine-common'
+import { MonacoEditor } from '@opentiny/tiny-engine-common'
 import { verifyJsVarName } from '@opentiny/tiny-engine-common/js/verification'
 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,
-    CloseIcon,
     StateTips,
+    StateFullscreenHead,
     TinyForm: Form,
     TinyFormItem: FormItem,
     TinyInput: Input,
@@ -488,15 +480,6 @@ export default {
 
 .variable-editor {
   height: 270px;
-  .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;
-  }
 }
 
 .show-advanced {
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>

From 207dff3ae7522d7d1a6074a27a044d68e5d792a6 Mon Sep 17 00:00:00 2001
From: lichunn <269031597@qq.com>
Date: Tue, 22 Oct 2024 00:09:43 -0700
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E6=8A=BD=E5=8F=96=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugins/state/src/CreateStore.vue    | 24 ++++++++++++-------
 packages/plugins/state/src/CreateVariable.vue | 18 +++++++++-----
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index 8154cc57d..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"
@@ -33,7 +33,7 @@
               <div class="label-left-wrap"></div>
             </template>
             <template #fullscreenHead>
-              <state-fullscreen-head title="state" @close="cancel"></state-fullscreen-head>
+              <state-fullscreen-head :title="STATE" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -44,20 +44,20 @@
           <state-tips></state-tips>
         </tiny-form-item>
       </tiny-collapse-item>
-      <tiny-collapse-item title="getters" name="getters">
-        <tiny-form-item prop="getters">
+      <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>
+              <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">
+      <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>
+              <state-fullscreen-head :title="ACTIONS" @close="cancel"></state-fullscreen-head>
             </template>
           </monaco-editor>
         </tiny-form-item>
@@ -102,6 +102,9 @@ export default {
   },
   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)
@@ -222,6 +225,9 @@ export default {
     }
 
     return {
+      STATE,
+      GETTERS,
+      ACTIONS,
       isDemoShow,
       state,
       getEditor,
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index c77a7c97a..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"
@@ -33,7 +33,7 @@
               <editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
             </template>
             <template #fullscreenHead>
-              <state-fullscreen-head title="初始值" @close="cancel"></state-fullscreen-head>
+              <state-fullscreen-head :title="INIT" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -44,11 +44,11 @@
           <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 #fullscreenHead>
-              <state-fullscreen-head title="getter" @close="cancel"></state-fullscreen-head>
+              <state-fullscreen-head :title="GETTER" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -63,11 +63,11 @@
           </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 #fullscreenHead>
-              <state-fullscreen-head title="setter" @close="cancel"></state-fullscreen-head>
+              <state-fullscreen-head :title="SETTER" @close="cancel"></state-fullscreen-head>
             </template>
             <template #fullscreenFooter>
               <div class="fullscreen-footer-content">
@@ -134,6 +134,9 @@ export default {
   },
   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)
@@ -371,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,