@umbsoft/avue 3.8.3-beta.49 → 3.8.3-beta.51

package/README.md

@@ -1,2192 +1,177 @@
-# Avue.js (@umbsoft/avue)
-
-> 基于 Element-Plus 的低代码前端框架，二次开发版本 v3.8.3-beta.4
-> 去掉了 `avue-crud` 组件，新增了 `avue-transfer` 穿梭框组件
-
-## 项目结构
-
-```
-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 @umbsoft/avue
-
-# 或使用 npm
-npm install @umbsoft/avue
-
-# 或使用 yarn
-yarn add @umbsoft/avue
-```
-
----
-
-## 快速使用
-
-### 完整引入
-
-```javascript
-import { createApp } from '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)
-}
-
-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（分组容器）
-
-```vue
-<avue-group
-  :option="{
-    title: '分组标题',
-    collapse: true,
-    border: true
-  }"
->
-  <!-- 分组内容 -->
-  <div>分组内容区域</div>
-</avue-group>
-```
-
-### avue-search（搜索面板）
-
-```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: '许可证号'
-  }"
-/>
-```
-
-### 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'
-  }
-})
-```
-
-### 上传组件云存储配置
-
-```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: '请选择用户'
-}
-```
-
----
-
-## 版本信息
-
-- 当前版本：v3.8.3-beta.4
-- 依赖：Vue 3.2+, Element-Plus 2.2+
-- 许可证：MIT
-
----
-
-## 文档与支持
-
-- 官方文档：https://avuejs.com
-- 问题反馈：https://gitee.com/umbsoft/avue/issues
+# @umbsoft/avue
+
+> 基于 Element-Plus 的低代码前端框架，二次开发版本 v3.8.3-beta.48
+> 去掉 `avue-crud`，新增 `avue-transfer`，重写字典系统支持纯 JSON 联动
+
+## 核心特性
+
+- **动态表单**：通过 JSON 配置生成完整表单（`avue-form`）
+- **纯 JSON 联动**：字段联动、反向赋值、显隐控制、禁用控制全部走 JSON 配置，无需手写 `change` / `control` 回调
+- **声明式字典**：`dicUrl` + `dicQuery` + `dicResPath` + `dicMap` 支持任意后端接口协议
+- **44+ 表单组件**：input、select、date、upload、tree、json、map、cron 等
+- **26+ 数据展示组件**：card、statistic、dashboard、countdown 等
+- **插件系统**：export、print、clipboard、watermark、screenshot
+
+---
+
+## 安装
+
+```bash
+pnpm add @umbsoft/avue
+```
+
+## 快速使用
+
+```typescript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+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)
+}
+app.use(ElementPlus)
+app.use(Avue, { axios: service })  // 注入业务 axios 实例
+app.mount('#app')
+```
+
+> **重要**：必须注入业务 axios 实例，否则 Avue 内部的字典请求（`dicUrl`）无法携带 token。
+
+---
+
+## 字典系统（v3.8.3-beta.48+ 核心改造）
+
+### 声明式字典加载
+
+```javascript
+{
+  label: '平台名称',
+  prop: '平台编号',
+  type: 'select',
+  dicUrl: '/component/pg',           // 接口地址
+  dicMethod: 'post',                  // 请求方法（默认 post）
+  dicQuery: {                         // 请求参数
+    来源: '连接器.秘钥_平台表',
+    字段: ['平台名称', '平台编号'],
+    条件: { 平台名称: { $distinct: '平台名称' } },
+    排序: ['平台名称']
+  },
+  dicResPath: 'data',                 // 响应提取路径：res.data.data
+  dicMap: [                           // 数据映射（可选）
+    { to: '编码', from: '数据编码' },
+    { to: '名称', template: '【${平台名称}】${秘钥名称}' }
+  ],
+  props: { label: '平台名称', value: '平台编号' }
+}
+```
+
+### 纯 JSON 联动
+
+```javascript
+{
+  prop: '平台编号',
+  type: 'select',
+  dicUrl: '/component/pg',
+  dicQuery: { ... },
+  linkage: {
+    // ① 反向赋值：选中后自动填充表单其他字段
+    assign: { 平台名称: '平台名称' },
+    // ② 级联刷新：值变化时触发子字段字典刷新
+    cascade: ['秘钥编码']
+  }
+}
+```
+
+### 级联注入 + 前端过滤
+
+```javascript
+// 子字段配置
+{
+  prop: '秘钥编码',
+  type: 'select',
+  dicUrl: '/component/pg',
+  dicQuery: {
+    来源: '连接器.秘钥_平台秘钥表',
+    字段: ['数据编码', '平台编号', '平台名称', '秘钥名称'],
+    条件: { 平台编号: { $eq: '{{平台编号}}' } },  // 联动条件注入
+    排序: ['平台名称']
+  },
+  dicResPath: 'data',
+  // cascadeFilter 前端过滤（不重新请求）
+  cascadeFilter: { '平台编号': '平台编号' }
+}
+```
+
+### 显隐/禁用控制（替代 control 函数）
+
+```javascript
+{
+  prop: '任务模式',
+  type: 'radio',
+  dicData: [{ label: '通用', value: '通用' }, { label: '内置', value: '内置' }],
+  linkage: {
+    display: {
+      '任务类型': { ne: '内置', action: 'show' },   // 值 !== '内置' 时显示
+      '请求地址': { ne: '内置', action: 'show' },
+      '任务标识': { eq: '内置', action: 'show' }    // 值 === '内置' 时显示
+    },
+    disabled: {
+      '字段A': { eq: 'xxx' }  // 值 === 'xxx' 时禁用
+    }
+  }
+}
+```
+
+---
+
+## 项目结构
+
+```
+avue/
+├── packages/
+│   ├── core/
+│   │   ├── components/     # form-temp、dialog-form、icon、image-preview
+│   │   ├── common/         # props、event、init 混入
+│   │   └── directive/      # 指令
+│   ├── data/               # 26 个数据展示组件
+│   └── element-plus/       # 44 个表单输入组件
+├── src/
+│   ├── core/               # 核心模块（dic.js、dataformat.js、detail.js）
+│   ├── global/             # 全局变量
+│   ├── locale/             # 国际化
+│   ├── plugin/             # 插件
+│   ├── ui/                 # UI 组件注册入口
+│   ├── utils/              # 工具函数
+│   ├── icon.js             # 图标配置
+│   ├── index.js            # 主入口
+│   └── version.js          # 版本信息
+├── build/                  # 构建脚本（webpack + gulp）
+├── styles/                 # SCSS 样式
+└── types/                  # TypeScript 类型定义
+```
+
+---
+
+## 构建
+
+```bash
+# 开发模式（带 watch）
+pnpm dev
+
+# 生产构建
+pnpm build
+
+# 发布
+pnpm release
+```
+
+---
+
+## 开发文档
+
+- [CHANGELOG.md](./CHANGELOG.md) — 版本变更记录
+- [开发规范.md](./开发规范.md) — 编码规范与未来扩展指南
+- [SKILLS.md](./SKILLS.md) — AI 调用接口文档