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等。

// 创建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方法手动注册。

使用示例

注册组件

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

在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变量进行样式自定义：

/* 全局样式自定义 */
: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方法添加新的自定义组件：

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

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

贡献指南

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