From 07cd3065b2517c22a04ff3e6dc16243b582d9400 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 7 Jul 2023 17:10:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E7=BB=84=E4=BB=B6=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E7=82=B9=E5=87=BB=E5=B7=B2=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=94=B1=E9=87=8D=E6=96=B0=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=94=B9=E6=88=90=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/fields/UISelect.vue | 43 +++++++++++++++++++++----
 1 file changed, 37 insertions(+), 6 deletions(-)

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">