From ad9f74c1881ad2e53ebd8fc08c1c2d4bd2bd24c9 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 4 Mar 2024 04:27:55 -0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91UI=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/component/MonacoEditor.vue    |  61 +++--
 packages/plugins/data/src/CreateStore.vue     | 123 ++++-----
 packages/plugins/data/src/CreateVariable.vue  | 244 +++++++-----------
 packages/plugins/data/src/DataSourceList.vue  |   6 +-
 .../plugins/data/src/EditorFunctionTool.vue   | 107 --------
 packages/plugins/data/src/Main.vue            |  11 +-
 6 files changed, 204 insertions(+), 348 deletions(-)
 delete mode 100644 packages/plugins/data/src/EditorFunctionTool.vue

diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 47a33c9af..d7ce5c2a1 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -1,6 +1,9 @@
 <template>
-  <div>
-    <div :class="['toolbar', { _full: fullscreen }]">
+  <div :class="['editor-container', { 'editor-container-full': fullscreen }]">
+    <div class="toolbar">
+      <div class="toolbar-start">
+        <slot name="toolbarStart"></slot>
+      </div>
       <div class="buttons">
         <slot name="buttons"></slot>
         <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
@@ -8,17 +11,17 @@
         </tiny-tooltip>
         <span v-if="showFullScreenBtn">
           <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
-            <public-icon name="full-screen" @click="fullscreen = true"></public-icon>
+            <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="fullscreen = false"></public-icon>
+            <public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
           </tiny-tooltip>
         </span>
       </div>
     </div>
     <monaco-editor
       ref="editor"
-      :class="fullscreen ? 'fullscreen' : 'iniline'"
+      class="editor"
       :value="value"
       :options="editorOptions"
       language="javascript"
@@ -110,12 +113,17 @@ export default {
       editor.value.getEditor().dispose()
     })
 
+    const switchFullScreen = (value) => {
+      fullscreen.value = value
+    }
+
     return {
       editorOptions,
       editor,
       getEditor,
       getEditorValue,
       fullscreen,
+      switchFullScreen,
       getValue,
       formatCode
     }
@@ -124,12 +132,28 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.editor-container-full {
+  position: fixed;
+  top: var(--base-top-panel-height);
+  bottom: 0;
+  left: calc(var(--base-nav-panel-width)+var(--base-left-panel-width));
+  right: var(--base-left-panel-width);
+  z-index: 10;
+  background-color: var(--ti-lowcode-common-component-bg);
+  height: auto !important;
+}
 .toolbar {
   display: flex;
   margin-bottom: 4px;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
-  z-index: 3000 !important;
+
   .buttons {
     color: var(--ti-lowcode-component-svg-button-color);
     cursor: pointer;
@@ -137,25 +161,12 @@ export default {
       color: var(--ti-lowcode-component-svg-button-hover-color);
     }
   }
-  &._full {
-    position: fixed;
-    top: var(--base-top-panel-height);
-    z-index: 1;
-    padding-right: 15px;
-    right: var(--base-left-panel-width);
-  }
 }
-.iniline {
-  height: 100%;
-  width: 100%;
-}
-.fullscreen {
-  position: fixed;
-  top: var(--base-top-panel-height);
-  bottom: 0;
-  left: calc(var(--base-nav-panel-width) + 1px);
-  right: var(--base-left-panel-width);
-  z-index: 2500;
+
+.editor {
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
 }
 .public-icon {
   font-size: 18px;
diff --git a/packages/plugins/data/src/CreateStore.vue b/packages/plugins/data/src/CreateStore.vue
index c48d02f57..3bf7629a7 100644
--- a/packages/plugins/data/src/CreateStore.vue
+++ b/packages/plugins/data/src/CreateStore.vue
@@ -12,25 +12,7 @@
     <tiny-form-item label="stores" prop="name">
       <tiny-input v-model="state.storeData.name" placeholder="只能包含数字字母及下划线"></tiny-input>
     </tiny-form-item>
-    <tiny-form-item prop="state" class="monaco-form-item">
-      <template #label>
-        <div class="label-left-wrap">
-          <span>state</span>
-          <tiny-popover placement="bottom-start" effect="dark" trigger="hover" popper-class="state-data-example-tips">
-            <div class="tips-content">
-              <div class="create-content-demo">
-                <ul>
-                  <li>state为对象(一个对象内可包含多个属性): {"name": "xxx"}</li>
-                  <li>actions/getters为函数(可写多个函数): function count(){}</li>
-                </ul>
-              </div>
-            </div>
-            <template #reference>
-              <div class="create-content-description">查看示例</div>
-            </template>
-          </tiny-popover>
-        </div>
-      </template>
+    <tiny-form-item prop="state">
       <monaco-editor
         ref="variableEditor"
         class="store-editor"
@@ -45,19 +27,42 @@
         }"
         @editorDidMount="editorDidMount"
         @change="editorDidMount"
-      />
+      >
+        <template #toolbarStart>
+          <div class="label-left-wrap">
+            <span>state</span>
+            <tiny-popover placement="bottom-start" effect="dark" trigger="hover" popper-class="state-data-example-tips">
+              <div class="tips-content">
+                <div class="create-content-demo">
+                  <ul>
+                    <li>state为对象(一个对象内可包含多个属性): {"name": "xxx"}</li>
+                    <li>actions/getters为函数(可写多个函数): function count(){}</li>
+                  </ul>
+                </div>
+              </div>
+              <template #reference>
+                <div class="create-content-description">查看示例</div>
+              </template>
+            </tiny-popover>
+          </div>
+        </template>
+      </monaco-editor>
     </tiny-form-item>
-    <tiny-form-item label="getters" prop="getters" class="store-form-item monaco-form-item">
-      <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters" />
+    <tiny-form-item prop="getters">
+      <monaco-editor ref="gettersEditor" class="store-editor" :options="options" :value="getters">
+        <template #toolbarStart><label>getters</label></template>
+      </monaco-editor>
     </tiny-form-item>
-    <tiny-form-item label="actions" prop="actions" class="store-form-item monaco-form-item">
-      <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions" />
+    <tiny-form-item prop="actions">
+      <monaco-editor ref="actionsEditor" class="store-editor" :options="options" :value="actions">
+        <template #toolbarStart><label>actions</label></template>
+      </monaco-editor>
     </tiny-form-item>
   </tiny-form>
 </template>
 
 <script>
-import { getCurrentInstance, reactive, ref, computed } from 'vue'
+import { getCurrentInstance, reactive, ref, computed, watch } from 'vue'
 import { Form, FormItem, Input, Popover } from '@opentiny/vue'
 import { MonacoEditor } from '@opentiny/tiny-engine-common'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
@@ -112,6 +117,13 @@ export default {
       renderLineHighlightOnlyWhenFocus: true
     }
 
+    watch(
+      () => state.storeData.name,
+      () => {
+        variableEditor.value.switchFullScreen(false)
+      }
+    )
+
     const validateName = (rule, name, callback) => {
       let errorMessage = ''
       let isSameState = Object.keys(props.dataSource).includes(name)
@@ -221,67 +233,38 @@ export default {
 <style lang="less" scoped>
 .store-form {
   padding: 12px;
+  height: calc(100%-45px);
+  overflow-y: auto;
 
-  .error-tip {
-    color: var(--ti-lowcode-error-tip-color);
-    margin-top: 4px;
-    font-size: 12px;
-  }
-
-  .textarea-warp {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
+  .tiny-form-item:not(:last-child) {
+    margin-bottom: 12px;
   }
 
   :deep(.tiny-form-item__label) {
     color: var(--ti-lowcode-toolbar-icon-color);
   }
-  &-item {
-    margin-top: 30px;
-  }
-
-  .tiny-form-item {
-    :deep(.tiny-form-item__label) {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      .label-left-wrap {
-        display: flex;
-      }
-    }
-    &.monaco-form-item {
-      :deep(.tiny-form-item__label) {
-        position: relative;
-        z-index: 1;
-        margin-bottom: -36px;
-      }
-      &.is-required {
-        :deep(.tiny-form-item__label) {
-          .label-left-wrap {
-            margin-left: 10px;
-          }
-          &::before {
-            position: absolute;
-          }
-        }
-      }
-    }
 
-    .create-content-description {
-      color: var(--ti-lowcode-description-color);
-      margin-left: 8px;
-      cursor: pointer;
-    }
+  .label-left-wrap {
+    color: var(--ti-lowcode-toolbar-icon-color);
+    display: flex;
   }
 }
+
+.create-content-description {
+  color: var(--ti-lowcode-description-color);
+  margin-left: 8px;
+  cursor: pointer;
+}
+
 .create-content-demo {
   padding: 12px;
-  font-size: 12px;
+  font-size: 14px;
   li + li {
     margin-top: 8px;
   }
 }
 
 .store-editor {
-  height: 200px;
+  height: 270px;
 }
 </style>
diff --git a/packages/plugins/data/src/CreateVariable.vue b/packages/plugins/data/src/CreateVariable.vue
index b04b59cf2..e28016ec6 100644
--- a/packages/plugins/data/src/CreateVariable.vue
+++ b/packages/plugins/data/src/CreateVariable.vue
@@ -16,99 +16,93 @@
       ></tiny-input>
     </tiny-form-item>
     <tiny-form-item label="初始值类型" class="var-type-item">
-      <tiny-button-group
-        class="variable-type"
-        :data="VAR_TYPES"
-        size="mini"
-        v-model="state.variableType"
-        @change="state.variableType = $event"
-      ></tiny-button-group>
+      <tiny-radio-group v-model="state.variableType" :options="VAR_TYPES"></tiny-radio-group>
     </tiny-form-item>
     <tiny-form-item class="monaco-form-item init-value-item">
-      <template #label>
-        <div class="label-left-wrap">
-          <div>初始值</div>
-          <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面板定义的函数
+      <monaco-editor
+        ref="variableEditor"
+        class="variable-editor"
+        :value="editorCode"
+        :showFormatBtn="true"
+        :options="state.editorOptions"
+        @editorDidMount="editorDidMount"
+      >
+        <template #toolbarStart>
+          <div class="label-left-wrap">
+            <div>初始值</div>
+            <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>
-            </div>
-            <template #reference>
-              <div class="create-content-description">查看示例</div>
-            </template>
-          </tiny-popover>
-        </div>
-      </template>
-      <div class="create-content">
-        <monaco-editor
-          ref="variableEditor"
-          class="create-content-editor"
-          :value="editorCode"
-          :showFormatBtn="true"
-          :options="state.editorOptions"
-          @editorDidMount="editorDidMount"
-        >
-          <template #buttons>
-            <editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
-          </template>
-        </monaco-editor>
-      </div>
+              <template #reference>
+                <div class="create-content-description">查看示例</div>
+              </template>
+            </tiny-popover>
+          </div>
+        </template>
+        <template #buttons>
+          <editor-i18n-tool ref="i18nToolRef" @confirm="insertContent"></editor-i18n-tool>
+        </template>
+      </monaco-editor>
     </tiny-form-item>
-    <tiny-form-item v-if="state.hasAccessor" class="store-form-item monaco-form-item">
-      <template #label>
-        <div class="label-left-wrap">
-          <div>getter</div>
-          <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>
+    <tiny-form-item v-if="state.hasAccessor">
+      <monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue">
+        <template #toolbarStart>
+          <div class="label-left-wrap">
+            <div>getter</div>
+            <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>
-            </div>
-            <template #reference>
-              <div class="create-content-description">查看示例</div>
-            </template>
-          </tiny-popover>
-        </div>
-      </template>
-      <monaco-editor ref="getterEditor" class="variable-editor" :options="options" :value="state.getterEditorValue" />
+              <template #reference>
+                <div class="create-content-description">查看示例</div>
+              </template>
+            </tiny-popover>
+          </div>
+        </template>
+      </monaco-editor>
     </tiny-form-item>
-    <tiny-form-item v-if="state.hasAccessor" class="store-form-item monaco-form-item">
-      <template #label>
-        <div class="label-left-wrap">
-          <div>setter</div>
-          <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>
+    <tiny-form-item v-if="state.hasAccessor">
+      <monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue">
+        <template #toolbarStart>
+          <div class="label-left-wrap">
+            <div>setter</div>
+            <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>
-            </div>
-            <template #reference>
-              <div class="create-content-description">查看示例</div>
-            </template>
-          </tiny-popover>
-        </div>
-      </template>
-      <monaco-editor ref="setterEditor" class="variable-editor" :options="options" :value="state.setterEditorValue" />
+              <template #reference>
+                <div class="create-content-description">查看示例</div>
+              </template>
+            </tiny-popover>
+          </div>
+        </template>
+      </monaco-editor>
     </tiny-form-item>
     <div class="show-advanced" @click="state.hasAccessor = !state.hasAccessor">
       {{ (state.hasAccessor ? '移除' : '添加') + '高级属性' }}
@@ -118,7 +112,7 @@
 
 <script>
 import { reactive, ref, computed, watch, onBeforeUnmount } from 'vue'
-import { Popover, Form, FormItem, Input, ButtonGroup } from '@opentiny/vue'
+import { Popover, Form, FormItem, Input, RadioGroup } from '@opentiny/vue'
 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'
@@ -133,7 +127,7 @@ export default {
     TinyFormItem: FormItem,
     TinyInput: Input,
     TinyPopover: Popover,
-    TinyButtonGroup: ButtonGroup,
+    TinyRadioGroup: RadioGroup,
     EditorI18nTool
   },
   props: {
@@ -177,8 +171,8 @@ export default {
       JS: 'javascript'
     }
     const VAR_TYPES = [
-      { text: 'JSON类型', value: LANG_TYPES.JSON },
-      { text: 'JS表达式类型', value: LANG_TYPES.JS }
+      { text: 'JSON类型', label: LANG_TYPES.JSON },
+      { text: 'JS表达式类型', label: LANG_TYPES.JS }
     ]
     const getVarType = () => (props.createData.variable?.type === 'JSExpression' ? LANG_TYPES.JS : LANG_TYPES.JSON)
 
@@ -213,7 +207,6 @@ export default {
       () => props.createData.variable,
       () => {
         state.errorMessage = ''
-        state.createData = getPropsCreateData()
         state.hasAccessor = isAccessorData(props.createData?.variable)
         state.getterEditorValue = props.createData.variable?.accessor?.getter?.value || DEFAULT_GETTER
         state.setterEditorValue = props.createData.variable?.accessor?.setter?.value || DEFAULT_SETTER
@@ -224,6 +217,17 @@ export default {
       }
     )
 
+    watch([() => props.createData.name, () => props.createData.variable], () => {
+      state.createData = getPropsCreateData()
+    })
+
+    watch(
+      () => props.createDate.name,
+      () => {
+        variableEditor.value.switchFullScreen(false)
+      }
+    )
+
     watch(
       () => state.variableType,
       () => {
@@ -394,54 +398,21 @@ export default {
 <style lang="less" scoped>
 .create-form {
   padding: 12px;
-  height: calc(100% - 50px);
+  height: calc(100% - 45px);
   overflow-y: auto;
 
-  .error-tip {
-    color: var(--ti-lowcode-error-tip-color);
-    margin-top: 4px;
-    font-size: 12px;
-  }
-
   .tiny-form-item:not(:last-child) {
     margin-bottom: 12px;
   }
 
-  .init-value-item {
-    margin-top: -22px;
-  }
-
-  .tiny-form-item {
-    &.var-type-item {
-      :deep(.tiny-button-group ul.tiny-group-item li.active button:not(.disabled)) {
-        background: var(--ti-lowcode-data-radio-group-active-bg);
-      }
-      :deep(.tiny-button-group ul.tiny-group-item li button:not(.disabled)) {
-        background: var(--ti-lowcode-data-radio-group-bg);
-        border: 0px;
-        border-radius: 0px;
-      }
-    }
-    &.monaco-form-item {
-      margin-bottom: 24px;
-      :deep(.tiny-form-item__label) {
-        position: relative;
-        z-index: 1;
-        margin-bottom: -58px;
-      }
-    }
-  }
-
   :deep(.tiny-form-item__label) {
     color: var(--ti-lowcode-toolbar-icon-color);
-    .label-left-wrap {
-      display: flex;
-    }
   }
-}
 
-.create-content {
-  color: var(--ti-lowcode-create-color);
+  .label-left-wrap {
+    color: var(--ti-lowcode-toolbar-icon-color);
+    display: flex;
+  }
 }
 
 .tips-content {
@@ -482,28 +453,13 @@ export default {
   margin-left: 8px;
   cursor: pointer;
 }
-.create-content-editor {
-  height: 230px;
-  .monaco-editor {
-    height: 200px !important;
-  }
-}
 
 .variable-editor {
-  height: 230px;
-  :deep(.toolbar) {
-    margin-bottom: 8px;
-  }
-  .monaco-editor {
-    height: 200px !important;
-  }
-}
-:deep(.tiny-form-item__label) {
-  height: unset;
+  height: 270px;
 }
+
 .show-advanced {
   font-size: 12px;
-  margin-top: 40px;
   color: var(--ti-lowcode-data-advanced-text-color);
   &:hover {
     color: var(--ti-lowcode-data-advanced-text-hover-color);
diff --git a/packages/plugins/data/src/DataSourceList.vue b/packages/plugins/data/src/DataSourceList.vue
index abd9eab12..11775ed88 100644
--- a/packages/plugins/data/src/DataSourceList.vue
+++ b/packages/plugins/data/src/DataSourceList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="data-source-list">
     <ul>
-      <li v-for="key in filteredKey" :key="key" class="data-source-list-item">
+      <li v-for="key in filteredKey" :key="key" :class="['data-source-list-item', { selected: key === selectedKey }]">
         <div class="item-head">
           <div class="item-head-left">
             <span class="protocal"> {{ stateScope === STATE.CURRENT_STATE ? 'state.' : 'stores.' }}</span>
@@ -45,6 +45,9 @@ export default {
     },
     stateScope: {
       type: String
+    },
+    selectedKey: {
+      type: String
     }
   },
   emits: ['openPanel', 'remove', 'removeStore'],
@@ -118,6 +121,7 @@ export default {
     font-size: 12px;
   }
   .data-source-list-item {
+    &.selected,
     &:hover {
       background: var(--ti-lowcode-common-component-hover-bg);
     }
diff --git a/packages/plugins/data/src/EditorFunctionTool.vue b/packages/plugins/data/src/EditorFunctionTool.vue
deleted file mode 100644
index 95b4538cb..000000000
--- a/packages/plugins/data/src/EditorFunctionTool.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <tiny-popover
-    v-model="state.showPopover"
-    trigger="manual"
-    width="600"
-    height="330"
-    :visible-arrow="false"
-    popper-class="lowcode"
-    @hide="onClosePopover"
-  >
-    <div class="popover-content">
-      <icon-close class="icon-close" @click="state.showPopover = false"></icon-close>
-      <monaco-editor
-        ref="functionEditor"
-        :showFullScreenBtn="false"
-        class="function-editor"
-        :value="state.editorValue"
-        :options="{
-          language: 'javascript',
-          lineNumbers: true
-        }"
-      ></monaco-editor>
-      <div class="editor-buttons">
-        <tiny-button @click="insertFunction">插入JS方法</tiny-button>
-      </div>
-    </div>
-    <template #reference>
-      <tiny-tooltip content="插入JS函数" placement="top">
-        <icon-js class="button-icon" @click="state.showPopover = true"></icon-js>
-      </tiny-tooltip>
-    </template>
-  </tiny-popover>
-</template>
-
-<script>
-import { reactive, ref } from 'vue'
-import { Button, Popover, Tooltip } from '@opentiny/vue'
-import { iconClose, iconJs } from '@opentiny/vue-icon'
-import { MonacoEditor } from '@opentiny/tiny-engine-common'
-
-export default {
-  components: {
-    TinyPopover: Popover,
-    TinyButton: Button,
-    TinyTooltip: Tooltip,
-    IconClose: iconClose(),
-    IconJs: iconJs(),
-    MonacoEditor
-  },
-  emits: ['confirm'],
-  setup(props, { emit }) {
-    const functionEditor = ref(null)
-
-    const state = reactive({
-      showPopover: false,
-      editorValue: 'function fnName() {\r\n  \r\n}'
-    })
-
-    const onClosePopover = () => {}
-
-    const insertFunction = () => {
-      const fnCode = functionEditor.value?.getEditor?.().getValue() || ''
-      emit(
-        'confirm',
-        `{
-        "type": "JSExpression",
-        "value": ${JSON.stringify(fnCode)}
-      }`
-      )
-      state.showPopover = false
-    }
-
-    return {
-      functionEditor,
-      state,
-      onClosePopover,
-      insertFunction
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.popover-content {
-  text-align: right;
-  .icon-close {
-    margin-right: 5px;
-    cursor: pointer;
-  }
-  .function-editor {
-    height: 250px;
-    margin-top: 8px;
-    text-align: left;
-  }
-  .editor-buttons {
-    margin-top: 10px;
-  }
-}
-.buttons {
-  .button-icon {
-    width: 1.3em;
-    height: 1.3em;
-    margin-left: 10px;
-    margin-bottom: 2px;
-  }
-}
-</style>
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index 68c03b85e..7a73ff16f 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -27,6 +27,7 @@
         :stateScope="activeName"
         :query="query"
         @openPanel="openPanel"
+        :selectedKey="selectedKey"
         @remove="remove"
         @removeStore="removeStore"
       />
@@ -62,7 +63,7 @@
 </template>
 
 <script>
-import { reactive, ref, computed, onActivated } from 'vue'
+import { reactive, ref, computed, onActivated, watch } from 'vue'
 import { Button, Search, Tabs, TabItem } from '@opentiny/vue'
 import {
   useCanvas,
@@ -118,6 +119,11 @@ export default {
         variable: ''
       }
     })
+    const selectedKey = ref(null)
+
+    watch(activeName, () => {
+      selectedKey.value = null
+    })
 
     const openPanel = (flagValue, key = '') => {
       updateKey.value = key
@@ -139,11 +145,13 @@ export default {
       }
 
       isPanelShow.value = true
+      selectedKey.value = flagValue === OPTION_TYPE.UPDATE ? key : null
     }
 
     const cancel = () => {
       errorMessage.value = ''
       isPanelShow.value = false
+      selectedKey.value = null
     }
 
     const add = (name, variable) => {
@@ -345,6 +353,7 @@ export default {
       flag,
       updateKey,
       activeName,
+      selectedKey,
       tabClick,
       STATE,
       removeStore,