# apps/web — Next.js 14 前端

**生成:** 2026-06-05
**分支:** main

## OVERVIEW

Next.js 14 App Router + Tailwind CSS 3 的 SPA（无路由）。`useState<Page>` 切换 14 组件。端口 3001。

## STRUCTURE

```
web/
├── src/
│   ├── app/
│   │   ├── layout.tsx    # 根布局（html lang=zh-CN + Providers）
│   │   └── page.tsx      # SPA 根（14 页面条件渲染）
│   ├── components/       # 14 个页面/组件
│   │   ├── LoginPage.tsx
│   │   ├── AuthProvider.tsx  # JWT 认证上下文
│   │   ├── Sidebar.tsx
│   │   ├── OverviewPage.tsx
│   │   ├── InquiryPage.tsx   # 线索列表
│   │   ├── LeadDetailPage.tsx
│   │   ├── ProductPage.tsx
│   │   ├── ComparisonPage.tsx
│   │   ├── ImagePage.tsx
│   │   ├── RuleCenterPage.tsx  # 含采集器配置
│   │   ├── ReportCenterPage.tsx
│   │   ├── SystemMonitorPage.tsx
│   │   └── AdminPage.tsx
│   └── lib/
│       └── apiBase.ts    # API_BASE = env ?? 'http://localhost:4000'
```

## WHERE TO LOOK

| 任务 | Location | Notes |
|------|----------|-------|
| 增加页面 | `src/components/` + 更新 `page.tsx` 的 Page 类型 | SPA 无路由，手动注册 |
| 修改样式 | `tailwind.config.ts` | secondary(#0051d5), border-subtle, surface-container 系 |
| API 调用 | `src/lib/apiBase.ts` | 生产 Nginx 反代 `/api` |
| 认证 | `AuthProvider.tsx` | localStorage key `auth` |

## CONVENTIONS

- Prettier: noSemi, singleQuote, trailingComma: all, printWidth: 100
- 路径别名 `@/` → `src/`
- 导航通过 `onNavigate` prop 传 page 字符串，参数通过 props
- JWT 存 localStorage key `auth`

## ANTI-PATTERNS

- 不加路由库，保持 SPA useState 模式
- 不在 components 外部加样式文件