u

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>
     )
   },