feat: 添加输入组件并更新 UI 组件页面布局

src/pages/UI-components/Components/index.page.vue

@@ -1,35 +1,43 @@
 <script setup lang="ts">
 import { Button as ShadcnButton } from '@/shadcn/components/ui/button';
+import { Input as ShaInput } from '@/shadcn/components/ui/input';
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center space-y-4 bg-white p-4">
+  <div class="flex flex-col items-start justify-center gap-4 bg-white p-4">
-    <div class="flex flex-wrap gap-4" b="1px solid red" p="4">
+    <div class="demo-block">
-      <a-button type="primary">Primary Button</a-button>
+      <div class="demo-block">
-      <a-button>Default Button</a-button>
+        <a-button type="primary">Primary Button</a-button>
-      <a-button type="dashed">Dashed Button</a-button>
+        <a-button>Default Button</a-button>
-      <a-button type="text">Text Button</a-button>
+        <a-button type="dashed">Dashed Button</a-button>
-      <a-button type="link">Link Button</a-button>
+        <a-button type="text">Text Button</a-button>
+        <a-button type="link">Link Button</a-button>
+      </div>
+      <div class="demo-block">
+        <Button label="PrimevueButton" />
+        <Button variant="outlined" label="Outlined" />
+        <Button variant="text" label="Text" />
+        <Button variant="link" label="Link" />
+      </div>
+      <div class="demo-block">
+        <ShadcnButton>ShadcnButton</ShadcnButton>
+        <ShadcnButton variant="secondary">Secondary</ShadcnButton>
+        <ShadcnButton variant="destructive">Destructive</ShadcnButton>
+        <ShadcnButton variant="outline">Outline</ShadcnButton>
+        <ShadcnButton variant="ghost">Ghost</ShadcnButton>
+        <ShadcnButton variant="link">Link</ShadcnButton>
+      </div>
     </div>
-    <div class="flex space-x-4" b="1px solid red" p="4">
+    <div class="demo-block">
-      <Button label="PrimevueButton" />
+      <a-input placeholder="Ant Design" />
-      <Button variant="outlined" label="Outlined" />
+      <InputText placeholder="Primevue" />
-      <Button variant="text" label="Text" />
+      <ShaInput placeholder="Shadcn" />
-      <Button variant="link" label="Link" />
-    </div>
-    <div class="flex space-x-4" b="1px solid red" p="4">
-      <ShadcnButton>ShadcnButton</ShadcnButton>
-      <ShadcnButton variant="secondary">Secondary</ShadcnButton>
-      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
-      <ShadcnButton variant="outline">Outline</ShadcnButton>
-      <ShadcnButton variant="ghost">Ghost</ShadcnButton>
-      <ShadcnButton variant="link">Link</ShadcnButton>
-    </div>
-
-    <div class="flex space-x-4" b="1px solid red" p="4">
-      <a-input placeholder="Basic usage" />
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.demo-block {
+  @apply flex flex-wrap gap-4 b b-solid b-red-500 p-4;
+}
+</style>

src/shadcn/components/ui/input/Input.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shadcn/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>

src/shadcn/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'