@umbsoft/avue 3.8.3-beta.4 → 3.8.3-beta.43

package/README.md

@@ -1,86 +1,2192 @@
-<p align="center"><a href="https://avuejs.com" target="_blank" rel="noopener noreferrer"><img width="100" src="https://avuejs.com/images/logo.png" alt="Avue logo"></a></p>
+# Avue.js (@umbsoft/avue)
 
-<p align="center">
-  <a href="https://gitee.com/smallweigit/avue/stargazers"><img src="https://gitee.com/smallweigit/avue/badge/star.svg?theme=dark" alt="star"></a>
-  <a href="https://gitee.com/smallweigit/avue/members"><img src="https://gitee.com/smallweigit/avue/badge/fork.svg?theme=dark" alt="fork"></a>
-  <a href="https://gitee.com/smallweigit/avue"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="license"></a>
-  <a href="https://gitee.com/smallweigit/avue"><img src="https://img.shields.io/badge/version-3.0.0-blue.svg" alt="version"></a>
-</p>
+> 基于 Element-Plus 的低代码前端框架，二次开发版本 v3.8.3-beta.4
+> 去掉了 `avue-crud` 组件，新增了 `avue-transfer` 穿梭框组件
 
-# Avue.js
+## 项目结构
 
-Avue.js 是基于现有的 element-plus 库进行的二次封装，从而简化一些繁琐的操作，核心理念为**数据驱动视图**。主要的组件库针对 table 表格和 form 表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富的数据展示组件，让开发变得更加容易。
-
-## ✨ 特性
+```
+avue/
+├── packages/
+│   ├── core/              # 核心代码
+│   │   ├── components/   # 核心组件（form、dialog-form、icon、image-preview）
+│   │   ├── common/        # 公共混入（props、event、init）
+│   │   └── directive/     # 指令
+│   ├── data/              # 数据展示组件（26个）
+│   └── element-plus/       # 表单及输入组件（44个）
+├── src/
+│   ├── core/              # 核心模块
+│   ├── global/            # 全局变量（字典属性、HTTP属性、类型列表）
+│   ├── locale/            # 国际化
+│   ├── plugin/            # 插件（ali、clipboard、export、logs、print、qiniu、screenshot、video、watermark）
+│   ├── ui/                # UI 相关
+│   ├── utils/             # 工具函数（bem、identity、mock、util、validate）
+│   ├── icon.js            # 图标配置
+│   ├── index.js           # 主入口
+│   └── version.js         # 版本信息
+├── examples/              # 示例代码
+├── build/                # 构建脚本
+└── styles/               # 样式文件
+```
 
-- 🚀 **高效开发**：基于数据驱动视图的理念，大大减少了代码量
-- 📦 **开箱即用**：丰富的表格、表单配置及多种常用组件
-- 🛠️ **强大定制**：高度灵活的配置项，满足各种复杂场景需求
-- 🔌 **扩展性强**：支持自定义组件和多种交互方式
-- 📚 **详尽文档**：完善的文档和示例，快速上手无烦恼
+---
 
-## 🔧 安装
+## 安装
 
 ```bash
-# 使用 pnpm 安装（推荐）
-pnpm add @smallwei/avue
+# 使用 pnpm（推荐）
+pnpm add @umbsoft/avue
 
-# 或使用 npm 安装
-npm install @smallwei/avue
+# 或使用 npm
+npm install @umbsoft/avue
 
-# 或使用 yarn 安装
-yarn add @smallwei/avue
+# 或使用 yarn
+yarn add @umbsoft/avue
 ```
 
-## 📦 使用
+---
+
+## 快速使用
 
-```js
-// 完整引入
+### 完整引入
+
+```javascript
 import { createApp } from 'vue'
-import Avue from '@smallwei/avue'
-import '@smallwei/avue/dist/avue.css'
-import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import Avue from '@umbsoft/avue'
+import '@umbsoft/avue/lib/index.css'
+
+const app = createApp({})
+
+// 注册所有图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 
-const app = createApp(App)
+app.use(ElementPlus)
 app.use(Avue)
+
 app.mount('#app')
 ```
 
-## 📄 文件说明
+### 引入 axios（用于字典和上传功能）
+
+```javascript
+import axios from 'axios'
+
+app.use(Avue, { axios })
+```
+
+---
+
+## 核心组件
+
+### 1. avue-form（动态表单）
+
+动态表单是 Avue 的核心组件，通过 JSON 配置生成表单页面。
+
+#### 基本用法
+
+```vue
+<template>
+  <avue-form
+    ref="formRef"
+    v-model="formData"
+    :option="formOption"
+    @submit="handleSubmit"
+    @reset-change="handleReset"
+  />
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+const formData = reactive({})
+
+const formOption = reactive({
+  labelWidth: 120,
+  column: [
+    {
+      label: '用户名',
+      prop: 'username',
+      type: 'input',
+      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+    },
+    {
+      label: '邮箱',
+      prop: 'email',
+      type: 'input'
+    }
+  ]
+})
+
+const handleSubmit = (form, done) => {
+  console.log('提交数据:', form)
+  done() // 调用 done() 表示完成，可关闭 loading
+}
+
+const handleReset = () => {
+  console.log('表单已重置')
+}
+</script>
+```
+
+#### Props 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `v-model` | `Object` | `{}` | 表单数据对象 |
+| `option` | `Object` | `{}` | 表单配置项 |
+| `status` | `Boolean` | `false` | 提交状态 |
+
+#### Option 配置项
+
+| 配置项 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `column` | `Array` | - | 表单字段配置数组 |
+| `group` | `Array` | - | 分组配置数组 |
+| `footer` | `Array` | - | 底部字段配置 |
+| `labelPosition` | `String` | `'left'` | 标签位置（left/right/top） |
+| `labelWidth` | `Number/String` | `90` | 标签宽度 |
+| `labelSuffix` | `String` | `:` | 标签后缀 |
+| `size` | `String` | - | 组件尺寸（large/default/small） |
+| `span` | `Number` | `12` | 栅格占位（24栏制） |
+| `gutter` | `Number` | `0` | 栅格间距 |
+| `disabled` | `Boolean` | - | 禁用所有表单 |
+| `readonly` | `Boolean` | - | 只读所有表单 |
+| `detail` | `Boolean` | - | 详情展示模式 |
+| `tabs` | `Boolean` | `false` | 开启 Tab 分组模式 |
+| `tabsType` | `String` | - | Tab 类型 |
+| `tabsActive` | `String/Number` | `'1'` | 默认激活的 Tab |
+| `tabsVerifyAll` | `Boolean` | `true` | Tab 内全部验证 |
+| `menuBtn` | `Boolean` | `true` | 显示按钮区域 |
+| `menuSpan` | `Number` | `24` | 按钮区域栅格 |
+| `menuPosition` | `String` | `'center'` | 按钮位置（left/center/right） |
+| `submitBtn` | `Boolean` | `true` | 显示提交按钮 |
+| `submitText` | `String` | `'提交'` | 提交按钮文本 |
+| `submitIcon` | `String` | `'el-icon-check'` | 提交按钮图标 |
+| `emptyBtn` | `Boolean` | `true` | 显示重置按钮 |
+| `emptyText` | `String` | `'清空'` | 重置按钮文本 |
+| `emptyIcon` | `String` | `'el-icon-delete'` | 重置按钮图标 |
+| `printBtn` | `Boolean` | `false` | 显示打印按钮 |
+| `mockBtn` | `Boolean` | `false` | 显示模拟按钮 |
+| `statusIcon` | `Boolean` | - | 显示状态图标 |
+| `scrollToError` | `Boolean` | - | 验证失败时滚动到错误字段 |
+| `hideRequiredAsterisk` | `Boolean` | - | 隐藏必填星号 |
+| `filterNull` | `Boolean` | `false` | 提交时过滤空值 |
+| `filterDic` | `Boolean` | `false` | 提交时过滤字典值 |
+| `filterParams` | `Array` | - | 过滤指定参数 |
+| `enter` | `Boolean` | `false` | 回车提交表单 |
+
+#### Column 字段配置
+
+| 配置项 | 类型 | 说明 |
+|--------|------|------|
+| `label` | `String` | 字段标签 |
+| `prop` | `String` | 字段名 |
+| `type` | `String` | 字段类型 |
+| `span` | `Number` | 栅格占位 |
+| `offset` | `Number` | 栅格偏移 |
+| `push` | `Number` | 栅格推移 |
+| `pull` | `Number` | 栅格拉取 |
+| `order` | `Number` | 栅格顺序 |
+| `rules` | `Array` | 验证规则 |
+| `disabled` | `Boolean` | 禁用字段 |
+| `readonly` | `Boolean` | 只读字段 |
+| `clearable` | `Boolean` | `true` | 显示清除按钮 |
+| `placeholder` | `String` | 占位符 |
+| `tip` | `String` | 字段提示 |
+| `display` | `Boolean` | 是否显示 |
+| `addDisabled` | `Boolean` | 新增时禁用 |
+| `editDisabled` | `Boolean` | 编辑时禁用 |
+| `addDisplay` | `Boolean` | 新增时显示 |
+| `editDisplay` | `Boolean` | 编辑时显示 |
+| `dicData` | `Array` | 本地字典数据 |
+| `dicUrl` | `String` | 远程字典接口 |
+| `dicMethod` | `String` | 字典请求方法 |
+| `dicQuery` | `Object` | 字典请求参数 |
+| `props` | `Object` | 字典属性映射 |
+| `propsHttp` | `Object` | HTTP 响应属性映射 |
+| `cascader` | `Array` | 级联字段 |
+| `control` | `Function` | 字段联动控制 |
+| `blur` | `Function` | 失焦回调 |
+| `focus` | `Function` | 聚焦回调 |
+| `change` | `Function` | 值变化回调 |
+| `click` | `Function` | 点击回调 |
+| `drag` | `Boolean` | 拖拽排序 |
+
+#### 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `submit` | `(form, hide)` | 表单提交。`hide` 为关闭 loading 的函数，调用 `hide()` 关闭 |
+| `reset-change` | - | 表单重置后触发 |
+| `mock-change` | `(form)` | 模拟数据填充后触发 |
+| `tab-click` | `(activeNames)` | Tab 切换时触发 |
+| `error` | `(msg)` | 表单验证失败时触发 |
+| `change` | `(form)` | 表单数据变化时触发 |
+
+#### 方法（通过 ref 调用）
+
+| 方法名 | 参数 | 说明 |
+|--------|------|------|
+| `validate()` | `callback` | 验证整个表单 |
+| `validateField()` | `prop, callback` | 验证指定字段 |
+| `resetFields()` | - | 重置所有字段 |
+| `resetForm()` | `reset?` | 重置表单数据 |
+| `clearValidate()` | `props?` | 清除验证状态 |
+| `getField()` | `prop` | 获取指定字段值 |
+| `fields()` | - | 获取所有字段 |
+| `getPropRef()` | `prop` | 获取字段组件的引用 |
+| `submit()` | - | 手动提交表单 |
+| `show()` | - | 显示 loading |
+| `hide()` | - | 隐藏 loading |
+| `scrollToField()` | `prop` | 滚动到指定字段 |
+
+#### 插槽
+
+| 插槽名 | 作用域数据 | 说明 |
+|--------|-----------|------|
+| `tabs` | `{column}` | Tab 页签自定义 |
+| `header` | `{column}` | 分组头部自定义 |
+| `menu-form-before` | `{disabled, size}` | 按钮区域前 |
+| `menu-form` | `{disabled, size}` | 按钮区域 |
+| `[prop]-form` | `{column, value, readonly, disabled, size, dic}` | 字段自定义组件 |
+| `[prop]-label` | `{column, value, readonly, disabled, size, dic}` | 字段标签自定义 |
+| `[prop]-error` | `{error, column, value, readonly, disabled, size, dic}` | 字段错误提示自定义 |
+| `[prop]-type` | - | 字段类型插槽 |
+
+#### 分组表单示例
+
+```javascript
+const option = {
+  tabs: true,
+  column: [
+    {
+      label: '基本信息',
+      prop: 'base',
+      column: [
+        { label: '姓名', prop: 'name', type: 'input' },
+        { label: '年龄', prop: 'age', type: 'number' }
+      ]
+    },
+    {
+      label: '详细信息',
+      prop: 'detail',
+      column: [
+        { label: '地址', prop: 'address', type: 'input' },
+        { label: '电话', prop: 'phone', type: 'input' }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+### 2. avue-transfer（穿梭框）
+
+穿梭框组件，用于在两个列表之间移动数据。
+
+#### 基本用法
+
+```vue
+<template>
+  <avue-transfer
+    v-model="selectedData"
+    :dic="allData"
+    :option="transferOption"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const selectedData = ref([])
+const allData = ref([
+  { label: '选项1111111111111111111', value: 1 },
+  { label: '选项2', value: 2 },
+  { label: '选项3', value: 3 }
+])
+
+const transferOption = reactive({
+  titles: ['可选列表', '已选列表'],
+  filterable: true,
+  filterPlaceholder: '输入关键字搜索'
+})
+
+const handleChange = (value, direction, movedKeys) => {
+  console.log('选中值:', value)
+  console.log('操作方向:', direction) // 'left' 或 'right'
+  console.log('移动的key:', movedKeys)
+}
+</script>
+```
+
+#### Props 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `v-model` | `Array` | - | 双向绑定值（选中的选项） |
+| `dic` | `Array` | `[]` | 数据源 |
+| `option` | `Object` | `{}` | 配置项 |
+| `titles` | `Array` | `[]` | 左右面板标题 |
+| `filterable` | `Boolean` | `false` | 是否可搜索 |
+| `filterPlaceholder` | `String` | - | 搜索框占位符 |
+| `filterMethod` | `Function` | - | 自定义搜索方法 |
+| `targetOrder` | `String` | `'original'` | 目标面板排序方式 |
+| `format` | `Object` | `{}` | 格式配置 |
+| `leftDefaultChecked` | `Array` | `[]` | 左侧默认选中 |
+| `rightDefaultChecked` | `Array` | `[]` | 右侧默认选中 |
+| `disabled` | `Boolean` | `false` | 禁用状态 |
+
+#### Option 配置
+
+| 配置项 | 类型 | 说明 |
+|--------|------|------|
+| `titles` | `Array` | 左右面板标题 |
+| `filterable` | `Boolean` | 开启搜索 |
+| `filterPlaceholder` | `String` | 搜索占位符 |
+| `targetOrder` | `String` | `'original'` 或 `'push'` |
+| `props` | `Object` | 数据属性映射 `{label, value}` |
+
+#### 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `change` | `(value, direction, movedKeys)` | 值变化时触发 |
+| `click` | `params` | 点击事件 |
+| `focus` | `params` | 聚焦事件 |
+| `blur` | `params` | 失焦事件 |
+
+---
+
+### 3. avue-tree（树形控件）
+
+树形结构展示和操作组件。
+
+#### 基本用法
+
+```vue
+<template>
+  <avue-tree
+    ref="treeRef"
+    :option="treeOption"
+    :data="treeData"
+    @node-click="handleNodeClick"
+  />
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const treeRef = ref()
+const treeData = ref([
+  { label: '一级 1', children: [{ label: '二级 1-1' }] },
+  { label: '一级 2', children: [{ label: '二级 2-1' }] }
+])
+
+const treeOption = reactive({
+  filter: true,
+  addBtn: true,
+  editBtn: true,
+  delBtn: true,
+  props: { label: 'label', children: 'children' }
+})
+
+const handleNodeClick = (data, node, nodeComp) => {
+  console.log('点击的节点:', data)
+}
+</script>
+```
+
+#### Props 属性
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| `option` | `Object` | 树配置项（必填） |
+| `data` | `Array` | 树数据 |
+| `modelValue` | `Any` | 双向绑定值 |
+
+#### Option 配置
+
+| 配置项 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `filter` | `Boolean` | `true` | 显示搜索框 |
+| `filterText` | `String` | `'输入关键字进行过滤'` | 搜索占位符 |
+| `addBtn` | `Boolean` | `true` | 显示添加按钮 |
+| `editBtn` | `Boolean` | `true` | 显示编辑按钮 |
+| `delBtn` | `Boolean` | `true` | 显示删除按钮 |
+| `menu` | `Boolean` | `true` | 显示右键菜单 |
+| `draggable` | `Boolean` | - | 启用拖拽 |
+| `height` | `Number/String` | - | 固定高度 |
+| `accordion` | `Boolean` | - | 手风琴模式 |
+| `checkStrictly` | `Boolean` | - | 勾选严格模式 |
+| `multiple` | `Boolean` | - | 多选模式 |
+| `lazy` | `Boolean` | - | 懒加载模式 |
+| `treeLoad` | `Function` | - | 懒加载方法 |
+| `props` | `Object` | - | 属性映射 `{label, children, disabled}` |
+| `formOption` | `Object` | - | 表单弹窗配置 |
+| `dialogWidth` | `String` | `'50%'` | 弹窗宽度 |
+| `defaultExpandAll` | `Boolean` | - | 默认全部展开 |
+| `defaultExpandedKeys` | `Array` | - | 默认展开的节点 |
+| `virtualize` | `Boolean` | - | 虚拟滚动 |
+
+#### 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `node-click` | `(data, node, nodeComp)` | 节点点击 |
+| `check-change` | `(data, checked, indeterminate)` | 勾选变化 |
+| `node-expand` | `(data, node, nodeComp)` | 节点展开 |
+| `node-contextmenu` | `(data, node, obj)` | 右键点击 |
+| `node-drag-start` | `(node, ev)` | 拖拽开始 |
+| `node-drag-enter` | `(draggingNode, dropNode, ev)` | 拖拽进入 |
+| `node-drag-leave` | `(draggingNode, dropNode, ev)` | 拖拽离开 |
+| `node-drag-over` | `(draggingNode, dropNode, ev)` | 拖拽经过 |
+| `node-drag-end` | `(draggingNode, dropNode, dropType, ev)` | 拖拽结束 |
+| `node-drop` | `(draggingNode, dropNode, dropType, ev)` | 拖拽放下 |
+| `save` | `(node, data, callback, done)` | 保存节点 |
+| `update` | `(node, data, callback, done)` | 更新节点 |
+| `del` | `(node, callback)` | 删除节点 |
+
+#### 方法（通过 ref 调用）
+
+| 方法名 | 参数 | 说明 |
+|--------|------|------|
+| `filter(val)` | 搜索值 | 过滤节点 |
+| `updateKeyChildren(key, data)` | key, data | 更新子节点 |
+| `getCheckedNodes(leafOnly)` | - | 获取选中的节点 |
+| `setCheckedNodes(nodes)` | nodes | 设置选中的节点 |
+| `getCheckedKeys(leafOnly)` | - | 获取选中的 key |
+| `setCheckedKeys(keys)` | keys | 设置选中的 key |
+| `setChecked(key, checked)` | key, checked | 设置节点选中状态 |
+| `getHalfCheckedNodes()` | - | 获取半选节点 |
+| `getHalfCheckedKeys()` | - | 获取半选 key |
+| `getCurrentKey()` | - | 获取当前节点 key |
+| `getCurrentNode()` | - | 获取当前节点 |
+| `setCurrentKey(key)` | key | 设置当前节点 |
+| `setCurrentNode(node)` | node | 设置当前节点 |
+| `getNode(key)` | key | 获取节点对象 |
+| `remove(data)` | data | 删除节点 |
+| `append(data, parentNode)` | data, parentNode | 添加子节点 |
+| `insertBefore(data, refNode)` | data, refNode | 在节点前插入 |
+| `insertAfter(data, refNode)` | data, refNode | 在节点后插入 |
+
+#### 插槽
+
+| 插槽名 | 作用域数据 | 说明 |
+|--------|-----------|------|
+| `default` | `{node, data}` | 节点内容自定义 |
+| `add-btn` | - | 添加按钮插槽 |
+| `menu` | `{node}` | 右键菜单插槽 |
+
+---
+
+## 字段类型
+
+### 输入类
+
+#### input（文本输入）
+
+```javascript
+{
+  label: '用户名',
+  prop: 'username',
+  type: 'input',
+  // 子类型
+  component: 'input',
+  // 子类型可选值
+  // input | password | textarea | phone | currency | bankCard | idCard | email | code | plate | ip | mac | uscc
+}
+```
+
+#### number（数字输入）
+
+```javascript
+{
+  label: '数量',
+  prop: 'count',
+  type: 'number',
+  precision: 2,      // 精度
+  step: 1,           // 步长
+  min: 0,            // 最小值
+  max: 100           // 最大值
+}
+```
+
+#### textarea（多行文本）
+
+```javascript
+{
+  label: '描述',
+  prop: 'description',
+  type: 'input',
+  component: 'textarea',
+  minRows: 3,
+  maxRows: 6
+}
+```
+
+### 选择类
+
+#### select（下拉选择）
+
+```javascript
+{
+  label: '状态',
+  prop: 'status',
+  type: 'select',
+  dicData: [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 }
+  ],
+  // 或远程字典
+  dicUrl: '/api/dict/status',
+  multiple: false,    // 多选
+  filterable: false,  // 可搜索
+  clearable: true
+}
+```
+
+#### cascader（级联选择）
+
+```javascript
+{
+  label: '地区',
+  prop: 'region',
+  type: 'cascader',
+  dicData: [
+    { label: '浙江', value: 1, children: [
+      { label: '杭州', value: 11 },
+      { label: '宁波', value: 12 }
+    ]}
+  ],
+  props: { label: 'label', value: 'value', children: 'children' }
+}
+```
+
+#### tree（树形选择）
+
+```javascript
+{
+  label: '部门',
+  prop: 'dept',
+  type: 'tree',
+  dicData: treeData,
+  props: { label: 'label', value: 'id' },
+  multiple: false,
+  clearable: true
+}
+```
+
+#### checkbox（多选框）
+
+```javascript
+{
+  label: '爱好',
+  prop: 'hobby',
+  type: 'checkbox',
+  dicData: [
+    { label: '足球', value: 'football' },
+    { label: '篮球', value: 'basketball' },
+    { label: '游泳', value: 'swimming' }
+  ]
+}
+```
+
+#### radio（单选框）
+
+```javascript
+{
+  label: '性别',
+  prop: 'gender',
+  type: 'radio',
+  dicData: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ]
+}
+```
+
+#### transfer（穿梭框）
+
+```javascript
+{
+  label: '权限',
+  prop: 'permissions',
+  type: 'transfer',
+  dicData: allPermissions,
+  props: { label: 'label', value: 'id' },
+  titles: ['可选权限', '已选权限']
+}
+```
+
+### 日期时间类
+
+#### date（日期）
+
+```javascript
+{
+  label: '日期',
+  prop: 'date',
+  type: 'date',
+  format: 'YYYY-MM-DD',
+  valueFormat: 'YYYY-MM-DD',
+  placeholder: '选择日期'
+}
+```
+
+#### datetime（日期时间）
+
+```javascript
+{
+  label: '时间',
+  prop: 'datetime',
+  type: 'datetime',
+  format: 'YYYY-MM-DD HH:mm:ss',
+  valueFormat: 'YYYY-MM-DD HH:mm:ss'
+}
+```
+
+#### daterange（日期范围）
+
+```javascript
+{
+  label: '日期范围',
+  prop: 'daterange',
+  type: 'daterange',
+  format: 'YYYY-MM-DD',
+  valueFormat: 'YYYY-MM-DD',
+  startPlaceholder: '开始日期',
+  endPlaceholder: '结束日期'
+}
+```
+
+#### datetimerange（日期时间范围）
+
+```javascript
+{
+  label: '时间范围',
+  prop: 'datetimerange',
+  type: 'datetimerange',
+  format: 'YYYY-MM-DD HH:mm:ss',
+  valueFormat: 'YYYY-MM-DD HH:mm:ss'
+}
+```
+
+#### time（时间）
+
+```javascript
+{
+  label: '时间',
+  prop: 'time',
+  type: 'time',
+  format: 'HH:mm:ss'
+}
+```
+
+#### timerange（时间范围）
+
+```javascript
+{
+  label: '时间范围',
+  prop: 'timerange',
+  type: 'timerange',
+  format: 'HH:mm:ss'
+}
+```
+
+#### week（周）
+
+```javascript
+{
+  label: '周',
+  prop: 'week',
+  type: 'week',
+  format: 'yyyyWW周'
+}
+```
+
+#### month（月）
+
+```javascript
+{
+  label: '月份',
+  prop: 'month',
+  type: 'month',
+  format: 'yyyy-MM'
+}
+```
+
+#### year（年）
+
+```javascript
+{
+  label: '年份',
+  prop: 'year',
+  type: 'year'
+}
+```
+
+### 开关与评分
+
+#### switch（开关）
+
+```javascript
+{
+  label: '状态',
+  prop: 'status',
+  type: 'switch',
+  dicData: [
+    { label: '开启', value: 1 },
+    { label: '关闭', value: 0 }
+  ],
+  value: 1,
+  activeText: '开启',
+  inactiveText: '关闭'
+}
+```
+
+#### rate（评分）
+
+```javascript
+{
+  label: '评分',
+  prop: 'rating',
+  type: 'rate',
+  max: 5,
+  allowHalf: false
+}
+```
+
+#### slider（滑块）
+
+```javascript
+{
+  label: '进度',
+  prop: 'progress',
+  type: 'slider',
+  min: 0,
+  max: 100,
+  showInput: true,
+  range: false  // 范围滑块
+}
+```
+
+### 文件上传类
+
+#### upload（文件上传）
+
+```javascript
+{
+  label: '附件',
+  prop: 'file',
+  type: 'upload',
+  limit: 5,                    // 限制数量
+  fileSize: 5,                // 文件大小限制(MB)
+  accept: '.pdf,.doc,.docx',  // 接受的文件类型
+  action: '/api/upload',      // 上传地址
+  headers: {},                // 请求头
+  data: {},                   // 额外参数
+  multiple: true,            // 多文件上传
+  drag: true,                 // 拖拽上传
+  showFileList: true,         // 显示文件列表
+  showTip: true,              // 显示提示
+  // 回调
+  uploadBefore: (file, done, loading) => {
+    // 上传前，可修改 file 或返回 false 阻止上传
+    done()
+  },
+  uploadAfter: (res, file, done, loading) => {
+    // 上传后，可修改 res
+    done()
+  },
+  uploadDelete: (file) => {
+    // 删除前回调
+  },
+  uploadPreview: (file) => {
+    // 预览回调
+  },
+  uploadExceed: (files, file) => {
+    // 超出限制回调
+  }
+}
+```
+
+#### img（图片上传）
+
+```javascript
+{
+  label: '头像',
+  prop: 'avatar',
+  type: 'upload',
+  action: '/api/upload',
+  accept: 'image/*',
+  imgWidth: 100,          // 预览图宽度
+  drag: false,
+  showFileList: false,
+  title: '点击上传头像'
+}
+```
+
+### 高级输入类
+
+#### input-number（数字输入框）
+
+```javascript
+{
+  label: '价格',
+  prop: 'price',
+  type: 'input-number',
+  min: 0,
+  max: 999999,
+  step: 0.01,
+  precision: 2,
+  controls: true
+}
+```
+
+#### input-color（颜色选择）
+
+```javascript
+{
+  label: '颜色',
+  prop: 'color',
+  type: 'input-color',
+  showAlpha: true,        // 开启透明度
+  colorFormat: 'rgb'       // rgba | rgb | hex
+}
+```
+
+#### input-icon（图标选择）
+
+```javascript
+{
+  label: '图标',
+  prop: 'icon',
+  type: 'input-icon',
+  placeholder: '选择图标'
+}
+```
+
+#### input-map（地图选址）
+
+```javascript
+{
+  label: '位置',
+  prop: 'location',
+  type: 'input-map',
+  mapKey: 'your-amap-key',  // 高德地图 key
+  sitmap: true               // 显示静态地图
+}
+```
+
+#### input-tree（树下拉选择）
+
+```javascript
+{
+  label: '选择部门',
+  prop: 'dept',
+  type: 'input-tree',
+  dicData: deptTree,
+  props: { label: 'label', value: 'id' }
+}
+```
+
+#### input-table（表格选择）
+
+```javascript
+{
+  label: '选择用户',
+  prop: 'user',
+  type: 'input-table',
+  column: [
+    { label: '姓名', prop: 'name' },
+    { label: '年龄', prop: 'age' }
+  ],
+  row: {
+    disabled: true
+  }
+}
+```
+
+#### input-tag（标签输入）
+
+```javascript
+{
+  label: '标签',
+  prop: 'tags',
+  type: 'input-tag',
+  max: 10,              // 最大标签数
+  allowCreate: true,   // 允许创建新标签
+  filterable: true      // 可过滤
+}
+```
+
+#### input-json（JSON 编辑器）
+
+JSON 编辑器组件，基于 el-input 封装，支持格式化、语法高亮、错误提示和预览功能。
+
+**在 avue-form 中使用：**
+
+```javascript
+{
+  label: '配置信息',
+  prop: 'config',
+  type: 'json',
+  showPreview: true,       // 显示 JSON 预览面板
+  showFormatBtn: true,     // 显示格式化按钮
+  validateOnBlur: true,    // 失焦时验证
+  formatOnBlur: false,     // 失焦时自动格式化
+  rows: 8,                // 文本域行数
+  minRows: 3,             // 最小行数
+  maxRows: 20            // 最大行数
+}
+```
+
+**独立组件用法：**
+
+```vue
+<template>
+  <avue-input-json
+    v-model="jsonData"
+    :rows="10"
+    :show-preview="true"
+    :show-format-btn="true"
+    placeholder="请输入 JSON"
+    @change="handleChange"
+    @error="handleError"
+    @format="handleFormat"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const jsonData = ref('{"name": "test", "value": 123}')
+
+const handleChange = (val) => {
+  console.log('值变化:', val)
+}
+
+const handleError = (errorMsg) => {
+  if (errorMsg) {
+    console.error('JSON 错误:', errorMsg)
+  }
+}
+
+const handleFormat = ({ isFormatted, value, parsedValue }) => {
+  console.log('格式化状态:', isFormatted)
+  console.log('当前值:', value)
+  console.log('解析后对象:', parsedValue)
+}
+</script>
+```
+
+**Props 属性：**
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `v-model` | `String/Object` | - | 绑定值 |
+| `rows` | `Number` | `8` | 文本域行数 |
+| `minRows` | `Number` | `3` | 最小行数 |
+| `maxRows` | `Number` | `20` | 最大行数 |
+| `autosize` | `Boolean/Object` | `{minRows:3, maxRows:20}` | 自动高度 |
+| `showWordLimit` | `Boolean` | `false` | 显示字数限制 |
+| `maxlength` | `Number` | - | 最大长度 |
+| `showFormatBtn` | `Boolean` | `true` | 显示格式化按钮 |
+| `showPreview` | `Boolean` | `false` | 显示 JSON 预览面板 |
+| `showError` | `Boolean` | `true` | 显示错误提示 |
+| `validateOnBlur` | `Boolean` | `true` | 失焦时验证 |
+| `formatOnBlur` | `Boolean` | `false` | 失焦时自动格式化 |
+| `width` | `String` | `'100%'` | 组件宽度 |
+
+**Events 事件：**
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `change` | `(value)` | 值变化时触发 |
+| `format` | `({isFormatted, value, parsedValue})` | 格式化切换时触发 |
+| `error` | `(errorMsg)` | JSON 错误时触发 |
+| `click` | `event` | 点击时触发 |
+| `focus` | `event` | 聚焦时触发 |
+| `blur` | `event` | 失焦时触发 |
+
+**Methods 方法（通过 ref 调用）：**
+
+| 方法名 | 说明 |
+|--------|------|
+| `getParsedValue()` | 获取解析后的 JSON 对象 |
+| `isValid()` | 验证 JSON 是否有效 |
+| `clear()` | 清空内容 |
+| `setValue(val)` | 设置值 |
+
+**功能说明：**
+
+- 点击"格式化"按钮切换到文本域模式，可手动编辑 JSON
+- 点击"编辑"按钮切换回普通输入模式，组件会自动验证并格式化 JSON
+- 支持语法高亮预览，显示 JSON 结构
+
+#### input-cron（Cron 表达式）
+
+```javascript
+{
+  label: '执行周期',
+  prop: 'cron',
+  type: 'input-cron',
+  placeholder: '配置定时任务'
+}
+```
+
+#### mention（@提及）
+
+```javascript
+{
+  label: '@成员',
+  prop: 'mentions',
+  type: 'mention',
+  data: [
+    { label: '张三', value: 1 },
+    { label: '李四', value: 2 }
+  ]
+}
+```
+
+### 其他类型
+
+#### array（数组输入）
+
+```javascript
+{
+  label: '数组',
+  prop: 'items',
+  type: 'array',
+  minRows: 1,
+  maxRows: 10
+}
+```
+
+#### dynamic（动态子表单）
+
+```javascript
+{
+  label: '子表单',
+  prop: 'subform',
+  type: 'dynamic',
+  children: {
+    column: [
+      { label: '姓名', prop: 'name', span: 12 },
+      { label: '电话', prop: 'phone', span: 12 }
+    ]
+  }
+}
+```
+
+#### title（标题）
+
+```javascript
+{
+  label: '分组标题',
+  prop: 'groupTitle',
+  type: 'title',
+  value: '基本信息',
+  labelWidth: 0
+}
+```
+
+---
+
+## 全局方法
+
+### $AVUE 全局配置
+
+在 `main.js` 中配置全局默认值：
+
+```javascript
+app.use(Avue, {
+  size: 'default',           // 组件尺寸
+  menuType: 'text',          // 菜单按钮类型
+  calcHeight: 0,             // 计算高度偏移
+  appendToBody: true,        // 挂载到 body
+  formOption: {},            // 默认表单配置
+  // 水印配置
+  canvas: {
+    text: 'avuejs.com',
+    fontFamily: 'microsoft yahei',
+    color: '#999',
+    fontSize: 16,
+    opacity: 100,
+    bottom: 10,
+    right: 10
+  }
+})
+```
+
+### $DialogForm 弹窗表单
+
+创建带表单的弹窗：
+
+```javascript
+this.$DialogForm({
+  title: '编辑信息',           // 弹窗标题
+  width: '50%',               // 弹窗宽度
+  data: {},                   // 表单初始数据
+  menuPosition: 'center',    // 按钮位置
+  option: {                   // avue-form 配置
+    column: [
+      { label: '姓名', prop: 'name', type: 'input' },
+      { label: '年龄', prop: 'age', type: 'number' }
+    ]
+  },
+  callback: (data, close, done) => {
+    // data: 表单提交的数据
+    // close: 关闭弹窗的函数
+    // done: 完成回调（可传 false 表示失败）
+    console.log('提交数据:', data)
+    close()  // 关闭弹窗
+  }
+})
+```
+
+#### DialogForm Option 配置
+
+| 配置项 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `title` | `String` | - | 弹窗标题 |
+| `width` | `String/Number` | `'50%'` | 弹窗宽度 |
+| `data` | `Object` | `{}` | 表单初始数据 |
+| `option` | `Object` | - | avue-form 配置 |
+| `menuPosition` | `String` | `'center'` | 按钮位置 |
+| `submitText` | `String` | `'提交'` | 提交按钮文本 |
+| `emptyText` | `String` | `'关闭'` | 关闭按钮文本 |
+| `submitIcon` | `String` | `'el-icon-check'` | 提交按钮图标 |
+| `emptyIcon` | `String` | `'el-icon-close'` | 关闭按钮图标 |
+
+### $Export 导出功能
+
+#### 导出 Excel
+
+```javascript
+// 导出数据
+this.$Export.excel({
+  title: '用户列表',
+  titleStyle: { fontSize: 16 },
+  sheets: [
+    {
+      sheetName: 'sheet1',
+      columns: [
+        { label: '姓名', prop: 'name' },
+        { label: '年龄', prop: 'age' }
+      ],
+      data: [
+        { name: '张三', age: 18 },
+        { name: '李四', age: 20 }
+      ]
+    }
+  ],
+  filename: 'export.xlsx',
+  autoWidth: true
+})
+
+// 带表头的导出
+this.$Export.excel({
+  title: '用户列表',
+  columns: [
+    { label: '姓名', prop: 'name' },
+    { label: '年龄', prop: 'age' }
+  ],
+  data: []
+})
+```
+
+#### 导出数组数据
+
+```javascript
+this.$Export.excel({
+  columns: [
+    { label: '列1', prop: 'col1' },
+    { label: '列2', prop: 'col2' }
+  ],
+  data: [],  // 数据数组
+  filename: 'data.xlsx'
+})
+```
+
+#### $Export.pdf 导出 PDF
+
+```javascript
+this.$Export.pdf({
+  title: 'PDF标题',
+  data: [],
+  columns: []
+})
+```
+
+### $Clipboard 剪贴板
+
+```javascript
+// 复制文本
+this.$Clipboard('要复制的文本').then(() => {
+  this.$message.success('复制成功')
+}).catch(() => {
+  this.$message.error('复制失败')
+})
+
+// 从元素复制
+this.$Clipboard({ text: '' }).then(() => {})
+```
+
+### $Print 打印
+
+```javascript
+// 打印元素
+this.$Print('#printArea', {
+  printTitle: '打印标题',
+  style: 'body { font-size: 14px }'
+})
+
+// 打印指定内容
+this.$Print({
+  popTitle: '文档标题',
+  extraHead: '<meta charset="utf-8">',
+  extraCss: '<style>body{font-size:12px}</style>'
+})
+```
+
+### $Watermark 水印
+
+```javascript
+// 添加水印
+this.$Watermark.set({
+  watermarkText: 'avuejs.com',      // 水印文字
+  fontFamily: '微软雅黑',            // 字体
+  fontSize: 16,                      // 字号
+  color: 'rgba(0, 0, 0, 0.1)',      // 颜色
+  opacity: 100,                      // 透明度
+  bottom: 10,                        // 距底部
+  right: 10,                         // 距右侧
+  ratio: window.devicePixelRatio     // 清晰度
+})
+
+// 清除水印
+this.$Watermark.del()
+```
+
+### $Log 日志
+
+彩色控制台日志输出：
+
+```javascript
+this.$Log.capsule('标题', '信息', 'primary')
+this.$Log.success('操作成功')
+this.$Log.warning('警告信息')
+this.$Log.danger('危险操作')
+this.$Log.primary('主要信息')
+this.$Log.default('默认信息')
+
+// 彩色日志组
+this.$Log.colorful([
+  { text: '文本1', type: 'primary' },
+  { text: '文本2', type: 'success' }
+])
+```
+
+### $Screenshot 截图
+
+```javascript
+this.$Screenshot().then(base64 => {
+  console.log('截图base64:', base64)
+}).catch(err => {
+  console.error('截图失败:', err)
+})
+```
+
+### $ImagePreview 图片预览
+
+```javascript
+// 单张图片预览
+this.$ImagePreview({
+  url: 'https://example.com/image.jpg',
+  title: '图片标题'
+})
+
+// 多张图片预览
+this.$ImagePreview([
+  { url: 'https://example.com/1.jpg', title: '图片1' },
+  { url: 'https://example.com/2.jpg', title: '图片2' }
+])
+
+// 从元素获取图片
+this.$ImagePreview({
+  list: [],      // 图片列表
+  big: true,     // 大图预览
+  attr: 'src'    // 从元素获取图片的属性
+})
+```
+
+### $uploadFun 上传方法工厂
+
+```javascript
+// 创建上传方法
+const uploadFun = this.$uploadFun({
+  action: '/api/upload',      // 上传地址
+  headers: {},                 // 请求头
+  data: {}                     // 额外参数
+})
+
+// 使用
+uploadFun(file).then(res => {
+  console.log('上传成功:', res)
+})
+```
+
+---
+
+## 工具函数
+
+在组件中通过 `this` 访问：
+
+```javascript
+// 深拷贝
+const copy = this.deepClone(obj)
+
+// 判断空值
+this.validatenull(value)  // 返回 true 表示为空
+
+// 数据类型转换
+this.detailDataType(value, 'number')  // 转为数字
+this.setPx(val, defaultVal)           // 设置像素值
+
+// 查找数据
+this.findNode(list, props, value)     // 查找节点
+this.findArray(list, value, key)      // 查找数组项
+this.findObject(list, value, prop)   // 查找对象
+
+// 字典处理
+this.getDicValue(list, value, props) // 根据值获取字典标签
+
+// 下载文件
+this.downFile(url, filename)
+
+// 过滤参数
+this.filterParams(form, ['', '$'])
+
+validData(val, defaultVal)  // 获取有效数据
+clearVal(obj, props, excludes)  // 清除值
+blankVal(value)  // 置空值
+arraySort(list, prop, callback)  // 数组排序
+```
+
+---
+
+## 数据展示组件
+
+使用方式统一：`v-model` 绑定数据，`option` 配置样式。
+
+### 基本用法
+
+```vue
+<template>
+  <avue-data-xxx
+    v-model="data"
+    :option="option"
+  />
+</template>
+```
+
+### 组件列表
+
+| 组件名 | 标签 | 说明 |
+|--------|------|------|
+| `avue-data-box` | 数据框 | 统计块，含图标、标题、数字 |
+| `avue-data-card` | 数据卡片 | 大号数值卡片 |
+| `avue-data-cardText` | 图文卡片 | 含图片和文字描述 |
+| `avue-data-countdown` | 倒计时 | 活动/任务倒计时 |
+| `avue-data-dashboard` | 仪表盘 | 进度仪表盘 |
+| `avue-data-display` | 数据展示 | 带背景的数据块 |
+| `avue-data-icons` | 图标组 | 图标与数字组合 |
+| `avue-data-imgText` | 图文组 | 图文并排 |
+| `avue-data-list` | 列表组 | 排行榜列表 |
+| `avue-data-notice` | 通知栏 | 滚动通知 |
+| `avue-data-operaText` | 操作文本 | 带操作按钮的文本 |
+| `avue-data-panel` | 数据面板 | 通用面板外框 |
+| `avue-data-pay` | 支付展示 | 价格套餐展示 |
+| `avue-data-price` | 价格展示 | 定价表 |
+| `avue-data-product` | 产品展示 | 商品信息块 |
+| `avue-data-profile` | 个人信息 | 头像与简介 |
+| `avue-data-progress` | 进度条 | 各项进度条 |
+| `avue-data-rank` | 排名榜 | Top 排名列表 |
+| `avue-data-rotate` | 翻转卡片 | 悬停翻转卡片 |
+| `avue-data-statistic` | 统计数据 | 综合统计块 |
+| `avue-data-tabs` | 大屏选项卡 | 大屏导航 |
+| `avue-data-task` | 任务卡片 | 任务进度 |
+| `avue-data-weather` | 天气展示 | 天气预报 |
+
+### 数据框示例
+
+```vue
+<avue-data-box
+  v-model="count"
+  :option="{
+    title: '总用户数',
+    icon: 'el-icon-user',
+    color: '#409EFF',
+    fontSize: 28
+  }"
+/>
+```
+
+### 数据卡片示例
+
+```vue
+<avue-data-card
+  v-model="data"
+  :option="{
+    borderColor: '#409EFF',
+    headerColor: '#f5f7fa'
+  }"
+/>
+```
+
+---
+
+## 其他交互组件
+
+### avue-login（登录组件）
+
+```vue
+<template>
+  <avue-login
+    v-model="loginForm"
+    :option="loginOption"
+    @submit="handleLogin"
+  />
+</template>
+
+<script setup>
+const loginForm = reactive({
+  username: '',
+  password: '',
+  code: ''
+})
+
+const loginOption = reactive({
+  username: {
+    label: '用户名',
+    placeholder: '请输入用户名',
+    prefixIcon: 'el-icon-user'
+  },
+  password: {
+    label: '密码',
+    placeholder: '请输入密码',
+    prefixIcon: 'el-icon-lock'
+  },
+  code: {
+    label: '验证码',
+    placeholder: '请输入验证码',
+    prefixIcon: 'el-icon-key'
+  }
+})
+
+const handleLogin = (form, done) => {
+  // 登录逻辑
+  done()
+}
+</script>
+```
+
+### avue-verify（滑动验证）
+
+```vue
+<template>
+  <avue-verify
+    v-model="isPass"
+    :width="300"
+    :height="40"
+    @success="handleSuccess"
+  />
+</template>
+```
+
+### avue-sign（电子签名）
+
+```vue
+<template>
+  <avue-sign
+    v-model="signData"
+    :width="400"
+    :height="200"
+    :lineWidth="3"
+    :lineColor="'#000'"
+    @save="handleSave"
+  />
+</template>
+
+<script setup>
+const signData = ref('')  // base64 格式的签名图片
+
+const handleSave = (base64) => {
+  console.log('签名数据:', base64)
+}
+</script>
+```
+
+### avue-video（视频播放）
+
+```vue
+<avue-video
+  v-model="videoUrl"
+  :option="{
+    autoplay: false,
+    controls: ['play', 'time', 'volume', 'fullscreen'],
+    muted: false
+  }"
+/>
+```
+
+### avue-draggable（拖拽）
+
+```vue
+<template>
+  <avue-draggable
+    v-model="list"
+    :option="{
+      disabled: false,
+      ghostClass: 'ghost',
+      animation: 200
+    }"
+    @change="handleChange"
+  >
+    <div v-for="item in list" :key="item.id">
+      {{ item.name }}
+    </div>
+  </avue-draggable>
+</template>
+```
+
+### avue-chat（聊天）
+
+```vue
+<avue-chat
+  v-model="messages"
+  :option="{
+    name: 'username',
+    avatar: 'avatar',
+    content: 'content',
+    date: 'date'
+  }"
+/>
+```
+
+### avue-comment（评论）
+
+```vue
+<avue-comment
+  v-model="comments"
+  :option="{
+    avatar: 'avatar',
+    author: 'author',
+    content: 'content',
+    date: 'date'
+  }"
+/>
+```
+
+### avue-article（文章）
+
+```vue
+<avue-article
+  v-model="articleContent"
+  :option="{
+    title: '文章标题',
+    author: '作者',
+    date: '2024-01-01',
+    content: '文章内容'
+  }"
+/>
+```
+
+### avue-tabs（选项卡）
+
+```vue
+<template>
+  <avue-tabs
+    v-model="activeTab"
+    :option="tabsOption"
+    @change="handleChange"
+  />
+</template>
+
+<script setup>
+const activeTab = ref('tab1')
+
+const tabsOption = {
+  column: [
+    { label: '标签1', prop: 'tab1' },
+    { label: '标签2', prop: 'tab2' }
+  ]
+}
+
+const handleChange = (tab) => {
+  console.log('切换到:', tab)
+}
+</script>
+```
+
+### avue-group（分组容器）
 
-| 文件名      | 用途     | 说明 |
-| ----------- | -------- | ---- |
-| avue.min.js | 生产环境 | 压缩优化版本，体积更小 |
-| avue.js     | 开发环境 | 包含完整的调试信息 |
+```vue
+<avue-group
+  :option="{
+    title: '分组标题',
+    collapse: true,
+    border: true
+  }"
+>
+  <!-- 分组内容 -->
+  <div>分组内容区域</div>
+</avue-group>
+```
 
-## 📚 文档与示例
+### avue-search（搜索面板）
 
-要查看详细文档和在线示例，请访问：[官方文档](https://avuejs.com)
+```vue
+<template>
+  <avue-search
+    v-model="searchForm"
+    :option="searchOption"
+    @search="handleSearch"
+    @reset="handleReset"
+  />
+</template>
 
-## 🌈 相关产品
+<script setup>
+const searchForm = reactive({})
+const searchOption = {
+  column: [
+    { label: '姓名', prop: 'name', type: 'input' },
+    { label: '状态', prop: 'status', type: 'select', dicData: [] }
+  ],
+  menuPosition: 'left',
+  submitBtn: true,
+  emptyBtn: true
+}
+</script>
+```
+
+### avue-text-ellipsis（文本省略）
 
-除了核心框架外，我们还提供以下解决方案：
+```vue
+<avue-text-ellipsis
+  text="这是一段很长的文本内容..."
+  :height="60"
+  :moreText="'展开'"
+  :lessText="'收起'"
+/>
+```
+
+### avue-count-up（数字滚动）
+
+```vue
+<avue-count-up
+  v-model="count"
+  :option="{
+    startVal: 0,
+    endVal: 1000,
+    duration: 2000,
+    separator: ','
+  }"
+/>
+```
+
+### avue-license（授权证书）
+
+```vue
+<avue-license
+  v-model="licenseInfo"
+  :option="{
+    company: '公司名称',
+    license: '许可证号'
+  }"
+/>
+```
 
--  **[数据大屏](https://data.avuejs.com)** - 专业的可视化数据大屏解决方案
--  **[数据组态](http://iot.avuejs.com)** - 工业物联网数据组态平台
--  **[AI大模型](http://ai.avuejs.com)** - 智能AI应用解决方案
+### avue-input-tree（树下拉选择）
 
-## 🤝 参与贡献
+```vue
+<avue-input-tree
+  v-model="selectedDept"
+  :dic="deptTree"
+  :option="{
+    props: { label: 'label', value: 'id' },
+    clearable: true
+  }"
+/>
+```
+
+### avue-input-table（表格选择）
+
+```vue
+<avue-input-table
+  v-model="selectedUser"
+  :option="{
+    column: [
+      { label: '姓名', prop: 'name' },
+      { label: '部门', prop: 'dept' }
+    ],
+    row: { disabled: true }
+  }"
+  :tableData="userList"
+/>
+```
+
+---
+
+## 云存储配置
+
+### 七牛云
+
+```javascript
+app.use(Avue, {
+  qiniu: {
+    AK: 'your-access-key',
+    SK: 'your-secret-key',
+    scope: 'your-bucket',
+    url: 'https://your-domain.com',
+    bucket: 'https://upload.qiniup.com',
+    deadline: 3600
+  }
+})
+```
+
+### 阿里云 OSS
+
+```javascript
+app.use(Avue, {
+  ali: {
+    region: 'oss-cn-hangzhou',
+    endpoint: 'https://oss-cn-hangzhou.aliyuncs.com',
+    stsToken: 'your-sts-token',
+    accessKeyId: 'your-key-id',
+    accessKeySecret: 'your-key-secret',
+    bucket: 'your-bucket'
+  }
+})
+```
 
-1. Fork 本仓库
-2. 新建 Feature 分支
-3. 提交代码
-4. 创建 Pull Request
+### 上传组件云存储配置
 
-## ❓ 问答与支持
+```javascript
+{
+  type: 'upload',
+  action: 'qiniu',  // 或 'ali'
+  token: '/api/qiniu/token'  // 获取 token 的接口
+}
+```
+
+---
+
+## 国际化
+
+```javascript
+import locale from '@umbsoft/avue/lib/locale/lang/zh-CN'
+
+app.use(Avue, { locale })
+```
+
+---
+
+## 完整示例
+
+### 用户管理表单页面
+
+```vue
+<template>
+  <avue-form
+    ref="userForm"
+    v-model="userForm"
+    :option="formOption"
+    @submit="handleSubmit"
+    @reset-change="handleReset"
+  >
+    <template #menu-form>
+      <el-button type="primary" @click="handleCustom">自定义操作</el-button>
+    </template>
+  </avue-form>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const userForm = ref({
+  username: '',
+  email: '',
+  phone: '',
+  gender: 1,
+  status: true,
+  birthday: '',
+  dept: null,
+  avatar: '',
+  remark: ''
+})
+
+const formOption = reactive({
+  labelWidth: 120,
+  span: 12,
+  menuPosition: 'right',
+  submitBtn: true,
+  emptyBtn: true,
+  column: [
+    {
+      label: '用户名',
+      prop: 'username',
+      type: 'input',
+      rules: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 20, message: '用户名长度 3-20 个字符', trigger: 'blur' }
+      ],
+      prepend: 'el-icon-user'
+    },
+    {
+      label: '邮箱',
+      prop: 'email',
+      type: 'input',
+      component: 'email',
+      rules: [
+        { required: true, message: '请输入邮箱', trigger: 'blur' },
+        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
+      ]
+    },
+    {
+      label: '手机号',
+      prop: 'phone',
+      type: 'input',
+      component: 'phone',
+      rules: [
+        { required: true, message: '请输入手机号', trigger: 'blur' }
+      ]
+    },
+    {
+      label: '性别',
+      prop: 'gender',
+      type: 'radio',
+      dicData: [
+        { label: '男', value: 1 },
+        { label: '女', value: 0 }
+      ],
+      value: 1
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'switch',
+      dicData: [
+        { label: '启用', value: true },
+        { label: '禁用', value: false }
+      ],
+      value: true,
+      activeText: '启用',
+      inactiveText: '禁用'
+    },
+    {
+      label: '生日',
+      prop: 'birthday',
+      type: 'date',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD'
+    },
+    {
+      label: '部门',
+      prop: 'dept',
+      type: 'tree',
+      dicData: [
+        { label: '技术部', children: [
+          { label: '前端组', value: 'fe' },
+          { label: '后端组', value: 'be' }
+        ]},
+        { label: '运营部', value: 'op' }
+      ],
+      props: { label: 'label', value: 'value' }
+    },
+    {
+      label: '头像',
+      prop: 'avatar',
+      type: 'upload',
+      action: '/api/upload',
+      accept: 'image/*',
+      showFileList: false,
+      imgWidth: 80
+    },
+    {
+      label: '备注',
+      prop: 'remark',
+      type: 'input',
+      component: 'textarea',
+      span: 24,
+      minRows: 3,
+      maxRows: 5
+    }
+  ]
+})
+
+const handleSubmit = (form, done) => {
+  console.log('提交数据:', form)
+  // 模拟请求
+  setTimeout(() => {
+    ElMessage.success('提交成功')
+    done()
+  }, 1000)
+}
+
+const handleReset = () => {
+  ElMessage.info('表单已重置')
+}
+
+const handleCustom = () => {
+  // 自定义操作
+  console.log('自定义操作')
+}
+</script>
+```
+
+---
+
+## 字段联动
+
+### 使用 control 属性
+
+```javascript
+{
+  label: '类型',
+  prop: 'type',
+  type: 'select',
+  dicData: [
+    { label: '文本', value: 'text' },
+    { label: '数字', value: 'number' },
+    { label: '日期', value: 'date' }
+  ],
+  value: 'text'
+},
+{
+  label: '文本值',
+  prop: 'textValue',
+  type: 'input',
+  display: true,
+  control: (val, form) => {
+    if (val === 'text') {
+      return { textValue: { display: true, type: 'input' } }
+    } else if (val === 'number') {
+      return { textValue: { display: true, type: 'number' } }
+    } else {
+      return { textValue: { display: false } }
+    }
+  }
+}
+```
+
+### 使用 change 事件
+
+```javascript
+{
+  label: '国家',
+  prop: 'country',
+  type: 'select',
+  dicData: [
+    { label: '中国', value: 'china' },
+    { label: '美国', value: 'usa' }
+  ],
+  change: ({ column, value }) => {
+    // 根据选择更新城市字典
+    if (value === 'china') {
+      column[1].dicData = [
+        { label: '北京', value: 'beijing' },
+        { label: '上海', value: 'shanghai' }
+      ]
+    } else {
+      column[1].dicData = [
+        { label: '纽约', value: 'ny' },
+        { label: '洛杉矶', value: 'la' }
+      ]
+    }
+  }
+},
+{
+  label: '城市',
+  prop: 'city',
+  type: 'select'
+}
+```
+
+---
+
+## 字典配置
+
+### 本地字典
+
+```javascript
+{
+  label: '状态',
+  prop: 'status',
+  type: 'select',
+  dicData: [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 }
+  ]
+}
+```
+
+### 远程字典
+
+```javascript
+{
+  label: '角色',
+  prop: 'role',
+  type: 'select',
+  dicUrl: '/api/dict/role',
+  dicMethod: 'get',
+  dicQuery: { type: 'role' },
+  props: {
+    label: 'name',   // 字典显示字段
+    value: 'id'      // 字典值字段
+  },
+  dicFormatter: (res) => {
+    return res.data.list
+  }
+}
+```
+
+### HTTP 响应映射
+
+```javascript
+{
+  label: '分类',
+  prop: 'category',
+  type: 'select',
+  dicUrl: '/api/category',
+  propsHttp: {
+    name: 'name',        // 字典名称字段
+    url: 'url',          // 字典链接字段
+    res: 'data.list'     // 数据路径
+  }
+}
+```
+
+### 级联字典
+
+```javascript
+{
+  label: '省份',
+  prop: 'province',
+  type: 'select',
+  dicUrl: '/api/province',
+  cascader: ['city']  // 指定级联字段
+},
+{
+  label: '城市',
+  prop: 'city',
+  type: 'select'
+}
+```
+
+---
+
+## 验证规则
+
+```javascript
+{
+  label: '邮箱',
+  prop: 'email',
+  type: 'input',
+  rules: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
+  ]
+},
+{
+  label: '年龄',
+  prop: 'age',
+  type: 'number',
+  rules: [
+    { required: true, message: '请输入年龄', trigger: 'blur' },
+    { type: 'number', min: 0, max: 150, message: '年龄范围 0-150', trigger: 'blur' }
+  ]
+},
+{
+  label: '手机号',
+  prop: 'phone',
+  type: 'input',
+  rules: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+  ]
+},
+{
+  label: '自定义验证',
+  prop: 'custom',
+  type: 'input',
+  rules: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === 'forbidden') {
+          callback(new Error('该值被禁止使用'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+}
+```
+
+---
+
+## 远程字典完整示例
+
+```javascript
+// main.js 配置 axios
+import axios from 'axios'
+
+app.use(Avue, { axios })
+
+// 组件中使用
+{
+  label: '用户',
+  prop: 'userId',
+  type: 'select',
+  dicUrl: '/api/users',
+  dicQuery: { status: 1 },
+  props: {
+    label: 'nickname',
+    value: 'id'
+  },
+  dicFormatter: (res) => {
+    // 自定义处理响应数据
+    return res.data.filter(item => item.deleted === 0)
+  },
+  filterable: true,
+  clearable: true,
+  placeholder: '请选择用户'
+}
+```
 
-有关问题和支持，请使用[issues](https://gitee.com/smallweigit/avue/issues)。我们会尽快为您解答。
+---
 
-> **注意**：提交问题前，请务必提供详细的问题过程和截图，不符合准则的问题将会被拒绝。
+## 版本信息
 
+- 当前版本：v3.8.3-beta.4
+- 依赖：Vue 3.2+, Element-Plus 2.2+
+- 许可证：MIT
 
-## 📄 开源协议
+---
 
-[MIT](http://opensource.org/licenses/MIT)
+## 文档与支持
 
-Copyright (c) 2017-present, Smallwei
+- 官方文档：https://avuejs.com
+- 问题反馈：https://gitee.com/umbsoft/avue/issues