@smallwei/avue 3.8.2 → 3.8.3

package/README.md

@@ -1,86 +1,206 @@
-<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>
-
-<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>
-
-# Avue.js
-
-Avue.js 是基于现有的 element-plus 库进行的二次封装，从而简化一些繁琐的操作，核心理念为**数据驱动视图**。主要的组件库针对 table 表格和 form 表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富的数据展示组件，让开发变得更加容易。
-
-## ✨ 特性
-
-- 🚀 **高效开发**：基于数据驱动视图的理念，大大减少了代码量
-- 📦 **开箱即用**：丰富的表格、表单配置及多种常用组件
-- 🛠️ **强大定制**：高度灵活的配置项，满足各种复杂场景需求
-- 🔌 **扩展性强**：支持自定义组件和多种交互方式
-- 📚 **详尽文档**：完善的文档和示例，快速上手无烦恼
-
-## 🔧 安装
-
-```bash
-# 使用 pnpm 安装（推荐）
-pnpm add @smallwei/avue
-
-# 或使用 npm 安装
-npm install @smallwei/avue
-
-# 或使用 yarn 安装
-yarn add @smallwei/avue
-```
-
-## 📦 使用
-
-```js
-// 完整引入
-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')
-```
-
-## 📄 文件说明
-
-| 文件名      | 用途     | 说明 |
-| ----------- | -------- | ---- |
-| avue.min.js | 生产环境 | 压缩优化版本，体积更小 |
-| avue.js     | 开发环境 | 包含完整的调试信息 |
-
-## 📚 文档与示例
-
-要查看详细文档和在线示例，请访问：[官方文档](https://avuejs.com)
-
-## 🌈 相关产品
-
-除了核心框架外，我们还提供以下解决方案：
-
--  **[数据大屏](https://data.avuejs.com)** - 专业的可视化数据大屏解决方案
--  **[数据组态](http://iot.avuejs.com)** - 工业物联网数据组态平台
--  **[AI大模型](http://ai.avuejs.com)** - 智能AI应用解决方案
-
-## 🤝 参与贡献
-
-1. Fork 本仓库
-2. 新建 Feature 分支
-3. 提交代码
-4. 创建 Pull Request
-
-## ❓ 问答与支持
-
-有关问题和支持，请使用[issues](https://gitee.com/smallweigit/avue/issues)。我们会尽快为您解答。
-
-> **注意**：提交问题前，请务必提供详细的问题过程和截图，不符合准则的问题将会被拒绝。
-
-
-## 📄 开源协议
-
-[MIT](http://opensource.org/licenses/MIT)
-
-Copyright (c) 2017-present, Smallwei
+<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>
+
+<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.8.2-blue.svg" alt="version"></a>
+</p>
+
+# Avue.js
+
+Avue.js 是基于 Vue 3 与 Element Plus 的数据驱动型组件库，围绕表单、表格和业务配置场景做了进一步封装。它通过统一的配置方式降低重复开发成本，让 CRUD、表单联动、数据展示和常见业务组件的搭建更直接。
+
+适合以下场景：
+
+- 后台管理系统的快速搭建
+- 表单和表格配置较多的业务系统
+- 需要统一交互规范的中后台项目
+- 需要复用常见业务组件的企业应用
+
+## 特性
+
+- 数据驱动视图，通过配置生成常见业务界面
+- 深度适配 Vue 3 与 Element Plus 生态
+- 内置 `avue-crud`、`avue-form`、`avue-search` 等高频组件
+- 提供上传、导出、打印、水印、剪贴板、截图等常用能力
+- 支持国际化、全局配置、Axios 注入和类型声明
+- 附带大量本地示例，便于快速对照接入
+
+## 环境要求
+
+- `vue >= 3.2.0`
+- `element-plus >= 2.2.0`
+- `@element-plus/icons-vue >= 2.0.0`
+
+以上依赖为当前包的 `peerDependencies`，安装 Avue 时需要一并安装。
+
+## 安装
+
+```bash
+pnpm add vue element-plus @element-plus/icons-vue @smallwei/avue
+```
+
+或使用其他包管理器：
+
+```bash
+npm install vue element-plus @element-plus/icons-vue @smallwei/avue
+```
+
+```bash
+yarn add vue element-plus @element-plus/icons-vue @smallwei/avue
+```
+
+## 快速开始
+
+```ts
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+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",
+  menuType: "text",
+  locale: "zh-cn",
+});
+
+app.mount("#app");
+```
+
+基础用法示例：
+
+```vue
+<template>
+  <avue-form v-model="form" :option="option" />
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+
+const form = reactive({
+  name: "",
+  status: 1,
+});
+
+const option = ref({
+  submitBtn: true,
+  emptyBtn: true,
+  column: [
+    {
+      label: "姓名",
+      prop: "name",
+      span: 24,
+    },
+    {
+      label: "状态",
+      prop: "status",
+      type: "radio",
+      dicData: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      span: 24,
+    },
+  ],
+});
+</script>
+```
+
+## 全局配置
+
+`app.use(Avue, options)` 支持常见全局参数：
+
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| `size` | `string` | 全局组件尺寸 |
+| `calcHeight` | `number` | 全局高度修正值 |
+| `menuType` | `string` | 操作区按钮展示类型 |
+| `formOption` | `Record<string, any>` | 表单默认配置 |
+| `crudOption` | `Record<string, any>` | CRUD 默认配置 |
+| `appendToBody` | `boolean` | 弹层类组件是否挂载到 `body` |
+| `locale` | `string \| object` | 语言配置 |
+| `i18n` | `any` | 自定义国际化处理器 |
+| `axios` | `any` | 自定义请求实例 |
+| `canvas` | `object` | 水印默认配置 |
+| `qiniu` | `object` | 七牛上传默认配置 |
+| `ali` | `object` | 阿里云上传默认配置 |
+
+## 组件与能力
+
+当前仓库内置的能力主要包括：
+
+- 表单与表格：`avue-form`、`avue-crud`、`avue-search`
+- 输入组件：`avue-input`、`avue-select`、`avue-input-tree`、`avue-input-table`
+- 业务组件：`avue-login`、`avue-tabs`、`avue-tree`、`avue-chat`、`avue-flow`
+- 数据展示：`avue-card`、`avue-comment`、`avue-count-up`、`avue-article`
+- 插件能力：导出、打印、截图、剪贴板、水印、日志、图片预览、弹窗表单
+
+更完整的使用方式可参考文档站和仓库示例。
+
+## 文档与示例
+
+- 官方文档：https://avuejs.com
+- Gitee 仓库：https://gitee.com/smallweigit/avue
+- 问题反馈：https://gitee.com/smallweigit/avue/issues
+- Element Plus 示例：`examples/element-plus`
+- 数据展示示例：`examples/data`
+
+## 本地开发
+
+```bash
+pnpm install
+pnpm dev
+```
+
+常用命令：
+
+```bash
+pnpm dev
+pnpm build
+pnpm typecheck
+pnpm gen:locale
+pnpm gen:version
+```
+
+## 目录结构
+
+| 目录 | 说明 |
+| --- | --- |
+| `src` | 组件与插件源码入口 |
+| `packages` | 组件实现与业务模块 |
+| `styles` | 样式资源 |
+| `types` | TypeScript 类型声明 |
+| `examples` | 本地示例与调试页面 |
+| `build` | 构建与版本生成脚本 |
+| `lib` | 构建产物 |
+
+## 相关产品
+
+- 数据大屏：https://data.avuejs.com
+- 物联网平台：http://iot.avuejs.com
+- AI 应用平台：http://ai.avuejs.com
+
+## 参与贡献
+
+1. Fork 本仓库
+2. 创建功能分支
+3. 提交变更
+4. 发起 Pull Request
+
+提交问题时请尽量提供复现步骤、运行环境、错误日志和截图，便于快速定位。
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2017-present, Smallwei