diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 0a9df7b7..9de4660c 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -2,12 +2,26 @@
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
     <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
-    <TMagicTooltip v-if="val" content="清除">
-      <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
-    </TMagicTooltip>
-    <TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
-      <TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton>
+  <div class="m-fields-ui-select" v-else style="display: flex">
+    <template v-if="val">
+      <TMagicTooltip content="清除" placement="top">
+        <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
+      </TMagicTooltip>
+
+      <TMagicTooltip content="点击选中组件" placement="top">
+        <TMagicButton
+          text
+          style="padding: 0; margin: 0"
+          @click="selectNode(val)"
+          @mouseenter="highlight(val)"
+          @mouseleave="unhightlight"
+          >{{ `${toName}_${val}` }}</TMagicButton
+        >
+      </TMagicTooltip>
+    </template>
+
+    <TMagicTooltip v-else content="点击此处选择" placement="top">
+      <TMagicButton text style="padding: 0; margin: 0" @click="startSelect">点击此处选择</TMagicButton>
     </TMagicTooltip>
   </div>
 </template>
@@ -15,9 +29,11 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
+import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { FormState } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
@@ -77,6 +93,21 @@ const deleteHandler = () => {
     mForm?.$emit('field-change', props.prop, '');
   }
 };
+
+const selectNode = async (id: Id) => {
+  await services?.editorService.select(id);
+  services?.editorService.get('stage')?.select(id);
+};
+
+const highlight = throttle((id: Id) => {
+  services?.editorService.highlight(id);
+  services?.editorService.get('stage')?.highlight(id);
+}, 150);
+
+const unhightlight = () => {
+  services?.editorService.set('highlightNode', null);
+  services?.editorService.get('stage')?.clearHighlight();
+};
 </script>
 
 <style lang="scss">