v0.1.0 · 中后台组件库

Evoke Business UI

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

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

50+通用与业务组件

20+图表类型（Canvas 自绘）

8 套场景示例工程

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

一致的 API 约定

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

业务组件

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

Canvas 自绘图表

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

设计令牌与暗色模式

语义化 CSS 变量分层（颜色 / 字体 / 间距 / 圆角 / 动效），切换暗色只需一个类名，品牌主色可覆盖。

国际化与无障碍

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

Electron / 离线可用

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

组件分区

总览全部组件一览与检索 业务组件筛选 / 表格 / 审计…通用与布局按钮 / 文本 / 卡片 / 栅格…数据录入表单家族 / 选择器 / 上传…数据展示表格 / 描述列表 / 时间轴…图表折线 / 饼图 / 热力 / 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>
  <ev-search-filter v-model="query" :fields="fields" @search="onSearch" />
  <ev-data-table
    title="订单列表"
    :columns="columns"
    :data="rows"
    :total="total"
    v-model:page="page"
    @page-change="load"
  />
</template>

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

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