From 3fa21fd3eb91882e40e84a59b8b5e541876b9c92 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 25 Jul 2024 19:23:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=95=B0=E6=8D=AE=E6=BA=90?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=BC=96=E8=BE=91=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DataSourceFieldSelect/FieldSelect.vue     | 20 +++++++++++--------
 .../fields/DataSourceFieldSelect/Index.vue    | 19 +++++++++---------
 .../src/fields/DataSourceMethodSelect.vue     | 14 ++++++-------
 .../editor/src/fields/DataSourceSelect.vue    | 14 ++++++-------
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
index f8886dbc..75cbeda6 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
@@ -57,13 +57,11 @@
       @change="onChangeHandler"
     ></TMagicCascader>
 
-    <TMagicButton
-      v-if="selectDataSourceId && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler(selectDataSourceId)"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
+    <TMagicTooltip v-if="selectDataSourceId && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
+      <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler(selectDataSourceId)"
+        ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+      ></TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -71,7 +69,13 @@
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { getConfig as getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect } from '@tmagic/design';
+import {
+  getConfig as getDesignConfig,
+  TMagicButton,
+  TMagicCascader,
+  TMagicSelect,
+  TMagicTooltip,
+} from '@tmagic/design';
 import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
 import { DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
diff --git a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
index 12249ed1..3133f59f 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
@@ -26,14 +26,15 @@
       @change="onChangeHandler"
     ></component>
 
-    <TMagicButton
-      v-if="config.fieldConfig"
-      style="margin-left: 5px"
-      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :size="size"
-      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
-      ><MIcon :icon="Coin"></MIcon
-    ></TMagicButton>
+    <TMagicTooltip v-if="config.fieldConfig" :disabled="showDataSourceFieldSelect" content="选择数据源">
+      <TMagicButton
+        style="margin-left: 5px"
+        :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+        :size="size"
+        @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+        ><MIcon :icon="Coin"></MIcon
+      ></TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -41,7 +42,7 @@
 import { computed, inject, ref, resolveComponent, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { TMagicButton, tMagicMessage } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import { DataSchema } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue
index e2e1ab4e..47c6a316 100644
--- a/packages/editor/src/fields/DataSourceMethodSelect.vue
+++ b/packages/editor/src/fields/DataSourceMethodSelect.vue
@@ -9,14 +9,14 @@
         @change="onChangeHandler"
       ></MContainer>
 
-      <TMagicButton
+      <TMagicTooltip
         v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
-        class="m-fields-select-action-button"
-        :size="size"
-        @click="editCodeHandler"
+        :content="notEditable ? '查看' : '编辑'"
       >
-        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
-      </TMagicButton>
+        <TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
+          <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+        </TMagicButton>
+      </TMagicTooltip>
     </div>
 
     <CodeParams
@@ -35,7 +35,7 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
diff --git a/packages/editor/src/fields/DataSourceSelect.vue b/packages/editor/src/fields/DataSourceSelect.vue
index dfda2ef8..4fb8cf00 100644
--- a/packages/editor/src/fields/DataSourceSelect.vue
+++ b/packages/editor/src/fields/DataSourceSelect.vue
@@ -11,13 +11,11 @@
       @change="changeHandler"
     ></MSelect>
 
-    <TMagicButton
-      v-if="model[name] && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
+    <TMagicTooltip v-if="model[name] && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
+      <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler"
+        ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+      ></TMagicButton>
+    </TMagicTooltip>
   </div>
 </template>
 
@@ -25,7 +23,7 @@
 import { computed, inject } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';