avue-design

# Avue Design - 组件代码生成 Skill 集合 Avue 是基于 Vue3 + Element-Plus 的低代码前端框架，通过 JSON 配置生成页面。版本：v3.8.2，MIT 协议。 ## 快速安装 ```bash npm i @smallwei/avue -S # 或 yarn add @smallwei/avue -S ``` ```javascript 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 基本结构 ```vue <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 基本结构 ```vue <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` 数组：分组配置（仅表单） ```javascript 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` 启用 --- > Source: [chillzhuang/SpringBlade](https://github.com/chillzhuang/SpringBlade) — distributed by [TomeVault](https://tomevault.io). <!-- tomevault:4.0:skill_md:2026-06-15 -->