u

code/base-project/base-vue/packages/ao-design/src/input/index.scss

@@ -5,18 +5,18 @@ $input-prefix: #{$prefix}-input;
 
 .#{$input-prefix}-size {
   &-small {
-    height: 24px;
-    font-size: 12px;
+    height: $size-height-small;
+    font-size: $size-font-small;
   }
 
   &-medium {
-    height: 28px;
-    font-size: 13px;
+    height: $size-height-medium;
+    font-size: $size-font-medium;
   }
 
   &-large {
-    height: 32px;
-    font-size: 14px;
+    height: $size-height-large;
+    font-size: $size-font-large;
   }
 }
 
@@ -24,21 +24,22 @@ $input-prefix: #{$prefix}-input;
   display: flex;
   align-items: center;
   width: 100%;
-  border: 1px solid $border-outline-color;
+  border: 1px solid $border-color;
   border-radius: $border-radius;
-
   box-sizing: border-box;
   padding: 0 8px;
+  background: $bg-color-control;
+
   transition:
     border cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
     box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
     background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
 
   .#{$input-prefix}-inner {
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     width: 100%;
     border: none;
     outline: none;
-    background: transparent;
     box-sizing: border-box;
     padding: 0;
     font-size: inherit;
@@ -46,19 +47,20 @@ $input-prefix: #{$prefix}-input;
     display: flex;
     align-items: center;
     height: 100%;
-
+    color: $text-color-base;
+    background-color: transparent;
     &::placeholder {
       color: $text-color-placeholder;
     }
   }
 
   &:hover {
-    border-color: $brand-color;
+    border-color: $primary-color;
   }
 
   &:focus-within {
-    border-color: $brand-color;
-    box-shadow: 0 0 0 2px $brand-color-focus;
+    border-color: $primary-color;
+    box-shadow: 0 0 0 2px $primary-color-focus;
   }
 
   .#{$input-prefix}-align {
@@ -90,7 +92,7 @@ $input-prefix: #{$prefix}-input;
   }
 
   &.#{$input-prefix}-disabled {
-    background-color: $bg-color-component-disabled;
+    background-color: $default-color-disabled;
     cursor: not-allowed;
 
     .#{$input-prefix}-input {
@@ -106,13 +108,13 @@ $input-prefix: #{$prefix}-input;
 
     &:hover,
     &:focus-within {
-      border: $border-outline-color;
+      border: $border-color;
       box-shadow: none;
     }
   }
 
   &.#{$input-prefix}-readonly {
-    background-color: $bg-color-component-readonly;
+    // background-color: $bg-color-component-readonly;
   }
 
   .#{$input-prefix}-icon {
@@ -120,7 +122,7 @@ $input-prefix: #{$prefix}-input;
     transition:
       color 0.2s,
       background-color 0.2s;
-    color: $text-color-secondary;
+    color: $text-color-assist;
 
     display: inline-flex;
     align-items: center;
@@ -130,7 +132,7 @@ $input-prefix: #{$prefix}-input;
     border-radius: 50%;
 
     &:hover {
-      background-color: $bg-color-component-hover;
+      background-color: $default-color-hover;
     }
   }
 
@@ -138,6 +140,6 @@ $input-prefix: #{$prefix}-input;
     flex-shrink: 0;
     margin-left: 4px;
     white-space: nowrap;
-    color: $text-color-secondary;
+    color: $text-color-assist;
   }
 }

code/base-project/base-vue/packages/ao-design/src/input/index.tsx

@@ -25,7 +25,7 @@ export default defineComponent({
     maxlength: Number,
     password: Boolean,
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'focus', 'blur'],
   setup(props, { slots, emit }) {
     const prefixCls = getPrefixCls('input')
     const inputValue = ref(props.modelValue || '')
@@ -85,6 +85,8 @@ export default defineComponent({
             disabled={props.disabled}
             readonly={props.readonly}
             onInput={(e: Event) => updateValue((e.target as HTMLInputElement).value)}
+            onFocus={e => emit('focus', e)}
+            onBlur={e => emit('blur', e)}
           />
 
           {props.clearable && inputValue.value && !props.disabled && !props.readonly && (