# VueDemo

Vue 3 + TypeScript 组件库，提供 PC 端和移动端的通用 UI 组件及工具函数。

## 技术栈

- **Vue 3.5** — Composition API + `<script setup>`
- **TypeScript 5.6** — 类型安全
- **Vite 6** — 构建与开发
- **Vue Router 4** — 路由管理
- **Pinia 3** — 状态管理

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（localhost:6001）
npm run dev

# 构建组件库
npm run lib:build

# 构建项目
npm run build
```

## 目录结构

```
src/
├── libs/
│   ├── Element/          # 通用组件（PC / Mobile 共用）
│   ├── Web/              # Web 端专用组件
│   ├── Mobile/           # Mobile 端专用组件
│   └── Common/           # 公共工具（base、day、echart、axios 等）
├── service/              # API 接口、业务逻辑
└── web/
    ├── views/Demo/       # 组件示例页面
    └── router/           # 路由配置
```

## 组件列表

### Element（通用组件）

| 组件 | 标签 | 说明 |
|------|------|------|
| AnchorNav | `<cl-anchor-nav>` | 锚点导航 |
| Badge | `<cl-badge>` | 徽章 |
| Button | `<cl-button>` | 按钮 |
| Checkbox | `<cl-checkbox>` | 复选框 |
| Clipboard | `<cl-clipboard>` | 复制 |
| CountUp | `<cl-countup>` | 数字滚动动画 |
| Cropper | `<cl-cropper>` | 图片裁剪 |
| Darg | `<cl-darg>` | 拖拽排序 |
| Ellipsis | `<cl-ellipsis>` | 文本省略 |
| Form | `<cl-form>` | 表单 |
| FormGroup | `<cl-form-group>` | 表单组布局 |
| IconFont | `<cl-icon-font>` | 图标 |
| Image | `<cl-image>` | 图片 |
| Input | `<cl-input>` | 输入框 |
| InputCaptcha | `<cl-input-captcha>` | 验证码输入框 |
| InputNumber | `<cl-input-number>` | 数字输入框 |
| InputSearch | `<cl-input-search>` | 搜索框 |
| InputTextarea | `<cl-input-textarea>` | 文本域 |
| Link | `<cl-link>` | 链接 |
| Load | `<cl-load>` | 加载动画 |
| LoadScreen | `<cl-load-screen>` | 全屏加载遮罩 |
| Modal | `<cl-modal>` | 弹窗 |
| Radio | `<cl-radio>` | 单选框 |
| Switchery | `<cl-switchery>` | 开关 |
| Transition | `<cl-slide-up-down>` | 过渡动画 |

### Web（Web 端组件）

| 组件 | 标签 | 说明 |
|------|------|------|
| Alert | `<cl-alert>` | 警告框 |
| Card | `<cl-card>` | 卡片 |
| CardLegend | `<cl-card-legend>` | 图例卡片 |
| Notify | `<cl-notify>` | 通知 |

### 指令

| 指令 | 说明 |
|------|------|
| `v-cl-highlight` | 代码高亮 |
| `v-cl-waves` | 波纹效果 |
| `v-cl-tooltip` | 工具提示 |
| `v-cl-lazy-image` | 图片懒加载 |

## 路径别名

| 别名 | 路径 |
|------|------|
| `@` | `src/` |
| `@c.Libs` | `src/libs/` |
| `@c.Common` | `src/libs/Common/` |
| `@c.Biz` | `src/service/biz/` |

## 组件命名规范

- 文件夹名：PascalCase（如 `InputNumber`）
- 组件名：`Cl` + PascalCase（如 `ClInputNumber`）
- 使用标签：`cl-` + kebab-case（如 `<cl-input-number>`）

## 构建产物

```
buildLibs/
├── web/       # Web 端组件库
├── mobile/    # Mobile 端组件库
└── common/    # 公共工具库
```

## License

MIT
