# 前端功能规格 — {{fe_id}} {{name}}

> 关联 REQ：{{associated_reqs}}
> 关联原型：{{associated_prototypes}}
> 日期：{{date}}

## 一、功能概述

{{feature_overview}}

## 二、组件树

<!-- 基于关联原型的 DOM 结构推导。多页则按页面分块；每层缩进表示嵌套关系。 -->

```
{{component_tree}}
```

## 三、页面状态机

| # | 状态 | 触发条件 | 视觉表现 | 用户可执行操作 |
|---|------|---------|---------|--------------|
{{state_machine_rows}}

至少包含：loading / empty / error / 正常 / 提交中 五态。

## 四、消费的后端端点

| # | 方法 | 路径 | 触发时机 | 关联 REQ |
|---|------|------|---------|---------|
{{endpoint_rows}}

## 五、业务规则前端复刻清单

| # | 规则描述 | 触发时机 | 报错文案 | 来源 REQ |
|---|---------|---------|---------|---------|
{{validation_rows}}

> **要求**：每条规则必须在前端 form-level 校验中复刻，不仅依赖后端报错。文案与后端语义一致。

## 六、Design Tokens 引用清单

<!-- 列出本页面用到的 token 变量名（不写 hex），如 var(--color-primary) / var(--color-bg-card)。来源见 docs/06 § 二。 -->

```
{{token_list}}
```

## 七、交互流程关键路径

{{interaction_flow}}

## 八、备注与开放问题

{{open_questions}}