# “线上衣橱” Web前端设计文档

## 一、 设计原则与定位
由于项目初期决定优先上线Web端版本，相较于小程序的“轻量级与即时性”，Web端具备**屏幕空间大、键鼠交互效率高、适合批量操作**的优势。因此，Web前端的设计原则为：
1. **工作台模式 (Dashboard-first)**：充分利用宽屏展示更多维度的信息（如左侧导航+中间列表+右侧详情/画布的经典三栏布局）。
2. **高效录入与拖拽交互**：支持本地多图批量拖拽上传，支持衣物在不同空间箱子间的拖拽转移，以及搭配画布中的自由拖拽排版。
3. **响应式设计 (Responsive Design)**：虽然优先PC Web，但需兼容Pad端和移动端浏览器的基础访问（优先适配大屏，优雅降级）。
4. **沉浸式视觉**：采用极简的中性色调（黑、白、高级灰），突出用户上传的彩色衣物实体，界面框架“退居幕后”。

## 二、 全局布局架构
系统采用经典的 **左侧固定导航条 + 顶部功能区 + 核心工作区** 的布局。

### 1. 左侧导航菜单 (Sidebar)
- 个人中心（头像、昵称、快速设置）
- 🎛️ **控制台 (Dashboard)**：概览与数据统计
- 👕 **我的衣橱 (Wardrobe)**：全部单品库
- 📦 **空间管理 (Storage)**：物理位置树状图
- 🎨 **搭配画布 (Outfit Canvas)**：自由创作穿搭
- 📅 **穿搭日历 (Calendar)**：OOTD记录与规划

### 2. 顶部操作栏 (Header)
- 全局搜索框（支持多关键词，如“夏季 白色 衬衫”）
- 快速上传按钮（支持拖拽文件到此区域）
- 消息通知（如：AI抠图完成通知、闲置衣物提醒）
- 当地天气小组件（关联每日推荐）

## 三、 核心页面详细设计

### 1. 控制台 (Dashboard)
- **欢迎卡片**：显示用户名称、今日天气、以及基于天气的“AI今日推荐穿搭”（大图展示，可直接点击“采纳”）。
- **资产概览**：数据仪表盘，展示衣物总数、总价值、已分配空间的比例。
- **快捷入口**：最近添加的衣物、最近生成的搭配方案。
- **闲置提醒区**：“冷宫榜”展示超过90天未穿着的衣物，提示用户断舍离或进行新搭配。

### 2. 我的衣橱 (Wardrobe)
- **左侧过滤面板**：
  - 按分类（上装、下装、连衣裙、鞋靴、包配）
  - 按季节、颜色（提供色块点选）、材质、品牌
  - 按状态（在穿、收纳、送洗、闲置）
- **右侧展示区（瀑布流/网格视图）**：
  - 核心展示抠好图的透明底衣服，卡片hover时显示：品牌、购买价格、**所在物理位置**（如：主卧-2号箱）。
  - **批量操作栏**：多选后可进行批量删除、批量修改标签、批量移动到指定“空间节点”。

### 3. 空间管理 (Storage) - Web端核心优势
利用宽屏优势，采用**分栏联动视图 (类似macOS Finder的列视图)**：
- **左侧树状目录 (Tree View)**：
  - 层级展示：房间 -> 衣柜 -> 挂衣区/收纳箱。
  - 支持右键菜单：新建子空间、重命名、打印该空间的二维码/条形码。
- **右侧内容区**：
  - 点击左侧某个“收纳箱”后，右侧展示该箱子内的所有衣物。
  - **拖拽交互**：用户可以直接从“我的衣橱”列表中将衣服拖拽到左侧树状图的某个节点，完成物理位置的“转移录入”。

### 4. 搭配画布 (Outfit Canvas) - 高效创作区
提供专业级的Web画板体验（基于Canvas/Fabric.js）：
- **左侧单品抽屉**：迷你版的衣橱列表，带搜索和筛选功能。
- **中央画布区**：
  - 宽大的空白画板。
  - 用户从左侧将单品拖入画布。
  - 选中单品后，提供控制手柄进行**缩放、旋转、移动**。
  - 提供图层排序面板（如：将外套置于T恤上一层，z-index调整）。
  - 支持一键去除单品、清空画布、更换画布背景色。
- **右侧属性面板**：
  - 设置该套搭配的名称（如“周五约会”）、适用场景、适用季节。
  - 点击“保存”，系统自动合成画板内容为一张封面图存入“穿搭库”。

### 5. 穿搭日历 (Calendar)
- **全屏月历视图**：每个日期格子足够大，直接展示当天的穿搭方案缩略图。
- **交互**：
  - 点击某一天，弹窗展示当天的详细搭配及天气，支持写心情日记。
  - 用户可将“搭配画布”中保存的方案直接拖拽到未来的某一天，完成提前规划。

## 四、 关键组件与交互细节 (UX/UI)

1. **批量极速上传组件**：
   - 页面任意位置拖入多张图片，触发屏幕底部的“上传与AI处理队列”抽屉。
   - 实时显示每张图片的抠图与标签识别进度（Loading状态 -> 识别成功 -> 等待确认）。
   - 用户可在一屏内快速核对AI打的标签和颜色，点击“全部入库”。
2. **快捷键支持 (Keyboard Shortcuts)**：
   - `Ctrl + S` / `Cmd + S`：在画布页快速保存搭配。
   - `Del` / `Backspace`：删除画布上选中的单品或删除选中的衣物。
   - `Ctrl + F`：快速定位到全局搜索框。
3. **定位高亮动画**：
   - 当用户在任意地方点击某件衣服的“它在哪里？”按钮时，系统平滑过渡到“空间管理”页，自动展开树状目录，并将目标箱子及其内部的这件衣服进行呼吸灯高亮闪烁提示。
4. **骨架屏加载 (Skeleton Screen)**：
   - 针对图片较多的衣橱列表，在图片加载完成前展示与图片轮廓类似的骨架屏，避免页面抖动，提升感知速度。