# 路由与页面结构

> 本文约定前端页面路由、页面职责和组件归属。没有前端页面的项目，可改成 CLI 命令、后台任务或模块入口说明。

## 页面路由

| 路由 | 页面 | MVP 说明 | 关联用户故事 | 关联交互 |
| --- | --- | --- | --- | --- |
| `/` | 首页 / 列表页 | 展示主入口 | 【US 编号】 | 【IX 编号】 |
| `/items/{id}` | 详情页 | 展示单个资源详情 | 【US 编号】 | 【IX 编号】 |
| `/login` | 登录页 | 登录入口 | 【US 编号】 | 【IX 编号】 |
| `/settings` | 设置页 | 用户或系统配置 | 【US 编号】 | 【IX 编号】 |

## 页面职责

### 首页 / 列表页

- 展示【核心资源列表】。
- 支持【筛选 / 搜索 / 新建】。
- 展示【状态 / 进度 / 空状态】。

### 详情页

- 根据 URL 参数定位资源。
- 展示核心信息。
- 支持 MVP 范围内的关键操作。
- 异常时展示明确错误或降级状态。

### 登录页

- 通过账号 API 建立会话。
- 登录成功后返回原目标页或首页。

## 交互关联

- 每个有用户操作或自动状态变化的页面，关联[用户故事清单](07-user-stories.md)中的 US 编号和[交互清单](08-interaction-checklist.md)中的 IX 编号。
- 本文只说明页面入口、职责和导航；加载、空、错误、权限、校验、确认、撤销和无障碍等具体行为以交互清单为准。
- 路由、页面职责或导航规则变化后，检查受影响的 US、IX、API 合约和任务验收是否需要同步。

## 组件建议

| 组件 | 归属 | 说明 |
| --- | --- | --- |
| `AppShell` | 全局 | 页面框架、导航、登录态入口 |
| `ItemList` | 首页 | 渲染资源列表 |
| `ItemDetail` | 详情页 | 渲染资源详情 |
| `AuthForm` | 登录页 | 登录 / 注册表单 |

## 导航规则

- 首页进入详情页：点击资源项。
- 详情页返回首页：保留返回入口。
- 未登录访问需要账号的页面时，引导登录。
- 权限不足时显示明确错误，不静默失败。