### Install Avue.js with pnpm, npm, or yarn

Source: https://github.com/nmxiaowei/avue/blob/master/README.md

Use your preferred package manager to install Avue.js. pnpm is recommended for optimal performance.

```bash
# 使用 pnpm 安装（推荐）
pnpm add @smallwei/avue

# 或使用 npm 安装
npm install @smallwei/avue

# 或使用 yarn 安装
yarn add @smallwei/avue
```

--------------------------------

### Vue App Initialization with Avue and Element Plus

Source: https://github.com/nmxiaowei/avue/blob/master/examples/data/price.html

Initializes a Vue application, configures it with Element Plus and Avue plugins, and mounts it to the '#app' element. Ensure these libraries are properly installed and imported.

```javascript
var app = Vue.createApp({
  data() {
    return {
      option: {
        span: 6,
        data: [
          {
            title: '日套餐',
            price: 20,
            append: '1 / 天',
            click: function () {
              alert('弹窗');
            },
            list: [
              '1天的使用时间',
              '支持pc客户端',
              '支持vue的全部体系',
              '一个神奇的框架'
            ]
          },
          {
            title: '周套餐',
            price: 30,
            append: '7 / 天',
            click: function () {
              alert('弹窗');
            },
            list: [
              '1天的使用时间',
              '支持pc客户端',
              '支持vue的全部体系',
              '一个神奇的框架'
            ]
          },
          {
            title: '月套餐',
            price: 40,
            append: '30 / 天',
            click: function () {
              alert('弹窗');
            },
            list: [
              '1天的使用时间',
              '支持pc客户端',
              '支持vue的全部体系',
              '一个神奇的框架'
            ]
          },
          {
            title: '年套餐',
            price: 50,
            append: '360 / 天',
            click: function () {
              alert('弹窗');
            },
            list: [
              '1天的使用时间',
              '支持pc客户端',
              '支持vue的全部体系',
              '一个神奇的框架'
            ]
          }
        ]
      }
    }
  },
  created() {},
  methods: {}
});

app.use(ElementPlus);
app.use(AVUE);

app.mount('#app');
```

--------------------------------

### Basic Dialog Initialization with Vue

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/dialog/index.html

Initializes a Vue application and mounts it to the DOM, enabling Element Plus and AVUE components. This setup is required before using dialogs.

```javascript
var app = Vue.createApp({ data () { return { dialogVisible: true } } })
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Show Dialog with Data using Element Plus

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/dialog/dialog.html

Illustrates how to open a dialog and pre-populate it with data. This example uses the 'data' property to pass initial values and configures the dialog as a drawer with a top direction.

```javascript
var app = Vue.createApp({
  data() {
    return {
      option: {
        submitText: '完成',
        column: [
          {
            label: "姓名",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur"
              }
            ]
          }
        ]
      },
      form: {}
    }
  },
  methods: {
    showDialog1() {
      this.$DialogForm({
        title: '弹窗页面（带上数据)',
        width: '50%',
        type: 'drawer',
        direction: 'top',
        data: {
          name: '测试数据'
        },
        option: this.option,
        callback: (res) => {
          console.log(res.data);
          this.$message.success('关闭等待框')
          setTimeout(() => {
            res.done()
            setTimeout(() => {
              this.$message.success('关闭弹窗')
              res.close()
            }, 1000)
          }, 1000)
        }
      })
    }
  }
})
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Install and Register Avue.js Globally

Source: https://context7.com/nmxiaowei/avue/llms.txt

Install Avue.js via npm/pnpm and register it globally in your Vue 3 application's entry point. Global configuration options for components, OSS, and watermarks can be passed during registration.

```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import Avue from '@smallwei/avue'
import '@smallwei/avue/lib/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(Avue, {
  size: 'default',          // 组件尺寸：default / large / small
  menuType: 'text',         // 操作列按钮样式：text / icon / button
  calcHeight: 30,           // 表格自适应高度偏移量（px）
  appendToBody: true,       // 弹窗是否挂载到 body
  // 全局水印配置
  canvas: {
    text: 'avuejs.com',
    fontFamily: 'microsoft yahei',
    color: '#999',
    fontSize: 16,
    opacity: 100
  },
  // 七牛云 OSS 配置
  qiniu: { AK: '', SK: '', scope: '', url: '', bucket: 'https://upload.qiniup.com', deadline: 1 },
  // 阿里云 OSS 配置
  ali: { region: '', endpoint: '', stsToken: '', accessKeyId: '', accessKeySecret: '', bucket: '' }
})
app.mount('#app')
```

--------------------------------

### Avue Internationalization (i18n) Setup

Source: https://context7.com/nmxiaowei/avue/llms.txt

Configure Avue's language settings by either using the built-in English locale or by providing a custom i18n function to integrate with libraries like vue-i18n. The example shows how to switch to English and how to hook into vue-i18n for custom translations.

```javascript
// 方式一：使用内置英文包
import Avue from '@smallwei/avue'
import en from '@smallwei/avue/src/locale/lang/en'

app.use(Avue, { locale: en })

// 方式二：对接 vue-i18n
import { createI18n } from 'vue-i18n'
import Avue from '@smallwei/avue'

const i18n = createI18n({
  locale: 'zh',
  messages: {
    zh: { avue: { crud: { addBtn: '新 增', delBtn: '删 除' } } },
    en: { avue: { crud: { addBtn: 'Add',  delBtn: 'Delete' } } }
  }
})

app.use(i18n)
app.use(Avue, {
  i18n: (key) => i18n.global.t(key)
})

// 内置中文语言包结构参考（src/locale/lang/zh.js）
const zhLang = {
  form:  { submitBtn: '提 交', emptyBtn: '清 空', printBtn: '打 印' },
  crud:  { addBtn: '新 增', editBtn: '编 辑', delBtn: '删 除',
           excelBtn: '导 出', searchBtn: '搜 索', emptyBtn: '清 空' },
  upload: { upload: '点击上传', tip: '将文件拖到此处，或' }
}
```

--------------------------------

### Avue-CRUD Tree Table Implementation

Source: https://context7.com/nmxiaowei/avue/llms.txt

Demonstrates how to configure and use the `avue-crud` component to display hierarchical data. It covers setting up the `treeOption` for lazy loading and handling tree node expansion events. The example includes sample tree data and the logic for loading child nodes on demand.

```html
<template>
  <avue-crud
    ref="crud"
    :option="treeOption"
    :data="treeData"
    :table-loading="loading"
    @tree-load="onTreeLoad"
    @row-del="rowDel"
  />
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)
const treeOption = {
  lazy: true,
  border: true,
  index: true,
  expandAll: false,
  highlightCurrentRow: true,
  column: [
    { label: '菜单名称', prop: 'name', align: 'left', width: 200 },
    { label: '路由路径', prop: 'path' },
    { label: '组件', prop: 'component' },
    { label: '排序', prop: 'sort', sortable: true }
  ]
}

const treeData = ref([
  { id: 1, name: '系统管理', path: '/system', sort: 1, hasChildren: true },
  {
    id: 2, name: '用户中心', path: '/user', sort: 2,
    children: [
      { id: 21, parentId: 2, name: '用户列表', path: '/user/list', component: 'user/List', sort: 1 },
      { id: 22, parentId: 2, name: '角色管理', path: '/user/role', component: 'user/Role', sort: 2 }
    ]
  }
])

// 懒加载子节点
function onTreeLoad(tree, treeNode, resolve) {
  // tree 为当前行数据，调用 resolve 传入子节点数组
  setTimeout(() => {
    resolve([
      { id: 11, parentId: tree.id, name: '参数配置', path: '/system/config', sort: 1 },
      { id: 12, parentId: tree.id, name: '操作日志', path: '/system/log',    sort: 2 }
    ])
  }, 500)
}

function rowDel(row, index, done) {
  done(row)
}
</script>
```

--------------------------------

### Avue Form Component Example

Source: https://context7.com/nmxiaowei/avue/llms.txt

Demonstrates the basic usage of the Avue form component with various input types, custom slots, and validation rules. Use this for creating dynamic forms with built-in features like validation and layout.

```html
<template>
  <avue-form
    ref="form"
    v-model="formData"
    :option="formOption"
    @submit="handleSubmit"
    @reset-change="handleReset"
  >
    <!-- 自定义插槽覆盖某字段 -->
    <template #username="scope">
      <avue-input v-model="formData.username" :disabled="scope.disabled" placeholder="请输入用户名" />
    </template>
    <!-- 级联选项自定义渲染 -->
    <template #region-type="{ node, data }">
      <span>{{ data.label }}</span>
      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
    </template>
  </avue-form>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({
  username: 'admin',
  role: 1,
  province: '110000',
  city: '110100',
  tags: [1, 2]
})

const formOption = {
  labelWidth: 120,
  column: [
    {
      label: '用户名',
      prop: 'username',
      formslot: true,          // 启用自定义插槽
      rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
    },
    {
      label: '角色',
      prop: 'role',
      type: 'select',
      dicData: [
        { label: '管理员', value: 1 },
        { label: '普通用户', value: 2 },
        { label: '访客', value: 3 }
      ],
      rules: [{ required: true, message: '请选择角色', trigger: 'change' }]
    },
    {
      label: '级别',
      prop: 'region',
      type: 'cascader',
      typeslot: true,           // 启用 type 区域自定义插槽
      dicData: [
        { label: '一级', value: 1, children: [{ label: '一级-1', value: 11 }, { label: '一级-2', value: 12 }] }
      ]
    },
    {
      label: '标签',
      prop: 'tags',
      type: 'checkbox',
      span: 24,
      max: 3,
      dicData: [{ label: 'Vue', value: 1 }, { label: 'React', value: 2 }, { label: 'Angular', value: 3 }]
    },
    {
      label: '备注',
      prop: 'remark',
      type: 'textarea',
      span: 24,
      maxlength: 200,
      showWordLimit: true
    },
    {
      label: '头像',
      prop: 'avatar',
      type: 'upload',
      listType: 'picture-img',
      action: '/api/upload',
      accept: 'image/*',
      tip: '仅支持 jpg/png，大小不超过 2MB'
    },
    {
      label: '图标',
      prop: 'icon',
      type: 'icon',
      iconList: [
        { label: '常用图标', list: ['el-icon-user', 'el-icon-setting', 'el-icon-bell'] }
      ]
    }
  ]
}

function handleSubmit(form, done) {
  console.log('提交表单', form)
  // 模拟异步提交，完成后调用 done() 关闭 loading
  setTimeout(() => done(), 1000)
}

function handleReset() {
  console.log('表单已重置')
}
</script>
```

--------------------------------

### Remote Dictionary Data (GET)

Source: https://context7.com/nmxiaowei/avue/llms.txt

Fetches dictionary data from a remote URL using a GET request. Supports automatic caching and dynamic parameter replacement using `{{key}}` for cascading.

```js
{
  label: '省份',
  prop: 'province',
  type: 'select',
  props: { label: 'name', value: 'code' },  // 自定义字段名映射
  dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
}
```

```js
{
  label: '城市',
  prop: 'city',
  type: 'select',
  props: { label: 'name', value: 'code' },
  dicUrl: 'https://cli.avuejs.com/api/area/getCity/{{key}}'
}
```

--------------------------------

### Vue App Initialization with AVUE and Element Plus

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/excel/index.html

Initializes a Vue application, configures AVUE and Element Plus, and sets up data for Excel import/export functionality.

```javascript
var app = Vue.createApp({ data() { return { list: [], option: { excelBtn: true, column: [{ label: 'id', prop: 'id' }, { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'sex' }] } } } }), methods: { handleGet() { window.open('/cdn/demo.xlsx') }, handleChange(file, fileLis) { this.$Export.xlsx(file.raw).then(data => { this.list = data.results; }) } } })
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Vue App Initialization with Element Plus and Avue

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/contextmenu/index.html

Initializes a Vue application, registers Element Plus and Avue plugins, and sets up basic data and methods for handling context menu interactions.

```javascript
let app = Vue.createApp({ data () { return { form: {}, list: [{ name: '张三' }, { name: '李四' }, { name: '王五' }] } }, created () { }, methods: { handleHide (row, e) { this.$message.success('隐藏回调' + JSON.stringify(row)) }, handleEvent (row, done, e) { this.form = row; done(); this.$message.success('回调信息' + JSON.stringify(row)) }, handleClick1 () { this.$message.success('菜单1' + JSON.stringify(this.form)) this.list.splice(1, 1) }, handleClick2 () { this.$message.success('菜单2' + JSON.stringify(this.form)) }, handleClick3 () { this.$message.success('菜单3' + JSON.stringify(this.form)) }, handleClick4 () { this.$message.success('菜单4' + JSON.stringify(this.form)) }, } })
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Show Basic Dialog with Element Plus

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/dialog/dialog.html

Demonstrates how to open a basic dialog using the $DialogForm component. It includes configuration for title, width, type, menu position, and custom callback functions for closing and submitting.

```javascript
var app = Vue.createApp({
  data() {
    return {
      option: {
        submitText: '完成',
        column: [
          {
            label: "姓名",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入姓名",
                trigger: "blur"
              }
            ]
          }
        ]
      },
      form: {}
    }
  },
  methods: {
    showDialog() {
      this.$DialogForm({
        title: '弹窗页面',
        width: '70%',
        type: 'drawer',
        menuPosition: 'right',
        option: this.option,
        beforeClose: (done) => {
          this.$message.success('关闭前方法')
          done()
        },
        callback: (res) => {
          console.log(res.data);
          this.$message.success('关闭等待框')
          setTimeout(() => {
            res.done()
            setTimeout(() => {
              this.$message.success('关闭弹窗')
              res.close()
            }, 1000)
          }, 1000)
        }
      })
    }
  }
})
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### $Clipboard - Clipboard Plugin

Source: https://context7.com/nmxiaowei/avue/llms.txt

The $Clipboard plugin is a Promise-based utility for copying text to the system clipboard. It resolves on success and rejects on failure.

```APIDOC
## $Clipboard - Clipboard Plugin

`$Clipboard` is a Promise-based text copy utility that writes specified text to the system clipboard, resolving on success and rejecting on failure.

### Methods

- **Clipboard(options)**: Copies text to the clipboard.
  - `options` (object): Configuration for clipboard operation.
    - `text` (string): The text to copy to the clipboard.
  - Returns a Promise that resolves on successful copy and rejects on failure.

### Example Usage

```javascript
proxy.$Clipboard({ text: copyText.value })
  .then(() => proxy.$message.success('Copy successful!'))
  .catch(() => proxy.$message.error('Copy failed, please copy manually'))
```
```

--------------------------------

### Vue.js App Configuration with Element Plus and AVUE

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/crud/page.html

Sets up a Vue.js application instance, integrating Element Plus for UI components and AVUE for advanced table features. This configuration is essential for using the provided components and functionalities.

```javascript
var app = Vue.createApp({
  data() {
    return {
      page: {
        pageSize: 20,
        pageSizes: [20, 100, 150, 200],
        total: 0
      },
      data: [],
      option: {
        index: true,
        height: 'auto',
        align: 'center',
        menuAlign: 'center',
        border: true,
        column: [
          {
            label: '姓名',
            prop: 'name',
            search: true,
            searchSpan: 24,
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '年龄',
            prop: 'sex',
            search: true,
            searchSpan: 24,
          }
        ]
      }
    }
  },
  methods: {
    error(val) {
      this.$message.error(val[0].message)
    },
    sizeChange(val) {
      this.$message.success('行数' + val)
    },
    currentChange(val) {
      this.$message.success('页码' + val)
    },
    onLoad() {
      setTimeout(() => {
        this.page.total = 40 //模拟分页
        if (this.page.currentPage === 1) {
          this.data = [
            { name: '张三', sex: '男' }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            { name: '李四', sex: '女' }
          ]
        }
      }, 0)
    }
  }
})

app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Remote Dictionary Data (POST) with Custom Headers and Query Parameters

Source: https://context7.com/nmxiaowei/avue/llms.txt

Configures fetching dictionary data via a POST request, including custom headers (e.g., for authentication tokens) and query parameters. The `{{token}}` placeholder in `dicHeaders` can be dynamically replaced.

```js
{
  label: '用户',
  prop: 'userId',
  type: 'select',
  dicUrl: '/api/user/list',
  dicMethod: 'post',
  dicHeaders: { Authorization: 'Bearer {{token}}' },
  dicQuery: { pageSize: 100 }
}
```

--------------------------------

### Vue.js App Configuration with Element Plus and AVUE

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/form/icon.html

This snippet sets up a Vue.js application, integrating Element Plus and AVUE. It defines the root component's data, including an object for icon selection and options for form columns, specifying an 'icon' type for a prop.

```javascript
var app = Vue.createApp({ data() { return { obj: { icon: "", }, option: { labelWidth: 120, column: [
          {
            label: "图标选择器",
            prop: "icon",
            type: "icon",
            iconList: [
              {
                label: "阿里图标-Symbol图标",
                list: [
                  { label: "机构", value: "#icon-jigou" },
                  { label: "短信管理", value: "#icon-duanxinguanli" },
                  { label: "发票管理系统", value: "#icon-fapiaoguanlixitong" },
                  { label: "角色", value: "#icon-jiaose" },
                  { label: "黑名单", value: "#icon-heimingdan2" },
                  { label: "KHCFDC_附件", value: "#icon-fujian4" },
                  { label: "文档", value: "#icon-wendang3" },
                  { label: "刷卡", value: "#icon-shuaka" },
                  { label: "停车", value: "#icon-tingche3" },
                  { label: "对象存储OSS", value: "#icon-duixiangcunchuOSS" },
                  { label: "反馈", value: "#icon-fankui2" },
                  { label: "短信", value: "#icon-ziyuan1" },
                  { label: "对象存储服务", value: "#icon-beikongshuiwupingtaimenhu-tubiao_duixiangcunchufuwu" },
                  { label: "数据库_jurassic", value: "#icon-jurassic_data" },
                  { label: "日志", value: "#icon-rizhi1" },
                  { label: "权限", value: "#icon-quanxian4" },
                  { label: "订单", value: "#icon-5" },
                  { label: "机构", value: "#icon-jigou1" },
                  { label: "机构人员", value: "#icon-jigourenyuan" },
                  { label: "角色管理", value: "#icon-jiaoseguanli4" },
                  { label: "角色管理", value: "#icon-jiaoseguanli5" },
                  { label: "数据监控", value: "#icon-shujujiankong" },
                  { label: "活动展示", value: "#icon-huodongzhanshi" },
                  { label: "vip invitation", value: "#icon-vipinvitation" },
                ]
              },
              {
                label: "基本图标",
                list: [
                  { label: "名称1", value: "el-icon-info" },
                  { label: "名称2", value: "el-icon-error" },
                  { label: "名称3", value: "el-icon-success" },
                  { label: "名称4", value: "el-icon-warning" },
                  { label: "名称5", value: "el-icon-question" },
                ]
              },
              {
                label: "方向图标",
                list: [
                  "el-icon-info",
                  "el-icon-back",
                  "el-icon-arrow-left",
                  "el-icon-arrow-down",
                  "el-icon-arrow-right",
                  "el-icon-arrow-up",
                ]
              },
              {
                label: "符号图标",
                list: [
                  "el-icon-plus",
                  "el-icon-minus",
                  "el-icon-close",
                  "el-icon-check",
                ]
              },
              {
                label: "阿里云图标",
                list: [
                  "iconfont icon-zhongyingwen",
                  "iconfont icon-rizhi1",
                  "iconfont icon-bug",
                  "iconfont icon-qq1",
                  "iconfont icon-weixin1",
                ]
              },
            ]
          },
        ],
      },
    },
  };
}, });

app.use(ElementPlus);
app.use(AVUE);

app.mount("#app");
```

--------------------------------

### Vue.js Permission Management with Element Plus

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/crud/permission.html

This snippet sets up a Vue application with data properties for managing permissions and table configurations. It uses a watcher to dynamically change permission states.

```javascript
var app = Vue.createApp({ data() { return { text: true, permission: { delBtn: false, addBtn: false, menu: false }, option: { expand: true, column: [{ label: '姓名', prop: 'name' }, { label: '年龄', prop: 'sex' }] }, data: [{ id: 1, name: '张三', sex: 12, }, { id: 2, name: '李四', sex: 20, }] } }, watch: { text() { if (this.text === true) { this.permission = { delBtn: false, addBtn: false, menu: false } } else { this.permission = { delBtn: true, addBtn: true, menu: true } } } }, methods: { expandChange(row, expendList) { this.$message.success('展开回调') }, } })
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Copy Text to Clipboard with $Clipboard Plugin

Source: https://context7.com/nmxiaowei/avue/llms.txt

The $Clipboard plugin is a Promise-based utility for copying text to the system clipboard. It resolves on success and rejects on failure, providing feedback through then/catch blocks.

```html
<template>
  <div>
    <el-input v-model="copyText" placeholder="输入要复制的内容" style="width:300px" />
    <el-button type="primary" @click="handleCopy" style="margin-left:8px">一键复制</el-button>
  </div>
</template>
```

```javascript
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const copyText = ref('https://avuejs.com')

function handleCopy() {
  proxy.$Clipboard({ text: copyText.value })
    .then(() => proxy.$message.success('复制成功！'))
    .catch(() => proxy.$message.error('复制失败，请手动复制'))
}
```

--------------------------------

### Import and Use Avue.js in a Vue Application

Source: https://github.com/nmxiaowei/avue/blob/master/README.md

Import the Avue library and its CSS globally in your Vue application's main entry point. Ensure you use the correct import paths.

```javascript
// 完整引入
import { createApp } from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/dist/avue.css'
import App from './App.vue'

const app = createApp(App)
app.use(Avue)
app.mount('#app')
```

--------------------------------

### $Export - Excel Import/Export Plugin

Source: https://context7.com/nmxiaowei/avue/llms.txt

The $Export plugin provides methods to export data to Excel (.xlsx) and import data from Excel files. It requires FileSaver.js and xlsx.js dependencies.

```APIDOC
## $Export - Excel Import/Export Plugin

`$Export` plugin provides `excel()` method to export table data to `.xlsx` file, and `xlsx()` method to read Excel from local file and return parsing results, requires `FileSaver.js` and `xlsx.js` dependencies.

### Methods

- **excel(options)**: Exports data to an Excel file.
  - `options` (object): Configuration for export.
    - `title` (string): The title of the Excel file.
    - `columns` (array): Column definitions for the Excel sheet.
    - `data` (array): The data to be exported.
  - Returns a Promise that resolves when export is complete.

- **xlsx(file)**: Parses an Excel file.
  - `file` (File): The Excel file to parse.
  - Returns a Promise that resolves with an object containing `header` (array) and `results` (array of objects).

### Example Usage

```javascript
// Export Excel
proxy.$Export.excel({
  title: 'Employee List_' + new Date().toLocaleDateString(),
  columns: option.column,
  data: tableData.value
}).then(() => {
  proxy.$message.success('Export successful')
})

// Import Excel
function handleImport(file) {
  proxy.$Export.xlsx(file.raw).then(({ header, results }) => {
    console.log('Header', header)
    console.log('Data', results)
    tableData.value = results
  })
}
```
```

--------------------------------

### Element Plus Form with Select and Tree Select Components

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/form/selectslot.html

This snippet configures a form with single select, single tree select, and multi-select tree components. It utilizes `dicUrl` to fetch data for provinces and `typeformat` to customize the display of selected items. Ensure Element Plus and AVUE are used.

```javascript
let baseUrl = 'https://cli.avuejs.com/api/area'
var app = Vue.createApp({
  data() {
    return {
      obj: {},
      option: {
        labelWidth: 100,
        column: [
          {
            label: '单选',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getProvince`,
            typeformat(item, label, value) {
              return `值:${item[label]}-名:${item[value]}`
            },
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '单选树省份',
            prop: 'code',
            type: 'tree',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getProvince`,
            typeformat(item, label, value) {
              return `值:${item[label]}-名:${item[value]}`
            },
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '多选树省份',
            prop: 'codes',
            type: 'tree',
            props: {
              label: 'name',
              value: 'code'
            },
            multiple: true,
            dicUrl: `${baseUrl}/getProvince`,
            typeformat(item, label, value) {
              return `值:${item[label]}-名:${item[value]}`
            },
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {}
})
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Avue Utility Functions

Source: https://context7.com/nmxiaowei/avue/llms.txt

These utility functions are globally available via `proxy.xxx` in Vue components. They include deep cloning, safe data retrieval, array/object searching, file downloading, DataURL to File conversion, dynamic script loading, random ID generation, and JSON validation.

```javascript
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

// deepClone — 深克隆对象（基于 lodash cloneDeep）
const original = { user: { name: '张三', roles: [1, 2] } }
const cloned = proxy.deepClone(original)
cloned.user.name = '李四'
console.log(original.user.name) // '张三'（原对象未受影响）

// validData — 安全取值（val 为 boolean 则直接返回，否则为空时返回默认值）
console.log(proxy.validData(false, true))  // false
console.log(proxy.validData(null, '默认') ) // '默认'
console.log(proxy.validData('hello', '默认')) // 'hello'

// findObject — 在列数组中按字段名（prop）查找对应列配置
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age',  label: '年龄' }
]
const col = proxy.findObject(columns, 'age')
console.log(col) // { prop: 'age', label: '年龄' }

// findArray — 在字典数组中按 value 查找对应项（或其下标）
const dic = [{ label: '男', value: 1 }, { label: '女', value: 0 }]
console.log(proxy.findArray(dic, 1))              // { label: '男', value: 1 }
console.log(proxy.findArray(dic, 1, 'value', true)) // 0（下标）

// downFile — 触发文件下载（支持 URL 字符串或 Blob 对象）
proxy.downFile('https://example.com/report.pdf', '月度报表.pdf')
const blob = new Blob(['Hello World'], { type: 'text/plain' })
proxy.downFile(blob, 'hello.txt')

// dataURLtoFile — 将 base64 DataURL 转换为 File 对象
const file = proxy.dataURLtoFile('data:image/png;base64,iVBORw0K...', 'screenshot.png')
console.log(file instanceof File) // true

// loadScript — 动态异步加载外部 JS/CSS 资源（已加载则跳过）
proxy.loadScript('js', 'https://cdn.example.com/chart.min.js').then(() => {
  console.log('脚本加载完成，可以使用 Chart 对象了')
})
proxy.loadScript('css', 'https://cdn.example.com/theme.css', 'head')

// randomId — 生成 16 位随机字母字符串（用于临时 key）
const id = proxy.randomId()
console.log(id) // 例如：'xKdMpLoQrBtNwZaY'

// isJson — 判断值是否为对象或对象数组
console.log(proxy.isJson({ a: 1 }))  // true
console.log(proxy.isJson([{ a: 1 }])) // true
console.log(proxy.isJson([1, 2, 3]))  // false
```

--------------------------------

### Export Excel Data with $Export Plugin

Source: https://context7.com/nmxiaowei/avue/llms.txt

Use the $Export.excel() method to export table data to an .xlsx file. Requires FileSaver.js and xlsx.js. The method accepts title, columns, and data as parameters.

```html
<template>
  <div>
    <!-- 导入按钮 -->
    <el-upload action="" :show-file-list="false" :on-change="handleImport">
      <el-button type="primary">导入 Excel</el-button>
    </el-upload>

    <!-- 导出按钮 -->
    <el-button type="success" @click="handleExport">导出 Excel</el-button>

    <!-- 展示导入/导出的数据 -->
    <avue-crud :option="option" :data="tableData" />
  </div>
</template>
```

```javascript
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const tableData = ref([
  { id: 1, name: '张三', age: 28, dept: '研发部' },
  { id: 2, name: '李四', age: 32, dept: '产品部' }
])

const option = {
  excelBtn: true,    // 开启 crud 内置导出按钮
  column: [
    { label: 'ID', prop: 'id' },
    { label: '姓名', prop: 'name' },
    { label: '年龄', prop: 'age' },
    { label: '部门', prop: 'dept' }
  ]
}

// 导出 Excel（使用 $Export 插件）
function handleExport() {
  proxy.$Export.excel({
    title: '员工列表_' + new Date().toLocaleDateString(),
    columns: option.column,
    data: tableData.value
  }).then(() => {
    proxy.$message.success('导出成功')
  })
}

// 导入 Excel（解析为 JSON）
function handleImport(file) {
  proxy.$Export.xlsx(file.raw).then(({ header, results }) => {
    console.log('表头', header)
    console.log('数据', results)
    // results 为对象数组，key 为 Excel 首行的列名
    tableData.value = results
  })
}
```

--------------------------------

### $Watermark - Watermark Plugin

Source: https://context7.com/nmxiaowei/avue/llms.txt

The $Watermark plugin allows adding non-removable text watermarks to the entire page (global) or a specific DOM container (local). The instance returned has a `.remove()` method to destroy the watermark.

```APIDOC
## $Watermark - Watermark Plugin

`$Watermark` plugin supports adding non-removable text watermarks to the entire page (global watermark) or a specified DOM container (local watermark), returns an instance object, calling `.remove()` can destroy the watermark.

### Methods

- **Watermark(options)**: Adds a watermark.
  - `options` (object): Configuration for the watermark.
    - `text` (string): The watermark text.
    - `fontSize` (string): Font size of the watermark text (e.g., '16px').
    - `color` (string): Color of the watermark text (e.g., 'rgba(180,180,180,0.3)').
    - `width` (number): Width of the watermark tile.
    - `height` (number): Height of the watermark tile.
    - `degree` (number): Rotation degree of the watermark.
    - `id` (string, optional): The ID of the DOM element to apply the local watermark to. If not provided, applies globally.
  - Returns an instance object with a `remove()` method.

### Methods

- **remove()**: Destroys the watermark instance.

### Example Usage

```javascript
// Add global watermark
globalWm.value = proxy.$Watermark({
  text: 'Internal Document - Do Not Distribute',
  fontSize: '16px',
  color: 'rgba(180,180,180,0.3)',
  width: 200,
  height: 150,
  degree: -20
})

// Add local watermark
localWm.value = proxy.$Watermark({
  id: 'preview-box',
  text: 'For Preview Only',
  fontSize: '14px',
  width: 120,
  height: 80,
  color: 'rgba(100,149,237,0.4)'
})

// Remove watermarks
function removeWatermarks() {
  globalWm.value?.remove()
  localWm.value?.remove()
}
```
```

--------------------------------

### Add Global Watermark with Avue

Source: https://github.com/nmxiaowei/avue/blob/master/examples/element-plus/watermark/index.html

Use this method to add a global watermark to the entire page. It returns an object that can be used to remove the watermark later.

```javascript
var app = Vue.createApp({ data() { return { obj: '', obj1: '' } }, methods: { submit() { this.$message.success('添加水印成功') this.obj = this.$Watermark({ text: 'avue全局水印演示' }) }, submit1() { this.$message.success('添加水印成功') this.obj1 = this.$Watermark({ id: 'test', fontSize: '14px', width: 120, height: 80, text: 'avue局部水印演示' }) }, del() { this.obj.remove(); this.obj1.remove(); }, } })
app.use(ElementPlus)
app.use(AVUE)
app.mount('#app')
```

--------------------------------

### Add Global and Local Watermarks with $Watermark

Source: https://context7.com/nmxiaowei/avue/llms.txt

The $Watermark plugin can add text watermarks to the entire page or a specific DOM element. Use the .remove() method on the returned instance to destroy the watermark. Configuration options include text, font size, color, and dimensions.

```html
<template>
  <div>
    <el-button type="primary" @click="addGlobalWatermark">添加全局水印</el-button>
    <el-button type="primary" @click="addLocalWatermark">添加局部水印</el-button>
    <el-button type="danger" @click="removeWatermarks">移除所有水印</el-button>
    <div id="preview-box" style="width:400px; height:300px; border:1px solid #ddd;" />
  </div>
</template>
```

```javascript
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const globalWm = ref(null)
const localWm = ref(null)

// 全局水印（覆盖整个 document.body）
function addGlobalWatermark() {
  globalWm.value = proxy.$Watermark({
    text: '内部资料 - 禁止外传',
    fontSize: '16px',
    color: 'rgba(180,180,180,0.3)',
    width: 200,
    height: 150,
    degree: -20
  })
}

// 局部水印（仅作用于指定 id 的容器）
function addLocalWatermark() {
  localWm.value = proxy.$Watermark({
    id: 'preview-box',
    text: '仅供预览',
    fontSize: '14px',
    width: 120,
    height: 80,
    color: 'rgba(100,149,237,0.4)'
  })
}

// 移除水印
function removeWatermarks() {
  globalWm.value?.remove()
  localWm.value?.remove()
}
```