tech
ddf2729426
- Fix SearchForm text color for better visibility - Add environment tags to commit id column in ApkList Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1.6 KiB
1.6 KiB
Download Page 可读性优化设计
概述
提高 download page 的可读性，解决两个问题：
- SearchForm 内填写/选择的文字颜色过浅
- ApkList 的 commit id 列需要显示环境标签
修改项
1. SearchForm 文字颜色修复
问题: 下拉框选中后的文字和输入框内的文字颜色太浅，用户看不清。
解决方案: 为 select 和 input 元素添加 text-gray-900 类。
修改文件: app/download/SearchForm.tsx
改动点:
- 项目下拉框 (line ~61): 添加
text-gray-900 - 版本下拉框 (line ~86): 添加
text-gray-900 - Commit ID 输入框 (line ~112): 添加
text-gray-900
2. ApkList commit id 列显示环境标签
问题: 当前 commit id 列只显示 commit hash，无法直观看出 APK 的环境。
解决方案: 在 commit id 后面添加彩色环境标签。
修改文件:
app/download/ApkTable.tsx- 接收并显示 environmentapp/download/ApkList.tsx- 传递 environment 属性给 ApkTable
标签样式:
| 环境 | 样式 |
|---|---|
| product | 蓝色背景 bg-blue-100 text-blue-800 |
| dev | 绿色背景 bg-green-100 text-green-800 |
| sandbox | 绿色背景 bg-green-100 text-green-800 |
| other | 灰色背景 bg-gray-100 text-gray-800 |
显示效果示例:
abc1234 [product]
def5678 [dev]
xyz9012 [other]
实现步骤
- 修改
SearchForm.tsx- 为 3 个表单控件添加text-gray-900 - 修改
ApkList.tsx- 确保 Apk interface 包含 environment 并传递给 ApkTable - 修改
ApkTable.tsx- 更新 Apk interface，在 commit 列显示环境标签