20260702215426

code/app/.trae/documents/clothes_ui_redesign_plan.md

@@ -0,0 +1,316 @@
+# 衣服模块 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 优化动画
+