DevCloudFE · xingyan95 · Apr 18, 2022 · Apr 16, 2022 · Apr 18, 2022 · Apr 18, 2022
diff --git a/packages/devui-vue/devui/form/src/components/form-control/form-control-types.ts b/packages/devui-vue/devui/form/src/components/form-control/form-control-types.ts
@@ -1,9 +1,10 @@
 import type { PropType, ExtractPropTypes, ComputedRef } from 'vue';
 
+export type FeedbackStatus = 'success' | 'error' | 'pending';
+
 export const formControlProps = {
   feedbackStatus: {
-    type: String as PropType<'success' | 'error' | 'pending' | ''>,
-    default: '',
+    type: String as PropType<FeedbackStatus>,
   },
   extraInfo: {
     type: String,

diff --git a/packages/devui-vue/devui/form/src/components/form-icons.tsx b/packages/devui-vue/devui/form/src/components/form-icons.tsx
@@ -0,0 +1,21 @@
+export function HelpTipsIcon(): JSX.Element {
+  return (
+    <svg width="16px" height="16px" viewBox="0 0 16 16">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g>
+          <path
+            d="M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763 \
+            7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305 \
+            9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575 \
+            6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814 \
+            9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16 \
+            0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 \
+            12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1 \
+            C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z"
+            fill="#293040"
+            fill-rule="nonzero"></path>
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/devui-vue/devui/form/src/components/form-label/form-label-types.ts b/packages/devui-vue/devui/form/src/components/form-label/form-label-types.ts
@@ -5,10 +5,6 @@ export const formLabelProps = {
     type: Boolean,
     default: false,
   },
-  hasHelp: {
-    type: Boolean,
-    default: false,
-  },
   helpTips: {
     type: String,
     default: '',

diff --git a/packages/devui-vue/devui/form/src/components/form-label/form-label.scss b/packages/devui-vue/devui/form/src/components/form-label/form-label.scss
@@ -1,53 +1,54 @@
 .devui-form__label {
   align-self: flex-start;
 
-  & > span {
-    line-height: 28px;
+  &--vertical {
+    padding-bottom: 8px;
   }
 
-  .devui-form__label--required {
-    display: inline-flex;
-    align-items: center;
-
-    &::before {
-      content: '*';
-      color: red;
-      display: inline-block;
-      margin-right: 8px;
-      margin-left: -12px;
-    }
+  &--sm {
+    flex: 0 0 80px;
   }
-}
 
-.devui-form__label--sm {
-  flex: 0 0 80px;
-}
+  &--md {
+    flex: 0 0 100px;
+  }
 
-.devui-form__label--md {
-  flex: 0 0 100px;
-}
+  &--lg {
+    flex: 0 0 150px;
+  }
 
-.devui-form__label--lg {
-  flex: 0 0 150px;
-}
+  &--start {
+    text-align: left;
+  }
 
-.devui-form__label--start {
-  text-align: left;
-}
+  &--center {
+    text-align: center;
+  }
 
-.devui-form__label--center {
-  text-align: center;
+  &--end {
+    text-align: end;
+  }
 }
 
-.devui-form__label--end {
-  text-align: end;
+.devui-form__label--required {
+  display: inline-flex;
+  align-items: center;
+  line-height: 28px;
+
+  &::before {
+    content: '*';
+    color: red;
+    display: inline-block;
+    margin-right: 8px;
+    margin-left: -12px;
+  }
 }
 
 .devui-form__label-help {
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
   position: relative;
-  margin-left: 10px;
+  top: -0.1em;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 4px;
+  cursor: pointer;
 }
diff --git a/packages/devui-vue/devui/form/src/components/form-label/form-label.tsx b/packages/devui-vue/devui/form/src/components/form-label/form-label.tsx
@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue';
 import type { SetupContext } from 'vue';
 import { formLabelProps, FormLabelProps } from './form-label-types';
-import Icon from '../../../../icon/src/icon';
 import Popover from '../../../../popover/src/popover';
+import { HelpTipsIcon } from '../form-icons';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import { useFormLabel } from './use-form-label';
 import './form-label.scss';
@@ -16,23 +16,14 @@ export default defineComponent({
 
     return () => (
       <span class={labelClasses.value}>
-        <span class={labelInnerClasses.value}>
-          {ctx.slots.default?.()}
-          {props.hasHelp && props.helpTips && (
-            <Popover
-              content={props.helpTips}
-              showAnimation={false}
-              position={['top']}
-              trigger={'hover'}
-              v-slots={{
-                reference: () => (
-                  <span class={ns.e('label-help')}>
-                    <Icon name="helping" color="#252b3a"></Icon>
-                  </span>
-                ),
-              }}></Popover>
-          )}
-        </span>
+        <span class={labelInnerClasses.value}>{ctx.slots.default?.()}</span>
+        {props.helpTips && (
+          <Popover content={props.helpTips} position={['top']} trigger={'hover'} pop-type={'info'}>
+            {{
+              reference: () => <HelpTipsIcon class={ns.e('label-help')} />,
+            }}
+          </Popover>
+        )}
       </span>
     );
   },

diff --git a/packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts b/packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts
@@ -1,16 +1,16 @@
-import { computed, reactive, inject, toRefs } from 'vue';
+import { computed, inject, toRefs } from 'vue';
 import { FORM_TOKEN, IForm } from '../../form-types';
 import { FormLabelProps, UseFormLabel } from './form-label-types';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 
 export function useFormLabel(props: FormLabelProps): UseFormLabel {
-  const Form = reactive(inject(FORM_TOKEN) as IForm);
-  const labelData = reactive(Form.labelData);
+  const { labelData } = inject(FORM_TOKEN) as IForm;
   const ns = useNamespace('form');
   const { required } = toRefs(props);
 
   const labelClasses = computed(() => ({
     [`${ns.e('label')}`]: true,
+    [`${ns.em('label', 'vertical')}`]: labelData.layout === 'vertical',
     [`${ns.em('label', labelData.labelSize)}`]: labelData.layout === 'horizontal',
     [`${ns.em('label', labelData.labelAlign)}`]: labelData.layout === 'horizontal',
   }));

diff --git a/packages/devui-vue/devui/form/src/form.tsx b/packages/devui-vue/devui/form/src/form.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, provide, SetupContext } from 'vue';
+import { defineComponent, provide, reactive, SetupContext, toRefs } from 'vue';
 import mitt from 'mitt';
 import { formProps, FormProps, IFormItem, dFormEvents, FORM_TOKEN } from './form-types';
 import { EventBus } from './utils';
@@ -17,6 +17,7 @@ export default defineComponent({
         field.resetField();
       });
     };
+    const { data, layout, labelSize, labelAlign } = toRefs(props);
 
     formMitt.on(dFormEvents.addField, (field: any) => {
       if (field) {
@@ -30,17 +31,20 @@ export default defineComponent({
       }
     });
 
-    provide(FORM_TOKEN, {
-      formData: props.data,
-      formMitt,
-      labelData: {
-        layout: props.layout,
-        labelSize: props.labelSize,
-        labelAlign: props.labelAlign,
-      },
-      rules: props.rules,
-      messageShowType: 'popover',
-    });
+    provide(
+      FORM_TOKEN,
+      reactive({
+        formData: data,
+        formMitt,
+        labelData: {
+          layout: layout,
+          labelSize: labelSize,
+          labelAlign: labelAlign,
+        },
+        rules: props.rules,
+        messageShowType: 'popover',
+      })
+    );
 
     const onSubmit = (e) => {
       e.preventDefault();