38b5e3190a
- 响应式项目首页 (Landing, 含 R2 APK 下载) + 路由 /home 调整 - OTA 升级: tauri-plugin-hotswap (lib.rs/main.rs 拆分, 客户端热替换) - OTA 服务端 (check/bundle/manifest-web) + build-ota/genkey/upload 脚本 - 密钥/凭据统一存配置中心 (signing + ota + cloudflare 分组) - Android CI (android-* 分支) + OTA CI (手动触发), 产物上传 R2 - 修复 tsc/构建阻塞问题
218 lines
5.1 KiB
Markdown
218 lines
5.1 KiB
Markdown
# 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
|