# ldesign-approval

**Repository Path**: ldesign-v1/ldesign-approval

## Basic Information

- **Project Name**: ldesign-approval
- **Description**: ?????UI?? - ??????????????
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/approval

审批运行时 UI 组件库，提供原生 JavaScript 核心组件与 Vue 包装层，覆盖审批意见、流程状态、时间线、会签、加签、转办、催办、统计和单据摘要等常见工作台场景。

## 包结构

- `@ldesign/approval`
  原生 JS / TypeScript 核心库。
- `@ldesign/approval-vue`
  Vue 3 包装层，提供组件、插件和 `useApproval` composable。
- `playground`
  基于 Vite 的演示站，同时展示原生接入和 Vue 接入。

## 当前能力

- `ApprovalPanel`
  组合式审批面板，可拼装单据、状态流、时间线、统计和催办。
- `OpinionPanel`
  审批意见输入区，支持多种审批动作。
- `Timeline`
  审批记录时间线，支持动作标签与附件展示。
- `StatusFlow`
  流程状态图，支持横向 / 纵向布局与当前节点高亮。
- `CountersignPanel`
  会签进度、投票意见与参与人状态展示。
- `TransferPanel`
  转办 / 委托面板，支持候选人搜索。
- `ExtraSignPanel`
  前加签、后加签、并行加签。
- `UrgeButton`
  催办次数、最近催办时间与记录概览。
- `Statistics`
  审批量、结案率、平均耗时与超时节点。
- `DocumentCard`
  单据摘要、字段信息、附件与详情入口。

## 已完成优化

- 统一补上业务文本转义，修复 `innerHTML` 直接拼接导致的 XSS 风险。
- 为 `ApprovalPanel` 增加 `update` 和 `setUrgeInfo`，解决类型里存在但运行时未接线的问题。
- 增强时间线、状态流、会签、转办、加签与单据卡片的真实交互能力。
- 补齐 Vue 包装层组件矩阵，并完善插件注册与 composable 生命周期。
- 将 `playground` 重构为标准 Vite 演示站，构建链路不再依赖旧 launcher。

## 安装

```bash
pnpm add @ldesign/approval
pnpm add @ldesign/approval-vue
```

## 原生 JS 快速开始

```ts
import { createApprovalPanel } from '@ldesign/approval';

const panel = createApprovalPanel({
  container: '#approval-root',
  actions: ['approve', 'reject', 'transfer', 'urge'],
  currentNode: {
    id: 'node-2',
    name: '财务复核',
    status: 'processing',
    assignee: { id: 'u-2', name: '沈屿', department: '财务共享' },
  },
  records: [],
  nodes: [],
  onSubmit(action, opinion) {
    console.log(action, opinion);
  },
  onUrge() {
    console.log('urge');
  },
});

panel.update({
  records: [
    {
      id: 'r-1',
      nodeId: 'node-1',
      nodeName: '提交申请',
      action: 'submit',
      operator: { id: 'u-1', name: '许望舒' },
      opinion: '提交审批',
      timestamp: new Date().toISOString(),
    },
  ],
});
```

## Vue 快速开始

```vue
<template>
  <ApprovalPanel
    :actions="['approve', 'reject', 'urge']"
    :current-node="currentNode"
    :records="records"
    :nodes="nodes"
    :theme="theme"
    @submit="handleSubmit"
    @urge="handleUrge"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ApprovalPanel } from '@ldesign/approval-vue';

const theme = ref<'light' | 'dark'>('light');
const currentNode = ref({
  id: 'node-2',
  name: '财务复核',
  status: 'processing',
  assignee: { id: 'u-2', name: '沈屿' },
});
const records = ref([]);
const nodes = ref([]);

function handleSubmit(action: string, opinion: string) {
  console.log(action, opinion);
}

function handleUrge() {
  console.log('urge');
}
</script>
```

## useApproval

```ts
import { useApproval } from '@ldesign/approval-vue';

const { create, update, setTheme, destroy } = useApproval();

create(containerElement, {
  actions: ['approve', 'reject'],
  currentNode,
  records,
  nodes,
});

update({ stats, urgeInfo });
setTheme('dark');
destroy();
```

## 构建

```bash
# 打包两个库（@ldesign/builder）
pnpm build

# 构建 playground（Vite）
pnpm build:playground
```

## 演示站

```bash
pnpm --filter @ldesign/approval-playground dev
```

## 后续建议

- 审批常用语模板与快捷批语。
- 流程 SLA 预警和瓶颈分析。
- 更完整的移动端抽屉式交互。
- 渲染钩子与插槽级扩展点。