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

Tencent · Jul 25, 2024 · 3fa21fd · 3fa21fd
1 parent ea556d6
commit 3fa21fd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue b/packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
@@ -57,21 +57,25 @@
  @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>
 
 <script lang="ts" setup>
 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
@@ -26,22 +26,23 @@
  @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>
 
 <script setup lang="ts">
 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
@@ -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
@@ -11,21 +11,19 @@
  @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>
 
 <script setup lang="ts">
 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';