更新记录

1.0.0（2025-12-15）下载此版本

前端采用 uni-app 后端 nestjs+mysql+豆包 AI 有单独部署版本、微信云托管版本

平台兼容性

懒人搭衣 - 项目说明文档

📝 项目概述

「懒人搭衣」是一个基于人工智能的智能穿搭推荐系统，旨在帮助用户轻松管理衣柜、获取穿搭推荐，并记录每日穿搭。系统集成豆包 AI，实现衣物智能识别和穿搭推荐，支持微信小程序、H5 和 APP 多端运行。

核心特性

✨ 智能穿搭推荐：基于天气和用户衣柜，AI 自动生成每日穿搭方案
🤖 AI 智能识别：自动识别衣物品类、颜色、厚度，支持批量上传
📅 穿搭日历：记录每日穿搭，避免重复，查看历史记录
👔 衣柜管理：分类管理衣物，支持常用标记和快捷操作
🌤️ 天气联动：自动获取实时天气，推荐适合温度的穿搭
📱 跨端支持：支持微信小程序、H5、APP 多端运行
🛡️ 后台管理：完整的后台管理系统，管理用户、衣物、穿搭记录

🏗️ 技术架构

整体架构

懒人搭衣系统
├── 前端层
│   ├── app (UniApp 小程序/H5/APP)
│   └── admin (React 后台管理系统)
├── 后端层
│   └── api (NestJS RESTful API)
├── 数据层
│   └── MySQL 数据库
└── 第三方服务
    ├── 豆包 AI (衣物识别 + 穿搭推荐)
    ├── 和风天气 API
    └── 腾讯云 COS (图片存储)

技术栈

后端 (api/)

框架: NestJS 11.x (Node.js 框架)
ORM: TypeORM 0.3.x
数据库: MySQL 8.0+
文件存储: 腾讯云 COS
AI 服务: 豆包 AI API
认证: JWT
其他: Axios, Multer, bcrypt

前端 - 小程序端 (app/)

框架: UniApp (Vue 3)
UI 组件: uni-ui
跨端支持: 微信小程序、H5、APP
状态管理: 本地缓存 (uni.storage)

前端 - 后台管理 (admin/)

框架: React 19.x
UI 组件: Ant Design 5.x
路由: React Router 7.x
状态管理: Zustand
图表: Recharts
样式: Tailwind CSS
构建工具: Vite 6.x

📦 项目结构

outfit/
├── api/                        # NestJS 后端服务
│   ├── src/
│   │   ├── modules/           # 业务模块
│   │   │   ├── admin/        # 管理员模块
│   │   │   ├── user/         # 用户模块
│   │   │   ├── clothes/      # 衣物模块
│   │   │   ├── outfit/       # 穿搭模块
│   │   │   ├── virtual-fitting/  # 虚拟试穿模块
│   │   │   ├── feature-module/   # 功能模块管理
│   │   │   └── stats/        # 数据统计模块
│   │   ├── entities/          # 数据库实体
│   │   ├── common/           # 公共服务
│   │   │   ├── services/     # AI、COS、天气服务
│   │   │   └── ...
│   │   ├── config/           # 配置文件
│   │   └── main.ts           # 入口文件
│   ├── dist/                  # 编译产物
│   ├── migrations/            # 数据库迁移
│   ├── .env                   # 环境变量配置
│   └── package.json
│
├── app/                       # UniApp 前端应用
│   ├── pages/                # 页面
│   │   ├── index/           # 首页 (今日穿搭)
│   │   ├── wardrobe/        # 我的衣柜
│   │   ├── calendar/        # 穿搭日历
│   │   ├── fitting/         # 虚拟试穿
│   │   ├── profile/         # 个人中心
│   │   └── ...
│   ├── uni_modules/          # uni-ui 组件库
│   ├── utils/                # 工具函数
│   │   ├── api.js           # API 接口封装
│   │   ├── storage.js       # 本地存储
│   │   └── feature-module.js # 功能模块控制
│   ├── App.vue               # 应用入口
│   ├── manifest.json         # 应用配置
│   └── pages.json            # 页面配置
│
├── admin/                     # React 后台管理系统
│   ├── src/
│   │   ├── pages/           # 页面组件
│   │   │   ├── Dashboard.tsx      # 数据看板
│   │   │   ├── Users.tsx          # 用户管理
│   │   │   ├── Clothes.tsx        # 衣物管理
│   │   │   ├── Outfits.tsx        # 穿搭记录
│   │   │   ├── VirtualFittings.tsx # 虚拟试穿记录
│   │   │   ├── FeatureModules.tsx # 功能模块管理
│   │   │   └── Login.tsx          # 登录页
│   │   ├── components/      # 公共组件
│   │   │   ├── Layout.tsx         # 布局组件
│   │   │   ├── PageHeader.tsx     # 页面头部
│   │   │   └── ProtectedRoute.tsx # 路由守卫
│   │   ├── services/        # API 服务
│   │   ├── App.tsx          # 应用入口
│   │   └── main.tsx         # 主入口
│   ├── dist/                 # 构建产物
│   ├── index.html
│   └── package.json
│
├── tools/                     # 工具脚本
├── API接口文档.md             # API 接口说明
├── API接口列表.md
├── 启动指南.md                # 小程序启动指南
├── 后台管理系统启动指南.md    # 后台启动指南
├── 衣物批量上传功能说明.md    # 批量上传功能说明
├── 设计.md                    # 产品设计文档
└── README.md                  # 项目说明文档 (本文件)

🚀 快速开始

前置要求

Node.js >= 18.0
pnpm >= 8.0
MySQL >= 8.0
HBuilderX (运行小程序)

1. 数据库准备

创建数据库：

CREATE DATABASE outfit CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

2. 后端启动

配置环境变量

编辑 api/.env 文件：

# 数据库配置

安装依赖并启动

cd api
pnpm install
pnpm run start:dev

创建管理员账号

cd api
pnpm run create:admin

按提示输入用户名和密码。

3. 小程序前端启动

使用 HBuilderX

打开 HBuilderX
文件 → 打开目录 → 选择 app 文件夹
运行 → 运行到浏览器 → Chrome

或运行到微信开发者工具：

运行 → 运行到小程序模拟器 → 微信开发者工具

🔑 第三方服务申请

1. 豆包 AI

访问：https://www.volcengine.com/product/doubao
注册并创建应用
获取 API Key
在 .env 中配置 AI_API_KEY

2. 和风天气

访问：https://dev.qweather.com/
注册并创建应用
获取 API Key (免费版即可)
在 .env 中配置 WEATHER_API_KEY

3. 腾讯云 COS (可选)

访问：https://cloud.tencent.com/product/cos
开通对象存储服务
创建存储桶
获取 SecretId 和 SecretKey
在 .env 中配置 COS 相关参数

注：如不使用 COS，图片将存储在本地 uploads/ 目录

📱 功能模块

小程序端功能

1. 首页 (今日穿搭)

自动生成推荐穿搭
显示天气信息和穿搭建议
"换一套" 重新生成推荐
"确认穿这套" 记录当日穿搭
预览搭配大图

2. 我的衣柜

分类管理：上衣、下装、鞋子、外套四大分类
拍照上传：支持拍照或从相册选择
批量上传：一次最多上传 9 张图片
AI 识别：自动识别衣物品类、颜色、厚度
衣物管理：
- 长按操作菜单
- 设为常用（推荐优先使用）
- 编辑信息
- 删除衣物
网格展示：衣物抠图 + 属性标签

3. 穿搭日历

月视图日历：显示每日穿搭缩略图
历史记录：查看过往穿搭详情
重复预警：连续穿相同衣物时提醒
快捷跳转："今日" 按钮快速回到当天
手动补录：为未记录日期添加穿搭

4. 虚拟试穿

上传人物照片生成虚拟模特
选择衣物进行虚拟试穿
查看试穿历史记录
保存喜欢的试穿效果

5. 个人中心

用户信息管理
风格偏好设置
模特照片管理
隐私协议和用户协议

后台管理系统功能

1. 数据看板

用户总数统计
衣物总数统计
穿搭记录统计
虚拟试穿次数统计
用户增长趋势图
功能使用情况分析

2. 用户管理

用户列表查看
用户详细信息
用户衣柜查看
用户穿搭记录查看

3. 衣物管理

所有衣物列表
按分类筛选
按用户筛选
衣物详情查看
批量删除

4. 穿搭记录

穿搭记录列表
按日期筛选
按用户筛选
查看搭配详情

5. 虚拟试穿记录

试穿记录列表
查看试穿效果图
按用户筛选
记录统计

6. 功能模块管理

功能开关控制
模块启用/禁用
功能排序

📖 核心功能流程

衣物上传识别流程

用户选择图片
    ↓
上传到云存储/本地
    ↓
调用豆包AI识别
    ↓
返回品类/颜色/厚度
    ↓
保存到数据库
    ↓
刷新衣柜列表

穿搭推荐流程

用户打开首页
    ↓
获取用户衣柜数据
    ↓
获取当前天气
    ↓
查询近3天穿搭记录
    ↓
调用豆包AI生成推荐
(考虑天气、避免重复)
    ↓
合成搭配图片
    ↓
返回推荐结果

穿搭记录流程

用户确认穿搭
    ↓
保存穿搭记录到数据库
(包含日期、衣物ID、天气等)
    ↓
更新日历视图
    ↓
检测重复穿搭
    ↓
标记预警状态

🗄️ 数据库设计

主要数据表

users (用户表)

user_id (主键)
unique_id (唯一标识)
nickname (昵称)
avatar_url (头像)
created_at (创建时间)

clothes (衣物表)

clothes_id (主键)
user_id (用户ID)
img_url (图片地址)
category (品类: top/bottom/shoe/coat)
color (颜色)
thickness (厚度: light/medium/heavy)
is_favorite (是否常用)
created_at (创建时间)

outfit_records (穿搭记录表)

record_id (主键)
user_id (用户ID)
date (日期)
top_id (上衣ID)
bottom_id (下装ID)
shoe_id (鞋子ID)
coat_id (外套ID)
weather (天气)
weather_desc (天气描述)
outfit_img (搭配图)
created_at (创建时间)

virtual_fitting_records (虚拟试穿记录表)

record_id (主键)
user_id (用户ID)
model_img_url (模特图)
clothes_id (衣物ID)
result_img_url (试穿结果图)
created_at (创建时间)

admins (管理员表)

admin_id (主键)
username (用户名)
password (密码哈希)
created_at (创建时间)

feature_modules (功能模块表)

module_id (主键)
name (模块名称)
key (模块标识)
description (描述)
is_enabled (是否启用)
order (排序)

🔌 API 接口

主要接口模块

用户模块: /api/user/*
衣物模块: /api/clothes/*
穿搭模块: /api/outfit/*
虚拟试穿: /api/virtual-fitting/*
管理后台: /api/admin/*
数据统计: /api/stats/*
功能模块: /api/feature-module/*

所有接口统一使用 POST 请求，响应格式：

{
  "code": 200,
  "message": "成功",
  "data": {}
}

🛠️ 开发规范

代码风格

后端使用 TypeScript，遵循 ESLint 规范
前端使用 Vue 3 组合式 API
使用 Prettier 进行代码格式化

Git 提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
test: 测试相关
chore: 构建/工具相关

🐛 常见问题

1. 数据库连接失败

检查 MySQL 服务是否启动
确认 .env 中的数据库配置正确
确认数据库已创建

2. 图片上传失败

确认 uploads 目录存在且有写权限
检查 COS 配置是否正确
检查文件大小是否超过限制

3. AI 识别失败

确认豆包 AI API Key 是否正确
检查网络连接
查看后端日志中的错误信息

4. 前端请求失败

确认后端服务已启动
检查 API 地址配置是否正确
查看浏览器控制台的网络请求

5. 后台管理系统登录失败

确认已创建管理员账号
检查用户名密码是否正确
查看浏览器控制台错误信息

📈 性能优化

已实现的优化

图片压缩：上传时自动压缩，减少存储和加载时间
本地缓存：衣柜数据、天气信息等缓存到本地
并行处理：批量上传时并行处理多张图片
数据库索引：关键字段建立索引，提升查询速度
CDN 加速：使用腾讯云 COS CDN 加速图片访问

可优化项

实现 Redis 缓存，减少数据库查询
实现图片懒加载和虚拟列表
前端资源按需加载，减少首屏时间
实现消息队列，处理耗时任务

🚀 部署指南

后端部署

使用 Docker (推荐)

cd api
docker build -t outfit-api .
docker run -p 3000:3000 --env-file .env outfit-api

使用云托管

已支持腾讯云云托管部署，参考 api/cloudbaserc.json 配置。

前端部署

小程序发布

在 HBuilderX 中发行 → 小程序-微信
上传到微信公众平台
提交审核

后台管理系统部署

cd admin
pnpm build

将 dist/ 目录部署到静态服务器（Nginx、Apache 等）。

AI懒人搭衣 AI 豆包 uni-app 独立 开箱即用