@kk-2004/ui-components

一些可复用的 Vue 3 组件，使用 Tailwind CSS 样式。

安装

npm install @kk-2004/ui-components

前置要求

• Vue 3.4+
• Tailwind CSS 4+

在你的项目中需要配置以下 Tailwind CSS 主题色（可按需调整）：

/* style.css */
@import "tailwindcss";

@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(0 0% 3.9%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(0 0% 3.9%);
  --color-primary: hsl(0 0% 9%);
  --color-primary-foreground: hsl(0 0% 98%);
  --color-secondary: hsl(0 0% 96.1%);
  --color-secondary-foreground: hsl(0 0% 9%);
  --color-muted: hsl(0 0% 96.1%);
  --color-muted-foreground: hsl(0 0% 45.1%);
  --color-destructive: hsl(0 84.2% 60.2%);
  --color-success: hsl(142 76% 36%);
  --color-warning: hsl(38 92% 50%);
  --color-info: hsl(217 91% 60%);
  --color-border: hsl(0 0% 89.8%);
  --color-input: hsl(0 0% 89.8%);
  --color-ring: hsl(0 0% 3.9%);
}

快速上手

<script setup>
import { KButton, KCard, KCardContent, KCardTitle } from '@kk-2004/ui-components'
</script>

<template>
  <KCard>
    <KCardContent>
      <KCardTitle>Hello World</KCardTitle>
      <KButton variant="default">Click Me</KButton>
    </KCardContent>
  </KCard>
</template>

在线 Demo

https://kk-2004.github.io/ui-component/

组件列表

基础组件

| 组件 | 说明 | | --- | --- | | KButton | 按钮，支持 variant/size/disabled/loading | | KCard | 卡片，含 CardHeader/CardTitle/CardDescription/CardAction/CardContent/CardFooter | | KBadge | 徽标，支持 variant (default/secondary/outline/destructive/ghost) | | KInput | 输入框，支持 type/error/disabled/前后缀插槽 | | KTextarea | 文本域，支持 auto-resize | | KDialog | 模态框，含 DialogContent/DialogHeader/DialogFooter/DialogTitle/DialogDescription | | KPopover | 弹出层，含 PopoverTrigger/PopoverContent | | KTooltip | 文字提示 | | KTabs | 标签页，v-model:activeTab | | KSpinner | 加载旋转动画 | | KSkeleton | 骨架屏 | | KAvatar | 头像，支持 src/fallback/size/shape | | KSeparator | 分隔线 | | KScrollArea | 滚动区域 | | KProgress | 进度条 | | KAlert | 警告提示，含 AlertTitle/AlertDescription | | KSwitch | 开关，v-model | | KCheckbox | 复选框，v-model，支持 indeterminate | | KRadioGroup | 单选组，v-model + options 数组 |

复合组件

| 组件 | 说明 | | --- | --- | | KCopyButton | 复制到剪贴板按钮，带 tooltip 反馈 | | KStatusBadge | 状态徽标，支持 variant/pulse/预设状态 (active/inactive/pending 等) | | KEmptyState | 空状态占位 | | KLoadingState | 加载状态占位 | | KErrorState | 错误状态占位，支持 retry 事件 | | KMaskedValueDisplay | 脱敏值显示，点击展开完整内容 | | KLongText | 长文本截断，hover 显示完整内容 | | KGroupBadge | 分组徽标 | | KTagInput | 标签输入框，v-model tags 数组 | | KMultiSelect | 多选选择器，v-model selected 数组 | | KPasswordInput | 密码输入框，可切换可见性 | | KDatePicker | 日期选择器 | | KDateTimePicker | 日期时间选择器 | | KConfirmDialog | 确认对话框 | | KCommandMenu | 命令面板 (Cmd+K) |

高级组件

| 组件 | 说明 | | --- | --- | | KCardPro | 高级卡片，type1/type2/type3 布局 + 移动端折叠 | | KLoading | 全屏加载遮罩 | | KScrollableContainer | 可滚动容器，带底部渐变指示器 | | KSelectableButtonGroup | 可选按钮组，支持单选/多选/折叠/加载骨架 | | KChannelKeyDisplay | 密钥显示组件，支持复制/脱敏 | | KCompactModeToggle | 紧凑模式切换 |

Tree Shaking

组件库支持 Tree Shaking，仅引入的组件会被打包：

<script setup>
// 只会打包 KButton 相关代码
import { KButton } from '@kk-2004/ui-components'
</script>

TypeScript

所有组件均包含完整的 TypeScript 类型定义，导入组件时可同时导入 Props 类型：

import { KButton } from '@kk-2004/ui-components'
import type { KButtonProps } from '@kk-2004/ui-components'

License

MIT