# 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 数据模型

```typescript
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