@qi-tian-da-sheng/bin-project-ui 1.0.0

package/README.md

@@ -0,0 +1,269 @@
+# bin UI
+
+<p align="center">
+  一个基于 Vue 3 + TypeScript 的现代化 UI 组件库
+</p>
+
+<p align="center">
+  <a href="#特性">特性</a> •
+  <a href="#安装">安装</a> •
+  <a href="#快速开始">快速开始</a> •
+  <a href="#组件列表">组件列表</a> •
+  <a href="#开发指南">开发指南</a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/vue-3.5.13-brightgreen.svg" alt="Vue">
+  <img src="https://img.shields.io/badge/typescript-5.7.2-blue.svg" alt="TypeScript">
+  <img src="https://img.shields.io/badge/vite-6.4.1-purple.svg" alt="Vite">
+  <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License">
+</p>
+
+---
+
+## 📖 项目简介
+
+Bin UI 是一个基于 Vue 3 + TypeScript 开发的现代化 UI 组件库，旨在为开发者提供优雅、高效的前端解决方案。本项目主要用于学习和实践组件库开发，参考了腾讯 TDesign 等知名开源 UI 框架的设计理念。
+
+### 🎯 学习目标
+
+- 📦 **组件化开发**：深入理解 Vue 3 组件设计模式
+- 🎨 **UI/UX 设计**：学习现代化 UI 设计规范
+- 🔧 **工程化实践**：掌握前端工程化配置与构建
+- 📝 **TypeScript**：提升 TypeScript 在实际项目中的应用能力
+- ✅ **测试驱动**：学习单元测试和组件测试最佳实践
+
+## ✨ 特性
+
+- 🚀 **Vue 3.5** - 采用最新的 Vue 3 Composition API
+- 💪 **TypeScript** - 完整的 TypeScript 类型支持
+- 🎨 **主题定制** - 支持多种主题风格和颜色变体
+- 📦 **按需引入** - 支持 Tree Shaking，优化打包体积
+- 🔥 **Vite 构建** - 基于 Vite 的极速开发体验
+- ✅ **单元测试** - 使用 Vitest + Vue Test Utils 保证代码质量
+- 📱 **响应式设计** - 适配多种设备尺寸
+- 🎯 **模块化** - 清晰的项目结构和模块划分
+
+## 📦 安装
+
+### 使用 npm
+```bash
+npm install bin-ui
+```
+
+### 使用 pnpm
+```bash
+pnpm add bin-ui
+```
+
+### 使用 yarn
+```bash
+yarn add bin-ui
+```
+
+## 🚀 快速开始
+
+### 完整引入
+
+在 `main.ts` 中引入所有组件：
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import BinUI from 'bin-ui'
+import 'bin-ui/dist/index.css'
+
+const app = createApp(App)
+app.use(BinUI, {
+  zIndex: 3000 // 全局配置
+})
+app.mount('#app')
+```
+
+### 按需引入
+
+```typescript
+import { createApp } from 'vue'
+import { Button, Input, Switch } from 'bin-ui'
+import 'bin-ui/dist/index.css'
+
+const app = createApp(App)
+app.use(Button)
+app.use(Input)
+app.use(Switch)
+app.mount('#app')
+```
+
+### 在组件中使用
+
+```vue
+<template>
+  <div>
+    <p-button type="primary">主要按钮</p-button>
+    <p-input v-model="value" placeholder="请输入内容" />
+    <p-switch v-model="checked" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const checked = ref(false)
+</script>
+```
+
+## 📚 组件列表
+
+### 基础组件
+- **Button 按钮** - 常用的操作按钮
+- **Icon 图标** - 语义化的矢量图形
+
+### 数据录入
+- **Input 输入框** - 通过鼠标或键盘输入字符
+- **Switch 开关** - 表示两种相互对立的状态间的切换
+
+### 数据展示
+- **Badge 徽章** - 出现在按钮、图标旁的数字或状态标记
+- **Tag 标签** - 用于标记和选择
+- **Tooltip 文字提示** - 常用于展示鼠标 hover 时的提示信息
+
+### 导航
+- **Dropdown 下拉菜单** - 将动作或菜单折叠到下拉菜单中
+- **Tabs 标签页** - 分隔内容上有关联但属于不同类别的数据集合
+
+### 反馈
+- **Dialog 对话框** - 在保留当前页面状态的情况下，告知用户并承载相关操作
+- **Drawer 抽屉** - 屏幕边缘滑出的浮层面板
+- **Message 消息提示** - 常用于主动操作后的反馈提示
+- **Notify 通知** - 悬浮出现在页面角落，显示全局的通知提醒消息
+- **Confirm 确认框** - 模拟系统的消息确认框
+- **Popconfirm 气泡确认框** - 点击元素，弹出气泡确认框
+
+### 布局
+- **Layout 布局容器** - 用于布局的容器组件
+- **Grid 栅格** - 通过基础的 24 分栏，迅速简便地创建布局
+- **Divider 分割线** - 区隔内容的分割线
+
+## 💻 开发指南
+
+### 环境要求
+
+- Node.js >= 18.0.0
+- pnpm >= 8.0.0
+
+### 克隆项目
+
+```bash
+git clone https://github.com/your-username/bin-ui.git
+cd bin-ui
+```
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 启动开发服务器
+
+```bash
+pnpm dev
+```
+
+访问 `http://localhost:5175` 查看示例页面
+
+### 运行测试
+
+```bash
+# 运行所有测试
+pnpm test
+
+# 运行测试并生成覆盖率报告
+pnpm test:coverage
+
+# 以 UI 模式运行测试
+pnpm test:ui
+```
+
+### 构建项目
+
+```bash
+pnpm build
+```
+
+## 📁 项目结构
+
+```
+bin-ui/
+├── packages/              # 组件源码
+│   ├── components/        # 组件实现
+│   ├── hooks/            # 组合式函数
+│   ├── styles/           # 样式文件
+│   ├── tools/            # 工具函数
+│   └── typings/          # 类型定义
+├── examples/             # 示例页面
+│   ├── components/       # 示例组件
+│   ├── basic/           # 基础组件示例
+│   ├── dataInput/       # 数据录入示例
+│   ├── data/            # 数据展示示例
+│   ├── navi/            # 导航组件示例
+│   ├── feedback/        # 反馈组件示例
+│   └── layout/          # 布局组件示例
+├── tests/               # 测试文件
+└── docs/                # 文档
+```
+
+## 🧪 测试
+
+项目使用 Vitest 和 @vue/test-utils 进行单元测试，参考了 Element Plus 和 Ant Design Vue 的测试规范。
+
+### 测试覆盖率
+
+当前测试覆盖情况：
+- Button 组件: 100% (17/17 测试通过)
+- Input 组件: 100% (29/29 测试通过)
+- Switch 组件: 100% (19/19 测试通过)
+- Badge 组件: 100% (10/10 测试通过)
+
+## 🎨 设计规范
+
+### 色彩体系
+
+- **主色** - Primary: `#409eff`
+- **成功** - Success: `#67c23a`
+- **警告** - Warning: `#e6a23c`
+- **危险** - Danger: `#f56c6c`
+- **信息** - Info: `#909399`
+
+### 尺寸规范
+
+- **Small** - 小尺寸
+- **Default** - 默认尺寸
+- **Large** - 大尺寸
+
+## 🤝 参考项目
+
+本项目在开发过程中参考了以下优秀的开源项目：
+
+- [TDesign](https://tdesign.tencent.com/) - 腾讯开源的企业级设计体系
+- [Element Plus](https://element-plus.org/) - 基于 Vue 3 的组件库
+- [Ant Design Vue](https://antdv.com/) - Ant Design 的 Vue 实现
+
+## 📄 License
+
+本项目采用 Apache-2.0 许可证
+
+## 👨‍💻 作者
+
+MC.Yang
+
+## 🙏 致谢
+
+感谢所有为开源社区做出贡献的开发者，特别是 TDesign、Element Plus 和 Ant Design Vue 团队。
+
+---
+
+<p align="center">
+  Made with ❤️ for learning
+</p>