avue-design

name avue-design description Avue 组件代码生成与配置指南。当用户需要创建、配置或生成基于 Avue (avue-crud, avue-form, avue-tree 等) 的 Vue 页面代码时使用此 skill。覆盖 CRUD 表格、表单、树组件、数据展示等全部 Avue 组件。支持 Composition API 和 Options API 两种代码风格。当用户提到 avue、crud表格、动态表单、JSON配置表单、低代码表单、avue-crud、avue-form 等关键词时，务必使用此 skill。 Avue Design - 组件代码生成 Skill 集合 Avue 是基于 Vue3 + Element-Plus 的低代码前端框架，通过 JSON 配置生成页面。版本：v3.8.2，MIT 协议。 快速安装 npm i @smallwei/avue -S # 或 yarn add @smallwei/avue -S import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' import { createApp } from 'vue' import Avue from '@smallwei/avue' import '@smallwei/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： // import axios from 'axios' // app.use(Avue, { axios }) 参考文件导航 根据用户需求，读取对应的参考文件获取完整配置信息： 基础配置 参考文件 何时读取 references/global-config.md 全局配置、安装、国际化、云存储 references/api-style-guide.md 需要生成 Composition API 或 Options API 代码时 references/utility-apis.md 使用 Avue 全局工具函数 ($DialogForm, $Clipboard 等) avue-crud (CRUD 表格组件) 参考文件 何时读取 references/crud-core.md CRUD 基础属性、事件、方法、插槽、按钮、弹窗、分页 references/crud-column.md 列配置、字典、排序、过滤、格式化、渲染 references/crud-search.md 搜索栏配置、搜索字段属性 references/crud-form-dialog.md CRUD 弹窗表单配置、验证规则、字段状态控制 references/crud-features.md 高级功能：树表、虚拟滚动、卡片模式、行编辑、导入导出、拖拽排序、权限控制等 avue-form (表单组件) 参考文件 何时读取 references/form-core.md 表单基础属性、事件、方法、插槽、布局 references/form-field-types.md 全部字段类型 (input/select/date/upload 等 27+ 种) 的详细配置属性 references/form-advanced.md 字典配置、验证规则、动态子表单、文件上传(含云存储)、字段联动 其他组件 参考文件 何时读取 references/tree-component.md avue-tree 树组件 references/data-display.md 数据展示组件 (DataDisplay, DataCard 等) references/other-components.md Card、DialogForm、Calendar、Flow、Login、Tabs 等独立组件 代码生成核心规则 1. 两种 API 风格 生成代码时必须确认用户要用哪种风格（默认 Composition API）。详细模板见 references/api-style-guide.md 。 Composition API (推荐) ：使用 <script setup> ， ref() / reactive() 声明数据，箭头函数定义方法。 Options API ：使用 export default {} ， data() 返回数据， methods 对象定义方法。 2. avue-crud 基本结构 <template> <basic-container> <avue-crud ref="crud" :option="option" :data="data" :table-loading="loading" v-model="form" v-model:page="page" v-model:search="search" :permission="permissionList" :before-open="beforeOpen" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @refresh-change="refreshChange" @on-load="onLoad" /> </basic-container> </template> 3. avue-form 基本结构 <template> <avue-form ref="form" v-model="formData" :option="option" @submit="handleSubmit" @reset-change="handleReset" /> </template> 4. option 配置核心 option 是 Avue 组件的核心配置对象，包含： 表格/表单级属性（size, height, border, stripe 等） column 数组：每个字段的完整配置（label, prop, type, rules, dicData 等） group 数组：分组配置（仅表单） const option = { // 表格级配置 height : 'auto' , border : true , stripe : true , index : true , selection : true , // 列配置 column : [ { label : '名称' , prop : 'name' , type : 'input' , // 字段类型 search : true , // 启用搜索 span : 12 , // 表单中占栅格数 rules : [{ required : true , message : '请输入名称' , trigger : 'blur' }], // 字典配置 dicData : [], // 本地字典 dicUrl : '' , // 远程字典URL props : { label : 'label' , value : 'value' }, } ] } 5. 字段类型速查 类型 type 值 说明 文本输入 input 支持 password/textarea/phone/currency/bankCard/idCard/email/code/plate/ip/mac/uscc 子类型 数字输入 number 数字步进器 下拉选择 select 单选/多选/远程搜索/分组 级联选择 cascader 多级联动选择 多选框 checkbox 多选组 单选框 radio 单选组 日期 date/datetime/daterange/datetimerange/week/month/year/dates 日期时间选择 时间 time/timerange 时间选择 开关 switch 布尔切换 文件上传 upload 支持阿里云/七牛/腾讯COS 数组 array 数组输入框 图片 img 图片输入 链接 url 超链接输入 树选择 tree 树型选择器 标签输入 input-tag 标签输入 (3.6.0+) 提及 mention @提及组件 (3.6.0+) 表格选择 input-table 表格弹窗选择 颜色选择 color 颜色选择器 Cron表达式 input-cron Cron可视化配置 (3.8.2+) 图标选择 icon 图标选择器 地图选择 map 高德地图坐标选择 评分 rate 星级评分 滑块 slider 滑动条 标题 title 分组标题 动态表单 dynamic 子表单/子表格 6. 关键注意事项 column 可以是数组也可以是对象格式（3.2.15+，用 prop 做 key） 深层数据绑定用 bind 属性： bind: 'info.address' 字典联动用 cascader 属性指定子字段 prop 字段动态控制用 control 属性（支持 Promise，3.5.0+） 表单分组用 group 配置，标签页显示设 tabs: true 所有组件都支持 render 函数自定义渲染（3.4.2+） CRUD 弹窗类型用 dialogType: 'drawer' 可改为抽屉模式 搜索字段通过在 column 中设 search: true 启用