#前端开发

eval_752 的前端开发指南。

#技术栈

• React 19
• Vite
• TypeScript
• React Router
• TanStack Query
• Tailwind CSS
• shadcn/ui

#项目结构

frontend/src/
├── app/           # Routes and layouts
├── components/    # Reusable UI components
├── features/      # Feature modules
├── hooks/         # Custom React hooks
└── api/           # API clients and query helpers

#开发环境

cd frontend
pnpm install
pnpm dev

本地开发时，Vite server 会把同源 /api/* 请求代理到后端。 Docker preview 镜像则通过 frontend/scripts/preview-server.cjs 提供相同契约， 因此 SPA 默认可以使用 VITE_API_BASE_URL=/api。

#质量标准

pnpm lint
pnpm typecheck
pnpm test
pnpm test:e2e

#关键模式

• 在 Dashboard、Runs、Comparison 间复用共享的 surface primitives
• 使用 event-driven reducers 维护 active run surfaces
• 使用 TanStack Query 做列表与快照 hydrate
• 交互优先满足可访问性，并提供 reduced-motion fallback
• 共享 locale catalogs，以及浏览器 / 手动 locale 解析逻辑

#Active Runs 架构

active runs board 由三层组成：

1. /runs/active 快照 hydrate
2. /runs/events SSE updates
3. 一个合并 run_status、run_progress、run_item 的 reducer

这样可以在多 run 同时活跃时保持 Runs 页面响应，而不必在每个 item 状态变化后做整页 refetch。

本地化约定见 国际化。