在快节奏的都市生活中,“衣橱塞满却依然觉得没衣服穿”、“冲动消费导致闲置积压吃灰”已成为青年群体的普遍烦恼。为此,我们设计并开发了这套【智能衣橱穿搭打卡与二手闲置置换系统】(SmartWardrobe & Outfit Swap),深度贯通“数字化衣橱盘点 + 气象/场合智能穿搭聚类 + OOTD打卡 + 低碳二手闲置以衣换衣”的全生命周期时尚闭环。
系统采用现代企业级全栈技术栈:Vue 3.4 Composition API + Pinia + Tailwind CSS + ECharts 5 构建三端响应式界面,后端集成 Spring Boot 3.2 + Redis + MySQL,实现三端一体化闭环:
- 🖥️ PC端胶囊衣橱策展大屏:面向穿搭爱好者与极简生活主义者的胶囊资产分析大屏、色系风格聚类拓扑沙盘、CPW单次穿着成本趋势与闲置物物调度;
- 🛡️ 运营管理总控台 (Admin Console):全网时尚循环流转态势大屏、Pantone 国际标准色卡与标签库、闲置验真防伪仲裁及绿色减碳积分模型;
- 📱 微信小程序/随身移动端 (Mobile App):随手拍照抠图录入、气象灵感穿搭、每日全身镜OOTD打卡与同城同好闲置流转集市。
一、 系统视觉设计美学:法式奶杏白与高级暖燕麦色
本系统严格杜绝了模板化深黑 AI Slop 界面,全面拥抱“法式奶杏白 + 高级暖燕麦 + 柔和暖灰”(#fefce8, #d97706, #fdfbf7, #78350f)的法式高级老钱风美学设计。结合磨砂毛玻璃质感、优雅温润的圆角排版与灵动优雅的穿搭卡片,打造赏心悦目、松弛自如的高端时尚数字化空间。
二、 三端高保真全套运行界面逐图深度解析
1. PC端胶囊衣橱策展室与全域看板 (PC Terminal)
(1) 胶囊衣橱资产全景大屏 (WardrobeDeskView)
整合实时气温、个人衣橱总估值、季度实穿率与今日 AI 聚类最佳穿搭方案。

(2) 今日风格聚类穿搭卡片与单品联动 (OutfitClusterCard)
基于天气与出席场合,智能组合外套、下装、鞋履与包袋,呈现和谐松弛感。

(3) 穿搭打卡履约热力图 (MonthlyOotdHeatmap)
365天 GitHub 式高光热力矩阵,清晰展现每日实穿频率与风格偏好变迁。

(4) 风格聚类穿搭沙盘 (WardrobeClusterView)
同色系叠穿与冷暖碰撞算法模拟,推演 10 件基础单品打造 30 套穿搭的最优方案。

(5) 闲置服饰物物置换调度中心 (WardrobeSwapCenterView)
展示全网同好置换需求,零金钱成本以衣换衣,促进闲置服饰高效循环。

(6) 单次穿着成本 (CPW) 与衣橱浪费深度审计 (WardrobeAnalyticsView)
ECharts 5 渲染单品 CPW 平摊下降折线图与吃灰闲置单品占比雷达图。

(7) 私人时尚策展与色彩骨骼诊断 VIP (WardrobeVipView)
尊享十二季个人色彩倾向测试、身形骨骼模型诊断与闲置顺丰免费上门取件特权。

2. 运营管理总控台 (Admin Console)
(1) 全网时尚流转与旧衣循环大屏 (AdminDashboardView)
实时大屏监控全网数字衣橱录入件数、闲置撮合成交量与累计减少碳排放总量。

(2) 服饰品类与 Pantone 标准色卡库 (WardrobeTagsView)
管理面料属性、剪裁版型与十二季个人色彩分析对应的十六进制国际标准色卡。

(3) 闲置单品成色验真与仲裁管理 (WardrobeAuditView)
AI 识别洗水唛成分防伪,全程存证闲置寄送物流,防范纠纷与假冒单品。

(4) 绿色低碳循环算法与碳账户 (WardrobeCarbonView)
测算大衣、针织、衬衫单件循环带来的减碳数值,配置环保积分兑换权益。

(5) 系统设置与穿搭聚类算法调参 (WardrobeSettingsView)
配置全国气象接口温差阈值敏感度与吃灰闲置单品判定周期天数。

3. 手机移动端与微信小程序随身端 (Mobile H5 / 小程序)
(1) 气象穿搭灵感主屏 (MobileHomeView)
实时同步本地气象与温差,智能推送今日法式老钱风穿搭组合。

(2) 掌上数字衣橱 (MobileClosetView)
支持按季节色系分类浏览,清晰标明每件衣物实穿频次与单次成本。

(3) OOTD 穿搭实景打卡 (MobileOotdView)
一键上传全身镜穿搭自拍,自动识别关联衣橱单品并更新穿着日志。

三、 核心气象风格聚类推荐与 CPW 算法代码
// Spring Boot 3.2 气象-色系-场合多维风格聚类推荐与 CPW 算法服务
@Service
@Transactional
public class WardrobeRecommendationServiceImpl implements WardrobeRecommendationService {
@Autowired
private WardrobeItemRepository itemRepo;
@Autowired
private WeatherService weatherService;
@Autowired
private StyleClusterEngine clusterEngine;
@Override
public OutfitRecommendationVO generateDailyOutfit(Long userId, String city, String occasion) {
// 1. 调取当地气象中枢数据 (实时温度、降水概率、温差)
WeatherData weather = weatherService.getRealtimeWeather(city);
// 2. 查询用户个人数字衣橱有效库存
List userItems = itemRepo.findByUserIdAndStatusNormal(userId);
// 3. 运行 K-Means 风格色彩特征聚类推荐算法
// 根据气温区间过滤适合厚度,根据场合加权 (如通勤避开过于暴露/过于随性)
OutfitClusterResult cluster = clusterEngine.computeOptimalCombination(
userItems,
weather.getTemperatureRange(),
occasion
);
// 4. 重新演算单品单次穿着成本 (Cost-Per-Wear)
List itemVOList = cluster.getSelectedItems().stream().map(it -> {
BigDecimal cpw = it.getPurchasePrice()
.divide(BigDecimal.valueOf(it.getWearCount() + 1), 2, RoundingMode.HALF_UP);
return OutfitItemVO.builder()
.name(it.getName())
.category(it.getCategory())
.colorHex(it.getColorHex())
.currentWearCount(it.getWearCount() + 1)
.projectedCPW(cpw)
.build();
}).collect(Collectors.toList());
return OutfitRecommendationVO.builder()
.weatherBrief(weather.getBrief())
.outfitTitle(cluster.getStyleThemeName())
.matchScore(cluster.getCompatibilityScore())
.items(itemVOList)
.stylistAdvice(cluster.getAdviceText())
.build();
}
}
四、 常见问题解答 (FAQ)
Q1: 什么是胶囊衣橱 (Capsule Wardrobe) 和单次穿着成本 (CPW)?
A: 胶囊衣橱主张留下经典、质感、百搭的几十件高频单品,摒弃快时尚的盲目堆叠;单次穿着成本 CPW (Cost Per Wear) = 购买总价 / 实穿总次数。一件 2000 元穿 100 次的大衣(每次 20 元),远比 200 元仅穿 1 次的快时尚廉价(每次 200 元)!
Q2: 前端工程如何启动与二次开发?
A: 工程基于纯净的 Vue 3.4 + Pinia + Vite 5 架构,解压后执行 npm install 与 npm run dev 即可直接秒级启动。内嵌完整的法式胶囊衣橱模拟字典与全套 15 张 4K 原生截图,开箱即用!
