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>
54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
# 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 列显示环境标签
|