diff --git a/docs/plans/2026-03-05-download-page-readability-design.md b/docs/plans/2026-03-05-download-page-readability-design.md new file mode 100644 index 0000000..194d020 --- /dev/null +++ b/docs/plans/2026-03-05-download-page-readability-design.md @@ -0,0 +1,53 @@ +# 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 列显示环境标签