餐厅菜谱项目风格视觉优化实施计划
目标:标题栏不动,页面保持项目蓝背景;档口单独一行,
日期控件与餐次切换同一行,分类独立一行,并统一筛选区与菜品卡片层级。
本计划不修改业务请求、接口、数据模型、筛选逻辑、详情跳转和双 DPI 机制,
也不执行 Git 暂存、提交或推送。
已确认设计
- 标题栏保持现状,不修改 BaseActivity、NetWorkStatusView 和返回按钮。
- 页面背景继续使用
#1067E4,不改成整页白色。
- 筛选区使用
#1F6F9F 深蓝底板和青色描边。
- 第一行展示档口;第二行依次展示日期标签、日期控件和餐次;第三行展示分类。
- 分类普通态使用项目浅蓝,选中态使用项目蓝。
- 菜品卡片使用首页现有白到浅蓝渐变、蓝灰描边和轻量投影。
第二轮真机反馈调整
- 档口行、日期行和分类行整体高度均增加为当前的 1.5 倍,内部输入框和按钮同步放大,文字大小保持不变。
- 档口行、日期行由 56 调整为 84,内部控件由 48 调整为 72。
- 分类行由 64 调整为 96,分类按钮由 48 调整为 72。
- 餐次区域固定为 320 基准宽度,继续紧跟日期控件。
- 餐次选中背景使用
#36D9FF;未选中文字使用黑色,选中文字使用白色。
- 分类选中背景使用
#2799DD;未选中文字使用黑色,选中文字使用白色。
- 标题栏、页面主蓝背景、业务逻辑、控件 ID、接口和菜品卡片保持不变。
文件范围
| 文件 | 职责 |
| 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. 页面专用样式
- 创建深蓝筛选底板,使用现有标题深蓝和青色描边。
- 创建浅蓝输入控件普通态、按压态及 selector。
- 分类普通态使用页面专用浅蓝底,选中态使用页面专用项目蓝背景。
- 用 xmllint 检查新增 drawable 和 colors.xml。
2. 筛选区布局
- 现有两行筛选控件包入深蓝圆角容器,根布局不设置新背景。
- 档口保持第一行并保留完整路径展示空间。
- 第二行按“日期标签 108 → 日期控件 300 → 间距 24 → 餐次剩余宽度”排列。
- 分类保持独立横向滚动行,七个分类 ID 不变。
3. 餐次与菜品卡片
- 餐次普通背景使用项目浅蓝,选中背景使用亮青色;普通文字黑色,选中文字白色。
- 菜品卡片改为白色到浅蓝灰渐变,并使用首页蓝灰描边。
- 卡片增加 8 基准轻量投影,不改变卡片和图片尺寸。
4. 验证与记录
- 对所有涉及 XML 执行 xmllint,并执行 git diff --check。
- 使用 JDK 8 执行
:app:processDebugResources assembleDebug。
- 确认标题栏、FoodListActivity、接口、数据模型和详情页没有改动。
- 将范围、关键实现、验证结果和真机风险写入外部 CHANGELOG。
5. 第二轮尺寸和状态色调整
- 档口行、日期行和分类行分别调整为 84、84、96 基准高度,内部控件统一调整为 72。
- 餐次区域移除剩余宽度权重,固定为 320 基准宽度。
- 餐次和分类的未选中文字统一使用黑色,选中文字统一使用白色。
- 复查 XML、差异格式、Debug 构建和 Debug 单元测试。
验收标准
- 标题栏外观和行为与改动前一致。
- 内容区保持项目蓝背景。
- 餐次位于日期控件右侧,四餐次完整显示。
- 分类、三列菜品、点击、滚动和筛选逻辑不变。
- YF_029E 与 K203 继续复用现有双 DPI 映射。
实施与验证结果
- 已按确认效果稿完成实施,标题栏相关文件未修改。
- 档口选择保持第一行;第二行连续排列日期标签、日期控件和餐次控件。
- 页面根布局未增加白色背景,继续使用项目主蓝。
- 筛选区使用项目标题深蓝、青色描边和浅蓝输入控件。
- 分类普通态使用页面专用浅蓝样式,选中态使用项目蓝;未选中文字为黑色,选中文字为白色。
- 餐次区域固定为 320 基准宽度,选中态使用亮青色;未选中文字为黑色,选中文字为白色。
- 档口行、日期行和分类行高度分别调整为 84、84、96,内部输入框和按钮统一调整为 72。
- 餐次控件和菜品卡片继续复用首页现有颜色、渐变和描边。
- 所有涉及 XML 通过 xmllint,git diff --check 通过。
- 第二轮调整后,JDK 8 执行资源处理与 Debug 构建成功:
BUILD SUCCESSFUL in 20s,
100 个任务中 22 个执行、78 个复用。
- 第二轮调整后,JDK 8 执行 Debug 单元测试成功:
BUILD SUCCESSFUL in 4s,
56 个任务中 3 个执行、53 个复用。
- 未安装 APK;建议在 YF_029E 与 K203 真机确认横向空间、描边和投影。
- 未执行 Git 暂存、提交、推送或分支操作。