docs: add download page readability implementation plan

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,170 @@
+# 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` 全部通过