ORANGE 前后端分离管理系统 - 现代化解决方案全解析
演示地址：yluiop123.github.io/orange/
swagger文档：yluiop123.github.io/orange/#swa…
一、项目简介
ORANGE 是一个完整的前后端分离企业级管理系统，采用前沿的现代技术栈设计。项目集成了权限管理、可视化数据展示、地理信息系统（GIS）、3D 可视化等功能，是学习现代全栈开发和构建企业应用的优秀参考。
核心特性：
- 🎨 精美的现代化 UI 设计（基于 shadcn/ui）
- 🔐 完整的权限管理系统（RBAC 模型）
- 📊 丰富的数据可视化能力
- 🗺️ 多种地图引擎支持（Leaflet、Cesium、L7）
- 🌍 国际化多语言支持
- 🎭 动态主题切换（深色/浅色模式）
- ⚡ 高性能渲染和响应式设计
二、技术架构概览
前端架构
ORANGE 前端采用最新的 React 19 + Vite 技术栈，提供极速的开发体验和构建性能。
核心技术栈：
-
框架：React 19 + Vite 6（秒级热更新）
-
状态管理：Zustand（轻量、高效）
-
UI 框架：shadcn/ui + TailwindCSS（高度可定制化）
-
路由：React Router v7
-
国际化：react-intl（完整的 i18n 解决方案）
-
类型验证：Zod（类型安全的表单验证）
-
可视化：
- 图表：ECharts、Recharts、Ant Design Charts
- 地图：Leaflet、Cesium、OpenLayers、L7、Mapbox
- 3D：Three.js、Babylon.js、React Three Fiber
-
Mock API：Mock Service Worker（完整的离线开发能力）
项目特点：
- 企业级组件库：包含权限树、角色选择、分组选择等业务专用组件
- 多种数据展示：支持表格、图表、地图、3D 场景等多维度数据呈现
- 完整的后台系统页面：包括仪表板、用户管理、角色权限配置等
- 响应式设计：完美适配桌面、平板、手机等各类设备
后端架构
ORANGE 后端采用 Spring Boot 4.0.2，构建高效的 RESTful API 服务。
核心技术栈：
- 框架：Spring Boot 4.0.2
- ORM：Spring Data JPA
- 安全：Spring Security + JWT（256-bit RSA 加密）
- 数据库：PostgreSQL
- 缓存：Caffeine（本地高速缓存）
- API 文档：SpringDoc OpenAPI 3.0
功能模块：
- 认证系统：JWT token 认证、登录/登出、token 刷新
- 用户管理：用户的增删改查、状态管理、密码重置
- 角色管理：灵活的角色定义、角色权限分配、角色状态控制
- 权限管理：树形权限结构、支持多级权限层级、权限继承关系
- 组织管理：组织树形结构、节点移动/排序、组织与用户关联
三、系统架构设计
前后端交互流程
┌─────────────────────────────────────────────────────────────┐
│ 用户浏览器 │
└────────────────┬────────────────────────────────────────────┘
│ HTTP/HTTPS
▼
┌─────────────────────────────────────────────────────────────┐
│ 前端应用（React 19 + Vite） │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Components: 权限树、角色选择、数据表格等 │ │
│ │ Pages: 仪表板、系统管理、数据分析 │ │
│ │ State: Zustand 全局状态管理 │ │
│ └────────────────────────────────────────────────────────┘ │
└────────────────┬────────────────────────────────────────────┘
│ RESTful API (Axios)
│ JWT Token Authorization
▼
┌─────────────────────────────────────────────────────────────┐
│ 后端 API（Spring Boot 4.0.2） │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Controllers: 用户/角色/权限/组织 REST 接口 │ │
│ │ Services: 业务逻辑和权限校验 │ │
│ │ Entities: JPA 实体映射 │ │
│ │ Security: Spring Security + JWT 验证 │ │
│ └────────────────────────────────────────────────────────┘ │
└────────────────┬────────────────────────────────────────────┘
│ JDBC/JPA
▼
┌─────────────────────────────────────────────────────────────┐
│ 数据库（PostgreSQL） │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ sys_user, sys_role, sys_permission, sys_group │ │
│ │ 关联表：user_role, role_permission, user_permission │ │
│ └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
RBAC 权限模型
用户 (User)
├─ 拥有多个角色 (Role)
│ ├─ 角色拥有多个权限 (Permission)
│ └─ 权限可分级（树形结构）
├─ 直接权限 (Direct Permission)
└─ 所属组织 (Group)
四、核心功能详解
4.1 权限管理系统
ORANGE 采用经典的 RBAC（Role-Based Access Control）权限模型，支持：
- 灵活的权限分配：支持按角色分配权限，也支持直接分配用户权限
- 权限缓存：使用 Caffeine 缓存权限数据，提高权限校验性能
- 细粒度控制：支持菜单权限、接口权限、数据权限等多个维度
4.2 可视化数据展示
前端集成了业界主流的可视化库，支持：
图表库：
- ECharts：功能强大的商业级图表库，支持 100+ 种图表
- Recharts：轻量级 React 原生图表组件
- Ant Design Charts：蚂蚁金服出品的专业图表库
地图引擎：
- Leaflet：轻量级开源地图库，支持自定义扩展
- Cesium：3D 地球展示，支持卫星影像、地形等
- L7：阿里云大地点数据可视化方案
- OpenLayers：功能完整的 GIS 库
3D 可视化：
- Three.js：最流行的 WebGL 库
- Babylon.js：微软出品的成熟 3D 引擎
- React Three Fiber：将 Three.js 暴露为 React 组件
4.3 国际化支持
ORANGE 使用 react-intl 提供专业的国际化方案：
- 内置支持：英文(en-US)、中文(zh-CN)
- 灵活扩展：轻松添加更多语言支持
- 运行时切换：用户可在设置中实时切换语言
- 翻译管理：统一的翻译文件管理
4.4 主题系统
支持灵活的主题切换：
- 深色/浅色主题：自动适配系统偏好设置
- 主题颜色：预设多种配色方案（蓝、绿、橙、红、玫瑰、紫、黄）
- 动态切换：无需刷新即可实时切换主题
五、快速开发指南
5.1 前端开发
环境准备
# 需要 Node.js v18+ 和 pnpm v10.28.2+
node --version # v18.0.0+
pnpm --version # v10.28.2+
快速启动
# 克隆项目
git clone https://github.com/yluiop123/orange.git
cd orange/vite-shadcn
# 安装依赖（推荐使用 pnpm）
pnpm install
# 启动开发服务器
pnpm dev
# 访问应用
# 应用首页：http://localhost:3000/
# Swagger API：http://localhost:3000/swagger
常用命令
pnpm dev # 启动开发服务器（支持热更新）
pnpm build # 生产构建
pnpm lint # 代码检查
pnpm preview # 预览生产构建
pnpm analyze # 分析包大小
新增页面示例
// src/pages/my-page/index.tsx
import { Card } from '@/components/ui/card'
export default function MyPage() {
return (
<div className="flex flex-col gap-4">
<Card className="p-6">
<h1 className="text-2xl font-bold">我的页面</h1>
<p className="text-gray-600">这是一个新增的页面</p>
</Card>
</div>
)
}
新增组件示例
// src/components/my-component.tsx
import { Button } from '@/components/ui/button'
interface MyComponentProps {
title: string
onAction: () => void
}
export function MyComponent({ title, onAction }: MyComponentProps) {
return (
<div className="flex items-center gap-2">
<span>{title}</span>
<Button onClick={onAction}>操作</Button>
</div>
)
}
5.2 后端开发
环境准备
# 需要 Java 25、PostgreSQL 和 Maven 3.6+
java -version # java 25.0.x
psql --version # PostgreSQL 12+
mvn --version # Maven 3.6+
快速启动
# 进入后端目录
cd orange/springboot
# 创建数据库
createdb orange
# 生成 RSA 密钥对（放在 src/main/resources/keys/）
openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048
openssl rsa -pubout -in private_key.pem -out public_key.pem
# 配置数据库连接（application.yaml）
# 启动应用
mvn spring-boot:run
# 访问应用
# API 首页：http://localhost:8080
# Swagger UI：http://localhost:8080/swagger-ui.html
新增实体示例
// src/main/java/com/orange/entity/Product.java
import jakarta.persistence.*;
import lombok.Data;
@Data
@Entity
@Table(name = "product")
public class Product {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false)
private String name;
private String description;
}
新增接口示例
// src/main/java/com/orange/repository/ProductRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
import com.orange.entity.Product;
public interface ProductRepository extends JpaRepository<Product, Long> {
}
// src/main/java/com/orange/controller/ProductController.java
import org.springframework.web.bind.annotation.*;
import com.orange.entity.Product;
@RestController
@RequestMapping("/product")
public class ProductController {
private final ProductRepository productRepository;
@GetMapping("/list")
public Page<Product> list() {
return productRepository.findAll(Pageable.unpaged());
}
@PostMapping("/add")
public Product add(@RequestBody Product product) {
return productRepository.save(product);
}
}
六、项目亮点与优势
1. 现代化技术栈
✨ 采用业界最新的技术：
- React 19 带来了更强的并发能力和性能优化
- Vite 6 提供秒级的热更新和极速构建
- TypeScript 全覆盖，类型安全有保障
- Spring Boot 4.0.2 同步最新的 Spring 生态
2. 完整的权限管理
🔐 开箱即用的权限系统：
- RBAC 模型经经验证，适合大多数企业场景
- 支持树形权限结构，方便管理复杂的权限体系
- JWT 认证安全可靠，支持 token 刷新
- 权限缓存提升性能
3. 丰富的可视化能力
📊 集成多种可视化方案：
- 5+ 个图表库，满足各种数据展示需求
- 4+ 个地图引擎，支持从平面地图到 3D 地球
- 完整的 3D 可视化能力，支持场景互动
4. 学习价值高
📚 完美的学习项目：
- 前后端完整分离，展示真实的系统架构
- 代码规范清晰，易于理解和参考
- 涵盖从基础到高级的各类技术
- 包含完整的最佳实践
七、应用场景
ORANGE 系统适用于以下场景：
企业应用
- 企业级权限管理后台
- 内部业务管理系统
- 员工信息管理系统
- 流程审批系统
数据分析
- 数据可视化大屏
- BI 分析平台
- 实时监控面板
- 地理信息分析系统
SaaS 平台
- 多租户权限隔离
- 用户权限分配
- 组织结构管理
- 功能模块授权
地理信息应用
- 地图应用开发
- 位置服务平台
- 地理数据展示
- 3D 场景呈现
八、文件结构导览
orange/
├── 前端应用
│ └── vite-shadcn/
│ ├── src/
│ │ ├── components/ # React 组件库
│ │ ├── pages/ # 页面路由
│ │ ├── hooks/ # React Hooks
│ │ ├── store/ # Zustand 状态管理
│ │ ├── lib/ # 工具库和配置
│ │ ├── locale/ # 国际化
│ │ ├── themes/ # 主题文件
│ │ └── mock/ # Mock API 数据
│ ├── package.json # 依赖配置
│ └── vite.config.ts # Vite 构建配置
├── 后端应用
│ └── springboot/
│ ├── src/
│ │ ├── main/
│ │ │ ├── java/com/orange/
│ │ │ │ ├── entity/ # JPA 实体
│ │ │ │ ├── controller/ # REST 控制器
│ │ │ │ ├── service/ # 业务逻辑
│ │ │ │ ├── repository/ # 数据仓库
│ │ │ │ └── config/ # 配置类
│ │ │ └── resources/
│ │ │ ├── keys/ # JWT 密钥
│ │ │ ├── application.yaml # 配置文件
│ │ │ └── templates/ # 模板文件
│ │ └── test/ # 单元测试
│ ├── pom.xml # Maven 依赖
│ └── README.md # 后端文档
├── database/
│ └── postgres/
│ ├── ddl.sql # 数据库建表脚本
│ └── dml.sql # 初始数据脚本
└── README.md # 项目主文档
九、总结与展望
ORANGE 是一个集现代化设计、完整功能、高效性能于一身的企业级管理系统。
核心优势
✅ 前后端完整分离：清晰的架构边界，易于维护和扩展
✅ 技术栈前沿：采用业界最新的主流技术
✅ 功能模块完整：权限、用户、角色等开箱即用
✅ 可视化能力强：多种图表、地图、3D 展示方案
✅ 代码质量高：规范清晰，易于学习和参考
✅ 生产级别：经过验证，可直接工作于商业项目
未来规划
我们持续在以下方向优化和扩展：
- 📱 移动端适配优化
- 🔄 离线能力增强
- 🚀 性能进一步优化
- 🌐 更多语言支持
- 📊 更多图表和地图库集成
- 🔌 插件系统架构
