餐厅菜谱项目风格视觉优化实施计划

目标:标题栏不动,页面保持项目蓝背景;档口单独一行, 日期控件与餐次切换同一行,分类独立一行,并统一筛选区与菜品卡片层级。

本计划不修改业务请求、接口、数据模型、筛选逻辑、详情跳转和双 DPI 机制, 也不执行 Git 暂存、提交或推送。

已确认设计

第二轮真机反馈调整

文件范围

文件职责
activity_food_list.xml筛选区和日期、餐次、分类排列
food_list_item_layout.xml菜品卡片投影与文字层级
SegmentedMealTabView.java餐次项目色与文字状态
bac_food_list_item.xml菜品卡片渐变和描边
food_category_tab_bg.xml分类普通态与选中态
food_list_* drawable筛选底板和输入控件状态
colors.xml输入控件按压色

实施步骤

1. 页面专用样式

  1. 创建深蓝筛选底板,使用现有标题深蓝和青色描边。
  2. 创建浅蓝输入控件普通态、按压态及 selector。
  3. 分类普通态使用页面专用浅蓝底,选中态使用页面专用项目蓝背景。
  4. 用 xmllint 检查新增 drawable 和 colors.xml。

2. 筛选区布局

  1. 现有两行筛选控件包入深蓝圆角容器,根布局不设置新背景。
  2. 档口保持第一行并保留完整路径展示空间。
  3. 第二行按“日期标签 108 → 日期控件 300 → 间距 24 → 餐次剩余宽度”排列。
  4. 分类保持独立横向滚动行,七个分类 ID 不变。

3. 餐次与菜品卡片

  1. 餐次普通背景使用项目浅蓝,选中背景使用亮青色;普通文字黑色,选中文字白色。
  2. 菜品卡片改为白色到浅蓝灰渐变,并使用首页蓝灰描边。
  3. 卡片增加 8 基准轻量投影,不改变卡片和图片尺寸。

4. 验证与记录

  1. 对所有涉及 XML 执行 xmllint,并执行 git diff --check。
  2. 使用 JDK 8 执行 :app:processDebugResources assembleDebug
  3. 确认标题栏、FoodListActivity、接口、数据模型和详情页没有改动。
  4. 将范围、关键实现、验证结果和真机风险写入外部 CHANGELOG。

5. 第二轮尺寸和状态色调整

  1. 档口行、日期行和分类行分别调整为 84、84、96 基准高度,内部控件统一调整为 72。
  2. 餐次区域移除剩余宽度权重,固定为 320 基准宽度。
  3. 餐次和分类的未选中文字统一使用黑色,选中文字统一使用白色。
  4. 复查 XML、差异格式、Debug 构建和 Debug 单元测试。

验收标准

实施与验证结果