diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts b/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts
index 9d92b730c7..2c505a5e0e 100644
--- a/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts
@@ -138,6 +138,10 @@ export const autoCompleteProps = {
     type: Boolean,
     default: false,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type AutoCompleteProps = ExtractPropTypes<typeof autoCompleteProps>;
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
index 983164e1b0..ee97cc899f 100644
--- a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
@@ -147,6 +147,13 @@
     box-sizing: border-box;
     height: 100%;
 
+    &:not(.#{$devui-prefix}-auto-complete--focus) {
+      .#{$devui-prefix}-auto-complete--glow-style:hover {
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+        border-color: $devui-form-control-line;
+      }
+    }
+
     &__wrapper {
       display: inline-flex;
       align-items: center;
@@ -157,7 +164,7 @@
       border: 1px solid $devui-form-control-line;
       border-radius: $devui-border-radius;
       background-color: $devui-form-control-bg;
-      transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
+      transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
       &:not(.#{$devui-prefix}-auto-complete--disabled):not(.#{$devui-prefix}-auto-complete-input__wrapper--error):hover {
         border-color: $devui-form-control-line-hover;
@@ -206,10 +213,22 @@
     }
   }
 
-  &--focus .#{$devui-prefix}-auto-complete-input__wrapper:not(.#{$devui-prefix}-auto-complete-input__wrapper--error) {
-    border-color: $devui-form-control-line-active;
+  &--glow-style:not(.#{$devui-prefix}-auto-complete--disabled):not(.#{$devui-prefix}-auto-complete-input__wrapper--error):hover {
+    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    border-color: $devui-form-control-line;
+  }
 
-    &:hover {
+  &--focus {
+    .#{$devui-prefix}-auto-complete-input__wrapper:not(.#{$devui-prefix}-auto-complete-input__wrapper--error) {
+      border-color: $devui-form-control-line-active;
+
+      &:hover {
+        border-color: $devui-form-control-line-active;
+      }
+    }
+
+    .#{$devui-prefix}-auto-complete--glow-style:not(.#{$devui-prefix}-auto-complete-input__wrapper--error) {
+      box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
       border-color: $devui-form-control-line-active;
     }
   }
@@ -277,3 +296,49 @@
     }
   }
 }
+
+.#{$devui-prefix}-auto-complete--fade {
+  &-bottom {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(-4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+
+  &-top {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
index 9bc0ed305b..83b143d231 100644
--- a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
@@ -44,6 +44,7 @@ export default defineComponent({
     const inputNs = useNamespace('auto-complete-input');
     const isDisabled = computed(() => formContext?.disabled || disabled.value);
     const autoCompleteSize = computed(() => formContext?.size || props.size);
+    const align = computed(() => (position.value.some((item) => item.includes('start') || item.includes('end')) ? 'start' : null));
 
     const { handleSearch, searchList, showNoResultItemTemplate, recentlyFocus } = useSearchFn(
       ctx,
@@ -104,20 +105,31 @@ export default defineComponent({
       valueParser,
     });
     const origin = ref<HTMLElement>();
+    const currentPosition = ref('bottom');
 
     const prefixVisible = ctx.slots.prefix || props.prefix;
     const suffixVisible = ctx.slots.suffix || props.suffix || props.clearable;
 
     const showClearable = computed(() => props.clearable && !isDisabled.value);
+    const overlayStyles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      zIndex: 'var(--devui-z-index-dropdown, 1052)',
+    }));
+
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.includes('top') || pos.includes('right-end') || pos.includes('left-end') ? 'top' : 'bottom';
+    };
 
     const renderBasicDropdown = () => {
       return (
-        <Transition name={showAnimation ? 'fade' : ''}>
+        <Transition name={showAnimation ? ns.m(`fade-${currentPosition.value}`) : ''}>
           <FlexibleOverlay
             origin={origin.value}
             position={position.value}
+            align={align.value}
             v-model={visible.value}
-            style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
+            onPositionChange={handlePositionChange}
+            style={overlayStyles.value}>
             <div
               class={ns.e('menu')}
               style={{
diff --git a/packages/devui-vue/devui/auto-complete/src/composables/use-auto-complete-render.ts b/packages/devui-vue/devui/auto-complete/src/composables/use-auto-complete-render.ts
index d620845d16..8afb7e91c3 100644
--- a/packages/devui-vue/devui/auto-complete/src/composables/use-auto-complete-render.ts
+++ b/packages/devui-vue/devui/auto-complete/src/composables/use-auto-complete-render.ts
@@ -44,6 +44,7 @@ export function useAutoCompleteRender(
   const inputWrapperClasses = computed(() => ({
     [inputNs.e('wrapper')]: true,
     [inputNs.em('wrapper', 'error')]: isValidatorError.value,
+    [ns.m('glow-style')]: props.showGlowStyle,
     [inputNs.em('wrapper', 'feedback')]: Boolean(formItemContext?.validateState) && formItemContext?.showFeedback,
     [ns.m('disabled')]: isDisabled.value,
   }));
diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index d9209ea5c5..f7bcd6fe45 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/packages/devui-vue/devui/button/src/button.scss
@@ -18,6 +18,7 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 }
 
 .#{$devui-prefix}-button {
+  position: relative;
   padding: $devui-btn-padding;
   font-size: $devui-font-size-md;
   height: $devui-size-md;
@@ -26,6 +27,22 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
   border-width: 1px;
   border-color: transparent;
   background-color: transparent;
+  overflow: hidden;
+
+  &.mousedown:not(:disabled) {
+    transform: scale(0.95);
+  }
+
+  .water-wave {
+    position: absolute;
+    background-color: $devui-base-bg;
+    border-radius: 50%;
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, -50%);
+    animation: waterWave $devui-animation-duration-slow $devui-animation-linear;
+  }
 
   &:hover {
     cursor: pointer;
@@ -320,8 +337,7 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 }
 
 .#{$devui-prefix}-button {
-  transition:
-    background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
+  transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
     border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
     color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
   white-space: nowrap;
@@ -397,7 +413,25 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 }
 
 @keyframes rotating {
-  0% { transform: rotate(0); }
+  0% {
+    transform: rotate(0);
+  }
 
-  100% { transform: rotate(180deg); }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes waterWave {
+  0% {
+    opacity: 0.2;
+    width: 30px;
+    height: 30px;
+  }
+
+  100% {
+    opacity: 0;
+    width: 200px;
+    height: 200px;
+  }
 }
diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 1f7cf7cc42..f4794325af 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, toRefs } from 'vue';
+import { defineComponent, toRefs, ref, reactive } from 'vue';
 import type { SetupContext } from 'vue';
 import { Icon } from '../../icon';
 import LoadingDirective from '../../loading/src/loading-directive';
@@ -16,22 +16,45 @@ export default defineComponent({
   setup(props: ButtonProps, ctx: SetupContext) {
     const { icon, disabled, loading, nativeType } = toRefs(props);
     const { classes, iconClass } = useButton(props, ctx);
+    const isMouseDown = ref(false);
+    const showWave = ref(false);
+    const waveStyle = reactive({
+      top: '0px',
+      left: '0px',
+    });
 
+    const showClickWave = (e: MouseEvent) => {
+      waveStyle.left = e.offsetX + 'px';
+      waveStyle.top = e.offsetY + 'px';
+      showWave.value = true;
+
+      setTimeout(() => {
+        showWave.value = false;
+      }, 300);
+    };
     const onClick = (e: MouseEvent) => {
       if (loading.value) {
         return;
       }
+      showClickWave(e);
       ctx.emit('click', e);
     };
 
     return () => {
       return (
-        <button class={classes.value} disabled={disabled.value} onClick={onClick} type={nativeType.value}>
+        <button
+          class={[classes.value, isMouseDown.value ? 'mousedown' : '']}
+          disabled={disabled.value}
+          onClick={onClick}
+          type={nativeType.value}
+          onMousedown={() => (isMouseDown.value = true)}
+          onMouseup={() => (isMouseDown.value = false)}>
           {icon.value && <Icon name={icon.value} size="var(--devui-font-size, 12px)" color="" class={iconClass.value} />}
           <div class="loading-icon__container" v-show={loading.value}>
             <d-icon name="icon-loading" class="button-icon-loading" color="#BBDEFB"></d-icon>
           </div>
           <span class="button-content">{ctx.slots.default?.()}</span>
+          {showWave.value && <div class="water-wave" style={waveStyle}></div>}
         </button>
       );
     };
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index d5caf2ed2d..8e910f2424 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -125,7 +125,11 @@ export const cascaderProps = {
     default: () => true,
   },
   size: {
-    type: String as PropType<InputSize>
+    type: String as PropType<InputSize>,
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
   },
 } as const;
 
diff --git a/packages/devui-vue/devui/cascader/src/cascader.scss b/packages/devui-vue/devui/cascader/src/cascader.scss
index 7b6f96ae2f..413a43d4f4 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.scss
+++ b/packages/devui-vue/devui/cascader/src/cascader.scss
@@ -111,3 +111,49 @@
     transform: rotate(180deg);
   }
 }
+
+.#{$devui-prefix}-cascader--fade {
+  &-bottom {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(-4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+
+  &-top {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index c516e0349d..7d0b2363ef 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, Transition, SetupContext, provide, Teleport } from 'vue';
+import { defineComponent, Transition, SetupContext, provide, Teleport, ref, computed } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import DCascaderList from '../components/cascader-list';
@@ -45,6 +45,15 @@ export default defineComponent({
     } = useCascader(props, ctx);
     provide(POPPER_TRIGGER_TOKEN, origin);
 
+    const currentPosition = ref('bottom');
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      'z-index': 'var(--devui-z-index-dropdown, 1052)',
+    }));
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
+    };
+
     return () => (
       <div style={rootStyle.inputWidth}>
         <PopperTrigger>
@@ -60,6 +69,7 @@ export default defineComponent({
                   placeholder={props.placeholder}
                   modelValue={inputValue.value}
                   size={props.size}
+                  show-glow-style={props.showGlowStyle}
                   onInput={handleInput}
                   onFocus={onFocus}
                   onBlur={onBlur}
@@ -81,14 +91,15 @@ export default defineComponent({
           )}
         </PopperTrigger>
         <Teleport to="body">
-          <Transition name="fade">
+          <Transition name={ns.m(`fade-${currentPosition.value}`)}>
             <FlexibleOverlay
               origin={origin.value}
               ref={overlayRef}
               v-model={menuShow.value}
               position={position.value as Placement[]}
               align="start"
-              style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
+              style={styles.value}
+              onPositionChange={handlePositionChange}>
               <div class={ns.e('drop-menu-animation')}>
                 {!isSearching.value && (
                   <div class={`${menuOpenClass.value} ${ns.e('dropdown-menu')}`}>
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts
index bf78effdec..2cfc384107 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts
+++ b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts
@@ -37,7 +37,11 @@ const commonProps = {
   },
   size: {
     type: String as PropType<Size>,
-    default: 'md'
+    default: 'md',
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
   },
 } as const;
 
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.scss b/packages/devui-vue/devui/checkbox/src/checkbox.scss
index cc5f1f8c3d..705ff9341b 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.scss
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.scss
@@ -26,14 +26,19 @@ $checkbox-label-height-map: (
 
   .#{$devui-prefix}-checkbox__tick-wrap {
     position: absolute;
+    width: 14px;
+    height: 14px;
 
     .#{$devui-prefix}-checkbox__tick {
-      fill: $devui-light-text;
-      stroke-dashoffset: 50;
+      stroke: $devui-light-text;
+      stroke-dasharray: 13 13;
+      stroke-dashoffset: 13;
       opacity: 0;
       transform: scale(0);
       transform-origin: 50% 50%;
-      transition: stroke-dashoffset 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+      transition: stroke-dashoffset $devui-animation-duration-base $devui-animation-ease-in-out,
+        opacity $devui-animation-duration-base $devui-animation-ease-in-out,
+        transform $devui-animation-duration-base $devui-animation-ease-in-out;
     }
   }
 
@@ -41,7 +46,8 @@ $checkbox-label-height-map: (
     opacity: 1;
     stroke-dashoffset: 0;
     transform: scale(1);
-    transition: stroke-dashoffset 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transition: stroke-dashoffset $devui-animation-duration-slow $devui-animation-ease-in,
+      opacity $devui-animation-duration-base $devui-animation-ease-in-out;
   }
 
   &.active,
@@ -62,13 +68,15 @@ $checkbox-label-height-map: (
   }
 
   &.unchecked:not(.disabled) {
+    &:hover {
+      .#{$devui-prefix}-checkbox__material:not(.custom-color) {
+        border-color: $devui-brand;
+      }
+    }
     .#{$devui-prefix}-checkbox__material:not(.custom-color) {
       background-size: 0% 0%;
-      transition: background-size 0.2s ease-in-out, border-color 0.2s ease-in-out;
-
-      &:hover {
-        border-color: $devui-icon-fill-active;
-      }
+      transition: background-size $devui-animation-duration-base $devui-animation-ease-in-out,
+        border-color $devui-animation-duration-base $devui-animation-ease-in-out;
     }
   }
 
@@ -147,7 +155,7 @@ $checkbox-label-height-map: (
       &:focus,
       &:active,
       &:hover {
-        background-color: $devui-icon-fill-active;
+        background-color: $devui-brand;
       }
 
       // 激活状态深色
@@ -160,6 +168,50 @@ $checkbox-label-height-map: (
     }
   }
 
+  &--glow-style {
+    .#{$devui-prefix}-checkbox__glow-box {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+
+      .glow-bg {
+        display: block;
+        width: 16px;
+        height: 16px;
+        user-select: none;
+        border-radius: $devui-border-radius;
+        box-shadow: none;
+        transition: box-shadow $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+      }
+    }
+
+    &:not(.disabled):hover {
+      .glow-bg {
+        box-shadow: 0 0 0 6px $devui-range-item-hover-bg;
+      }
+    }
+  }
+
+  &--checkbox-bordered {
+    .#{$devui-prefix}-checkbox__material {
+      vertical-align: text-bottom !important;
+    }
+
+    &.#{$devui-prefix}-checkbox--checkbox-xs,
+    &.#{$devui-prefix}-checkbox--checkbox-sm {
+      .#{$devui-prefix}-checkbox__glow-box {
+        left: 11px;
+      }
+    }
+
+    &.#{$devui-prefix}-checkbox--checkbox-md,
+    &.#{$devui-prefix}-checkbox--checkbox-lg {
+      .#{$devui-prefix}-checkbox__glow-box {
+        left: 12px;
+      }
+    }
+  }
+
   &__input {
     opacity: 0;
     position: absolute;
@@ -213,7 +265,7 @@ $checkbox-label-height-map: (
     & > span {
       display: inline-block;
       box-sizing: content-box;
-      vertical-align: top;
+      vertical-align: top !important;
 
       &.#{$devui-prefix}-checkbox__material {
         flex-shrink: 0; // keep the checkbox icon width
@@ -226,7 +278,6 @@ $checkbox-label-height-map: (
         white-space: nowrap;
       }
     }
-
   }
 
   // 禁用状态透明色
@@ -250,11 +301,11 @@ $checkbox-label-height-map: (
 
     &.half-checked {
       .#{$devui-prefix}-checkbox__material {
-        background-color: $devui-disabled-bg;
+        background-color: $devui-icon-fill-active-disabled;
 
         .#{$devui-prefix}-checkbox__halfchecked-bg {
           transform: scale(0.4288);
-          background-color: $devui-disabled-text;
+          background-color: $devui-light-text;
           opacity: 1;
         }
       }
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox.tsx b/packages/devui-vue/devui/checkbox/src/checkbox.tsx
index b94fef9115..3b1c5f617f 100644
--- a/packages/devui-vue/devui/checkbox/src/checkbox.tsx
+++ b/packages/devui-vue/devui/checkbox/src/checkbox.tsx
@@ -35,6 +35,9 @@ export default defineComponent({
         'half-checked': props.halfChecked,
         disabled: mergedDisabled.value,
         unchecked: !mergedChecked.value,
+        [ns.m('glow-style')]: props.showGlowStyle,
+        [ns.m(`checkbox-${size.value}`)]: border.value,
+        [ns.m('checkbox-bordered')]: border.value,
       };
       const labelTitle = mergedIsShowTitle.value ? props.title || props.label : '';
       const bgImgStyle =
@@ -56,7 +59,7 @@ export default defineComponent({
         [ns.m('no-animation')]: !mergedShowAnimation.value,
       };
       const labelCls = {
-        [ns.m(size.value)]: size.value,
+        [ns.m(size.value)]: border.value,
         [ns.m('bordered')]: border.value,
       };
       const stopPropagation = ($event: Event) => $event.stopPropagation();
@@ -68,6 +71,11 @@ export default defineComponent({
       return (
         <div class={wrapperCls.value} style={wrapperStyle.value}>
           <div class={checkboxCls}>
+            {props.showGlowStyle && mergedShowAnimation.value && (
+              <div class={ns.e('glow-box')}>
+                <span class="glow-bg"></span>
+              </div>
+            )}
             <label title={labelTitle} onClick={handleClick} class={labelCls} style={{ width: itemWidth?.value ? '100%' : 'auto' }}>
               <input
                 name={(props.name || props.value) as string}
@@ -81,12 +89,9 @@ export default defineComponent({
               />
               <span style={spanStyle} class={spanCls}>
                 <span class={ns.e('halfchecked-bg')}></span>
-                <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" class={ns.e('tick-wrap')}>
+                <svg viewBox="0 0 14 14" width="14" height="14" class={ns.e('tick-wrap')}>
                   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                    <polygon
-                      fill-rule="nonzero"
-                      points="5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043"
-                      class={polygonCls}></polygon>
+                    <path d="M 2.3 7.0 5.6 9.6 11.4 3.5" stroke="#fff" stroke-width="1.5" fill="none" class={polygonCls}></path>
                   </g>
                 </svg>
               </span>
diff --git a/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx b/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx
index 0ba472323f..bce48fd41c 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx
+++ b/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, Transition, ref, renderSlot, useSlots, getCurrentInstance, Teleport, withModifiers } from 'vue';
+import { defineComponent, Transition, ref, renderSlot, useSlots, getCurrentInstance, Teleport, withModifiers, computed, toRefs } from 'vue';
 import type { SetupContext } from 'vue';
 import { rangeDatePickerProProps, RangeDatePickerProProps } from '../range-date-picker-types';
 import { FlexibleOverlay } from '../../../overlay';
@@ -19,6 +19,7 @@ export default defineComponent({
   setup(props: RangeDatePickerProProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DDatePickerPro', app);
+    const { showGlowStyle } = toRefs(props);
 
     const ns = useNamespace('range-date-picker-pro');
     const {
@@ -44,6 +45,14 @@ export default defineComponent({
       onChangeRangeFocusType,
     } = useRangePickerPro(props, ctx);
     const position = ref(['bottom-start', 'top-start']);
+    const currentPosition = ref('bottom');
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      'z-index': 'var(--devui-z-index-dropdown, 1052)',
+    }));
 
     return () => {
       const vSlots = {
@@ -54,7 +63,12 @@ export default defineComponent({
       return (
         <div class={[ns.b(), props.showTime ? ns.e('range-time-width') : ns.e('range-width'), isPanelShow.value && ns.m('open')]}>
           <div
-            class={[ns.e('range-picker'), pickerDisabled.value && ns.m('disabled'), isValidateError.value && ns.m('error')]}
+            class={[
+              ns.e('range-picker'),
+              pickerDisabled.value && ns.m('disabled'),
+              isValidateError.value && ns.m('error'),
+              showGlowStyle.value && ns.m('glow-style'),
+            ]}
             ref={originRef}
             onMouseover={() => (isMouseEnter.value = true)}
             onMouseout={() => (isMouseEnter.value = false)}>
@@ -68,6 +82,7 @@ export default defineComponent({
                 ref={startInputRef}
                 modelValue={displayDateValue.value[0]}
                 placeholder={placeholder.value[0] || t('startPlaceholder')}
+                show-glow-style={false}
                 onFocus={withModifiers(
                   (e: MouseEvent) => {
                     onFocus('start');
@@ -98,6 +113,7 @@ export default defineComponent({
                 ref={endInputRef}
                 modelValue={displayDateValue.value[1]}
                 placeholder={placeholder.value[1] || t('endPlaceholder')}
+                show-glow-style={false}
                 onFocus={withModifiers(
                   (e: MouseEvent) => {
                     onFocus('end');
@@ -120,14 +136,15 @@ export default defineComponent({
             </span>
           </div>
           <Teleport to="body">
-            <Transition name="fade">
+            <Transition name={ns.m(`fade-${currentPosition.value}`)}>
               <FlexibleOverlay
                 v-model={isPanelShow.value}
                 ref={overlayRef}
                 origin={originRef.value}
                 align="start"
                 position={position.value}
-                style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
+                style={styles.value}
+                onPositionChange={handlePositionChange}>
                 <DatePickerProPanel
                   {...props}
                   dateValue={dateValue.value}
diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts
index 62d6109fc6..f83b1343f1 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts
+++ b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts
@@ -30,6 +30,10 @@ export const datePickerProCommonProps = {
     type: String,
     default: 'date',
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 };
 
 export const datePickerProProps = {
diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.scss b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.scss
index 66236ab5b0..44d16294c8 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.scss
+++ b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.scss
@@ -362,9 +362,9 @@ $input-height-lg: 46px;
     border: 1px solid $devui-form-control-line;
     border-radius: $devui-border-radius;
     background-color: $devui-form-control-bg;
-    transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
+    transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
-    &:not(.#{$devui-prefix}-range-date-picker-pro--error):not(.#{$devui-prefix}-range-date-picker-pro--disabled):hover {
+    &:not(.#{$devui-prefix}-range-date-picker-pro--error, .#{$devui-prefix}-range-date-picker-pro--disabled, .#{$devui-prefix}-range-date-picker-pro--glow-style):hover {
       border-color: $devui-form-control-line-hover;
     }
 
@@ -465,6 +465,12 @@ $input-height-lg: 46px;
       border-color: $devui-danger-line;
       background-color: $devui-danger-bg;
     }
+
+    &.#{$devui-prefix}-range-date-picker-pro--glow-style {
+      &:hover {
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      }
+    }
   }
 
   &--open {
@@ -475,6 +481,9 @@ $input-height-lg: 46px;
         border-color: $devui-form-control-line-active;
       }
     }
+    .#{$devui-prefix}-range-date-picker-pro--glow-style {
+      box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    }
   }
 }
 
@@ -691,3 +700,50 @@ $input-height-lg: 46px;
     }
   }
 }
+
+.#{$devui-prefix}-range-date-picker-pro--fade,
+.#{$devui-prefix}-date-picker-pro--fade {
+  &-bottom {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(-4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+
+  &-top {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx
index 459180d8a8..54ce7df432 100644
--- a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx
+++ b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, Transition, ref, renderSlot, useSlots, getCurrentInstance, Teleport, withModifiers } from 'vue';
+import { defineComponent, Transition, ref, renderSlot, useSlots, getCurrentInstance, Teleport, withModifiers, computed, toRefs } from 'vue';
 import type { SetupContext } from 'vue';
 import { datePickerProProps, DatePickerProProps } from './date-picker-pro-types';
 import usePickerPro from './use-picker-pro';
@@ -18,6 +18,7 @@ export default defineComponent({
   setup(props: DatePickerProProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DDatePickerPro', app);
+    const { showGlowStyle } = toRefs(props);
 
     const ns = useNamespace('date-picker-pro');
     const {
@@ -39,6 +40,15 @@ export default defineComponent({
       handlerClearTime,
     } = usePickerPro(props, ctx, t);
     const position = ref<Placement[]>(['bottom-start', 'top-start']);
+    const currentPosition = ref('bottom');
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      'z-index': 'var(--devui-z-index-dropdown, 1052)',
+    }));
+
     return () => {
       const vSlots = {
         rightArea: ctx.slots?.rightArea && (() => renderSlot(useSlots(), 'rightArea')),
@@ -59,6 +69,7 @@ export default defineComponent({
               size={pickerSize.value}
               disabled={pickerDisabled.value}
               error={isValidateError.value}
+              show-glow-style={showGlowStyle.value}
               v-slots={{
                 prefix: () => (
                   <span class={ns.e('single-picker-icon')}>
@@ -74,14 +85,15 @@ export default defineComponent({
             />
           </div>
           <Teleport to="body">
-            <Transition name="fade">
+            <Transition name={ns.m(`fade-${currentPosition.value}`)}>
               <FlexibleOverlay
                 v-model={isPanelShow.value}
                 ref={overlayRef}
                 origin={originRef.value}
                 align="start"
                 position={position.value}
-                style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
+                style={styles.value}
+                onPositionChange={handlePositionChange}>
                 <DatePickerProPanel
                   {...props}
                   dateValue={dateValue.value}
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-input-render.ts b/packages/devui-vue/devui/editable-select/src/composables/use-input-render.ts
index 01a5aa8e99..9facf3a1b7 100644
--- a/packages/devui-vue/devui/editable-select/src/composables/use-input-render.ts
+++ b/packages/devui-vue/devui/editable-select/src/composables/use-input-render.ts
@@ -25,6 +25,7 @@ export function useInputRender(props: EditableSelectProps, states: States): UseI
     [ns.e('wrapper')]: true,
     [ns.em('wrapper', 'focus')]: states.isFocus,
     [ns.em('wrapper', 'disabled')]: props.disabled,
+    [ns.em('wrapper', 'glow-style')]: props.showGlowStyle,
   }));
 
   const inputInnerClasses = computed(() => ({
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select-types.ts b/packages/devui-vue/devui/editable-select/src/editable-select-types.ts
index 0979768720..345b825d75 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select-types.ts
+++ b/packages/devui-vue/devui/editable-select/src/editable-select-types.ts
@@ -83,6 +83,10 @@ export const editableSelectProps = {
     type: Boolean,
     default: false,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type EditableSelectProps = ExtractPropTypes<typeof editableSelectProps>;
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.scss b/packages/devui-vue/devui/editable-select/src/editable-select.scss
index 638007c8ef..b6fbc40e90 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select.scss
+++ b/packages/devui-vue/devui/editable-select/src/editable-select.scss
@@ -32,7 +32,7 @@
       border: 1px solid $devui-form-control-line;
       border-radius: $devui-border-radius;
       background-color: $devui-form-control-bg;
-      transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
+      transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
       &:not(.#{$devui-prefix}-editable-select-input__wrapper--disabled):not(&--focus):hover {
         border-color: $devui-form-control-line-hover;
@@ -40,6 +40,11 @@
 
       &--focus {
         border-color: $devui-form-control-line-active;
+
+        &.#{$devui-prefix}-editable-select-input__wrapper--glow-style {
+          box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+          border-color: $devui-form-control-line-active;
+        }
       }
 
       &--disabled {
@@ -57,6 +62,13 @@
           cursor: not-allowed;
         }
       }
+
+      &--glow-style {
+        &:not(.#{$devui-prefix}-editable-select-input__wrapper--disabled, .#{$devui-prefix}-editable-select-input__wrapper--focus):hover {
+          box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+          border-color: $devui-form-control-line !important;
+        }
+      }
     }
 
     &__inner {
@@ -93,11 +105,28 @@
         pointer-events: auto;
         display: flex;
         cursor: pointer;
+
+        svg {
+          path {
+            fill: $devui-shape-icon-fill;
+            transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
+          }
+
+          &:hover {
+            path {
+              fill: $devui-shape-icon-fill-hover;
+            }
+          }
+        }
       }
 
       .#{$devui-prefix}-editable-select__arrow-icon {
         display: flex;
         transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+
+        svg path {
+          fill: $devui-icon-text;
+        }
       }
     }
   }
@@ -163,3 +192,49 @@
     }
   }
 }
+
+.#{$devui-prefix}-editable-select--fade {
+  &-bottom {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(-4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+
+  &-top {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.tsx b/packages/devui-vue/devui/editable-select/src/editable-select.tsx
index fa2ccb0283..c9f154502a 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select.tsx
+++ b/packages/devui-vue/devui/editable-select/src/editable-select.tsx
@@ -1,13 +1,13 @@
 // 三方库依赖
-import { defineComponent, provide, ref, Teleport, toRef, toRefs, Transition, withModifiers } from 'vue';
+import { defineComponent, provide, ref, Teleport, toRef, toRefs, Transition, withModifiers, computed } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 // 类型文件
 import type { SetupContext } from 'vue';
 import { editableSelectProps, EditableSelectProps, SELECT_KEY } from './editable-select-types';
 // 子组件
-import Icon from '../../icon/src/icon';
 import { FlexibleOverlay } from '../../overlay';
 import Dropdown from './components/dropdown/dropdown';
+import { SelectArrowIcon, InputClearIcon } from '../../svg-icons';
 // 工具函数
 import { useSelect, useSelectStates } from './composables/use-select';
 import { useKeyboardSelect } from './composables/use-keyboard-select';
@@ -35,6 +35,7 @@ export default defineComponent({
     const states = useSelectStates();
     //  data refs
     const { appendToBody, disabled, modelValue, position, placeholder } = toRefs(props);
+    const align = computed(() => (position.value.some((item) => item.includes('start') || item.includes('end')) ? 'start' : null));
 
     // input事件
     const { onInput, onMouseenter, onMouseleave, setSoftFocus, handleBlur, handleFocus, handleClear } = useInputEvent(
@@ -80,19 +81,29 @@ export default defineComponent({
 
     //  类名
     const { inputClasses, inputWrapperClasses, inputInnerClasses, inputSuffixClasses } = useInputRender(props, states);
+    const currentPosition = ref('bottom');
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.includes('top') || pos.includes('right-end') || pos.includes('left-end') ? 'top' : 'bottom';
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      'z-index': 'var(--devui-z-index-dropdown, 1052)',
+    }));
 
     // 渲染自定义模板
 
     // 渲染下拉框核心
     const renderBasicDropdown = () => {
       return (
-        <Transition name="fade">
+        <Transition name={ns.m(`fade-${currentPosition.value}`)}>
           <FlexibleOverlay
             ref={overlayRef}
             v-model={states.visible}
             origin={originRef.value}
             position={position.value}
-            style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
+            align={align.value}
+            style={styles.value}
+            onPositionChange={handlePositionChange}>
             <Dropdown options={filteredOptions.value} width={props.width} maxHeight={props.maxHeight} v-slots={ctx.slots}></Dropdown>
           </FlexibleOverlay>
         </Transition>
@@ -132,10 +143,10 @@ export default defineComponent({
               />
               <span class={inputSuffixClasses.value}>
                 <span class={ns.e('clear-icon')} v-show={showClearable.value} onClick={withModifiers(handleClear, ['stop'])}>
-                  <Icon name="icon-remove" />
+                  <InputClearIcon />
                 </span>
                 <span class={ns.e('arrow-icon')} v-show={!showClearable.value}>
-                  <Icon name="select-arrow" />
+                  <SelectArrowIcon />
                 </span>
               </span>
             </div>
diff --git a/packages/devui-vue/devui/input-number/src/input-number-types.ts b/packages/devui-vue/devui/input-number/src/input-number-types.ts
index b2e97f09a3..d0e52a4566 100644
--- a/packages/devui-vue/devui/input-number/src/input-number-types.ts
+++ b/packages/devui-vue/devui/input-number/src/input-number-types.ts
@@ -23,7 +23,7 @@ export const inputNumberProps = {
     default: -Infinity,
   },
   size: {
-    type: String as PropType<ISize>
+    type: String as PropType<ISize>,
   },
   modelValue: {
     type: Number,
@@ -35,6 +35,10 @@ export const inputNumberProps = {
     type: [RegExp, String] as PropType<RegExp | string>,
     default: '',
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>;
diff --git a/packages/devui-vue/devui/input-number/src/input-number.scss b/packages/devui-vue/devui/input-number/src/input-number.scss
index 0fc81a6d4c..85a3a3997a 100644
--- a/packages/devui-vue/devui/input-number/src/input-number.scss
+++ b/packages/devui-vue/devui/input-number/src/input-number.scss
@@ -29,6 +29,56 @@
     }
   }
 
+  &.#{$devui-prefix}-input-number--glow-style {
+    &:hover {
+      .#{$devui-prefix}-input-number__input-box:not(.disabled) {
+        border-color: $devui-form-control-line;
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons:not(.disabled) {
+        border-color: $devui-form-control-line;
+      }
+
+      .#{$devui-prefix}-input-number__input-box--error:not(.disabled) {
+        border-color: $devui-danger-line;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons--error:not(.disabled) {
+        border-color: $devui-danger-line;
+        border-left-color: $devui-form-control-line-hover;
+
+        span {
+          background-color: $devui-danger-bg;
+        }
+      }
+    }
+
+    &:focus-within {
+      .#{$devui-prefix}-input-number__input-box:not(.disabled) {
+        border-color: $devui-form-control-line-active;
+        box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons:not(.disabled) {
+        border-color: $devui-form-control-line-active;
+      }
+
+      .#{$devui-prefix}-input-number__input-box--error:not(.disabled) {
+        border-color: $devui-danger-line;
+      }
+
+      .#{$devui-prefix}-input-number__control-buttons--error:not(.disabled) {
+        border-color: $devui-danger-line;
+        border-left-color: $devui-form-control-line-hover;
+
+        span {
+          background-color: $devui-danger-bg;
+        }
+      }
+    }
+  }
+
   .#{$devui-prefix}-input-number__input-box {
     box-sizing: border-box;
     width: 100%;
@@ -42,7 +92,8 @@
     border: 1px solid $devui-form-control-line;
     cursor: text;
     -moz-appearance: textfield;
-    transition: border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+    transition: border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
+      box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
     &:not(.disabled) {
       background-color: $devui-base-bg;
diff --git a/packages/devui-vue/devui/input-number/src/use-input-number.ts b/packages/devui-vue/devui/input-number/src/use-input-number.ts
index ee845be730..31c1244071 100644
--- a/packages/devui-vue/devui/input-number/src/use-input-number.ts
+++ b/packages/devui-vue/devui/input-number/src/use-input-number.ts
@@ -17,6 +17,7 @@ export function useRender(props: InputNumberProps, ctx: SetupContext): UseRender
   const wrapClass = computed(() => [
     {
       [ns.b()]: true,
+      [ns.m('glow-style')]: props.showGlowStyle,
       [ns.m(inputNumberSize.value)]: true,
     },
     customClass,
diff --git a/packages/devui-vue/devui/input/src/composables/use-input-render.ts b/packages/devui-vue/devui/input/src/composables/use-input-render.ts
index 1a257318cb..a18a3a586e 100644
--- a/packages/devui-vue/devui/input/src/composables/use-input-render.ts
+++ b/packages/devui-vue/devui/input/src/composables/use-input-render.ts
@@ -11,7 +11,7 @@ export function useInputRender(props: InputProps, ctx: SetupContext): UseInputRe
   const ns = useNamespace('input');
   const slotNs = useNamespace('input-slot');
   const isFocus = ref(false);
-  const { error, size, disabled } = toRefs(props);
+  const { error, size, disabled, showGlowStyle } = toRefs(props);
   const slots = ctx.slots;
   const inputDisabled = computed(() => disabled.value || formContext?.disabled);
   const inputSize = computed(() => size?.value || formContext?.size || '');
@@ -25,6 +25,7 @@ export function useInputRender(props: InputProps, ctx: SetupContext): UseInputRe
     [ns.e('wrapper')]: true,
     [ns.m('focus')]: isFocus.value,
     [ns.m('disabled')]: inputDisabled.value,
+    [ns.m('glow-style')]: showGlowStyle.value,
     [ns.m('error')]: error.value || isValidateError.value,
     [ns.m('feedback')]: Boolean(formItemContext?.validateState) && formItemContext?.showFeedback,
   }));
diff --git a/packages/devui-vue/devui/input/src/input-types.tsx b/packages/devui-vue/devui/input/src/input-types.tsx
index 9bfdb4f1c7..27578dd5db 100644
--- a/packages/devui-vue/devui/input/src/input-types.tsx
+++ b/packages/devui-vue/devui/input/src/input-types.tsx
@@ -50,6 +50,10 @@ export const inputProps = {
     type: Boolean,
     default: false,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type InputProps = ExtractPropTypes<typeof inputProps>;
diff --git a/packages/devui-vue/devui/input/src/input.scss b/packages/devui-vue/devui/input/src/input.scss
index 172a02f194..fca194c9a5 100644
--- a/packages/devui-vue/devui/input/src/input.scss
+++ b/packages/devui-vue/devui/input/src/input.scss
@@ -15,18 +15,28 @@
     border: 1px solid $devui-form-control-line;
     border-radius: $devui-border-radius;
     background-color: $devui-form-control-bg;
-    transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
+    transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
     height: 100%;
 
     &:not(.#{$devui-prefix}-input--error):not(.#{$devui-prefix}-input--disabled):not(.#{$devui-prefix}-input--focus):hover {
       border-color: $devui-form-control-line-hover;
     }
+
+    &.#{$devui-prefix}-input--glow-style:not(.#{$devui-prefix}-input--error):not(.#{$devui-prefix}-input--disabled):not(.#{$devui-prefix}-input--focus):hover {
+      box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+      border-color: $devui-form-control-line;
+    }
   }
 
   &--focus:not(.#{$devui-prefix}-input--error) {
     border-color: $devui-form-control-line-active;
   }
 
+  &--focus.#{$devui-prefix}-input--glow-style:not(.#{$devui-prefix}-input--error) {
+    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    border-color: $devui-form-control-line-active;
+  }
+
   &--disabled {
     color: $devui-disabled-text;
     border-color: $devui-disabled-line;
diff --git a/packages/devui-vue/devui/mention/src/mention-types.ts b/packages/devui-vue/devui/mention/src/mention-types.ts
index dc2d50d0e2..e5ab811063 100644
--- a/packages/devui-vue/devui/mention/src/mention-types.ts
+++ b/packages/devui-vue/devui/mention/src/mention-types.ts
@@ -5,33 +5,35 @@ export interface IMentionSuggestionItem {
   id: string | number;
 }
 
-
 export const mentionProps = {
   position: {
     type: String as PropType<'top' | 'bottom'>,
-    default: 'bottom'
+    default: 'bottom',
   },
   suggestions: {
     type: Array as PropType<IMentionSuggestionItem[]>,
-    required: true
+    required: true,
   },
   notFoundContent: {
     type: String,
-    default: 'No suggestion matched'
+    default: 'No suggestion matched',
   },
   loading: {
     type: Boolean as PropType<boolean>,
-    default: false
+    default: false,
   },
   dmValueParse: {
     type: Object as PropType<IMentionSuggestionItem>,
-    default: { value: 'value', id: 'id' }
+    default: { value: 'value', id: 'id' },
   },
   trigger: {
     type: Array as PropType<string[]>,
-    default: ['@']
-  }
+    default: ['@'],
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 };
 
-
 export type MentionProps = ExtractPropTypes<typeof mentionProps>;
diff --git a/packages/devui-vue/devui/mention/src/mention.tsx b/packages/devui-vue/devui/mention/src/mention.tsx
index cca8a58b46..9b96511ca3 100644
--- a/packages/devui-vue/devui/mention/src/mention.tsx
+++ b/packages/devui-vue/devui/mention/src/mention.tsx
@@ -49,7 +49,7 @@ export default defineComponent({
     const handleBlur = (e: Event) => {
       const { target } = e;
       const ele = document.querySelector('.devui-mention');
-      if (!(ele?.contains(target as Element))) {
+      if (!ele?.contains(target as Element)) {
         setTimeout(() => {
           showSuggestions.value = false;
         }, 100);
@@ -134,7 +134,11 @@ export default defineComponent({
     return () => {
       return (
         <div class={ns.b()}>
-          <d-textarea v-model={textContext.value} onUpdate={handleUpdate} onFocus={handleFocus}></d-textarea>
+          <d-textarea
+            v-model={textContext.value}
+            show-glow-style={props.showGlowStyle}
+            onUpdate={handleUpdate}
+            onFocus={handleFocus}></d-textarea>
           {showSuggestions.value ? (
             loading.value ? (
               <div class={[`${ns.e('suggestions')} ${ns.e('suggestions-loading')}`]}>加载中... </div>
diff --git a/packages/devui-vue/devui/overlay/src/fixed-overlay/fixed-overlay.scss b/packages/devui-vue/devui/overlay/src/fixed-overlay/fixed-overlay.scss
index 9f7c4d7dac..1873e2c5e4 100644
--- a/packages/devui-vue/devui/overlay/src/fixed-overlay/fixed-overlay.scss
+++ b/packages/devui-vue/devui/overlay/src/fixed-overlay/fixed-overlay.scss
@@ -7,6 +7,7 @@
   bottom: 0;
   left: 0;
   background-color: $devui-shadow;
+  opacity: 1;
   z-index: 1050;
 }
 
diff --git a/packages/devui-vue/devui/radio/src/radio-group.scss b/packages/devui-vue/devui/radio/src/radio-group.scss
index 255626bfdf..f3ebf228df 100644
--- a/packages/devui-vue/devui/radio/src/radio-group.scss
+++ b/packages/devui-vue/devui/radio/src/radio-group.scss
@@ -15,6 +15,8 @@
   }
 
   .#{$devui-prefix}-radio__wrapper {
+    height: 28px;
+
     &:not(:last-child) {
       padding-right: 20px;
     }
diff --git a/packages/devui-vue/devui/radio/src/radio-types.ts b/packages/devui-vue/devui/radio/src/radio-types.ts
index 82cd9c066b..fcd6d3fe7f 100644
--- a/packages/devui-vue/devui/radio/src/radio-types.ts
+++ b/packages/devui-vue/devui/radio/src/radio-types.ts
@@ -24,8 +24,12 @@ const radioCommonProps = {
     type: Boolean,
     default: false,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
   size: {
-    type: String as PropType<sizeTypes>
+    type: String as PropType<sizeTypes>,
   },
 };
 
diff --git a/packages/devui-vue/devui/radio/src/radio.scss b/packages/devui-vue/devui/radio/src/radio.scss
index ff533a5f9d..582520f7ed 100644
--- a/packages/devui-vue/devui/radio/src/radio.scss
+++ b/packages/devui-vue/devui/radio/src/radio.scss
@@ -29,46 +29,10 @@ $radio-label-height-map: (
     align-items: center;
   }
 
-  &:hover {
-    .#{$devui-prefix}-radio__label {
-      color: $devui-primary-hover;
-    }
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    .#{$devui-prefix}-radio__material-outer {
-      stroke: $devui-form-control-line-active;
-    }
-
-    .#{$devui-prefix}-radio__material-inner {
-      fill: $devui-brand;
-    }
-  }
-
   &.active {
-    .#{$devui-prefix}-radio__material-outer {
-      opacity: 1;
-      stroke: $devui-form-control-line-active;
-      transition: stroke 50ms $devui-animation-ease-in-out;
-
-      &.disabled {
-        stroke: $devui-icon-fill-active-disabled;
-        fill: transparent;
-      }
-    }
-
-    .#{$devui-prefix}-radio__material-inner {
-      opacity: 1;
-      transform: scale(1);
-      transition:
-        transform $devui-animation-duration-base $devui-animation-ease-in-out,
-        opacity $devui-animation-duration-base $devui-animation-ease-in-out;
-
-      &.disabled {
-        fill: $devui-icon-fill-active-disabled;
-      }
+    .#{$devui-prefix}-radio__material {
+      border-width: 4px;
+      border-color: $devui-brand;
     }
 
     &.#{$devui-prefix}-radio--bordered {
@@ -79,17 +43,6 @@ $radio-label-height-map: (
   &.disabled {
     cursor: not-allowed;
 
-    /* 选择图标-外圈 */
-    .#{$devui-prefix}-radio__material-outer {
-      stroke: $devui-disabled-line;
-      fill: $devui-disabled-bg;
-    }
-
-    /* 选择图标-内圈 */
-    .#{$devui-prefix}-radio__material-inner {
-      fill: $devui-icon-fill-active-disabled;
-    }
-
     .#{$devui-prefix}-radio__label {
       color: $devui-disabled-text;
     }
@@ -97,6 +50,17 @@ $radio-label-height-map: (
     &.#{$devui-prefix}-radio--bordered {
       border-color: $devui-disabled-line;
     }
+
+    .#{$devui-prefix}-radio__material {
+      border-color: $devui-shape-icon-fill;
+      background-color: $devui-shape-icon-fill-disabled;
+    }
+
+    &.active {
+      .#{$devui-prefix}-radio__material {
+        border-color: $devui-icon-fill-active-disabled;
+      }
+    }
   }
 
   /* 选择图标-容器 */
@@ -107,25 +71,11 @@ $radio-label-height-map: (
     overflow: hidden;
     height: 16px;
     width: 16px;
-    line-height: 16px;
+    border: 1px solid $devui-shape-icon-fill;
+    border-radius: $devui-border-radius-full;
+    transform: translateY(-1px);
     user-select: none;
-  }
-
-  /* 选择图标-外圈 */
-  &__material-outer {
-    opacity: 1;
-    transition: stroke 50ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    stroke: $devui-line;
-    fill: transparent;
-  }
-
-  /* 选择图标-内圈 */
-  &__material-inner {
-    opacity: 0;
-    transform: scale(0);
-    transform-origin: 50% 50%;
-    transition: transform 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    fill: $devui-brand;
+    transition: border $devui-animation-duration-base $devui-animation-ease-in-out;
   }
 
   /* 内容 */
@@ -133,8 +83,6 @@ $radio-label-height-map: (
     color: $devui-text;
     margin-left: 8px;
     font-size: $devui-font-size;
-    transition: color $devui-animation-duration-slow $devui-animation-ease-in-out;
-    line-height: 1;
   }
 
   &__input {
@@ -147,6 +95,18 @@ $radio-label-height-map: (
     pointer-events: none;
   }
 
+  &--glow-style.#{$devui-prefix}-radio {
+    .#{$devui-prefix}-radio__material {
+      transition: box-shadow $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+    }
+
+    &:not(.disabled):hover {
+      .#{$devui-prefix}-radio__material {
+        box-shadow: 0 0 0 6px $devui-range-item-hover-bg;
+      }
+    }
+  }
+
   &--bordered {
     border: 1px solid $devui-disabled-line;
     border-radius: $devui-border-radius;
diff --git a/packages/devui-vue/devui/radio/src/radio.tsx b/packages/devui-vue/devui/radio/src/radio.tsx
index ef3a2af490..d3d1e43b05 100644
--- a/packages/devui-vue/devui/radio/src/radio.tsx
+++ b/packages/devui-vue/devui/radio/src/radio.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, SetupContext } from 'vue';
+import { defineComponent, SetupContext, computed } from 'vue';
 import { radioProps, RadioProps } from './radio-types';
 import { useNamespace } from '@devui/shared/utils';
 import { useRadio } from './use-radio';
@@ -15,17 +15,18 @@ export default defineComponent({
       const radioCls = {
         [ns.e('wrapper')]: true,
       };
-      const labelCls = {
+      const labelCls = computed(() => ({
         active: isChecked.value,
         disabled: isDisabled.value,
         [ns.b()]: true,
         [ns.m('bordered')]: border.value,
-        [ns.m(size.value)]: size.value,
-      };
+        [ns.m(size.value)]: border.value,
+        [ns.m('glow-style')]: props.showGlowStyle,
+      }));
 
       return (
         <div class={radioCls}>
-          <label class={labelCls}>
+          <label class={labelCls.value}>
             <input
               type="radio"
               name={radioName.value}
@@ -35,24 +36,7 @@ export default defineComponent({
               value={props.value}
               checked={isChecked.value}
             />
-            <span class={ns.e('material')}>
-              <svg height="100%" width="100%" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                <circle
-                  class={{ [ns.e('material-outer')]: true, disabled: isDisabled.value }}
-                  cx="512"
-                  cy="512"
-                  r="486.5"
-                  stroke-width="51"
-                />
-                <circle
-                  class={{ [ns.e('material-inner')]: true, disabled: isDisabled.value }}
-                  cx="512"
-                  fill-rule="nonzero"
-                  cy="512"
-                  r="320"
-                />
-              </svg>
-            </span>
+            <span class={ns.e('material')}></span>
             <span class={ns.e('label')}>{ctx.slots.default?.()}</span>
           </label>
         </div>
diff --git a/packages/devui-vue/devui/select/src/composables/use-select-content.ts b/packages/devui-vue/devui/select/src/composables/use-select-content.ts
index 1c4150602b..5001f8385e 100644
--- a/packages/devui-vue/devui/select/src/composables/use-select-content.ts
+++ b/packages/devui-vue/devui/select/src/composables/use-select-content.ts
@@ -56,6 +56,7 @@ export default function useSelectContent(): UseSelectContentReturnType {
     return className(ns.e('selection'), {
       [ns.e('clearable')]: mergeClearable.value,
       [ns.em('selection', 'error')]: isValidateError.value,
+      [ns.em('selection', 'glow-style')]: Boolean(select?.showGlowStyle),
     });
   });
 
diff --git a/packages/devui-vue/devui/select/src/select-types.ts b/packages/devui-vue/devui/select/src/select-types.ts
index c48cebe806..5c1232005a 100644
--- a/packages/devui-vue/devui/select/src/select-types.ts
+++ b/packages/devui-vue/devui/select/src/select-types.ts
@@ -103,6 +103,10 @@ export const selectProps = {
     type: Number,
     default: 0,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type SelectProps = ExtractPropTypes<typeof selectProps>;
diff --git a/packages/devui-vue/devui/select/src/select.scss b/packages/devui-vue/devui/select/src/select.scss
index cc9ddb81c5..0a7f6ad7fc 100644
--- a/packages/devui-vue/devui/select/src/select.scss
+++ b/packages/devui-vue/devui/select/src/select.scss
@@ -68,6 +68,31 @@ $select-item-min-height: 36px;
   }
 }
 
+.#{$devui-prefix}-select:not(.#{$devui-prefix}-select--disabled):not(.#{$devui-prefix}-select--underlined) {
+  .#{$devui-prefix}-select__selection.#{$devui-prefix}-select__selection--glow-style {
+    &:hover {
+      border-color: $devui-form-control-line;
+      box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    }
+    &.#{$devui-prefix}-select__selection--error:hover {
+      border-color: $devui-danger-line;
+      box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    }
+  }
+}
+
+.#{$devui-prefix}-select--open,
+.#{$devui-prefix}-select--focus {
+  .#{$devui-prefix}-select__selection.#{$devui-prefix}-select__selection--glow-style {
+    border-color: $devui-form-control-line-active !important;
+    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+
+    &.#{$devui-prefix}-select__selection--error {
+      border-color: $devui-danger-line;
+    }
+  }
+}
+
 .#{$devui-prefix}-select--underlined {
   border-bottom: 1px solid $devui-form-control-line;
   @include border-transition();
@@ -136,6 +161,7 @@ $select-item-min-height: 36px;
   border-radius: $devui-border-radius;
   background-color: $devui-form-control-bg;
   color: $devui-text;
+  transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
 
   &--error {
     border-color: $devui-danger-line;
diff --git a/packages/devui-vue/devui/switch/src/switch.scss b/packages/devui-vue/devui/switch/src/switch.scss
index 96edfaa795..2f00279606 100644
--- a/packages/devui-vue/devui/switch/src/switch.scss
+++ b/packages/devui-vue/devui/switch/src/switch.scss
@@ -31,11 +31,13 @@
     transition: $devui-animation-duration-slow $devui-animation-ease-in-out-smooth all;
 
     &:not(.#{$devui-prefix}-switch--checked):hover {
-      border-color: $devui-line;
+      background-color: $devui-gray-40;
+      border-color: $devui-gray-40;
     }
 
     &:active {
-      border-color: $devui-brand-active-focus;
+      border-color: $devui-primary-hover;
+      border-color: $devui-primary-hover;
     }
 
     .#{$devui-prefix}-switch__inner-wrapper {
@@ -63,7 +65,11 @@
       position: absolute;
       top: 1px;
       left: 1px;
-      transition: $devui-animation-duration-slow $devui-animation-ease-in-out-smooth all;
+      transition: $devui-animation-duration-base $devui-animation-ease-in-out-smooth all;
+
+      &.mouseDown {
+        width: 19px;
+      }
     }
   }
 
@@ -76,6 +82,10 @@
   .#{$devui-prefix}-switch--checked small {
     background: $devui-light-text;
     left: 26px;
+
+    &.mouseDown {
+      left: 23px;
+    }
   }
 
   // lg
@@ -100,11 +110,19 @@
     & small {
       width: 22px;
       height: 22px;
+
+      &.mouseDown {
+        width: 26px;
+      }
     }
 
     .#{$devui-prefix}-switch--checked small {
       background: $devui-light-text;
       left: 31px;
+
+      &.mouseDown {
+        left: 28px;
+      }
     }
   }
 
@@ -132,10 +150,18 @@
       width: 12px;
       height: 12px;
       position: absolute;
+
+      &.mouseDown {
+        width: 14px;
+      }
     }
 
     .#{$devui-prefix}-switch--checked small {
       left: 19px;
+
+      &.mouseDown {
+        left: 17px;
+      }
     }
   }
 
@@ -144,8 +170,8 @@
     border-color: $devui-brand;
 
     &:hover {
-      background: $devui-brand-active;
-      border-color: $devui-brand-active;
+      background: $devui-primary-hover;
+      border-color: $devui-primary-hover;
     }
 
     &:active {
@@ -154,7 +180,7 @@
     }
   }
 
-  &--disabled {
+  & > .#{$devui-prefix}-switch--disabled {
     &,
     &:hover,
     &:active,
diff --git a/packages/devui-vue/devui/switch/src/switch.tsx b/packages/devui-vue/devui/switch/src/switch.tsx
index c2fe7c049d..81a3c4811a 100644
--- a/packages/devui-vue/devui/switch/src/switch.tsx
+++ b/packages/devui-vue/devui/switch/src/switch.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, renderSlot, useSlots, SetupContext } from 'vue';
+import { defineComponent, renderSlot, useSlots, SetupContext, ref } from 'vue';
 import { SwitchProps, switchProps } from './switch-types';
 import { useNamespace } from '@devui/shared/utils';
 import { useSwitch } from './use-switch';
@@ -11,6 +11,8 @@ export default defineComponent({
   setup(props: SwitchProps, ctx: SetupContext) {
     const ns = useNamespace('switch');
     const { toggle, checked, switchDisabled, switchSize } = useSwitch(props, ctx);
+    const AnimationNumberDurationSlow = 300;
+    const isMousedown = ref(false);
     return () => {
       const switchCls = {
         [ns.b()]: true,
@@ -30,14 +32,23 @@ export default defineComponent({
 
       const checkedContent = renderSlot(useSlots(), 'checkedContent');
       const uncheckedContent = renderSlot(useSlots(), 'uncheckedContent');
+      const onMousedown = () => {
+        isMousedown.value = true;
+      };
+
+      const onMouseup = () => {
+        setTimeout(() => {
+          isMousedown.value = false;
+        }, AnimationNumberDurationSlow / 2);
+      };
 
       return (
         <div class={switchCls}>
-          <span class={switchWrapperCls} style={switchWrapperStyle} onClick={toggle}>
+          <span class={switchWrapperCls} style={switchWrapperStyle} onClick={toggle} onMousedown={onMousedown} onMouseup={onMouseup}>
             <span class={ns.e('inner-wrapper')}>
               <div class={ns.e('inner')}>{checked.value ? checkedContent : uncheckedContent}</div>
             </span>
-            <small></small>
+            <small class={isMousedown.value && !props.disabled && 'mouseDown'}></small>
           </span>
         </div>
       );
diff --git a/packages/devui-vue/devui/textarea/src/composables/use-textarea-render.ts b/packages/devui-vue/devui/textarea/src/composables/use-textarea-render.ts
index e017d78efc..99f070334f 100644
--- a/packages/devui-vue/devui/textarea/src/composables/use-textarea-render.ts
+++ b/packages/devui-vue/devui/textarea/src/composables/use-textarea-render.ts
@@ -9,11 +9,12 @@ export function useTextareaRender(props: TextareaProps): UseTextareaRender {
   const ns = useNamespace('textarea');
   const isValidateError = computed(() => formItemContext?.validateState === 'error');
   const isFocus = ref(false);
-  const { error, disabled } = toRefs(props);
+  const { error, disabled, showGlowStyle } = toRefs(props);
   const textareaDisabled = computed(() => disabled.value || formContext?.disabled);
 
   const wrapClasses = computed(() => ({
     [ns.b()]: true,
+    [ns.m('glow-style')]: showGlowStyle.value,
     [ns.m('focus')]: isFocus.value,
     [ns.m('disabled')]: textareaDisabled.value,
     [ns.m('error')]: error.value || isValidateError.value,
diff --git a/packages/devui-vue/devui/textarea/src/textarea-types.ts b/packages/devui-vue/devui/textarea/src/textarea-types.ts
index b89c1b587c..b72ca81e8d 100644
--- a/packages/devui-vue/devui/textarea/src/textarea-types.ts
+++ b/packages/devui-vue/devui/textarea/src/textarea-types.ts
@@ -40,6 +40,10 @@ export const textareaProps = {
     type: Boolean,
     default: true,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type TextareaProps = ExtractPropTypes<typeof textareaProps>;
diff --git a/packages/devui-vue/devui/textarea/src/textarea.scss b/packages/devui-vue/devui/textarea/src/textarea.scss
index 214663495b..f322be6186 100644
--- a/packages/devui-vue/devui/textarea/src/textarea.scss
+++ b/packages/devui-vue/devui/textarea/src/textarea.scss
@@ -10,16 +10,25 @@
   border: 1px solid $devui-form-control-line;
   border-radius: $devui-border-radius;
   background: $devui-form-control-bg;
-  transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
+  transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow 0.3s $devui-animation-ease-in;
 
   &:not(.#{$devui-prefix}-textarea--error):not(.#{$devui-prefix}-textarea--disabled):not(.#{$devui-prefix}-textarea--focus):hover {
     border-color: $devui-form-control-line-hover;
   }
 
+  &.#{$devui-prefix}-textarea--glow-style:not(.#{$devui-prefix}-textarea--error):not(.#{$devui-prefix}-textarea--disabled):not(.#{$devui-prefix}-textarea--focus):hover {
+    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+    border-color: $devui-form-control-line;
+  }
+
   &--focus:not(.#{$devui-prefix}-textarea--error) {
     border-color: $devui-form-control-line-active;
   }
 
+  &--focus.#{$devui-prefix}-textarea--glow-style:not(.#{$devui-prefix}-textarea--error) {
+    box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
+  }
+
   &--disabled {
     border-color: $devui-disabled-line;
     background-color: $devui-disabled-bg;
diff --git a/packages/devui-vue/devui/time-picker/src/time-picker-types.ts b/packages/devui-vue/devui/time-picker/src/time-picker-types.ts
index e4d17a168f..af02dccacc 100644
--- a/packages/devui-vue/devui/time-picker/src/time-picker-types.ts
+++ b/packages/devui-vue/devui/time-picker/src/time-picker-types.ts
@@ -40,12 +40,16 @@ export const timePickerProps = {
     default: true,
   },
   size: {
-    type: String as PropType<sizeType>
+    type: String as PropType<sizeType>,
   },
   readonly: {
     type: Boolean,
     default: false,
   },
+  showGlowStyle: {
+    type: Boolean,
+    default: true,
+  },
 } as const;
 
 export type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;
diff --git a/packages/devui-vue/devui/time-picker/src/time-picker.scss b/packages/devui-vue/devui/time-picker/src/time-picker.scss
index d3323b66f1..940d7d7a55 100644
--- a/packages/devui-vue/devui/time-picker/src/time-picker.scss
+++ b/packages/devui-vue/devui/time-picker/src/time-picker.scss
@@ -17,3 +17,49 @@
     margin-right: 10px;
   }
 }
+
+.#{$devui-prefix}-time-picker--fade {
+  &-bottom {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(-4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+
+  &-top {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/time-picker/src/time-picker.tsx b/packages/devui-vue/devui/time-picker/src/time-picker.tsx
index b75aeac2b9..b9d6e4a1a5 100644
--- a/packages/devui-vue/devui/time-picker/src/time-picker.tsx
+++ b/packages/devui-vue/devui/time-picker/src/time-picker.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, watch, SetupContext, Transition, Teleport, withModifiers } from 'vue';
+import { defineComponent, ref, onMounted, watch, SetupContext, Transition, Teleport, computed } from 'vue';
 import { TimePickerProps, timePickerProps } from './time-picker-types';
 import { Icon } from '../../icon';
 import useTimePicker from './composables/use-time-picker';
@@ -21,6 +21,14 @@ export default defineComponent({
     const activeSecond = ref('00');
     const format = props.format.toLowerCase();
     const position = ref(['bottom-start', 'top-start']);
+    const currentPosition = ref('bottom');
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      'z-index': 'var(--devui-z-index-dropdown, 1052)',
+    }));
 
     const {
       showPopup,
@@ -67,6 +75,7 @@ export default defineComponent({
             placeholder={props.placeholder}
             disabled={props.disabled}
             readonly={props.readonly}
+            show-glow-style={props.showGlowStyle}
             size={props.size}
             onFocus={clickVerifyFun}
             v-slots={{
@@ -80,14 +89,15 @@ export default defineComponent({
               ),
             }}></DInput>
           <Teleport to="body">
-            <Transition name="fade">
+            <Transition name={ns.m(`fade-${currentPosition.value}`)}>
               <FlexibleOverlay
                 v-model={showPopup.value}
                 ref={overlayRef}
                 origin={inputDom.value?.$el}
                 position={position.value as Placement[]}
                 align="start"
-                style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
+                style={styles.value}
+                onPositionChange={handlePositionChange}>
                 <TimePopup
                   ref={timePopupDom}
                   showPopup={showPopup.value}
diff --git a/packages/devui-vue/docs/components/auto-complete/index.md b/packages/devui-vue/docs/components/auto-complete/index.md
index 05fc9a2a60..adeb455590 100644
--- a/packages/devui-vue/docs/components/auto-complete/index.md
+++ b/packages/devui-vue/docs/components/auto-complete/index.md
@@ -468,19 +468,20 @@ export default defineComponent({
 | disabled                 | `boolean`                               | false                                     | 可选，是否禁用指令                                                | [设置禁用](#设置禁用)                                  |
 | delay                    | `number`                                | 300                                       | 可选，只有在 delay 时间经过后并且未输入新值，才做搜索查询（`ms`） | [基本用法](#基本用法)                                  |
 | disabled-key             | `string`                                | --                                        | 可选，禁用单个选项                                                | [自定义数据匹配方法](#自定义数据匹配方法)              |
-| formatter                | `(item: any) => string`                 | [`defaultFormatter`](#defaultFormatter)   | 可选，格式化函数                                                  | [自定义数据匹配方法](#自定义数据匹配方法)              |
+| formatter                | `(item: any) => string`                 | [`defaultFormatter`](#defaultformatter)   | 可选，格式化函数                                                  | [自定义数据匹配方法](#自定义数据匹配方法)              |
 | is-searching             | `boolean`                               | false                                     | 可选，是否在搜索中，用于控制 searchingTemplate 是否显示           | [自定义数据匹配方法](#自定义数据匹配方法)              |
 | scene-type               | `string`                                | --                                        | 可选，值为 'select'、'suggest'                                    | [启用懒加载](#启用懒加载)                              |
-| search-fn                | `(term: string) => Array<any>`          | [`defaultSearchFn`](#defaultSearchFn)     | 可选，自定义搜索过滤                                              | [自定义数据匹配方法](#自定义数据匹配方法)              |
+| search-fn                | `(term: string) => Array<any>`          | [`defaultSearchFn`](#defaultsearchfn)     | 可选，自定义搜索过滤                                              | [自定义数据匹配方法](#自定义数据匹配方法)              |
 | tips-text                | `string`                                | '最近输入'                                | 可选，提示文字                                                    | [设置禁用](#设置禁用)                                  |
 | latest-source            | `Array<any>`                            | --                                        | 可选， 最近输入                                                   | [最近输入](#最近输入)                                  |
-| value-parser             | `(item: any) => any`                    | [`defaultValueParse`](#defaultValueParse) | 可选， 对选中后数据进行处理                                       | [启用懒加载](#启用懒加载)                              |
+| value-parser             | `(item: any) => any`                    | [`defaultValueParse`](#defaultvalueparse) | 可选， 对选中后数据进行处理                                       | [启用懒加载](#启用懒加载)                              |
 | enable-lazy-load         | `boolean`                               | false                                     | 可选，是否允许懒加载                                              | [启用懒加载](#启用懒加载)                              |
 | width                    | `number`                                | 400                                       | 可选，调整宽度（`px`）                                            | [基本用法](#基本用法)                                  |
 | show-animation           | `boolean`                               | true                                      | 可选，是否开启动画                                                |                                                        |
 | prefix                   | `string`                                | --                                        | 可选，自定义前缀图标                                              | [带图标的输入框](../input/index.md/#带图标的输入框)    |
 | suffix                   | `string`                                | --                                        | 可选，自定义后缀图标                                              | [带图标的输入框](../input/index.md/#带图标的输入框)    |
 | clearable                | `boolean`                               | false                                     | 可选，是否可清空                                                  | [参考 `d-input` 一键清空](../input/index.md/#一键清空) |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### AutoComplete 事件
 
diff --git a/packages/devui-vue/docs/components/checkbox/index.md b/packages/devui-vue/docs/components/checkbox/index.md
index 632c2b5907..33b96de7e8 100644
--- a/packages/devui-vue/docs/components/checkbox/index.md
+++ b/packages/devui-vue/docs/components/checkbox/index.md
@@ -447,6 +447,7 @@ export default defineComponent({
 | before-change  | `Function\|Promise<boolean>`    | --    | 可选，checkbox 切换前的回调函数，<br>返回 boolean 类型，返回 false 可以阻止 checkbox 切换 | [基本用法](#基本用法)                     |
 | size           | [ICheckboxSize](#icheckboxsize) | md    | 可选， checkbox 尺寸，只有在 border 属性存在时生效                                        | [尺寸](#尺寸和边框)                       |
 | border         | `boolean`                       | false | 可选， 是否有边框                                                                         | [边框](#尺寸和边框)                       |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### Checkbox 事件
 
diff --git a/packages/devui-vue/docs/components/date-picker-pro/index.md b/packages/devui-vue/docs/components/date-picker-pro/index.md
index 3d30677d72..8e9fc66c25 100644
--- a/packages/devui-vue/docs/components/date-picker-pro/index.md
+++ b/packages/devui-vue/docs/components/date-picker-pro/index.md
@@ -541,6 +541,7 @@ export default defineComponent({
 | calendarRange  | `[number,number]` | [1970, 2099]                                             | 可选，设置日历面板显示时间范围                           | [设置日历面板可选时间范围](#设置日历面板可选时间范围) |
 | limitDateRange | `[Date,Date]`     | [new Date(calendarRange[0]), new Date(calendarRange[1])] | 可选，设置日历面板可选时间范围                           | [设置日历面板可选时间范围](#设置日历面板可选时间范围) |
 | type           | `string`          | 'date'                                                   | 可选，设置日期选择器类型(date/year/month)                | [年月选择器](#年月选择器)                             |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### DatePickerPro 事件
 
@@ -600,6 +601,7 @@ type Format = string;
 | calendarRange  | `[number,number]` | [1970,2099]                                              | 可选，设置日历面板显示时间范围                           | [设置日历面板可选时间范围](#设置日历面板可选时间范围) |
 | limitDateRange | `[Date,Date]`     | [new Date(calendarRange[0]), new Date(calendarRange[1])] | 可选，设置日历面板可选时间范围                           | [设置日历面板可选时间范围](#设置日历面板可选时间范围) |
 | type           | `string`          | 'date'                                                   | 可选，设置日期选择器类型(date/year/month)                | [范围选择器](#范围选择器)                             |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### RangeDatePickerPro 事件
 
diff --git a/packages/devui-vue/docs/components/editable-select/index.md b/packages/devui-vue/docs/components/editable-select/index.md
index 122ac38f4a..489f813459 100644
--- a/packages/devui-vue/docs/components/editable-select/index.md
+++ b/packages/devui-vue/docs/components/editable-select/index.md
@@ -466,6 +466,7 @@ export default defineComponent({
 | enable-lazy-load      | `boolean`                              | false    | 可选，是否允许懒加载                         | [远程搜索](#远程搜索)              |
 | filter-method         | `(inputValue:string)=>Array<Options>` | --       | 可选，自定义筛选方法                         | [自定义匹配方法](#自定义筛选方法)  |
 | remote-method         | `(inputValue:string)=>Array<Options>`  | --       | 可选，自定义远程搜索方法                     | [远程搜索](#远程搜索)              |
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### EditableSelect 事件
 
diff --git a/packages/devui-vue/docs/components/input-number/index.md b/packages/devui-vue/docs/components/input-number/index.md
index 2f32e27072..d6c6c29fd6 100644
--- a/packages/devui-vue/docs/components/input-number/index.md
+++ b/packages/devui-vue/docs/components/input-number/index.md
@@ -236,6 +236,7 @@ export default defineComponent({
 | precision   | `number`        | --         | 可选，数值精度            | [精度](#精度)          |
 | size        | [ISize](#isize) | 'md'       | 可选，文本框尺寸           | [尺寸](#尺寸)          |
 | reg         | `RegExp\| string`    |  --   | 可选，用于限制输入的正则或正则字符串 | [正则限制](#正则限制)|
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### InputNumber 事件
 
diff --git a/packages/devui-vue/docs/components/input/index.md b/packages/devui-vue/docs/components/input/index.md
index 3421e9a05e..bd1c14f91f 100644
--- a/packages/devui-vue/docs/components/input/index.md
+++ b/packages/devui-vue/docs/components/input/index.md
@@ -333,6 +333,7 @@ export default defineComponent({
 | readonly       | `boolean`               | false  | 原生 readonly 属性，是否只读                     |                                   |
 | autocomplete   | `string`                | 'off'  | 原生 autocomplete 属性                           |                                   |
 | autofocus      | `boolean`               | false  | 自动获取焦点                                     |                                   |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### Input 插槽
 
diff --git a/packages/devui-vue/docs/components/mention/index.md b/packages/devui-vue/docs/components/mention/index.md
index 4f952d792a..c267c9a0a4 100644
--- a/packages/devui-vue/docs/components/mention/index.md
+++ b/packages/devui-vue/docs/components/mention/index.md
@@ -308,12 +308,12 @@ const suggestions = [
 | position        | top / bottom                  | bottom                    | 可选，建议框位置                           | [向上展开](#向上展开)     |
 | notFoundContent | string                        | No suggestion matched     | 可选，用于在没有匹配到数据的时候的提示     | -                         |
 | loading         | boolean                       | false                     | 可选，异步加载数据源的时候是否显示加载效果 | [异步加载](#异步加载)     |
-| dmValueParse           | `{value: string, id: string}` | `{value: value, id: id} ` | 可选，建议选项的取值方法                   | [异步加载](#异步加载)     |
-| trigger         | string[]                      | `['@'] `                  | 可选，触发组件的前缀符                     | [自定义前缀](#自定义前缀) |
+| dmValueParse           | `{value: string, id: string}` | `{value: value, id: id}` | 可选，建议选项的取值方法                   | [异步加载](#异步加载)     |
+| trigger         | string[]                      | `['@']`                  | 可选，触发组件的前缀符                     | [自定义前缀](#自定义前缀) |
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### Mention 事件
 
-
 | 参数名 | 类型                                  | 默认 | 说明               | 跳转 Demo             |
 | :----- | :------------------------------------ | :--- | :----------------- | :-------------------- |
 | select | Function({value: string, id: string}) | -    | 触发选中建议       | [基本用法](#基本用法) |
diff --git a/packages/devui-vue/docs/components/radio/index.md b/packages/devui-vue/docs/components/radio/index.md
index 507e28284b..a4d60a811c 100644
--- a/packages/devui-vue/docs/components/radio/index.md
+++ b/packages/devui-vue/docs/components/radio/index.md
@@ -392,6 +392,7 @@ export default defineComponent({
 | border        | `boolean`                    | false | 可选， 是否有边框                                                | [边框](#尺寸和边框)                     |
 | size          | [IRadioSize](#iradiosize)    | md    | 可选， radio 尺寸，只有在 border 属性存在时生效                  | [尺寸](#尺寸和边框)                     |
 | can-cancel-select | `boolean`    | false    | 可选， 选中后，再次点击是否可取消选中                  |                      |
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### Radio 事件
 
diff --git a/packages/devui-vue/docs/components/select/index.md b/packages/devui-vue/docs/components/select/index.md
index f2b428267d..9c88e5439e 100644
--- a/packages/devui-vue/docs/components/select/index.md
+++ b/packages/devui-vue/docs/components/select/index.md
@@ -531,6 +531,7 @@ export default defineComponent({
 | loading               | `boolean`             | false            | 可选, 配置下拉选项是否远程加载，配合 loading-text 使用                                                                                                         | [远程加载数据](#远程加载数据)     |
 | loading-text          | `string`              | '加载中'         | 可选, 远程搜索时显示的文本                                                                                                                                     | [远程加载数据](#远程加载数据)     |
 | multiple-limit        | `number`              | '0'              | 可选, multiple 属性设置为 true 时生效，表示用户最多可以选择的项目数， 为 0 则不限制                                                                            | [多选](#多选)                     |
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### Select 事件
 
diff --git a/packages/devui-vue/docs/components/textarea/index.md b/packages/devui-vue/docs/components/textarea/index.md
index c96c17bd5d..4e22d63837 100644
--- a/packages/devui-vue/docs/components/textarea/index.md
+++ b/packages/devui-vue/docs/components/textarea/index.md
@@ -212,6 +212,7 @@ export default {
 | show-count  | `boolean`          | false  | 可选，文本框是否是否展示字数                                                  | [显示字数](#显示字数)             |
 | rows        | `number / string`  | 2      | 可选，文本框高度控制                                                          | [文本框高度控制](#文本框高度控制) |
 | autosize    | `boolean / object` | false  | textarea 高度是否自适应。可以接受一个对象，比如: `{ minRows: 2, maxRows: 6 }` | [自适应文本框](#自适应文本框)     |
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### Textarea 事件
 
diff --git a/packages/devui-vue/docs/components/time-picker/index.md b/packages/devui-vue/docs/components/time-picker/index.md
index 1c03b531d9..144ad17d41 100644
--- a/packages/devui-vue/docs/components/time-picker/index.md
+++ b/packages/devui-vue/docs/components/time-picker/index.md
@@ -257,6 +257,7 @@ export default defineComponent({
 | max-time             | string      | '23:59:59' | 可选，限制最大可选时间                     | [格式化](#时间区间限制) |
 | custom-view-template | TemplateRef | --         | 可选，自定义快捷设置时间或自定义操作区内容 | [传入模板](#传入模板)   |
 | show-animation       | boolean     | true       | 可选，是否开启动画                         |                         |
+|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
 
 ### TimePicker 事件
 
diff --git a/packages/devui-vue/docs/components/time-select/index.md b/packages/devui-vue/docs/components/time-select/index.md
index e00f2dad86..079d5f8488 100644
--- a/packages/devui-vue/docs/components/time-select/index.md
+++ b/packages/devui-vue/docs/components/time-select/index.md
@@ -213,6 +213,7 @@ export default defineComponent({
 | end         | string                      | '24:00'      | 可选，结束时间                            | [时间段](#时间段)     |
 | step        | string                      | '00:30'      | 可选，间隔时间                            | [基本用法](#基本用法) |
 | clearable   | boolean                     | true         | 可选，是否可清除                          | [基本用法](#基本用法) |
+|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果||
 
 ### TimeSelect 事件
 
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
index b012f367c0..d66442aea4 100644
--- a/packages/devui-vue/package.json
+++ b/packages/devui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [