dishui 0.0.11 → 0.0.12

package/README.md

@@ -1,42 +1,108 @@
-# DiShUI Component Library
+# DiShUI - 基于 daisyUI 和 Tailwind CSS 的 React 组件库
 
-A React-based UI component library created through vibe coding.
+<div align="center">
 
-## Installation
+![Version](https://img.shields.io/npm/v/dishui)
+![License](https://img.shields.io/npm/l/dishui)
+![React](https://img.shields.io/badge/React-19.2.0-blue)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-blue)
+
+一个优雅、现代的 React UI 组件库，基于 daisyUI 和 Tailwind CSS 构建。
+
+[English](./docs/README.en.md) | 简体中文
+
+</div>
+
+## ✨ 特性
+
+- 🎨 **优雅设计** - 基于 daisyUI，提供多种精美主题
+- 📦 **开箱即用** - 完整的 TypeScript 类型支持
+- 🔧 **灵活可定制** - 基于 Tailwind CSS，轻松定制样式
+- 🚀 **现代化** - 使用最新的 React 19 和 Vite 7
+- 📱 **响应式** - 完美支持移动端和桌面端
+- 🎯 **Tree Shaking** - 自动优化打包大小
+- 📖 **丰富文档** - 详细的 API 文档和使用示例
+
+## 📦 安装
 
 ```bash
-pnpm install dishui
-# or
+# 使用 pnpm (推荐)
+pnpm add dishui
+
+# 使用 npm
+npm install dishui
+
+# 使用 yarn
 yarn add dishui
 ```
 
-## Usage
+## 🚀 快速开始
+
+### 1. 配置 Tailwind CSS
+
+在你的项目中配置 Tailwind CSS 和 daisyUI：
 
-### Import Components and Styles
+```bash
+# 安装依赖
+pnpm add -D tailwindcss daisyui
+```
+
+在 `tailwind.config.js` 中配置：
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/dishui/dist/**/*.js",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark", "retro", "cyberpunk"],
+  },
+}
+```
+
+### 2. 导入样式和组件
 
 ```tsx
-import React from "react";
-import { Button, Badge } from "dishui";
-import "dishui/dist/dishui.css"; // Import style file
+import React from 'react';
+import { Button, Badge, Card } from 'dishui';
+import 'dishui/dist/dishui.css';
 
 function App() {
   return (
     <div className="p-4">
-      <h1 className="text-2xl font-bold mb-4">DiShui UI Examples</h1>
+      <h1 className="text-2xl font-bold mb-4">DiShUI UI 示例</h1>
       
+      {/* 按钮示例 */}
       <div className="flex gap-2 mb-4">
-        <Button>Default Button</Button>
-        <Button variant="primary">Primary Button</Button>
-        <Button variant="secondary">Secondary Button</Button>
-        <Button variant="accent">Accent Button</Button>
+        <Button variant="primary">主要按钮</Button>
+        <Button variant="secondary">次要按钮</Button>
+        <Button variant="accent">强调按钮</Button>
       </div>
       
-      <div className="flex gap-2">
-        <Badge>Default</Badge>
+      {/* 徽章示例 */}
+      <div className="flex gap-2 mb-4">
         <Badge variant="primary">Primary</Badge>
-        <Badge variant="secondary">Secondary</Badge>
-        <Badge variant="accent">Accent</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
       </div>
+      
+      {/* 卡片示例 */}
+      <Card bordered>
+        <Card.Body>
+          <Card.Title>卡片标题</Card.Title>
+          <p>这是一个卡片组件的示例内容。</p>
+          <Card.Actions>
+            <Button variant="primary">操作</Button>
+          </Card.Actions>
+        </Card.Body>
+      </Card>
     </div>
   );
 }
@@ -44,30 +110,115 @@ function App() {
 export default App;
 ```
 
-### Available Components
+## 📚 组件列表
+
+### 基础组件
+
+- **[Button](./docs/components/Button.md)** - 按钮组件，支持多种样式和尺寸
+- **[Badge](./docs/components/Badge.md)** - 徽章组件，用于标记和分类
+- **[Input](./docs/components/Input.md)** - 输入框组件，支持多种类型
+- **[Label](./docs/components/Label.md)** - 标签组件，用于表单标签
+- **[Select](./docs/components/Select.md)** - 下拉选择组件，支持单选和多选
+
+### 数据展示
+
+- **[Card](./docs/components/Card.md)** - 卡片容器组件
+- **[Table](./docs/components/Table.md)** - 简单表格组件
+- **[DataTable](./docs/components/DataTable.md)** - 高级数据表格，支持排序、筛选、分页
+- **[List](./docs/components/List.md)** - 列表组件
+
+### 工具组件
+
+- **[Demo](./docs/components/Demo.md)** - 示例展示组件
+
+### 布局组件
 
-- Button - Button component
-- Badge - Badge component
-- Input - Input component
-- Label - Label component
-- More components coming soon...
+- **MainLayout** - 主布局组件
+- **Sidebar** - 侧边栏组件
+- **Navbar** - 导航栏组件
 
-## Development
+## 🎨 主题
+
+DiShUI 支持 daisyUI 的多种主题：
+
+- `light` - 浅色主题
+- `dark` - 深色主题
+- `retro` - 复古主题
+- `cyberpunk` - 赛博朋克主题
+- `customblue` - 自定义蓝色主题
+- `ghibli` - 吉卜力风格主题
+
+你可以在运行时动态切换主题：
+
+```tsx
+import { AppProvider, useAppContext } from 'dishui';
+
+function ThemeSwitcher() {
+  const { theme, setTheme } = useAppContext();
+  
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value="light">浅色</option>
+      <option value="dark">深色</option>
+      <option value="retro">复古</option>
+      <option value="cyberpunk">赛博朋克</option>
+    </select>
+  );
+}
+
+function App() {
+  return (
+    <AppProvider>
+      <ThemeSwitcher />
+      {/* 你的应用内容 */}
+    </AppProvider>
+  );
+}
+```
+
+## 🔧 开发
 
 ```bash
-# Install dependencies
+# 克隆仓库
+git clone https://github.com/yourusername/DishUI.git
+cd DishUI
+
+# 安装依赖
 pnpm install
 
-# Start development server
-pnpm run dev
+# 启动开发服务器
+pnpm dev
 
-# Build library
-pnpm run build
+# 构建库
+pnpm build
 
-# Publish to npm
+# 发布到 npm
 pnpm run publish:npm
 ```
 
-## License
+## 📖 文档
+
+- [组件文档](./docs/components/README.md)
+- [API 参考](./docs/API.md)
+- [开发指南](./docs/CONTRIBUTING.md)
+- [更新日志](./CHANGELOG.md)
+
+## 🤝 贡献
+
+欢迎贡献代码！请查看 [贡献指南](./docs/CONTRIBUTING.md) 了解详情。
+
+## 📄 许可证
+
+ISC License
+
+## 🙏 致谢
+
+- [React](https://react.dev/) - UI 框架
+- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
+- [daisyUI](https://daisyui.com/) - Tailwind CSS 组件库
+- [Vite](https://vitejs.dev/) - 构建工具
+- [TanStack Table](https://tanstack.com/table) - 表格解决方案
+
+## 📮 联系
 
-ISC 
+如果有任何问题或建议，欢迎提交 Issue 或 Pull Request。