@deepseek-react/button(React Button Component)

一个基于最新技术栈构建的现代化 React 按钮组件，提供完整的 TypeScript 支持和样式定制能力。

特性

• 🚀 高性能 - 使用 Vite 4 构建，支持 Tree Shaking
• 🎨 主题定制 - 集成 Tailwind CSS 3 + CVA 变体系统
• 💡 智能提示 - 完善的 TypeScript 类型定义
• 📚 文档驱动 - 内置 Storybook 交互式文档
• 🌐 多格式支持 - 同时提供 ESM 和 UMD 格式
• 🛡 安全可靠 - 严格的类型检查和单元测试

安装

npm install @deepseek-react/button
# 或
yarn add @deepseek-react/button

快速使用

import { Button } from "@deepseek-react/button";

function Demo() {
  return (
    <div className="space-x-4">
      <Button variant="default">Default</Button>
      <Button variant="destructive" size="lg">
        Danger
      </Button>
      <Button variant="outline" isLoading>
        Loading
      </Button>
    </div>
  );
}

Props 说明

| 属性名 | 类型 | 默认值 | 必填 | 描述 | | ----------- | ------------------------------------------------------ | ----------- | ---- | -------------------- | | variant | "default"｜"destructive"｜"outline"｜"ghost"｜"link" | "default" | 否 | 按钮视觉变体 | | size | "default"｜"sm"｜"lg" | "default" | 否 | 按钮尺寸 | | isLoading | boolean | false | 否 | 显示加载状态 | | className | string | - | 否 | 自定义 CSS 类名 | | ...其他属性 | React.ButtonHTMLAttributes<HTMLButtonElement> | - | 否 | 所有标准 button 属性 |

样式定制

通过 Tailwind 配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#3b82f6",
        destructive: "#ef4444",
      },
    },
  },
};

自定义类名

<Button className="rounded-full shadow-lg" variant="outline">
  Custom Style
</Button>

开发指南

本地开发

git clone https://github.com/yourname/react-button-component.git
cd react-button-component
npm install
npm run dev

运行 Storybook

npm run storybook

生产构建

npm run build

测试

npm test

技术栈

• React 18
• TypeScript 5
• Vite 4
• Tailwind CSS 3
• clsx + tailwind-merge
• Storybook 7

贡献

欢迎提交 Issue 和 PR！请确保：

1. 通过 npm test 所有测试
2. 更新相关 Storybook 故事
3. 保持 TypeScript 类型定义同步

许可证

MIT © [Bluezhan]

这份 README 包含以下关键要素：
1. 技术徽章 - 直观展示项目状态
2. 交互式代码示例 - 可直接复制的代码块
3. 响应式表格 - 清晰的 Props 文档
4. 多级标题结构 - 良好的可读性
5. 开发工作流说明 - 完整的本地开发指南
6. 技术栈标识 - 突出核心技术优势
7. 贡献指南 - 规范协作流程

建议搭配 Storybook 文档使用，可生成自动化的交互式组件演示。