ShadeMarket

基于 Django + Vue 3 的图片社交媒体平台，支持 RAW 文件处理、在线图片编辑和社交分享

---

项目简介

ShadeMarket（光影集市）是一个面向摄影爱好者的图片社交媒体平台。用户可以上传 RAW 格式照片，通过集成的 RawTherapee 进行专业级的图像处理，并分享到社区与其他摄影爱好者交流。

核心特性

• RAW 文件全流程支持 - 支持多种相机 RAW 格式（ARW、CR2/CR3、NEF、DNG 等）
• 三层存储架构 - RAW 原图、高分辨率 JPG、WebP 预览图分层存储
• 在线图片编辑 - 集成 RawTherapee 5.12，支持参数回放
• 社交互动 - 帖子发布、评论、点赞、用户关注
• 云存储 + CDN - MinIO 对象存储，支持 CDN 加速

---

主要功能

用户功能

• 用户注册/登录（JWT 认证）
• 个人资料管理（头像、昵称、背景图）
• 用户主页和个人作品展示

图片处理

• RAW 文件上传
• 自动生成多尺寸预览图
• 在线图片编辑器（亮度、对比度、饱和度等参数调节）
• 编辑参数保存和版本管理
• 素材库功能

社交功能

• 发布图文帖子
• 社区瀑布流展示
• 帖子详情查看
• 评论回复（支持嵌套）
• 点赞/取消点赞
• 浏览计数

---

技术栈

后端

技术	版本	用途
Django	4.2	Web 框架
Django REST Framework	-	API 构建
SimpleJWT	-	JWT 认证
MySQL/SQLite	-	数据库
MinIO	-	对象存储
RawTherapee	5.12	RAW 图像处理
Gunicorn	-	生产环境服务器

前端

技术	版本	用途
Vue.js	3.5	前端框架
TypeScript	5.9	类型安全
Vite	7.1	构建工具
Element Plus	2.11	UI 组件库
Pinia	3.0	状态管理
Vue Router	4.5	路由管理
Axios	1.12	HTTP 客户端
MSW	2.11	API Mock

测试

• 后端: Django Test, Coverage.py, Locust
• 前端: Vitest, Playwright, @testing-library/vue

---

快速开始

环境要求

• Docker & Docker Compose
• Node.js >= 22.18.0, npm >= 10.2.0
• Python 3.11+

1. 克隆项目

git clone https://github.com/your-org/ShadeMarket.git
cd ShadeMarket

2. 准备 RawTherapee

下载 RawTherapee 5.12 的 AppImage 文件，放置于 backend/ 目录：

# 确保 backend 目录下有 RawTherapee_5.12_release.AppImage
ls backend/RawTherapee_5.12_release.AppImage

3. 启动开发环境

docker compose up

服务将启动在（默认端口映射）：

• 前端: http://localhost:5173
• 后端 API: http://localhost:18000
• MinIO 控制台: http://localhost:9001

4. 初始化数据库（首次运行）

# 进入后端容器
docker exec -it shademarket-backend bash

# 执行数据库迁移
cd shademarket
python manage.py migrate

# 创建超级用户
python manage.py createsuperuser

# 初始化存储服务
python manage.py init_storage

5. 访问应用

打开浏览器访问 http://localhost:5173 即可。

---

部署指南

开发环境

使用 SQLite 数据库，无 Nginx 反向代理：

docker compose up

生产环境

使用 MySQL 数据库 + Nginx 反向代理：

# 1. 构建前端静态文件
cd frontend
npm run build
cd ..

# 2. 设置静态资源权限
sudo chmod -R 755 ./backend/shademarket/media
sudo chmod -R 755 ./frontend/dist

# 3. 启动生产环境
docker compose -f docker-compose.prod.yml up

测试环境

docker compose -f docker-compose.test.yml up

---

项目结构

ShadeMarket/
├── backend/                    # Django 后端
│   ├── shademarket/           # Django 项目主目录
│   │   ├── accounts/          # 用户认证模块
│   │   ├── api/               # API 路由集中管理
│   │   ├── chat/              # 聊天功能模块
│   │   ├── editor/            # 编辑器管理模块
│   │   ├── material/          # 素材库管理模块
│   │   ├── social/            # 社交功能模块
│   │   ├── storage/           # 存储管理模块
│   │   ├── utils/             # 通用工具文件
│   │   └── shademarket/       # 项目配置
│   ├── requirements.txt       # Python 依赖
│   ├── Dockerfile             # 开发环境镜像
│   └── Dockerfile.prod        # 生产环境镜像
│
├── frontend/                  # Vue 前端
│   ├── src/
│   │   ├── api/              # API 管理
│   │   ├── components/       # Vue 组件
│   │   ├── composables/      # TypeScript 工具函数
│   │   ├── router/           # 路由配置
│   │   ├── stores/           # Pinia 状态管理
│   │   ├── types/            # TypeScript 类型定义
│   │   ├── utils/            # 工具函数
│   │   └── views/            # 页面组件
│   ├── package.json          # Node.js 依赖
│   └── Dockerfile            # 开发环境镜像
│
├── nginx/                    # 反向代理配置
├── doc/                       # 项目文档
├── load_tests/               # 负载测试脚本
├── docker-compose.yml        # 开发环境编排
├── docker-compose.prod.yml   # 生产环境编排
├── docker-compose.test.yml   # 测试环境编排
└── README.md                 # 本文件

---

文档导航

项目文档

文档	描述
文档总览	所有文档的导航和索引
环境依赖	开发和生产环境依赖要求
协作规范	Git 分支、Commit、代码审查规范
数据初始化	数据库迁移和测试数据生成指南

API 文档

文档	描述
OpenAPI 规范	完整的 RESTful API 接口定义

架构文档

文档	描述
数据库设计	数据库模型和 ER 图说明
API 设计	API 设计理念和模型说明
前端架构	Vue 3 前端技术栈和代码组织
API 集成	前端 API 调用和类型安全指南

测试文档

文档	描述
测试体系概览	前后端测试框架和执行命令
前端测试	前端单元测试、集成测试详情
后端测试	后端单元测试、集成测试详情

代码模块文档

文档	描述
后端模块	Django 后端技术栈和模块说明
前端模块	Vue 前端技术栈和开发指南