添加了编译流程；

.gitignore

@@ -0,0 +1 @@
+node_modules

gulpfile.js

@@ -0,0 +1,25 @@
+const gulp = require('gulp')
+const chinese2unicode = require('gulp-chinese2unicode')
+const gulpTerser = require('gulp-terser')
+
+// 构建
+gulp.task('minify', async () => {
+  console.log('开始构建...')
+  gulp
+    .src('index.js')
+    .pipe(
+      gulpTerser({
+        mangle: {
+          properties: true,
+        },
+        format: {
+          ascii_only: true,
+        },
+      })
+    )
+    .pipe(chinese2unicode())
+    .on('data', function () {
+      console.log('构建完成！')
+    })
+    .pipe(gulp.dest('./src/'))
+})

index.js

@@ -3,113 +3,139 @@ class API {
   constructor(options = {}) {
     // 接口基础地址
     this.baseUrl = ''
-    // 请求对象
-    this.xhr = new XMLHttpRequest()
     // 合并配置
     Object.assign(this, options)
   }
+
+  // 创建新的 XMLHttpRequest 实例
+  createXHR() {
+    return new XMLHttpRequest()
+  }
+
   // 设置请求头
-  setHeaders(headers = {}) {
+  setHeaders(xhr, headers = {}) {
-    const { xhr } = this
     for (let key in headers) {
       xhr.setRequestHeader(key, headers[key])
     }
   }
+
   // 格式化数据
   formatData(data) {
-    let parseData = null
+    if (typeof data !== 'string') return data
+
     try {
-      parseData = JSON.parse(data)
+      return JSON.parse(data)
-    } catch {
+    } catch (e) {
-      parseData = data
+      return data
     }
-    return parseData
   }
+
   // 中断请求
-  abort(callback = null) {
+  abort(xhr, callback = null) {
-    this.xhr.abort()
+    if (xhr) {
-    callback && callback()
+      xhr.abort()
+      callback && callback()
+    }
   }
+
+  // 处理响应
+  handleResponse(xhr, callback, success, fail, error) {
+    try {
+      const response = this.formatData(xhr.responseText)
+      if (xhr.status >= 200 && xhr.status < 300) {
+        callback && callback(response)
+        success && success(response)
+      } else {
+        const err = new Error(`HTTP Error ${xhr.status}`)
+        error && error(err)
+        fail && fail(err)
+      }
+    } catch (e) {
+      error && error(e)
+      fail && fail(e)
+    }
+  }
+
   // get请求
   get(options = {}) {
-    const { baseUrl, xhr, formatData } = this
-    // 默认配置
     const defaultOption = {
-      // 请求地址
       url: '',
-      // 请求头
       headers: null,
-      // 成功回调
       callback: null,
       success: null,
-      // 失败回调
       fail: null,
       error: null,
-      // 是否异步
       async: true,
     }
-    Object.assign(defaultOption, options)
-    const { url, callback, success, fail, error, async, headers } = defaultOption
 
-    xhr.open('GET', `${baseUrl}${url}`, async)
+    const config = Object.assign({}, defaultOption, options)
-    headers && this.setHeaders(headers)
+    const { url, callback, success, fail, error, async, headers } = config
+    const xhr = this.createXHR()
 
-    xhr.addEventListener('error', function (err) {
+    xhr.open('GET', `${this.baseUrl}${url}`, async)
+
+    if (headers) {
+      this.setHeaders(xhr, headers)
+    }
+
+    xhr.addEventListener('error', err => {
       error && error(err)
       fail && fail(err)
     })
-    xhr.onreadystatechange = function () {
+
-      if (this.readyState === 4 && this.status === 200) {
+    xhr.onreadystatechange = () => {
-        callback && callback(formatData(this.responseText))
+      if (xhr.readyState === 4) {
-        success && success(formatData(this.responseText))
+        this.handleResponse(xhr, callback, success, fail, error)
       }
     }
+
     xhr.send()
+    return xhr
   }
+
   // post请求
   post(options = {}) {
-    const { baseUrl, xhr, formatData } = this
-    // 默认配置
     const defaultOption = {
-      // 请求地址
       url: '',
-      // 请求数据
       data: null,
-      // 请求头
       headers: null,
-      // 进度回调
       progress: null,
-      // 成功回调
       callback: null,
       success: null,
-      // 失败回调
       fail: null,
       error: null,
-      // 是否异步
       async: true,
     }
-    Object.assign(defaultOption, options)
-    const { url, data, progress, callback, success, error, fail, async, headers } = defaultOption
 
-    xhr.open('POST', `${baseUrl}${url}`, async)
+    const config = Object.assign({}, defaultOption, options)
-    headers && this.setHeaders(headers)
+    const { url, data, progress, callback, success, error, fail, async, headers } = config
+    const xhr = this.createXHR()
 
-    xhr.addEventListener('progress', function (evt) {
+    xhr.open('POST', `${this.baseUrl}${url}`, async)
-      const { response } = evt.target
-      progress && progress(response)
-    })
 
-    xhr.addEventListener('error', function (err) {
+    if (headers) {
+      this.setHeaders(xhr, headers)
+    }
+
+    if (progress) {
+      xhr.upload.addEventListener('progress', evt => {
+        progress(evt)
+      })
+    }
+
+    xhr.addEventListener('error', err => {
       error && error(err)
       fail && fail(err)
     })
-    xhr.onreadystatechange = function () {
+
-      if (this.readyState === 4 && this.status === 200) {
+    xhr.onreadystatechange = () => {
-        callback && callback(formatData(this.responseText))
+      if (xhr.readyState === 4) {
-        success && success(formatData(this.responseText))
+        this.handleResponse(xhr, callback, success, fail, error)
       }
     }
+
     xhr.send(data)
+    return xhr
   }
 }
 
@@ -117,16 +143,21 @@ class API {
 class UI {
   constructor(registry = null) {
     const that = this
+    // 属性转换方法
+    const parseBoolean = value => {
+      return value !== null && value !== 'false'
+    }
     // 搜索框
     this.Search = class Input extends HTMLElement {
       // 可用属性
       static observedAttributes = ['value', 'placeholder', 'disabled', 'max', 'wrap']
       static get observedAttributes() {
-        return ['value', 'disabled']
+        return ['value', 'placeholder', 'disabled', 'max', 'wrap']
       }
       // 构造函数
       constructor() {
         super()
+        this.attachShadow({ mode: 'open' })
         // 输入框
         this.input = null
         // 输入框值
@@ -147,38 +178,37 @@ class UI {
       }
       // 属性变化
       attributeChangedCallback(name, oldValue, newValue) {
-        this[name] = newValue
+        if (this[name] === newValue) return
-        if (name == 'disabled') {
-          this.input.querySelector('.search-input').setAttribute('disabled', eval(this.disabled))
-          this.input.querySelector('.search-input').setAttribute('contenteditable', !eval(this.disabled))
-        }
 
-        if (name == 'value') {
+        this[name] = name === 'disabled' || name === 'wrap' ? parseBoolean(newValue) : newValue
-          this.input.querySelector('.search-input').value = newValue
+
+        if (!this.input) return
+
+        switch (name) {
+          case 'disabled':
+            const inputEl = this.shadowRoot.querySelector('.search-input')
+            if (inputEl) {
+              inputEl.toggleAttribute('disabled', this.disabled)
+              inputEl.contentEditable = !this.disabled
+              const clearBtn = this.shadowRoot.querySelector('.search-clear')
+              if (clearBtn) {
+                clearBtn.classList.toggle('visible')
+              }
+            }
+            break
+          case 'value':
+            const searchInput = this.shadowRoot.querySelector('.search-input')
+            if (searchInput) {
+              searchInput.textContent = newValue
+            }
+            break
         }
       }
       // 初始化
       init() {
-        const { value, placeholder, disabled, wrap } = this
+        const shadow = this.shadowRoot
-        const shadow = this.attachShadow({ mode: 'open' })
+        shadow.innerHTML = `
-        const template = document.createElement('template')
+          <style>
-        const style = document.createElement('style')
-        const inputBox = document.createElement('div')
-        inputBox.className = inputBox.part = 'search'
-        const input = document.createElement('div')
-        input.className = input.part = 'search-input'
-        input.setAttribute('placeholder', placeholder)
-        input.setAttribute('disabled', disabled)
-        input.contentEditable = true
-        const prefix = document.createElement('slot')
-        prefix.name = 'prefix'
-        const append = document.createElement('slot')
-        append.name = 'append'
-        const clear = document.createElement('button')
-        clear.className = clear.part = 'search-clear'
-        clear.innerHTML = that.Icon.clear
-
-        style.innerHTML = `
             .search {
               --background-color: #fff;
               --border-color: #ccc;
@@ -190,57 +220,62 @@ class UI {
               --min-width: 150px;
               --gap: .5em;
               --scrollbar-color: var(--border-color);
-                display: flex;
+              display: flex;
-                align-items: center;
+              align-items: center;
-                font-size: 1em;
+              font-size: 1em;
-                position: relative;
+              position: relative;
-                background: var(--background-color);
+              background: var(--background-color);
-                border: 1px solid var(--border-color);
+              border: 1px solid var(--border-color);
-                border-radius: var(--border-radius);
+              border-radius: var(--border-radius);
-                padding: var(--padding);
+              padding: var(--padding);
-                box-sizing: border-box;
+              box-sizing: border-box;
-                width: 100%;
+              width: 100%;
-                min-width: var(--min-width);
+              min-width: var(--min-width);
-                gap: var(--gap);
+              gap: var(--gap);
-                cursor: text;
+              cursor: text;
             }
             .search-input {
-                width: 100%;
+              width: 100%;
-                font-size: 1em;
+              font-size: 1em;
-                outline: none;
+              outline: none;
-                transition: all .2s;
+              transition: all .2s;
-                resize: none;
+              resize: none;
+              min-height: 1em;
+              overflow: hidden;
             }
             .search-input::-webkit-scrollbar {
-                width: 0;
+              width: 0;
-                height: .1em;
+              height: .1em;
             }
             .search-input::-webkit-scrollbar-thumb {
-                background: var(--scrollbar-color);
+              background: var(--scrollbar-color);
             }
             .search-input:empty::before {
-                content: attr(placeholder);
+              content: attr(placeholder);
-                color: var(--placeholder-color);
+              color: var(--placeholder-color);
             }
             .search-input:focus::before {
-                display: none;
+              display: none;
             }
             .search:focus-within {
-                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+              box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-            }
-            .search-input:focus-within + .search-clear {
-                opacity: 1;
             }
             .search-clear {
-                cursor: pointer;
+              cursor: pointer;
-                color: var(--clear-color);
+              color: var(--clear-color);
-                width: 20px;
+              width: 20px;
-                height: 20px;
+              height: 20px;
-                background: none;
+              background: none;
-                border: none;
+              border: none;
-                opacity: 0;
+              opacity: 0;
-                transition: all .3s;
+              transition: all .3s;
-                position: relative;
+              position: relative;
+              flex-shrink: 0;
+              pointer-events: none;
+            }
+            .search-clear.visible {
+              opacity: 1;
+              pointer-events: auto;
             }
             .search-clear svg {
               fill: var(--clear-color);
@@ -249,80 +284,99 @@ class UI {
               left: 50%;
               transform: translate(-50%, -50%);
               pointer-events: none;
-              width: 2em;
+              width: 100%;
-              height: 2em;
+              height: 100%;
             }
-            `
+          </style>
+          <div class="search" part="search">
+            <slot name="prefix"></slot>
+            <div class="search-input" part="search-input" 
+                 placeholder="${this.placeholder}" 
+                 ${this.disabled ? 'disabled' : ''}
+                 contenteditable="${!this.disabled}">
+              ${this.value}
+            </div>
+            <button class="search-clear" part="search-clear">
+              ${that.Icon.clear}
+            </button>
+            <slot name="append"></slot>
+          </div>
+        `
 
-        inputBox.appendChild(prefix)
+        this.input = shadow.querySelector('.search-input')
-        inputBox.appendChild(input)
+        this.input.textContent = ''
-        inputBox.appendChild(clear)
+        this.value = ''
-        inputBox.appendChild(append)
+        // 初始清除按钮状态
+        this.updateClearButton()
 
-        if (wrap || wrap === '') {
+        // 换行处理
-          input.style.whiteSpace = 'pre-wrap'
+        if (this.wrap) {
-          input.style.overflowY = 'auto'
+          this.input.style.whiteSpace = 'pre-wrap'
+          this.input.style.overflowY = 'auto'
         } else {
-          input.style.whiteSpace = 'nowrap'
+          this.input.style.whiteSpace = 'nowrap'
-          input.style.overflowX = 'auto'
+          this.input.style.overflowX = 'auto'
         }
-
-        input.innerText = value.trim()
-        template.content.appendChild(style)
-        template.content.appendChild(inputBox)
-        shadow.appendChild(template.content.cloneNode(true))
-        this.input = shadow
       }
       // 清空输入框
+      updateClearButton() {
+        const clearBtn = this.shadowRoot.querySelector('.search-clear')
+        if (clearBtn) {
+          clearBtn.classList.toggle('visible', this.value.length > 0)
+        }
+      }
       clear() {
-        this.input.querySelector('.search-input').innerText = this.value = ''
+        this.input.textContent = ''
+        this.value = ''
+        this.updateClearButton()
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value }))
       }
       // 绑定事件
       bindEvent() {
-        const { input, max } = this
+        const clearBtn = this.shadowRoot.querySelector('.search-clear')
-        // 清空输入框
+        const inputEl = this.input
-        input.querySelector('.search-clear').addEventListener('click', e => {
+
+        clearBtn.addEventListener('click', e => {
           e.preventDefault()
-          input.querySelector('.search-input').innerText = this.value = ''
+          this.clear()
         })
 
-        // 输入框输入事件
+        inputEl.addEventListener('input', e => {
-        input.querySelector('.search-input').addEventListener('input', e => {
+          let newValue = inputEl.textContent.replace(/[\n]/g, '')
-          e.preventDefault()
-          // 过滤换行符
-          this.value = e.target.innerText.replace(/[\n]/g, '')
 
-          if (this.value.length < max) {
+          if (newValue.length > this.max) {
-            e.target.innerText = this.value
+            newValue = newValue.substring(0, this.max)
-          } else {
+            inputEl.textContent = newValue
-            e.target.innerText = this.value = this.value.slice(0, max)
           }
 
-          // 移动光标到最后
+          this.value = newValue
-          const range = document.createRange()
+          this.updateClearButton()
-          const selection = window.getSelection()
+
-          range.selectNodeContents(e.target)
+          // 移动光标到末尾
-          range.collapse(false)
+          const range = document.createRange()
-          selection.removeAllRanges()
+          const sel = window.getSelection()
+          range.selectNodeContents(inputEl)
+          range.collapse(false)
+          sel.removeAllRanges()
+          sel.addRange(range)
 
-          selection.addRange(range)
-          e.target.focus()
           this.dispatchEvent(new CustomEvent('change', { detail: this.value }))
         })
 
-        // 输入框回车事件
+        inputEl.addEventListener('keydown', e => {
-        input.querySelector('.search-input').addEventListener('keydown', e => {
           if (e.key === 'Enter') {
             e.preventDefault()
             this.dispatchEvent(new CustomEvent('enter', { detail: this.value }))
           }
         })
 
-        // 输入框失焦事件
+        inputEl.addEventListener('blur', () => {
-        input.querySelector('.search-input').addEventListener('blur', () => this.dispatchEvent(new CustomEvent('blur')))
+          this.dispatchEvent(new CustomEvent('blur'))
+        })
 
-        // 输入框聚焦事件
+        inputEl.addEventListener('focus', () => {
-        input.querySelector('.search-input').addEventListener('focus', () => this.dispatchEvent(new CustomEvent('focus')))
+          this.dispatchEvent(new CustomEvent('focus'))
+        })
       }
     }
     // 下拉框
@@ -330,7 +384,7 @@ class UI {
       // 可用属性
       static observedAttributes = ['placeholder', 'list', 'value', 'current', 'disabled', 'focus']
       static get observedAttributes() {
-        return ['value', 'current', 'disabled', 'focus']
+        return ['placeholder', 'list', 'value', 'current', 'disabled', 'focus']
       }
       // 构造函数
       constructor() {

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "pure-component",
+  "version": "1.0.0",
+  "description": "一个功能强大的UI组件库和一个轻量级的API请求工具，可以帮助开发者快速构建现代化的Web应用界面。",
+  "main": "index.js",
+  "scripts": {
+    "build": "gulp minify"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "gulp": "^5.0.1",
+    "gulp-chinese2unicode": "^1.0.1",
+    "gulp-terser": "^2.1.0",
+    "gulp-uglify": "^3.0.2",
+    "terser": "^5.43.1"
+  }
+}