# 衣服模块 UI 重新设计计划

## 一、问题分析

### 当前存在的问题

1. **卡片嵌套过多**: 页面中大量使用 `Card` 组件嵌套，导致视觉层次混乱
2. **分类页面丢失**: 用户反馈分类管理页面不可用
3. **缺乏 Apple 设计风格**: 当前设计过于传统，缺乏现代感
4. **信息密度过高**: 内容紧凑，缺乏呼吸感

### Apple 设计风格特点

* **极简主义**: 大量留白，减少视觉干扰

* **大卡片设计**: 单张大卡片承载主要内容，避免多层嵌套

* **毛玻璃效果**: 使用半透明背景增加层次感

* **圆润边角**: 使用较大圆角提升亲和力

* **清晰的信息层级**: 通过间距和字号区分主次

* **柔和阴影**: 细阴影增加立体感但不过分

* **全屏图片**: 图片占据更大比例，视觉冲击力强

***

## 二、页面重新设计方案

### 1. 衣服列表页 (`/clothes`)

**设计思路**: 借鉴 Apple Photos/Shop 的网格布局

**结构**:

```
Header (搜索/筛选/统计)
└── MasonryGrid (瀑布流网格)
    └── 衣服卡片 (图片 + 名称 + 标签)
└── FAB (悬浮添加按钮)
```

**样式特点**:

* 3列网格布局，自适应高度

* 图片圆角 `rounded-2xl`

* 悬浮按钮带阴影 `shadow-xl`

* 减少卡片边框，使用背景区分

### 2. 衣服详情页 (`/clothes/detail/[id]`)

**设计思路**: 全屏沉浸式设计，借鉴 Apple Music

**结构**:

```
导航栏 (透明背景)
└── 全屏图片区域 (60%高度)
└── 内容区域 (名称/品牌/分类/标签/备注)
    └── 分类标签 (胶囊样式)
    └── 属性列表 (图标 + 文字)
└── 底部操作栏 (编辑/删除/刷新)
```

**样式特点**:

* 顶部大图占比 60%

* 导航栏滚动时渐变背景

* 无卡片包裹，直接展示内容

* 使用分割线区分不同区域

* 标签使用圆角胶囊样式

### 3. 搭配列表页 (`/clothes/outfit`)

**设计思路**: 横向卡片滑动 + 列表混合布局

**结构**:

```
Header (筛选/统计)
└── Section (精选搭配)
    └── 横向滚动卡片
└── Section (全部搭配)
    └── 列表卡片
└── FAB (悬浮添加按钮)
```

**样式特点**:

* 精选搭配使用横向滚动

* 列表卡片使用大图+文字布局

* 减少卡片嵌套，扁平化设计

### 4. 搭配详情页 (`/clothes/outfit/detail/[id]`)

**设计思路**: 类似衣服详情页，但增加衣服列表

**结构**:

```
导航栏 (透明背景)
└── 全屏封面图
└── 内容区域
    └── 搭配信息
    └── 包含衣服列表 (横向滚动)
└── 底部操作栏
```

**样式特点**:

* 衣服列表使用横向滚动卡片

* 无卡片嵌套，直接使用分割线

### 5. 分类管理页 (`/clothes/manage`)

**设计思路**: 列表式管理，借鉴 Apple 设置

**结构**:

```
Header (标题)
└── Section (衣服分类)
    └── 分类项 (图标 + 名称 + 操作)
└── Section (衣服标签)
    └── 标签组 (可展开)
        └── 标签项
└── Section (搭配分类)
    └── 分类项
└── Section (搭配标签)
    └── 标签组
```

**样式特点**:

* 使用 Section 分隔不同类型

* 分类项使用列表式布局

* 标签组可展开/折叠

* 减少卡片使用，增加留白

***

## 三、文件结构与修改清单

### 需要修改的文件

| 文件路径                                           | 修改内容              |
| ---------------------------------------------- | ----------------- |
| `src/app/clothes/(tabs)/home/index.tsx`        | 重新设计衣服列表页，使用网格布局  |
| `src/app/clothes/detail/[id]/index.tsx`        | 重新设计衣服详情页，全屏沉浸式   |
| `src/app/clothes/(tabs)/outfit/index.tsx`      | 重新设计搭配列表页，横向+列表混合 |
| `src/app/clothes/outfit/detail/[id]/index.tsx` | 重新设计搭配详情页，横向衣服列表  |
| `src/app/clothes/(tabs)/manage/index.tsx`      | 修复分类管理页，列表式设计     |

### 需要新增的文件

| 文件路径                                                | 说明       |
| --------------------------------------------------- | -------- |
| `src/components/clothing/ClothesGridItem.tsx`       | 网格衣服卡片组件 |
| `src/components/clothing/OutfitHorizontalCard.tsx`  | 横向搭配卡片组件 |
| `src/components/clothing/ClothesHorizontalCard.tsx` | 横向衣服卡片组件 |

***

## 四、设计规范

### 色彩规范 (沿用项目现有)

* 主色调: `accent` (#22C55E 系)

* 背景: 极浅灰 `oklch(0.98 0 0)`

* 文字: 深灰 `oklch(0.15 0 0)`

* 辅助文字: `gray-500`

* 边框/分隔线: `gray-200/100`

### 圆角规范

* 卡片/容器: `rounded-2xl`

* 按钮/图标: `rounded-full`

* 标签/胶囊: `rounded-full`

### 间距规范

* 页面水平内边距: `px-5` (20px)

* 元素间距: `gap-4`

* 卡片内边距: `px-5 py-4`

### 阴影规范

* 主要卡片: `shadow-sm`

* 悬浮元素: `shadow-md`

* 重要按钮: `shadow-lg`

### 字体规范

* 标题: 18-20px, font-semibold

* 正文: 15px, font-normal

* 辅助文字: 13-14px, font-normal

* 标签/数字: 12px, font-medium

***

## 五、关键设计原则

1. **避免卡片嵌套**: 页面中最多使用一层卡片，避免卡片内套卡片
2. **使用分割线**: 用 `border-b` 或空白区域替代卡片分隔内容
3. **大图优先**: 图片占据更大比例，提升视觉冲击力
4. **毛玻璃效果**: 导航栏和底部操作栏使用半透明背景
5. **留白设计**: 增加元素间距，提升呼吸感
6. **统一的交互反馈**: 按钮按压缩放、列表项点击高亮

***

## 六、实施步骤

### 步骤 1: 创建基础组件

* 创建 `ClothesGridItem` 网格卡片组件

* 创建 `OutfitHorizontalCard` 横向搭配卡片

* 创建 `ClothesHorizontalCard` 横向衣服卡片

### 步骤 2: 重新设计衣服列表页

* 使用网格布局替代卡片列表

* 添加搜索和筛选功能

* 添加悬浮添加按钮

### 步骤 3: 重新设计衣服详情页

* 全屏图片布局

* 导航栏透明渐变

* 底部操作栏

* 无卡片嵌套设计

### 步骤 4: 重新设计搭配列表页

* 精选搭配横向滚动

* 全部搭配列表布局

* 添加悬浮添加按钮

### 步骤 5: 重新设计搭配详情页

* 全屏封面图

* 横向衣服列表

* 底部操作栏

### 步骤 6: 修复分类管理页

* 列表式设计替代卡片式

* 使用 Section 分隔不同类型

* 修复分类管理功能

### 步骤 7: 验证和测试

* TypeScript 类型检查

* 运行构建验证

* 检查样式一致性

***

## 七、风险与注意事项

### 潜在风险

1. **性能问题**: 网格布局可能影响性能，需使用虚拟列表
2. **兼容性问题**: 毛玻璃效果在 Android 上可能表现不同
3. **导航栏透明度**: 需要处理滚动时的背景渐变

### 注意事项

1. **保持一致性**: 与项目现有设计规范保持一致
2. **响应式设计**: 确保不同屏幕尺寸下正常显示
3. **无障碍访问**: 确保标签和按钮有足够的对比度
4. **动画性能**: 使用 React Native Reanimated 优化动画