v0.12.0 · 中后台组件库

Evoke Business UI

面向中后台管理界面的 Vue3 组件库：基础组件覆盖按钮、表单、表格、弹层等常见界面元素，业务组件面向筛选、表格、审计等数据管理场景组合使用，另内置 Canvas 自绘图表引擎。

快速开始组件总览在线示例中心

145+通用与业务组件

29图表类型（Canvas 自绘）

9 套场景示例工程

441内置图标（可按需扩展）

一致的 API 约定

组件统一 kebab-case 事件名与 v-model 约定，props / events / slots 按同一套规则组织，查阅一个组件的用法即可类推到其他组件。

业务组件

筛选表单、数据表格、状态标签、审计时间线、导入导出面板、列设置等，面向中后台数据管理页面组合使用。

Canvas 自绘图表

折线、饼图、热力、K 线等 29 种图表类型，绘制层不依赖第三方图形库；tooltip / 图例 / 联动 / 导出内建。

暗色模式与品牌换色

切换暗色只需一个类名；品牌主色可整体覆盖，状态色梯度自动成套。

国际化与无障碍

内置中英文语言包与 locale 切换，浮层组件带焦点陷阱、滚动锁定与键盘可达性处理。

Electron / 离线可用

模块顶层不访问 DOM、字体 base64 内联、file:// 协议可运行，适配桌面端与内网环境。

sibling

做官网或营销页？

看看同族的姊妹库 Evoke UI：Clean Navy 设计语言的 Vue3 官网组件库，61 个组件、明暗双主题与运行时换色，官网、落地页与个人主页开箱即用。

访问 Evoke UI 文档

组件分区

总览全部组件一览与检索 业务组件筛选 / 表格 / 审计…通用与布局按钮 / 文本 / 卡片 / 栅格…数据录入表单家族 / 选择器 / 上传…数据展示表格 / 描述列表 / 时间轴…图表折线 / 饼图 / 热力 / K 线…

30 秒上手

1. 安装

bash

npm install @wil-works/evoke-business-ui
# 或
pnpm add @wil-works/evoke-business-ui

2. 引入

import { createApp } from 'vue'
import EvokeBusinessUI from '@wil-works/evoke-business-ui'
import '@wil-works/evoke-business-ui/styles'
import App from './App.vue'

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

3. 在页面中使用

vue

<template>
  <eb-search-filter v-model="query" :fields="fields" @search="onSearch" />
  <eb-data-table
    title="订单列表"
    :columns="columns"
    :data="rows"
    :total="total"
    v-model:page="page"
    @page-change="load"
  />
</template>

<script setup>
// 组件全局注册后直接使用；fields / columns 均为配置式声明
</script>

更多能力见快速开始与组件总览。