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

衣服模块 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 优化动画