@composy/approval-vue

@composy/approval-vue

@composy/approval-core 的 Vue 适配层：把审批面板、意见、时间线、状态流转、会签/加签/转办等核心组件包装为 Vue 组件，并提供组合式函数与插件注册。基于 vue-demi，同时兼容 Vue 2.7 与 Vue 3。

✨ 核心能力

• 全套组件：ApprovalPanel、ApprovalOpinionPanel、ApprovalTimeline、ApprovalStatusFlow、ApprovalCountersignPanel、ApprovalTransferPanel、ApprovalExtraSignPanel、ApprovalUrgeButton、ApprovalStatistics、ApprovalDocumentCard
• 事件透传：ApprovalPanel 暴露 submit、urge、transfer、delegate、extraSign、countersignVote、viewDetail、cancel 等事件
• 组合式 API：useApproval() 命令式挂载审批面板，组件卸载时自动销毁实例
• 插件注册：ApprovalPlugin 或 createApprovalPlugin(options) 全局安装
• 类型完备：重导出 @composy/approval-core 的全部关键类型（ApprovalAction、PersonInfo、ApprovalNode 等）
• 跨文档与快照：ApprovalPanel 支持 ariaLabel；Core 会从挂载根节点推导所属文档，面板实例可通过 getSnapshot() 获取只读语义上的状态快照

📦 安装

pnpm add @composy/approval-core @composy/approval-vue vue

# 可选：接入设计 token 桥接
pnpm add @composy/color-core @composy/size-core

peer 依赖：vue ^2.7.0 || ^3.5.32；@composy/color-core / @composy/size-core 为可选 peer。

🚀 快速开始

<script setup lang="ts">
import type { ApprovalAction, ExtraSignType, PersonInfo } from '@composy/approval-vue'
import { ApprovalPanel } from '@composy/approval-vue'
import { ref } from 'vue'

const currentNode = ref({
  id: 'finance',
  name: '财务审核',
  status: 'processing' as const,
})

const candidates = ref<PersonInfo[]>([{ id: 'u-1', name: 'Ada', department: '财务部' }])

function handleSubmit(action: ApprovalAction, opinion: string) {
  console.info(action, opinion)
}

function handleTransfer(person: PersonInfo, reason: string) {
  console.info(person, reason)
}

function handleExtraSign(type: ExtraSignType, persons: PersonInfo[], reason: string) {
  console.info(type, persons, reason)
}

function handleUrge() {
  console.info('urge')
}
</script>

<template>
  <ApprovalPanel
    aria-label="财务审批面板"
    :actions="['approve', 'reject', 'transfer', 'extra-sign-after', 'urge']"
    :current-node="currentNode"
    :candidates="candidates"
    @submit="handleSubmit"
    @transfer="handleTransfer"
    @extra-sign="handleExtraSign"
    @urge="handleUrge"
  />
</template>

命令式挂载可用组合式函数：

import { useApproval } from '@composy/approval-vue'

const { instance, error, create, update, setTheme } = useApproval()

// 在拿到容器元素后创建面板（组件卸载时自动 destroy）
create(containerEl, { actions: ['approve', 'reject'] })
if (!instance.value) console.error(error.value)
update({ records: [] })
setTheme('dark')

📖 API 参考

子路径入口：@composy/approval-vue/components（含按组件的 ./components/*）、./composables、./plugins 均可单独导入。

🔨 构建产物与验证

使用 @composy/builder 输出 es/、esm/、lib/ 四产物与 UMD dist/index.min.js。

pnpm type-check       # vue-tsc，检查 Vue/ESM 配置
pnpm type-check:cjs   # vue-tsc，检查 Vue/CJS 配置
pnpm build            # Builder + Vue 输出同步 + 产物契约检查
pnpm test:run     # 单元测试
pnpm lint:check   # ESLint 严格检查

🔗 相关链接

• @composy/approval-core — 框架无关核心与完整 Config 类型
• workspace 总览 — 子模块结构与根脚本