171 lines
4.3 KiB
Markdown
171 lines
4.3 KiB
Markdown
# Download Page 可读性优化 实现计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**Goal:** 提高 download page 的可读性：修复 SearchForm 文字颜色、在 commit id 列显示环境标签
|
||
|
||
**Architecture:** 直接修改现有组件，为表单控件添加文字颜色类，为 ApkTable 添加环境标签显示
|
||
|
||
**Tech Stack:** Next.js, React, Tailwind CSS, TypeScript
|
||
|
||
---
|
||
|
||
### Task 1: 修复 SearchForm 文字颜色
|
||
|
||
**Files:**
|
||
- Modify: `app/download/SearchForm.tsx:61,86,112`
|
||
|
||
**Step 1: 为项目下拉框添加文字颜色**
|
||
|
||
修改 `app/download/SearchForm.tsx` 第 61 行，为项目 select 添加 `text-gray-900`：
|
||
|
||
```tsx
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
||
```
|
||
|
||
**Step 2: 为版本下拉框添加文字颜色**
|
||
|
||
修改第 86 行，为版本 select 添加 `text-gray-900`：
|
||
|
||
```tsx
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed text-gray-900"
|
||
```
|
||
|
||
**Step 3: 为 Commit ID 输入框添加文字颜色**
|
||
|
||
修改第 112 行，为 input 添加 `text-gray-900`：
|
||
|
||
```tsx
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
|
||
```
|
||
|
||
**Step 4: 验证修改**
|
||
|
||
Run: `npm run build`
|
||
Expected: Build succeeds without errors
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add app/download/SearchForm.tsx
|
||
git commit -m "fix: improve SearchForm text visibility with darker color
|
||
|
||
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: ApkTable 添加环境标签显示
|
||
|
||
**Files:**
|
||
- Modify: `app/download/ApkTable.tsx`
|
||
|
||
**Step 1: 更新 Apk interface 添加 environment 字段**
|
||
|
||
修改 `app/download/ApkTable.tsx` 的 Apk interface (约第 5-11 行)：
|
||
|
||
```tsx
|
||
import { formatFileSize, formatDateTime } from '@/lib/utils';
|
||
import { type ApkEnvironment } from '@/lib/apk-parser';
|
||
|
||
interface Apk {
|
||
name: string;
|
||
environment: ApkEnvironment;
|
||
commit: string | null;
|
||
size: number;
|
||
modifiedAt: string;
|
||
downloadUrl: string;
|
||
}
|
||
```
|
||
|
||
**Step 2: 添加环境标签渲染辅助函数**
|
||
|
||
在 interface 后、组件前添加：
|
||
|
||
```tsx
|
||
function getEnvironmentBadgeClass(env: ApkEnvironment): string {
|
||
switch (env) {
|
||
case 'product':
|
||
return 'bg-blue-100 text-blue-800';
|
||
case 'dev':
|
||
case 'sandbox':
|
||
return 'bg-green-100 text-green-800';
|
||
default:
|
||
return 'bg-gray-100 text-gray-800';
|
||
}
|
||
}
|
||
|
||
function formatEnvironment(env: ApkEnvironment): string {
|
||
return env;
|
||
}
|
||
```
|
||
|
||
**Step 3: 修改 commit id 列显示环境标签**
|
||
|
||
修改约第 48-52 行的 commit id 单元格：
|
||
|
||
```tsx
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-mono text-sm text-gray-900">
|
||
{apk.commit || '-'}
|
||
</span>
|
||
<span className={`px-2 py-0.5 text-xs font-medium rounded ${getEnvironmentBadgeClass(apk.environment)}`}>
|
||
{formatEnvironment(apk.environment)}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
```
|
||
|
||
**Step 4: 验证修改**
|
||
|
||
Run: `npm run build`
|
||
Expected: Build succeeds without errors
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add app/download/ApkTable.tsx
|
||
git commit -m "feat: add environment badge to commit id column in ApkTable
|
||
|
||
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: 验证 ApkList 传递 environment
|
||
|
||
**Files:**
|
||
- Verify: `app/download/ApkList.tsx`
|
||
|
||
**Step 1: 检查 ApkList 是否已正确传递 environment**
|
||
|
||
查看 `app/download/ApkList.tsx`：
|
||
- Apk interface 已包含 `environment: ApkEnvironment` (第 12 行)
|
||
- ApkList 传给 ApkTable 的 apks 来自 `groupedApks[activeTab]` (第 101 行)
|
||
- 这些 apks 已包含 environment 字段
|
||
|
||
**结论**: 无需修改，environment 已正确传递。
|
||
|
||
**Step 2: 最终验证**
|
||
|
||
Run: `npm run build && npm test`
|
||
Expected: Build succeeds, all tests pass
|
||
|
||
**Step 3: 最终提交（如有未提交的更改）**
|
||
|
||
```bash
|
||
git status
|
||
# If clean, no action needed
|
||
```
|
||
|
||
---
|
||
|
||
## 验收标准
|
||
|
||
1. SearchForm 中选择项目/版本后，文字清晰可见（深灰色）
|
||
2. ApkTable 的 commit id 列显示环境标签，如 `abc1234 [product]`
|
||
3. 不同环境有不同颜色：product=蓝色, dev/sandbox=绿色, other=灰色
|
||
4. `npm run build` 成功
|
||
5. `npm test` 全部通过
|