# UI组件库与API请求工具

一个功能强大的UI组件库和一个轻量级的API请求工具，可以帮助开发者快速构建现代化的Web应用界面。

## 功能概述

### API请求器 (`API`类)
- 支持GET和POST请求
- 可设置基础URL和请求头
- 提供请求中断功能
- 自动格式化响应数据
- 支持异步请求和回调处理
- 包含进度回调支持(POST)

### UI组件库 (`UI`类)
提供以下自定义Web组件：

1. **搜索框组件 (Search)**
   - 支持前缀/后缀插槽
   - 可清除内容
   - 支持最大长度限制
   - 支持换行显示

2. **下拉选择框组件 (Select)**
   - 可自定义选项列表
   - 支持选项值绑定
   - 弹出式菜单
   - 选中状态高亮

3. **加载指示器组件 (Loading)**
   - 自定义加载文本
   - 内联/全屏模式
   - 显示/隐藏控制
   - 内置加载动画

4. **气泡列表组件 (BubbleList)**
   - 可选气泡项
   - 多行滚动支持
   - 自定义大小
   - 选中状态标记

5. **对话框组件 (Dialog)**
   - 自定义标题和内容
   - 确定/取消按钮
   - 显示/隐藏控制
   - 支持插槽自定义内容

6. **模态框组件 (Modal)**
   - 带模糊背景效果
   - 居中显示
   - 开/关动画
   - 自定义内容

7. **选项卡组件 (Tab)**
   - 水平布局
   - 带描述的选项卡
   - 选中高亮效果
   - 切换事件

8. **提示条组件 (Tip)**
   - 多种类型(info/success/warn/error)
   - 自动隐藏计时器
   - 关闭按钮
   - 位置动画

## 安装与使用

### API请求器

- 用于发送HTTP请求，支持GET和POST方法。
- 可以设置基础URL（baseUrl）。
- 可以设置请求头（headers）。
- 支持中断请求（abort）。
- 支持异步请求。
- 提供成功和失败的回调函数。

### 方法：

1. `constructor(options)`: 初始化，可以传入配置对象（如baseUrl）。
2. `setHeaders(headers)`: 设置请求头。
3. `formatData(data)`: 格式化响应数据，尝试解析JSON。
4. `abort(callback)`: 中断请求，并执行回调。
5. `get(options)`: 发送GET请求，配置项包括url、headers、callback/success、fail/error、async等。
6. `post(options)`: 发送POST请求，配置项包括url、data、headers、progress、callback/success、fail/error、async等。

```javascript
// 创建API实例
const api = new API({ baseUrl: 'https://api.example.com' });

// GET请求
api.get({
  url: '/data',
  success: (data) => {
    console.log('获取数据:', data);
  }
});

// POST请求
api.post({
  url: '/submit',
  data: JSON.stringify({ name: 'John' }),
  progress: (response) => {
    console.log('上传进度:', response);
  },
  success: (data) => {
    console.log('提交成功:', data);
  }
});

// 中断请求
api.abort();
```

### UI组件

- 用于创建自定义元素（Web Components）。
- 包含多个内置组件：Search（搜索框）、Select（下拉框）、Loading（加载指示器）、BubbleList（气泡列表）、Dialog（对话框）、Modal（模态框）、Tab（选项卡）、Tip（提示条）。
- 每个组件都是通过继承`HTMLElement`定义的，并且可以注册为自定义元素。
- 提供了注册组件的方法`registerComponent`。

### 组件列表：

1. **Search (搜索框)**
   - 属性：value, placeholder, disabled, max, wrap
   - 事件：change, enter, blur, focus
   - 方法：clear()
2. **Select (下拉框)**
   - 属性：placeholder, list（选项列表，逗号分隔）, value（选项值，逗号分隔）, current（当前选中索引）, disabled, focus
   - 事件：change
   - 方法：reset(), addOption()
3. **Loading (加载指示器)**
   - 属性：content（加载文本）, inline（是否内联）, hidden（是否隐藏）
   - 方法：show(), hide()
4. **BubbleList (气泡列表)**
   - 属性：list（列表项，逗号分隔）, value（值，逗号分隔）, current（当前选中索引）, disabled, rows（显示行数）, size（气泡大小）, selected（当前选中值）
   - 事件：change
   - 方法：add(), clear(), select()
5. **Dialog (对话框)**
   - 属性：subtitle（标题）, content（内容）, hidden
   - 事件：show, hide
   - 方法：show(), hide(), set()
6. **Modal (模态框)**
   - 属性：subtitle, content, hidden
   - 事件：open, close
   - 方法：open(), close(), animate()
7. **Tab (选项卡)**
   - 属性：list（选项卡列表，格式为"标题>描述|标题>描述"，用|分隔）, current（当前索引）
   - 事件：change
8. **Tip (提示条)**
   - 属性：content, type（info/success/warn/error）, hidden, timeout（自动隐藏时间）
   - 方法：show(), hide(), animate()

### 图标（Icon）

- 提供两个SVG图标：clear（清除）和task（任务）。

### 注册组件

在`UI`的构造函数中，传入一个组件名称数组（如`['ui-search', 'ui-select']`），则会自动注册这些组件。也可以使用`registerComponent`方法手动注册。

## 使用示例

### 注册组件

```javascript
const ui = new UI(['ui-search', 'ui-select', 'ui-loading', 'ui-bubble-list', 'ui-dialog', 'ui-modal', 'ui-tab', 'ui-tip']);
```

### 在HTML中使用

```html
<ui-search placeholder="搜索..."></ui-search>
<ui-select list="选项1,选项2" value="1,2"></ui-select>
<ui-loading content="加载中..."></ui-loading>
<ui-bubble-list list="气泡1,气泡2" value="1,2" rows="1"></ui-bubble-list>
<ui-dialog subtitle="提示" content="这是一个对话框"></ui-dialog>
<ui-modal subtitle="标题" content="模态框内容"></ui-modal>
<ui-tab list="选项卡1>描述1|选项卡2>描述2"></ui-tab>
<ui-tip content="提示信息" type="info"></ui-tip>
```

## 自定义样式

所有组件都支持通过CSS变量进行样式自定义：

```css
/* 全局样式自定义 */
:root {
  /* 搜索框 */
  --background-color: #f5f5f5;
  --border-color: #ddd;
  
  /* 下拉框 */
  --hover-background-color: #eef2ff;
  
  /* 加载指示器 */
  --mask-color: rgba(255, 255, 255, 0.8);
  
  /* 气泡列表 */
  --background-color: #4f46e5;
  
  /* 对话框 */
  --border-radius: 12px;
  
  /* 提示条 */
  --color: #3b82f6;
}
```

## 内置图标

组件库提供两个内置SVG图标：
1. 清除图标 (Icon.clear)
2. 任务图标 (Icon.task)

## 浏览器兼容性

- 现代浏览器(Chrome, Firefox, Edge最新版本)
- 需要支持Web Components和Shadow DOM

## 注意事项

1. 所有UI组件都是自定义HTML元素，使用Shadow DOM封装
2. 组件属性可以通过JavaScript或HTML属性设置
3. 组件会触发自定义事件，可通过addEventListener监听
4. API请求器使用XMLHttpRequest实现

## 扩展开发

可以通过继承UI类并调用registerComponent方法添加新的自定义组件：

```javascript
class MyComponent extends HTMLElement {
  // 组件实现
}

// 注册新组件
ui.registerComponent('my-component', MyComponent);
```

## 贡献指南

欢迎提交Pull Request或Issue报告问题。请确保代码风格一致并通过基本测试。