feat: add home page search

Author: yjl9903

components/ui/button/Button.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariantProps['variant']
+  size?: ButtonVariantProps['size']
+  as?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </Primitive>
+</template>

components/ui/button/index.ts

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)

pages/index.vue

@@ -1,5 +1,31 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+const searchInput = ref('');
+const search = async () => {
+  if (!searchInput.value) return;
+  console.log(searchInput.value);
+  const resp = await $fetch('/api/search/', {});
+  console.log(resp);
+};
+</script>
 
 <template>
-  <NuxtWelcome />
+  <!-- <NuxtWelcome /> -->
+  <div class="main">
+    <div class="mt-10">
+      <span class="text-4xl font-bold">Get Bonus</span>
+    </div>
+    <div class="mt-8 flex gap-4">
+      <Input v-model="searchInput" @keydown.enter="search"></Input>
+      <Button @click="search">搜索</Button>
+    </div>
+  </div>
 </template>
+
+<style>
+.main {
+  @apply: mx-auto w-5xl lt-lg:w-3xl lt-md:w-[95vw] lt-md:px-3;
+}
+</style>

server/api/search/index.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler((event) => {
+  return {
+    hello: 'world'
+  };
+});