@apform-ui/core

@apform-ui/core

企业级 Vue 3 UI 组件库：Element Plus 为底座 peer，包装在本库消费栈下；el-* 算本库可用能力，外观以本库 Design Tokens 为准。

当前版本：1.19.0（多入口 core / chat / bpmn）。交互文档站为仓库内 playground（pnpm docs:dev）。

定位

安装

npm install @apform-ui/core

需要同时安装 peer dependencies：

npm install element-plus@2.14.2 vue@^3.5.0

可选 peer（按需）：

npm install echarts              # MetricChart
npm install pdfjs-dist           # PdfPreviewCard 富预览
npm install xlsx                 # ExcelPreviewCard 富预览
npm install vue-virtual-scroller # VirtualMessageScroller
npm install @vue-flow/core @vue-flow/background @vue-flow/controls  # 仅 @apform-ui/core/bpmn

宿主 Vite 加上 apformOptionalPeers()（入口 @apform-ui/core/vite）。缺包时整站仍能启动，对应组件回退；装上依赖后富交互自动可用。

入口

import { MessageBubble, Composer } from '@apform-ui/core/chat'
import { BpmnFlowPreviewCanvas } from '@apform-ui/core/bpmn'

更多说明见仓库 docs/guide/architecture.md、docs/guide/getting-started.md 与 docs/guide/migration.md。

快速开始

import {
  PageShell,
  PageHeader,
  ContentPanel,
  CardTable,
  FilterBar,
} from '@apform-ui/core'

// 必须含 tokens + element-override，此后 el-* 跟本库视觉
import '@apform-ui/core/tokens.css'
import '@apform-ui/core/design-tokens.css'
import '@apform-ui/core/style.css'
import '@apform-ui/core/styles/element-override.css'

对话场景（避免把 vue-flow 打进包）：

import { MessageBubble, Composer, MessageList } from '@apform-ui/core/chat'
import '@apform-ui/core/tokens.css'
import '@apform-ui/core/chat.css'
import '@apform-ui/core/styles/element-override.css'

<template>
  <PageShell>
    <PageHeader title="用户管理">
      <template #actions>
        <el-button type="primary">新增</el-button>
      </template>
    </PageHeader>
    <ContentPanel>
      <FilterBar :filters="filters" @search="onSearch" />
      <CardTable :data="users" :columns="columns" />
    </ContentPanel>
  </PageShell>
</template>

组件

布局与导航

数据展示

表单与输入

反馈与弹窗

AI / 对话（@apform-ui/core/chat）

BPMN（@apform-ui/core/bpmn）

文件预览

监控

通用

Composables

import {
  useToast,          // 轻提示
  useConfirm,        // 确认对话框
  useMessage,        // 消息通知
  useDebounceFn,     // 防抖函数
  useClientPagination, // 客户端分页
  useDataLoading,    // 数据加载状态
  useChatScroll,     // 对话滚动
  useClipboard,      // 剪贴板操作
  useRealtime,       // 监控 WebSocket 实时推送
} from '@apform-ui/core'

主题与令牌

规范名使用 --apf-*；--color-* / --text-color-* 等为兼容别名（对齐平台基建）。Chat 语义别名使用 --c-*（默认跟随 --apf-* / --color-*）。

:root {
  --apf-color-primary: #0060A2;
  --apf-bg-page: #F5F6FA;
  --apf-text-primary: #333333;
  /* 兼容：--color-primary → var(--apf-color-primary) */
}

图表色板（ECharts 无法读 CSS 变量）从 JS 常量读取：

import { CHART_COLORS, COLORS } from '@apform-ui/core'

引入暗色主题：

import '@apform-ui/core/theme/dark.css'

监控规格详见仓库 docs/guide/monitoring-components.md。

样式文件

许可证

MIT