ftdl/docs/plans/2026-03-05-download-page-readability-design.md

Download Page 可读性优化设计

概述

提高 download page 的可读性，解决两个问题：

1. SearchForm 内填写/选择的文字颜色过浅
2. 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 - 接收并显示 environment
• app/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]

实现步骤

1. 修改 SearchForm.tsx - 为 3 个表单控件添加 text-gray-900
2. 修改 ApkList.tsx - 确保 Apk interface 包含 environment 并传递给 ApkTable
3. 修改 ApkTable.tsx - 更新 Apk interface，在 commit 列显示环境标签