vue-ex-ui/README.md

赛博朋克美学风格 Vue 3 组件库

# Ex UI - 赛博朋克美学风格 Vue 3 组件库

一个基于 Vue 3 + TypeScript + Vite 构建的现代化组件库，采用赛博朋克美学风格设计。

## ✨ 特性

- 🎨 **赛博朋克美学** - 独特的霓虹灯、发光、扫描线等特效
- 🚀 **Vue 3 + TypeScript** - 现代化的技术栈
- 📱 **响应式设计** - 完美适配各种设备
- 🌍 **国际化支持** - 内置中英文支持
- ♿ **无障碍友好** - 遵循 WCAG 2.1 AA 标准
- 🎭 **动画优化** - 支持 prefers-reduced-motion
- 📦 **Tree Shaking** - 按需引入，减少包体积
- 🧪 **完整测试** - 744 个测试用例，100% 覆盖率
- 🎯 **类型安全** - 完整的 TypeScript 类型定义
- 🎨 **主题定制** - 支持 CSS 变量自定义主题
- ⚡ **性能优化** - 基于 Vite 构建，支持现代浏览器
- 🔧 **开发友好** - 完整的 ESLint + Prettier 配置

## 🚀 快速开始

### 安装

```bash
npm install vue-ex-ui
```

### 使用

```typescript
import { createApp } from 'vue'
import ExUI from 'vue-ex-ui'
import 'vue-ex-ui/style.css'

const app = createApp(App)
app.use(ExUI)
```

### 按需引入

```typescript
import { ExButton, ExTypography, ExIcon, ExLink } from 'vue-ex-ui'
import 'vue-ex-ui/style.css'
```

### 样式导入

组件库提供了完整的样式文件，需要手动导入：

```typescript
// 方式一：推荐使用
import 'vue-ex-ui/style.css'

// 方式二：也可以使用
import 'vue-ex-ui/vue-ex-ui.css'

// 或者通过 CDN 导入
<link rel="stylesheet" href="https://unpkg.com/vue-ex-ui/dist/vue-ex-ui.css">
```

### 基本示例

```vue
<template>
  <div class="app">
    <ExTypography variant="h1" cyber>
      欢迎使用 Ex UI
    </ExTypography>
    
    <ExButton type="primary" glow @click="handleClick">
      点击我
    </ExButton>
    
    <ExInput 
      v-model="inputValue" 
      placeholder="请输入内容"
      neon
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ExButton, ExInput, ExTypography } from 'vue-ex-ui'
import 'vue-ex-ui/style.css'

const inputValue = ref('')
const handleClick = () => {
  console.log('按钮被点击了！')
}
</script>
```

## 📚 组件列表

### 开发进度统计

- **通用基础组件**: 8/8 完成 ✅
- **表单类组件**: 16/16 完成 ✅
- **数据展示组件**: 0/10 待开发 ⏳
- **导航与布局组件**: 0/10 待开发 ⏳
- **反馈与交互组件**: 0/8 待开发 ⏳
- **其他组件**: 0/4 待开发 ⏳

**总体进度**: 26/56 完成 (46.4%)

### 通用基础组件

- ✅ **Typography** - 排版文本组件
- ✅ **Icon** - 图标组件（基于 Iconify API）
- ✅ **Button** - 按钮组件
- ✅ **Link** - 链接组件
- ✅ **Avatar** - 头像组件
- ✅ **Badge** - 徽标计数组件
- ✅ **Divider** - 分割线组件
- ✅ **Space** - 间距组件

### 表单类组件

- ✅ **Input** - 文本输入框
- ✅ **Textarea** - 多行文本框
- ✅ **InputNumber** - 数字输入框
- ✅ **Select** - 下拉选择器
- ✅ **Cascader** - 级联选择器
- ✅ **Autocomplete** - 自动完成输入框
- ✅ **Checkbox** - 复选框
- ✅ **Radio** - 单选框
- ✅ **Switch** - 开关
- ✅ **Slider** - 滑块
- ✅ **TimePicker** - 时间选择器
- ✅ **DatePicker** - 日期选择器
- ✅ **ColorPicker** - 颜色选择器
- ✅ **Transfer** - 穿梭框
- ✅ **Rate** - 评分组件
- ✅ **Upload** - 文件上传组件
- ✅ **Form** - 表单组件

### 数据展示组件

- ⏳ **Tag** - 标签/标记
- ⏳ **List** - 列表
- ⏳ **Collapse** - 折叠面板
- ⏳ **Carousel** - 走马灯/幻灯片
- ⏳ **Timeline** - 时间线
- ⏳ **Card** - 卡片容器
- ⏳ **Progress** - 进度条
- ⏳ **Calendar** - 日历视图
- ⏳ **Table** - 表格
- ⏳ **Tree** - 树形控件
- ⏳ **Empty** - 空状态提示

### 导航与布局组件

- ⏳ **Grid** - 栅格布局
- ⏳ **Flex** - 弹性布局容器
- ⏳ **Menu** - 导航菜单
- ⏳ **Tabs** - 选项卡
- ⏳ **Dropdown** - 下拉菜单
- ⏳ **Breadcrumb** - 面包屑导航
- ⏳ **Steps** - 步骤条
- ⏳ **Anchor** - 锚点/页面内导航
- ⏳ **PageHeader** - 页面头部
- ⏳ **Pagination** - 分页器

### 反馈与交互组件

- ⏳ **Modal** - 模态对话框
- ⏳ **Drawer** - 抽屉/侧滑层
- ⏳ **Tooltip** - 文字提示
- ⏳ **Popover** - 气泡提示
- ⏳ **Popconfirm** - 气泡确认框
- ⏳ **Message** - 全局提示/通知条
- ⏳ **Notification** - 系统通知
- ⏳ **Loading** - 加载中/Spinner
- ⏳ **Alert** - 警告提示
- ⏳ **Affix** - 固定位置
- ⏳ **BackTop** - 回到顶部

## 🎨 设计系统

### 色彩系统

- **主色 (Primary)**: `#00ff88` - 赛博朋克绿
- **次色 (Secondary)**: `#ff0080` - 赛博朋克粉
- **强调色 (Accent)**: `#00d4ff` - 赛博朋克蓝
- **成功 (Success)**: `#00ff88`
- **警告 (Warning)**: `#f59e0b`
- **错误 (Error)**: `#ef4444`
- **信息 (Info)**: `#00d4ff`

### 特效样式

- **发光效果 (Glow)** - 柔和的发光边框
- **霓虹灯效果 (Neon)** - 文字霓虹灯效果
- **赛博朋克效果 (Cyber)** - 渐变背景 + 扫描线动画
- **扫描线效果 (Scan Line)** - 动态扫描线动画

### 动画系统

- **微交互**: 120ms，ease-accelerate
- **主要交互**: 200ms，ease-standard
- **页面切换**: 320-480ms，ease-decelerate
- **减少动画**: 支持 `prefers-reduced-motion`

## 🛠️ 开发

### 环境要求

- Node.js >= 16
- pnpm (推荐) 或 npm

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建

```bash
pnpm build
```

### 测试

```bash
pnpm test
```

### 类型检查

```bash
pnpm typecheck
```

### 代码检查

```bash
pnpm lint
```

## 📊 测试统计

- **测试文件**: 26 个
- **测试用例**: 744 个
- **测试覆盖率**: 100%
- **构建状态**: ✅ 成功
- **包大小**: 185.00 kB (gzipped: 34.20 kB)
- **样式文件**: 167.62 kB (gzipped: 18.92 kB)

## 📖 文档

查看 [示例页面](./examples/) 了解组件的详细用法。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License

---

**Ex UI** - 让界面更具未来感 🚀