Wardrobe/DESIGN.md

Wardrobe 衣物管理系统 - 设计规范

1. 项目概述

基于 Tauri 框架封装的 Android 衣物管理应用，帮助用户管理衣橱、获取 AI 穿搭推荐、记录每日穿搭。

2. 竞品分析

2.1 截图分析结果

• 屏幕尺寸: 1080×2400 (Android 标准 20:9)
• 主色调: 暖白/奶油色 (#FCF9F4, #FBF8F3)
• 点缀色: 蜜桃色/粉色 (#FFE8E0, #FFF6ED)
• 设计风格: 简约、温暖、卡片式布局

2.2 竞品功能对比

功能	Acloset	J衣橱	WearWow	爱搭衣橱	本项目
数字衣橱	✅	✅	✅	✅	✅
AI 识别	✅	✅	✅	✅	✅
搭配推荐	✅	✅	✅	✅	✅
穿搭日历	✅	✅	✅	✅	✅
虚拟试衣	✅	❌	✅	✅	❌
清洁管理	❌	✅	❌	✅	✅
旅行规划	✅	❌	❌	❌	❌
风格统计	✅	✅	✅	✅	✅
本地优先	❌	✅	❌	❌	✅

3. 设计系统

3.1 色彩

主背景:     #FCF9F4 (暖白)
卡片背景:   #FFFFFF
暖色背景:   #F5EDE6
边框色:     #F0E8DF
主文字:     #1A1A1A
次文字:     #666666
辅助文字:   #999999
强调色:     #E8C4A0 (金色)
点缀色:     #FFE8E0 (蜜桃)
警告色:     #E74C3C
成功色:     #27AE60

3.2 字体

• 标题: 28px, 700 weight
• 副标题: 18px, 600 weight
• 正文: 15px, 400 weight
• 辅助: 12-13px, 400 weight
• 系统字体: -apple-system, PingFang SC, Microsoft YaHei

3.3 圆角

• 大卡片: 16px
• 中卡片: 10px
• 小元素: 6px
• 标签/徽章: 20px (全圆角)

3.4 间距

• 页面边距: 20px
• 卡片内边距: 16px
• 元素间距: 8-12px
• 区块间距: 20-24px

4. 页面结构

4.1 底部导航 (5个Tab)

Tab	图标	页面	功能
首页	🏠	page-home	今日推荐、概览统计、提醒
搭配	❤️	page-outfit	AI 搭配推荐、场景筛选
添加	➕	page-add	拍照/上传、AI 识别、表单
衣橱	👜	page-closet	衣物列表、搜索筛选
我的	👤	page-profile	个人中心、设置

4.2 首页 (Home)

• 天气卡片 (温度、季节、场合建议)
• 今日推荐搭配 (大卡片、4件单品预览)
• 衣橱概览 (总数、搭配数、利用率)
• 分类网格 (6类: 上衣/下装/外套/连衣裙/鞋履/配饰)
• 提醒列表 (未穿、待清洁)

4.3 衣橱 (Closet)

• 搜索栏
• 分类筛选 (品类 + 季节 + 颜色)
• 视图切换 (网格/列表)
• 衣物卡片 (图片 + 名称 + 穿着频率)

4.4 添加衣物 (Add)

• 照片上传区 (拍照/相册)
• AI 识别提示
• 基础信息表单 (品类、名称、颜色、品牌)
• 属性标签 (季节、场合、正式度、厚度)
• 购买信息 (日期、价格)

4.5 衣物详情 (Detail)

• 大图展示
• 标签信息
• 穿着统计 (本月/总次数/拥有天数)
• 基本信息
• 清洁记录
• 搭配历史

4.6 搭配推荐 (Outfit)

• 季节/场合筛选
• 搭配方案卡片 (匹配度、单品列表)
• AI 解析说明
• 保存/详情操作

4.7 穿搭日历 (Calendar)

• 月历视图 (标记有搭配的日期)
• 当日搭配详情
• 历史穿搭列表

4.8 个人中心 (Profile)

• 用户信息
• 统计数据 (衣物/搭配/利用率/连续天数)
• 功能菜单 (日历/收藏/清洁/统计/同步/导出/设置)

5. 技术架构

5.1 Tauri + Android

wardrobe-app/
├── src-tauri/           # Tauri 后端 (Rust)
│   ├── Cargo.toml
│   ├── tauri.conf.json
│   └── src/
│       └── main.rs
├── src/                 # 前端 (React/Vue/Svelte)
│   ├── components/
│   ├── pages/
│   ├── stores/
│   └── App.tsx
├── android/             # Android 原生层
│   └── app/
└── package.json

5.2 数据模型

interface ClothingItem {
  id: string;
  name: string;
  category: 'top' | 'bottom' | 'outer' | 'dress' | 'shoes' | 'accessory';
  color: string;
  brand?: string;
  material?: string;
  seasons: string[];
  occasions: string[];
  formality: number;    // 0-100
  thickness: number;    // 0-100
  imageUrl: string;
  purchaseDate?: string;
  purchasePrice?: number;
  lastCleaned?: string;
  cleanMethod?: string;
  wearCount: number;
  lastWorn?: string;
  isFavorite: boolean;
  createdAt: string;
  updatedAt: string;
}

interface Outfit {
  id: string;
  name: string;
  items: string[];      // ClothingItem IDs
  occasion: string;
  season: string;
  matchScore: number;   // 0-100
  aiAnalysis?: string;
  isSaved: boolean;
  createdAt: string;
}

interface DailyRecord {
  date: string;
  outfitId?: string;
  weather?: {
    temp: number;
    condition: string;
  };
  notes?: string;
}

6. 原型文件

原型位于 prototype/ 目录:

• index.html - 主页面结构
• style.css - 样式定义
• script.js - 交互逻辑

打开方式: 直接在浏览器中打开 prototype/index.html

7. 下一步

1. 搭建 Tauri 项目骨架
2. 实现前端页面 (React + TailwindCSS)
3. 集成本地存储 (SQLite)
4. 实现 AI 识别功能 (相机 + 图像识别)
5. 构建 Android APK