第一次上传

2026-06-11 10:31:24 +08:00
commit cfef094568
1523 changed files with 210650 additions and 0 deletions
@@ -0,0 +1,59 @@
+<template>
+  <button
+    :class="[
+      'inline-flex items-center justify-center font-medium gap-2 rounded-lg transition',
+      sizeClasses[size],
+      variantClasses[variant],
+      className,
+      { 'cursor-not-allowed opacity-50': disabled },
+    ]"
+    @click="onClick"
+    :disabled="disabled"
+  >
+    <span v-if="startIcon" class="flex items-center">
+      <component :is="startIcon" />
+    </span>
+    <slot></slot>
+    <span v-if="endIcon" class="flex items-center">
+      <component :is="endIcon" />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface ButtonProps {
+  size?: 'sm' | 'md'
+  variant?: 'primary' | 'outline'
+  startIcon?: object
+  endIcon?: object
+  onClick?: () => void
+  className?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  size: 'md',
+  variant: 'primary',
+  className: '',
+  disabled: false,
+})
+
+const sizeClasses = {
+  sm: 'px-4 py-3 text-sm',
+  md: 'px-5 py-3.5 text-sm',
+}
+
+const variantClasses = {
+  primary: 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600 disabled:bg-brand-300',
+  outline:
+    'bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03] dark:hover:text-gray-300',
+}
+
+const onClick = () => {
+  if (!props.disabled && props.onClick) {
+    props.onClick()
+  }
+}
+</script>