diff --git a/docs/plans/2026-03-05-download-page-readability.md b/docs/plans/2026-03-05-download-page-readability.md new file mode 100644 index 0000000..7118408 --- /dev/null +++ b/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 " +``` + +--- + +### 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 + +
+ + {apk.commit || '-'} + + + {formatEnvironment(apk.environment)} + +
+ +``` + +**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 " +``` + +--- + +### 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` 全部通过