zhixing-system/.trellis/tasks/archive/2026-08/08-10-selection-status-drawer-compact-layout/implement.md

选股执行状态抽屉与紧凑布局执行计划

Scope

只修改 zhixing-web 前端；后端接口、数据库和原型 HTML 不在本任务中变更。

Ordered Checklist

1. 开发前上下文

• 读取 trellis-before-dev 指定的前端规格和当前工作区状态。
• 确认任务文件、用户现有改动和目标文件边界。

2. 执行状态抽屉

• 新增 selection feature 内的执行状态抽屉组件，复用 Dialog primitive，桌面宽度固定 600px，移动端自适应。
• 新增未完成评估 table 组件，展示名称、代码、状态、原因和空状态。
• 将 ResultMetrics 的执行状态改为抽屉触发入口，移除主页面下方的 FailureList。
• 保持 Escape、遮罩、关闭按钮和焦点返回行为。

3. 紧凑与有界布局

• 收紧 PageLayout 的 gutter、区块 padding 和 vertical rhythm。
• 收紧选股执行工具栏、指标、筛选栏、详情面板、分页和状态卡。
• 修复成功结果工作台的 flex/min-h-0 高度链，确保数据区填满剩余高度、分页固定底部。
• 保持移动端触控尺寸和自然页面滚动。

4. 测试与验证

• 为抽屉、表格、空状态和主页面移除内联列表补充 Testing Library 测试。
• 运行 pnpm format:check、pnpm lint、pnpm typecheck、pnpm test、pnpm build。
• 用浏览器 mock 数据检查桌面和移动视口、抽屉宽度、滚动边界、分页位置及水平溢出。

Verification Notes

• pnpm lint、pnpm typecheck、pnpm test（4 files / 22 tests）和 pnpm build 通过。
• 本次改动文件的 Prettier 检查通过；全量 pnpm format:check 仅因未修改的 DESIGN.md 未格式化而失败。
• 浏览器 mock 已验证 600px 桌面抽屉、移动端无水平溢出、关闭/Escape/遮罩/焦点恢复和工作台高度链。

Validation Commands

在 zhixing-web/ 下运行：

pnpm format:check
pnpm lint
pnpm typecheck
pnpm test
pnpm build

Risky Files and Rollback Points

• src/features/selection/pages/selection-results-page.tsx：页面状态和内联失败列表迁移；可单独回退组件接线。
• src/features/selection/components/*execution* / *evaluation*：新增抽屉与表格；删除新文件即可回退。
• src/app/layout/page-layout.tsx：跨页面密度和滚动边界；若影响 Home，回退该文件的密度 class，再保留 Selection 局部修复。
• src/features/selection/components/selection-results-workbench.tsx：高度链和数据滚动；回退时保留原筛选、分页和主从逻辑。

Review Gates Before Start

• prd.md、design.md、implement.md 已按最终范围收敛。
• implement.jsonl 与 check.jsonl 已填入真实前端规格上下文。
• 用户已批准本规划摘要后，才运行 task.py start。