feat(form): tip图标放到label中去

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
+        <template #label>
-          ><span v-html="type === 'checkbox' && !config.useLabel ? '' : text" :title="config.labelTitle"></span
+          <FormLabel
-        ></template>
+            :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',
 });

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>

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>