@yqg/low-code-component-lib/README.md

fintopia web lowcode component library

# Mod Business Components

一个基于 Vue 3 + TypeScript + Vite 的业务组件库，支持 bundless 模式。

## 特性

- 🚀 **Bundless 模式**: 支持按需加载，减少打包体积
- 🎯 **TypeScript**: 完整的类型支持
- 📦 **ESM**: 原生 ES 模块支持
- 🔧 **Vite**: 快速的构建工具
- 📁 **源码保留**: dist 目录包含完整源码，便于调试

## 安装

```bash
pnpm add @yqg/low-code-component-lib
```

## 使用方式

### 全量引入

```javascript
import { YQGQrCode, BigFishJumpTags, OverseaServerTable } from '@yqg/low-code-component-lib'
```

### 按需引入 (Bundless 模式)

```javascript
// 使用原始名称
import { YQGQrCode, BigFishJumpTags, OverseaServerTable } from '@yqg/low-code-component-lib'
```

### 全量挂载 (Vue.use)

```javascript
import { createApp } from 'vue'
import ComponentLib from '@yqg/low-code-component-lib'

const app = createApp(App)

// 全量挂载所有组件
app.use(ComponentLib)

// 现在可以在模板中直接使用组件，无需单独引入
// <YQGQrCode />
// <BigFishJumpTags />
// <OverseaServerTable />
```


## 开发

```bash
# 安装依赖
pnpm install

# 本地开发环境启动
pnpm dev

# 预览构建结果
pnpm dev:preview

# 构建
pnpm build

# 开发模式构建
pnpm build:dev
```

### 本地开发环境

启动 `pnpm dev` 后，会在浏览器中打开一个开发环境页面，展示所有组件的使用示例和交互功能：

- **YQGQrCode**: 二维码组件，支持动态输入内容
- **BigFishJumpTags**: 跳转标签组件，支持添加/删除标签
- **OverseaServerTable**: 海外服务器表格组件，展示表格功能

开发环境地址：`http://localhost:5173`

## 构建输出

Bundless 模式下会生成以下文件结构：

```
dist/
├── index.es.js    # 主入口文件
├── index.d.ts                  # 主入口类型文件
├── components/                 # 组件源码
│   ├── yqg-qr-code/
│   │   └── index.vue
│   ├── bigfish-jump-tags/
│   │   └── index.vue
│   └── overseas-server-table/
│       └── index.vue
├── utils/                      # 工具函数源码
└── vendor/                     # 第三方库源码
```

**注意**: `dist` 目录中包含了完整的组件源码，便于调试和二次开发。

## 组件列表

- `YQGQrCode` - 二维码组件
- `BigFishJumpTags` - 跳转标签组件  
- `OverseaServerTable` - 海外服务器表格组件

## 依赖

- Vue 3.3+
- Ant Design Vue 4.0+
- Day.js 1.11+

## License

MIT