From 97affb2bff856b271136b50dccd45d95e17abd6a Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 19 Nov 2025 14:37:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20tip=E5=9B=BE=E6=A0=87=E6=94=BE?=
 =?UTF-8?q?=E5=88=B0label=E4=B8=AD=E5=8E=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Container.vue | 41 +++++++++++++++++-----
 packages/form/src/containers/FormLabel.vue | 25 +++++++++++++
 packages/form/src/containers/Panel.vue     |  8 +++++
 3 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 packages/form/src/containers/FormLabel.vue

diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index be14bd2e..835136df 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -24,9 +24,16 @@
 
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
-        <template #label
-          ><span v-html="type === 'checkbox' && !config.useLabel ? '' : text" :title="config.labelTitle"></span
-        ></template>
+        <template #label>
+          <FormLabel
+            :tip="config.tip"
+            :type="type"
+            :use-label="config.useLabel"
+            :label-title="config.labelTitle"
+            :text="text"
+          ></FormLabel>
+        </template>
+
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component
             v-bind="fieldsProps"
@@ -52,7 +59,7 @@
         ></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip" placement="left">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -67,7 +74,15 @@
         v-bind="formItemProps"
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
+        <template #label>
+          <FormLabel
+            :tip="config.tip"
+            :type="type"
+            :use-label="config.useLabel"
+            :label-title="config.labelTitle"
+            :text="text"
+          ></FormLabel>
+        </template>
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
           <template #content>
@@ -78,7 +93,7 @@
         <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip" placement="left">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -91,7 +106,15 @@
         :style="config.tip ? 'flex: 1' : ''"
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
+        <template #label>
+          <FormLabel
+            :tip="config.tip"
+            :type="type"
+            :use-label="config.useLabel"
+            :label-title="config.labelTitle"
+            :text="text"
+          ></FormLabel>
+        </template>
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
           <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
           <template #content>
@@ -102,7 +125,7 @@
         <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip" placement="left">
+      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
         <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -157,6 +180,8 @@ import type {
 } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
+import FormLabel from './FormLabel.vue';
+
 defineOptions({
   name: 'MFormContainer',
 });
diff --git a/packages/form/src/containers/FormLabel.vue b/packages/form/src/containers/FormLabel.vue
new file mode 100644
index 00000000..86145afa
--- /dev/null
+++ b/packages/form/src/containers/FormLabel.vue
@@ -0,0 +1,25 @@
+<template>
+  <span style="display: inline-flex; align-items: center">
+    <span v-html="type === 'checkbox' && !useLabel ? '' : text" :title="labelTitle"></span>
+    <TMagicTooltip v-if="tip && (type !== 'checkbox' || useLabel)" placement="top">
+      <TMagicIcon style="margin-left: 5px; display: flex"><warning-filled /></TMagicIcon>
+      <template #content>
+        <div v-html="tip"></div>
+      </template>
+    </TMagicTooltip>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { WarningFilled } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicTooltip } from '@tmagic/design';
+
+defineProps<{
+  tip?: string;
+  type?: string;
+  useLabel?: boolean;
+  text?: string;
+  labelTitle?: string;
+}>();
+</script>
diff --git a/packages/form/src/containers/Panel.vue b/packages/form/src/containers/Panel.vue
index fede0d39..6538afba 100644
--- a/packages/form/src/containers/Panel.vue
+++ b/packages/form/src/containers/Panel.vue
@@ -103,4 +103,12 @@ const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
   emit('change', props.model, eventData);
 };
 const onAddDiffCount = () => emit('addDiffCount');
+
+defineExpose({
+  getExpand: () => expand.value,
+
+  setExpand: (v: boolean) => {
+    expand.value = v;
+  },
+});
 </script>