【智能衣橱穿搭打卡与二手闲置置换App】基于 Vue3 + Spring Boot + 风格聚类推荐的设计与实现（含PRD/三端高保真源码/大屏）

📌 项目摘要：在快节奏的都市生活中，“衣橱塞满却依然觉得没衣服穿”、“冲动消费导致闲置积压吃灰”已成为当代青年的普遍困境。本项目研发了一套基于 Vue 3.4 + Pinia + Tailwind CSS + ECharts 5 + Spring Boot 3.2 的一体化【智能衣橱穿搭打卡与二手闲置置换系统】。深度贯通**“数字化衣橱盘点 + 气象/场合智能穿搭聚类 + OOTD打卡 + 低碳二手闲置以衣换衣”**，结合单次穿着成本 (CPW) 精细核算与 365天 GitHub 式热力图，打造“移动端随身 + PC端胶囊大屏 + Admin端绿色流转”三端高保真时尚闭环！

一、系统业务架构与多端协同设计

本系统严格遵从现代企业级规范，构建了**“移动端随身打卡 + PC端胶囊大屏 + Admin端时尚总控”**三端协同体系：

+-----------------------------------------------------------------------------------+
|               SmartWardrobe 绿色胶囊时尚与旧衣物物置换闭环平台                    |
+-----------------------------------------------------------------------------------+
|                                                                                   |
|  [ 📱 微信小程序/随身端 ]        [ 🖥️ PC胶囊衣橱大屏 ]        [ 🛡️ 运营管理总控台 ]  |
|  - 拍照抠图极速收纳入库        - 胶囊衣橱资产全景大屏       - 全网旧衣流转态势大屏   |
|  - 实时气象穿搭灵感推送        - 风格聚类穿搭推演沙盘       - Pantone国际标准色卡库  |
|  - 全身镜 OOTD 打卡日记        - 闲置服饰物物置换中枢       - 闲置洗水唛成色验真仲裁 |
|  - 同好以衣换衣漂流市集        - ECharts 单品CPW下降曲线    - 绿色循环减碳积分算法   |
|                                                                                   |
+-----------------------------------------------------------------------------------+
                                         │
                                         ▼ (RESTful API / JWT / WebSocket)
+-----------------------------------------------------------------------------------+
|                     Spring Boot 3.2 风格聚类引擎与低碳循环中枢                     |
|  - 气象-色系-场合多维聚类推荐算法 (K-Means)  - 单次穿着成本动态核算 (CPW Engine)   |
|  - 闲置吃灰智能断舍离预警调度器              - 双向物物置换流转存证追踪            |
+-----------------------------------------------------------------------------------+

二、现代高端前端 UI/UX 美学设计

系统彻底告别了千篇一律的深黑 AI Slop 风格，精选**“法式奶杏白 + 高级暖燕麦 + 柔和暖灰”**（#fefce8, #d97706, #fdfbf7, #78350f）作为主视觉基调。

采用温润柔和的磨砂毛玻璃轻质感（Glassmorphism）与法式复古配色；
注入灵动温润的穿搭卡片与色彩平衡比例指示；
兼具时尚美感与数据可视化严谨度，让收纳与搭配充满仪式感。

三、三端高保真全套系统界面逐图解析

1. PC 端胶囊衣橱策展室与全域看板 (PC Terminal)

(1) 胶囊衣橱资产全景大屏

整合实时气温、个人衣橱总估值、季度实穿率与今日 AI 聚类最佳穿搭方案。 !胶囊衣橱资产全景大屏

(2) 今日风格聚类穿搭卡片与单品联动

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

(3) 穿搭打卡履约热力图

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

(4) 风格聚类穿搭沙盘

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

(5) 闲置服饰物物置换调度中心

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

(6) 单次穿着成本 (CPW) 与衣橱浪费深度审计

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

(7) 私人时尚策展与色彩骨骼诊断 VIP

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

2. 运营管理总控台 (Admin Console)

(1) 全网时尚流转与旧衣循环大屏

实时大屏监控全网数字衣橱录入件数、闲置撮合成交量与累计减少碳排放总量。 !全网时尚流转与旧衣循环大屏

(2) 服饰品类与 Pantone 标准色卡库

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

(3) 闲置单品成色验真与仲裁管理

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

(4) 绿色低碳循环算法与碳账户

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

(5) 系统设置与穿搭聚类算法调参

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

3. 手机移动端与微信小程序随身端 (Mobile App)

(1) 气象穿搭灵感主屏

实时同步本地气象与温差，智能推送今日法式老钱风穿搭组合。 !气象穿搭灵感主屏

(2) 掌上数字衣橱

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

(3) OOTD 穿搭实景打卡

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

四、核心业务时序流与技术实现

sequenceDiagram
    autonumber
    actor User as 用户 (移动端/PC)
    participant Core as 智能衣橱核心引擎
    participant Weather as 气象数据中枢
    participant Engine as 风格聚类推荐算法
    participant Swap as 闲置置换引擎
    participant DB as 数据库持久层

    User->>Core: 拍照录入新购衣物 (如 法式针织开衫)
    Core->>Core: AI 智能抠图去背景 + 色系/材质特征提取
    Core->>DB: 写入个人数字衣橱库
    User->>Core: 请求今日穿搭推荐 (输入场合: 商务通勤)
    Core->>Weather: 获取当前气温与天气 (23℃, 晴空少云)
    Core->>Engine: 匹配温度适配区间 + 色系对比度协调算法
    Engine-->>Core: 输出推荐 Outfit 组合 (开衫 + 高腰西裤 + 乐福鞋)
    Core-->>User: 展现搭配效果与单品穿着建议
    Note over User,Core: 连续30天未穿着的闲置外套
    Core->>Swap: 触发闲置智能断舍离预警
    User->>Swap: 一键将闲置单品发布至置换集市
    Swap->>DB: 生成置换标的，匹配同城穿搭同好需求

核心 Spring Boot 风格聚类推荐与 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<WardrobeItem> userItems = itemRepo.findByUserIdAndStatusNormal(userId);

        // 3. 运行 K-Means 风格色彩特征聚类推荐算法
        OutfitClusterResult cluster = clusterEngine.computeOptimalCombination(
                userItems,
                weather.getTemperatureRange(),
                occasion
        );

        // 4. 重新演算单品单次穿着成本 (Cost-Per-Wear)
        List<OutfitItemVO> 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();
    }
}

五、项目资源与源码获取

完整系统包含：

三端高保真可运行完整工程源码（PC 胶囊大屏 + Admin 时尚总控 + Mobile 随身小程序）；
满分规范 PRD 需求规格说明书 (PRD.md)；
全套 15 张 4K 原生高清设计切图 与生产部署指导手册。

💡 项目完整源码与文档下载直达：点此前往杂乱资源网专栏获取完整项目

【智能衣橱穿搭打卡与二手闲置置换App】基于 Vue3 + Spring Boot + 风格聚类推荐 的设计与实现（含PRD/三端高保真源码/大屏）