From 3292f6c71d29c39102fb96cebc7efe9438d17006 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Fri, 13 Feb 2026 13:33:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=20=E4=BC=98=E5=8C=96README.m?=
 =?UTF-8?q?d=20API=E6=96=87=E6=A1=A3=EF=BC=8C=E5=B0=86=E5=8E=9F=E7=90=86?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E6=94=B9=E4=B8=BA=E5=8A=9F=E8=83=BD=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E=EF=BC=8C=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E5=92=8C=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 644 ++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 580 insertions(+), 64 deletions(-)

diff --git a/README.md b/README.md
index 697ce5e..f96e17e 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,53 @@
 # Pandora.js 完整 API 文档
 
-## 1. 基础工具函数
+## 📖 简介
+
+Pandora.js 是一款专为新手优化的 JavaScript 插件，提供前端开发中常用的功能模块，API 设计简洁，支持链式调用。
+
+### 核心特性
+
+- **轻量级**：零依赖，开箱即用
+- **链式调用**：大多数方法支持链式写法
+- **原生 JS**：基于原生 JavaScript 实现，兼容性好
+- **功能丰富**：涵盖 DOM 操作、网络请求、组件交互等
+
+### 快速开始
+
+```html
+<!-- 引入 Pandora.js -->
+<script src="Pandora.js"></script>
+
+<!-- 依赖文件 -->
+<script src="src/base64.js"></script>
+```
+
+---
+
+## 1️⃣ 基础工具函数
 
 ### 1.1 alert - 自定义提示框
 
-**说明**：重写原生 alert，提供美观的提示效果
+**功能说明**：
+- 提供美观的自定义提示框，替代原生 alert
+- 支持自定义显示时间和主题样式
+- 支持点击遮罩立即关闭
+- 具有平滑的淡入淡出动画效果
 
 **使用方式**：
 ```javascript
 alert(content, speed = 800)
 ```
 
-**参数**：
+**参数说明**：
 - `content` (string): 提示内容
-- `speed` (number, 可选): 自动消失时间，默认 800ms
+- `speed` (number, 可选): 自动消失时间（毫秒），默认 800ms
 
 **示例**：
 ```javascript
+// 基础用法
 alert('操作成功！')
+
+// 自定义显示时间
 alert('加载中...', 2000)  // 2秒后消失
 ```
 
@@ -31,18 +61,29 @@ alert('加载中...', 2000)  // 2秒后消失
 }
 ```
 
+**全局配置**：
+```javascript
+// 禁用 alert 重写
+window.resetAlert = false
+```
+
 ---
 
 ### 1.2 confirm - 自定义确认框
 
-**说明**：重写原生 confirm，返回 Promise
+**功能说明**：
+- 提供美观的自定义确认框，替代原生 confirm
+- 返回 Promise 对象，支持异步回调
+- 支持自定义按钮文本、标题和内容
+- 支持显示/隐藏确认和取消按钮
+- 支持主题样式自定义
 
 **使用方式**：
 ```javascript
 confirm(config)
 ```
 
-**参数**：
+**参数说明**：
 ```javascript
 {
   title: '标题',              // 可选
@@ -50,7 +91,9 @@ confirm(config)
   confirmText: '确认',        // 可选，默认"确认"
   cancelText: '取消',         // 可选，默认"取消"
   showConfirm: true,          // 可选，是否显示确认按钮
-  showCancel: true            // 可选，是否显示取消按钮
+  showCancel: true,           // 可选，是否显示取消按钮
+  success() {},               // 可选，确认回调
+  fail() {}                   // 可选，取消回调
 }
 ```
 
@@ -68,45 +111,98 @@ confirm({
   title: '提示',
   content: '是否继续操作？',
   confirmText: '继续',
-  cancelText: '放弃'
+  cancelText: '放弃',
+  showConfirm: true,
+  showCancel: true
 }).then(() => {
-  // 确认回调
+  console.log('确认回调')
 }).catch(() => {
-  // 取消回调
+  console.log('取消回调')
 })
+
+// 仅显示确认按钮
+confirm({
+  content: '操作完成',
+  showCancel: false
+}).then(() => {
+  console.log('已确认')
+})
+```
+
+**CSS 变量自定义**：
+```css
+:root {
+  --confirmTheme: #fff;          /* 背景色 */
+  --confirmBg: transparent;      /* 遮罩色 */
+  --confirmFontSize: 1rem;       /* 字体大小 */
+  --confirmColor: #636363;       /* 字体颜色 */
+  --confirmBtnBg: #fafafa;       /* 按钮背景 */
+  --confirmBtnColor: #636363;    /* 按钮文字颜色 */
+  --confirmBtnBorder: #f1f1f1;   /* 按钮边框颜色 */
+}
+```
+
+**全局配置**：
+```javascript
+// 禁用 confirm 重写
+window.resetConfirm = false
 ```
 
 ---
 
 ### 1.3 showLoading / hideLoading - 加载遮罩
 
+**功能说明**：
+- 显示全屏加载遮罩层
+- 支持显示进度文字或数字
+- 使用 SVG 加载动画图标
+- 可随时调用 hideLoading 关闭遮罩
+
 **使用方式**：
 ```javascript
-showLoading(progress = null)  // progress: 显示进度文字
+showLoading(progress = null)
 hideLoading()
 ```
 
+**参数说明**：
+- `progress` (string | number, 可选): 显示进度文字或百分比
+
 **示例**：
 ```javascript
+// 基础用法
 showLoading()
 setTimeout(() => hideLoading(), 2000)
 
+// 显示进度
 showLoading('加载中 50%...')
-setTimeout(() => hideLoading(), 2000)
+setTimeout(() => {
+  showLoading('加载中 80%...')
+  setTimeout(() => hideLoading(), 1000)
+}, 1000)
+
+// 显示数字进度
+showLoading(25)  // 显示 25%
 ```
 
 ---
 
-## 2. DOM 操作
+## 2️⃣ DOM 操作
 
 ### 2.1 选择器方法
 
-**说明**：支持 CSS 选择器语法，类似 jQuery
+**功能说明**：
+- 支持 CSS 选择器语法选择 DOM 元素
+- 返回 Pandora 实例，支持链式调用
+- 支持类选择器、ID 选择器、标签选择器等
+- 支持层级选择器
+
+**使用方式**：
+```javascript
+const $ = Pandora
+```
 
 **示例**：
 ```javascript
-const $ = Pandora
-
 // 基础选择
 $('.class')        // 类选择器
 $('#id')           // ID 选择器
@@ -118,15 +214,24 @@ $('#box')
   .find('.item')
   .eq(0)
   .addClass('active')
+  .css({ color: 'red' })
 ```
 
 ---
 
 ### 2.2 元素遍历与筛选
 
+**功能说明**：
+- 支持通过索引选择指定元素
+- 支持选择父级、子级、同级元素
+- 支持遍历元素集合
+- 返回新的 Pandora 实例，支持链式调用
+
+**示例**：
 ```javascript
 // eq(index) - 选择指定下标元素
 $('.item').eq(0).text()
+$('.item').eq(2).css('color', 'red')
 
 // child(name) - 选择子级元素
 $('#box').child('.item')
@@ -139,6 +244,7 @@ $('.item').parent()
 
 // siblings(name) - 选择同级元素
 $('.item').siblings()
+$('.item').siblings('.active')
 
 // prev() - 上一个同级元素
 $('.item').prev()
@@ -162,14 +268,23 @@ $('.item').each((el, index) => {
 
 ### 2.3 样式操作
 
+**功能说明**：
+- 支持获取和设置元素样式
+- 支持获取元素位置和尺寸信息
+- 支持显示/隐藏元素
+- 支持淡入淡出动画效果
+
+**示例**：
 ```javascript
 // css(name) - 获取样式
 const color = $('#box').css('color')
+const width = $('#box').css('width')
 
 // css({key: value}) - 设置样式
 $('#box').css({
   'color': 'red',
-  'font-size': '14px'
+  'font-size': '14px',
+  'background': '#f0f0f0'
 })
 
 // show(callback) - 显示
@@ -181,7 +296,7 @@ $('#box').hide(() => console.log('隐藏完成'))
 // fadeIn(speed, callback) - 淡入
 $('#box').fadeIn('fast')     // fast: 快速
 $('#box').fadeIn('slow')     // slow: 慢速
-$('#box').fadeIn(5)          // 自定义速度
+$('#box').fadeIn(5)          // 自定义速度（数字）
 
 // fadeOut(speed, callback) - 淡出
 $('#box').fadeOut('fast')
@@ -193,6 +308,7 @@ const rect = $('#box').offset()
 // width(width) - 获取/设置宽度
 const w = $('#box').width()
 $('#box').width('100px')
+$('#box').width('50%')
 
 // height(height) - 获取/设置高度
 const h = $('#box').height()
@@ -203,6 +319,13 @@ $('#box').height('100px')
 
 ### 2.4 内容操作
 
+**功能说明**：
+- 支持获取和设置元素的文本内容
+- 支持获取和设置元素的 HTML 内容
+- 支持获取和设置表单元素的值
+- 支持在元素内部追加或前置内容
+
+**示例**：
 ```javascript
 // text(str) - 获取/设置文本
 const txt = $('#box').text()
@@ -235,6 +358,13 @@ $('#box').remove()
 
 ### 2.5 属性与类名操作
 
+**功能说明**：
+- 支持获取和设置元素属性
+- 支持移除元素属性
+- 支持添加和移除 CSS 类名
+- 支持检查元素是否包含指定类名
+
+**示例**：
 ```javascript
 // attr(name, value) - 获取/设置属性
 const src = $('#img').attr('src')
@@ -246,13 +376,14 @@ $('#box').removeAttr('data-id')
 
 // addClass(name) - 添加类名
 $('#box').addClass('active')
+$('#box').addClass('active hidden')
 
 // removeClass(name) - 移除类名
 $('#box').removeClass('active')
 
 // hasClass(name) - 检查类名
 if ($('#box').hasClass('active')) {
-  // ...
+  console.log('包含 active 类')
 }
 ```
 
@@ -260,6 +391,13 @@ if ($('#box').hasClass('active')) {
 
 ### 2.6 事件操作
 
+**功能说明**：
+- 支持绑定和解绑事件
+- 支持点击、双击、长按等快捷事件
+- 支持主动触发事件
+- 支持焦点获取和失去
+
+**示例**：
 ```javascript
 // bind(eventName, fn, options) - 绑定事件
 $('#box').bind('click', function() {
@@ -295,13 +433,25 @@ $('#box').taping(
 
 ---
 
-## 3. 网络请求
+## 3️⃣ 网络请求
 
 ### 3.1 ajax - AJAX 请求
 
+**功能说明**：
+- 支持 GET 和 POST 请求
+- 支持同步和异步请求
+- 支持自定义请求头
+- 支持上传进度监听
+- 支持取消请求
+
 **使用方式**：
 ```javascript
-$('#').ajax({
+$('#').ajax(config)
+```
+
+**参数说明**：
+```javascript
+{
   url: '/api/data',           // 接口地址
   type: 'get',                // 请求类型：get/post
   async: false,               // 是否异步
@@ -320,7 +470,7 @@ $('#').ajax({
   error: (err) => {           // 失败回调
     console.error(err)
   }
-})
+}
 ```
 
 **示例**：
@@ -363,9 +513,20 @@ window.cancelAjax()
 
 ### 3.2 fetch - Fetch API 封装
 
+**功能说明**：
+- 基于 Fetch API 的简洁封装
+- 支持 GET 和 POST 请求
+- 支持自定义返回数据格式化
+- 返回 Promise 对象
+
 **使用方式**：
 ```javascript
-$('#').fetch({
+$('#').fetch(config)
+```
+
+**参数说明**：
+```javascript
+{
   url: '/api/data',
   type: 'get',              // get/post
   headers: {
@@ -375,7 +536,7 @@ $('#').fetch({
   returnData: (res) => {    // 返回数据格式化
     return res.json()
   }
-})
+}
 ```
 
 **示例**：
@@ -397,41 +558,65 @@ $('#').fetch({
 
 ---
 
-## 4. 表单操作
+## 4️⃣ 表单操作
 
 ### 4.1 serialize - 表单序列化
 
-**说明**：将表单数据转换为对象
+**功能说明**：
+- 自动遍历表单内所有带 `name` 属性的元素
+- 自动处理 input、select、radio、checkbox 等不同类型
+- 返回键值对对象，便于发送到服务器
 
 **示例**：
 ```javascript
 const formData = $('#form').serialize()
-// { username: 'admin', password: '123456' }
+// { username: 'admin', password: '123456', gender: 'male' }
 ```
 
 ---
 
 ### 4.2 setForm - 设置表单值
 
+**功能说明**：
+- 根据对象键名自动匹配表单元素的 `name` 属性
+- 自动处理 input、select、radio、checkbox 等不同类型
+- 快速填充表单数据
+
 **使用方式**：
 ```javascript
+$('#form').setForm(obj)
+```
+
+**示例**：
+```javascript
 $('#form').setForm({
   username: 'admin',
   password: '123456',
-  gender: 'male'      // radio
+  gender: 'male',      // radio
   hobbies: ['reading'] // checkbox
 })
 ```
 
 ---
 
-## 5. 模板渲染
+## 5️⃣ 模板渲染
 
 ### 5.1 Mush - Mustache 模板渲染
 
+**功能说明**：
+- 支持 `{{变量}}` 格式的模板语法
+- 支持数据响应式，数据变化自动更新视图
+- 提供生命周期回调（Init、Update）
+- 简化前端数据绑定操作
+
 **使用方式**：
 ```javascript
-$('#container').Mush({
+$('#container').Mush(config)
+```
+
+**参数说明**：
+```javascript
+{
   data: {                // 渲染数据
     name: '张三',
     age: 18
@@ -442,20 +627,32 @@ $('#container').Mush({
   Update: (data) => {   // 每次更新完成
     console.log('数据更新', data)
   }
-})
+}
 ```
 
-**HTML 模板**：
-```html
+**示例**：
+```javascript
+// HTML 模板
 <div id="container">
   <p>姓名：{{name}}</p>
   <p>年龄：{{age}}</p>
 </div>
-```
 
-**动态更新**：
-```javascript
-// 修改数据会自动更新视图
+// 初始化渲染
+$('#container').Mush({
+  data: {
+    name: '张三',
+    age: 18
+  },
+  Init: (data) => {
+    console.log('初始渲染', data)
+  },
+  Update: (data) => {
+    console.log('数据更新', data)
+  }
+})
+
+// 动态更新（会自动更新视图）
 $('#container').setData({ name: '李四' })
 ```
 
@@ -463,6 +660,12 @@ $('#container').setData({ name: '李四' })
 
 ### 5.2 全局数据管理
 
+**功能说明**：
+- 提供全局数据存储机制
+- 支持设置和获取全局数据
+- 配合 Mush 模板实现数据共享
+
+**示例**：
 ```javascript
 // setData - 设置全局数据
 $('#box').setData({
@@ -478,22 +681,57 @@ const userInfo = $('#box').getData('userInfo')
 
 ### 5.3 template - 模板加载
 
+**功能说明**：
+- 从 `<template>` 标签加载 HTML 模板
+- 支持从远程 URL 加载模板
+- 自动加载关联的 CSS 和 JS 文件
+- 简化页面组件化管理
+
 **使用方式**：
 ```javascript
-$('#container').template('home', document.body)
+$('#container').template(route, container)
 ```
 
-**HTML 模板定义**：
-```html
+**示例**：
+```javascript
+// HTML 模板定义
 <template route="home" src="/templates/home.html"></template>
+
+// 加载模板
+$('#container').template('home', document.body)
 ```
 
 ---
 
-## 6. 路由 - Router
+## 6️⃣ 路由 - Router
+
+**功能说明**：
+- 基于 History API 实现单页应用路由
+- 支持路由参数传递
+- 自动处理 `<a>` 标签点击事件
+- 支持路由回调函数
 
 **使用方式**：
 ```javascript
+$('#app').Router(config)
+```
+
+**参数说明**：
+```javascript
+{
+  routes: [
+    {
+      path: '/',
+      component: '/pages/home.html',
+      callback: (state) => console.log('首页', state)
+    }
+  ]
+}
+```
+
+**示例**：
+```javascript
+// 初始化路由
 $('#app').Router({
   routes: [
     {
@@ -512,15 +750,29 @@ $('#app').Router({
 // 跳转路由
 $('#app').to('/about')
 $('#app').to('/about?id=123')
+
+// 带参数跳转
+$('#app').to('/detail?pid=123&name=test')
 ```
 
 ---
 
-## 7. 轮播图 - Switcher
+## 7️⃣ 轮播图 - Switcher
+
+**功能说明**：
+- 支持滑动和淡入淡出两种切换效果
+- 支持触摸手势和鼠标滚轮控制
+- 支持自动播放和循环模式
+- 支持分页器和悬浮暂停
 
 **使用方式**：
 ```javascript
-$('#slider').Switcher({
+$('#slider').Switcher(config)
+```
+
+**参数说明**：
+```javascript
+{
   Speed: 1,              // 过渡速度(秒)
   Curve: 'ease',         // 动画曲线
   Effect: 'slider',      // 切换效果：slider/fade
@@ -535,6 +787,23 @@ $('#slider').Switcher({
   Loop: true,            // 循环
   onChange: (index) => console.log('切换到', index),
   AutoResize: true       // 窗口变化自动调整
+}
+```
+
+**示例**：
+```javascript
+$('#slider').Switcher({
+  Speed: 1,
+  Curve: 'ease',
+  Effect: 'slider',
+  Direction: 'horizontal',
+  AutoSpeed: 3,
+  Pagination: true,
+  Hover: true,
+  Loop: true,
+  onChange: (index) => {
+    console.log('切换到', index)
+  }
 })
 
 // 控制方法
@@ -556,11 +825,21 @@ $('#slider').enable()    // 启用
 
 ---
 
-## 8. 响应式 - AutoSize
+## 8️⃣ 响应式 - AutoSize
+
+**功能说明**：
+- 自动计算并设置 `<meta name="viewport">`
+- 根据屏幕尺寸设置根元素字体大小
+- 支持窗口变化时重新计算
 
 **使用方式**：
 ```javascript
-$('#').AutoSize({
+$('#').AutoSize(config)
+```
+
+**参数说明**：
+```javascript
+{
   PageSize: 'device-width', // 固定尺寸
   InitScale: 1,             // 初始缩放
   MinScale: 1,              // 最小缩放
@@ -568,16 +847,37 @@ $('#').AutoSize({
   Ratio: window.devicePixelRatio, // DPI缩放
   Resize: true,             // 窗口变化重新计算
   ScaleFont: true           // 缩放字体大小
+}
+```
+
+**示例**：
+```javascript
+$('#').AutoSize({
+  PageSize: 'device-width',
+  Ratio: window.devicePixelRatio,
+  Resize: true,
+  ScaleFont: true
 })
 ```
 
 ---
 
-## 9. 弹框 - Dialog
+## 9️⃣ 弹框 - Dialog
+
+**功能说明**：
+- 创建遮罩层和弹框元素
+- 支持多种进出动画效果（无、缩放、从上/下方进入）
+- 支持点击遮罩关闭
+- 支持确认和取消按钮回调
 
 **使用方式**：
 ```javascript
-$('#dialog').Dialog({
+$('#dialog').Dialog(config)
+```
+
+**参数说明**：
+```javascript
+{
   mask: true,               // 显示遮罩
   maskColor: 'rgba(0,0,0,.85)',
   maskOut: true,            // 点击遮罩退出
@@ -600,6 +900,29 @@ $('#dialog').Dialog({
       close()
     }
   }
+}
+```
+
+**示例**：
+```javascript
+$('#dialog').Dialog({
+  mask: true,
+  maskOut: true,
+  Direction: 'zoom',
+  Confirm: {
+    btn: '.confirm-btn',
+    callback: ({ close }) => {
+      console.log('确认')
+      close()
+    }
+  },
+  Cancel: {
+    btn: '.cancel-btn',
+    callback: ({ close }) => {
+      console.log('取消')
+      close()
+    }
+  }
 })
 
 // 打开弹框
@@ -620,13 +943,24 @@ $('#dialog').close()
 
 ---
 
-## 10. 图片处理
+## 🔟 图片处理
 
 ### 10.1 ImgLoader - 图片预加载
 
+**功能说明**：
+- 自动解析 HTML 获取所有图片地址
+- 使用 `Promise.all` 批量加载图片
+- 支持 CSS 背景图加载
+- 支持容器内和全局两种模式
+
 **使用方式**：
 ```javascript
-$('#container').ImgLoader({
+$('#container').ImgLoader(config)
+```
+
+**参数说明**：
+```javascript
+{
   lazy: true,               // 渐进式
   loading: (progress) => {  // 加载进度
     console.log(progress + '%')
@@ -637,6 +971,30 @@ $('#container').ImgLoader({
   error: (err) => {         // 加载错误
     console.error(err)
   }
+}
+```
+
+**示例**：
+```javascript
+// 容器内图片预加载
+$('#container').ImgLoader({
+  lazy: true,
+  loading: (progress) => {
+    showLoading(`加载中 ${progress}%`)
+  },
+  callback: () => {
+    hideLoading()
+  },
+  error: (err) => {
+    alert('加载失败')
+  }
+})
+
+// 全局图片预加载
+$().ImgLoader({
+  lazy: false,
+  loading: (progress) => console.log(progress + '%'),
+  callback: () => console.log('加载完成')
 })
 ```
 
@@ -644,9 +1002,20 @@ $('#container').ImgLoader({
 
 ### 10.2 ImgUpload - 图片上传
 
+**功能说明**：
+- 使用 `FormData` 上传文件
+- 支持图片压缩和尺寸裁切
+- 支持拖拽上传
+- 支持多文件上传
+
 **使用方式**：
 ```javascript
-$('#upload').ImgUpload({
+$('#upload').ImgUpload(config)
+```
+
+**参数说明**：
+```javascript
+{
   apiUrl: '/api/upload',    // 接口地址
   Format: '*',              // 格式限制：jpg/png/gif/*
   type: 'default',          // 选择类型：default/camera
@@ -665,6 +1034,27 @@ $('#upload').ImgUpload({
     fail: () => console.log('上传失败')
   },
   Uid: 'user_123'           // 唯一ID
+}
+```
+
+**示例**：
+```javascript
+$('#upload').ImgUpload({
+  apiUrl: '/api/upload',
+  Max: 5,
+  Quality: 80,
+  Events: {
+    ready: () => showLoading(),
+    progress: (p) => showLoading(`上传中 ${p}%`),
+    success: (data) => {
+      hideLoading()
+      $('#preview').append(`<img src="${data.src}">`)
+    },
+    fail: () => {
+      hideLoading()
+      alert('上传失败')
+    }
+  }
 })
 ```
 
@@ -679,9 +1069,20 @@ $('#upload').ImgUpload({
 
 ### 10.3 ImgTransit - 图片移动缩放
 
+**功能说明**：
+- 支持图片移动、缩放、旋转操作
+- 支持多点触控手势
+- 支持边界限制
+- 提供控制图标和边框显示
+
 **使用方式**：
 ```javascript
-$('#container').ImgTransit({
+$('#container').ImgTransit(config)
+```
+
+**参数说明**：
+```javascript
+{
   icon: true,               // 显示控制图标
   iconSize: 30,             // 图标大小
   border: true,             // 显示边框
@@ -703,6 +1104,20 @@ $('#container').ImgTransit({
   callback: (data) => {     // 操作回调
     console.log(data.type, data.obj)
   }
+}
+```
+
+**示例**：
+```javascript
+$('#container').ImgTransit({
+  icon: true,
+  scale: { enable: true, min: 50, max: 200 },
+  rotate: { enable: true },
+  delete: true,
+  bounds: true,
+  callback: (data) => {
+    console.log('操作类型:', data.type)
+  }
 })
 ```
 
@@ -718,12 +1133,31 @@ $('#container').ImgTransit({
 
 ### 10.4 LazyLoad - 懒加载
 
+**功能说明**：
+- 监听滚动事件检测元素位置
+- 当图片进入视口时延迟加载
+- 支持自定义缺省尺寸和图标
+
 **使用方式**：
 ```javascript
-$('#container').LazyLoad({
+$('#container').LazyLoad(config)
+```
+
+**参数说明**：
+```javascript
+{
   width: 100,               // 缺省尺寸
   height: 100,
   icon: '/loader.svg'       // 缺省图标
+}
+```
+
+**示例**：
+```javascript
+$('#container').LazyLoad({
+  width: 200,
+  height: 150,
+  icon: '/loader.svg'
 })
 ```
 
@@ -737,11 +1171,21 @@ $('#container').LazyLoad({
 
 ---
 
-## 11. 微信 SDK - wxSDK
+## 1️⃣1️⃣ 微信 SDK - wxSDK
+
+**功能说明**：
+- 动态加载微信 JS-SDK
+- 配置微信分享参数
+- 支持服务端签名
 
 **使用方式**：
 ```javascript
-$('#').wxSDK({
+$('#').wxSDK(config)
+```
+
+**参数说明**：
+```javascript
+{
   apiUrl: '/api/wechat/sign', // 获取签名接口
   sdk: 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js',
   title: ['分享至朋友圈', '分享至好友'],
@@ -756,30 +1200,76 @@ $('#').wxSDK({
     success: () => console.log('分享成功'),
     error: () => console.log('分享失败')
   }
+}
+```
+
+**示例**：
+```javascript
+$('#').wxSDK({
+  apiUrl: '/api/wechat/sign',
+  title: ['分享标题', '分享标题'],
+  desc: '分享描述',
+  shareIcon: 'https://example.com/icon.jpg',
+  shareLinks: window.location.href,
+  debug: false,
+  jsApiList: ['chooseImage', 'previewImage'],
+  callback: {
+    ready: () => console.log('分享就绪'),
+    success: () => console.log('分享成功'),
+    error: () => console.log('分享失败')
+  }
 })
 ```
 
 ---
 
-## 12. OSS 上传 - ossUpload
+## 1️⃣2️⃣ OSS 上传 - ossUpload
+
+**功能说明**：
+- 使用阿里云 OSS 客户端签名上传
+- 支持文件大小限制
+- 支持上传进度监听
 
 **使用方式**：
 ```javascript
-const uploader = $('#').ossUpload({
+const uploader = $('#').ossUpload(config)
+uploader.start(options)
+```
+
+**参数说明**：
+```javascript
+{
   AccessId: 'your-access-id',
   AccessKey: 'your-access-key',
   Endpoint: 'https://bucket.oss-cn-hangzhou.aliyuncs.com',
   maxSize: 2  // MB
-})
+}
 
-// 上传文件
-uploader.start({
+// start 参数
+{
   fileObj: file,
   fileName: 'image',
   dirName: 'images',
   headers: null,
   async: true,
   progress: (p) => console.log(p + '%')
+}
+```
+
+**示例**：
+```javascript
+const uploader = $('#').ossUpload({
+  AccessId: 'your-access-id',
+  AccessKey: 'your-access-key',
+  Endpoint: 'https://bucket.oss-cn-hangzhou.aliyuncs.com',
+  maxSize: 2
+})
+
+uploader.start({
+  fileObj: file,
+  fileName: 'image',
+  dirName: 'images',
+  progress: (p) => console.log(p + '%')
 }).then(res => {
   console.log('上传成功', res.url)
 }).catch(err => {
@@ -789,18 +1279,29 @@ uploader.start({
 
 ---
 
-## 13. 工具方法
+## 1️⃣3️⃣ 工具方法
 
 ### 13.1 guid - 生成唯一ID
 
+**功能说明**：
+- 生成 UUID 格式的唯一标识符
+- 每个实例自动分配唯一 ID
+
+**示例**：
 ```javascript
 $('#box').pid  // 获取当前实例的GUID
+// 例如: PandoraEX_3a4b-5c6d-7e8f-9a0b-1c2d3e4f5a6b
 ```
 
 ---
 
 ### 13.2 extend - 对象合并
 
+**功能说明**：
+- 将默认配置与用户配置合并
+- 实现配置对象的扩展
+
+**示例**：
 ```javascript
 const config = $('#box').extend({ a: 1 }, { b: 2 })
 // { a: 1, b: 2 }
@@ -810,6 +1311,11 @@ const config = $('#box').extend({ a: 1 }, { b: 2 })
 
 ### 13.3 getParams - URL参数解析
 
+**功能说明**：
+- 解析 URL 查询字符串
+- 返回键值对对象
+
+**示例**：
 ```javascript
 const params = $('#box').getParams()
 // URL: ?id=123&name=test
@@ -820,6 +1326,10 @@ const params = $('#box').getParams()
 
 ### 13.4 Array - 数组工具
 
+**功能说明**：
+- 提供数组随机打乱、判断重复、求和等常用操作
+
+**示例**：
 ```javascript
 // 随机打乱
 const shuffled = $('#box').Array.Random()
@@ -833,7 +1343,7 @@ const sum = $('#box').Array.Sum()
 
 ---
 
-## 14. 全局配置
+## 1️⃣4️⃣ 全局配置
 
 ### 禁用原生重写
 
@@ -844,7 +1354,7 @@ window.resetConfirm = false // 禁用 confirm 重写
 
 ---
 
-## 15. 最佳实践示例
+## 1️⃣5️⃣ 最佳实践示例
 
 ### 15.1 完整的 CRUD 操作
 
@@ -1010,7 +1520,7 @@ $('.nav-item').click((el) => {
 
 ---
 
-## 注意事项
+## 📝 注意事项
 
 1. **浏览器兼容性**：支持现代浏览器，需要 ES6 支持
 2. **依赖文件**：需要 `base64.js` 和 `icoConfig.json`
@@ -1020,4 +1530,10 @@ $('.nav-item').click((el) => {
 
 ---
 
-*文档版本：1.0.0*
\ No newline at end of file
+## 📄 许可证
+
+详见 LICENSE 文件
+
+---
+
+*文档版本：2.0.0*
\ No newline at end of file