Tonight云图库（白桦图享工坊）

全栈智能图片管理系统 —— 支持图片上传/管理/审核、AI 智能标注、空间隔离与权限控制、实时协同编辑、数据可视化分析

---

技术栈

后端

技术	版本 / 说明
Java	11
Spring Boot	2.7.6（Web, AOP, WebSocket, Mail, AMQP）
MyBatis-Plus	3.5.12 + MySQL
Redis	会话存储（Spring Session）+ 缓存
RabbitMQ	异步消息（审核通知）
Sa-Token	登录鉴权 + 空间级 RBAC 权限
Knife4j / Swagger	API 文档（/api/doc.html）
Tencent COS	图片对象存储（原图 / 压缩 / 缩略图三级存储）
腾讯混元大模型	图片自动打标与分类
阿里云 DashScope	AI 图像扩图
LMAX Disruptor	高性能 WebSocket 事件处理
Caffeine	本地缓存

前端

技术	版本 / 说明
Vue 3	Composition API + <script setup>
TypeScript	5.6
Vite	6
Ant Design Vue	4.x
Pinia	状态管理
Vue Router	4（History 模式）
ECharts	5 + vue-echarts + 词云扩展
Axios	HTTP 客户端
@umijs/openapi	根据 Swagger 自动生成 API 代码与类型

---

项目结构

ye_pic/
├── ye-picture-backend/               # Spring Boot 后端
│   ├── sql/                          # 数据库建表脚本
│   ├── src/main/java/com/ye/yepicturebackend/
│   │   ├── annotation/               # 自定义注解（@AuthCheck）
│   │   ├── aop/                      # AOP 拦截器
│   │   ├── api/                      # 外部 API 集成（阿里云/混元/百度搜图）
│   │   ├── common/                   # 通用响应封装
│   │   ├── config/                   # Spring 配置（CORS/JSON/MyBatis/RabbitMQ/混元）
│   │   ├── constant/                 # 常量
│   │   ├── controller/               # REST 控制器（7 个）
│   │   ├── exception/                # 异常处理
│   │   ├── listener/                 # RabbitMQ 消费者
│   │   ├── manager/                  # 业务管理器（认证/COS 上传/WebSocket）
│   │   ├── mapper/                   # MyBatis-Plus Mapper（8 个）
│   │   ├── model/
│   │   │   ├── dto/                  # 请求 DTO
│   │   │   ├── entity/               # 数据库实体
│   │   │   ├── enums/                # 枚举
│   │   │   └── vo/                   # 视图对象
│   │   ├── service/                  # 服务接口 + impl 实现
│   │   └── utils/                    # 工具类
│   └── src/main/resources/
│       ├── application.yml           # 主配置
│       ├── application-local.yml     # 本地密钥配置
│       ├── biz/                      # 空间权限角色定义
│       └── mapper/                   # MyBatis XML
│
└── ye-picture-frontend/              # Vue 3 前端
    ├── src/
    │   ├── api/                      # 自动生成的 API 客户端
    │   ├── components/               # 可复用组件
    │   │   ├── analyze/              # 6 个分析图表组件
    │   │   ├── common/               # 通用组件（分享弹窗）
    │   │   ├── layout/               # 布局（顶栏/侧栏）
    │   │   └── picture/              # 图片相关组件
    │   ├── constants/                # 常量
    │   ├── layouts/                  # 页面布局
    │   ├── pages/                    # 页面（16 个）
    │   │   ├── admin/                # 管理页
    │   │   ├── picture/              # 图片页
    │   │   ├── space/                # 空间页
    │   │   └── user/                 # 用户页
    │   ├── router/                   # 路由配置
    │   ├── stores/                   # Pinia 状态管理
    │   └── utils/                    # 工具函数 + WebSocket 客户端
    ├── vite.config.ts
    ├── openapi.config.js             # API 代码生成配置
    └── package.json

---

核心功能

图片管理

• 多种上传方式：文件上传（支持裁剪）、URL 导入、批量抓取
• 三级存储：原图 → 压缩图 → 缩略图，自动存储至腾讯云 COS
• 以图搜图：基于百度图片搜索的相似图片查找
• 颜色搜索：加权欧氏距离算法搜索相似色调图片
• 批量编辑：批量修改分类、标签、命名规则

AI 智能处理

• 自动标注：批量上传时调用腾讯混元大模型，自动生成图片描述、标签与分类
• 图像扩图：基于阿里云 DashScope API 的 AI 智能扩展图片边界

空间系统

• 三级配额：普通版（100 张/100MB）、专业版（1000 张/1GB）、旗舰版（10000 张/10GB）
• 空间类型：私有空间 / 团队空间
• RBAC 权限：浏览者 / 编辑者 / 管理员，基于 Sa-Token 的动态权限解析
• 空间分析：用量概览、分类分布、标签词云、大小分段、用户行为、空间排行

审核流程

• 管理员审核图片（通过/拒绝）
• 审核结果通过 RabbitMQ 异步推送站内信 + 邮件通知
• 前端消息中心查看审核结果

实时协同编辑

• 基于 WebSocket 的图片协同编辑（缩放、旋转）
• LMAX Disruptor 环形缓冲区处理高并发编辑事件
• 单编辑者锁模型，编辑操作实时广播

评论系统

• 两级评论（根评论 + 回复）
• 支持点赞数统计

---

数据库设计

8 张核心数据表：

表名	说明
user	用户账号、角色（user/admin）
picture	图片元数据、COS 存储路径、审核状态
space	空间信息、配额、使用量
space_user	空间成员及角色
picture_comment	两级评论系统
picture_tag	预定义标签库
picture_category	预定义分类库
sys_notice	系统通知（审核结果）

表结构脚本：ye-picture-backend/sql/create_table.sql

---

API 概览

后端监听端口 8222，上下文路径 /api。Swagger 文档：http://localhost:8222/api/doc.html

模块	路径	说明
用户	/api/user/**	注册、登录、登出、个人中心、管理端 CRUD
图片	/api/picture/**	上传、编辑、删除、搜索、审核、AI 扩图、批量操作
评论	/api/picture/comment/**	评论与回复
空间	/api/space/**	空间 CRUD、管理端操作
空间成员	/api/spaceUser/**	成员管理
空间分析	/api/space/Analyze/**	多维度数据分析
通知	/api/notice/**	审核通知、未读计数
WebSocket	/ws/picture/edit	实时协同编辑

---

快速开始

环境要求

• JDK 11+
• Maven 3.6+
• Node.js 18+
• MySQL 8.0+
• Redis 6+
• RabbitMQ 3.9+
• 腾讯云 COS 存储桶
• （可选）腾讯混元 / 阿里云 AI 密钥

后端启动

# 1. 初始化数据库
mysql -u root -p < ye-picture-backend/sql/create_table.sql

# 2. 配置本地密钥
# 编辑 ye-picture-backend/src/main/resources/application-local.yml
# 填入数据库、Redis、COS 等配置

# 3. 启动服务
cd ye-picture-backend
mvn spring-boot:run

前端启动

# 1. 安装依赖
cd ye-picture-frontend
npm install

# 2. 生成 API 类型（需先启动后端）
npm run openapi

# 3. 启动开发服务器
npm run dev

前端开发服务器默认运行在 http://localhost:5173，已配置代理转发至后端。

---

默认角色

角色	权限
普通用户（user）	上传图片、创建空间、个人管理
管理员（admin）	用户管理、图片审核、空间管理

注册时默认创建用户私有空间（普通版配额）。

---

空间权限矩阵

操作	浏览者	编辑者	管理员
查看图片	✅	✅	✅
上传图片	❌	✅	✅
编辑图片	❌	✅	✅
删除图片	❌	❌	✅
管理成员	❌	❌	✅