u

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

@@ -1,7 +1,71 @@
 @use '../_styles/theme/index' as *;
+@use 'sass:color';
 
 $input-prefix: #{$prefix}-input;
 
-.#{$input-prefix} {
-  border-color: #d9d9d9;
+.#{$input-prefix}-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background-color: #fff;
+  color: #000000d9;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:hover:not(&-disabled) {
+    border-color: $primary-color;
+  }
+
+  &:focus-within:not(&-disabled) {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 1px color.change($primary-color, $alpha: 0.1);
+  }
+
+  &-disabled {
+    color: #00000040;
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+
+  /* 尺寸变体 */
+  &-small {
+    height: 24px;
+    font-size: 12px;
+  }
+  &-medium {
+    height: 28px;
+    font-size: 14px;
+  }
+  &-large {
+    height: 32px;
+    font-size: 16px;
+  }
 }
+
+.#{$input-prefix}-inner {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+  font-family: inherit;
+
+  &::placeholder {
+    color: #00000040;
+  }
+}
+
+.#{$input-prefix}-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #00000040;
+  margin: 0 4px;
+}
+  

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

@@ -1,23 +1,60 @@
-import { computed, defineComponent, ref } from 'vue'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, ref } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon'
 
 export default defineComponent({
   name: 'AInput',
-  setup() {
+  props: {
+    size: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+      default: 'medium',
+    },
+    placeholder: String,
+    disabled: Boolean,
+    prefixIcon: String,
+    suffixIcon: String,
+  },
+  setup(props, { slots }) {
     const inputRef = ref<HTMLInputElement | null>(null)
-
-    // 使用统一前缀
     const prefixCls = getPrefixCls('input')
-    const cls = computed(() => [prefixCls])
+
+    const wrapperCls = computed(() => [
+      `${prefixCls}-wrapper`,
+      `${prefixCls}-wrapper-${props.size}`,
+      { [`${prefixCls}-wrapper-disabled`]: props.disabled },
+    ])
+
+    const iconSizeMap: Record<string, number> = { small: 12, medium: 14, large: 16 }
+
+    const renderIcon = (slot: any, iconProp?: string) => {
+      if (slot)
+        return typeof slot === 'function' ? slot() : slot
+      if (iconProp)
+        return h(Icon, { icon: iconProp, width: iconSizeMap[props.size], height: iconSizeMap[props.size] })
+      return null
+    }
 
     return () => (
-      <div class={`${prefixCls}-wrapper`} style={{ display: 'inline-block' }}>
+      <div class={wrapperCls.value}>
+        {(slots.prefix || props.prefixIcon) && (
+          <span class={`${prefixCls}-icon`}>
+            {renderIcon(slots.prefix, props.prefixIcon)}
+          </span>
+        )}
+
         <input
           ref={inputRef}
-          class={cls.value}
-          type="text"
-          placeholder="请输入"
+          class={`${prefixCls}-inner`}
+          placeholder={props.placeholder}
+          disabled={props.disabled}
         />
+
+        {(slots.suffix || props.suffixIcon) && (
+          <span class={`${prefixCls}-icon`}>
+            {renderIcon(slots.suffix, props.suffixIcon)}
+          </span>
+        )}
       </div>
     )
   },