From e9a67b9de0bf5b6ca097118ab839b7ef7ba63fd1 Mon Sep 17 00:00:00 2001
From: Gene <Pacify.98@gmail.com>
Date: Wed, 27 Mar 2024 16:15:51 +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=20(#31?=
 =?UTF-8?q?8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 状态管理代码编辑UI优化
---
 packages/common/component/MonacoEditor.vue    |  80 +++---
 .../assets/internationalization.svg           |  13 +
 packages/plugins/data/src/CreateStore.vue     | 126 ++++-----
 packages/plugins/data/src/CreateVariable.vue  | 264 ++++++++----------
 packages/plugins/data/src/DataSourceList.vue  |   6 +-
 .../plugins/data/src/EditorFunctionTool.vue   | 107 -------
 packages/plugins/data/src/EditorI18nTool.vue  |   5 +-
 packages/plugins/data/src/Main.vue            |  13 +-
 packages/theme/dark/variable.less             |   2 +
 packages/theme/light/variable.less            |   2 +
 10 files changed, 254 insertions(+), 364 deletions(-)
 create mode 100644 packages/design-core/assets/internationalization.svg
 delete mode 100644 packages/plugins/data/src/EditorFunctionTool.vue

diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 47a33c9a..dadf8371 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,41 +132,45 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.toolbar {
+.editor-container {
   display: flex;
-  margin-bottom: 4px;
-  justify-content: flex-end;
-  align-items: center;
-  z-index: 3000 !important;
-  .buttons {
-    color: var(--ti-lowcode-component-svg-button-color);
-    cursor: pointer;
-    &:hover {
-      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);
-  }
+  flex-direction: column;
+  padding: 0;
 }
-.iniline {
-  height: 100%;
-  width: 100%;
-}
-.fullscreen {
+
+.editor-container-full {
   position: fixed;
   top: var(--base-top-panel-height);
   bottom: 0;
-  left: calc(var(--base-nav-panel-width) + 1px);
+  left: calc(var(--base-nav-panel-width) + var(--base-left-panel-width));
   right: var(--base-left-panel-width);
-  z-index: 2500;
+  z-index: 10;
+  padding: 10px 16px 16px 16px;
+  background-color: var(--ti-lowcode-common-component-bg);
+  height: auto !important;
 }
-.public-icon {
-  font-size: 18px;
-  margin-left: 10px;
+
+.toolbar {
+  display: flex;
+  margin-bottom: 4px;
+  justify-content: space-between;
+  align-items: center;
+
+  .buttons {
+    display: flex;
+    gap: 8px;
+    color: var(--ti-lowcode-component-svg-button-color);
+    cursor: pointer;
+    :hover {
+      color: var(--ti-lowcode-component-svg-button-hover-color);
+    }
+  }
+}
+
+.editor {
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid var(--ti-lowcode-state-management-monaco-editor-border-color);
+  border-radius: 6px;
 }
 </style>
diff --git a/packages/design-core/assets/internationalization.svg b/packages/design-core/assets/internationalization.svg
new file mode 100644
index 00000000..e14a32d8
--- /dev/null
+++ b/packages/design-core/assets/internationalization.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>国际化</title>
+    <g id="国际化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(2.000000, 2.000000)" stroke="#191919">
+            <circle id="椭圆形" cx="6" cy="6" r="6"></circle>
+            <path d="M1.61538462,6.69230769 C3.61538462,5.76923077 5.61538462,5.30769231 7.61538462,5.30769231 C9.61538462,5.30769231 11.6153846,5.76923077 13.6153846,6.69230769" id="直线" transform="translate(7.615385, 6.000000) rotate(90.000000) translate(-7.615385, -6.000000) "></path>
+            <path d="M-1.61538462,6.69230769 C0.384615385,5.76923077 2.38461538,5.30769231 4.38461538,5.30769231 C6.38461538,5.30769231 8.38461538,5.76923077 10.3846154,6.69230769" id="直线备份" transform="translate(4.384615, 6.000000) scale(-1, 1) rotate(90.000000) translate(-4.384615, -6.000000) "></path>
+            <path d="M0.461538462,4.61538462 C2.30769231,4.30769231 4.15384615,4.15384615 6,4.15384615 C7.84615385,4.15384615 9.69230769,4.30769231 11.5384615,4.61538462" id="直线-13" stroke-linecap="round" transform="translate(6.000000, 4.384615) scale(1, -1) translate(-6.000000, -4.384615) "></path>
+            <path d="M0.461538462,7.84615385 C2.30769231,7.53846154 4.15384615,7.38461538 6,7.38461538 C7.84615385,7.38461538 9.69230769,7.53846154 11.5384615,7.84615385" id="直线-13备份" stroke-linecap="round"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/plugins/data/src/CreateStore.vue b/packages/plugins/data/src/CreateStore.vue
index 444fc65a..2f38ca1d 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,15 @@ export default {
       renderLineHighlightOnlyWhenFocus: true
     }
 
+    watch(
+      () => state.storeData.name,
+      () => {
+        variableEditor.value?.switchFullScreen(false)
+        gettersEditor.value?.switchFullScreen(false)
+        actionsEditor.value?.switchFullScreen(false)
+      }
+    )
+
     const validateName = (rule, name, callback) => {
       let errorMessage = ''
       let isSameState = Object.keys(props.dataSource).includes(name)
@@ -221,67 +235,39 @@ 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 {
+  font-size: 12px;
+  color: var(--ti-lowcode-common-primary-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 8fefbf37..0c790936 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面板定义的函数
+    <tiny-form-item>
+      <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-controller/js/verification'
 import { initCompletion } from '@opentiny/tiny-engine-controller/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,22 @@ export default {
       }
     )
 
+    watch(
+      () => [props.createData.name, props.createData.variable],
+      () => {
+        state.createData = getPropsCreateData()
+      }
+    )
+
+    watch(
+      () => props.createData.name,
+      () => {
+        variableEditor.value?.switchFullScreen(false)
+        getterEditor.value?.switchFullScreen(false)
+        setterEditor.value?.switchFullScreen(false)
+      }
+    )
+
     watch(
       () => state.variableType,
       () => {
@@ -394,54 +403,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 {
@@ -478,32 +454,18 @@ export default {
 }
 
 .create-content-description {
-  color: var(--ti-lowcode-description-color);
+  font-size: 12px;
+  color: var(--ti-lowcode-common-primary-color);
   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);
@@ -516,11 +478,19 @@ export default {
 .tiny-popover.tiny-popper.state-data-example-tips {
   background-color: var(--ti-lowcode-data-example-bg-color);
   color: var(--ti-lowcode-data-example-color);
-  .popper__arrow {
+
+  &[x-placement^='bottom'] .popper__arrow {
     &,
     &::after {
       border-bottom-color: var(--ti-lowcode-data-example-bg-color);
     }
   }
+
+  &[x-placement^='top'] .popper__arrow {
+    &,
+    &::after {
+      border-top-color: var(--ti-lowcode-data-example-bg-color);
+    }
+  }
 }
 </style>
diff --git a/packages/plugins/data/src/DataSourceList.vue b/packages/plugins/data/src/DataSourceList.vue
index c6fecd4c..b8863761 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 95b4538c..00000000
--- 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/EditorI18nTool.vue b/packages/plugins/data/src/EditorI18nTool.vue
index 74128adc..5c5b53aa 100644
--- a/packages/plugins/data/src/EditorI18nTool.vue
+++ b/packages/plugins/data/src/EditorI18nTool.vue
@@ -29,7 +29,7 @@
 
     <template #reference>
       <tiny-tooltip content="插入国际化词条" placement="top">
-        <icon-language class="button-icon" @click="openPopover"></icon-language>
+        <svg-icon name="internationalization" @click="openPopover"></svg-icon>
       </tiny-tooltip>
     </template>
   </tiny-popover>
@@ -38,7 +38,7 @@
 <script>
 import { reactive, ref, computed } from 'vue'
 import { Button, Popover, Tooltip } from '@opentiny/vue'
-import { iconLanguage, iconClose } from '@opentiny/vue-icon'
+import { iconClose } from '@opentiny/vue-icon'
 import { BindI18n } from '@opentiny/tiny-engine-common'
 import { useTranslate } from '@opentiny/tiny-engine-controller'
 
@@ -47,7 +47,6 @@ export default {
     TinyButton: Button,
     TinyTooltip: Tooltip,
     TinyPopover: Popover,
-    IconLanguage: iconLanguage(),
     IconClose: iconClose(),
     BindI18n
   },
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index 68c03b85..daf6bd48 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -26,6 +26,7 @@
         :modelValue="Object.keys(state.dataSource)"
         :stateScope="activeName"
         :query="query"
+        :selectedKey="selectedKey"
         @openPanel="openPanel"
         @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,
@@ -410,7 +419,7 @@ export default {
     border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
     background: var(--ti-lowcode-common-component-bg);
     position: absolute;
-    left: calc(var(--base-left-panel-width) - 6px);
+    left: var(--base-left-panel-width);
     top: 0;
 
     .header {
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index eaa6505d..beed6faa 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -407,6 +407,8 @@
   --ti-lowcode-state-management-screen-icon-color: #fff;
   // 状态管理搜索无结果显示颜色
   --ti-lowcode-state-management-query-color: #fff;
+  // 状态管理代码编辑器边框颜色
+  --ti-lowcode-state-management-monaco-editor-border-color: transparent;
 
   // Popover提示框
   --ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color);
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index a0acf1e5..b93ba581 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -375,6 +375,8 @@
   --ti-lowcode-state-management-screen-icon-color: #404040;
   // 状态管理搜索无结果显示颜色
   --ti-lowcode-state-management-query-color: #404040;
+  // 状态管理代码编辑器边框颜色
+  --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40);
 
   // Popover提示框
   --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color);