From 136543398d71f2a2aba4ae18571e3c92d5721538 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 29 Jul 2025 11:23:54 +0800
Subject: [PATCH] feat: add Input component and update Button styles

---
 packages/ui/src/components/button/Button.vue  |  2 +-
 packages/ui/src/components/button/index.ts    |  5 ++
 packages/ui/src/components/index.ts           |  1 +
 packages/ui/src/components/input/Input.vue    | 30 ++++++++++
 packages/ui/src/components/input/index.ts     | 15 +++++
 packages/ui/src/components/input/meta.ts      | 58 +++++++++++++++++++
 .../ui/src/components/input/style/index.css   |  9 +++
 7 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/input/Input.vue
 create mode 100644 packages/ui/src/components/input/index.ts
 create mode 100644 packages/ui/src/components/input/meta.ts
 create mode 100644 packages/ui/src/components/input/style/index.css

diff --git a/packages/ui/src/components/button/Button.vue b/packages/ui/src/components/button/Button.vue
index 86cfec414..6b800f8c9 100644
--- a/packages/ui/src/components/button/Button.vue
+++ b/packages/ui/src/components/button/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :class="classes" @click="$emit('click', $event)">
+  <button class="ant-btn" :class="classes" @click="$emit('click', $event)">
     <slot></slot>
   </button>
 </template>
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/button/index.ts
index 1f712dcac..eeb3f80cb 100644
--- a/packages/ui/src/components/button/index.ts
+++ b/packages/ui/src/components/button/index.ts
@@ -1,5 +1,10 @@
 import { App, Plugin } from 'vue'
 import Button from './Button.vue'
+import './style/index.css'
+
+// 导出组件
+export { default as Button } from './Button.vue'
+export * from './meta'
 
 /* istanbul ignore next */
 Button.install = function (app: App) {
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 9743944ed..3c47b0b4d 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1 +1,2 @@
 export { default as Button } from './button'
+export { default as Input } from './input'
diff --git a/packages/ui/src/components/input/Input.vue b/packages/ui/src/components/input/Input.vue
new file mode 100644
index 000000000..49b1b58d9
--- /dev/null
+++ b/packages/ui/src/components/input/Input.vue
@@ -0,0 +1,30 @@
+<template>
+  <input
+    class="ant-input"
+    :class="classes"
+    :value="modelValue"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    @focus="$emit('focus', $event)"
+    @blur="$emit('blur', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { inputProps, inputEmits, InputSlots } from './meta'
+
+const props = defineProps(inputProps)
+
+defineEmits(inputEmits)
+defineSlots<InputSlots>()
+
+const classes = computed(() => {
+  return [
+    'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent',
+    {
+      'border-red-500': props.status === 'error',
+      'border-yellow-500': props.status === 'warning',
+    },
+  ]
+})
+</script>
diff --git a/packages/ui/src/components/input/index.ts b/packages/ui/src/components/input/index.ts
new file mode 100644
index 000000000..a3d61595e
--- /dev/null
+++ b/packages/ui/src/components/input/index.ts
@@ -0,0 +1,15 @@
+import { App, Plugin } from 'vue'
+import Input from './Input.vue'
+import './style/index.css'
+
+// 导出组件
+export { default as Input } from './Input.vue'
+export * from './meta'
+
+/* istanbul ignore next */
+Input.install = function (app: App) {
+  app.component('AInput', Input)
+  return app
+}
+
+export default Input as typeof Input & Plugin
diff --git a/packages/ui/src/components/input/meta.ts b/packages/ui/src/components/input/meta.ts
new file mode 100644
index 000000000..201e7d797
--- /dev/null
+++ b/packages/ui/src/components/input/meta.ts
@@ -0,0 +1,58 @@
+import { PropType, ExtractPublicPropTypes } from 'vue'
+
+// Input Props
+export const inputProps = {
+  /**
+   * The input value
+   */
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  /**
+   * The status of the input
+   */
+  status: {
+    type: String as PropType<'error' | 'warning'>,
+    default: undefined,
+  },
+  /**
+   * The placeholder text
+   */
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Whether the input is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+} as const
+
+export type InputProps = ExtractPublicPropTypes<typeof inputProps>
+
+// Input Emits
+export const inputEmits = {
+  /**
+   * Triggered when the input value changes
+   */
+  'update:modelValue': (value: string) => typeof value === 'string',
+  /**
+   * Triggered when the input receives focus
+   */
+  focus: (e: FocusEvent) => e instanceof FocusEvent,
+  /**
+   * Triggered when the input loses focus
+   */
+  blur: (e: FocusEvent) => e instanceof FocusEvent,
+} as const
+
+export type InputEmits = typeof inputEmits
+
+// Input Slots
+export const inputSlots = {} as const
+
+export type InputSlots = typeof inputSlots
diff --git a/packages/ui/src/components/input/style/index.css b/packages/ui/src/components/input/style/index.css
new file mode 100644
index 000000000..08f5ca225
--- /dev/null
+++ b/packages/ui/src/components/input/style/index.css
@@ -0,0 +1,9 @@
+/* Input component styles */
+.ant-input {
+  transition: all 0.2s ease-in-out;
+}
+
+.ant-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}