# sop-manager **Repository Path**: rorop/sop-ui ## Basic Information - **Project Name**: sop-manager - **Description**: SOP Manager是一套基于 Vue 3 + TypeScript + Naive UI + AntV X6 构建的现代化企业级SOP管理平台。 - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 1 - **Created**: 2025-12-23 - **Last Updated**: 2026-02-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

🎨 SOP 流程管理系统

基于 Vue 3 + TypeScript + Naive UI 的现代化 SOP 管理前端

[![Vue](https://img.shields.io/badge/Vue-3.5-brightgreen.svg)](https://vuejs.org) [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org) [![Vite](https://img.shields.io/badge/Vite-7.2-orange.svg)](https://vite.dev) [![NaiveUI](https://img.shields.io/badge/NaiveUI-2.43-purple.svg)](https://www.naiveui.com) [![Pinia](https://img.shields.io/badge/Pinia-3.0-yellow.svg)](https://pinia.vuejs.org) [![License](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
--- ## 📖 项目简介 **SOP Manager**是一套基于 **Vue 3 + TypeScript + Naive UI + AntV X6** 构建的现代化企业级标准作业程序管理平台。 ### 🎯 项目背景 在企业数字化转型过程中，**标准作业程序（SOP）** 是确保业务流程规范化、提升运营效率的关键工具。然而，传统的SOP管理方式存在诸多痛点： - 📄 **文档分散**：流程文档散落在各处，难以统一管理和更新 - 🔄 **版本混乱**：缺乏版本控制，员工可能使用过时的流程指导 - 📉 **可视化不足**：纯文字描述难以清晰表达复杂的业务流程 - ⏳ **审批低效**：流程发布审批周期长，难以快速响应业务变化 - 📊 **追踪困难**：无法有效追踪流程执行情况和改进效果 ### 🎯 项目目标 本系统旨在为企业提供一站式SOP全生命周期管理解决方案： 1. **流程可视化**：通过专业的泳道流程图设计器，让复杂流程一目了然 2. **版本可追溯**：完整的版本管理机制，确保流程变更有据可查 3. **权限可控制**：精细的角色权限体系，保障流程安全合规 4. **执行可监控**：KPI指标配置与追踪，持续优化流程效率 ### 🌟 核心亮点 - **🎨 专业流程设计器**：基于 AntV X6 打造的泳道流程图编辑器，支持角色泳道、活动节点、决策节点等丰富元素，配合设计向导引导完成流程设计 - **📋 5步设计向导**：流程图绘制 → 流程文件 → 流程属性 → 规范检查 → 提交审批，确保流程设计完整规范 - **✅ 智能规范检查**：内置流程规范检测，自动识别设计中的错误和警告，一键定位问题节点 - **🎛️ 丰富配置面板**：双击节点即可配置基本信息、样式设置、活动明细（输入输出、操作规范、KPI指标等） - **🏗️ Monorepo架构**：使用 pnpm workspaces 管理多包结构，代码复用度高 - **🎭 多主题支持**：明暗模式切换、多种布局模式、自定义主题色 - **🌍 国际化**：内置多语言支持，适应全球化企业需求 - **🔐 权限管理**：精细的菜单和按钮级权限控制 - **📱 响应式设计**：适配各种屏幕尺寸，支持移动端访问 --- ## 🏗️ 项目结构 ``` sop-ui/ ├── build/ # 构建配置 │ ├── config/ # 环境配置 │ └── plugins/ # Vite 插件 ├── docs/ # 文档与模板 │ ├── java/ # 后端代码生成工具 │ ├── sql/ # 菜单SQL │ └── template/ # 代码生成模板 ├── packages/ # Monorepo 子包 │ ├── alova/ # Alova HTTP客户端 │ ├── axios/ # Axios HTTP客户端 │ ├── color/ # 颜色管理工具 │ ├── hooks/ # 通用Vue组合函数 │ ├── materials/ # UI组件库 │ ├── ofetch/ # ofetch HTTP客户端 │ ├── scripts/ # 构建脚本 │ ├── uno-preset/ # UnoCSS预设 │ └── utils/ # 工具函数 ├── public/ # 静态资源 ├── src/ # 主应用源码 │ ├── assets/ # 静态资源(图片/图标) │ ├── components/ # 通用组件 │ ├── constants/ # 常量定义 │ ├── enum/ # 枚举定义 │ ├── hooks/ # 组合函数 │ ├── layouts/ # 布局组件 │ ├── locales/ # 国际化 │ ├── plugins/ # Vue插件 │ ├── router/ # 路由配置 │ ├── service/ # API服务 │ ├── store/ # Pinia状态管理 │ ├── styles/ # 全局样式 │ ├── theme/ # 主题配置 │ ├── typings/ # TypeScript类型 │ ├── utils/ # 工具函数 │ └── views/ # 页面视图 ├── vite.config.ts # Vite配置 ├── tsconfig.json # TypeScript配置 ├── uno.config.ts # UnoCSS配置 └── package.json # 项目配置 ``` --- ## ⭐ SOP核心页面 ### 📋 功能模块 | 页面 | 路径 | 说明 | |------|------|------| | SOP门户 | `/sop/portal` | 首页统计、收藏、最近访问 | | 流程架构 | `/sop/architecture` | 树形架构管理 | | 流程管理 | `/sop/process` | 流程列表、状态管理 | | 流程设计器 | `/sop/design` | 可视化流程图编辑 | | 流程文档 | `/sop/document` | 流程文档预览 | | 流程查看 | `/sop/viewer` | 只读流程图查看 | ### 🖼️ 页面预览 #### SOP门户首页 统计仪表盘，展示流程总览、收藏列表、最近访问等信息。 ![SOP门户](./docs/images/sop-portal.png) #### 流程架构管理 树形结构管理流程分类架构，支持多级分类。 ![流程架构](./docs/images/sop-architecture.png) #### 流程管理 左树右图布局，选择流程后预览流程图，支持新增、编辑、复制、删除操作。 ![流程管理](./docs/images/sop-process.png) #### 流程设计器 基于 AntV X6 的专业流程图设计器，支持角色泳道、活动节点、决策节点等元素，提供设计向导引导完整流程设计。 ![流程设计器](./docs/images/sop-designer.png) ### 🎨 流程设计器详细功能 #### 1. 组件面板与设计向导 左侧集成**组件面板**和**设计向导**，组件面板提供角色类（角色、虚拟角色、公共角色、客户）和活动类（活动、决策）元素，设计向导分5步引导完成流程设计。 ![组件面板](./docs/images/designer-palette.png) #### 2. 流程文件配置 配置流程的**目的**、**适用范围**、**驱动规则**、**术语定义**等基础信息，确保流程文档的完整性。 ![流程文件](./docs/images/designer-process-file.png) #### 3. 流程属性配置 设置流程的**基本信息**（编号、名称、版本、状态）和**责任信息**（流程责任人、责任部门），支持配置流程有效期。 ![流程属性](./docs/images/designer-process-property.png) #### 4. 规范检查 内置流程规范检查功能，自动检测流程设计中的**错误**和**警告**，支持一键定位问题节点，确保流程符合设计规范。 ![规范检查](./docs/images/designer-validation.png) #### 5. 元素配置面板 双击画布上的任意节点元素，右侧弹出**元素配置抽屉**，提供完整的节点属性配置功能。 ![元素配置](./docs/images/designer-property-drawer.png) **配置面板包含以下标签页：** | 标签页 | 适用元素 | 配置内容 | |--------|----------|----------| | **基本信息** | 所有元素 | 节点ID、节点类型、标签名称、宽度、高度 | | **样式设置** | 所有元素 | 填充颜色/透明度、边框颜色/宽度/样式、字体大小/颜色/加粗 | | **元素明细** | 活动类元素 | 输入、输出、操作规范、指标、信息化、办理时限、说明等 | **活动明细配置项：** - 📥 **输入**：配置活动的输入数据来源和要求 - 📤 **输出**：配置活动的输出数据格式和去向 - 📋 **操作规范**：定义活动的标准操作步骤 - 📊 **指标**：设置活动的KPI指标 - 💻 **信息化**：关联信息系统（QMS、ERP、MES、OA、WMS） - ⏱️ **办理时限**：设置活动的完成时限要求 ### 🎨 流程设计器特性 ``` src/views/sop/design/ ├── components/ # 设计器组件 │ ├── activity/ # 活动节点组件 │ ├── edge/ # 连线组件 │ ├── panel/ # 面板组件 │ └── swimlane/ # 泳道组件 ├── composables/ # 组合函数 │ ├── use-graph.ts # 图形操作 │ └── use-process.ts # 流程数据 ├── config/ # 配置文件 │ ├── graph-config.ts # 图形配置 │ └── node-config.ts # 节点配置 ├── nodes/ # 自定义节点 │ └── index.ts # 节点注册 └── index.vue # 设计器入口 ``` **设计器功能**： - 📦 **泳道管理**：添加/删除/调整泳道，自定义颜色 - 🔷 **节点操作**：任务节点、决策节点、评审节点、系统节点 - ➡️ **连线绘制**：自动连线、路径优化 - 📝 **活动配置**：活动详情、输入输出、KCP标识 - 💾 **数据保存**：JSON格式保存流程图数据 - 📤 **导出功能**：支持导出流程图图片 --- ## 🛠️ 技术栈 ### 核心框架 | 技术 | 版本 | 说明 | |------|------|------| | Vue 3 | 3.5.x | 渐进式JavaScript框架 | | TypeScript | 5.9.x | 类型安全的JavaScript | | Vite | 7.2.x | 下一代前端构建工具 | | Naive UI | 2.43.x | Vue 3 组件库 | | Pinia | 3.0.x | Vue 状态管理 | | Vue Router | 4.6.x | Vue 路由管理 | ### 图形可视化 | 技术 | 版本 | 说明 | |------|------|------| | AntV X6 | 3.1.x | 图编辑引擎 | | @antv/x6-vue-shape | 3.0.x | Vue节点支持 | | ECharts | 6.0.x | 数据可视化图表 | ### 开发工具 | 技术 | 说明 | |------|------| | UnoCSS | 原子化CSS引擎 | | ESLint | 代码质量检查 | | Axios | HTTP请求客户端 | | Day.js | 日期处理 | | VueUse | Vue 组合函数集合 | --- ## 🚀 快速开始 ### 环境要求 - **Node.js** >= 20.19.0 - **pnpm** >= 10.5.0 - **Git** ### 安装步骤 1. **克隆项目** ```bash git clone cd sop-ui ``` 2. **安装 pnpm**（如未安装） ```bash npm install pnpm -g # 设置淘宝镜像 pnpm config set registry https://registry.npmmirror.com ``` 3. **安装依赖** ```bash pnpm install ``` 4. **配置环境** 复制 `.env.dev` 配置文件并修改后端地址： ```env # API 基础路径 VITE_SERVICE_BASE_URL=http://localhost:8080 ``` 5. **启动开发服务器** ```bash pnpm dev ``` 6. **构建生产版本** ```bash pnpm build ``` --- ## 📝 开发指南 ### 脚本命令 ```bash # 开发环境 pnpm dev # 启动开发服务器 pnpm dev:test # 测试环境 pnpm dev:prod # 生产环境 # 构建 pnpm build # 生产构建 pnpm build:dev # 开发构建 pnpm build:test # 测试构建 pnpm preview # 预览构建 # 代码质量 pnpm typecheck # TypeScript类型检查 pnpm lint # ESLint检查并修复 # 工具命令 pnpm gen-route # 生成路由 pnpm commit # Git提交 pnpm commit:zh # 中文提交信息 pnpm update-pkg # 更新依赖 pnpm cleanup # 清理项目 pnpm release # 发布版本 ``` ### 代码规范 **命名规范**： - Vue组件：PascalCase（如 `UserProfile.vue`） - TypeScript文件：camelCase（如 `userService.ts`） - CSS/SCSS：kebab-case（如 `user-profile.scss`） **代码风格**： - 使用 Vue 3 Composition API - 使用 TypeScript 类型系统 - 遵循 ESLint 配置规范 ### 状态管理 使用 Pinia 进行状态管理，模块位于 `src/store/modules`： | 模块 | 说明 | |------|------| | app | 应用全局状态 | | theme | 主题配置 | | route | 路由信息 | | tab | 标签页管理 | | auth | 认证信息 | | dict | 字典数据 | | notice | 通知管理 | ### API 调用示例 ```typescript // 获取流程列表 import { fetchGetProcessList } from '@/service/api/sop/process'; const { data } = await fetchGetProcessList({ pageNum: 1, pageSize: 10, processStatus: 'published' }); // 获取流程完整信息 import { fetchGetProcessFullInfo } from '@/service/api/sop/process'; const { data } = await fetchGetProcessFullInfo(processId); ``` ### Hooks 使用 ```typescript // 布尔值管理 import { useBoolean } from '@sa/hooks'; const { bool, setTrue, setFalse, toggle } = useBoolean(); // 加载状态 import { useLoading } from '@sa/hooks'; const { loading, startLoading, endLoading } = useLoading(); // 表格管理 import { useTable } from '@/hooks/common/table'; const { tableData, loading, getPaginationData } = useTable(fetchTableData); ``` ### UnoCSS 使用 ```vue ``` --- ## 🔧 代码生成配置 ### 后端模板配置 1. 将 `docs/java/VelocityUtils.java` 替换到后端代码生成模块 2. 将 `docs/template/*.vm` 复制到后端 `ruoyi-generator/resources/vm/soy/` 目录 3. 执行 `docs/sql/*.sql` 更新菜单数据 ### 生成配置 在代码生成器中选择 "Soy" 模板即可生成与本前端匹配的代码。 --- ## 📦 SOP API 服务 ``` src/service/api/sop/ ├── activity.ts # 活动管理API ├── approval.ts # 审批管理API ├── architecture.ts # 架构管理API ├── document.ts # 文档管理API ├── file.ts # 文件管理API ├── index.ts # API导出 ├── kpi.ts # KPI管理API ├── portal.ts # 门户API ├── process.ts # 流程管理API └── role.ts # 角色管理API ``` --- ## 🎨 主题定制 ### 布局模式 - 垂直布局（默认） - 水平布局 - 混合布局 ### 主题配色 - 明暗模式切换 - 自定义主题色 - 组件圆角配置 ### 标签页样式 - Chrome风格 - Button风格 - 卡片风格 --- ## 📄 许可证 本项目基于 [MIT License](./LICENSE) 开源协议。 --- ## 🔗 相关链接 - [AntV X6](https://x6.antv.antgroup.com/) - 图编辑引擎 - [Naive UI](https://www.naiveui.com/) - Vue 3 组件库 - [Vue 3](https://vuejs.org/) - 渐进式JavaScript框架 - [Vite](https://vite.dev/) - 下一代前端构建工具 - [Pinia](https://pinia.vuejs.org/) - Vue 状态管理 --- ## 🙏 致谢 本项目的开发离不开以下优秀开源项目的支持： | 项目 | 说明 | |------|------| | [RuoYi-Vue-Plus](https://gitee.com/dromara/RuoYi-Vue-Plus) | 后端基础框架，提供了完善的企业级开发能力 | | [Soybean Admin](https://github.com/soybeanjs/soybean-admin) | 前端基础框架，提供了现代化的UI架构 | | [RuoYi-Plus-Soybean](https://gitee.com/xlsea/ruoyi-plus-soybean) | 前后端整合方案，为本项目提供了坚实的基础 | 感谢所有开源贡献者的无私奉献！🎉 --- ## 📮 联系方式 - **作者**: Vondser --- ## 🤝 贡献指南 1. Fork 本仓库 2. 创建功能分支 (`git checkout -b feature/amazing-feature`) 3. 提交更改 (`git commit -m 'feat: add amazing feature'`) 4. 推送到分支 (`git push origin feature/amazing-feature`) 5. 提交 Pull Request ### 提交规范 - `feat`: 新功能 - `fix`: Bug修复 - `docs`: 文档更新 - `style`: 代码风格 - `refactor`: 代码重构 - `perf`: 性能优化 - `test`: 测试相关 - `chore`: 构建/工具 ---
Built with ❤️ by the SOP Team