基于 Vue 3 和 Arco Design Vue 的高级业务组件库，面向中后台系统沉淀表单、表格、上传、图标、弹窗、抽屉和文本状态等高频业务范式。

Acro Business 不替代 Arco Design Vue 的基础组件能力，而是在其之上提供更贴近业务交付的配置协议、组合组件和扩展入口。

过去我曾基于 Element Plus 开发了 Advanced Element UI，应广大网友需求，这次基于 Arco Design Vue 对原 Advanced Element UI 进行了底层重构，遵循 Arco Design Vue 的组件风格和样式规范，得益于 Codex 的辅助，对组件细节也进行了增强。

文档

Acro Business Docs

特性

• 配置驱动： 使用 FormSchema 和 TableColumn 描述字段、列、布局、校验、格式化和交互。
• 业务范式复用： 内置表单引擎、表格引擎、上传、弹窗、抽屉、状态文本和组合输入器。
• 继承 Arco 能力： 保留 Arco Design Vue 的 props、事件、插槽和主题体系。
• 扩展友好： 支持注册自定义表单组件、表格编辑组件和 Iconify 图标集。
• TypeScript 优先： 导出组件实例、props、emits、schema、columns、工具函数等类型。
• 国际化： 内置 zh-CN 和 en-US，支持运行时切换和自定义语言包覆盖。

环境要求

• Node.js >= 18.0.0
• pnpm >= 8.0.0
• Vue >= 3.2.0
• @arco-design/web-vue >= 2.58.0

安装

pnpm add arco-business @arco-design/web-vue

快速开始

全量注册

import { createApp } from 'vue'
// 引入Arco组件库
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
// 引入Arco图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
// 引入本项目组件库
import AcroBusiness from 'arco-business'
// 引入本项目样式
import 'arco-business/style.css'

import App from './App.vue'

createApp(App).use(ArcoVue).use(AcroBusiness).mount('#app')

按需使用

<template>
  <AbForm :schemas="schemas" v-model:model="model" controlled />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AbForm, type FormSchema } from 'arco-business'
import 'arco-business/style.css'

const model = ref({})

const schemas: FormSchema[] = [
  {
    field: 'name',
    label: '名称',
    component: 'Input',
    formItemProps: {
      autoRules: ['isRequired']
    }
  }
]
</script>

组件

| 组件 | 说明 | | --- | --- | | AbForm | Schema 驱动的业务表单，支持布局、动态属性、校验、只读态和自定义组件。 | | AbTable | 面向列表页和可编辑表格的业务表格，支持操作列、选择、展开、合计和编辑态。 | | AbIcon | 基于 Iconify 的图标组件，支持内置图标和自定义图标集。 | | AbUpload | 业务上传组件，统一文件字段映射、列表展示和上传交互。 | | AbModal | 对 Arco Modal 的业务封装，适合标准确认、表单弹窗和异步关闭。 | | AbDrawer | 对 Arco Drawer 的业务封装，适合侧边编辑、详情和流程操作。 | | AbText | 增强文本展示，支持状态点、块状态、高亮、脱敏和格式化。 | | AbComboInput | 组合输入器，适合前缀选择、复合字段和条件输入场景。 |

扩展能力

注册自定义组件

import AcroBusiness from 'arco-business'
import UserPicker from './components/UserPicker.vue'

app.use(AcroBusiness, {
  formImports: [
    {
      name: 'UserPicker',
      component: UserPicker,
      config: {
        needAllowClear: true,
        needSelectPlaceholder: true
      }
    }
  ],
  tableImports: [
    {
      name: 'UserPicker',
      component: UserPicker
    }
  ]
})

注册自定义图标集

import AcroBusiness from 'arco-business'

app.use(AcroBusiness, {
  iconCollections: [
    {
      prefix: 'biz',
      icons: {
        approve: {
          body: '<path d="M4 12l4 4L20 6"/>'
        }
      }
    }
  ]
})

设置语言

import AcroBusiness, { setLocale } from 'arco-business'

app.use(AcroBusiness, {
  locale: 'zh-CN'
})

setLocale('en-US')

工具函数

组件库导出常用业务工具：

• getAutoRulesMap：获取内置快捷校验规则。
• useDict：处理字典映射。
• formatAmount、formatDate、formatSensitive：金额、日期和脱敏格式化。
• findNode、findNodes：树结构节点查询。
• setLocale、getCurrentLocale、setCustomLocale：语言切换和语言包覆盖。

本地开发

# 安装依赖
pnpm install

# 启动文档站
pnpm dev

# 类型检查
pnpm check

# 构建组件库
pnpm build

# 构建文档站
pnpm docs:build

文档站源码位于 docs 目录，默认开发端口为 8989。

发布前检查

pnpm build
pnpm prepack:check
npm pack --dry-run

更新日志

查看 CHANGELOG.md。

许可证

MIT