diff --git a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
index 452c96f10929d79f932d8c9f3d4ae14a1268e1d1..58792f3cf93b65e0574a045d7e2a96e817179ab8 100644
--- a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
+++ b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
@@ -6,104 +6,107 @@ import { useClear } from './composition/use-clear';
 import { useTextBox } from './composition/use-text-box';
 
 export default defineComponent({
-  name: 'FButtonEdit',
-  props: buttonEditProps,
-  emits: [
-    'updateExtendInfo',
-    'clear',
-    'change',
-    'click',
-    'clickButton',
-    'blur',
-    'focus',
-    'mouseEnterIcon',
-    'mouseLeaveIcon',
-    'keyup',
-    'keydown',
-    'inputClick',
-    'input',
-    'update:modelValue',
-  ],
-  setup(props: ButtonEditProps, context: SetupContext) {
-    const modelValue = ref(props.modelValue);
-    const { buttonClass, onClickButton, onMouseEnterButton, onMouseLeaveButton } = useButton(props, context);
-    const displayText = ref('');
-    const {
-      hasFocusedTextBox,
-      isTextBoxReadonly,
-      textBoxClass,
-      textBoxPlaceholder,
-      textBoxTitle,
-      onBlurTextBox,
-      onClickTextBox,
-      onFocusTextBox,
-      onInput,
-      onKeyDownTextBox,
-      onKeyUpTextBox,
-      onMouseDownTextBox,
-      onTextBoxValueChange,
-    } = useTextBox(props, context, modelValue, displayText);
+    name: 'FButtonEdit',
+    props: buttonEditProps,
+    emits: [
+        'updateExtendInfo',
+        'clear',
+        'change',
+        'click',
+        'clickButton',
+        'blur',
+        'focus',
+        'mouseEnterIcon',
+        'mouseLeaveIcon',
+        'keyup',
+        'keydown',
+        'inputClick',
+        'input',
+        'update:modelValue',
+    ],
+    setup(props: ButtonEditProps, context: SetupContext) {
+        const modelValue = ref(props.modelValue);
+        const { buttonClass, onClickButton, onMouseEnterButton, onMouseLeaveButton } = useButton(props, context);
+        const displayText = ref('');
+        const {
+            hasFocusedTextBox,
+            isTextBoxReadonly,
+            textBoxClass,
+            textBoxPlaceholder,
+            textBoxTitle,
+            onBlurTextBox,
+            onClickTextBox,
+            onFocusTextBox,
+            onInput,
+            onKeyDownTextBox,
+            onKeyUpTextBox,
+            onMouseDownTextBox,
+            onTextBoxValueChange,
+        } = useTextBox(props, context, modelValue, displayText);
 
-    const { enableClearButton, showClearButton, onClearValue, onMouseEnterTextBox, onMouseLeaveTextBox } = useClear(
-      props,
-      context,
-      modelValue,
-      hasFocusedTextBox,
-      displayText
-    );
+        const { enableClearButton, showClearButton, onClearValue, onMouseEnterTextBox, onMouseLeaveTextBox } = useClear(
+            props,
+            context,
+            modelValue,
+            hasFocusedTextBox,
+            displayText
+        );
 
-    const inputGroupClass = computed(() => ({
-      'input-group': true,
-      'f-state-disable': props.disable,
-      'f-state-editable': props.editable && !props.disable && !props.readonly,
-      'f-state-readonly': props.readonly && !props.disable,
-      'f-state-focus': hasFocusedTextBox,
-    }));
+        const inputGroupClass = computed(() => ({
+            'input-group': true,
+            'f-state-disable': props.disable,
+            'f-state-editable': props.editable && !props.disable && !props.readonly,
+            'f-state-readonly': props.readonly && !props.disable,
+            'f-state-focus': hasFocusedTextBox,
+        }));
 
-    return () => {
-      return (
-        <div class="f-cmp-inputgroup" id={props.id}>
-          <div class={[props.customClass, inputGroupClass.value]} onMouseenter={onMouseEnterTextBox} onMouseleave={onMouseLeaveTextBox}>
-            <input
-              name="input-group-value"
-              autocomplete={'' + props.autoComplete}
-              class={textBoxClass.value}
-              disabled={props.disable}
-              maxlength={props.maxLength}
-              minlength={props.minLength}
-              placeholder={textBoxPlaceholder.value}
-              readonly={isTextBoxReadonly.value}
-              tabindex={props.tabIndex}
-              title={textBoxTitle.value}
-              type={props.inputType}
-              value={modelValue.value}
-              onBlur={onBlurTextBox}
-              onChange={onTextBoxValueChange}
-              onClick={onClickTextBox}
-              onFocus={onFocusTextBox}
-              onInput={onInput}
-              onKeydown={onKeyDownTextBox}
-              onKeyup={onKeyUpTextBox}
-              onMousedown={onMouseDownTextBox}
-            />
-            <div class={buttonClass.value}>
-              {enableClearButton.value && (
-                <span class="input-group-text input-group-clear" v-show={showClearButton.value} onClick={onClearValue}>
-                  <i class="f-icon modal_close"></i>
-                </span>
-              )}
-              {props.buttonContent && (
-                <span
-                  class="input-group-text input-group-append-button"
-                  onClick={onClickButton}
-                  onMouseenter={onMouseEnterButton}
-                  onMouseleave={onMouseLeaveButton}
-                  v-html={props.buttonContent}></span>
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    };
-  },
+        return () => {
+            return (
+                <div class="f-cmp-inputgroup" id={props.id}>
+                    <div
+                        class={[props.customClass, inputGroupClass.value]}
+                        onMouseenter={onMouseEnterTextBox}
+                        onMouseleave={onMouseLeaveTextBox}>
+                        <input
+                            name="input-group-value"
+                            autocomplete={'' + props.autoComplete}
+                            class={textBoxClass.value}
+                            disabled={props.disable}
+                            maxlength={props.maxLength}
+                            minlength={props.minLength}
+                            placeholder={textBoxPlaceholder.value}
+                            readonly={isTextBoxReadonly.value}
+                            tabindex={props.tabIndex}
+                            title={textBoxTitle.value}
+                            type={props.inputType}
+                            value={modelValue.value}
+                            onBlur={onBlurTextBox}
+                            onChange={onTextBoxValueChange}
+                            onClick={onClickTextBox}
+                            onFocus={onFocusTextBox}
+                            onInput={onInput}
+                            onKeydown={onKeyDownTextBox}
+                            onKeyup={onKeyUpTextBox}
+                            onMousedown={onMouseDownTextBox}
+                        />
+                        <div class={buttonClass.value}>
+                            {enableClearButton.value && (
+                                <span class="input-group-text input-group-clear" v-show={showClearButton.value} onClick={onClearValue}>
+                                    <i class="f-icon modal_close"></i>
+                                </span>
+                            )}
+                            {props.buttonContent && (
+                                <span
+                                    class="input-group-text input-group-append-button"
+                                    onClick={onClickButton}
+                                    onMouseenter={onMouseEnterButton}
+                                    onMouseleave={onMouseLeaveButton}
+                                    v-html={props.buttonContent}></span>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+    },
 });
diff --git a/packages/ui-vue/components/button-edit/src/button-edit.props.ts b/packages/ui-vue/components/button-edit/src/button-edit.props.ts
index fff757654f2927f54ddeea5c07565837ac165223..4a472bfb84739668bd156babd1d8c82687fb2041 100644
--- a/packages/ui-vue/components/button-edit/src/button-edit.props.ts
+++ b/packages/ui-vue/components/button-edit/src/button-edit.props.ts
@@ -3,79 +3,79 @@ import { ExtractPropTypes, PropType } from 'vue';
 type TextAlignment = 'left' | 'center' | 'right';
 
 export const buttonEditProps = {
-  /**
-   * 组件标识
-   */
-  id: String,
-  /**
-   * 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
-   */
-  buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
-  /**
-   * 启用输入框自动完成功能
-   */
-  autoComplete: { type: Boolean, default: false },
-  /**
-   * 组件自定义样式
-   */
-  customClass: { type: String, default: '' },
-  /**
-   * 禁用组件，既不允许在输入框中录入，也不允许点击扩展按钮。
-   */
-  disable: { type: Boolean, default: false },
-  /**
-   * 允许在输入框中录入文本。
-   */
-  editable: { type: Boolean, default: true },
-  /**
-   * 显示清空文本按钮
-   */
-  enableClear: { type: Boolean, default: false },
-  /**
-   * 组件值
-   */
-  modelValue:{type:String,default:''},
-  /**
-   * 将组件设置为只读，既不允许在输入框中录入，也不允许点击扩展按钮，但是允许复制输入框中的内容。
-   */
-  readonly: { type: Boolean, default: false },
-  /**
-   * 文本对齐方式
-   */
-  textAlign: { type: String as PropType<TextAlignment>, default: 'left' },
-  /**
-   * 禁用组件时，是否显示扩展按钮
-   */
-  showButtonWhenDisabled: { type: Boolean, default: false },
+    /**
+     * 组件标识
+     */
+    id: String,
+    /**
+     * 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
+     */
+    buttonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
+    /**
+     * 启用输入框自动完成功能
+     */
+    autoComplete: { type: Boolean, default: false },
+    /**
+     * 组件自定义样式
+     */
+    customClass: { type: String, default: '' },
+    /**
+     * 禁用组件，既不允许在输入框中录入，也不允许点击扩展按钮。
+     */
+    disable: { type: Boolean, default: false },
+    /**
+     * 允许在输入框中录入文本。
+     */
+    editable: { type: Boolean, default: true },
+    /**
+     * 显示清空文本按钮
+     */
+    enableClear: { type: Boolean, default: false },
+    /**
+     * 组件值
+     */
+    modelValue: { type: String, default: '' },
+    /**
+     * 将组件设置为只读，既不允许在输入框中录入，也不允许点击扩展按钮，但是允许复制输入框中的内容。
+     */
+    readonly: { type: Boolean, default: false },
+    /**
+     * 文本对齐方式
+     */
+    textAlign: { type: String as PropType<TextAlignment>, default: 'left' },
+    /**
+     * 禁用组件时，是否显示扩展按钮
+     */
+    showButtonWhenDisabled: { type: Boolean, default: false },
 
-  /**
-   * 显示输入框的标签
-   */
-  enableTitle: { type: Boolean, default: false },
-  /**
-   * 输入框类型
-   */
-  inputType: { type: String, default: 'text' },
-  /**
-   * 显示输入框提示信息
-   */
-  forcePlaceholder: { type: Boolean, default: false },
-  /**
-   * 输入框提示文本
-   */
-  placeholder: { type: String, default: '' },
-  /**
-   * 输入框最小长度
-   */
-  minLength: Number,
-  /**
-   * 输入框最大长度
-   */
-  maxLength: Number,
-  /**
-   * 输入框Tab键索引
-   */
-  tabIndex: Number,
+    /**
+     * 显示输入框的标签
+     */
+    enableTitle: { type: Boolean, default: false },
+    /**
+     * 输入框类型
+     */
+    inputType: { type: String, default: 'text' },
+    /**
+     * 显示输入框提示信息
+     */
+    forcePlaceholder: { type: Boolean, default: false },
+    /**
+     * 输入框提示文本
+     */
+    placeholder: { type: String, default: '' },
+    /**
+     * 输入框最小长度
+     */
+    minLength: Number,
+    /**
+     * 输入框最大长度
+     */
+    maxLength: Number,
+    /**
+     * 输入框Tab键索引
+     */
+    tabIndex: Number,
 };
 
 export type ButtonEditProps = ExtractPropTypes<typeof buttonEditProps>;
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-button.ts b/packages/ui-vue/components/button-edit/src/composition/use-button.ts
index 46fa15350a8d65c99ea7b7233a28f137afb41450..57773b525d9f7fe16edc13ad188976f7a5801775 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-button.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-button.ts
@@ -3,37 +3,37 @@ import { computed, SetupContext } from 'vue';
 import { ButtonEditProps } from '../button-edit.props';
 
 export function useButton(props: ButtonEditProps, context: SetupContext): UseButton {
-  const buttonClass = computed(() => ({
-    'input-group-append': true,
-    'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
-  }));
+    const buttonClass = computed(() => ({
+        'input-group-append': true,
+        'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
+    }));
 
-  const canClickAppendButton = computed(() => props.showButtonWhenDisabled || ((!props.editable || !props.readonly) && !props.disable));
+    const canClickAppendButton = computed(() => props.showButtonWhenDisabled || ((!props.editable || !props.readonly) && !props.disable));
 
-  function onClickButton($event: Event) {
-    if (canClickAppendButton.value) {
-      context.emit('clickButton', { origin: $event, value: props.modelValue });
+    function onClickButton($event: Event) {
+        if (canClickAppendButton.value) {
+            context.emit('clickButton', { origin: $event, value: props.modelValue });
+        }
+        $event.stopPropagation();
     }
-    $event.stopPropagation();
-  }
 
-  function onMouseEnterButton($event: MouseEvent) {
-    context.emit('mouseEnterIcon', $event);
-  }
+    function onMouseEnterButton($event: MouseEvent) {
+        context.emit('mouseEnterIcon', $event);
+    }
 
-  function onMouseLeaveButton($event: MouseEvent) {
-    context.emit('mouseLeaveIcon', $event);
-  }
+    function onMouseLeaveButton($event: MouseEvent) {
+        context.emit('mouseLeaveIcon', $event);
+    }
 
-  function onMouseOverButton() {
-    context.emit('mouseOverButton');
-  }
+    function onMouseOverButton() {
+        context.emit('mouseOverButton');
+    }
 
-  return {
-    buttonClass,
-    onClickButton,
-    onMouseEnterButton,
-    onMouseLeaveButton,
-    onMouseOverButton,
-  };
+    return {
+        buttonClass,
+        onClickButton,
+        onMouseEnterButton,
+        onMouseLeaveButton,
+        onMouseOverButton,
+    };
 }
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-clear.ts b/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
index 1ca5ff248c77b52f2e2c54ce190d41f33c4a88c7..bacfc5a1913b3f568315ab5f36e27b21a6f956a1 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
@@ -4,64 +4,64 @@ import { UseClear } from './types';
 import { useTextBox } from './use-text-box';
 
 export function useClear(
-  props: ButtonEditProps,
-  context: SetupContext,
-  modelValue: Ref<string>,
-  hasFocusedTextBox: ComputedRef<boolean>,
-  displayText: Ref<string>
+    props: ButtonEditProps,
+    context: SetupContext,
+    modelValue: Ref<string>,
+    hasFocusedTextBox: ComputedRef<boolean>,
+    displayText: Ref<string>
 ): UseClear {
-  const showClearButton = ref(false);
-  const enableClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
-  const { changeTextBoxValue } = useTextBox(props, context, modelValue, displayText);
+    const showClearButton = ref(false);
+    const enableClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
+    const { changeTextBoxValue } = useTextBox(props, context, modelValue, displayText);
 
-  function toggleClearIcon(isShow: boolean) {
-    showClearButton.value = isShow;
-  }
-
-  watch(displayText, () => {
-    if (hasFocusedTextBox.value) {
-      toggleClearIcon(!!displayText.value);
-    } else {
-      toggleClearIcon(false);
+    function toggleClearIcon(isShow: boolean) {
+        showClearButton.value = isShow;
     }
-  });
 
-  function onClearValue($event: Event) {
-    const flag1 = !props.readonly && !props.disable && props.editable;
-    const flag2 = !props.editable;
-    $event.stopPropagation();
-    if (flag1 || flag2) {
-      changeTextBoxValue('', false);
-      toggleClearIcon(!showClearButton.value);
-      context.emit('clear');
-    }
-  }
+    watch(displayText, () => {
+        if (hasFocusedTextBox.value) {
+            toggleClearIcon(!!displayText.value);
+        } else {
+            toggleClearIcon(false);
+        }
+    });
 
-  function onMouseEnterTextBox($event: Event) {
-    if (!enableClearButton.value) {
-      return;
+    function onClearValue($event: Event) {
+        const flag1 = !props.readonly && !props.disable && props.editable;
+        const flag2 = !props.editable;
+        $event.stopPropagation();
+        if (flag1 || flag2) {
+            changeTextBoxValue('', false);
+            toggleClearIcon(!showClearButton.value);
+            context.emit('clear');
+        }
     }
-    if (!modelValue.value) {
-      toggleClearIcon(false);
-      return;
-    }
-    if ((!props.editable || !props.readonly) && !props.disable) {
-      toggleClearIcon(true);
+
+    function onMouseEnterTextBox($event: Event) {
+        if (!enableClearButton.value) {
+            return;
+        }
+        if (!modelValue.value) {
+            toggleClearIcon(false);
+            return;
+        }
+        if ((!props.editable || !props.readonly) && !props.disable) {
+            toggleClearIcon(true);
+        }
     }
-  }
 
-  function onMouseLeaveTextBox($event: Event) {
-    if (!enableClearButton.value) {
-      return;
+    function onMouseLeaveTextBox($event: Event) {
+        if (!enableClearButton.value) {
+            return;
+        }
+        toggleClearIcon(false);
     }
-    toggleClearIcon(false);
-  }
 
-  return {
-    enableClearButton,
-    showClearButton,
-    onClearValue,
-    onMouseEnterTextBox,
-    onMouseLeaveTextBox,
-  };
+    return {
+        enableClearButton,
+        showClearButton,
+        onClearValue,
+        onMouseEnterTextBox,
+        onMouseLeaveTextBox,
+    };
 }
diff --git a/packages/ui-vue/components/notify/src/components/toast.component.tsx b/packages/ui-vue/components/notify/src/components/toast.component.tsx
index d71a8421bfb6ec59240522365c7decfd35cf198c..4c49082987283984781158cacb61511bc6cca011 100644
--- a/packages/ui-vue/components/notify/src/components/toast.component.tsx
+++ b/packages/ui-vue/components/notify/src/components/toast.component.tsx
@@ -1,59 +1,118 @@
-import { computed, defineComponent, SetupContext } from 'vue';
-import { NotifyData } from '../notify.props';
+import { computed, defineComponent, ref, SetupContext, watch } from 'vue';
+import { NotifyButton, NotifyData } from '../notify.props';
 import { ToastProps, toastProps } from './toast.props';
 
 export default defineComponent({
-  name: 'Toast',
-  props: toastProps,
-  emits: [],
-  setup: (props: ToastProps, context: SetupContext) => {
-    const toastClass = computed(() => ({
-      toast: true,
-    }));
-
-    const toast = computed(() => {
-      return {} as NotifyData;
-    });
-
-    const toastIconClass = computed(() => ({
-      'f-icon': true,
-    }));
-
-    const shouldShowTips = computed(() => toast.value.title || toast.value.msg);
-
-    const shouldShowTitle = computed(() => toast.value.title && toast.value.msg);
-
-    const shouldShowCloseButton = computed(() => {
-      return true;
-    });
-
-    function onCloseToast($event: Event) {}
-
-    return () => {
-      return (
-        <div class={toastClass}>
-          {shouldShowCloseButton.value && (
-            <button class="toast-close f-btn-icon f-bare" onClick={onCloseToast}>
-              <span class="f-icon modal_close"></span>
-            </button>
-          )}
-          {shouldShowTips.value && (
-            <section class="modal-tips">
-              <div class="float-left modal-tips-iconwrap">
-                <span class={toastIconClass}></span>
-              </div>
-              <div class="modal-tips-content">
-                {shouldShowTitle.value && (
-                  <>
-                    <h5 class="toast-title modal-tips-title" v-html={toast.value.title}></h5>
-                    <p class="toast-msg" v-html={toast.value.msg}></p>
-                  </>
-                )}
-              </div>
-            </section>
-          )}
-        </div>
-      );
-    };
-  },
+    name: 'Toast',
+    props: toastProps,
+    emits: ['close', 'click'],
+    setup: (props: ToastProps, context: SetupContext) => {
+        const animateIn = ref(props.animate);
+        const animateEnd = 'fadeOut';
+        const toast = computed(() => {
+            return props.options as NotifyData;
+        });
+        const showingToast = ref(false);
+
+        const toastClass = computed(() => {
+            const classObject = {
+                animated: showingToast.value,
+                toast: true,
+            };
+            classObject[props.animate] = false;
+            classObject[animateEnd] = showingToast.value;
+            classObject[toast.value.type] = true;
+            if (toast.value.theme) {
+                classObject[toast.value.theme] = true;
+            }
+            return classObject;
+        });
+
+        const toastIconClass = computed(() => {
+            const hasSpecialToastType = toast.value && toast.value.type;
+            const iconType = hasSpecialToastType ? toast.value.type.replace('toasty-type-', '') : 'default';
+            const iconTypeName = `f-icon-${iconType}`;
+            const classObject = { 'f-icon': true };
+            classObject[iconTypeName] = true;
+            return classObject;
+        });
+
+        const shouldShowTips = computed(() => toast.value.title || toast.value.msg);
+
+        const shouldShowTitle = computed(() => toast.value.title && toast.value.msg);
+
+        const shouldShowCloseButton = computed(() => {
+            return true;
+        });
+
+        const shouldShowButtonsInTitle = computed(() => !!toast.value.buttons || !!context.slots.default);
+
+        function onCloseToast($event: Event) {
+            $event.stopPropagation();
+            $event.preventDefault();
+            showingToast.value = false;
+            setTimeout(() => {
+                context.emit('close', toast.value);
+            }, 200);
+        }
+
+        function onClickButton($event: Event, notifyButton: NotifyButton) {}
+
+        function getNotifyButtonClass(notifyButton: NotifyButton) {
+            return `f-preten-link ${notifyButton.customClass ? notifyButton.customClass : ''}`;
+        }
+
+        watch(animateIn, () => {
+            const animateInClass = animateIn.value || 'bounceInRight';
+            const animateOutClass = 'fadeOut';
+        });
+
+        const renderNotifyButtons = () => {
+            return (
+                <>
+                    <div class="after-toast-msg text-right">
+                        {!context.slots.default &&
+                            toast.value.buttons?.map((notifyButton: NotifyButton) => {
+                                return (
+                                    <span
+                                        class={getNotifyButtonClass(notifyButton)}
+                                        onClick={($event) => onClickButton($event, notifyButton)}>
+                                        {notifyButton.text}
+                                    </span>
+                                );
+                            })}
+                        {context.slots.default && context.slots.default()}
+                    </div>
+                </>
+            );
+        };
+
+        return () => {
+            return (
+                <div class={toastClass}>
+                    {shouldShowCloseButton.value && (
+                        <button class="toast-close f-btn-icon f-bare" onClick={onCloseToast}>
+                            <span class="f-icon modal_close"></span>
+                        </button>
+                    )}
+                    {shouldShowTips.value && (
+                        <section class="modal-tips">
+                            <div class="float-left modal-tips-iconwrap">
+                                <span class={toastIconClass}></span>
+                            </div>
+                            <div class="modal-tips-content">
+                                {shouldShowTitle.value && (
+                                    <>
+                                        <h5 class="toast-title modal-tips-title" v-html={toast.value.title}></h5>
+                                        <p class="toast-msg" v-html={toast.value.msg}></p>
+                                        {shouldShowButtonsInTitle.value && renderNotifyButtons()}
+                                    </>
+                                )}
+                            </div>
+                        </section>
+                    )}
+                </div>
+            );
+        };
+    },
 });
diff --git a/packages/ui-vue/components/notify/src/components/toast.props.ts b/packages/ui-vue/components/notify/src/components/toast.props.ts
index 834fc374a32837918827b9b8b5e8a01b6c1e1b6f..66850be1de4323b4c00d2d3c4f98f1a61a727bb3 100644
--- a/packages/ui-vue/components/notify/src/components/toast.props.ts
+++ b/packages/ui-vue/components/notify/src/components/toast.props.ts
@@ -1,8 +1,9 @@
 import { ExtractPropTypes, PropType } from 'vue';
-import { ToastyAnimate } from '../notify.props';
+import { NotifyData, ToastyAnimate } from '../notify.props';
 
 export const toastProps = {
-  animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
+    animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
+    options: { type: Object as PropType<NotifyData> },
 };
 
 export type ToastProps = ExtractPropTypes<typeof toastProps>;
diff --git a/packages/ui-vue/components/notify/src/notify.component.tsx b/packages/ui-vue/components/notify/src/notify.component.tsx
index 5fb47feed3d15f83947cf3616c4c4a3708933f88..38e32348d03458addd47708004ae329bf7c6d667 100644
--- a/packages/ui-vue/components/notify/src/notify.component.tsx
+++ b/packages/ui-vue/components/notify/src/notify.component.tsx
@@ -1,35 +1,37 @@
-import { computed, defineComponent, SetupContext } from 'vue';
+import { computed, defineComponent, ref, SetupContext } from 'vue';
 import { NotifyContainerComponent } from './notify-container.component';
 import { NotifyData, NotifyProps, notifyProps } from './notify.props';
 
 export default defineComponent({
-  name: 'Notify',
-  props: notifyProps,
-  emits: [],
-  setup(props: NotifyProps, context: SetupContext) {
-    const notifyClass = computed(() => ({
-      'farris-notify': true,
-    }));
+    name: 'Notify',
+    props: notifyProps,
+    emits: [],
+    setup(props: NotifyProps, context: SetupContext) {
+        const notifyClass = computed(() => ({
+            'farris-notify': true,
+        }));
 
-    const notifyStyle = computed(() => ({
-      left: '',
-      right: '',
-      top: '',
-      bottom: '',
-    }));
+        const notifyStyle = computed(() => ({
+            left: '',
+            right: '',
+            top: '',
+            bottom: '',
+        }));
 
-    const toasts = computed(() => {
-      return props.toasts ? props.toasts : [];
-    });
+        const toasts = computed(() => {
+            return props.toasts ? props.toasts : [];
+        });
 
-    return () => {
-      return (
-        <div id={props.id} class={notifyClass.value} style={notifyStyle.value}>
-          {toasts.value.map((toastData: NotifyData) => {
-            return <f-toast v-model={toastData} animate={props.animate} onClose={} onClick={}></f-toast>;
-          })}
-        </div>
-      );
-    };
-  },
+
+
+        return () => {
+            return (
+                <div id={props.id} class={notifyClass.value} style={notifyStyle.value}>
+                    {toasts.value.map((toastData: NotifyData) => {
+                        return <f-toast v-model={toastData} animate={props.animate} onClose={} onClick={}></f-toast>;
+                    })}
+                </div>
+            );
+        };
+    },
 });
diff --git a/packages/ui-vue/components/notify/src/notify.props.ts b/packages/ui-vue/components/notify/src/notify.props.ts
index f4f846671e0ecf3548149fef4d85a2f421e34212..60bc45599f70b0a499b8ea2056c4dd3f603588d9 100644
--- a/packages/ui-vue/components/notify/src/notify.props.ts
+++ b/packages/ui-vue/components/notify/src/notify.props.ts
@@ -1,44 +1,45 @@
+import { NotifyData } from './notify.props';
 import { ExtractPropTypes, PropType } from 'vue';
 
 export type NotifyPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center' | 'center-center';
 
 export type ToastyAnimate =
-  | 'bounceInRight'
-  | 'bounceInLeft'
-  | 'bounceInRight'
-  | 'bounceInLeft'
-  | 'bounceInDown'
-  | 'bounceInUp'
-  | 'bounceIn'
-  | 'fadeIn';
+    | 'bounceInRight'
+    | 'bounceInLeft'
+    | 'bounceInRight'
+    | 'bounceInLeft'
+    | 'bounceInDown'
+    | 'bounceInUp'
+    | 'bounceIn'
+    | 'fadeIn';
 
 export interface NotifyButton {
-  customClass?: string;
-  text: string;
-  disable?: boolean;
-  onClick?: ($event: Event, component: any) => any;
+    customClass?: string;
+    text: string;
+    disable?: boolean;
+    onClick?: ($event: Event, component: any) => any;
 }
 
 export interface NotifyData {
-  type: string;
-  title?: string;
-  msg?: string;
-  /** 按钮列表模板 */
-  buttons?: Array<NotifyButton>;
-  showClose?: boolean;
-  theme?: string;
-  timeout?: number;
-  onAdd?: () => void;
-  onRemove?: () => void;
-  id?: number | string;
+    type: string;
+    title?: string;
+    msg?: string;
+    /** 按钮列表模板 */
+    buttons?: Array<NotifyButton>;
+    showClose?: boolean;
+    theme?: string;
+    timeout?: number;
+    onAdd?: () => void;
+    onRemove?: () => void;
+    id?: number | string;
 }
 
 // export interface NotifyData extends NotifyOptions {}
 
 export const notifyProps = {
-  id: { type: String },
-  animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
-  position: { type: String as PropType<NotifyPosition>, default: 'toasty-position-top-center' },
-  toasts: { type: Array<NotifyData> },
+    id: { type: String },
+    animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
+    position: { type: String as PropType<NotifyPosition>, default: 'toasty-position-top-center' },
+    toasts: { type: Array<NotifyData> },
 };
 export type NotifyProps = ExtractPropTypes<typeof notifyProps>;