审批系统 (Approval System)

一个基于现代 Web 技术栈构建的企业级审批系统，采用前后端分离架构，具备高性能、高可维护性和良好的用户体验。

📋 目录

• 技术栈
• 系统架构
• 项目结构
• 快速开始
• 核心功能
• 文档索引
• 许可证

🛠️ 技术栈

前端

技术	版本	说明
React	19.2.0	用户界面构建库
Vite	7.2.4	下一代前端构建工具
TypeScript	5.9.3	JavaScript 的超集，提供类型安全
Tailwind CSS	4.1.18	实用优先的 CSS 框架
shadcn/ui	最新	高颜值、可复制的组件代码
Zustand	5.0.10	轻量级状态管理
React Hook Form	7.71.0	高性能表单验证库

后端

技术	版本	说明
Spring Boot	3.5.9	后端框架
Spring Security	6.x	安全框架
MyBatis-Plus	3.5.5	ORM 框架
JWT	0.11.5	身份认证
Java	17	开发语言
MySQL	8.0	数据库

🏗️ 系统架构

┌─────────────────────────────────────────────────────────────────┐
│                         客户端 (Browser)                         │
├─────────────────────────────────────────────────────────────────┤
│  ┌────────────────────────────────────────────────────────────┐ │
│  │                    前端应用 (SPA)                           │ │
│  │     React 18 + Vite + TypeScript + Tailwind + shadcn/ui   │ │
│  └────────────────────────────────────────────────────────────┘ │
│                              │                                   │
│                              │ HTTP/HTTPS (RESTful API)          │
│                              ▼                                   │
├─────────────────────────────────────────────────────────────────┤
│  ┌────────────────────────────────────────────────────────────┐ │
│  │              Spring Boot 3.x 后端服务                       │ │
│  │        Controller → Service → Repository                   │ │
│  └────────────────────────────────────────────────────────────┘ │
│                              │                                   │
│                              ▼                                   │
├─────────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────┐    ┌────────────────────────────┐  │
│  │     MySQL 8.0           │    │     本地文件存储            │  │
│  │   (业务数据存储)         │    │   (附件文件存储)            │  │
│  └─────────────────────────┘    └────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

📁 项目结构

approval_system/
├── frontend/                 # 前端项目
│   ├── src/
│   │   ├── components/      # 公共组件 (UI、布局、业务)
│   │   ├── pages/           # 页面组件
│   │   ├── services/        # API 服务层
│   │   ├── stores/          # 状态管理 (Zustand)
│   │   ├── hooks/           # 自定义 Hooks
│   │   ├── types/           # TypeScript 类型定义
│   │   └── utils/           # 工具函数
│   └── docs/                # 前端文档
├── backend/                  # 后端项目
│   ├── src/main/java/com/approval/
│   │   ├── controller/      # 控制器层
│   │   ├── service/         # 业务逻辑层
│   │   ├── mapper/          # 数据访问层
│   │   ├── entity/          # 实体类
│   │   ├── dto/             # 数据传输对象
│   │   ├── vo/              # 视图对象
│   │   ├── security/        # 安全模块
│   │   └── config/          # 配置类
│   └── src/main/resources/  # 配置文件
├── script/                   # 数据库脚本
└── doc/                      # 项目文档

🚀 快速开始

环境要求

• JDK 17+
• Node.js 18+
• pnpm 8+
• MySQL 8.0
• Maven 3.9.x

1. 克隆项目

git clone <repository-url>
cd approval_system

2. 数据库初始化

# 创建数据库
mysql -u root -p -e "CREATE DATABASE approval_system DEFAULT CHARACTER SET utf8mb4;"

# 导入表结构和初始数据
mysql -u root -p approval_system < script/init_database.sql

3. 后端启动

cd backend

# 修改配置文件 (数据库连接信息)
# 编辑 src/main/resources/application.yml

# 运行项目
mvn spring-boot:run

后端服务将在 http://localhost:8080 启动。

4. 前端启动

cd frontend

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

前端应用将在 http://localhost:3000 启动。

✨ 核心功能

用户角色

角色	权限说明
普通用户	发起审批、查看自己的审批记录
审批人	审批待办事项、查看审批历史
管理员	系统配置、用户管理、审批流程配置
超级管理员	所有权限

审批流程

发起申请 → 待审批 → 审批中 → 审批完成
                  ↓          ↓
              已拒绝 ← ─ ─ ─ ┘
                  ↓
              已撤回

主要页面

• 登录/注册 - 用户认证
• 仪表盘 - 数据概览和快捷操作
• 审批列表 - 查看和管理审批申请
• 发起审批 - 创建新的审批申请
• 审批详情 - 查看审批流程和操作
• 个人资料 - 管理个人信息
• 消息通知 - 查看系统通知
• 成员管理 - 管理员管理用户 (仅管理员)
• 流程配置 - 配置审批流程模板 (仅管理员)

📚 文档索引

文档名称	路径	说明
系统架构总览	doc/00_系统架构总览.md	整体架构和技术选型
前端技术实施文档	doc/01_前端技术实施文档.md	React + Vite + TypeScript
Tailwind CSS 样式规范	doc/02_Tailwind_CSS样式规范.md	CSS 使用规范
shadcn/ui 组件规范	doc/03_shadcn_ui组件规范.md	组件使用指南
后端技术实施文档	doc/04_后端技术实施文档.md	Spring Boot 3.x
API 接口设计规范	doc/05_API接口设计规范.md	RESTful API 规范
数据库设计文档	doc/06_数据库设计文档.md	MySQL 8.0
文件存储实施文档	doc/07_文件存储实施文档.md	本地磁盘存储
部署指南	doc/08_部署指南.md	系统部署说明

📦 构建部署

前端构建

cd frontend
pnpm build

后端打包

cd backend
mvn clean package -DskipTests

详细部署说明请参考 部署指南。

📄 许可证

MIT License