feat(editor): 数据源选择器编辑按钮添加tooltip

packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -57,13 +57,11 @@
       @change="onChangeHandler"
     ></TMagicCascader>
 
-    <TMagicButton
+    <TMagicTooltip v-if="selectDataSourceId && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
-      v-if="selectDataSourceId && hasDataSourceSidePanel"
+      <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler(selectDataSourceId)"
-      class="m-fields-select-action-button"
+        ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-      :size="size"
+      ></TMagicButton>
-      @click="editHandler(selectDataSourceId)"
+    </TMagicTooltip>
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
   </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';

packages/editor/src/fields/DataSourceFieldSelect/Index.vue

@@ -26,14 +26,15 @@
       @change="onChangeHandler"
     ></component>
 
-    <TMagicButton
+    <TMagicTooltip v-if="config.fieldConfig" :disabled="showDataSourceFieldSelect" content="选择数据源">
-      v-if="config.fieldConfig"
+      <TMagicButton
-      style="margin-left: 5px"
+        style="margin-left: 5px"
-      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+        :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :size="size"
+        :size="size"
-      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+        @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
-      ><MIcon :icon="Coin"></MIcon
+        ><MIcon :icon="Coin"></MIcon
-    ></TMagicButton>
+      ></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';

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"
+        :content="notEditable ? '查看' : '编辑'"
-        :size="size"
-        @click="editCodeHandler"
       >
-        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+        <TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
-      </TMagicButton>
+          <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';
 

packages/editor/src/fields/DataSourceSelect.vue

@@ -11,13 +11,11 @@
       @change="changeHandler"
     ></MSelect>
 
-    <TMagicButton
+    <TMagicTooltip v-if="model[name] && hasDataSourceSidePanel" :content="notEditable ? '查看' : '编辑'">
-      v-if="model[name] && hasDataSourceSidePanel"
+      <TMagicButton class="m-fields-select-action-button" :size="size" @click="editHandler"
-      class="m-fields-select-action-button"
+        ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-      :size="size"
+      ></TMagicButton>
-      @click="editHandler"
+    </TMagicTooltip>
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
   </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';