# AF-workflows

**Repository Path**: wzfdhr/af-workflows

## Basic Information

- **Project Name**: AF-workflows
- **Description**: # AF-workflows
基于 Vue 3 + TypeScript + Vite 的可视化工作流与表单设计器解决方案。本项目致力于提供一套类似钉钉/宜搭的低代码业务流程配置体验。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-06-13
- **Last Updated**: 2026-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, Vue

## README

# AF-workflows

基于 Vue 3 + TypeScript + Vite 的可视化工作流与表单设计器解决方案。本项目致力于提供一套类似钉钉/宜搭的低代码业务流程配置体验。

## ✨ 核心特性

### 1. 🚀 智能工作流设计器 (Workflow Designer)
- **仿钉钉交互**：采用经典的无限层级递归渲染模式，直观清晰。
- **节点类型丰富**：支持发起人、审批人、抄送人、条件分支等核心节点。
- **复杂逻辑处理**：
  - 支持多级条件分支嵌套。
  - 支持审批人设置（指定成员、主管、连续多级主管、发起人自选等）。
  - 支持审批方式配置（依次审批、会签、或签）。
- **可视化配置**：通过抽屉（Drawer）式弹窗轻松配置节点属性与权限。
- **预览与缩放**：支持画布缩放、拖拽及流程数据 JSON 预览。

### 2. 📝 拖拽式表单设计器 (Form Designer)
- **所见即所得**：基于 `vuedraggable` 的拖拽布局，实时预览。
- **丰富组件库**：
  - 基础字段：单行/多行文本、数字、单选/多选、日期时间等。
  - 布局字段：栅格布局、标签页等。
- **属性深度配置**：支持字段校验、默认值、显隐逻辑、数据源绑定（固定值/接口获取）。
- **JSON 驱动**：表单结构直接生成标准 JSON AST，易于后端存储与解析。

## 🛠 技术栈

- **核心框架**: [Vue 3](https://cn.vuejs.org/) + [TypeScript](https://www.typescriptlang.org/)
- **构建工具**: [Vite](https://cn.vitejs.dev/)
- **UI 组件库**: [Arco Design Vue](https://arco.design/vue)
- **样式库**: [Tailwind CSS](https://tailwindcss.com/) + Sass
- **状态管理**: [Pinia](https://pinia.vuejs.org/)
- **图表**: ECharts
- **工具库**: Lodash, Dayjs, Axios

## 📦 快速开始

### 环境要求
- Node.js >= 16
- npm or pnpm

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 代码规范检查

```bash
npm run lint
```

## 📂 目录结构

```
src/
├── api/                # API 接口请求
├── components/         # 公共组件
│   ├── flow/           # 工作流设计器核心组件
│   ├── form-designer/  # 表单设计器核心组件
│   └── s-form/         # 表单渲染器 (Runtime)
├── store/              # Pinia 状态管理
├── views/              # 页面视图
│   └── ding/           # 钉钉风格工作流主入口
└── utils/              # 工具函数
```

## 🤝 贡献

欢迎提交 Issue 或 Pull Request 来完善本项目。

## 📄 License

[MIT](./LICENSE)