fix: 抽取编辑器全屏头部组件

opentiny · Oct 21, 2024 · 31578c2 · 31578c2
1 parent 8d4f3b2
commit 31578c2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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>