# bxui

**Repository Path**: treelee/bxui

## Basic Information

- **Project Name**: bxui
- **Description**: 这是一个用manus创建的前端页面组件，创作灵感来源于tdesign和苹果刚更新的Liquid Glass风格
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-06-14
- **Last Updated**: 2025-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Benxin UI

基于Vue 3的现代化Liquid Glass风格组件库，提供80个高质量组件，助力快速构建美观的用户界面。

本项目借助 Manus 工具创建，并以开源形式与大家共享。然而，Manus 每日提供的积分有限，若您也觉得积分不够用，不妨点击下方链接进行注册，一同积攒积分：[Manus 注册链接](https://manus.im/login?code=YXELRXXNG4T2TE)

## ✨ 特性

- 🎨 **Liquid Glass 设计** - 采用现代化的玻璃拟态设计风格，视觉效果精美
- ⚡ **Vue 3 + Composition API** - 基于最新的Vue 3技术栈，性能优异
- 📦 **80+ 组件** - 提供丰富的组件库，覆盖各种业务场景
- 📱 **响应式设计** - 完美适配桌面端和移动端设备
- 🛠️ **TypeScript 支持** - 完整的类型定义，开发体验更佳
- 🎯 **按需引入** - 支持按需引入，减小打包体积

## 📦 安装

```bash
npm install benxin-ui
# 或
yarn add benxin-ui
# 或
pnpm add benxin-ui
```

## 🚀 快速开始

### 完整引入

```javascript
import { createApp } from 'vue'
import BenxinUI from 'benxin-ui'
import 'benxin-ui/dist/style.css'

const app = createApp(App)
app.use(BenxinUI)
app.mount('#app')
```

### 按需引入

```javascript
import { BxButton, BxCard } from 'benxin-ui'

export default {
  components: {
    BxButton,
    BxCard
  }
}
```

## 📋 组件列表

### 基础组件 (4个)
- **BxButton** - 按钮组件
- **BxIcon** - 图标组件
- **BxLink** - 链接组件
- **BxTypography** - 排版组件

### 布局组件 (9个)
- **BxGrid** - 栅格容器
- **BxCol** - 栅格列
- **BxLayout** - 布局容器
- **BxHeader** - 头部组件
- **BxSider** - 侧边栏组件
- **BxContent** - 内容区组件
- **BxFooter** - 底部组件
- **BxDivider** - 分割线
- **BxSpace** - 间距组件

### 导航组件 (9个)
- **BxAffix** - 固钉组件
- **BxAnchor** - 锚点组件
- **BxBreadcrumb** - 面包屑导航
- **BxDropdown** - 下拉菜单
- **BxMenu** - 导航菜单
- **BxPagination** - 分页组件
- **BxSteps** - 步骤条
- **BxTabs** - 选项卡
- **BxBackTop** - 返回顶部

### 输入组件 (19个)
- **BxAutoComplete** - 自动完成
- **BxCascader** - 级联选择器
- **BxCheckbox** - 多选框
- **BxColorPicker** - 颜色选择器
- **BxDatePicker** - 日期选择器
- **BxForm** - 表单容器
- **BxFormItem** - 表单项
- **BxInput** - 输入框
- **BxInputNumber** - 数字输入框
- **BxRadio** - 单选框
- **BxRangeInput** - 范围输入框
- **BxSelect** - 选择器
- **BxSlider** - 滑块
- **BxSwitch** - 开关
- **BxTagInput** - 标签输入框
- **BxTextarea** - 多行文本框
- **BxTimePicker** - 时间选择器
- **BxTransfer** - 穿梭框
- **BxTreeSelect** - 树选择
- **BxUpload** - 上传组件

### 数据展示组件 (23个)
- **BxAvatar** - 头像
- **BxBadge** - 徽标
- **BxCalendar** - 日历
- **BxCard** - 卡片
- **BxCarousel** - 轮播图
- **BxCollapse** - 折叠面板
- **BxComment** - 评论
- **BxDescriptions** - 描述列表
- **BxEmpty** - 空状态
- **BxImage** - 图片
- **BxImageViewer** - 图片预览
- **BxList** - 列表
- **BxLoading** - 加载
- **BxProgress** - 进度条
- **BxSkeleton** - 骨架屏
- **BxStatistic** - 统计数值
- **BxSwiper** - 轮播组件
- **BxTable** - 表格
- **BxTag** - 标签
- **BxTimeline** - 时间轴
- **BxTooltip** - 文字提示
- **BxTree** - 树形控件
- **BxWatermark** - 水印

### 消息反馈组件 (13个)
- **BxAlert** - 警告提醒
- **BxDialog** - 对话框
- **BxDrawer** - 抽屉
- **BxGuide** - 引导
- **BxMessage** - 全局提示
- **BxModal** - 模态框
- **BxNotification** - 消息通知
- **BxPopconfirm** - 气泡确认框
- **BxPopup** - 弹出层
- **BxResult** - 结果页
- **BxSpin** - 加载中
- **BxPopover** - 气泡卡片

### 其他组件 (3个)
- **BxAnchor** - 锚点
- **BxConfigProvider** - 全局配置
- **BxLocaleProvider** - 国际化

## 🎨 设计理念

Benxin UI 采用 Liquid Glass（液态玻璃）设计风格，具有以下特点：

- **半透明效果** - 使用 `backdrop-filter` 实现真实的玻璃质感
- **柔和阴影** - 精心调制的阴影效果，营造层次感
- **流畅动画** - 丝滑的过渡动画，提升用户体验
- **现代配色** - 清新的色彩搭配，符合现代审美

## 🔧 开发

```bash
# 克隆项目
git clone https://github.com/your-username/benxin-ui.git

# 安装依赖
cd benxin-ui
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build
```

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系我们

如有问题或建议，请通过以下方式联系我们：

- GitHub Issues: [提交问题](https://github.com/your-username/benxin-ui/issues)
- Email: your-email@example.com

---

**Benxin UI** - 让界面更美好 ✨